Merge branch 'master' into rpenido/fal-4058/add-unit-tag-support

rpenido · rpenido · commit 3ddaf5a4e544 · 2025-04-09T15:29:47.000-03:00
diff --git a/src/course-outline/CourseOutline.jsx b/src/course-outline/CourseOutline.jsx
@@ -108,7 +108,6 @@ const CourseOutline = ({ courseId }) => {
     handlePasteClipboardClick,
     notificationDismissUrl,
     discussionsSettings,
-    discussionsIncontextFeedbackUrl,
     discussionsIncontextLearnmoreUrl,
     deprecatedBlocksInfo,
     proctoringErrors,
@@ -241,7 +240,6 @@ const CourseOutline = ({ courseId }) => {
           notificationDismissUrl={notificationDismissUrl}
           handleDismissNotification={handleDismissNotification}
           discussionsSettings={discussionsSettings}
-          discussionsIncontextFeedbackUrl={discussionsIncontextFeedbackUrl}
           discussionsIncontextLearnmoreUrl={discussionsIncontextLearnmoreUrl}
           deprecatedBlocksInfo={deprecatedBlocksInfo}
           proctoringErrors={proctoringErrors}
@@ -266,7 +264,6 @@ const CourseOutline = ({ courseId }) => {
             notificationDismissUrl={notificationDismissUrl}
             handleDismissNotification={handleDismissNotification}
             discussionsSettings={discussionsSettings}
-            discussionsIncontextFeedbackUrl={discussionsIncontextFeedbackUrl}
             discussionsIncontextLearnmoreUrl={discussionsIncontextLearnmoreUrl}
             deprecatedBlocksInfo={deprecatedBlocksInfo}
             proctoringErrors={proctoringErrors}
diff --git a/src/course-outline/__mocks__/courseOutlineIndex.js b/src/course-outline/__mocks__/courseOutlineIndex.js
@@ -3044,7 +3044,6 @@ module.exports = {
     blocks: [],
     advanceSettingsUrl: '/settings/advanced/course-v1:edx+101+y76',
   },
-  discussionsIncontextFeedbackUrl: '',
   discussionsIncontextLearnmoreUrl: '',
   initialState: {
     expandedLocators: [
diff --git a/src/course-outline/__mocks__/courseOutlineIndexWithoutSections.js b/src/course-outline/__mocks__/courseOutlineIndexWithoutSections.js
@@ -6,7 +6,6 @@ module.exports = {
     blocks: [],
     advanceSettingsUrl: '/settings/advanced/course-v1:edx+101+y76',
   },
-  discussionsIncontextFeedbackUrl: '',
   discussionsIncontextLearnmoreUrl: '',
   initialState: {
     expandedLocators: [
diff --git a/src/course-outline/data/api.js b/src/course-outline/data/api.js
@@ -35,7 +35,6 @@ export const exportTags = (courseId) => `${getApiBaseUrl()}/api/content_tagging/
  * @property {string} courseReleaseDate
  * @property {Object} courseStructure
  * @property {Object} deprecatedBlocksInfo
- * @property {string} discussionsIncontextFeedbackUrl
  * @property {string} discussionsIncontextLearnmoreUrl
  * @property {Object} initialState
  * @property {Object} initialUserClipboard
diff --git a/src/course-outline/hooks.jsx b/src/course-outline/hooks.jsx
@@ -66,7 +66,6 @@ const useCourseOutline = ({ courseId }) => {
     lmsLink,
     notificationDismissUrl,
     discussionsSettings,
-    discussionsIncontextFeedbackUrl,
     discussionsIncontextLearnmoreUrl,
     deprecatedBlocksInfo,
     proctoringErrors,
@@ -341,7 +340,6 @@ const useCourseOutline = ({ courseId }) => {
     handlePasteClipboardClick,
     notificationDismissUrl,
     discussionsSettings,
-    discussionsIncontextFeedbackUrl,
     discussionsIncontextLearnmoreUrl,
     deprecatedBlocksInfo,
     proctoringErrors,
diff --git a/src/course-outline/page-alerts/PageAlerts.jsx b/src/course-outline/page-alerts/PageAlerts.jsx
@@ -31,7 +31,6 @@ const PageAlerts = ({
   notificationDismissUrl,
   handleDismissNotification,
   discussionsSettings,
-  discussionsIncontextFeedbackUrl,
   discussionsIncontextLearnmoreUrl,
   deprecatedBlocksInfo,
   proctoringErrors,
@@ -114,13 +113,6 @@ const PageAlerts = ({
             platformName: process.env.SITE_NAME,
           })}
         </div>
-        <Hyperlink
-          showLaunchIcon={false}
-          destination={discussionsIncontextFeedbackUrl}
-          target="_blank"
-        >
-          {intl.formatMessage(messages.discussionNotificationFeedback)}
-        </Hyperlink>
       </Alert>
     );
   };
@@ -453,7 +445,6 @@ PageAlerts.defaultProps = {
   notificationDismissUrl: '',
   handleDismissNotification: null,
   discussionsSettings: {},
-  discussionsIncontextFeedbackUrl: '',
   discussionsIncontextLearnmoreUrl: '',
   deprecatedBlocksInfo: {},
   proctoringErrors: [],
@@ -470,7 +461,6 @@ PageAlerts.propTypes = {
   discussionsSettings: PropTypes.shape({
     providerType: PropTypes.string,
   }),
-  discussionsIncontextFeedbackUrl: PropTypes.string,
   discussionsIncontextLearnmoreUrl: PropTypes.string,
   deprecatedBlocksInfo: PropTypes.shape({
     blocks: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),
diff --git a/src/course-outline/page-alerts/PageAlerts.test.jsx b/src/course-outline/page-alerts/PageAlerts.test.jsx
@@ -5,7 +5,6 @@ import {
   render,
   fireEvent,
   screen,
-  waitFor,
 } from '@testing-library/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { AppProvider } from '@edx/frontend-platform/react';
@@ -43,7 +42,6 @@ const pageAlertsData = {
   notificationDismissUrl: '',
   handleDismissNotification: null,
   discussionsSettings: {},
-  discussionsIncontextFeedbackUrl: '',
   discussionsIncontextLearnmoreUrl: '',
   deprecatedBlocksInfo: {},
   proctoringErrors: [],
@@ -102,7 +100,6 @@ describe('<PageAlerts />', () => {
       discussionsSettings: {
         providerType: 'openedx',
       },
-      discussionsIncontextFeedbackUrl: 'some-feedback-url',
       discussionsIncontextLearnmoreUrl: 'some-learn-more-url',
     });
 
@@ -115,12 +112,6 @@ describe('<PageAlerts />', () => {
     fireEvent.click(dismissBtn);
     const discussionAlertDismissKey = `discussionAlertDismissed-${pageAlertsData.courseId}`;
     expect(localStorage.getItem(discussionAlertDismissKey)).toBe('true');
-
-    await waitFor(() => {
-      const feedbackLink = screen.queryByText(messages.discussionNotificationFeedback.defaultMessage);
-      expect(feedbackLink).toBeInTheDocument();
-      expect(feedbackLink).toHaveAttribute('href', 'some-feedback-url');
-    });
   });
 
   it('renders deprecation warning alerts', async () => {
diff --git a/src/editors/sharedComponents/CodeEditor/hooks.js b/src/editors/sharedComponents/CodeEditor/hooks.js
@@ -24,9 +24,41 @@ export const prepareShowBtnEscapeHTML = () => {
 };
 
 export const cleanHTML = ({ initialText }) => {
+  const altRegex = /(alt="(.*?)")/g;
+  const altTextMap = {};
+  let altTextIndex = 0;
+
+  // Replace alt attributes with ALT_TEXT_0/1/2...
+  const initialTextWithoutAltAttr = initialText.replace(altRegex, (match) => {
+    const altText = `ALT_TEXT_${altTextIndex++}`;
+    altTextMap[altText] = match;
+    return altText;
+  });
+
+  // Replace HTML entities in the rest of the text, excluding altTexts
   const translateRegex = new RegExp(`&(${Object.keys(alphanumericMap).join('|')});`, 'g');
   const translator = ($0, $1) => alphanumericMap[$1];
-  return initialText.replace(translateRegex, translator);
+  const cleanedTextWithoutAltAttr = initialTextWithoutAltAttr.replace(translateRegex, translator);
+
+  // Clean altText matches in altTextMap, ignore &quot;
+  const alphanumericMapForAltText = { ...alphanumericMap };
+  delete alphanumericMapForAltText.quot;
+  Object.keys(altTextMap).forEach((key) => {
+    const altTextValue = altTextMap[key];
+    const cleanedAltTextValue = altTextValue.replace(
+      /&(\w+);/g,
+      ($0, $1) => alphanumericMapForAltText[$1] || $0,
+    );
+    altTextMap[key] = cleanedAltTextValue;
+  });
+
+  // Restore the original alt attributes from altTextMap
+  const finalCleanedText = Object.keys(altTextMap).reduce(
+    (text, altText) => text.replace(altText, altTextMap[altText]),
+    cleanedTextWithoutAltAttr,
+  );
+
+  return finalCleanedText;
 };
 
 export const syntaxChecker = ({ textArr, lang }) => {
diff --git a/src/editors/sharedComponents/CodeEditor/index.test.jsx b/src/editors/sharedComponents/CodeEditor/index.test.jsx
@@ -64,10 +64,17 @@ describe('CodeEditor', () => {
     describe('cleanHTML', () => {
       const dirtyText = `&${Object.keys(alphanumericMap).join('; , &')};`;
       const cleanText = `${Object.values(alphanumericMap).join(' , ')}`;
+      const dirtyTextWithAlt = '<img src="image.png" alt="Description &le; and &ge; &quot;do not convert these to double quotes&quot; 1" /> and &le; and &ge;';
+      const cleanTextWithAlt = '<img src="image.png" alt="Description ≤ and ≥ &quot;do not convert these to double quotes&quot; 1" /> and ≤ and ≥';
 
       it('escapes alphanumerics and sets them to be literals', () => {
         expect(hooks.cleanHTML({ initialText: dirtyText })).toEqual(cleanText);
       });
+
+      it('replaces alt attributes with placeholders and restores them', () => {
+        const result = hooks.cleanHTML({ initialText: dirtyTextWithAlt });
+        expect(result).toEqual(cleanTextWithAlt);
+      });
     });
 
     describe('escapeHTMLSpecialChars', () => {
diff --git a/src/library-authoring/components/BaseCard.scss b/src/library-authoring/components/BaseCard.scss
@@ -1,6 +1,7 @@
 .library-item-card {
   .pgn__card {
-    height: 100%
+    height: 100%;
+    min-width: 15rem;
   }
 
   .library-item-header {
diff --git a/src/library-authoring/components/BaseCard.tsx b/src/library-authoring/components/BaseCard.tsx
@@ -17,6 +17,7 @@ type BaseCardProps = {
   itemType: string;
   displayName: string;
   description?: string;
+  preview?: React.ReactNode;
   numChildren?: number;
   tags: ContentHitTags;
   actions: React.ReactNode;
@@ -70,10 +71,10 @@ const BaseCard = ({
         />
         <Card.Body className="w-100">
           <Card.Section>
-            <div className="text-truncate h3 mt-2">
+            <div className="text-truncate h3 mt-1">
               <Highlight text={displayName} />
             </div>
-            <Highlight text={description} />
+            {props.preview || <Highlight text={description} />}
           </Card.Section>
         </Card.Body>
         <Card.Footer className="mt-auto">
diff --git a/src/library-authoring/components/ContainerCard.test.tsx b/src/library-authoring/components/ContainerCard.test.tsx
@@ -1,9 +1,10 @@
 import userEvent from '@testing-library/user-event';
 
 import {
-  initializeMocks, render as baseRender, screen,
+  initializeMocks, render as baseRender, screen, waitFor,
 } from '../../testUtils';
 import { LibraryProvider } from '../common/context/LibraryContext';
+import { mockContentLibrary, mockGetContainerChildren } from '../data/api.mocks';
 import { type ContainerHit, PublishStatus } from '../../search-manager';
 import ContainerCard from './ContainerCard';
 
@@ -33,6 +34,9 @@ const containerHitSample: ContainerHit = {
   publishStatus: PublishStatus.Published,
 };
 
+mockContentLibrary.applyMock();
+mockGetContainerChildren.applyMock();
+
 const render = (ui: React.ReactElement, showOnlyPublished: boolean = false) => baseRender(ui, {
   extraWrapper: ({ children }) => (
     <LibraryProvider
@@ -80,4 +84,37 @@ describe('<ContainerCard />', () => {
     //   '/library/lb:org1:Demo_Course/container/container-display-name-123',
     // );
   });
+
+  it('should render no child blocks in card preview', async () => {
+    render(<ContainerCard hit={containerHitSample} />);
+
+    expect(screen.queryByTitle('text block')).not.toBeInTheDocument();
+    expect(screen.queryByText('+0')).not.toBeInTheDocument();
+  });
+
+  it('should render <=5 child blocks in card preview', async () => {
+    const containerWith5Children = {
+      ...containerHitSample,
+      usageKey: mockGetContainerChildren.fiveChildren,
+    };
+    render(<ContainerCard hit={containerWith5Children} />);
+
+    await waitFor(() => {
+      expect(screen.getAllByTitle('text block').length).toBe(5);
+    });
+    expect(screen.queryByText('+0')).not.toBeInTheDocument();
+  });
+
+  it('should render >5 child blocks with +N in card preview', async () => {
+    const containerWith6Children = {
+      ...containerHitSample,
+      usageKey: mockGetContainerChildren.sixChildren,
+    };
+    render(<ContainerCard hit={containerWith6Children} />);
+
+    await waitFor(() => {
+      expect(screen.getAllByTitle('text block').length).toBe(4);
+    });
+    expect(screen.queryByText('+2')).toBeInTheDocument();
+  });
 });
diff --git a/src/library-authoring/components/ContainerCard.tsx b/src/library-authoring/components/ContainerCard.tsx
@@ -1,20 +1,23 @@
-import { useCallback } from 'react';
+import { ReactNode, useCallback } from 'react';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import {
   ActionRow,
   Dropdown,
   Icon,
   IconButton,
+  Stack,
 } from '@openedx/paragon';
 import { MoreVert } from '@openedx/paragon/icons';
 import { Link } from 'react-router-dom';
 
+import { getItemIcon, getComponentStyleColor } from '../../generic/block-type-utils';
 import { type ContainerHit, PublishStatus } from '../../search-manager';
 import { useComponentPickerContext } from '../common/context/ComponentPickerContext';
 import { useLibraryContext } from '../common/context/LibraryContext';
 import { useSidebarContext } from '../common/context/SidebarContext';
-import { useLibraryRoutes } from '../routes';
 import BaseCard from './BaseCard';
+import { useContainerChildren } from '../data/apiHooks';
+import { useLibraryRoutes } from '../routes';
 import messages from './messages';
 
 type ContainerMenuProps = {
@@ -49,6 +52,59 @@ const ContainerMenu = ({ hit } : ContainerMenuProps) => {
   );
 };
 
+type ContainerCardPreviewProps = {
+  containerId: string;
+  showMaxChildren?: number;
+};
+
+const ContainerCardPreview = ({ containerId, showMaxChildren = 5 }: ContainerCardPreviewProps) => {
+  const { data, isLoading, isError } = useContainerChildren(containerId);
+  if (isLoading || isError) {
+    return null;
+  }
+
+  const hiddenChildren = data.length - showMaxChildren;
+  return (
+    <Stack direction="horizontal" gap={2}>
+      {
+        data.slice(0, showMaxChildren).map(({ id, blockType, displayName }, idx) => {
+          let blockPreview: ReactNode;
+          let classNames;
+
+          if (idx < showMaxChildren - 1 || hiddenChildren <= 0) {
+            // Show the first N-1 blocks as item icons
+            // (or all N blocks if no hidden children)
+            classNames = `rounded p-1 ${getComponentStyleColor(blockType)}`;
+            blockPreview = (
+              <Icon
+                src={getItemIcon(blockType)}
+                screenReaderText={blockType}
+                title={displayName}
+              />
+            );
+          } else {
+            // Container has more blocks than can fit in the preview, so show "+N"
+            blockPreview = (
+              <FormattedMessage
+                {...messages.containerPreviewMoreBlocks}
+                values={{ count: hiddenChildren + 1 }}
+              />
+            );
+          }
+          return (
+            <div
+              key={`container-card-preview-block-${id}`}
+              className={classNames}
+            >
+              {blockPreview}
+            </div>
+          );
+        })
+      }
+    </Stack>
+  );
+};
+
 type ContainerCardProps = {
   hit: ContainerHit,
 };
@@ -90,6 +146,7 @@ const ContainerCard = ({ hit } : ContainerCardProps) => {
     <BaseCard
       itemType={itemType}
       displayName={displayName}
+      preview={<ContainerCardPreview containerId={unitId} />}
       tags={tags}
       numChildren={numChildrenCount}
       actions={!componentPickerMode && (
diff --git a/src/library-authoring/components/messages.ts b/src/library-authoring/components/messages.ts
@@ -176,5 +176,10 @@ const messages = defineMessages({
     defaultMessage: 'This component can be synced in courses after publish.',
     description: 'Alert text of the modal to confirm publish a component in a library.',
   },
+  containerPreviewMoreBlocks: {
+    id: 'course-authoring.library-authoring.component.container-card-preview.more-blocks',
+    defaultMessage: '+{count}',
+    description: 'Count shown when a container has more blocks than will fit on the card preview.',
+  },
 });
 export default messages;
diff --git a/src/library-authoring/data/api.mocks.ts b/src/library-authoring/data/api.mocks.ts
diff --git a/src/library-authoring/data/api.ts b/src/library-authoring/data/api.ts
diff --git a/src/library-authoring/data/apiHooks.test.tsx b/src/library-authoring/data/apiHooks.test.tsx
diff --git a/src/library-authoring/data/apiHooks.ts b/src/library-authoring/data/apiHooks.ts

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,7 @@`
`1`	`1`	`.library-item-card {`
`2`	`2`	`.pgn__card {`
`3`		`- height: 100%`
	`3`	`+ height: 100%;`
	`4`	`+ min-width: 15rem;`
`4`	`5`	`}`
`5`	`6`
`6`	`7`	`.library-item-header {`