Merge pull request #7 from openedx/bw/base_componentry

Bw/base componentry

Author: Ben Warzeski

package-lock.json

@@ -38,25 +38,30 @@
     "@edx/frontend-component-header": "4.2.3",
     "@edx/frontend-platform": "4.5.1",
     "@edx/paragon": "^20.20.0",
-    "@edx/react-unit-test-utils": "npm:@edx/[email protected]",
+    "@edx/react-unit-test-utils": "1.5.3",
+    "@edx/tinymce-language-selector": "1.1.0",
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
     "@fortawesome/free-regular-svg-icons": "5.15.4",
     "@fortawesome/free-solid-svg-icons": "5.15.4",
     "@fortawesome/react-fontawesome": "0.2.0",
+    "@tanstack/react-query": "^4.29.25",
+    "@tinymce/tinymce-react": "3.8.4",
+    "classnames": "^2.3.2",
     "core-js": "3.31.1",
+    "filesize": "^8.0.6",
     "prop-types": "15.8.1",
     "query-string": "^8.1.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "react-query": "^3.39.3",
     "react-redux": "7.2.9",
     "react-router": "5.3.4",
     "react-router-dom": "5.3.4",
     "redux": "4.2.1",
     "redux-devtools-extension": "^2.13.9",
     "redux-logger": "^3.0.6",
-    "regenerator-runtime": "0.13.11"
+    "regenerator-runtime": "0.13.11",
+    "tinymce": "5.10.7"
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.1.1",

package.json

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import filesize from 'filesize';
+
+import messages from './messages';
+
+const FileMetaDisplay = ({ name, description, size }) => (
+  <>
+    {console.log({ name, description, size })}
+    <div className="file-meta-option">
+      <strong><FormattedMessage {...messages.filePopoverNameTitle} /></strong>
+      <br />
+      {name}
+    </div>
+    <div className="file-meta-option">
+      <strong><FormattedMessage {...messages.filePopoverDescriptionTitle} /></strong>
+      <br />
+      {description}
+    </div>
+    <div className="file-meta-option">
+      <strong><FormattedMessage {...messages.fileSizeTitle} /></strong>
+      <br />
+      {typeof (size) === 'number' ? filesize(size) : 'Unknown'}
+    </div>
+  </>
+);
+
+FileMetaDisplay.defaultProps = {
+  description: '',
+  size: null,
+};
+
+FileMetaDisplay.propTypes = {
+  name: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  size: PropTypes.number,
+};
+
+export default FileMetaDisplay;

src/components/FileUpload/FileMetaDisplay.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { DataTable, Dropzone } from '@edx/paragon';
+
+import { useSubmissionResponse } from 'data/services/lms/hooks/selectors';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+import filesize from 'filesize';
+
+import messages from './messages';
+
+const FileUpload = () => {
+  const { uploadedFiles } = useSubmissionResponse();
+  const { formatMessage } = useIntl();
+  return (
+    <div>
+      <h3>File Upload</h3>
+      {uploadedFiles && (
+        <>
+          <b>Uploaded Files</b>
+          <DataTable
+            itemCount={uploadedFiles.length}
+            data={uploadedFiles.map(file => ({
+              ...file,
+              size: typeof file.size === 'number' ? filesize(file.size) : 'Unknown',
+            }))}
+            columns={[
+              {
+                Header: formatMessage(messages.fileNameTitle),
+                accessor: 'name',
+              },
+              {
+                Header: formatMessage(messages.fileDescriptionTitle),
+                accessor: 'description',
+              },
+              {
+                Header: formatMessage(messages.fileSizeTitle),
+                accessor: 'size',
+              },
+            ]}
+          />
+        </>
+      )}
+      <Dropzone />
+    </div>
+  );
+};
+
+export default FileUpload;

src/components/FileUpload/index.jsx

@@ -0,0 +1,21 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  fileNameTitle: {
+    id: 'ora-grading.FileContent.fileNameTitle',
+    defaultMessage: 'File Name',
+    description: ' title for file name',
+  },
+  fileDescriptionTitle: {
+    id: 'ora-grading.FileCellContent.fileDescriptionTitle',
+    defaultMessage: 'File Description',
+    description: ' title for file description',
+  },
+  fileSizeTitle: {
+    id: 'ora-grading.FileCellContent.fileSizeTitle',
+    defaultMessage: 'File Size',
+    description: ' title for file size',
+  },
+});
+
+export default messages;

