feat: include usage locations in delete modal (openedx#938)

Author: KristinAoki

src/files-and-videos/files-page/FilesPage.test.jsx

@@ -331,7 +331,7 @@ describe('FilesAndUploads', () => {
         axiosMock.onDelete(`${getAssetsUrl(courseId)}mOckID1`).reply(204);
 
         fireEvent.click(deleteButton);
-        expect(screen.getByText('Delete file(s) confirmation')).toBeVisible();
+        expect(screen.getByText('Delete mOckID1')).toBeVisible();
         await act(async () => {
           userEvent.click(deleteButton);
         });
@@ -345,7 +345,7 @@ describe('FilesAndUploads', () => {
           userEvent.click(confirmDeleteButton);
         });
 
-        expect(screen.queryByText('Delete file(s) confirmation')).toBeNull();
+        expect(screen.queryByText('Delete mOckID1')).toBeNull();
 
         // Check if the asset is deleted in the store and UI
         const deleteStatus = store.getState().assets.deletingStatus;
@@ -554,10 +554,10 @@ describe('FilesAndUploads', () => {
           axiosMock.onDelete(`${getAssetsUrl(courseId)}mOckID1`).reply(204);
           fireEvent.click(within(assetMenuButton).getByLabelText('file-menu-toggle'));
           fireEvent.click(screen.getByTestId('open-delete-confirmation-button'));
-          expect(screen.getByText('Delete file(s) confirmation')).toBeVisible();
+          expect(screen.getByText('Delete mOckID1')).toBeVisible();
 
           fireEvent.click(screen.getByText(messages.deleteFileButtonLabel.defaultMessage));
-          expect(screen.queryByText('Delete file(s) confirmation')).toBeNull();
+          expect(screen.queryByText('Delete mOckID1')).toBeNull();
 
           executeThunk(deleteAssetFile(courseId, 'mOckID1', 5), store.dispatch);
         });
@@ -644,10 +644,10 @@ describe('FilesAndUploads', () => {
           axiosMock.onDelete(`${getAssetsUrl(courseId)}mOckID3`).reply(404);
           fireEvent.click(within(assetMenuButton).getByLabelText('file-menu-toggle'));
           fireEvent.click(screen.getByTestId('open-delete-confirmation-button'));
-          expect(screen.getByText('Delete file(s) confirmation')).toBeVisible();
+          expect(screen.getByText('Delete mOckID3')).toBeVisible();
 
           fireEvent.click(screen.getByText(messages.deleteFileButtonLabel.defaultMessage));
-          expect(screen.queryByText('Delete file(s) confirmation')).toBeNull();
+          expect(screen.queryByText('Delete mOckID3')).toBeNull();
 
           executeThunk(deleteAssetFile(courseId, 'mOckID3', 5), store.dispatch);
         });

src/files-and-videos/files-page/messages.js

@@ -4,82 +4,92 @@ const messages = defineMessages({
   heading: {
     id: 'course-authoring.files-and-uploads.heading',
     defaultMessage: 'Files',
+    description: 'Title for the page',
   },
   thumbnailAltMessage: {
     id: 'course-authoring.files-and-uploads.thumbnail.alt',
     defaultMessage: '{displayName} file preview',
+    description: 'Alternative text for thumbnail',
   },
   copyStudioUrlTitle: {
     id: 'course-authoring.files-and-uploads.file-info.copyStudioUrl.title',
     defaultMessage: 'Copy Studio Url',
+    description: 'Label for Copy Studio URL button in info modal',
   },
   copyWebUrlTitle: {
     id: 'course-authoring.files-and-uploads.file-info.copyWebUrl.title',
     defaultMessage: 'Copy Web Url',
+    description: 'Label for Copy Web URL button in info modal',
   },
   dateAddedTitle: {
     id: 'course-authoring.files-and-uploads.file-info.dateAdded.title',
     defaultMessage: 'Date added',
+    description: 'Title for date added section in info modal',
   },
   fileSizeTitle: {
     id: 'course-authoring.files-and-uploads.file-info.fileSize.title',
     defaultMessage: 'File size',
+    description: 'Title for file size section in info modal',
   },
   studioUrlTitle: {
     id: 'course-authoring.files-and-uploads.file-info.studioUrl.title',
     defaultMessage: 'Studio URL',
+    description: 'Title for studio url section in info modal',
   },
   webUrlTitle: {
     id: 'course-authoring.files-and-uploads.file-info.webUrl.title',
     defaultMessage: 'Web URL',
+    description: 'Title for web url section in info modal',
   },
   lockFileTitle: {
     id: 'course-authoring.files-and-uploads.file-info.lockFile.title',
     defaultMessage: 'Lock file',
-  },
-  lockFileTooltipContent: {
-    id: 'course-authoring.files-and-uploads.file-info.lockFile.tooltip.content',
-    defaultMessage: `By default, anyone can access a file you upload if
-      they know the web URL, even if they are not enrolled in your course.
-      You can prevent outside access to a file by locking the file. When
-      you lock a file, the web URL only allows learners who are enrolled
-      in your course and signed in to access the file.`,
+    description: 'Label for lock file checkbox in info modal',
   },
   activeCheckboxLabel: {
     id: 'course-authoring.files-and-videos.sort-and-filter.modal.filter.activeCheckbox.label',
     defaultMessage: 'Active',
+    description: 'Label for active checkbox in filter section of sort and filter modal',
   },
   inactiveCheckboxLabel: {
     id: 'course-authoring.files-and-videos.sort-and-filter.modal.filter.inactiveCheckbox.label',
     defaultMessage: 'Inactive',
+    description: 'Label for inactive checkbox in filter section of sort and filter modal',
   },
   lockedCheckboxLabel: {
     id: 'course-authoring.files-and-videos.sort-and-filter.modal.filter.lockedCheckbox.label',
     defaultMessage: 'Locked',
+    description: 'Label for locked checkbox in filter section of sort and filter modal',
   },
   publicCheckboxLabel: {
     id: 'course-authoring.files-and-videos.sort-and-filter.modal.filter.publicCheckbox.label',
     defaultMessage: 'Public',
+    description: 'Label for public checkbox in filter section of sort and filter modal',
   },
   codeCheckboxLabel: {
     id: 'course-authoring.files-and-videos.sort-and-filter.modal.filter.codeCheckbox.label',
     defaultMessage: 'Code',
+    description: 'Label for code checkbox in filter section of sort and filter modal',
   },
   imageCheckboxLabel: {
     id: 'course-authoring.files-and-videos.sort-and-filter.modal.filter.imageCheckbox.label',
     defaultMessage: 'Images',
+    description: 'Label for images checkbox in filter section of sort and filter modal',
   },
   documentCheckboxLabel: {
     id: 'course-authoring.files-and-videos.sort-and-filter.modal.filter.documentCheckbox.label',
     defaultMessage: 'Documents',
+    description: 'Label for documents checkbox in filter section of sort and filter modal',
   },
   audioCheckboxLabel: {
     id: 'course-authoring.files-and-videos.sort-and-filter.modal.filter.audioCheckbox.label',
     defaultMessage: 'Audio',
+    description: 'Label for audio checkbox in filter section of sort and filter modal',
   },
   otherCheckboxLabel: {
     id: 'course-authoring.files-and-videos.sort-and-filter.modal.filter.otherCheckbox.label',
     defaultMessage: 'Other',
+    description: 'Label for other checkbox in filter section of sort and filter modal',
   },
   overwriteConfirmMessage: {
     id: 'course-authoring.files-and-videos.overwrite.modal.confirmation-message',

src/files-and-videos/generic/DeleteConfirmationModal.jsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
+import {
+  ActionRow,
+  AlertModal,
+  Button,
+  Collapsible,
+  Hyperlink,
+  Truncate,
+} from '@openedx/paragon';
+
+import messages from './messages';
+
+const DeleteConfirmationModal = ({
+  isDeleteConfirmationOpen,
+  closeDeleteConfirmation,
+  handleBulkDelete,
+  selectedRows,
+  fileType,
+  // injected
+  intl,
+}) => {
+  const firstSelectedRow = selectedRows[0]?.original;
+  let activeContentRows = [];
+  if (Array.isArray(selectedRows)) {
+    activeContentRows = selectedRows.filter(row => row.original.activeStatus === 'active');
+  }
+  const isDeletingCourseContent = activeContentRows.length > 0;
+
+  const deletedCourseContent = activeContentRows.map(({ original }) => (
+    <li style={{ listStyle: 'None' }} key={original.id}>
+      <Collapsible
+        styling="basic"
+        title={(
+          <h3 className="h5 m-n2">
+            <Truncate lines={1}>
+              {original.displayName}
+            </Truncate>
+          </h3>
+        )}
+        data-testid={`collapsible-${original.id}`}
+      >
+        <ul className="px-2 py-0">
+          {original.usageLocations.map(location => (
+            <li key={`usage-location-${location.displayLocation}`} style={{ listStyle: 'square' }}>
+              <Hyperlink destination={`${getConfig().STUDIO_BASE_URL}${location.url}`} target="_blank">
+                {location.displayLocation}
+              </Hyperlink>
+            </li>
+          ))}
+        </ul>
+      </Collapsible>
+    </li>
+  ));
+
+  return (
+    <AlertModal
+      className="small"
+      title={intl.formatMessage(
+        messages.deleteConfirmationTitle,
+        {
+          fileName: firstSelectedRow?.displayName,
+          fileNumber: selectedRows.length,
+          fileType,
+        },
+      )}
+      isOpen={isDeleteConfirmationOpen}
+      onClose={closeDeleteConfirmation}
+      footerNode={(
+        <ActionRow>
+          <Button variant="tertiary" onClick={closeDeleteConfirmation}>
+            {intl.formatMessage(messages.cancelButtonLabel)}
+          </Button>
+          <Button onClick={handleBulkDelete}>
+            {intl.formatMessage(messages.deleteFileButtonLabel)}
+          </Button>
+        </ActionRow>
+      )}
+    >
+      {intl.formatMessage(
+        messages.deleteConfirmationMessage,
+        {
+          fileName: firstSelectedRow?.displayName,
+          fileNumber: selectedRows.length,
+          fileType,
+        },
+      )}
+      {isDeletingCourseContent && (
+        <div className="mt-3">
+          {intl.formatMessage(
+            messages.deleteConfirmationUsageMessage,
+            {
+              fileNumber: activeContentRows.length,
+              fileType,
+            },
+          )}
+          <ul className="p-0">
+            {deletedCourseContent}
+          </ul>
+        </div>
+      )}
+    </AlertModal>
+  );
+};
+
+DeleteConfirmationModal.defaultProps = {
+  selectedRows: [],
+};
+
+DeleteConfirmationModal.propTypes = {
+  selectedRows: PropTypes.arrayOf(PropTypes.shape({
+    original: PropTypes.shape({
+      id: PropTypes.string,
+      displayName: PropTypes.string,
+      activeStatus: PropTypes.string,
+      usageLocations: PropTypes.arrayOf(PropTypes.shape({
+        url: PropTypes.string,
+        displayLocation: PropTypes.string,
+      })),
+    }),
+  })),
+  isDeleteConfirmationOpen: PropTypes.bool.isRequired,
+  closeDeleteConfirmation: PropTypes.func.isRequired,
+  handleBulkDelete: PropTypes.func.isRequired,
+  fileType: PropTypes.string.isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(DeleteConfirmationModal);

src/files-and-videos/generic/DeleteConfirmationModal.test.jsx

@@ -0,0 +1,88 @@
+import {
+  render,
+  screen,
+  within,
+} from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import DeleteConfirmationModal from './DeleteConfirmationModal';
+
+const defaultProps = {
+  isDeleteConfirmationOpen: true,
+  closeDeleteConfirmation: jest.fn(),
+  handleBulkDelete: jest.fn(),
+  selectedRows: [{
+    original: {
+      displayName: 'test',
+      activeStatus: 'active',
+      id: 'file-test',
+      usageLocations: [{
+        displayLocation: 'unit', url: 'unit/url',
+      }],
+    },
+  }],
+  fileType: 'file',
+};
+
+const renderComponent = (props) => {
+  render(
+    <IntlProvider locale="en">
+      <DeleteConfirmationModal {...props} />
+    </IntlProvider>,
+  );
+};
+
+describe('DeleteConfirmationModal', () => {
+  it('should show file name in title', () => {
+    renderComponent(defaultProps);
+    const { displayName } = defaultProps.selectedRows[0].original;
+
+    expect(screen.getByText(`Delete ${displayName}`)).toBeInTheDocument();
+  });
+
+  it('should show number of files in title', () => {
+    const props = {
+      ...defaultProps,
+      selectedRows: [
+        ...defaultProps.selectedRows,
+        { original: { displayName: 'test 2', activeStatus: 'inactive' } },
+      ],
+    };
+
+    renderComponent(props);
+    const numberOfFiles = props.selectedRows.length;
+
+    expect(screen.getByText(`Delete ${numberOfFiles} ${defaultProps.fileType}s`)).toBeInTheDocument();
+  });
+
+  it('should not show delete confirmation usage list', () => {
+    const props = {
+      ...defaultProps,
+      selectedRows: [],
+    };
+    renderComponent(props);
+
+    expect(screen.queryByRole('list')).toBeNull();
+  });
+
+  it('should show test file in delete confirmation usage list', () => {
+    renderComponent(defaultProps);
+    const deleteUsageList = screen.getByRole('list');
+
+    expect(within(deleteUsageList).getByTestId('collapsible-file-test')).toBeVisible();
+  });
+
+  it('should not show test file in delete confirmation usage list', () => {
+    const props = {
+      ...defaultProps,
+      selectedRows: [
+        ...defaultProps.selectedRows,
+        { original: { displayName: 'test 2', activeStatus: 'inactive', id: 'file-test2' } },
+      ],
+    };
+    renderComponent(props);
+    const deleteUsageList = screen.getByRole('list');
+
+    expect(within(deleteUsageList).queryByTestId('collapsible-file-test2')).toBeNull();
+  });
+});