feat: [AXIMST-544] add tooltips to the xblock support labels

raccoongang · Mar 7, 2024 · 9072fae · 9072fae
1 parent 210f2d7
commit 9072fae
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 12 deletions.
diff --git a/src/course-unit/add-component/AddComponent.test.jsx b/src/course-unit/add-component/AddComponent.test.jsx
@@ -423,7 +423,7 @@ describe('<AddComponent />', () => {
       expect(provisionallySupportLabel).not.toBeInTheDocument();
     });
 
-    it('displays component support label in component modal', async () => {
+    it('displays component support label and tooltip in component modal', async () => {
       const supportLevels = ['fs', 'ps'];
       axiosMock
         .onGet(getCourseSectionVerticalApiUrl(blockId))
@@ -450,7 +450,7 @@ describe('<AddComponent />', () => {
         });
       await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
 
-      const { getByRole } = renderComponent();
+      const { getByRole, getByText } = renderComponent();
       const advancedButton = getByRole('button', {
         name: new RegExp(`${messages.buttonText.defaultMessage} Advanced`, 'i'),
       });
@@ -464,6 +464,12 @@ describe('<AddComponent />', () => {
 
       expect(fullySupportLabel).toBeInTheDocument();
       expect(provisionallySupportLabel).toBeInTheDocument();
+
+      userEvent.hover(fullySupportLabel);
+      expect(getByText(messages.modalComponentSupportTooltipFullySupported.defaultMessage)).toBeInTheDocument();
+
+      userEvent.hover(provisionallySupportLabel);
+      expect(getByText(messages.modalComponentSupportTooltipProvisionallySupported.defaultMessage)).toBeInTheDocument();
     });
   });
 });
diff --git a/src/course-unit/add-component/add-component-modals/ComponentModalView.jsx b/src/course-unit/add-component/add-component-modals/ComponentModalView.jsx
@@ -1,10 +1,11 @@
 import { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
-import { Form } from '@openedx/paragon';
+import { Form, OverlayTrigger, Tooltip } from '@openedx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { updateQueryPendingStatus } from '../../data/slice';
+import { getXBlockSupportMessages } from '../../constants';
 import AddComponentButton from '../add-component-btn';
 import messages from '../messages';
 import ModalContainer from './ModalContainer';
@@ -21,19 +22,14 @@ const ComponentModalView = ({
   const {
     type, displayName, templates, supportLegend,
   } = component;
+  const supportLabels = getXBlockSupportMessages(intl);
 
   const handleSubmit = () => {
     handleCreateNewXBlock(type, moduleTitle);
     dispatch(updateQueryPendingStatus(true));
     setModuleTitle('');
   };
 
-  const supportLabels = {
-    fs: intl.formatMessage(messages.modalComponentSupportLabelFullySupported),
-    ps: intl.formatMessage(messages.modalComponentSupportLabelProvisionallySupported),
-    us: intl.formatMessage(messages.modalComponentSupportLabelNotSupported),
-  };
-
   return (
     <>
       <li>
@@ -71,9 +67,18 @@ const ComponentModalView = ({
                     {componentTemplate.displayName}
                   </Form.Radio>
                   {isDisplaySupportLabel && (
-                    <span className="x-small text-gray-500 flex-shrink-0 ml-2">
-                      {supportLabels[componentTemplate.supportLevel]}
-                    </span>
+                    <OverlayTrigger
+                      placement="right"
+                      overlay={(
+                        <Tooltip>
+                          {supportLabels[componentTemplate.supportLevel].tooltip}
+                        </Tooltip>
+                      )}
+                    >
+                      <span className="x-small text-gray-500 flex-shrink-0 ml-2">
+                        {supportLabels[componentTemplate.supportLevel].label}
+                      </span>
+                    </OverlayTrigger>
                   )}
                 </div>
               );

diff --git a/src/course-unit/add-component/messages.js b/src/course-unit/add-component/messages.js
@@ -33,6 +33,29 @@ const messages = defineMessages({
     id: 'course-authoring.course-unit.modal.component.support.label.not-supported',
     defaultMessage: 'Not supported',
   },
+  modalComponentSupportTooltipFullySupported: {
+    id: 'course-authoring.course-unit.modal.component.support.tooltip.fully-supported',
+    defaultMessage: 'These tools meet edX\'s high standards for functionality, reliability,'
+      + ' and compliance. Backed by thorough testing and ongoing maintenance, they provide a '
+      + 'seamless and reliable experience. Comprehensive documentation ensures easy integration '
+      + 'and troubleshooting, making them a reliable choice for your courses.',
+  },
+  modalComponentSupportTooltipNotSupported: {
+    id: 'course-authoring.course-unit.modal.component.support.tooltip.not-supported',
+    defaultMessage: 'Tools with no support are not maintained by edX, and might be '
+      + 'deprecated in the future. They are not recommended for use in courses due to '
+      + 'non-compliance with one or more of the base requirements, such as testing, '
+      + 'accessibility, internationalization, and documentation.',
+  },
+  modalComponentSupportTooltipProvisionallySupported: {
+    id: 'course-authoring.course-unit.modal.component.support.tooltip.provisionally-support',
+    defaultMessage: 'Provisionally supported tools might lack the robustness of functionality '
+      + 'that your courses require. edX does not have control over the quality of the software, '
+      + 'or of the content that can be provided using these tools. Test these tools thoroughly '
+      + 'before using them in your course, especially in graded sections. Complete documentation '
+      + 'might not be available for provisionally supported tools, or documentation might be '
+      + 'available from sources other than edX.',
+  },
 });
 
 export default messages;
diff --git a/src/course-unit/constants.js b/src/course-unit/constants.js
@@ -12,7 +12,9 @@ import {
   TextFields as TextFieldsIcon,
   VideoCamera as VideoCameraIcon,
 } from '@openedx/paragon/icons';
+
 import messages from './sidebar/messages';
+import addComponentMessages from './add-component/messages';
 
 export const UNIT_ICON_TYPES = ['video', 'other', 'vertical', 'problem', 'lock'];
 
@@ -84,3 +86,18 @@ export const PUBLISH_TYPES = {
   discardChanges: 'discard_changes',
   makePublic: 'make_public',
 };
+
+export const getXBlockSupportMessages = (intl) => ({
+  fs: { // Fully supported
+    label: intl.formatMessage(addComponentMessages.modalComponentSupportLabelFullySupported),
+    tooltip: intl.formatMessage(addComponentMessages.modalComponentSupportTooltipFullySupported),
+  },
+  ps: { // Provisionally supported
+    label: intl.formatMessage(addComponentMessages.modalComponentSupportLabelProvisionallySupported),
+    tooltip: intl.formatMessage(addComponentMessages.modalComponentSupportTooltipProvisionallySupported),
+  },
+  us: { // Not supported
+    label: intl.formatMessage(addComponentMessages.modalComponentSupportLabelNotSupported),
+    tooltip: intl.formatMessage(addComponentMessages.modalComponentSupportTooltipNotSupported),
+  },
+});