Merge branch 'main' into wgu-jesse-stewart/instructor_dashboard_certificates_bulk

Author: wgu-jesse-stewart

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

@@ -112,5 +112,6 @@ describe('GrantExceptionsModal', () => {
     // Check for CSV upload elements
     expect(screen.getByText(messages.csvFileLabel.defaultMessage)).toBeInTheDocument();
     expect(screen.getByText(messages.csvInstructions.defaultMessage)).toBeInTheDocument();
+    expect(mockOnSubmit).toHaveBeenCalledWith(['user1', 'user2', 'user3'], '');
   });
 });

src/certificates/components/GrantExceptionsModal.test.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { useIntl } from '@openedx/frontend-base';
 import { ActionRow, Button, Dropzone, Form, Hyperlink, Icon, ModalDialog, OverlayTrigger, Tab, Tabs, Tooltip } from '@openedx/paragon';
 import { InfoOutline } from '@openedx/paragon/icons';
+import LearnerActionModal from '@src/certificates/components/LearnerActionModal';
 import messages from '@src/certificates/messages';
 
 interface GrantExceptionsModalProps {

src/certificates/components/GrantExceptionsModal.tsx

@@ -59,7 +59,7 @@ describe('InvalidateCertificateModal', () => {
     await user.click(saveButton);
 
     expect(mockOnSubmit).toHaveBeenCalledWith(
-      ['user1@example.com'],
+      ['user1@example.com', 'user2@example.com'],
       'Certificate invalidated due to violation'
     );
   });

src/certificates/components/InvalidateCertificateModal.test.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { useIntl } from '@openedx/frontend-base';
 import { ActionRow, Button, Form, ModalDialog } from '@openedx/paragon';
+import LearnerActionModal from '@src/certificates/components/LearnerActionModal';
 import messages from '@src/certificates/messages';
 
 interface InvalidateCertificateModalProps {

src/certificates/components/InvalidateCertificateModal.tsx

@@ -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;