Merge branch 'master' of https://github.com/openedx/frontend-app-ora into mashal-m/react-upgrade-to-v17

Author: mashal-m

.eslintignore

@@ -1,4 +1,6 @@
 coverage/*
 dist/
 node_modules/
-jest.config.js
+jest.config.js
+webpack.*.js
+.eslintrc.js

.github/workflows/ci.yml

@@ -22,7 +22,7 @@ jobs:
       with:
         node-version: ${{ env.NODE_VER }}
     - name: Install dependencies
-      run: npm ci
+      run: npm ci --legacy-peer-deps
     - name: Lint
       run: npm run lint
     - name: Test

.github/workflows/commitlint.yml

@@ -7,4 +7,14 @@ on:
 
 jobs:
   commitlint:
-    uses: openedx/.github/.github/workflows/commitlint.yml@master
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: remove tsconfig.json # see issue https://github.com/conventional-changelog/commitlint/issues/3256
+        run: |
+          rm tsconfig.json
+      - name: Check commits
+        uses: wagoid/commitlint-github-action@v5

jest.config.js

@@ -1,6 +1,6 @@
 const { createConfig } = require('@edx/frontend-build');
 
-module.exports = createConfig('jest', {
+const config = createConfig('jest', {
   // setupFilesAfterEnv is used after the jest environment has been loaded.  In general this is what you want.  
   // If you want to add config BEFORE jest loads, use setupFiles instead.  
   setupFilesAfterEnv: [
@@ -11,3 +11,8 @@ module.exports = createConfig('jest', {
     'src/i18n',
   ],
 });
+
+config.moduleDirectories = ['node_modules', 'src'];
+// config.moduleNameMapper['@/(.*)'] = '<rootDir>/src/$1';
+
+module.exports = config;

package-lock.json

@@ -34,22 +34,25 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@edx/[email protected]",
-    "@edx/frontend-component-footer": "^12.1.2",
-    "@edx/frontend-component-header": "^4.5.0",
-    "@edx/frontend-platform": "^4.6.1",
-    "@edx/paragon": "^20.45.0",
+    "@edx/frontend-component-footer": "12.2.0",
+    "@edx/frontend-component-header": "4.6.0",
+    "@edx/frontend-platform": "4.5.1",
+    "@edx/paragon": "^20.20.0",
     "@edx/react-unit-test-utils": "1.5.3",
     "@edx/tinymce-language-selector": "1.1.0",
+    "@edx/typescript-config": "^1.0.1",
     "@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.14.0",
+    "@tanstack/react-query-devtools": "^4.32.1",
+    "@tinymce/tinymce-react": "3.8.4",
     "classnames": "^2.3.2",
     "core-js": "3.31.1",
     "filesize": "^8.0.6",
+    "jest-when": "^3.6.0",
     "prop-types": "15.8.1",
     "query-string": "^8.1.0",
     "react": "^17.0.2",
@@ -65,10 +68,11 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-build": "12.9.4",
+    "@edx/frontend-build": "12.9.0-alpha.6",
     "@edx/reactifex": "^2.1.1",
     "glob": "7.2.3",
     "husky": "7.0.4",
-    "jest": "29.6.2"
+    "jest": "29.6.2",
+    "ts-jest": "^26.5.6"
   }
 }

package.json

@@ -0,0 +1,87 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Editor } from '@tinymce/tinymce-react';
+import 'tinymce/tinymce.min';
+import 'tinymce/icons/default';
+import 'tinymce/plugins/link';
+import 'tinymce/plugins/lists';
+import 'tinymce/plugins/code';
+import 'tinymce/plugins/image';
+import 'tinymce/themes/silver';
+import 'tinymce/skins/ui/oxide/skin.min.css';
+
+import { StrictDict, useKeyedState } from '@edx/react-unit-test-utils';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import messages from './messages';
+
+export const stateKeys = StrictDict({
+  value: 'value',
+});
+
+const RichTextEditor = ({
+  // id,
+  initialValue,
+  disabled,
+  optional,
+}) => {
+  const [value, setValue] = useKeyedState(stateKeys.value, initialValue);
+  const { formatMessage } = useIntl();
+
+  const extraConfig = disabled ? {
+    toolbar: false,
+    readonly: 1,
+  } : {
+    // eslint-disable-next-line max-len
+    toolbar: 'formatselect | bold italic underline | link blockquote image | numlist bullist outdent indent | strikethrough | code | undo redo',
+  };
+
+  return (
+    <div className="form-group">
+      <label htmlFor="rich-text-response">
+        {formatMessage(messages.yourResponse)} ({formatMessage(optional ? messages.optional : messages.required)})
+      </label>
+      <Editor
+        name="rich-text-response"
+        initialValue={value}
+        init={{
+          menubar: false,
+          statusbar: false,
+          skin: false,
+          content_css: false,
+          height: '300',
+          schema: 'html5',
+          plugins: 'code image link lists',
+          ...extraConfig,
+        }}
+        onChange={(e) => setValue(e.target.getContent())}
+        disabled={disabled}
+      />
+    </div>
+  );
+};
+
+RichTextEditor.defaultProps = {
+  disabled: false,
+  initialValue: '',
+  optional: false,
+};
+
+RichTextEditor.propTypes = {
+  // id: PropTypes.string.isRequired,
+  input: PropTypes.shape({
+    value: PropTypes.string,
+    name: PropTypes.string,
+    onChange: PropTypes.func.isRequired,
+  }).isRequired,
+  meta: PropTypes.shape({
+    touched: PropTypes.bool,
+    submitFailed: PropTypes.bool,
+    error: PropTypes.string,
+  }).isRequired,
+  disabled: PropTypes.bool,
+  initialValue: PropTypes.string,
+  optional: PropTypes.bool,
+};
+
+export default RichTextEditor;

src/components/TextResponse/Editor.jsx

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { TextArea } from '@edx/paragon';
+import { StrictDict } from '@edx/react-unit-test-utils';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import messages from './messages';
+
+export const stateKeys = StrictDict({
+  value: 'value',
+});
+
+const TextEditor = ({
+  // id,
+  initialValue,
+  disabled,
+  optional,
+}) => {
+  const { formatMessage } = useIntl();
+  const [value, setValue] = useState(initialValue);
+
+  return (
+    <TextArea
+      name="text-response"
+      className="textarea-response"
+      label={`
+        ${formatMessage(messages.yourResponse)} (${formatMessage(optional ? messages.optional : messages.required)})
+      `}
+      value={value}
+      onChange={setValue}
+      placeholder={formatMessage(messages.textResponsePlaceholder)}
+      disabled={disabled}
+    />
+  );
+};
+
+TextEditor.defaultProps = {
+  disabled: false,
+  initialValue: '',
+  optional: false,
+};
+
+TextEditor.propTypes = {
+  // id: PropTypes.string.isRequired,
+  input: PropTypes.shape({
+    value: PropTypes.string,
+    name: PropTypes.string,
+    onChange: PropTypes.func.isRequired,
+  }).isRequired,
+  meta: PropTypes.shape({
+    touched: PropTypes.bool,
+    submitFailed: PropTypes.bool,
+    error: PropTypes.string,
+  }).isRequired,
+  disabled: PropTypes.bool,
+  initialValue: PropTypes.string,
+  optional: PropTypes.bool,
+};
+
+export default TextEditor;

src/components/TextResponse/RichTextEditor.jsx

@@ -2,23 +2,30 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import {
-  // useSubmissionConfig,
-  useSubmissionResponse,
+  useSubmissionConfig,
+  // useSubmissionResponse,
   // useSubmissionStatus,
   // useSubmissionTeamInfo,
 } from 'data/services/lms/hooks/selectors';
 
-export const TextResponse = ({
-  promptIndex,
-}) => {
-  // const config = useSubmissionConfig().textResponseConfig;
-  const response = useSubmissionResponse();
-  // const submissionStatus = useSubmissionStatus();
-  // const teamInfo = useSubmissionTeamInfo();
+import TextEditor from 'components/TextResponse/TextEditor';
+import RichTextEditor from 'components/TextResponse/RichTextEditor';
+
+import './index.scss';
+
+export const TextResponse = () => {
+  const { textResponseConfig } = useSubmissionConfig();
+  const { optional, enabled } = textResponseConfig;
+  const props = {
+    optional,
+    disabled: !enabled,
+  };
+
   return (
-    <div>
-      <h3>Text Response</h3>
-      {response.textResponses[promptIndex]}
+    <div className="mt-2">
+      {
+        textResponseConfig?.editorType === 'text' ? <TextEditor {...props} /> : <RichTextEditor {...props} />
+      }
     </div>
   );
 };