feat: better pdf authoring form

Author: Kelketek

src/course-unit/add-component/AddComponent.test.tsx

@@ -322,7 +322,7 @@ describe('<AddComponent />', () => {
 
   it('adds a PDF block from the advanced selection in modal as an mfe-editable block', async () => {
     const user = userEvent.setup();
-    const { getByRole, queryAllByRole } = renderComponent();
+    const { getByRole, getByText, queryAllByRole, queryAllByText } = renderComponent();
     const advancedBtn = getByRole('button', {
       name: new RegExp(`${messages.buttonText.defaultMessage} Advanced`, 'i'),
     });
@@ -335,11 +335,14 @@ describe('<AddComponent />', () => {
     const confirmation = within(dialog).getByText('Select');
     await user.click(confirmation);
     await waitFor(() => expect(queryAllByRole('dialog')).toEqual([]));
+    expect(queryAllByText('PDF')).toEqual([])
     expect(handleCreateNewCourseXBlockMock).toHaveBeenCalled();
     expect(handleCreateNewCourseXBlockMock).toHaveBeenCalledWith({
       parentLocator: '123',
       type: COMPONENT_TYPES.pdf,
     }, expect.any(Function));
+    // Verify the block is provisioned and loads the editor.
+    await waitFor(() => getByText('PDF'))
   });
 
   it('adds a PDF block from the advanced selection in modal as a traditional block', async () => {

src/editors/containers/PdfEditor/components/PdfEditingModal.tsx

@@ -7,10 +7,10 @@ import EditorContainer from '@src/editors/containers/EditorContainer';
 import { PdfBlockContext, PdfState } from '@src/editors/containers/PdfEditor/contexts';
 import { isEqual } from 'lodash';
 import DownloadOptions from '@src/editors/containers/PdfEditor/components/sections/DownloadOptions';
-import { UploadWidget, defaultUploadMessages } from '@src/editors/sharedComponents/UploadWidget';
+import { UploadWidget } from '@src/editors/sharedComponents/UploadWidget';
 import { Spinner } from '@openedx/paragon';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
-import { messages, fileUploadMessages } from './messages';
+import messages from './messages';
 
 const EditorWrapper: React.FC<PropsWithChildren> = ({ children }) => {
   const intl = useIntl();
@@ -36,9 +36,8 @@ const EditorWrapper: React.FC<PropsWithChildren> = ({ children }) => {
   return <>{children}</>; /* eslint-disable-line react/jsx-no-useless-fragment */
 };
 
-const uploadMessages = { ...defaultUploadMessages, ...fileUploadMessages };
-
 const PdfEditingModal: React.FC<EditorComponent> = (props) => {
+  const intl = useIntl();
   const { fields } = useContext(PdfBlockContext);
   const originalState = useRef({ ...fields });
   const { values, setValues } = useFormikContext<PdfState>();
@@ -61,7 +60,14 @@ const PdfEditingModal: React.FC<EditorComponent> = (props) => {
   return (
     <EditorContainer {...props} isDirty={isDirty} getContent={getContent}>
       <EditorWrapper>
-        <UploadWidget supportedFileFormats="application/pdf" urlFieldName="url" messages={uploadMessages} />
+        <div className="mt-2">
+          <UploadWidget
+            supportedFileFormats="application/pdf"
+            urlFieldName="url"
+            label={intl.formatMessage(messages.urlFieldLabel)}
+            id="pdf-url"
+          />
+        </div>
         <DownloadOptions />
       </EditorWrapper>
     </EditorContainer>

src/editors/containers/PdfEditor/components/messages.ts

@@ -1,6 +1,6 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';
 
-export const messages = defineMessages({
+export default defineMessages({
   blockFailed: {
     id: 'authoring.pdfEditor.blockFailed',
     defaultMessage: 'PDF block failed to load',
@@ -11,12 +11,9 @@ export const messages = defineMessages({
     defaultMessage: 'Loading PDF Editor',
     description: 'Message shown to screen readers when the PDF block is loading.',
   },
-});
-
-export const fileUploadMessages = defineMessages({
   urlFieldLabel: {
     id: 'authoring.pdfEditor.urlFieldLabel',
-    defaultMessage: 'PDF URL',
+    defaultMessage: 'File',
     description: 'Label for the PDF URL field',
   },
 });

src/editors/containers/PdfEditor/components/sections/DownloadOptions.tsx

@@ -1,6 +1,4 @@
-import { Form } from '@openedx/paragon';
-import CollapsibleFormWidget
-  from '@src/editors/sharedComponents/CollapsibleFormWidget/CollapsibleFormWidget';
+import React from 'react';
 import { useFormikContext } from 'formik';
 import { PdfState } from '@src/editors/containers/PdfEditor/contexts';
 import { optional, useUrlValidator } from '@src/editors/utils/validators';
@@ -9,45 +7,40 @@ import CheckboxField from '@src/editors/sharedComponents/CheckboxField';
 import TextField from '@src/editors/sharedComponents/TextField';
 import messages from './messages';
 
-const DownloadOptions = () => {
+const DownloadOptions: React.FC = () => {
   const intl = useIntl();
-  const { errors, values } = useFormikContext<PdfState>();
-  const isError = !!(errors.allowDownload?.length || errors.sourceText?.length || errors.sourceUrl?.length);
+  const { values } = useFormikContext<PdfState>();
   const urlValidator = optional(useUrlValidator());
   if (values.disableAllDownload) {
     // Download configuration is disabled at the instance-level, so don't even show these options.
     return <></>; // eslint-disable-line react/jsx-no-useless-fragment
   }
   return (
-    <CollapsibleFormWidget
-      fontSize="x-small"
-      title={intl.formatMessage(messages.downloadOptions)}
-      isError={isError}
-    >
-      <Form.Group>
+    <>
+      <div className="mt-5 mb-4">
         <CheckboxField
           label={intl.formatMessage(messages.allowDownloadLabel)}
           id="pdf-allow-download"
           hint={intl.formatMessage(messages.allowDownloadHint)}
           fieldConfig="allowDownload"
         />
-        <TextField
-          label={intl.formatMessage(messages.sourceDocumentButtonTextLabel)}
-          id="pdf-source-text"
-          placeholder={intl.formatMessage(messages.sourceDocumentButtonTextPlaceholder)}
-          name="sourceText"
-          disabled={!values.allowDownload}
-        />
-        <TextField
-          label={intl.formatMessage(messages.sourceUrlLabel)}
-          name="sourceUrl"
-          id="pdf-source-url"
-          hint={intl.formatMessage(messages.sourceUrlHint)}
-          disabled={!values.allowDownload}
-          fieldConfig={{ validate: urlValidator }}
-        />
-      </Form.Group>
-    </CollapsibleFormWidget>
+      </div>
+      <TextField
+        label={intl.formatMessage(messages.sourceUrlLabel)}
+        name="sourceUrl"
+        id="pdf-source-url"
+        hint={intl.formatMessage(messages.sourceUrlHint)}
+        disabled={!values.allowDownload}
+        fieldConfig={{ validate: urlValidator }}
+      />
+      <TextField
+        label={intl.formatMessage(messages.sourceDocumentButtonTextLabel)}
+        id="pdf-source-text"
+        placeholder={intl.formatMessage(messages.sourceDocumentButtonTextPlaceholder)}
+        name="sourceText"
+        disabled={!values.allowDownload}
+      />
+    </>
   );
 };
 

src/editors/containers/PdfEditor/components/sections/messages.ts

@@ -1,12 +1,6 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
-  downloadOptions: {
-    id: 'authoring.pdfEditor.formGroups.downloadOptions',
-    defaultMessage: 'Download Options',
-    description: 'Section header for configuring what options a learner has for downloading a PDF'
-      + ' or its source material.',
-  },
   allowDownloadLabel: {
     id: 'authoring.pdfEditor.formGroups.downloadOptions.allowDownload.label',
     defaultMessage: 'Show PDF download link',
@@ -20,25 +14,24 @@ const messages = defineMessages({
   },
   sourceDocumentButtonTextLabel: {
     id: 'authoring.pdfEditor.formGroups.downloadOptions.sourceDocumentButtonText.label',
-    defaultMessage: 'Source document button text',
+    defaultMessage: 'Original File Link Text',
     description: 'Label for the source document button text setting, which allows the instructor to customize '
       + 'the text on the source download button for PDFs.',
   },
   sourceDocumentButtonTextPlaceholder: {
     id: 'authoring.pdfEditor.formGroups.downloadOptions.sourceDocumentButtonText.placeholder',
-    defaultMessage: 'Default: Download the source document',
+    defaultMessage: 'Download the source document',
     description: 'Placeholder text for the source document button text setting, which allows the instructor to '
       + 'customize the text on the source download button for PDFs.',
   },
   sourceUrlLabel: {
     id: 'authoring.pdfEditor.formGroups.downloadOptions.sourceUrl.label',
-    defaultMessage: 'Source document URL',
+    defaultMessage: 'Original File URL',
     description: 'Label for the field used to specify the URL of a source document a PDF was generated from.',
   },
   sourceUrlHint: {
     id: 'authoring.pdfEditor.formGroups.downloadOptions.sourceUrl.hint',
-    defaultMessage: 'Add a download link for the source file of your PDF. Use it, for example, to provide a '
-      + 'PowerPoint file used to create this PDF.',
+    defaultMessage: 'Add a link to the original or editable file (e.g. Word or PowerPoint). Appears as a separate link.',
     description: 'Hint for the field used to specify the URL of a source document a PDF was generated from.',
   },
 });

src/editors/containers/PdfEditor/index.test.tsx

@@ -3,10 +3,7 @@ import { initializeMocks } from '@src/testUtils';
 import PdfEditor from '@src/editors/containers/PdfEditor/index';
 import { editorRender } from '@src/editors/editorTestRender';
 import { initialPdfState, PdfState } from '@src/editors/containers/PdfEditor/contexts';
-import {
-  messages,
-  fileUploadMessages as uploadOverrideMessages,
-} from '@src/editors/containers/PdfEditor/components/messages';
+import messages from '@src/editors/containers/PdfEditor/components/messages';
 import downloadMessages from '@src/editors/containers/PdfEditor/components/sections/messages';
 import uploadMessages from '@src/editors/sharedComponents/UploadWidget/messages';
 import editorMessages from '@src/editors/containers/EditorContainer/messages';
@@ -24,85 +21,13 @@ const render = () => editorRender(
             display_name: 'PDF',
             category: 'pdf',
             has_children: false,
-            edited_on: 'Mar 13, 2026 at 18:45 UTC',
-            edited_on_raw: '2026-03-13 18:45:35.079000+00:00',
-            published: false,
-            published_on: null,
-            studio_url: null,
-            lms_url: 'http://local.openedx.io:8000/courses/course-v1:Test+TS102+2026/jump_to/block-v1:Test+TS102+2026+type@pdf+block@b7e674c9cc19465ea4e7e2c6d9c11513',
-            embed_lms_url: 'http://local.openedx.io:8000/xblock/block-v1:Test+TS102+2026+type@pdf+block@b7e674c9cc19465ea4e7e2c6d9c11513',
-            released_to_students: false,
-            release_date: null,
-            visibility_state: 'unscheduled',
-            has_explicit_staff_lock: false,
-            start: '2030-01-01T00:00:00Z',
-            graded: false,
-            due_date: '',
-            due: null,
-            relative_weeks_due: null,
-            format: null,
-            course_graders: [
-              'Homework',
-              'Lab',
-              'Midterm Exam',
-              'Final Exam',
-            ],
             has_changes: null,
-            actions: {
-              deletable: true,
-              draggable: true,
-              childAddable: true,
-              duplicable: true,
-              unlinkable: null,
-            },
             explanatory_message: null,
             group_access: {},
-            user_partitions: [
-              {
-                id: 50,
-                name: 'Enrollment Track Groups',
-                scheme: 'enrollment_track',
-                groups: [
-                  {
-                    id: 1,
-                    name: 'Audit',
-                    selected: false,
-                    deleted: false,
-                  },
-                ],
-              },
-            ],
-            show_correctness: 'always',
-            hide_from_toc: false,
-            enable_hide_from_toc_ui: false,
-            xblock_type: 'other',
-            upstream_info: {
-              upstream_ref: null,
-              upstream_name: null,
-              downstream_key: 'block-v1:Test+TS102+2026+type@pdf+block@b7e674c9cc19465ea4e7e2c6d9c11513',
-              version_synced: null,
-              version_available: null,
-              version_declined: null,
-              error_message: 'Content is not linked to a Content Library.',
-              downstream_customized: [],
-              top_level_parent_key: null,
-              ready_to_sync: false,
-              upstream_link: null,
-              is_ready_to_sync_individually: false,
-            },
             data: '',
             metadata: {
               display_name: 'PDF',
             },
-            ancestor_has_staff_lock: false,
-            is_tagging_feature_disabled: false,
-            taxonomy_tags_widget_url: 'http://apps.local.openedx.io:2001/authoring/tagging/components/widget/',
-            course_authoring_url: 'http://apps.local.openedx.io:2001/authoring',
-            user_partition_info: {
-              selectable_partitions: [],
-              selected_partition_index: -1,
-              selected_groups_label: '',
-            },
           },
         },
         unitUrl: {
@@ -136,9 +61,6 @@ const render = () => editorRender(
             ],
           },
         },
-        blockContent: null,
-        studioView: null,
-        saveResponse: null,
         blockId: 'pdf-block-id',
         blockTitle: 'PDF',
         blockType: 'pdf',
@@ -176,7 +98,7 @@ describe('PdfEditor', () => {
     const screen = render();
     screen.getByText(messages.blockLoading.defaultMessage);
     // And then should show the block.
-    await waitFor(() => screen.getByText(downloadMessages.downloadOptions.defaultMessage));
+    await waitFor(() => screen.getByText(downloadMessages.allowDownloadLabel.defaultMessage));
   });
   it('handles failure gracefully.', async () => {
     axiosMock.onGet(
@@ -226,7 +148,7 @@ describe('PdfEditor', () => {
     await user.click(dropdown);
     const toggle = await waitFor(() => screen.getByText(uploadMessages.manualUrl.defaultMessage));
     await user.click(toggle);
-    const field = await waitFor(() => screen.getByLabelText(uploadOverrideMessages.urlFieldLabel.defaultMessage));
+    const field = await waitFor(() => screen.getByLabelText(uploadMessages.urlFieldLabel.defaultMessage));
     fireEvent.change(field, { target: { value: 'https://somewhere.com/stuff.pdf' } });
     const saveButton = screen.getByLabelText(editorMessages.saveButtonAriaLabel.defaultMessage);
     await user.click(saveButton);

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/index.jsx

@@ -14,15 +14,15 @@ import { FileUpload, MoreHoriz } from '@openedx/paragon/icons';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 
 import { actions, selectors } from '@src/editors/data/redux';
-import * as hooks from './hooks';
-import messages from './messages';
 
 import { FileInput } from '@src/editors/sharedComponents/FileInput';
 import ErrorAlert from '@src/editors/sharedComponents/ErrorAlerts/ErrorAlert';
 import UploadErrorAlert from '@src/editors/sharedComponents/ErrorAlerts/UploadErrorAlert';
 import CollapsibleFormWidget from '@src/editors/sharedComponents/CollapsibleFormWidget/CollapsibleFormWidget';
 import { ErrorContext } from '@src/editors/containers/VideoEditor/hooks';
 import { RequestKeys } from '@src/editors/data/constants/requests';
+import messages from './messages';
+import * as hooks from './hooks';
 
 /**
  * Collapsible Form widget controlling video handouts

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/index.jsx

@@ -12,9 +12,9 @@ import {
 import { Add } from '@openedx/paragon/icons';
 
 import { actions, selectors } from '@src/editors/data/redux';
+import CollapsibleFormWidget from '@src/editors/sharedComponents/CollapsibleFormWidget/CollapsibleFormWidget';
 import * as hooks from './hooks';
 import messages from './messages';
-import CollapsibleFormWidget from '@src/editors/sharedComponents/CollapsibleFormWidget/CollapsibleFormWidget';
 import LicenseBlurb from './LicenseBlurb';
 import LicenseSelector from './LicenseSelector';
 import LicenseDetails from './LicenseDetails';

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/index.jsx

@@ -18,14 +18,13 @@ import { DeleteOutline, FileUpload } from '@openedx/paragon/icons';
 import { selectors } from '@src/editors/data/redux';
 import { isEdxVideo } from '@src/editors/data/services/cms/api';
 
-import { acceptedImgKeys } from './constants';
-import * as hooks from './hooks';
-import messages from './messages';
-
 import CollapsibleFormWidget from '@src/editors/sharedComponents/CollapsibleFormWidget/CollapsibleFormWidget';
 import { FileInput } from '@src/editors/sharedComponents/FileInput';
 import ErrorAlert from '@src/editors/sharedComponents/ErrorAlerts/ErrorAlert';
 import { ErrorContext } from '@src/editors/containers/VideoEditor/hooks';
+import messages from './messages';
+import * as hooks from './hooks';
+import { acceptedImgKeys } from './constants';
 
 /**
  * Collapsible Form widget controlling video thumbnail

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/index.jsx

@@ -18,17 +18,17 @@ import {
 import { Add, InfoOutline } from '@openedx/paragon/icons';
 
 import { thunkActions, actions, selectors } from '@src/editors/data/redux';
-import messages from './messages';
 
 import { RequestKeys } from '@src/editors/data/constants/requests';
 import { in8lTranscriptLanguages } from '@src/editors/data/constants/video';
 
 import ErrorAlert from '@src/editors/sharedComponents/ErrorAlerts/ErrorAlert';
 import CollapsibleFormWidget from '@src/editors/sharedComponents/CollapsibleFormWidget/CollapsibleFormWidget';
 
+import { ErrorContext } from '@src/editors/containers/VideoEditor/hooks';
 import ImportTranscriptCard from './ImportTranscriptCard';
 import Transcript from './Transcript';
-import { ErrorContext } from '@src/editors/containers/VideoEditor/hooks';
+import messages from './messages';
 // This 'module' self-import hack enables mocking during tests.
 // See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
 // should be re-thought and cleaned up to avoid this pattern.