Paragon StatusAlert deprecation (#562)

* refactor: updated StatusAlert to Alert in SearchError component * refactor: updated StatusAlert to Alert in SearchNoResults component * refactor: updated StatusAlert to Alert in SearchCourseCard component * refactor: updated StatusAlert to Alert in SearchProgramCard component * refactor: updated StatusAlert to Alert in SkillsCourse component * refactor: upgraded paragon version to include required icons * fix: fixed custom styling and icon issues as suggested in the review * refactor: reverted paragon version as it was breaking other code and used font awesome icons * refactor: updated paragon, used paragon icon in place of font awesome --------- Co-authored-by: Adam Stankiewicz <[email protected]>
openedx · Jan 31, 2023 · df18e4e · df18e4e
1 parent 3c465c9
commit df18e4e
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 108 deletions.
diff --git a/src/components/search/SearchError.jsx b/src/components/search/SearchError.jsx
@@ -1,36 +1,24 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { StatusAlert } from '@edx/paragon';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+import { Alert } from '@edx/paragon';
+import { Warning } from '@edx/paragon/icons';
 import { getSearchErrorMessage } from '../utils/search';
 
 const SearchError = ({ title }) => {
   const searchErrorMessage = getSearchErrorMessage(title);
-  const renderDialog = useCallback(
-    () => (
-      <div className="lead d-flex align-items-center py-3">
-        <div className="mr-3">
-          <FontAwesomeIcon icon={faExclamationTriangle} size="2x" />
-        </div>
-        <div>
-          {searchErrorMessage.messageTitle}
-          <br />
-          {searchErrorMessage.messageContent}
-        </div>
-      </div>
-    ),
-    [searchErrorMessage.messageContent, searchErrorMessage.messageTitle],
-  );
 
-  // TODO: Design Debt. Replace with `Alert` from @edx/paragon.
   return (
-    <StatusAlert
-      alertType="danger"
-      dialog={renderDialog()}
+    <Alert
+      variant="danger"
       dismissible={false}
+      icon={Warning}
       open
-    />
+    >
+      <Alert.Heading>
+        {searchErrorMessage.messageTitle}
+      </Alert.Heading>
+      {searchErrorMessage.messageContent}
+    </Alert>
   );
 };
 

diff --git a/src/components/search/SearchNoResults.jsx b/src/components/search/SearchNoResults.jsx
@@ -1,40 +1,26 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { StatusAlert } from '@edx/paragon';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faSearchMinus } from '@fortawesome/free-solid-svg-icons';
+import { Alert } from '@edx/paragon';
+import { ZoomOut } from '@edx/paragon/icons';
 
 import { PopularResults } from './popular-results';
 import { getNoResultsMessage } from '../utils/search';
 
 const SearchNoResults = ({ title }) => {
   const noResultsMessage = getNoResultsMessage(title);
-  const renderDialog = useCallback(
-    () => (
-      <div className="lead d-flex align-items-center py-3">
-        <div className="mr-3">
-          <FontAwesomeIcon icon={faSearchMinus} size="2x" />
-        </div>
-        <div>
-          {noResultsMessage.messageTitle}
-          <br />
-          {noResultsMessage.messageContent}
-        </div>
-      </div>
-    ),
-    [noResultsMessage.messageContent, noResultsMessage.messageTitle],
-  );
 
-  // TODO: Design Debt. Replace with `Alert` from @edx/paragon.
   return (
     <>
-      <StatusAlert
+      <Alert
         className="mb-5"
-        alertType="info"
-        dialog={renderDialog()}
+        variant="info"
         dismissible={false}
-        open
-      />
+        icon={ZoomOut}
+        show
+      >
+        <Alert.Heading>{noResultsMessage.messageTitle}</Alert.Heading>
+        {noResultsMessage.messageContent}
+      </Alert>
       <PopularResults title={title} />
     </>
   );

diff --git a/src/components/skills-quiz/SearchCourseCard.jsx b/src/components/skills-quiz/SearchCourseCard.jsx
@@ -5,9 +5,8 @@ import PropTypes from 'prop-types';
 import { v4 as uuidv4 } from 'uuid';
 import { AppContext } from '@edx/frontend-platform/react';
 import { SearchContext } from '@edx/frontend-enterprise-catalog-search';
-import { StatusAlert, CardGrid } from '@edx/paragon';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faSearchMinus } from '@fortawesome/free-solid-svg-icons';
+import { Alert, CardGrid } from '@edx/paragon';
+import { ZoomOut } from '@edx/paragon/icons';
 import { camelCaseObject } from '@edx/frontend-platform/utils';
 import { SkillsContext } from './SkillsContextProvider';
 
@@ -18,17 +17,6 @@ import { UserSubsidyContext } from '../enterprise-user-subsidy';
 import CourseCard from './CourseCard';
 import { SubsidyRequestsContext } from '../enterprise-subsidy-requests';
 