src/components/FileUpload/messages.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  OverlayTrigger,
+  Popover,
+  Icon,
+  IconButton,
+} from '@edx/paragon';
+import { InfoOutline } from '@edx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { nullMethod } from 'hooks';
+
+import messages from './messages';
+
+/**
+ * <InfoPopover />
+ */
+export const InfoPopover = ({ onClick, children }) => {
+  const { formatMessage } = useIntl();
+  return (
+    <OverlayTrigger
+      trigger="focus"
+      placement="right-end"
+      flip
+      overlay={(
+        <Popover id="info-popover" className="overlay-help-popover">
+          <Popover.Content>{children}</Popover.Content>
+        </Popover>
+      )}
+    >
+      <IconButton
+        className="esg-help-icon"
+        src={InfoOutline}
+        alt={formatMessage(messages.altText)}
+        iconAs={Icon}
+        onClick={onClick}
+      />
+    </OverlayTrigger>
+  );
+};
+
+InfoPopover.defaultProps = {
+  onClick: nullMethod,
+};
+InfoPopover.propTypes = {
+  onClick: PropTypes.func,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]).isRequired,
+};
+
+export default InfoPopover;

src/components/InfoPopover/index.jsx

@@ -0,0 +1,11 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  altText: {
+    id: 'ora-grading.InfoPopover.alt-text',
+    defaultMessage: 'Display more info',
+    description: 'Info popover trigger element alt-text',
+  },
+});
+
+export default messages;

src/components/InfoPopover/messages.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { useORAConfigData } from 'data/services/lms/hooks/selectors';
+
+export const Prompt = ({ promptIndex }) => {
+  const { prompts } = useORAConfigData();
+  return (
+    <div className="m-1 p-1">
+      <h3>Prompt {promptIndex + 1}</h3>
+      <div dangerouslySetInnerHTML={{ __html: prompts[promptIndex] }} />
+    </div>
+  );
+};
+
+Prompt.propTypes = {
+  promptIndex: PropTypes.number.isRequired,
+};
+
+export default Prompt;

src/components/Prompt/index.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Form } from '@edx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { StrictDict, useKeyedState } from '@edx/react-unit-test-utils';
+
+import { feedbackRequirement } from 'data/services/lms/constants';
+import messages from './messages';
+
+export const stateKeys = StrictDict({
+  value: 'value',
+});
+
+/**
+ * <CriterionFeedback />
+ */
+const CriterionFeedback = ({
+  criterion,
+}) => {
+  const [value, setValue] = useKeyedState(stateKeys.value, '');
+  const { formatMessage } = useIntl();
+
+  if (
+    !criterion.feedbackEnabled
+    || criterion.feedbackRequired === feedbackRequirement.disabled
+  ) {
+    return null;
+  }
+
+  const onChange = ({ target }) => { setValue(target.value); };
+  let commentMessage = formatMessage(messages.addComments);
+  if (criterion.feedbackRequired === feedbackRequirement.optional) {
+    commentMessage += ` ${formatMessage(messages.optional)}`;
+  }
+
+  const isInvalid = value === '';
+
+  return (
+    <Form.Group isInvalid={isInvalid}>
+      <Form.Control
+        as="textarea"
+        className="criterion-feedback feedback-input"
+        floatingLabel={commentMessage}
+        value={value}
+        onChange={onChange}
+      />
+      {isInvalid && (
+        <Form.Control.Feedback type="invalid" className="feedback-error-msg">
+          {formatMessage(messages.criterionFeedbackError)}
+        </Form.Control.Feedback>
+      )}
+    </Form.Group>
+  );
+};
+
+CriterionFeedback.propTypes = {
+  criterion: PropTypes.shape({
+    feedbackEnabled: PropTypes.bool,
+    feedbackRequired: PropTypes.string,
+  }).isRequired,
+};
+
+export default CriterionFeedback;

src/components/Rubric/CriterionContainer/CriterionFeedback.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Form } from '@edx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { StrictDict, useKeyedState } from '@edx/react-unit-test-utils';
+
+import messages from './messages';
+
+export const stateKeys = StrictDict({
+  value: 'value',
+});
+
+/**
+ * <RadioCriterion />
+ */
+const RadioCriterion = ({
+  isGrading,
+  criterion,
+}) => {
+  const [value, setValue] = useKeyedState(stateKeys.value, '');
+  const { formatMessage } = useIntl();
+  const onChange = ({ target }) => { setValue(target.value); };
+  const isInvalid = value === '';
+
+  return (
+    <Form.RadioSet name={criterion.name} value={value}>
+      {criterion.options.map((option) => (
+        <Form.Radio
+          className="criteria-option"
+          key={option.name}
+          value={option.name}
+          description={formatMessage(messages.optionPoints, { points: option.points })}
+          onChange={onChange}
+          disabled={!isGrading}
+        >
+          {option.name}
+        </Form.Radio>
+      ))}
+      {isInvalid && (
+      <Form.Control.Feedback type="invalid" className="feedback-error-msg">
+        {formatMessage(messages.rubricSelectedError)}
+      </Form.Control.Feedback>
+      )}
+    </Form.RadioSet>
+  );
+};
+
+RadioCriterion.propTypes = {
+  isGrading: PropTypes.bool.isRequired,
+  criterion: PropTypes.shape({
+    name: PropTypes.string,
+    options: PropTypes.arrayOf(PropTypes.shape({
+      name: PropTypes.string,
+      description: PropTypes.string,
+      points: PropTypes.number,
+    })),
+  }).isRequired,
+};
+
+export default RadioCriterion;