feat: add files and uploads page

.env.development

@@ -35,7 +35,7 @@ ENABLE_NEW_EDITOR_PAGES=true
 ENABLE_NEW_HOME_PAGE = false
 ENABLE_NEW_COURSE_OUTLINE_PAGE = false
 ENABLE_NEW_UPDATES_PAGE = false
-ENABLE_NEW_FILES_UPLOADS_PAGE = false
+ENABLE_NEW_FILES_UPLOADS_PAGE = true
 ENABLE_NEW_VIDEO_UPLOAD_PAGE = false
 ENABLE_NEW_SCHEDULE_DETAILS_PAGE = false
 ENABLE_NEW_GRADING_PAGE = false

package.json

@@ -39,7 +39,7 @@
     "@edx/frontend-enterprise-hotjar": "^1.2.1",
     "@edx/frontend-lib-content-components": "^1.163.1",
     "@edx/frontend-platform": "4.2.0",
-    "@edx/paragon": "^20.32.0",
+    "@edx/paragon": "^20.45.4",
     "@fortawesome/fontawesome-svg-core": "1.2.28",
     "@fortawesome/free-brands-svg-icons": "5.11.2",
     "@fortawesome/free-regular-svg-icons": "5.11.2",
@@ -50,6 +50,7 @@
     "core-js": "3.8.1",
     "email-validator": "2.0.4",
     "formik": "2.2.6",
+    "jszip": "^3.10.1",
     "lodash": "4.17.21",
     "moment": "2.29.2",
     "prop-types": "15.7.2",

src/CourseAuthoringRoutes.jsx

@@ -9,6 +9,7 @@ import ProctoredExamSettings from './proctored-exam-settings/ProctoredExamSettin
 import EditorContainer from './editors/EditorContainer';
 import VideoSelectorContainer from './selectors/VideoSelectorContainer';
 import CustomPages from './custom-pages';
