fix: update delete and remove modals design [FC-0097] (#2453)

Changes the Remove/Delete Component/Container dialogs according to the design. It also standardized the messages from Components and Containers.

Author: rpenido

src/course-libraries/ReviewTabContent.tsx

@@ -144,7 +144,7 @@ const ItemReviewList = ({
 
   const {
     hits,
-    isLoading: isIndexDataLoading,
+    isPending: isIndexDataPending,
     hasError,
     hasNextPage,
     isFetchingNextPage,
@@ -243,7 +243,7 @@ const ItemReviewList = ({
     }
   }, [blockData]);
 
-  if (isIndexDataLoading) {
+  if (isIndexDataPending) {
     return <Loading />;
   }
 

src/library-authoring/LibraryContent.test.tsx

@@ -1,12 +1,13 @@
 import fetchMock from 'fetch-mock-jest';
 
+import { getContentSearchConfigUrl } from '@src/search-manager/data/api';
 import {
   fireEvent,
   render,
   screen,
   initializeMocks,
-} from '../testUtils';
-import { getContentSearchConfigUrl } from '../search-manager/data/api';
+} from '@src/testUtils';
+
 import { mockContentLibrary } from './data/api.mocks';
 import mockEmptyResult from '../search-modal/__mocks__/empty-search-result.json';
 import { LibraryProvider } from './common/context/LibraryContext';
@@ -27,7 +28,7 @@ const data = {
   fetchNextPage: mockFetchNextPage,
   searchKeywords: '',
   isFiltered: false,
-  isLoading: false,
+  isPending: false,
 };
 
 const returnEmptyResult = (_url: string, req) => {
@@ -77,7 +78,7 @@ describe('<LibraryHome />', () => {
   it('should render a spinner while loading', async () => {
     mockUseSearchContext.mockReturnValue({
       ...data,
-      isLoading: true,
+      isPending: true,
     });
 
     render(<LibraryContent />, withLibraryId(mockContentLibrary.libraryId));

src/library-authoring/LibraryContent.tsx

@@ -36,7 +36,7 @@ const LibraryContent = ({ contentType = ContentType.home }: LibraryContentProps)
     isFetchingNextPage,
     hasNextPage,
     fetchNextPage,
-    isLoading,
+    isPending,
     isFiltered,
     usageKey,
   } = useSearchContext();
@@ -56,7 +56,7 @@ const LibraryContent = ({ contentType = ContentType.home }: LibraryContentProps)
     true,
   );
 
-  if (isLoading) {
+  if (isPending) {
     return <LoadingSpinner />;
   }
   if (totalHits === 0) {

src/library-authoring/component-info/ComponentUsage.tsx

@@ -35,7 +35,7 @@ export const ComponentUsage = ({ usageKey }: ComponentUsageProps) => {
     data: dataDownstreamLinks,
     isError: isErrorDownstreamLinks,
     error: errorDownstreamLinks,
-    isLoading: isLoadingDownstreamLinks,
+    isPending: isPendingDownstreamLinks,
   } = useEntityLinks({ upstreamKey: usageKey, contentType: 'components' });
 
   const downstreamKeys = useMemo(
@@ -47,14 +47,14 @@ export const ComponentUsage = ({ usageKey }: ComponentUsageProps) => {
     hits: downstreamHits,
     isError: isErrorIndexDocuments,
     error: errorIndexDocuments,
-    isLoading: isLoadingIndexDocuments,
+    isPending: isPendingIndexDocuments,
   } = useContentFromSearchIndex(downstreamKeys);
 
   if (isErrorDownstreamLinks || isErrorIndexDocuments) {
     return <AlertError error={errorDownstreamLinks || errorIndexDocuments} />;
   }
 
-  if (isLoadingDownstreamLinks || (isLoadingIndexDocuments && !!downstreamKeys.length)) {
+  if (isPendingDownstreamLinks || (isPendingIndexDocuments && !!downstreamKeys.length)) {
     return <Loading />;
   }
 

src/library-authoring/components/CollectionCard.tsx

@@ -7,17 +7,17 @@ import {
   IconButton,
   useToggle,
 } from '@openedx/paragon';
-import { MoreVert } from '@openedx/paragon/icons';
+import { Delete, MoreVert } from '@openedx/paragon/icons';
 
-import { type CollectionHit } from '../../search-manager';
+import DeleteModal from '@src/generic/delete-modal/DeleteModal';
+import { ToastContext } from '@src/generic/toast-context';
+import { type CollectionHit } from '@src/search-manager';
 import { useComponentPickerContext } from '../common/context/ComponentPickerContext';
 import { useLibraryContext } from '../common/context/LibraryContext';
 import { SidebarBodyItemId, useSidebarContext } from '../common/context/SidebarContext';
 import { useLibraryRoutes } from '../routes';
 import BaseCard from './BaseCard';
-import { ToastContext } from '../../generic/toast-context';
 import { useDeleteCollection, useRestoreCollection } from '../data/apiHooks';
-import DeleteModal from '../../generic/delete-modal/DeleteModal';
 import messages from './messages';
 
 type CollectionMenuProps = {
@@ -98,7 +98,8 @@ const CollectionMenu = ({ hit } : CollectionMenuProps) => {
       <DeleteModal
         isOpen={isDeleteModalOpen}
         close={closeDeleteModal}
-        variant="warning"
+        variant="danger"
+        icon={Delete}
         category={type}
         description={intl.formatMessage(messages.deleteCollectionConfirm, {
           collectionTitle: displayName,

src/library-authoring/components/ComponentDeleter.test.tsx

@@ -1,18 +1,18 @@
-import type { ToastActionData } from '../../generic/toast-context';
+import type { ToastActionData } from '@src/generic/toast-context';
+import { mockContentSearchConfig, mockSearchResult, hydrateSearchResult } from '@src/search-manager/data/api.mock';
 import {
   fireEvent,
   render,
   screen,
   initializeMocks,
   waitFor,
-} from '../../testUtils';
+} from '@src/testUtils';
 import { LibraryProvider } from '../common/context/LibraryContext';
 import { SidebarProvider } from '../common/context/SidebarContext';
 import {
   mockContentLibrary, mockDeleteLibraryBlock, mockLibraryBlockMetadata, mockRestoreLibraryBlock,
 } from '../data/api.mocks';
 import ComponentDeleter from './ComponentDeleter';
-import { mockContentSearchConfig, mockSearchResult } from '../../search-manager/data/api.mock';
 
 mockContentLibrary.applyMock(); // Not required, but avoids 404 errors in the logs when <LibraryProvider> loads data
 mockLibraryBlockMetadata.applyMock();
@@ -41,28 +41,16 @@ describe('<ComponentDeleter />', () => {
   beforeEach(() => {
     const mocks = initializeMocks();
     mockShowToast = mocks.mockShowToast;
-    mockSearchResult({
-      results: [ // @ts-ignore
-        {
-          hits: [],
-        },
-      ],
-    });
-  });
-
-  it('is invisible when isConfirmingDelete is false', async () => {
-    const mockCancel = jest.fn();
-    render(<ComponentDeleter usageKey={usageKey} isConfirmingDelete={false} cancelDelete={mockCancel} />, renderArgs);
-
-    const modal = screen.queryByRole('dialog', { name: 'Delete Component' });
-    expect(modal).not.toBeInTheDocument();
+    mockSearchResult(hydrateSearchResult([{
+      displayName: 'Introduction to Testing 2',
+    }]));
   });
 
   it('should shows a confirmation prompt the card with title and description', async () => {
     const mockCancel = jest.fn();
-    render(<ComponentDeleter usageKey={usageKey} isConfirmingDelete cancelDelete={mockCancel} />, renderArgs);
+    render(<ComponentDeleter usageKey={usageKey} close={mockCancel} />, renderArgs);
 
-    const modal = screen.getByRole('dialog', { name: 'Delete Component' });
+    const modal = await screen.findByRole('dialog', { name: 'Delete Component' });
     expect(modal).toBeVisible();
 
     // It should mention the component's name in the confirm dialog:
@@ -76,9 +64,9 @@ describe('<ComponentDeleter />', () => {
 
   it('deletes the block when confirmed, shows a toast with undo option and restores block on undo', async () => {
     const mockCancel = jest.fn();
-    render(<ComponentDeleter usageKey={usageKey} isConfirmingDelete cancelDelete={mockCancel} />, renderArgs);
+    render(<ComponentDeleter usageKey={usageKey} close={mockCancel} />, renderArgs);
 
-    const modal = screen.getByRole('dialog', { name: 'Delete Component' });
+    const modal = await screen.findByRole('dialog', { name: 'Delete Component' });
     expect(modal).toBeVisible();
 
     const deleteButton = screen.getByRole('button', { name: 'Delete' });
@@ -99,23 +87,17 @@ describe('<ComponentDeleter />', () => {
 
   it('should show units message if `unitsData` is set with one unit', async () => {
     const mockCancel = jest.fn();
-    mockSearchResult({
-      results: [ // @ts-ignore
-        {
-          hits: [{
-            units: {
-              displayName: ['Unit 1'],
-              key: ['unit1'],
-            },
-          }],
-        },
-      ],
-    });
+    mockSearchResult(hydrateSearchResult([{
+      displayName: 'Introduction to Testing 2',
+      units: {
+        displayName: ['Unit 1'],
+        key: ['unit1'],
+      },
+    }]));
     render(
       <ComponentDeleter
         usageKey={usageKey}
-        isConfirmingDelete
-        cancelDelete={mockCancel}
+        close={mockCancel}
       />,
       renderArgs,
     );
@@ -131,23 +113,17 @@ describe('<ComponentDeleter />', () => {
 
   it('should show units message if `unitsData` is set with multiple units', async () => {
     const mockCancel = jest.fn();
-    mockSearchResult({
-      results: [ // @ts-ignore
-        {
-          hits: [{
-            units: {
-              displayName: ['Unit 1', 'Unit 2'],
-              key: ['unit1', 'unit2'],
-            },
-          }],
-        },
-      ],
-    });
+    mockSearchResult(hydrateSearchResult([{
+      displayName: 'Introduction to Testing 2',
+      units: {
+        displayName: ['Unit 1', 'Unit 2'],
+        key: ['unit1', 'unit2'],
+      },
+    }]));
     render(
       <ComponentDeleter
         usageKey={usageKey}
-        isConfirmingDelete
-        cancelDelete={mockCancel}
+        close={mockCancel}
       />,
       renderArgs,
     );