feat: create organization filter on home page

src/assets/scss/_form.scss

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

src/constants.js

@@ -23,3 +23,14 @@ export const NOTIFICATION_MESSAGES = {
   duplicating: 'Duplicating',
   deleting: 'Deleting',
 };
+
+const COURSE_CREATOR_STATUSES = {
+  unrequested: 'unrequested',
+  pending: 'pending',
+  granted: 'granted',
+  denied: 'denied',
+};
+
+export {
+  COURSE_CREATOR_STATUSES,
+};

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

@@ -3,13 +3,14 @@ import { v4 as uuid } from 'uuid';
 import { Hyperlink } from '@edx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
+import { useHelpUrls } from '../../help-urls/hooks';
 import HelpSidebar from '../../generic/help-sidebar';
 import messages from './messages';
 
 const CourseRerunSideBar = () => {
   const intl = useIntl();
-  // temporary solution until implementation https://github.com/raccoongang/frontend-app-course-authoring/pull/45
-  const learnMoreUrl = 'https://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/index.html';
+  const { default: learnMoreUrl } = useHelpUrls(['default']);
+
   const sidebarMessages = [
     {
       title: intl.formatMessage(messages.sectionTitle1),

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

@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 import { useParams } from 'react-router';
 import classNames from 'classnames';
 import { useSelector } from 'react-redux';
-import { v4 as uuid } from 'uuid';
 import {
   Form, Button, ActionRow, StatefulButton, TransitionReplace,
 } from '@edx/paragon';
+import { TypeaheadDropdown } from '@edx/frontend-lib-content-components';
 import { Info as InfoIcon } from '@edx/paragon/icons';
 
 import AlertMessage from '../alert-message';
@@ -194,7 +194,7 @@ const CreateOrRerunCourseForm = ({
             <Form.Label>{field.label}</Form.Label>
             {!field.isDropdown ? (
               <Form.Control
-                value={values[field.name]}
+                value={field.value}
                 placeholder={field.placeholder}
                 name={field.name}
                 onChange={handleChange}
@@ -204,21 +204,20 @@ const CreateOrRerunCourseForm = ({
                 ref={field?.ref}
               />
             ) : (
-              <Form.Autosuggest
-                value={values[field.name]}
+              <TypeaheadDropdown
+                readOnly={false}
                 name={field.name}
+                value={field.value?.toLowerCase()}
+                controlClassName={classNames({ 'is-invalid': hasErrorField(field.name) })}
+                options={field.options}
                 placeholder={field.placeholder}
-                onSelected={(value) => setFieldValue(field.name, value)}
-                onBlur={handleCustomBlurForDropdown}
-                isInvalid={hasErrorField(field.name)}
-                key={uuid()}
-              >
-                {field?.options?.map((option) => (
-                  <Form.AutosuggestOption key={option}>
-                    {option}
-                  </Form.AutosuggestOption>
-                ))}
-              </Form.Autosuggest>
+                handleBlur={handleCustomBlurForDropdown}
+                handleChange={(value) => setFieldValue(field.name, value)}
+                noOptionsMessage={intl.formatMessage(messages.courseOrgNoOptions)}
+                helpMessage=""
+                errorMessage=""
+                floatingLabel=""
+              />
             )}
             <Form.Text>{field.helpText}</Form.Text>
             {hasErrorField(field.name) && (

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

@@ -51,6 +51,7 @@ const useCreateOrRerunCourse = (initialValues) => {
   } = useFormik({
     initialValues,
     enableReinitialize: true,
+    validateOnBlur: false,
     validationSchema,
   });
 

src/generic/create-or-rerun-course/messages.js

@@ -25,6 +25,10 @@ const messages = defineMessages({
     id: 'course-authoring.create-or-rerun-course.org.placeholder',
     defaultMessage: 'e.g. UniversityX or OrganizationX',
   },
+  courseOrgNoOptions: {
+    id: 'course-authoring.create-or-rerun-course.org.no-options',
+    defaultMessage: 'No options',
+  },
   courseOrgCreateHelpText: {
     id: 'course-authoring.create-or-rerun-course.create.org.help-text',
     defaultMessage: 'The name of the organization sponsoring the course. {strong} This cannot be changed, but you can set a different display name in advanced settings later.',

src/i18n/messages/ar.json

@@ -820,5 +820,8 @@
   "course-authoring.course-outline.reindex.alert.success.aria.labelledby": "alert-confirmation-title",
   "course-authoring.course-outline.reindex.alert.success.aria.describedby": "alert-confirmation-description",
   "course-authoring.course-outline.reindex.alert.error.title": "There were errors reindexing course.",
-  "course-authoring.course-outline.reindex.alert.error.labelledby": "alert-error-title"
+  "course-authoring.course-outline.reindex.alert.error.labelledby": "alert-error-title",
+  "course-authoring.create-or-rerun-course.org.no-options": "No options",
+  "course-authoring.studio-home.organization.input.placeholder": "For example, MITx",
+  "course-authoring.studio-home.organization.input.no-options": "No options"
 }

src/i18n/messages/de.json

@@ -820,5 +820,8 @@
   "course-authoring.course-outline.reindex.alert.success.aria.labelledby": "alert-confirmation-title",
   "course-authoring.course-outline.reindex.alert.success.aria.describedby": "alert-confirmation-description",
   "course-authoring.course-outline.reindex.alert.error.title": "There were errors reindexing course.",
-  "course-authoring.course-outline.reindex.alert.error.labelledby": "alert-error-title"
+  "course-authoring.course-outline.reindex.alert.error.labelledby": "alert-error-title",
+  "course-authoring.create-or-rerun-course.org.no-options": "No options",
+  "course-authoring.studio-home.organization.input.placeholder": "For example, MITx",
+  "course-authoring.studio-home.organization.input.no-options": "No options"
 }

src/i18n/messages/de_DE.json

@@ -820,5 +820,8 @@
   "course-authoring.course-outline.reindex.alert.success.aria.labelledby": "alert-confirmation-title",
   "course-authoring.course-outline.reindex.alert.success.aria.describedby": "alert-confirmation-description",
   "course-authoring.course-outline.reindex.alert.error.title": "There were errors reindexing course.",
-  "course-authoring.course-outline.reindex.alert.error.labelledby": "alert-error-title"
+  "course-authoring.course-outline.reindex.alert.error.labelledby": "alert-error-title",
+  "course-authoring.create-or-rerun-course.org.no-options": "No options",
+  "course-authoring.studio-home.organization.input.placeholder": "For example, MITx",
+  "course-authoring.studio-home.organization.input.no-options": "No options"
 }

src/i18n/messages/es_419.json

@@ -820,5 +820,8 @@
   "course-authoring.course-outline.reindex.alert.success.aria.labelledby": "alert-confirmation-title",
   "course-authoring.course-outline.reindex.alert.success.aria.describedby": "alert-confirmation-description",
   "course-authoring.course-outline.reindex.alert.error.title": "There were errors reindexing course.",
-  "course-authoring.course-outline.reindex.alert.error.labelledby": "alert-error-title"
+  "course-authoring.course-outline.reindex.alert.error.labelledby": "alert-error-title",
+  "course-authoring.create-or-rerun-course.org.no-options": "No options",
+  "course-authoring.studio-home.organization.input.placeholder": "For example, MITx",
+  "course-authoring.studio-home.organization.input.no-options": "No options"
 }

src/i18n/messages/fr.json

@@ -820,5 +820,8 @@
   "course-authoring.course-outline.reindex.alert.success.aria.labelledby": "alert-confirmation-title",
   "course-authoring.course-outline.reindex.alert.success.aria.describedby": "alert-confirmation-description",
   "course-authoring.course-outline.reindex.alert.error.title": "There were errors reindexing course.",
-  "course-authoring.course-outline.reindex.alert.error.labelledby": "alert-error-title"
+  "course-authoring.course-outline.reindex.alert.error.labelledby": "alert-error-title",
+  "course-authoring.create-or-rerun-course.org.no-options": "No options",
+  "course-authoring.studio-home.organization.input.placeholder": "For example, MITx",
+  "course-authoring.studio-home.organization.input.no-options": "No options"
 }

src/i18n/messages/fr_CA.json

@@ -820,5 +820,8 @@
   "course-authoring.course-outline.reindex.alert.success.aria.labelledby": "alert-confirmation-title",
   "course-authoring.course-outline.reindex.alert.success.aria.describedby": "alert-confirmation-description",
   "course-authoring.course-outline.reindex.alert.error.title": "There were errors reindexing course.",
-  "course-authoring.course-outline.reindex.alert.error.labelledby": "alert-error-title"
+  "course-authoring.course-outline.reindex.alert.error.labelledby": "alert-error-title",
+  "course-authoring.create-or-rerun-course.org.no-options": "No options",
+  "course-authoring.studio-home.organization.input.placeholder": "For example, MITx",
+  "course-authoring.studio-home.organization.input.no-options": "No options"
 }

src/i18n/messages/hi.json

@@ -820,5 +820,8 @@
   "course-authoring.course-outline.reindex.alert.success.aria.labelledby": "alert-confirmation-title",
   "course-authoring.course-outline.reindex.alert.success.aria.describedby": "alert-confirmation-description",
   "course-authoring.course-outline.reindex.alert.error.title": "There were errors reindexing course.",
-  "course-authoring.course-outline.reindex.alert.error.labelledby": "alert-error-title"
+  "course-authoring.course-outline.reindex.alert.error.labelledby": "alert-error-title",
+  "course-authoring.create-or-rerun-course.org.no-options": "No options",
+  "course-authoring.studio-home.organization.input.placeholder": "For example, MITx",
+  "course-authoring.studio-home.organization.input.no-options": "No options"
 }

src/i18n/messages/it.json

@@ -820,5 +820,8 @@
   "course-authoring.course-outline.reindex.alert.success.aria.labelledby": "alert-confirmation-title",
   "course-authoring.course-outline.reindex.alert.success.aria.describedby": "alert-confirmation-description",
   "course-authoring.course-outline.reindex.alert.error.title": "There were errors reindexing course.",
-  "course-authoring.course-outline.reindex.alert.error.labelledby": "alert-error-title"
+  "course-authoring.course-outline.reindex.alert.error.labelledby": "alert-error-title",
+  "course-authoring.create-or-rerun-course.org.no-options": "No options",
+  "course-authoring.studio-home.organization.input.placeholder": "For example, MITx",
+  "course-authoring.studio-home.organization.input.no-options": "No options"
 }

src/i18n/messages/it_IT.json

@@ -820,5 +820,8 @@
   "course-authoring.course-outline.reindex.alert.success.aria.labelledby": "alert-confirmation-title",
   "course-authoring.course-outline.reindex.alert.success.aria.describedby": "alert-confirmation-description",
   "course-authoring.course-outline.reindex.alert.error.title": "There were errors reindexing course.",
-  "course-authoring.course-outline.reindex.alert.error.labelledby": "alert-error-title"
+  "course-authoring.course-outline.reindex.alert.error.labelledby": "alert-error-title",
+  "course-authoring.create-or-rerun-course.org.no-options": "No options",
+  "course-authoring.studio-home.organization.input.placeholder": "For example, MITx",
+  "course-authoring.studio-home.organization.input.no-options": "No options"
 }

src/i18n/messages/pt.json

@@ -820,5 +820,8 @@
   "course-authoring.course-outline.reindex.alert.success.aria.labelledby": "alert-confirmation-title",
   "course-authoring.course-outline.reindex.alert.success.aria.describedby": "alert-confirmation-description",
   "course-authoring.course-outline.reindex.alert.error.title": "There were errors reindexing course.",
-  "course-authoring.course-outline.reindex.alert.error.labelledby": "alert-error-title"
+  "course-authoring.course-outline.reindex.alert.error.labelledby": "alert-error-title",
+  "course-authoring.create-or-rerun-course.org.no-options": "No options",
+  "course-authoring.studio-home.organization.input.placeholder": "For example, MITx",
+  "course-authoring.studio-home.organization.input.no-options": "No options"
 }

src/i18n/messages/pt_PT.json

@@ -820,5 +820,8 @@
   "course-authoring.course-outline.reindex.alert.success.aria.labelledby": "alert-confirmation-title",
   "course-authoring.course-outline.reindex.alert.success.aria.describedby": "alert-confirmation-description",
   "course-authoring.course-outline.reindex.alert.error.title": "There were errors reindexing course.",
-  "course-authoring.course-outline.reindex.alert.error.labelledby": "alert-error-title"
+  "course-authoring.course-outline.reindex.alert.error.labelledby": "alert-error-title",
+  "course-authoring.create-or-rerun-course.org.no-options": "No options",
+  "course-authoring.studio-home.organization.input.placeholder": "For example, MITx",
+  "course-authoring.studio-home.organization.input.no-options": "No options"
 }

