refactor: hide serach, filter and load more button in the modal

openedx · Nov 5, 2024 · 2ebb15c · 2ebb15c
1 parent 7a98722
commit 2ebb15c
Show file tree

Hide file tree

Showing 10 changed files with 21 additions and 11 deletions.
diff --git a/...tors/sharedComponents/ImageUploadModal/SelectImageModal/__snapshots__/index.test.jsx.snap b/...tors/sharedComponents/ImageUploadModal/SelectImageModal/__snapshots__/index.test.jsx.snap
@@ -59,7 +59,7 @@ exports[`SelectImageModal component snapshot 1`] = `
         "id": "authoring.texteditor.selectimagemodal.next.label",
       },
       "fetchError": {
-        "defaultMessage": "Failed to obtain course images. Please try again.",
+        "defaultMessage": "Failed to obtain images. Please try again.",
         "description": "Message presented to user when images are not found",
         "id": "authoring.texteditor.selectimagemodal.error.fetchImagesError",
       },

diff --git a/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/index.jsx b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/index.jsx
@@ -17,6 +17,7 @@ const SelectImageModal = ({
   isLoaded,
   isFetchError,
   isUploadError,
+  isLibrary,
   imageCount,
 }) => {
   const {
@@ -57,6 +58,7 @@ const SelectImageModal = ({
         isLoaded,
         isFetchError,
         isUploadError,
+        isLibrary,
       }}
     />
   );
@@ -73,12 +75,14 @@ SelectImageModal.propTypes = {
   isFetchError: PropTypes.bool.isRequired,
   isUploadError: PropTypes.bool.isRequired,
   imageCount: PropTypes.number.isRequired,
+  isLibrary: PropTypes.bool,
 };
 
 export const mapStateToProps = (state) => ({
   isLoaded: selectors.requests.isFinished(state, { requestKey: RequestKeys.fetchImages }),
   isFetchError: selectors.requests.isFailed(state, { requestKey: RequestKeys.fetchImages }),
   isUploadError: selectors.requests.isFailed(state, { requestKey: RequestKeys.uploadAsset }),
+  isLibrary: selectors.app.isLibrary(state),
   imageCount: state.app.imageCount,
 });
 

diff --git a/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/messages.js b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/messages.js
@@ -56,7 +56,7 @@ const messages = defineMessages({
   },
   fetchImagesError: {
     id: 'authoring.texteditor.selectimagemodal.error.fetchImagesError',
-    defaultMessage: 'Failed to obtain course images. Please try again.',
+    defaultMessage: 'Failed to obtain images. Please try again.',
     description: 'Message presented to user when images are not found',
   },
   fileSizeError: {

diff --git a/src/editors/sharedComponents/SelectionModal/Gallery.jsx b/src/editors/sharedComponents/SelectionModal/Gallery.jsx
@@ -23,6 +23,7 @@ const Gallery = ({
   showIdsOnCards,
   height,
   isLoaded,
+  isLibrary,
   thumbnailFallback,
   allowLazyLoad,
   fetchNextPage,
@@ -79,7 +80,7 @@ const Gallery = ({
           />
         )) }
       </SelectableBox.Set>
-      {allowLazyLoad && (
+      {(allowLazyLoad && !isLibrary) && (
         <GalleryLoadMoreButton
           {...{
             fetchNextPage,
@@ -112,6 +113,7 @@ Gallery.propTypes = {
   highlighted: PropTypes.string,
   onHighlightChange: PropTypes.func.isRequired,
   emptyGalleryLabel: PropTypes.shape({}).isRequired,
+  isLibrary: PropTypes.bool,
   showIdsOnCards: PropTypes.bool,
   height: PropTypes.string,
   thumbnailFallback: PropTypes.element,

diff --git a/src/editors/sharedComponents/SelectionModal/GalleryCard.jsx b/src/editors/sharedComponents/SelectionModal/GalleryCard.jsx
@@ -75,6 +75,7 @@ const GalleryCard = ({
               />
             </div>
           )}
+          {asset.dateAdded && (
           <p className="text-gray-500" style={{ fontSize: '11px' }}>
             <FormattedMessage
               {...messages.addedDate}
@@ -84,6 +85,7 @@ const GalleryCard = ({
               }}
             />
           </p>
+          )}
         </div>
       </div>
     </SelectableBox>

diff --git a/src/editors/sharedComponents/SelectionModal/index.jsx b/src/editors/sharedComponents/SelectionModal/index.jsx
@@ -34,6 +34,7 @@ const SelectionModal = ({
   isLoaded,
   isFetchError,
   isUploadError,
+  isLibrary,
 }) => {
   const intl = useIntl();
   const {
@@ -54,6 +55,7 @@ const SelectionModal = ({
 
   const galleryPropsValues = {
     isLoaded,
+    isLibrary,
     ...galleryProps,
   };
 
@@ -83,7 +85,7 @@ const SelectionModal = ({
       )}
       title={intl.formatMessage(titleMsg)}
       bodyStyle={{ background }}
-      headerComponent={(
+      headerComponent={!isLibrary && (
         <div style={{ margin: '18px 0' }}>
           <SearchSort {...searchSortProps} />
         </div>
@@ -160,6 +162,7 @@ SelectionModal.propTypes = {
   isLoaded: PropTypes.bool.isRequired,
   isFetchError: PropTypes.bool.isRequired,
   isUploadError: PropTypes.bool.isRequired,
+  isLibrary: PropTypes.bool,
 };
 
 export default SelectionModal;
diff --git a/src/editors/sharedComponents/TinyMceWidget/__snapshots__/index.test.jsx.snap b/src/editors/sharedComponents/TinyMceWidget/__snapshots__/index.test.jsx.snap
@@ -34,8 +34,8 @@ exports[`TinyMceWidget snapshots ImageUploadModal is not rendered 1`] = `
           ],
         },
         "initializeEditor": undefined,
