feat: implement file picker mode for files page

Author: xitij2000

src/files-and-videos/files-page/FilePickerPage.tsx

@@ -0,0 +1,20 @@
+import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
+import { useLocation, useParams } from 'react-router-dom';
+import FilesPage from './FilesPage';
+
+export const FilePickerPage = () => {
+  const { courseId } = useParams<{ courseId: string }>();
+  const location = useLocation();
+  const params = new URLSearchParams(location.search);
+  const filePickerOptions = {
+    usageKey: params.get('usage_key')!,
+    multiSelect: params.get('multiSelect') === 'true',
+    mimeType: params.get('mimeType'),
+  };
+
+  return (
+    <CourseAuthoringProvider courseId={courseId!}>
+      <FilesPage filePickerMode filePickerOptions={filePickerOptions} />
+    </CourseAuthoringProvider>
+  );
+};

…iles-and-videos/files-page/FilesPage.jsx …iles-and-videos/files-page/FilesPage.tsxsrc/files-and-videos/files-page/FilesPage.jsx renamed to src/files-and-videos/files-page/FilesPage.tsx src/files-and-videos/files-page/FilesPage.jsx renamed to src/files-and-videos/files-page/FilesPage.tsx

@@ -1,6 +1,7 @@
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { Container } from '@openedx/paragon';
+import { DeprecatedReduxState } from '@src/store';
 import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -15,11 +16,17 @@ import { AgreementGated } from '@src/constants';
 
 import { EditFileErrors } from '../generic';
 import { fetchAssets, resetErrors } from './data/thunks';
-import FilesPageProvider from './FilesPageProvider';
+import FilesPageProvider, { FilePickerOptions } from './FilesPageProvider';
 import messages from './messages';
 import './FilesPage.scss';
 
