Merge branch 'navin/course-outline/section' into steff456/dragndrop

open-craft · Dec 6, 2023 · c0e7d6d · c0e7d6d
2 parents 6645935 + 8734daa
commit c0e7d6d
Show file tree

Hide file tree

Showing 31 changed files with 292 additions and 500 deletions.
diff --git a/.github/workflows/commitlint.yml b/.github/workflows/commitlint.yml
@@ -1,43 +1,10 @@
 # Run commitlint on the commit messages in a pull request.
-# 
-# This is the same worflow of 
-# https://github.com/openedx/.github/blob/master/.github/workflows/commitlint.yml
-# 
-# We are using typescript with react-query on this MFE, and it is necessary
-# to add one more step to remove tsconfig.json due to an issue in commitlint.
-# https://github.com/conventional-changelog/commitlint/issues/3256
-# 
-# We can return use the open edx workflow when the issue is fixed.
 
 name: Lint Commit Messages
 
 on:
   - pull_request
 
-defaults:
-  run:
-    shell: bash
-
 jobs:
   commitlint:
-    runs-on: ubuntu-20.04
-    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v4
-        with:
-          # Fetch 100 commits.  Should be enough?
-          fetch-depth: 100
-
-      - name: Download a local configuration file if needed
-        run: |
-          if [[ ! -f commitlint.config.js ]]; then
-            echo "Downloading the default commitlint config from edx_lint"
-            wget --no-verbose -O commitlint.config.js https://raw.githubusercontent.com/openedx/edx-lint/HEAD/edx_lint/files/commitlint.config.js
-          fi
-
-      - name: remove tsconfig.json # see issue https://github.com/conventional-changelog/commitlint/issues/3256
-        run: |
-          rm -f tsconfig.json
-
-      - name: Run commitlint
-        uses: wagoid/commitlint-github-action@v5
+    uses: openedx/.github/.github/workflows/commitlint.yml@master
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -39,7 +39,7 @@
     "@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.176.0",
+    "@edx/frontend-lib-content-components": "1.176.4",
     "@edx/frontend-platform": "5.6.1",
     "@edx/paragon": "^21.5.6",
     "@fortawesome/fontawesome-svg-core": "1.2.36",

