fix: xpert unit sumamries settings ui fixes (openedx#576)

1. https://jira.2u.com/browse/ACADEMIC-16289
2. https://jira.2u.com/browse/ACADEMIC-16422

Author: germanolleunlp

src/pages-and-resources/PagesAndResources.jsx

@@ -47,7 +47,7 @@ const PagesAndResources = ({ courseId, intl }) => {
   const xpertSettings = useModel('XpertSettings', 'xpert-unit-summary');
   const permissonPages = [{
     ...XpertAppInfo,
-    enabled: xpertSettings?.enabled,
+    enabled: xpertSettings?.enabled !== undefined,
   }];
 
   if (loadingStatus === RequestStatus.IN_PROGRESS) {

src/pages-and-resources/xpert-unit-summary/XpertUnitSummarySettings.jsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useContext, useEffect } from 'react';
 import { history } from '@edx/frontend-platform';
-import { Hyperlink } from '@edx/paragon';
 import { useDispatch } from 'react-redux';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
@@ -27,21 +26,8 @@ const XpertUnitSummarySettings = ({ intl }) => {
     <SettingsModal
       appId="xpert-unit-summary"
       title={intl.formatMessage(messages.heading)}
-      enableAppHelp={
-        (
-          <>
-            {intl.formatMessage(messages.enableXpertUnitSummaryHelp)}
-            {' '}
-            <Hyperlink
-              destination="https://openai.com/api-data-privacy"
-              target="_blank"
-              showLaunchIcon={false}
-            >
-              {intl.formatMessage(messages.enableXpertUnitSummaryHelpPrivacyLink)}
-            </Hyperlink>
-          </>
-        )
-      }
+      enableAppHelp={intl.formatMessage(messages.enableXpertUnitSummaryHelp)}
+      helpPrivacyText={intl.formatMessage(messages.enableXpertUnitSummaryHelpPrivacyLink)}
       enableAppLabel={intl.formatMessage(messages.enableXpertUnitSummaryLabel)}
       learnMoreText={intl.formatMessage(messages.enableXpertUnitSummaryLink)}
       allUnitsEnabledText={intl.formatMessage(messages.allUnitsEnabledByDefault)}

src/pages-and-resources/xpert-unit-summary/settings-modal/ResetIcon.jsx

@@ -0,0 +1,21 @@
+const ResetIcon = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    role="img"
+    focusable="false"
+    aria-hidden="true"
+    transform="scale(-1,1)"
+    {...props}
+  >
+    <path
+      d="M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default ResetIcon;

src/pages-and-resources/xpert-unit-summary/settings-modal/SettingsModal.jsx

@@ -13,7 +13,7 @@ import {
   Hyperlink,
 } from '@edx/paragon';
 import {
-  Info, CheckCircleOutline, RotateLeft, SpinnerSimple,
+  Info, CheckCircleOutline, SpinnerSimple,
 } from '@edx/paragon/icons';
 
 import { Formik } from 'formik';
@@ -38,6 +38,7 @@ import AppConfigFormDivider from '../../discussions/app-config-form/apps/shared/
 import { PagesAndResourcesContext } from '../../PagesAndResourcesProvider';
 import messages from './messages';
 import appInfo from '../appInfo';
+import ResetIcon from './ResetIcon';
 
 const AppSettingsForm = ({
   formikProps, children, showForm,
@@ -150,7 +151,10 @@ const ResetUnitsButton = ({
     <OverlayTrigger
       placement="right"
       overlay={(
-        <Tooltip id={`tooltip-reset-${checked}`}>
+        <Tooltip
+          id={`tooltip-reset-${checked}`}
+          className="reset-tooltip"
+        >
           {intl.formatMessage(messages[messageKey])}
         </Tooltip>
       )}
@@ -163,7 +167,7 @@ const ResetUnitsButton = ({
           finish: intl.formatMessage(messages.reset),
         }}
         icons={{
-          default: <Icon src={RotateLeft} />,
+          default: <Icon src={ResetIcon} />,
           pending: <Icon src={SpinnerSimple} className="icon-spin" />,
           finish: <Icon src={CheckCircleOutline} />,
         }}
@@ -201,6 +205,7 @@ const SettingsModal = ({
   enableAppLabel,
   enableAppHelp,
   learnMoreText,
+  helpPrivacyText,
   enableReinitialize,
   allUnitsEnabledText,
   noUnitsEnabledText,
@@ -251,14 +256,29 @@ const SettingsModal = ({
   };
 
   const learnMoreLink = appInfo.documentationLinks?.learnMoreConfiguration && (
-    <Hyperlink
-      className="text-primary-500"
-      destination={appInfo.documentationLinks.learnMoreConfiguration}
-      target="_blank"
-      rel="noreferrer noopener"
-    >
-      {learnMoreText}
-    </Hyperlink>
+    <div className="py-1">
+      <Hyperlink
+        className="text-primary-500"
+        destination={appInfo.documentationLinks.learnMoreConfiguration}
+        target="_blank"
+        rel="noreferrer noopener"
+      >
+        {learnMoreText}
+      </Hyperlink>
+    </div>
+  );
+
+  const helpPrivacyLink = (
+    <div className="py-1">
+      <Hyperlink
+        className="text-primary-500"
+        destination="https://openai.com/api-data-privacy"
+        target="_blank"
+        rel="noreferrer noopener"
+      >
+        {helpPrivacyText}
+      </Hyperlink>
+    </div>
   );
 
   if (loadingStatus === RequestStatus.SUCCESSFUL) {
@@ -330,7 +350,8 @@ const SettingsModal = ({
                 helpText={(
                   <div>
                     <p>{enableAppHelp}</p>
-                    <span className="py-3">{learnMoreLink}</span>
+                    {helpPrivacyLink}
+                    {learnMoreLink}
                   </div>
                 )}
               />
@@ -410,6 +431,7 @@ SettingsModal.propTypes = {
   enableAppLabel: PropTypes.string.isRequired,
   enableAppHelp: PropTypes.string.isRequired,
   learnMoreText: PropTypes.string.isRequired,
+  helpPrivacyText: PropTypes.string.isRequired,
   allUnitsEnabledText: PropTypes.string.isRequired,
   noUnitsEnabledText: PropTypes.string.isRequired,
   configureBeforeEnable: PropTypes.bool,

src/pages-and-resources/xpert-unit-summary/settings-modal/SettingsModal.scss

@@ -16,7 +16,9 @@
     flex: 1;
 
     > label {
-      height: 80px;
+      min-height: 80px;
+      flex-wrap: wrap;
+      justify-content: space-between;
     }
   }
 }
@@ -27,5 +29,14 @@
   border-color: $border-color;
   border-radius: $border-radius;
   border-style: solid;
-  margin-left: auto;
+}
+
+.reset-tooltip {
+  .arrow::before {
+    border-right-color: #00262B;
+  }
+
+  .tooltip-inner {
+    background-color: #00262B;
+  }
 }