-const FilesPage = () => {
+const FilesPage = ({
+  filePickerMode = false,
+  filePickerOptions = undefined,
+}: {
+  filePickerMode?: boolean,
+  filePickerOptions?: FilePickerOptions,
+}) => {
   const intl = useIntl();
   const dispatch = useDispatch();
   const { courseId, courseDetails } = useCourseAuthoringContext();
@@ -30,7 +37,7 @@ const FilesPage = () => {
     deletingStatus: deleteAssetStatus,
     updatingStatus: updateAssetStatus,
     errors: errorMessages,
-  } = useSelector(state => state.assets);
+  } = useSelector((state:DeprecatedReduxState) => state.assets);
 
   useEffect(() => {
     dispatch(fetchAssets(courseId));
@@ -47,7 +54,7 @@ const FilesPage = () => {
   }
 
   return (
-    <FilesPageProvider courseId={courseId}>
+    <FilesPageProvider filePickerMode={filePickerMode} filePickerOptions={filePickerOptions}>
       <Container size="xl" className="p-4 pt-4.5">
         <EditFileErrors
           resetErrors={handleErrorReset}

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

@@ -0,0 +1,41 @@
+import React, { useMemo } from 'react';
+
+export interface FilePickerOptions {
+  usageKey: string,
+  multiSelect: boolean,
+  mimeType: string | null,
+}
+
+interface FilesPageContextInterface {
+  filePickerMode: boolean,
+  filePickerOptions?: FilePickerOptions,
+
+}
+
+export const FilesPageContext = React.createContext<FilesPageContextInterface>({
+  filePickerMode: false,
+});
+
+interface FilesPageProviderProps extends FilesPageContextInterface {
+  children: React.ReactNode,
+}
+
+const FilesPageProvider = ({
+  children,
+  filePickerMode = false,
+  filePickerOptions,
+}: FilesPageProviderProps) => {
+  const contextValue = useMemo(() => ({
+    filePickerMode,
+    filePickerOptions,
+  }), []);
+  return (
+    <FilesPageContext.Provider
+      value={contextValue}
+    >
+      {children}
+    </FilesPageContext.Provider>
+  );
+};
+
+export default FilesPageProvider;

src/files-and-videos/files-page/FilesPageProvider.tsx

@@ -1,4 +1,7 @@
-import { useCallback, useEffect, useState } from 'react';
+import { FilesPageContext } from '@src/files-and-videos/files-page/FilesPageProvider';
+import {
+  useCallback, useContext, useEffect, useState,
+} from 'react';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import isEmpty from 'lodash/isEmpty';
@@ -11,7 +14,7 @@ import {
   useToggle,
 } from '@openedx/paragon';
 
-import { RequestStatus } from '../../data/constants';
+import { RequestStatus } from '@src/data/constants';
 import { sortFiles } from './utils';
 import messages from './messages';
 
@@ -79,6 +82,7 @@ const FileTable = ({
   const defaultCurrentView = (fileType === 'video' && localStorage.getItem('videosCurrentView')) ||
     (fileType === 'file' && localStorage.getItem('filesCurrentView')) || defaultView;
   const [currentView, setCurrentView] = useState(defaultCurrentView);
+  const { filePickerMode, filePickerOptions } = useContext(FilesPageContext);
 
   useEffect(() => {
     if (!isEmpty(selectedRows) && Object.keys(selectedRows[0]).length > 0) {
@@ -189,6 +193,7 @@ const FileTable = ({
   if (!hasMoreInfoColumn) {
     tableColumns.push({ ...moreInfoColumn });
   }
+  const maxSelectedRows = filePickerOptions?.multiSelect === false ? 1 : undefined;
 
   return (
     <div className="files-table">
@@ -198,6 +203,7 @@ const FileTable = ({
         isSortable
         isSelectable
         isPaginated
+        maxSelectedRows={maxSelectedRows}
         defaultColumnValues={{ Filter: TextFilter }}
         dataViewToggleOptions={{
           isDataViewToggleEnabled: true,

src/files-and-videos/generic/FileTable.jsx

@@ -1,7 +1,10 @@
 import { getConfig } from '@edx/frontend-platform';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
-import { Button, DataTableContext, Dropdown, useToggle, } from '@openedx/paragon';
+import {
+  Button, DataTableContext, Dropdown, useToggle,
+} from '@openedx/paragon';
 import { Add, Tune } from '@openedx/paragon/icons';
+import FilesPageProvider, { FilesPageContext } from '@src/files-and-videos/files-page/FilesPageProvider';
 import { isEmpty } from 'lodash';
 import { PropTypes } from 'prop-types';
 import React, { useContext, useEffect } from 'react';
@@ -21,15 +24,15 @@ const TableActions = ({
   const intl = useIntl();
   const [isSortOpen, openSort, closeSort] = useToggle(false);
   const { state, clearSelection } = useContext(DataTableContext);
-  const filePickerParams = new URLSearchParams(window.location.search);
 
-  const showFilePicker = Boolean(filePickerParams.get('filePicker')) && Boolean(window.opener);
+  const { filePickerMode } = useContext(FilesPageContext);
+  // If window.opener is not available, show the user some error message.
+  const showFilePicker = filePickerMode; // && Boolean(window.opener);
   // This useEffect saves DataTable state so it can persist after table re-renders due to data reload.
   useEffect(() => {
     setInitialState(state);
   }, [state]);
 
-
   const handleOpenFileSelector = () => {
     fileInputControl.click();
     clearSelection();

src/files-and-videos/generic/table-components/TableActions.jsx

@@ -7,7 +7,9 @@ import {
   getConfig,
   getPath,
 } from '@edx/frontend-platform';
-import { AppProvider, ErrorPage } from '@edx/frontend-platform/react';
+import { AppProvider, ErrorPage, PageWrap } from '@edx/frontend-platform/react';
+import { FilesPage } from '@src/files-and-videos';
+import { FilePickerPage } from '@src/files-and-videos/files-page/FilePickerPage';
 import React, { StrictMode, useEffect } from 'react';
 import { createRoot } from 'react-dom/client';
 import {
@@ -102,6 +104,7 @@ const App = () => {
         <Route path="/legacy/preview-changes/:usageKey" element={<PreviewChangesEmbed />} />
         <Route path="/course/:courseId/*" element={<CourseAuthoringRoutes />} />
         <Route path="/course_rerun/:courseId" element={<CourseRerun />} />
+        <Route path="/file_picker/:courseId" element={<PageWrap><FilePickerPage /></PageWrap>} />
         {getConfig().ENABLE_ACCESSIBILITY_PAGE === 'true' && (
           <Route path="/accessibility" element={<AccessibilityPage />} />
         )}

src/index.jsx

@@ -33,7 +33,24 @@ type InferState<ReducerType> = ReducerType extends Reducer<infer T> ? T : never;
 export interface DeprecatedReduxState {
   customPages: Record<string, any>;
   discussions: Record<string, any>;
-  assets: Record<string, any>;
+  assets: {
+    assetIds: string[];
+    loadingStatus: RequestStatusType;
+    duplicateFiles: string[];
+    updatingStatus: string;
+    addingStatus: string;
+    deletingStatus: string;
+    usageStatus: string;
+    errors: {
+      add: string[];
+      delete: string[];
+      lock: string[];
+      download: string[];
+      usageMetrics: string[];
+      loading:string;
+
+    };
+  };
   pagesAndResources: Record<string, any>;
   scheduleAndDetails: Record<string, any>;
   studioHome: InferState<typeof studioHomeReducer>;