diff --git a/src/library-authoring/component-info/ComponentUsage.tsx b/src/library-authoring/component-info/ComponentUsage.tsx
index 13e59565f..f3b0d4604 100644
--- a/src/library-authoring/component-info/ComponentUsage.tsx
+++ b/src/library-authoring/component-info/ComponentUsage.tsx
@@ -6,8 +6,8 @@ import { useEntityLinks } from '../../course-libraries/data/apiHooks';
import AlertError from '../../generic/alert-error';
import Loading from '../../generic/Loading';
-import { useContentSearchConnection, useContentSearchResults } from '../../search-manager';
import messages from './messages';
+import { useComponentsFromSearchIndex } from '../data/apiHooks';
interface ComponentUsageProps {
usageKey: string;
@@ -41,21 +41,12 @@ export const ComponentUsage = ({ usageKey }: ComponentUsageProps) => {
[dataDownstreamLinks],
);
- const { client, indexName } = useContentSearchConnection();
const {
hits: downstreamHits,
isError: isErrorIndexDocuments,
error: errorIndexDocuments,
isLoading: isLoadingIndexDocuments,
- } = useContentSearchResults({
- client,
- indexName,
- searchKeywords: '',
- extraFilter: [`usage_key IN ["${downstreamKeys.join('","')}"]`],
- limit: downstreamKeys.length,
- enabled: !!downstreamKeys.length,
- skipBlockTypeFetch: true,
- });
+ } = useComponentsFromSearchIndex(downstreamKeys);
if (isErrorDownstreamLinks || isErrorIndexDocuments) {
return ;
diff --git a/src/library-authoring/components/ComponentCard.test.tsx b/src/library-authoring/components/ComponentCard.test.tsx
index e0e2c44e2..dd56c30f8 100644
--- a/src/library-authoring/components/ComponentCard.test.tsx
+++ b/src/library-authoring/components/ComponentCard.test.tsx
@@ -43,6 +43,7 @@ const contentHit: ContentHit = {
modified: 1722434322294,
lastPublished: null,
collections: {},
+ units: {},
publishStatus: PublishStatus.Published,
};
diff --git a/src/library-authoring/components/ComponentDeleter.test.tsx b/src/library-authoring/components/ComponentDeleter.test.tsx
index 315228616..f6af3d4a7 100644
--- a/src/library-authoring/components/ComponentDeleter.test.tsx
+++ b/src/library-authoring/components/ComponentDeleter.test.tsx
@@ -11,9 +11,11 @@ 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 loads data
mockLibraryBlockMetadata.applyMock();
+mockContentSearchConfig.applyMock();
const mockDelete = mockDeleteLibraryBlock.applyMock();
const mockRestore = mockRestoreLibraryBlock.applyMock();
@@ -29,6 +31,13 @@ describe('', () => {
beforeEach(() => {
const mocks = initializeMocks();
mockShowToast = mocks.mockShowToast;
+ mockSearchResult({
+ results: [ // @ts-ignore
+ {
+ hits: [],
+ },
+ ],
+ });
});
it('is invisible when isConfirmingDelete is false', async () => {
@@ -77,4 +86,68 @@ describe('', () => {
expect(mockShowToast).toHaveBeenCalledWith('Undo successful');
});
});
+
+ 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'],
+ },
+ }],
+ },
+ ],
+ });
+ render(
+ ,
+ renderArgs,
+ );
+
+ const modal = await screen.findByRole('dialog', { name: 'Delete Component' });
+ expect(modal).toBeVisible();
+
+ expect(await screen.findByText(
+ /by deleting this component, you will also be deleting it from in this library\./i,
+ )).toBeInTheDocument();
+ expect(screen.getByText(/unit 1/i)).toBeInTheDocument();
+ });
+
+ 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'],
+ },
+ }],
+ },
+ ],
+ });
+ render(
+ ,
+ renderArgs,
+ );
+
+ const modal = await screen.findByRole('dialog', { name: 'Delete Component' });
+ expect(modal).toBeVisible();
+
+ expect(await screen.findByText(
+ /by deleting this component, you will also be deleting it from in this library\./i,
+ )).toBeInTheDocument();
+ expect(screen.getByText(/2 units/i)).toBeInTheDocument();
+ });
});
diff --git a/src/library-authoring/components/ComponentDeleter.tsx b/src/library-authoring/components/ComponentDeleter.tsx
index c48dedec1..629795ad0 100644
--- a/src/library-authoring/components/ComponentDeleter.tsx
+++ b/src/library-authoring/components/ComponentDeleter.tsx
@@ -1,13 +1,19 @@
import React, { useCallback, useContext } from 'react';
import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
import { Icon } from '@openedx/paragon';
-import { CalendarViewDay, School, Warning } from '@openedx/paragon/icons';
+import { School, Warning, Info } from '@openedx/paragon/icons';
import { useSidebarContext } from '../common/context/SidebarContext';
-import { useDeleteLibraryBlock, useLibraryBlockMetadata, useRestoreLibraryBlock } from '../data/apiHooks';
+import {
+ useComponentsFromSearchIndex,
+ useDeleteLibraryBlock,
+ useLibraryBlockMetadata,
+ useRestoreLibraryBlock,
+} from '../data/apiHooks';
import messages from './messages';
import { ToastContext } from '../../generic/toast-context';
import DeleteModal from '../../generic/delete-modal/DeleteModal';
+import { type ContentHit } from '../../search-manager';
/**
* Helper component to load and display the name of the block.
@@ -63,22 +69,44 @@ const ComponentDeleter = ({ usageKey, ...props }: Props) => {
}
}, [usageKey, sidebarComponentUsageKey, closeLibrarySidebar]);
+ const { hits } = useComponentsFromSearchIndex([usageKey]);
+ const componentHit = (hits as ContentHit[])?.[0];
+
if (!props.isConfirmingDelete) {
return null;
}
+ let unitsMessage;
+ const unitsLength = componentHit?.units?.displayName?.length ?? 0;
+ if (unitsLength === 1) {
+ unitsMessage = componentHit?.units?.displayName?.[0];
+ } else if (unitsLength > 1) {
+ unitsMessage = `${unitsLength} units`;
+ }
+
const deleteText = intl.formatMessage(messages.deleteComponentConfirm, {
componentName: ,
message: (
<>
- {intl.formatMessage(messages.deleteComponentConfirmMsg1)}
-
-
-
- {intl.formatMessage(messages.deleteComponentConfirmMsg2)}
+ {unitsMessage
+ ? intl.formatMessage(messages.deleteComponentConfirmCourseSmall)
+ : intl.formatMessage(messages.deleteComponentConfirmCourse)}
+ {unitsMessage && (
+
+
+
+ {unitsMessage},
+ }}
+ />
+
+