src/i18n/messages/ru.json

@@ -820,5 +820,8 @@
   "course-authoring.course-outline.reindex.alert.success.aria.labelledby": "alert-confirmation-title",
   "course-authoring.course-outline.reindex.alert.success.aria.describedby": "alert-confirmation-description",
   "course-authoring.course-outline.reindex.alert.error.title": "There were errors reindexing course.",
-  "course-authoring.course-outline.reindex.alert.error.labelledby": "alert-error-title"
+  "course-authoring.course-outline.reindex.alert.error.labelledby": "alert-error-title",
+  "course-authoring.create-or-rerun-course.org.no-options": "No options",
+  "course-authoring.studio-home.organization.input.placeholder": "For example, MITx",
+  "course-authoring.studio-home.organization.input.no-options": "No options"
 }

src/i18n/messages/uk.json

@@ -826,5 +826,8 @@
   "course-authoring.course-outline.reindex.alert.success.aria.labelledby": "alert-confirmation-title",
   "course-authoring.course-outline.reindex.alert.success.aria.describedby": "alert-confirmation-description",
   "course-authoring.course-outline.reindex.alert.error.title": "There were errors reindexing course.",
-  "course-authoring.course-outline.reindex.alert.error.labelledby": "alert-error-title"
+  "course-authoring.course-outline.reindex.alert.error.labelledby": "alert-error-title",
+  "course-authoring.create-or-rerun-course.org.no-options": "No options",
+  "course-authoring.studio-home.organization.input.placeholder": "For example, MITx",
+  "course-authoring.studio-home.organization.input.no-options": "No options"
 }