+import FilesAndUploads from './files-and-uploads';
 import { AdvancedSettings } from './advanced-settings';
 
 /**
@@ -47,7 +48,7 @@ const CourseAuthoringRoutes = ({ courseId }) => {
         <PageRoute path={`${path}/assets`}>
           {process.env.ENABLE_NEW_FILES_UPLOADS_PAGE === 'true'
             && (
-              <Placeholder />
+              <FilesAndUploads courseId={courseId} />
             )}
         </PageRoute>
         <PageRoute path={`${path}/videos`}>

src/files-and-uploads/ApiStatusToast.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Toast } from '@edx/paragon';
+import messages from './messages';
+
+const ApiStatusToast = ({
+  actionType,
+  selectedRowCount,
+  isOpen,
+  setClose,
+  setSelectedRowCount,
+  // injected
+  intl,
+}) => {
+  const handleClose = () => {
+    setSelectedRowCount(0);
+    setClose();
+  };
+
+  return (
+    <Toast
+      show={isOpen}
+      onClose={handleClose}
+    >
+      {intl.formatMessage(messages.apiStatusToastMessage, { actionType, selectedRowCount })}
+    </Toast>
+  );
+};
+
+ApiStatusToast.propTypes = {
+  actionType: PropTypes.string.isRequired,
+  selectedRowCount: PropTypes.number.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  setClose: PropTypes.func.isRequired,
+  setSelectedRowCount: PropTypes.func.isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(ApiStatusToast);

src/files-and-uploads/FileInfo.jsx

@@ -0,0 +1,148 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, FormattedMessage, intlShape } from '@edx/frontend-platform/i18n';
+
+import {
+  ModalDialog,
+  Stack,
+  IconButton,
+  ActionRow,
+  Icon,
+  Truncate,
+  IconButtonWithTooltip,
+  CheckboxControl,
+} from '@edx/paragon';
+import { ContentCopy, InfoOutline } from '@edx/paragon/icons';
+import AssetThumbnail from './FileThumbnail';
+
+import messages from './messages';
+
+const FileInfo = ({
+  asset,
+  isOpen,
+  onClose,
+  handleLockedAsset,
+  // injected
+  intl,
+}) => {
+  const [lockedState, setLockedState] = useState(asset.locked);
+  const handleLock = (e) => {
+    const locked = e.target.checked;
+    setLockedState(locked);
+    handleLockedAsset(asset.id, locked);
+  };
+
+  return (
+    <ModalDialog
+      title={asset.displayName}
+      isOpen={isOpen}
+      onClose={onClose}
+      size="lg"
+      hasCloseButton
+    >
+      <ModalDialog.Header>
+        <ModalDialog.Title>
+          {asset.displayName}
+        </ModalDialog.Title>
+      </ModalDialog.Header>
+      <ModalDialog.Body className="pt-0 x-small">
+        <hr />
+        <div className="row flex-nowrap m-0 mt-4">
+          <div className="col-7 mr-3">
+            <AssetThumbnail
+              thumbnail={asset.thumbnail}
+              externalUrl={asset.externalUrl}
+              displayName={asset.displayName}
+              wrapperType={asset.wrapperType}
+            />
+          </div>
+          <Stack>
+            <div className="font-weight-bold">
+              <FormattedMessage {...messages.dateAddedTitle} />
+            </div>
+            {asset.dateAdded}
+            <div className="font-weight-bold mt-3">
+              <FormattedMessage {...messages.fileSizeTitle} />
+            </div>
+            {/* {asset.fileSize} */}
+            <hr />
+            <div className="font-weight-bold mt-3">
+              <FormattedMessage {...messages.studioUrlTitle} />
+            </div>
+            <ActionRow>
+              <Truncate lines={1}>
+                {asset.portableUrl}
+              </Truncate>
+              <ActionRow.Spacer />
+              <IconButton
+                src={ContentCopy}
+                iconAs={Icon}
+                alt={messages.copyStudioUrlTitle.defaultMessage}
+                onClick={() => navigator.clipboard.writeText(asset.portableUrl)}
+              />
+            </ActionRow>
+            <div className="font-weight-bold mt-3">
+              <FormattedMessage {...messages.webUrlTitle} />
+            </div>
+            <ActionRow>
+              <Truncate lines={1}>
+                {asset.externalUrl}
+              </Truncate>
+              <ActionRow.Spacer />
+              <IconButton
+                src={ContentCopy}
+                iconAs={Icon}
+                alt={messages.copyWebUrlTitle.defaultMessage}
+                onClick={() => navigator.clipboard.writeText(asset.externalUrl)}
+              />
+            </ActionRow>
+            <hr />
+            <ActionRow>
+              <div className="font-weight-bold">
+                <FormattedMessage {...messages.lockFileTitle} />
+              </div>
+              <IconButtonWithTooltip
+                key="lock-file-info"
+                tooltipPlacement="top"
+                tooltipContent={intl.formatMessage(messages.lockFileTooltipContent)}
+                src={InfoOutline}
+                iconAs={Icon}
+                alt="Info"
+                size="inline"
+              />
+              <ActionRow.Spacer />
+              <CheckboxControl
+                checked={lockedState}
+                onChange={handleLock}
+                aria-label="Checkbox"
+              />
+            </ActionRow>
+          </Stack>
+        </div>
+        <div className="row m-0 pt-3 font-weight-bold">
+          <FormattedMessage {...messages.usageTitle} />
+        </div>
+      </ModalDialog.Body>
+    </ModalDialog>
+  );
+};
+
+FileInfo.propTypes = {
+  asset: PropTypes.shape({
+    displayName: PropTypes.string.isRequired,
+    wrapperType: PropTypes.string.isRequired,
+    locked: PropTypes.bool.isRequired,
+    externalUrl: PropTypes.string.isRequired,
+    thumbnail: PropTypes.string,
+    id: PropTypes.string.isRequired,
+    portableUrl: PropTypes.string.isRequired,
+    dateAdded: PropTypes.string.isRequired,
+  }).isRequired,
+  onClose: PropTypes.func.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  handleLockedAsset: PropTypes.func.isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(FileInfo);