[temp] feat: add download template button to taxonomy list

package.json

@@ -39,9 +39,9 @@
     "@edx/frontend-component-footer": "^12.3.0",
     "@edx/frontend-component-header": "^4.7.0",
     "@edx/frontend-enterprise-hotjar": "^2.0.0",
-    "@edx/frontend-lib-content-components": "1.175.0",
+    "@edx/frontend-lib-content-components": "1.175.1",
     "@edx/frontend-platform": "5.6.1",
-    "@edx/paragon": "^20.45.4",
+    "@edx/paragon": "^21.5.6",
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
     "@fortawesome/free-regular-svg-icons": "5.15.4",
@@ -67,7 +67,7 @@
     "react-router": "6.16.0",
     "react-router-dom": "6.16.0",
     "react-textarea-autosize": "^8.4.1",
-    "react-transition-group": "4.4.1",
+    "react-transition-group": "4.4.5",
     "redux": "4.0.5",
     "regenerator-runtime": "0.13.7",
     "universal-cookie": "^4.0.4",
@@ -76,7 +76,7 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "1.2.0",
-    "@edx/frontend-build": "13.0.1",
+    "@edx/frontend-build": "13.0.4",
     "@edx/reactifex": "^1.0.3",
     "@edx/stylelint-config-edx": "^2.3.0",
     "@edx/typescript-config": "^1.0.1",

src/custom-pages/CustomPages.jsx

@@ -1,8 +1,6 @@
 import React, { useEffect, useContext, useState } from 'react';
 import PropTypes from 'prop-types';
-import {
-  Routes, Route, useLocation, useNavigate,
-} from 'react-router-dom';
+import { Routes, Route, useNavigate } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { AppContext, PageWrap } from '@edx/frontend-platform/react';
 import { injectIntl, FormattedMessage, intlShape } from '@edx/frontend-platform/i18n';