diff --git a/src/CourseAuthoringRoutes.jsx b/src/CourseAuthoringRoutes.jsx
@@ -42,7 +42,7 @@ const CourseAuthoringRoutes = () => {
     <CourseAuthoringPage courseId={courseId}>
       <Routes>
         <Route
-          path="outline"
+          path="/"
           element={<PageWrap><CourseOutline courseId={courseId} /></PageWrap>}
         />
         <Route

diff --git a/src/course-outline/data/slice.js b/src/course-outline/data/slice.js
@@ -71,9 +71,6 @@ const slice = createSlice({
     updateSectionList: (state, { payload }) => {
       state.sectionsList = state.sectionsList.map((section) => (section.id === payload.id ? payload : section));
     },
-    reorderSectionList: (state, { payload }) => {
-      state.sectionsList = payload;
-    },
     setCurrentSection: (state, { payload }) => {
       state.currentSection = payload;
     },
@@ -111,7 +108,6 @@ export const {
   setCurrentSection,
   deleteSection,
   duplicateSection,
-  reorderSectionList,
 } = slice.actions;
 
 export const {

diff --git a/src/course-outline/data/thunk.js b/src/course-outline/data/thunk.js
@@ -37,7 +37,6 @@ import {
   updateFetchSectionLoadingStatus,
   deleteSection,
   duplicateSection,
-  reorderSectionList,
 } from './slice';
 
 export function fetchCourseOutlineIndexQuery(courseId) {

diff --git a/src/course-outline/enable-highlights-modal/messages.js b/src/course-outline/enable-highlights-modal/messages.js
@@ -19,7 +19,7 @@ const messages = defineMessages({
   },
   cancelButton: {
     id: 'course-authoring.course-outline.status-bar.modal.cancelButton',
-    defaultMessage: 'Not yet',
+    defaultMessage: 'Cancel',
   },
   submitButton: {
     id: 'course-authoring.course-outline.status-bar.modal.submitButton',

diff --git a/src/course-outline/status-bar/messages.js b/src/course-outline/status-bar/messages.js
@@ -11,7 +11,7 @@ const messages = defineMessages({
   },
   pacingTypeSelfPaced: {
     id: 'course-authoring.course-outline.status-bar.pacing-type.self-paced',
-    defaultMessage: 'Self paced',
+    defaultMessage: 'Self-Paced',
   },
   pacingTypeInstructorPaced: {
     id: 'course-authoring.course-outline.status-bar.pacing-type.instructor-Paced',

diff --git a/src/files-and-videos/files-page/FilesPage.jsx b/src/files-and-videos/files-page/FilesPage.jsx
@@ -1,6 +1,5 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { isEmpty } from 'lodash';
 import { useDispatch, useSelector } from 'react-redux';
 import { injectIntl, FormattedMessage, intlShape } from '@edx/frontend-platform/i18n';
 import { CheckboxFilter, Container } from '@edx/paragon';
@@ -85,25 +84,26 @@ const FilesPage = ({
   const maxFileSize = 20 * 1048576;
 
   const activeColumn = {
-    id: 'usageLocations',
+    id: 'activeStatus',
     Header: 'Active',
-    accessor: (({ usageLocations }) => !isEmpty(usageLocations)),
+    accessor: 'activeStatus',
     Cell: ({ row }) => ActiveColumn({ row }),
     Filter: CheckboxFilter,
+    filter: 'exactTextCase',
     filterChoices: [
-      { name: intl.formatMessage(messages.activeCheckboxLabel), value: true },
-      { name: intl.formatMessage(messages.inactiveCheckboxLabel), value: false },
+      { name: intl.formatMessage(messages.activeCheckboxLabel), value: 'active' },
+      { name: intl.formatMessage(messages.inactiveCheckboxLabel), value: 'inactive' },
     ],
   };
   const accessColumn = {
-    id: 'locked',
+    id: 'lockStatus',
     Header: 'Access',
-    accessor: 'locked',
+    accessor: 'lockStatus',
     Cell: ({ row }) => AccessColumn({ row }),
     Filter: CheckboxFilter,
     filterChoices: [
-      { name: intl.formatMessage(messages.lockedCheckboxLabel), value: true },
-      { name: intl.formatMessage(messages.publicCheckboxLabel), value: false },
+      { name: intl.formatMessage(messages.lockedCheckboxLabel), value: 'locked' },
+      { name: intl.formatMessage(messages.publicCheckboxLabel), value: 'public' },
     ],
   };
   const thumbnailColumn = {

diff --git a/src/files-and-videos/files-page/data/thunks.js b/src/files-and-videos/files-page/data/thunks.js
@@ -111,6 +111,7 @@ export function updateAssetLock({ assetId, courseId, locked }) {
         model: {
           id: assetId,
           locked,
+          lockStatus: locked,
         },
       }));
       dispatch(updateEditStatus({ editType: 'lock', status: RequestStatus.SUCCESSFUL }));
@@ -133,11 +134,13 @@ export function getUsagePaths({ asset, courseId }) {
     try {
       const { usageLocations } = await getAssetUsagePaths({ assetId: asset.id, courseId });
       const assetLocations = usageLocations[asset.id];
+      const activeStatus = assetLocations?.length > 0 ? 'active' : 'inactive';
       dispatch(updateModel({
         modelType: 'assets',
         model: {
           id: asset.id,
           usageLocations: assetLocations,
+          activeStatus,
         },
       }));
       dispatch(updateEditStatus({ editType: 'usageMetrics', status: RequestStatus.SUCCESSFUL }));

diff --git a/src/files-and-videos/files-page/data/utils.js b/src/files-and-videos/files-page/data/utils.js
@@ -24,13 +24,17 @@ export const updateFileValues = (files) => {
       wrapperType = 'audio';
     }
 
-    const { dateAdded } = file;
+    const { dateAdded, locked, usageLocations } = file;
     const utcDateString = dateAdded.replace(/\bat\b/g, '');
     const utcDateTime = new Date(utcDateString).toString();
+    const lockStatus = locked ? 'locked' : 'public';
+    const activeStatus = usageLocations?.length > 0 ? 'active' : 'inactive';
 
     updatedFiles.push({
       ...file,
       wrapperType,
+      lockStatus,
+      activeStatus,
       dateAdded: utcDateTime,
     });
   });

diff --git a/src/files-and-videos/generic/InfoModal.jsx b/src/files-and-videos/generic/InfoModal.jsx
@@ -1,19 +1,24 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
 import {
   injectIntl,
+  intlShape,
   FormattedMessage,
 } from '@edx/frontend-platform/i18n';
 import {
+  Icon,
   ModalDialog,
   Stack,
   Truncate,
 } from '@edx/paragon';
+import { Error } from '@edx/paragon/icons';
 
 import messages from './messages';
 import UsageMetricsMessages from './UsageMetricsMessage';
 import FileThumbnail from './ThumbnailPreview';
+import { TRANSCRIPT_FAILURE_STATUSES } from '../videos-page/data/constants';
+import AlertMessage from '../../generic/alert-message';
 
 const InfoModal = ({
   file,
@@ -23,55 +28,74 @@ const InfoModal = ({
   usagePathStatus,
   error,
   sidebar,
-}) => (
-  <ModalDialog
-    title={file?.displayName}
-    isOpen={isOpen}
-    onClose={onClose}
-    size="lg"
-    hasCloseButton
-    data-testid="file-info-modal"
-    style={{ minHeight: '799px' }}
-  >
-    <ModalDialog.Header>
-      <ModalDialog.Title>
-        <div style={{ wordBreak: 'break-word' }}>
-          <Truncate lines={2} className="font-weight-bold small mt-3">
-            {file?.displayName}
-          </Truncate>
-        </div>
-      </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">
-          <Stack gap={5}>
-            <FileThumbnail
-              thumbnail={file?.thumbnail}
-              externalUrl={file?.externalUrl}
-              displayName={file?.displayName}
-              wrapperType={file?.wrapperType}
-              id={file?.id}
-              status={file?.status}
-              thumbnailPreview={thumbnailPreview}
-              imageSize={{ width: '503px', height: '281px' }}
-            />
-            <div>
-              <div className="row m-0 font-weight-bold">
-                <FormattedMessage {...messages.usageTitle} />
+  // injected
+  intl,
+}) => {
+  const [activeTab, setActiveTab] = useState('fileInfo');
+  const showTranscriptionError = TRANSCRIPT_FAILURE_STATUSES.includes(file?.transcriptionStatus)
+    && activeTab !== 'fileInfo';
+
+  return (
+    <ModalDialog
+      title={file?.displayName}
+      isOpen={isOpen}
+      onClose={onClose}
+      size="lg"
+      hasCloseButton
+      data-testid="file-info-modal"
+      style={{ minHeight: '799px' }}
+    >
+      <ModalDialog.Header>
+        <ModalDialog.Title>
+          <div style={{ wordBreak: 'break-word' }}>
+            <Truncate lines={2} className="font-weight-bold small mt-3">
+              {file?.displayName}
+            </Truncate>
+          </div>
+        </ModalDialog.Title>
+      </ModalDialog.Header>
+      <ModalDialog.Body className="pt-0 x-small">
+        <hr />
+        {showTranscriptionError && (
+          <AlertMessage
+            description={(
+              <div className="row m-0 align-itmes-center">
+                <Icon src={Error} className="text-danger-500 mr-2" />
+                {intl.formatMessage(messages.transcriptionErrorMessage, { error: file.errorDescription })}
               </div>
-              <UsageMetricsMessages {...{ usageLocations: file?.usageLocations, usagePathStatus, error }} />
-            </div>
-          </Stack>
-        </div>
-        <div className="col-5">
-          {sidebar(file)}
+            )}
+            variant="danger"
+          />
+        )}
+        <div className="row flex-nowrap m-0 mt-4">
+          <div className="col-7 mr-3">
+            <Stack gap={5}>
+              <FileThumbnail
+                thumbnail={file?.thumbnail}
+                externalUrl={file?.externalUrl}
+                displayName={file?.displayName}
+                wrapperType={file?.wrapperType}
+                id={file?.id}
+                status={file?.status}
+                thumbnailPreview={thumbnailPreview}
+                imageSize={{ width: '503px', height: '281px' }}
+              />
+              <div>
+                <div className="row m-0 font-weight-bold">
+                  <FormattedMessage {...messages.usageTitle} />
+                </div>
+                <UsageMetricsMessages {...{ usageLocations: file?.usageLocations, usagePathStatus, error }} />
+              </div>
+            </Stack>
+          </div>
+          <div className="col-5">
+            {sidebar(file, activeTab, setActiveTab)}
+          </div>
         </div>
-      </div>
-    </ModalDialog.Body>
-  </ModalDialog>
-);
+      </ModalDialog.Body>
+    </ModalDialog>
+  );
+};
 
 InfoModal.propTypes = {
   file: PropTypes.shape({
@@ -86,13 +110,17 @@ InfoModal.propTypes = {
     fileSize: PropTypes.number.isRequired,
     usageLocations: PropTypes.arrayOf(PropTypes.string),
     status: PropTypes.string,
+    transcriptionStatus: PropTypes.string,
+    errorDescription: PropTypes.string,
   }),
   onClose: PropTypes.func.isRequired,
   isOpen: PropTypes.bool.isRequired,
   usagePathStatus: PropTypes.string.isRequired,
   error: PropTypes.arrayOf(PropTypes.string).isRequired,
   thumbnailPreview: PropTypes.func.isRequired,
   sidebar: PropTypes.func.isRequired,
+  // injected
+  intl: intlShape.isRequired,
 };
 
 InfoModal.defaultProps = {

diff --git a/src/files-and-videos/generic/index.js b/src/files-and-videos/generic/index.js
@@ -6,6 +6,7 @@ import {
   MoreInfoColumn,
   StatusColumn,
   ThumbnailColumn,
+  TranscriptColumn,
 } from './table-components';
 import FileInput, { useFileInput } from './FileInput';
 
@@ -19,6 +20,7 @@ export {
   ThumbnailColumn,
   FileInput,
   useFileInput,
+  TranscriptColumn,
 };
 export { default as FileTable } from './FileTable';
 export { default as EditFileErrors } from './EditFileErrors';