src/i18n/messages/zh_CN.json

@@ -820,5 +820,8 @@
   "course-authoring.course-outline.reindex.alert.success.aria.labelledby": "alert-confirmation-title",
   "course-authoring.course-outline.reindex.alert.success.aria.describedby": "alert-confirmation-description",
   "course-authoring.course-outline.reindex.alert.error.title": "There were errors reindexing course.",
-  "course-authoring.course-outline.reindex.alert.error.labelledby": "alert-error-title"
+  "course-authoring.course-outline.reindex.alert.error.labelledby": "alert-error-title",
+  "course-authoring.create-or-rerun-course.org.no-options": "No options",
+  "course-authoring.studio-home.organization.input.placeholder": "For example, MITx",
+  "course-authoring.studio-home.organization.input.no-options": "No options"
 }

src/studio-home/StudioHome.jsx

@@ -28,6 +28,7 @@ const StudioHome = ({ intl }) => {
     newCourseData,
     studioHomeItems,
     showNewCourseContainer,
+    showOrganizationDropdown,
     dispatch,
     setShowNewCourseContainer,
   } = useStudioHome();
@@ -86,7 +87,7 @@ const StudioHome = ({ intl }) => {
                     handleOnClickCreate={handleCreateNewCourse}
                   />
                 )}
