Andal.LND/frontend-app-authoring
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: export and import UI bugs (#612)

Browse Source
This commit is contained in:
Kristin Aoki
2023-09-27 12:10:45 -04:00
committed by GitHub
parent 2ea876ae4f
commit 887a628c23
20 changed files with 89 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.env
View File

@@ -23,6 +23,7 @@ PUBLISHER_BASE_URL=''
REFRESH_ACCESS_TOKEN_ENDPOINT=''
SEGMENT_KEY=''
SITE_NAME=''
STUDIO_SHORT_NAME='Studio'
SUPPORT_EMAIL=''
SUPPORT_URL=''
USER_INFO_COOKIE_NAME=''
@@ -30,11 +31,8 @@ ENABLE_ACCESSIBILITY_PAGE=false
ENABLE_PROGRESS_GRAPH_SETTINGS=false
ENABLE_TEAM_TYPE_SETTING=false
ENABLE_NEW_EDITOR_PAGES=true
ENABLE_NEW_HOME_PAGE = false
ENABLE_NEW_COURSE_OUTLINE_PAGE = false
ENABLE_NEW_VIDEO_UPLOAD_PAGE = false
ENABLE_NEW_GRADING_PAGE = false
ENABLE_NEW_COURSE_TEAM_PAGE = false
ENABLE_UNIT_PAGE = false
ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN = false
BBB_LEARN_MORE_URL=''

3
.env.development
View File

@@ -25,6 +25,7 @@ REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
SEGMENT_KEY=null
SITE_NAME='Your Plaform Name Here'
STUDIO_BASE_URL='http://localhost:18010'
STUDIO_SHORT_NAME='Studio'
SUPPORT_EMAIL=
SUPPORT_URL='https://support.edx.org'
USER_INFO_COOKIE_NAME='edx-user-info'
@@ -34,8 +35,6 @@ ENABLE_TEAM_TYPE_SETTING=false
ENABLE_NEW_EDITOR_PAGES=true
ENABLE_NEW_COURSE_OUTLINE_PAGE = false
ENABLE_NEW_VIDEO_UPLOAD_PAGE = false
ENABLE_NEW_GRADING_PAGE = false
ENABLE_NEW_COURSE_TEAM_PAGE = false
ENABLE_UNIT_PAGE = false
ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN = false
BBB_LEARN_MORE_URL=''

4
.env.test
View File

@@ -22,17 +22,15 @@ REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
SEGMENT_KEY=null
SITE_NAME='edX'
STUDIO_BASE_URL='http://localhost:18010'
STUDIO_SHORT_NAME='Studio'
SUPPORT_EMAIL='support@example.com'
SUPPORT_URL='https://support.edx.org'
USER_INFO_COOKIE_NAME='edx-user-info'
ENABLE_PROGRESS_GRAPH_SETTINGS=false
ENABLE_TEAM_TYPE_SETTING=false
ENABLE_NEW_EDITOR_PAGES=true
ENABLE_NEW_HOME_PAGE = false
ENABLE_NEW_COURSE_OUTLINE_PAGE = true
ENABLE_NEW_VIDEO_UPLOAD_PAGE = true
ENABLE_NEW_GRADING_PAGE = true
ENABLE_NEW_COURSE_TEAM_PAGE = true
ENABLE_UNIT_PAGE = true
ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN = true
BBB_LEARN_MORE_URL=''

6
src/export-page/CourseExportPage.jsx
View File

@@ -59,7 +59,7 @@ const CourseExportPage = ({ intl, courseId }) => {
})}
</title>
</Helmet>
<Container size="xl" className="m-4 export">
<Container size="xl" className="mt-4 px-4 export">
<section className="setting-items mb-4">
<Layout
lg={[{ span: 9 }, { span: 3 }]}
@@ -74,8 +74,8 @@ const CourseExportPage = ({ intl, courseId }) => {
title={intl.formatMessage(messages.headingTitle)}
subtitle={intl.formatMessage(messages.headingSubtitle)}
/>
<p>{intl.formatMessage(messages.description1, { studioShortName: getConfig().STUDIO_SHORT_NAME })}</p>
<p>{intl.formatMessage(messages.description2)}</p>
<p className="small">{intl.formatMessage(messages.description1, { studioShortName: getConfig().STUDIO_SHORT_NAME })}</p>
<p className="small">{intl.formatMessage(messages.description2)}</p>
<Card>
<Card.Header
className="h3 px-3 text-black mb-4"

1
src/export-page/CourseExportPage.scss
View File

@@ -1,6 +1,5 @@
@import "./export-stepper/ExportStepper";
@import "./export-footer/ExportFooter";
@import "./export-sidebar/ExportSidebar";
.export {
.help-sidebar {

13
src/export-page/export-footer/ExportFooter.jsx
View File

@@ -8,13 +8,13 @@ import { Layout } from '@edx/paragon';
import messages from './messages';
const ExportFooter = ({ intl }) => (
<footer className="mt-4">
<footer className="mt-4 small">
<Layout
lg={[{ span: 6 }, { span: 6 }]}
md={[{ span: 6 }, { span: 6 }]}
sm={[{ span: 6 }, { span: 6 }]}
xs={[{ span: 6 }, { span: 6 }]}
xl={[{ span: 6 }, { span: 6 }]}
lg={[{ span: 5 }, { span: 2 }, { span: 5 }]}
md={[{ span: 5 }, { span: 2 }, { span: 5 }]}
sm={[{ span: 5 }, { span: 2 }, { span: 5 }]}
xs={[{ span: 5 }, { span: 2 }, { span: 5 }]}
xl={[{ span: 5 }, { span: 2 }, { span: 5 }]}
>
<Layout.Element>
<h4>{intl.formatMessage(messages.exportedDataTitle)}</h4>
@@ -28,6 +28,7 @@ const ExportFooter = ({ intl }) => (
<li>{intl.formatMessage(messages.exportedDataItem7)}</li>
</ul>
</Layout.Element>
<Layout.Element />
<Layout.Element>
<h4>{intl.formatMessage(messages.notExportedDataTitle)}</h4>
<ul className="export-footer-list">

8
src/export-page/export-sidebar/ExportSidebar.jsx
View File

@@ -4,7 +4,7 @@ import {
intlShape,
} from '@edx/frontend-platform/i18n';
import PropTypes from 'prop-types';
import { Button } from '@edx/paragon';
import { Hyperlink } from '@edx/paragon';
import { getConfig } from '@edx/frontend-platform';
import { HelpSidebar } from '../../generic/help-sidebar';
@@ -20,7 +20,7 @@ const ExportSidebar = ({ intl, courseId }) => {
<hr />
<h4 className="help-sidebar-about-title">{intl.formatMessage(messages.exportedContent)}</h4>
<p className="help-sidebar-about-descriptions">{intl.formatMessage(messages.exportedContentHeading)}</p>
<ul className="export-sidebar-list">
<ul className="px-3">
<li className="help-sidebar-about-descriptions">{intl.formatMessage(messages.content1)}</li>
<li className="help-sidebar-about-descriptions">{intl.formatMessage(messages.content2)}</li>
<li className="help-sidebar-about-descriptions">{intl.formatMessage(messages.content3)}</li>
@@ -28,7 +28,7 @@ const ExportSidebar = ({ intl, courseId }) => {
<li className="help-sidebar-about-descriptions">{intl.formatMessage(messages.content5)}</li>
</ul>
<p className="help-sidebar-about-descriptions">{intl.formatMessage(messages.notExportedContent)}</p>
<ul className="export-sidebar-list">
<ul className="px-3">
<li className="help-sidebar-about-descriptions">{intl.formatMessage(messages.content6)}</li>
<li className="help-sidebar-about-descriptions">{intl.formatMessage(messages.content7)}</li>
</ul>
@@ -36,7 +36,7 @@ const ExportSidebar = ({ intl, courseId }) => {
<h4 className="help-sidebar-about-title">{intl.formatMessage(messages.openDownloadFile)}</h4>
<p className="help-sidebar-about-descriptions">{intl.formatMessage(messages.openDownloadFileDescription)}</p>
<hr />
<Button href={exportLearnMoreUrl} target="_blank" variant="outline-primary">{intl.formatMessage(messages.learnMoreButtonTitle)}</Button>
<Hyperlink className="small" href={exportLearnMoreUrl} target="_blank" variant="outline-primary">{intl.formatMessage(messages.learnMoreButtonTitle)}</Hyperlink>
</HelpSidebar>
);
};

4
src/export-page/export-sidebar/ExportSidebar.scss
View File

@@ -1,4 +0,0 @@
.export-sidebar-list {
list-style: none;
padding-left: 0;
}

27
src/export-page/export-stepper/ExportStepper.jsx
View File

@@ -1,5 +1,6 @@
import React, { useEffect } from 'react';
import {
FormattedDate,
injectIntl,
intlShape,
} from '@edx/frontend-platform/i18n';
@@ -14,7 +15,6 @@ import {
} from '../data/selectors';
import { fetchExportStatus } from '../data/thunks';
import { EXPORT_STAGES } from '../data/constants';
import { getFormattedSuccessDate } from '../utils';
import { RequestStatus } from '../../data/constants';
import messages from './messages';
@@ -41,10 +41,26 @@ const ExportStepper = ({ intl, courseId }) => {
});
let successTitle = intl.formatMessage(messages.stepperSuccessTitle);
const formattedSuccessDate = getFormattedSuccessDate(successDate);
if (formattedSuccessDate && currentStage === EXPORT_STAGES.SUCCESS) {
successTitle += formattedSuccessDate;
const localizedSuccessDate = successDate ? (
<FormattedDate
value={successDate}
year="2-digit"
month="2-digit"
day="2-digit"
hour="numeric"
minute="numeric"
/>
) : null;
if (localizedSuccessDate && currentStage === EXPORT_STAGES.SUCCESS) {
const successWithDate = (
<>
{successTitle} ({localizedSuccessDate})
</>
);
successTitle = successWithDate;
}
const steps = [
{
title: intl.formatMessage(messages.stepperPreparingTitle),
@@ -68,7 +84,6 @@ const ExportStepper = ({ intl, courseId }) => {
return (
<div>
<h3 className="mt-4">{intl.formatMessage(messages.stepperHeaderTitle)}</h3>
<hr />
<CourseStepper
courseId={courseId}
steps={steps}
@@ -76,7 +91,7 @@ const ExportStepper = ({ intl, courseId }) => {
errorMessage={errorMessage}
hasError={!!errorMessage}
/>
{downloadPath && currentStage === EXPORT_STAGES.SUCCESS && <Button href={`${getConfig().STUDIO_BASE_URL}${downloadPath}`}>{intl.formatMessage(messages.downloadCourseButtonTitle)}</Button>}
{downloadPath && currentStage === EXPORT_STAGES.SUCCESS && <Button className="ml-5.5 mt-n2.5" href={`${getConfig().STUDIO_BASE_URL}${downloadPath}`}>{intl.formatMessage(messages.downloadCourseButtonTitle)}</Button>}
</div>
);
};

10
src/generic/course-stepper/index.jsx
View File

@@ -2,9 +2,9 @@ import React from 'react';
import { injectIntl } from '@edx/frontend-platform/i18n';
import {
Settings as SettingsIcon,
CheckBoxOutlineBlank as SuccessIcon,
LibraryAddCheck as SuccessDoneIcon,
ManageHistory as SuccessIcon,
Warning as ErrorIcon,
CheckCircle,
} from '@edx/paragon/icons';
import { Icon } from '@edx/paragon';
import PropTypes from 'prop-types';
@@ -23,8 +23,12 @@ const CourseStepper = ({
const isLastStep = index === lastStepIndex;
const isErrorStep = isActiveStep && hasError;
const isLastStepDone = isLastStep && isActiveStep;
const completedStep = index < activeKey && !hasError;
const getStepIcon = () => {
if (completedStep) {
return CheckCircle;
}
if (hasError && isActiveStep) {
return ErrorIcon;
}
@@ -32,7 +36,7 @@ const CourseStepper = ({
return SuccessIcon;
}
if (isLastStepDone) {
return SuccessDoneIcon;
return CheckCircle;
}
return SettingsIcon;

2
src/generic/modal-error/ModalError.jsx
View File

@@ -1,6 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { ActionRow, AlertModal, Button } from '@edx/paragon';
import { Error } from '@edx/paragon/icons';
const ModalError = ({
isOpen, title, message, handleCancel, handleAction, cancelButtonText, actionButtonText,
@@ -9,6 +10,7 @@ const ModalError = ({
title={title}
isOpen={isOpen}
variant="danger"
icon={Error}
footerNode={(
<ActionRow>
<Button variant="tertiary" onClick={handleCancel}>{cancelButtonText}</Button>

14
src/generic/sub-header/SubHeader.jsx
View File

@@ -5,7 +5,7 @@ import { ActionRow } from '@edx/paragon';
const SubHeader = ({
title, subtitle, contentTitle, description, instruction, headerActions,
}) => (
<>
<div className="border-bottom border-light-400 mb-3">
<header className="sub-header">
<h2 className="sub-header-title">
<small className="sub-header-title-subtitle">{subtitle}</small>
@@ -17,14 +17,16 @@ const SubHeader = ({
</ActionRow>
)}
</header>
<header className="sub-header-content">
<h2 className="sub-header-content-title">{contentTitle}</h2>
<span className="small text-gray-700">{description}</span>
</header>
{contentTitle && (
<header className="sub-header-content">
<h2 className="sub-header-content-title">{contentTitle}</h2>
<span className="small text-gray-700">{description}</span>
</header>
)}
{instruction && (
<p className="sub-header-instructions mb-4">{instruction}</p>
)}
</>
</div>
);
SubHeader.defaultProps = {
instruction: '',

4
src/generic/sub-header/SubHeader.scss
View File

@@ -9,7 +9,6 @@
.sub-header-title {
font: normal $font-weight-bold 2rem/2.25rem $font-family-base;
margin-bottom: 1.75rem;
color: $black;
.sub-header-title-subtitle {
@@ -34,7 +33,6 @@
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: $border-width solid $light-400;
padding-bottom: 12px;
margin-top: 1.5rem;
margin-bottom: 12px;
}

8
src/import-page/CourseImportPage.jsx
View File

@@ -54,7 +54,7 @@ const CourseImportPage = ({ intl, courseId }) => {
})}
</title>
</Helmet>
<Container size="xl" className="m-4 import">
<Container size="xl" className="mt-4 px-4 import">
<section className="setting-items mb-4">
<Layout
lg={[{ span: 9 }, { span: 3 }]}
@@ -69,9 +69,9 @@ const CourseImportPage = ({ intl, courseId }) => {
title={intl.formatMessage(messages.headingTitle)}
subtitle={intl.formatMessage(messages.headingSubtitle)}
/>
<p>{intl.formatMessage(messages.description1)}</p>
<p>{intl.formatMessage(messages.description2)}</p>
<p>{intl.formatMessage(messages.description3)}</p>
<p className="small">{intl.formatMessage(messages.description1)}</p>
<p className="small">{intl.formatMessage(messages.description2)}</p>
<p className="small">{intl.formatMessage(messages.description3)}</p>
<FileSection courseId={courseId} />
{importTriggered && <ImportStepper courseId={courseId} />}
</article>

2
src/import-page/CourseImportPage.scss
View File

@@ -1,5 +1,3 @@
@import "./import-sidebar/ImportSidebar";
.import {
.help-sidebar {
margin-top: 7.188rem;

8
src/import-page/file-section/FileSection.jsx
View File

@@ -28,8 +28,9 @@ const FileSection = ({ intl, courseId }) => {
<Card.Header
className="h3 px-3 text-black"
title={intl.formatMessage(messages.headingTitle)}
subtitle={fileName && intl.formatMessage(messages.fileChosen, { fileName })}
/>
<Card.Section className="px-3 py-1">
<Card.Section className="px-3 pt-2 pb-4">
{isShowedDropzone
&& (
<Dropzone
@@ -47,11 +48,6 @@ const FileSection = ({ intl, courseId }) => {
/>
)}
</Card.Section>
{fileName && (
<div className="px-3 py-1">
{intl.formatMessage(messages.fileChosen, { fileName })}
</div>
)}
</Card>
);
};

11
src/import-page/import-sidebar/ImportSidebar.jsx
View File

@@ -4,7 +4,7 @@ import {
intlShape,
} from '@edx/frontend-platform/i18n';
import PropTypes from 'prop-types';
import { Button } from '@edx/paragon';
import { Hyperlink } from '@edx/paragon';
import { getConfig } from '@edx/frontend-platform';
import { HelpSidebar } from '../../generic/help-sidebar';
@@ -22,7 +22,7 @@ const ImportSidebar = ({ intl, courseId }) => {
<hr />
<h4 className="help-sidebar-about-title">{intl.formatMessage(messages.importedContent)}</h4>
<p className="help-sidebar-about-descriptions">{intl.formatMessage(messages.importedContentHeading)}</p>
<ul className="import-sidebar-list">
<ul className="px-3">
<li className="help-sidebar-about-descriptions">{intl.formatMessage(messages.content1)}</li>
<li className="help-sidebar-about-descriptions">{intl.formatMessage(messages.content2)}</li>
<li className="help-sidebar-about-descriptions">{intl.formatMessage(messages.content3)}</li>
@@ -30,7 +30,7 @@ const ImportSidebar = ({ intl, courseId }) => {
<li className="help-sidebar-about-descriptions">{intl.formatMessage(messages.content5)}</li>
</ul>
<p className="help-sidebar-about-descriptions">{intl.formatMessage(messages.notImportedContent)}</p>
<ul className="import-sidebar-list">
<ul className="px-3">
<li className="help-sidebar-about-descriptions">{intl.formatMessage(messages.content6)}</li>
<li className="help-sidebar-about-descriptions">{intl.formatMessage(messages.content7)}</li>
</ul>
@@ -38,13 +38,14 @@ const ImportSidebar = ({ intl, courseId }) => {
<h4 className="help-sidebar-about-title">{intl.formatMessage(messages.warningTitle)}</h4>
<p className="help-sidebar-about-descriptions">{intl.formatMessage(messages.warningDescription)}</p>
<hr />
<Button
<Hyperlink
className="small"
href={importLearnMoreUrl}
target="_blank"
variant="outline-primary"
>
{intl.formatMessage(messages.learnMoreButtonTitle)}
</Button>
</Hyperlink>
</HelpSidebar>
);
};

4
src/import-page/import-sidebar/ImportSidebar.scss
View File

@@ -1,4 +0,0 @@
.import-sidebar-list {
list-style: none;
padding-left: 0;
}

25
src/import-page/import-stepper/ImportStepper.jsx
View File

@@ -1,5 +1,6 @@
import React, { useEffect } from 'react';
import {
FormattedDate,
injectIntl,
intlShape,
} from '@edx/frontend-platform/i18n';
@@ -8,7 +9,6 @@ import { useDispatch, useSelector } from 'react-redux';
import { Button } from '@edx/paragon';
import { getConfig } from '@edx/frontend-platform';
import { getFormattedSuccessDate } from '../../export-page/utils';
import { RequestStatus } from '../../data/constants';
import CourseStepper from '../../generic/course-stepper';
import { IMPORT_STAGES } from '../data/constants';
@@ -45,9 +45,23 @@ const ImportStepper = ({ intl, courseId }) => {
});
let successTitle = intl.formatMessage(messages.stepperSuccessTitle);
const formattedSuccessDate = getFormattedSuccessDate(successDate);
if (currentStage === IMPORT_STAGES.SUCCESS && formattedSuccessDate) {
successTitle += formattedSuccessDate;
const localizedSuccessDate = successDate ? (
<FormattedDate
value={successDate}
year="2-digit"
month="2-digit"
day="2-digit"
hour="numeric"
minute="numeric"
/>
) : null;
if (localizedSuccessDate && currentStage === IMPORT_STAGES.SUCCESS) {
const successWithDate = (
<>
{successTitle} ({localizedSuccessDate})
</>
);
successTitle = successWithDate;
}
const handleRedirectCourseOutline = () => window.location.replace(`${getConfig().STUDIO_BASE_URL}/course/${courseId}`);
@@ -79,7 +93,6 @@ const ImportStepper = ({ intl, courseId }) => {
return (
<section>
<h3 className="mt-4">{intl.formatMessage(messages.stepperHeaderTitle)}</h3>
<hr />
<CourseStepper
courseId={courseId}
percent={progress}
@@ -89,7 +102,7 @@ const ImportStepper = ({ intl, courseId }) => {
errorMessage={formattedErrorMessage}
/>
{currentStage === IMPORT_STAGES.SUCCESS && (
<Button onClick={handleRedirectCourseOutline}>{intl.formatMessage(messages.viewOutlineButton)}</Button>
<Button className="ml-5.5 mt-n2.5" onClick={handleRedirectCourseOutline}>{intl.formatMessage(messages.viewOutlineButton)}</Button>
)}
</section>
);

2
src/index.jsx
View File

@@ -90,6 +90,8 @@ initialize({
ENABLE_PROGRESS_GRAPH_SETTINGS: process.env.ENABLE_PROGRESS_GRAPH_SETTINGS || 'false',
ENABLE_TEAM_TYPE_SETTING: process.env.ENABLE_TEAM_TYPE_SETTING === 'true',
BBB_LEARN_MORE_URL: process.env.BBB_LEARN_MORE_URL || '',
STUDIO_BASE_URL: process.env.STUDIO_BASE_URL || null,
STUDIO_SHORT_NAME: process.env.STUDIO_SHORT_NAME || null,
}, 'CourseAuthoringConfig');
},
},