-const renderDialog = () => (
-  <div className="lead d-flex align-items-center py-3">
-    <div className="mr-3">
-      <FontAwesomeIcon icon={faSearchMinus} size="2x" />
-    </div>
-    <p>
-      { NO_COURSES_ALERT_MESSAGE }
-    </p>
-  </div>
-);
-
 const SearchCourseCard = ({ index }) => {
   const { enterpriseConfig } = useContext(AppContext);
   const {
@@ -99,13 +87,15 @@ const SearchCourseCard = ({ index }) => {
 
   if (hitCount === 0) {
     return (
-      <StatusAlert
+      <Alert
         className="mt-4 mb-5"
-        alertType="info"
-        dialog={renderDialog()}
+        variant="info"
         dismissible={false}
-        open
-      />
+        icon={ZoomOut}
+        show
+      >
+        { NO_COURSES_ALERT_MESSAGE }
+      </Alert>
     );
   }
 

diff --git a/src/components/skills-quiz/SearchProgramCard.jsx b/src/components/skills-quiz/SearchProgramCard.jsx
@@ -9,13 +9,11 @@ import { AppContext } from '@edx/frontend-platform/react';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { camelCaseObject } from '@edx/frontend-platform/utils';
 import {
-  Badge, Card, Icon, StatusAlert, CardGrid, Stack,
+  Badge, Card, Icon, Alert, CardGrid, Stack,
 } from '@edx/paragon';
-import { Program } from '@edx/paragon/icons';
+import { Program, ZoomOut } from '@edx/paragon/icons';
 import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
 import { SearchContext } from '@edx/frontend-enterprise-catalog-search';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faSearchMinus } from '@fortawesome/free-solid-svg-icons';
 import { SkillsContext } from './SkillsContextProvider';
 import { isDefinedAndNotNull, getPrimaryPartnerLogo } from '../../utils/common';
 import { ELLIPSIS_STR } from '../course/data/constants';
@@ -35,17 +33,6 @@ const linkToProgram = (program, slug, enterpriseUUID, programUuid) => {
   return `/${slug}/program/${programUuid}`;
 };
 
-const renderDialog = () => (
-  <div className="lead d-flex align-items-center py-3">
-    <div className="mr-3">
-      <FontAwesomeIcon icon={faSearchMinus} size="2x" />
-    </div>
-    <p>
-      { NO_PROGRAMS_ALERT_MESSAGE }
-    </p>
-  </div>
-);
-
 const SearchProgramCard = ({ index }) => {
   const history = useHistory();
   const { enterpriseConfig } = useContext(AppContext);
@@ -174,13 +161,15 @@ const SearchProgramCard = ({ index }) => {
 
   if (hitCount === 0) {
     return (
-      <StatusAlert
+      <Alert
         className="mt-4 mb-5"
-        alertType="info"
-        dialog={renderDialog()}
+        variant="info"
         dismissible={false}
-        open
-      />
+        icon={ZoomOut}
+        show
+      >
+        { NO_PROGRAMS_ALERT_MESSAGE }
+      </Alert>
     );
   }
 

diff --git a/src/components/skills-quiz/SkillsCourses.jsx b/src/components/skills-quiz/SkillsCourses.jsx
@@ -4,7 +4,7 @@ import React, {
 import {
   Button,
   Badge,
-  StatusAlert,
+  Alert,
   Skeleton,
   CardGrid,
 } from '@edx/paragon';
@@ -15,8 +15,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { Link } from 'react-router-dom';
 import { AppContext } from '@edx/frontend-platform/react';
 import { camelCaseObject } from '@edx/frontend-platform/utils';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faSearchMinus } from '@fortawesome/free-solid-svg-icons';
+import { ZoomOut } from '@edx/paragon/icons';
 import PropTypes from 'prop-types';
 
 import { useSelectedSkillsAndJobSkills } from './data/hooks';
@@ -31,17 +30,6 @@ import CardLoadingSkeleton from './CardLoadingSkeleton';
 import CourseCard from './CourseCard';
 import { SubsidyRequestsContext } from '../enterprise-subsidy-requests';
 
-const renderDialog = () => (
-  <div className="lead d-flex align-items-center py-3">
-    <div className="mr-3">
-      <FontAwesomeIcon icon={faSearchMinus} size="2x" />
-    </div>
-    <p>
-      { NO_COURSES_ALERT_MESSAGE_AGAINST_SKILLS }
-    </p>
-  </div>
-);
-
 const SkillsCourses = ({ index }) => {
   const { enterpriseConfig } = useContext(AppContext);
   const { state: { selectedJob } } = useContext(SkillsContext);
@@ -169,14 +157,16 @@ const SkillsCourses = ({ index }) => {
         </React.Fragment>
       ))}
       <div>
-        {hitCount === 0 && (
-          <StatusAlert
+        { hitCount === 0 && (
+          <Alert
             className="mt-4 mb-5"
-            alertType="info"
-            dialog={renderDialog()}
+            variant="info"
             dismissible={false}
-            open
-          />
+            icon={ZoomOut}
+            show
+          >
+            { NO_COURSES_ALERT_MESSAGE_AGAINST_SKILLS }
+          </Alert>
         )}
       </div>
     </div>