-                <OrganizationSection />
+                {showOrganizationDropdown && <OrganizationSection />}
                 <TabsSection tabsData={studioHomeItems} />
               </section>
             </Layout.Element>

src/studio-home/data/api.js

@@ -8,7 +8,7 @@ export const getStudioHomeApiUrl = () => `${getApiBaseUrl()}/api/contentstore/v1
  * Get's studio home data.
  * @returns {Promise<Object>}
  */
-export async function getStudioHomeData() {
-  const { data } = await getAuthenticatedHttpClient().get(getStudioHomeApiUrl());
+export async function getStudioHomeData(search) {
+  const { data } = await getAuthenticatedHttpClient().get(`${getStudioHomeApiUrl()}${search}`);
   return camelCaseObject(data);
 }

src/studio-home/data/thunks.js

@@ -6,12 +6,12 @@ import {
 } from './slice';
 
 // eslint-disable-next-line import/prefer-default-export
-export function fetchStudioHomeData() {
+export function fetchStudioHomeData(search) {
   return async (dispatch) => {
     dispatch(updateLoadingStatus({ status: RequestStatus.IN_PROGRESS }));
 
     try {
-      const studioHomeData = await getStudioHomeData();
+      const studioHomeData = await getStudioHomeData(search);
       dispatch(fetchStudioHomeDataSuccess(studioHomeData));
       dispatch(updateLoadingStatus({ status: RequestStatus.SUCCESSFUL }));
     } catch (error) {

src/studio-home/hooks.jsx

@@ -1,39 +1,34 @@
 import { useEffect, useState } from 'react';
 import { history } from '@edx/frontend-platform';
+import { useLocation } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { RequestStatus } from '../data/constants';
-import {
-  updateSavingStatus,
-} from '../generic/data/slice';
+import { COURSE_CREATOR_STATUSES } from '../constants';
+import { updateSavingStatus } from '../generic/data/slice';
 import { getCourseData, getRedirectUrlObj, getSavingStatus } from '../generic/data/selectors';
+import { redirectToCourseIndex } from './constants';
+import { fetchStudioHomeData } from './data/thunks';
 import {
   getLoadingStatus,
   getStudioHomeData,
 } from './data/selectors';
-import { fetchStudioHomeData } from './data/thunks';
-import { redirectToCourseIndex } from './constants';
 
 const useStudioHome = () => {
+  const location = useLocation();
   const dispatch = useDispatch();
-  const studioHomeData = useSelector(getStudioHomeData);
+  const studioHomeItems = useSelector(getStudioHomeData);
   const loadingStatus = useSelector(getLoadingStatus);
   const savingStatus = useSelector(getSavingStatus);
   const newCourseData = useSelector(getCourseData);
   const redirectUrlObj = useSelector(getRedirectUrlObj);
-  const [studioHomeItems, setStudioHomeItems] = useState(studioHomeData);
   const [showNewCourseContainer, setShowNewCourseContainer] = useState(false);
   const isLoading = loadingStatus === RequestStatus.IN_PROGRESS;
 
   useEffect(() => {
-    dispatch(fetchStudioHomeData());
-  }, []);
-
-  useEffect(() => {
-    if (studioHomeData) {
-      setStudioHomeItems(studioHomeData);
-    }
-  }, [studioHomeData]);
+    dispatch(fetchStudioHomeData(location.search ?? ''));
+    setShowNewCourseContainer(false);
+  }, [location.search]);
 
   useEffect(() => {
     if (savingStatus === RequestStatus.SUCCESSFUL) {
@@ -44,12 +39,21 @@ const useStudioHome = () => {
       }
     }
   }, [savingStatus]);
+
+  const {
+    optimizationEnabled,
+    courseCreatorStatus,
+  } = studioHomeItems;
+
+  const showOrganizationDropdown = optimizationEnabled && courseCreatorStatus === COURSE_CREATOR_STATUSES.granted;
+
   return {
     isLoading,
     savingStatus,
     newCourseData,
     studioHomeItems,
     showNewCourseContainer,
+    showOrganizationDropdown,
     dispatch,
     setShowNewCourseContainer,
   };

src/studio-home/messages.js

@@ -65,6 +65,14 @@ const messages = defineMessages({
     id: 'course-authoring.studio-home.organization.btn.submit.text',
     defaultMessage: 'Submit',
   },
+  organizationInputPlaceholder: {
+    id: 'course-authoring.studio-home.organization.input.placeholder',
+    defaultMessage: 'For example, MITx',
+  },
+  organizationInputNoOptions: {
+    id: 'course-authoring.studio-home.organization.input.no-options',
+    defaultMessage: 'No options',
+  },
 });
 
 export default messages;