@@ -53,13 +51,11 @@ const CustomPages = ({
   const [orderedPages, setOrderedPages] = useState([]);
   const [currentPage, setCurrentPage] = useState();
   const [isOpen, open, close] = useToggle(false);
-  const [isEditModalOpen, openEditModal, closeEditModal] = useToggle(false);
 
   const courseDetails = useModel('courseDetails', courseId);
   document.title = getPageHeadTitle(courseDetails?.name, intl.formatMessage(messages.heading));
 
   const { config } = useContext(AppContext);
-  const location = useLocation();
   const learningCourseURL = `${config.LEARNING_BASE_URL}/course/${courseId}`;
 
   useEffect(() => {
@@ -79,15 +75,14 @@ const CustomPages = ({
     dispatch(updatePageOrder(courseId, newPageOrder));
   };
   const handleEditClose = () => (content) => {
-    navigate(location.pathname);
+    navigate(`/course/${courseId}/custom-pages`);
     if (!content?.metadata) {
-      closeEditModal();
+      setCurrentPage(null);
       return;
     }
     dispatch(updateSingleCustomPage({
       blockId: currentPage,
       metadata: { displayName: content.metadata.display_name },
-      onClose: closeEditModal,
       setCurrentPage,
     }));
   };
@@ -192,7 +187,6 @@ const CustomPages = ({
                       deletePageStatus,
                       courseId,
                       setCurrentPage,
-                      openEditModal,
                     }}
                   />
                 </SortableItem>
@@ -262,7 +256,6 @@ const CustomPages = ({
               <PageWrap>
                 <EditModal
                   courseId={courseId}
-                  isOpen={isEditModalOpen}
                   pageId={currentPage}
                   onClose={handleEditClose}
                 />

src/files-and-videos/files-page/FileInfoAssetSidebar.jsx → src/files-and-videos/files-page/FileInfoModalSidebar.jsx

@@ -18,10 +18,10 @@ import {
 } from '@edx/paragon';
 import { ContentCopy, InfoOutline } from '@edx/paragon/icons';
 
-import { getFileSizeToClosestByte } from '../data/utils';
+import { getFileSizeToClosestByte } from '../generic/utils';
 import messages from './messages';
 
-const FileInfoAssetSidebar = ({
+const FileInfoModalSidebar = ({
   asset,
   handleLockedAsset,
   // injected
@@ -109,7 +109,7 @@ const FileInfoAssetSidebar = ({
     </Stack>
   );
 };
-FileInfoAssetSidebar.propTypes = {
+FileInfoModalSidebar.propTypes = {
   asset: PropTypes.shape({
     displayName: PropTypes.string.isRequired,
     wrapperType: PropTypes.string.isRequired,
@@ -127,4 +127,4 @@ FileInfoAssetSidebar.propTypes = {
   intl: intlShape.isRequired,
 };
 
-export default injectIntl(FileInfoAssetSidebar);
+export default injectIntl(FileInfoModalSidebar);

src/files-and-videos/files-page/AssetThumbnail.jsx → src/files-and-videos/files-page/FileThumbnail.jsx

@@ -5,10 +5,10 @@ import {
   Icon,
   Image,
 } from '@edx/paragon';
-import { getSrc } from '../data/utils';
+import { getSrc } from './data/utils';
 import messages from './messages';
 
-const AssetThumbnail = ({
+const FileThumbnail = ({
   thumbnail,
   wrapperType,
   externalUrl,
@@ -50,13 +50,13 @@ const AssetThumbnail = ({
     </div>
   );
 };
-AssetThumbnail.defaultProps = {
+FileThumbnail.defaultProps = {
   thumbnail: null,
   wrapperType: null,
   externalUrl: null,
   displayName: null,
 };
-AssetThumbnail.propTypes = {
+FileThumbnail.propTypes = {
   thumbnail: PropTypes.string,
   wrapperType: PropTypes.string,
   externalUrl: PropTypes.string,
@@ -69,4 +69,4 @@ AssetThumbnail.propTypes = {
   intl: intlShape.isRequired,
 };
 
-export default injectIntl(AssetThumbnail);
+export default injectIntl(FileThumbnail);

src/files-and-videos/files-page/FilesAndUploads.jsx → src/files-and-videos/files-page/FilesPage.jsx

@@ -16,19 +16,22 @@ import {
   getUsagePaths,
   resetErrors,
   updateAssetOrder,
-} from '../data/thunks';
+} from './data/thunks';
 import messages from './messages';
-import FilesAndUploadsProvider from './FilesAndUploadsProvider';
+import FilesPageProvider from './FilesPageProvider';
 import getPageHeadTitle from '../../generic/utils';
-import FileTable from '../FileTable';
-import EditFileErrors from '../EditFileErrors';
-import { getFileSizeToClosestByte } from '../data/utils';
-import ThumbnailColumn from '../table-components/table-custom-columns/ThumbnailColumn';
-import ActiveColumn from '../table-components/table-custom-columns/ActiveColumn';
-import AccessColumn from '../table-components/table-custom-columns/AccessColumn';
-import AssetThumbnail from './AssetThumbnail';
+import {
+  AccessColumn,
+  ActiveColumn,
+  EditFileErrors,
+  FileTable,
+  ThumbnailColumn,
+} from '../generic';
+import { getFileSizeToClosestByte } from '../generic/utils';
+import FileThumbnail from './FileThumbnail';
+import FileInfoModalSidebar from './FileInfoModalSidebar';
 
-const FilesAndUploads = ({
+const FilesPage = ({
   courseId,
   // injected
   intl,
@@ -52,17 +55,24 @@ const FilesAndUploads = ({
     errors: errorMessages,
   } = useSelector(state => state.assets);
 
+  const handleErrorReset = (error) => dispatch(resetErrors(error));
   const handleAddFile = (file) => dispatch(addAssetFile(courseId, file, totalCount));
   const handleDeleteFile = (id) => dispatch(deleteAssetFile(courseId, id, totalCount));
   const handleDownloadFile = (selectedRows) => dispatch(fetchAssetDownload({ selectedRows, courseId }));
-  const handleLockFile = ({ fileId, locked }) => dispatch(updateAssetLock({ courseId, assetId: fileId, locked }));
+  const handleLockFile = (fileId, locked) => {
+    handleErrorReset({ errorType: 'lock' });
+    dispatch(updateAssetLock({ courseId, assetId: fileId, locked }));
+  };
   const handleUsagePaths = (asset) => dispatch(getUsagePaths({ asset, courseId }));
-  const handleErrorReset = (error) => dispatch(resetErrors(error));
   const handleFileOrder = ({ newFileIdOrder, sortType }) => {
     dispatch(updateAssetOrder(courseId, newFileIdOrder, sortType));
   };
 
-  const thumbnailPreview = (props) => AssetThumbnail(props);
+  const thumbnailPreview = (props) => FileThumbnail(props);
+  const infoModalSidebar = (asset) => FileInfoModalSidebar({
+    asset,
+    handleLockedAsset: handleLockFile,
+  });
 
   const assets = useModels('assets', assetIds);
   const data = {
@@ -141,7 +151,7 @@ const FilesAndUploads = ({
     );
   }
   return (
-    <FilesAndUploadsProvider courseId={courseId}>
+    <FilesPageProvider courseId={courseId}>
       <main>
         <div className="p-4">
           <EditFileErrors
@@ -169,18 +179,19 @@ const FilesAndUploads = ({
             tableColumns,
             maxFileSize,
             thumbnailPreview,
+            infoModalSidebar,
             files: assets,
           }}
         />
       </main>
-    </FilesAndUploadsProvider>
+    </FilesPageProvider>
   );
 };
 
-FilesAndUploads.propTypes = {
+FilesPage.propTypes = {
   courseId: PropTypes.string.isRequired,
   // injected
   intl: intlShape.isRequired,
 };
 
-export default injectIntl(FilesAndUploads);
+export default injectIntl(FilesPage);

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

@@ -19,7 +19,7 @@ import { IntlProvider } from '@edx/frontend-platform/i18n';
 import initializeStore from '../../store';
 import { executeThunk } from '../../utils';
 import { RequestStatus } from '../../data/constants';
-import FilesAndUploads from './FilesAndUploads';
+import FilesPage from './FilesPage';
 import {
   generateFetchAssetApiResponse,
   generateEmptyApiResponse,
@@ -35,9 +35,9 @@ import {
   deleteAssetFile,
   updateAssetLock,
   getUsagePaths,
-} from '../data/thunks';
-import { getAssetsUrl } from '../data/api';
-import messages from '../messages';
+} from './data/thunks';
+import { getAssetsUrl } from './data/api';
+import messages from '../generic/messages';
 
 let axiosMock;
 let store;
@@ -49,7 +49,7 @@ const renderComponent = () => {
   render(
     <IntlProvider locale="en">
       <AppProvider store={store}>
-        <FilesAndUploads courseId={courseId} />
+        <FilesPage courseId={courseId} />
       </AppProvider>
     </IntlProvider>,
   );

src/files-and-videos/files-page/FilesAndUploadsProvider.jsx → src/files-and-videos/files-page/FilesPageProvider.jsx

@@ -1,25 +1,25 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 
-export const FilesAndUploadsContext = React.createContext({});
+export const FilesPageContext = React.createContext({});
 
-const FilesAndUploadsProvider = ({ courseId, children }) => {
+const FilesPageProvider = ({ courseId, children }) => {
   const contextValue = useMemo(() => ({
     courseId,
     path: `/course/${courseId}/assets`,
   }), []);
   return (
-    <FilesAndUploadsContext.Provider
+    <FilesPageContext.Provider
       value={contextValue}
     >
       {children}
-    </FilesAndUploadsContext.Provider>
+    </FilesPageContext.Provider>
   );
 };
 
-FilesAndUploadsProvider.propTypes = {
+FilesPageProvider.propTypes = {
   courseId: PropTypes.string.isRequired,
   children: PropTypes.node.isRequired,
 };
 
-export default FilesAndUploadsProvider;
+export default FilesPageProvider;

src/files-and-videos/data/slice.js → src/files-and-videos/files-page/data/slice.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-param-reassign */
 import { createSlice } from '@reduxjs/toolkit';
 
-import { RequestStatus } from '../../data/constants';
+import { RequestStatus } from '../../../data/constants';
 
 const slice = createSlice({
   name: 'assets',

src/files-and-videos/data/thunks.js → src/files-and-videos/files-page/data/thunks.js

@@ -1,11 +1,11 @@
 import { isEmpty } from 'lodash';
-import { RequestStatus } from '../../data/constants';
+import { RequestStatus } from '../../../data/constants';
 import {
   addModel,
   addModels,
   removeModel,
   updateModel,
-} from '../../generic/model-store';
+} from '../../../generic/model-store';
 import {
   getAssets,
   getAssetUsagePaths,

src/files-and-videos/data/utils.js → src/files-and-videos/files-page/data/utils.js

@@ -4,7 +4,7 @@ import {
   AudioFile,
 } from '@edx/paragon/icons';
 import { ensureConfig, getConfig } from '@edx/frontend-platform';
-import FILES_AND_UPLOAD_TYPE_FILTERS from './constant';
+import FILES_AND_UPLOAD_TYPE_FILTERS from '../../generic/constants';
 
 ensureConfig([
   'STUDIO_BASE_URL',
@@ -54,55 +54,3 @@ export const getSrc = ({ thumbnail, wrapperType, externalUrl }) => {
     return InsertDriveFile;
   }
 };
-
-export const getFileSizeToClosestByte = (fileSize, numberOfDivides = 0) => {
-  if (fileSize > 1000) {
-    const updatedSize = fileSize / 1000;
-    const incrementNumberOfDivides = numberOfDivides + 1;
-    return getFileSizeToClosestByte(updatedSize, incrementNumberOfDivides);
-  }
-  const fileSizeFixedDecimal = Number.parseFloat(fileSize).toFixed(2);
-  switch (numberOfDivides) {
-  case 1:
-    return `${fileSizeFixedDecimal} KB`;
-  case 2:
-    return `${fileSizeFixedDecimal} MB`;
-  case 3:
-    return `${fileSizeFixedDecimal} GB`;
-  default:
-    return `${fileSizeFixedDecimal} B`;
-  }
-};
-
-export const sortFiles = (files, sortType) => {
-  const [sort, direction] = sortType.split(',');
-  let sortedFiles;
-  if (sort === 'displayName') {
-    sortedFiles = files.sort((f1, f2) => {
-      const lowerCaseF1 = f1[sort].toLowerCase();
-      const lowerCaseF2 = f2[sort].toLowerCase();
-      if (lowerCaseF1 < lowerCaseF2) {
-        return 1;
-      }
-      if (lowerCaseF1 > lowerCaseF2) {
-        return -1;
-      }
-      return 0;
-    });
-  } else {
-    sortedFiles = files.sort((f1, f2) => {
-      if (f1[sort] < f2[sort]) {
-        return 1;
-      }
-      if (f1[sort] > f2[sort]) {
-        return -1;
-      }
-      return 0;
-    });
-  }
-  const sortedIds = sortedFiles.map(file => file.id);
-  if (direction === 'asc') {
-    return sortedIds.reverse();
-  }
-  return sortedIds;
-};