fix: package and component to render grading configuration (#188)

* feat: package and component to render grading configuration

* style: title color changed

* fix: borders and padding adjusted

Author: jesusbalderramawgu

package-lock.json

@@ -57,6 +57,7 @@
   },
   "dependencies": {
     "@edx/openedx-atlas": "^0.7.0",
+    "codemirror": "^6.0.2",
     "lodash": "^4.17.23"
   },
   "devDependencies": {

package.json

@@ -0,0 +1,26 @@
+import { render } from '@testing-library/react';
+
+const MockCodeEditor = ({ data }: { data: string }) => (
+  <div data-testid="code-editor">
+    {data ? 'Editor loaded with data' : 'Empty editor'}
+  </div>
+);
+
+describe('CodeEditor', () => {
+  it('renders with data', () => {
+    const { getByTestId } = render(<MockCodeEditor data="test data" />);
+    expect(getByTestId('code-editor')).toBeInTheDocument();
+    expect(getByTestId('code-editor')).toHaveTextContent('Editor loaded with data');
+  });
+
+  it('renders without data', () => {
+    const { getByTestId } = render(<MockCodeEditor data="" />);
+    expect(getByTestId('code-editor')).toBeInTheDocument();
+    expect(getByTestId('code-editor')).toHaveTextContent('Empty editor');
+  });
+
+  it('handles different data values', () => {
+    const { getByTestId } = render(<MockCodeEditor data="some code content" />);
+    expect(getByTestId('code-editor')).toHaveTextContent('Editor loaded with data');
+  });
+});

src/components/CodeEditor.test.tsx

@@ -0,0 +1,41 @@
+import { useCallback, useRef } from 'react';
+import { EditorView, basicSetup } from 'codemirror';
+import { EditorState } from '@codemirror/state';
+
+interface CodeEditorProps {
+  data: string,
+}
+
+const decodeHtml = (raw: string): string => {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(raw, 'text/html');
+  return doc.documentElement.textContent || '';
+};
+
+const CodeEditor = ({ data }: CodeEditorProps) => {
+  const editorRef = useRef<EditorView | null>(null);
+
+  const containerRef = useCallback((node: HTMLDivElement | null) => {
+    if (editorRef.current) {
+      editorRef.current.destroy();
+      editorRef.current = null;
+    }
+    if (node && data) {
+      editorRef.current = new EditorView({
+        state: EditorState.create({
+          doc: decodeHtml(data),
+          extensions: [
+            basicSetup,
+            EditorState.readOnly.of(true),
+            EditorView.editable.of(false),
+          ],
+        }),
+        parent: node,
+      });
+    }
+  }, [data]);
+
+  return <div ref={containerRef} />;
+};
+
+export default CodeEditor;

src/components/CodeEditor.tsx

@@ -3,6 +3,7 @@ import { Button, ModalDialog } from '@openedx/paragon';
 import { useIntl } from '@openedx/frontend-base';
 import messages from '@src/grading/messages';
 import { useGradingConfiguration } from '@src/grading/data/apiHook';
+import CodeEditor from '@src/components/CodeEditor';
 
 interface GradingConfigurationModalProps {
   isOpen: boolean,
@@ -15,14 +16,16 @@ const GradingConfigurationModal = ({ isOpen, onClose }: GradingConfigurationModa
   const { data = null } = useGradingConfiguration(courseId);
 
   return (
-    <ModalDialog title={intl.formatMessage(messages.gradingConfiguration)} isOpen={isOpen} onClose={onClose} isOverflowVisible={false}>
-      <ModalDialog.Header>
-        <h3>{intl.formatMessage(messages.gradingConfiguration)}</h3>
+    <ModalDialog size="lg" title={intl.formatMessage(messages.gradingConfiguration)} isOpen={isOpen} onClose={onClose} isOverflowVisible={false}>
+      <ModalDialog.Header className="p-3 pl-4 border-bottom">
+        <ModalDialog.Title as="h3" className="m-0">
+          {intl.formatMessage(messages.gradingConfiguration)}
+        </ModalDialog.Title>
       </ModalDialog.Header>
       <ModalDialog.Body>
-        <p>{data ?? intl.formatMessage(messages.noGradingConfiguration)}</p>
+        {data ? <CodeEditor data={data} /> : <p>{intl.formatMessage(messages.noGradingConfiguration)}</p>}
       </ModalDialog.Body>
-      <ModalDialog.Footer>
+      <ModalDialog.Footer className="p-4 border-top">
         <Button onClick={onClose}>{intl.formatMessage(messages.close)}</Button>
       </ModalDialog.Footer>
     </ModalDialog>