fix: studio home UI bugs

src/assets/scss/_form.scss

@@ -79,14 +79,3 @@
     color: $black;
   }
 }
-
-.dropdown-group-wrapper {
-  position: relative;
-  z-index: $zindex-dropdown;
-  margin-left: auto;
-
-  .dropdown-container {
-    position: absolute;
-    width: 100%;
-  }
-}

src/course-rerun/course-rerun-sidebar/CourseRerunSidebar.test.jsx

@@ -44,7 +44,7 @@ describe('<CourseRerunSideBar />', () => {
     const { getByText } = renderComponent();
 
     expect(getByText(messages.sectionTitle1.defaultMessage)).toBeInTheDocument();
-    expect(getByText(messages.sectionDescription1.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.sectionDescription1.defaultMessage, { exact: false })).toBeInTheDocument();
     expect(getByText(messages.sectionTitle2.defaultMessage)).toBeInTheDocument();
     expect(getByText(messages.sectionDescription2.defaultMessage)).toBeInTheDocument();
     expect(getByText(messages.sectionTitle3.defaultMessage)).toBeInTheDocument();

src/course-rerun/course-rerun-sidebar/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { v4 as uuid } from 'uuid';
 import { Hyperlink } from '@edx/paragon';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { FormattedDate, useIntl } from '@edx/frontend-platform/i18n';
 
 import { useHelpUrls } from '../../help-urls/hooks';
 import { HelpSidebar } from '../../generic/help-sidebar';
@@ -10,11 +10,23 @@ import messages from './messages';
 const CourseRerunSideBar = () => {
   const intl = useIntl();
   const { default: learnMoreUrl } = useHelpUrls(['default']);
+  const defaultCourseDate = new Date(Date.UTC(2030, 0, 1, 0, 0));
+  const localizedCourseDate = (
+    <FormattedDate
+      value={defaultCourseDate}
+      year="numeric"
+      month="long"
+      day="2-digit"
+      hour="numeric"
+      minute="numeric"
+    />
+  );
 
   const sidebarMessages = [
     {
       title: intl.formatMessage(messages.sectionTitle1),
-      description: intl.formatMessage(messages.sectionDescription1),
+      description: `${intl.formatMessage(messages.sectionDescription1)}`,
+      date: localizedCourseDate,
     },
     {
       title: intl.formatMessage(messages.sectionTitle2),
@@ -38,13 +50,18 @@ const CourseRerunSideBar = () => {
       showOtherSettings={false}
       className="mt-3"
     >
-      {sidebarMessages.map(({ title, description, link }, index) => {
+      {sidebarMessages.map(({
+        title,
+        description,
+        link,
+        date,
+      }, index) => {
         const isLastSection = index === sidebarMessages.length - 1;
 
         return (
           <div key={uuid()}>
             <h4 className="help-sidebar-about-title">{title}</h4>
-            <p className="help-sidebar-about-descriptions">{description}</p>
+            <p className="help-sidebar-about-descriptions">{description} {date}</p>
             {!!link && (
               <Hyperlink
                 className="small"

src/course-rerun/course-rerun-sidebar/messages.js

@@ -7,7 +7,7 @@ const messages = defineMessages({
   },
   sectionDescription1: {
     id: 'course-authoring.course-rerun.sidebar.section-1.description',
-    defaultMessage: 'The new course is set to start on January 1, 2030 at midnight (UTC).',
+    defaultMessage: 'The new course is set to start on',
   },
   sectionTitle2: {
     id: 'course-authoring.course-rerun.sidebar.section-2.title',

src/course-rerun/index.jsx

@@ -42,24 +42,24 @@ const CourseRerun = ({ courseId }) => {
   return (
     <>
       <Header isHiddenMainMenu />
-      <Container size="xl" className="m-4">
+      <Container size="xl" className="small p-4 mt-3">
         <section className="mb-4">
           <article>
             <section>
               <header className="d-flex">
-                <h3 className="align-self-center font-weight-normal mb-0">{intl.formatMessage(messages.rerunTitle)}</h3>
+                <Stack>
+                  <h2>
+                    {intl.formatMessage(messages.rerunTitle)} {displayName}
+                  </h2>
+                  <span className="large">{originalCourseData}</span>
+                </Stack>
                 <ActionRow className="ml-auto">
-                  <Button variant="outline-primary" onClick={handleRerunCourseCancel}>
+                  <Button variant="outline-primary" size="sm" onClick={handleRerunCourseCancel}>
                     {intl.formatMessage(messages.cancelButton)}
                   </Button>
                 </ActionRow>
               </header>
               <hr />
-              <Stack>
-                <h3>{originalCourseData}</h3>
-                <h2>{displayName}</h2>
-              </Stack>
-              <hr />
             </section>
           </article>
           <Layout

src/course-rerun/messages.js

@@ -3,7 +3,7 @@ import { defineMessages } from '@edx/frontend-platform/i18n';
 const messages = defineMessages({
   rerunTitle: {
     id: 'course-authoring.course-rerun.title',
-    defaultMessage: 'Create a re-run of a course',
+    defaultMessage: 'Create a re-run of',
   },
   cancelButton: {
     id: 'course-authoring.course-rerun.actions.button.cancel',

src/export-page/export-modal-error/ExportModalError.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { useDispatch, useSelector } from 'react-redux';
-import { history } from '@edx/frontend-platform';
+import { getConfig } from '@edx/frontend-platform';
 import PropTypes from 'prop-types';
 
 import ModalError from '../../generic/modal-error/ModalError';
@@ -17,9 +17,8 @@ const ExportModalError = ({
   const isErrorModalOpen = useSelector(getIsErrorModalOpen);
   const { msg: errorMessage, unitUrl: unitErrorUrl } = useSelector(getError);
 
-  const handleUnitRedirect = () => { window.location.href = unitErrorUrl; };
-  const handleRedirectCourseHome = () => history.push(`/course/${courseId}/outline`);
-
+  const handleUnitRedirect = () => { window.location.assign(unitErrorUrl); };
+  const handleRedirectCourseHome = () => { window.location.assign(`${getConfig().STUDIO_BASE_URL}/course/${courseId}`); };
   return (
     <ModalError
       isOpen={isErrorModalOpen}

src/generic/create-or-rerun-course/CreateOrRerunCourseForm.jsx

@@ -246,7 +246,7 @@ const CreateOrRerunCourseForm = ({
                 type="invalid"
                 hasIcon={false}
               >
-                <span className="x-small">{errors[field.name]}</span>
+                {errors[field.name]}
               </Form.Control.Feedback>
             )}
           </Form.Group>