-        "isLibrary": true,
-        "learningContextId": "course+org+run",
+        "isLibrary": false,
+        "learningContextId": "library-v1:org+t01",
         "lmsEndpointUrl": "sOmEvaLue.cOm",
         "minHeight": undefined,
         "openImgModal": [MockFunction modal.openModal],

diff --git a/src/editors/sharedComponents/TinyMceWidget/hooks.js b/src/editors/sharedComponents/TinyMceWidget/hooks.js
@@ -245,7 +245,6 @@ export const editorConfig = ({
   setEditorRef,
   editorContentHtml,
   images,
-  isLibrary,
   placeholder,
   initializeEditor,
   openImgModal,
@@ -268,9 +267,8 @@ export const editorConfig = ({
     imageToolbar,
     quickbarsInsertToolbar,
     quickbarsSelectionToolbar,
-  } = pluginConfig({ isLibrary, placeholder, editorType });
+  } = pluginConfig({ learningContextId, placeholder, editorType });
   const isLocaleRtl = isRtl(getLocale());
-
   return {
     onInit: (evt, editor) => {
       setEditorRef(editor);

diff --git a/src/editors/sharedComponents/TinyMceWidget/index.jsx b/src/editors/sharedComponents/TinyMceWidget/index.jsx
@@ -13,6 +13,7 @@ import ImageUploadModal from '../ImageUploadModal';
 import SourceCodeModal from '../SourceCodeModal';
 import * as hooks from './hooks';
 import './customTinyMcePlugins/embedIframePlugin';
+import { isLibraryV1Key } from '../../../generic/key-utils';
 
 export { prepareEditorRef } from './hooks';
 
@@ -54,7 +55,7 @@ const TinyMceWidget = ({
 
   return (
     <>
-      {!isLibrary && (
+      {!isLibraryV1Key(learningContextId) && (
         <ImageUploadModal
           isOpen={isImgOpen}
           close={closeImgModal}

diff --git a/src/editors/sharedComponents/TinyMceWidget/index.test.jsx b/src/editors/sharedComponents/TinyMceWidget/index.test.jsx
@@ -74,7 +74,7 @@ describe('TinyMceWidget', () => {
       expect(wrapper.instance.findByType(SourceCodeModal).length).toBe(0);
     });
     test('ImageUploadModal is not rendered', () => {
-      const wrapper = shallow(<TinyMceWidget {...props} isLibrary />);
+      const wrapper = shallow(<TinyMceWidget {...props} learningContextId="library-v1:org+t01" />);
       expect(wrapper.snapshot).toMatchSnapshot();
       expect(wrapper.instance.findByType(ImageUploadModal).length).toBe(0);
     });