feat: Asset Browser and picker for XBlocks

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>
+  );
+};

src/files-and-videos/files-page/FilesPage.jsx → 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.tsx

@@ -0,0 +1,40 @@
+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/generic/FileTable.jsx

@@ -1,4 +1,10 @@
-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 +17,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 +85,7 @@ const FileTable = ({
   const defaultCurrentView = (fileType === 'video' && localStorage.getItem('videosCurrentView')) ||
     (fileType === 'file' && localStorage.getItem('filesCurrentView')) || defaultView;
   const [currentView, setCurrentView] = useState(defaultCurrentView);
+  const { filePickerOptions } = useContext(FilesPageContext);
 
   useEffect(() => {
     if (!isEmpty(selectedRows) && Object.keys(selectedRows[0]).length > 0) {
@@ -189,6 +196,7 @@ const FileTable = ({
   if (!hasMoreInfoColumn) {
     tableColumns.push({ ...moreInfoColumn });
   }
+  const maxSelectedRows = filePickerOptions?.multiSelect === false ? 1 : undefined;
 
   return (
     <div className="files-table">
@@ -198,6 +206,7 @@ const FileTable = ({
         isSortable
         isSelectable
         isPaginated
+        maxSelectedRows={maxSelectedRows}
         defaultColumnValues={{ Filter: TextFilter }}
         dataViewToggleOptions={{
           isDataViewToggleEnabled: true,

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

@@ -1,15 +1,16 @@
-import React, { useContext, useEffect } from 'react';
-import { isEmpty } from 'lodash';
-import { PropTypes } from 'prop-types';
-import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import {
   Button,
   DataTableContext,
   Dropdown,
   useToggle,
 } from '@openedx/paragon';
 import { Add, Tune } from '@openedx/paragon/icons';
+import { FilesPageContext } from '@src/files-and-videos/files-page/FilesPageProvider';
+import { isEmpty } from 'lodash';
+import { PropTypes } from 'prop-types';
+import React, { useContext, useEffect } from 'react';
 import messages from '../messages';
 import SortAndFilterModal from './sort-and-filter-modal';
 
@@ -27,6 +28,9 @@ const TableActions = ({
   const [isSortOpen, openSort, closeSort] = useToggle(false);
   const { state, clearSelection } = useContext(DataTableContext);
 
+  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);
@@ -80,6 +84,21 @@ const TableActions = ({
       <Button iconBefore={Add} onClick={handleOpenFileSelector}>
         {intl.formatMessage(messages.addFilesButtonLabel, { fileType })}
       </Button>
+      {showFilePicker && (
+        <Button
+          className="ml-2"
+          onClick={async () => {
+            window.opener.postMessage({
+              type: 'org.openedx.assets.selected.v1',
+              data: selectedFlatRows.map(({ original }) => original),
+            }, '*');
+            window.close();
+          }}
+          disabled={selectedFlatRows.length === 0}
+        >
+          Select File(s)
+        </Button>
+      )}
       <SortAndFilterModal {...{ isSortOpen, closeSort, handleSort }} />
     </>
   );

src/index.jsx

@@ -7,7 +7,8 @@ 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 { FilePickerPage } from '@src/files-and-videos/files-page/FilePickerPage';
 import React, { StrictMode, useEffect } from 'react';
 import { createRoot } from 'react-dom/client';
 import {
@@ -102,6 +103,14 @@ 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/store.ts

@@ -33,7 +33,23 @@ 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>;