fix: grading multiple fixes (#199)

* fix: modal title color, change menu to dropdown menu

* fix: learner score and progress button

* fix: add SUPPORT_URL on site config dev to avoid issues on render

* feat: add confirmation modal to actions

* feat: add success and error messages

* test: add confim modal on tests

* fix: enrollments issue

* refactor: function to manage onError

Author: diana-villalvazo-wgu

site.config.dev.tsx

@@ -18,7 +18,13 @@ const siteConfig: SiteConfig = {
     shellApp,
     headerApp,
     footerApp,
-    instructorDashboardApp
+    {
+      ...instructorDashboardApp,
+      config: {
+        ...instructorDashboardApp.config,
+        SUPPORT_URL: 'https://docs.openedx.org/en/latest/educators/index.html',
+      }
+    }
   ],
   externalRoutes: [
     {

src/grading/components/GradingActionRow.tsx

@@ -1,7 +1,6 @@
-import { useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { useIntl } from '@openedx/frontend-base';
-import { useToggle, ActionRow, Button, IconButton, ModalPopup, Menu, MenuItem } from '@openedx/paragon';
+import { useToggle, ActionRow, Button, IconButton, Dropdown } from '@openedx/paragon';
 import { TrendingUp, MoreVert, OpenInNew } from '@openedx/paragon/icons';
 import { useCourseInfo } from '@src/data/apiHook';
 import GradingConfigurationModal from '@src/grading/components/GradingConfigurationModal';
@@ -11,41 +10,34 @@ const GradingActionRow = () => {
   const { courseId = '' } = useParams<{ courseId: string }>();
   const intl = useIntl();
   const { data = { gradebookUrl: '', studioGradingUrl: '' } } = useCourseInfo(courseId);
-  const [configurationMenuTarget, setConfigurationMenuTarget] = useState<HTMLButtonElement | null>(null);
-  const [isOpenMenu, openMenu, closeMenu] = useToggle(false);
   const [isOpenConfigModal, openConfigModal, closeConfigModal] = useToggle(false);
 
-  const handleConfigurationMenuClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    setConfigurationMenuTarget(event?.currentTarget);
-    openMenu();
-  };
-
   const handleConfigModalOpen = () => {
     openConfigModal();
-    closeMenu();
   };
 
   return (
     <>
       <ActionRow>
         <Button as="a" href={data.gradebookUrl} iconBefore={TrendingUp} variant="outline-primary">{intl.formatMessage(messages.viewGradebook)}</Button>
-        <IconButton
-          alt={intl.formatMessage(messages.configurationAlt)}
-          className="lead"
-          iconAs={MoreVert}
-          onClick={handleConfigurationMenuClick}
-        />
+        <Dropdown>
+          <Dropdown.Toggle
+            as={IconButton}
+            alt={intl.formatMessage(messages.configurationAlt)}
+            className="lead"
+            iconAs={MoreVert}
+          />
+          <Dropdown.Menu>
+            <Dropdown.Item onClick={handleConfigModalOpen}>
+              {intl.formatMessage(messages.viewGradingConfiguration)}
+            </Dropdown.Item>
+            <Dropdown.Item as="a" href={data.studioGradingUrl} target="_blank">
+              {intl.formatMessage(messages.viewCourseGradingSettings)}
+              <OpenInNew className="ml-2" />
+            </Dropdown.Item>
+          </Dropdown.Menu>
+        </Dropdown>
       </ActionRow>
-      <ModalPopup positionRef={configurationMenuTarget} onClose={closeMenu} isOpen={isOpenMenu}>
-        <Menu>
-          <MenuItem onClick={handleConfigModalOpen}>
-            {intl.formatMessage(messages.viewGradingConfiguration)}
-          </MenuItem>
-          <MenuItem iconAfter={OpenInNew} as="a" href={data.studioGradingUrl} target="_blank">
-            {intl.formatMessage(messages.viewCourseGradingSettings)}
-          </MenuItem>
-        </Menu>
-      </ModalPopup>
       <GradingConfigurationModal isOpen={isOpenConfigModal} onClose={closeConfigModal} />
     </>
   );

src/grading/components/GradingConfigurationModal.tsx

@@ -18,7 +18,7 @@ const GradingConfigurationModal = ({ isOpen, onClose }: GradingConfigurationModa
   return (
     <ModalDialog size="lg" title={intl.formatMessage(messages.gradingConfiguration)} isOpen={isOpen} onClose={onClose} isOverflowVisible={false}>
       <ModalDialog.Header className="p-3 pl-4 border-bottom">
-        <ModalDialog.Title as="h3" className="m-0">
+        <ModalDialog.Title as="h3" className="m-0 text-primary-500">
           {intl.formatMessage(messages.gradingConfiguration)}
         </ModalDialog.Title>
       </ModalDialog.Header>