CON-162-Swap to react icons in the remote schemas + settings + feature flag

Varun-Choudhary · hasura-bot · commit f7b4d3294102 · 2022-05-10T07:38:04.000Z
PR-URL: hasura/graphql-engine-mono#4462 GitOrigin-RevId: 57c43f73603a63641363e578e3a8440eb1d3b586
diff --git a/console/src/components/Services/RemoteSchema/Common/Common.js b/console/src/components/Services/RemoteSchema/Common/Common.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
 import Tooltip from 'react-bootstrap/lib/Tooltip';
+import { FaQuestionCircle } from 'react-icons/fa';
 import DropdownButton from '../../../Common/DropdownButton/DropdownButton';
 
 import {
@@ -98,7 +99,7 @@ class Common extends React.Component {
           <div className={styles.subheading_text}>
             GraphQL server timeout
             <OverlayTrigger placement="right" overlay={tooltips.timeoutConf}>
-              <i className="fa fa-question-circle" aria-hidden="true" />
+              <FaQuestionCircle aria-hidden="true" className="mb-1 ml-xs" />
             </OverlayTrigger>
           </div>
           <label
@@ -128,7 +129,7 @@ class Common extends React.Component {
         <div className={styles.subheading_text + ' ' + styles.addPaddTop}>
           Remote Schema name *
           <OverlayTrigger placement="right" overlay={tooltips.schema}>
-            <i className="fa fa-question-circle" aria-hidden="true" />
+            <FaQuestionCircle aria-hidden="true" className="mb-1 ml-xs" />
           </OverlayTrigger>
         </div>
         <label
@@ -154,7 +155,7 @@ class Common extends React.Component {
         <div className={styles.subheading_text}>
           GraphQL server URL *
           <OverlayTrigger placement="right" overlay={tooltips.graphqlurl}>
-            <i className="fa fa-question-circle" aria-hidden="true" />
+            <FaQuestionCircle aria-hidden="true" className="mb-1 ml-xs" />
           </OverlayTrigger>
         </div>
         <div className={styles.wd_300}>
@@ -212,7 +213,7 @@ class Common extends React.Component {
             placement="right"
             overlay={tooltips.clientHeaderForward}
           >
-            <i className="fa fa-question-circle" aria-hidden="true" />
+            <FaQuestionCircle aria-hidden="true" />
           </OverlayTrigger>
         </div>
         <div className={styles.subheading_text + ' ' + styles.font_normal}>
@@ -221,7 +222,7 @@ class Common extends React.Component {
             placement="right"
             overlay={tooltips.additionalHeaders}
           >
-            <i className="fa fa-question-circle" aria-hidden="true" />
+            <FaQuestionCircle aria-hidden="true" className="mb-1 ml-xs" />
           </OverlayTrigger>
         </div>
         <CommonHeader
@@ -242,7 +243,7 @@ class Common extends React.Component {
         <div className={styles.subheading_text}>
           Comment
           <OverlayTrigger placement="right" overlay={tooltips.comment}>
-            <i className="fa fa-question-circle" aria-hidden="true" />
+            <FaQuestionCircle aria-hidden="true" className="mb-1 ml-xs" />
           </OverlayTrigger>
         </div>
         <label
@@ -273,7 +274,7 @@ class Common extends React.Component {
                   </Tooltip>
                 }
               >
-                <i className="fa fa-question-circle" aria-hidden="true" />
+                <FaQuestionCircle aria-hidden="true" className="mb-1 ml-xs" />
               </OverlayTrigger>
             </div>
             <GraphQLCustomizationEdit
diff --git a/console/src/components/Services/RemoteSchema/Common/GraphQLCustomization/FieldNames.tsx b/console/src/components/Services/RemoteSchema/Common/GraphQLCustomization/FieldNames.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { OverlayTrigger } from 'react-bootstrap';
+import { FaQuestionCircle } from 'react-icons/fa';
 import Tooltip from 'react-bootstrap/lib/Tooltip';
 import styles from '../../RemoteSchema.scss';
 import { Button } from '../../../../Common';
@@ -139,7 +140,7 @@ const FieldNames = ({
       <div className="text-lg font-bold mt-md">
         Remap Field Names{' '}
         <OverlayTrigger placement="right" overlay={tooltip}>
-          <i className="fa fa-question-circle" aria-hidden="true" />
+          <FaQuestionCircle aria-hidden="true" />
         </OverlayTrigger>
         <TypeMapping
           types={
diff --git a/console/src/components/Services/RemoteSchema/Common/GraphQLCustomization/GraphQLCustomizationEdit.tsx b/console/src/components/Services/RemoteSchema/Common/GraphQLCustomization/GraphQLCustomizationEdit.tsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { OverlayTrigger } from 'react-bootstrap';
 import Tooltip from 'react-bootstrap/lib/Tooltip';
 import { GraphQLSchema } from 'graphql';
+import { FaQuestionCircle } from 'react-icons/fa';
 
 import styles from '../../RemoteSchema.scss';
 import { Button } from '../../../../Common';
@@ -225,7 +226,7 @@ const GraphQLCustomizationEdit = ({
                 </Tooltip>
               }
             >
-              <i className="fa fa-question-circle" aria-hidden="true" />
+              <FaQuestionCircle aria-hidden="true" />
             </OverlayTrigger>
           </div>
 
diff --git a/console/src/components/Services/RemoteSchema/Common/GraphQLCustomization/TypeMapping.tsx b/console/src/components/Services/RemoteSchema/Common/GraphQLCustomization/TypeMapping.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import styles from '../../RemoteSchema.scss';
+import { FaTimes } from 'react-icons/fa';
 
 type TypeMap = { type: string; custom_name: string };
 
@@ -101,9 +101,8 @@ const TypeMapping = ({ types, typeMappings, onChange, label }: Props) => {
               />
             </div>
             <div>
-              <i
-                className={`${styles.fontAwosomeClose} fa-lg fa fa-times`}
-                data-test={`remove-type-map-${i}`}
+              <FaTimes
+                className="ml-2.5 w-4 min-w-4 cursor-pointer h-md w-md"
                 onClick={() => onDeleteItem(i)}
               />
             </div>
diff --git a/console/src/components/Services/RemoteSchema/Permissions/PermissionsTable.tsx b/console/src/components/Services/RemoteSchema/Permissions/PermissionsTable.tsx
@@ -1,5 +1,6 @@
 import React, { ChangeEvent } from 'react';
 import { GraphQLSchema } from 'graphql';
+import { FaPencilAlt } from 'react-icons/fa';
 import styles from '../../../Common/Permissions/PermissionStyles.scss';
 import PermTableHeader from '../../../Common/Permissions/TableHeader';
 import PermTableBody from '../../../Common/Permissions/TableBody';
@@ -61,7 +62,7 @@ const PermissionsTable: React.FC<PermissionsTableProps> = ({
   const getEditIcon = () => {
     return (
       <span className={styles.editPermsIcon}>
-        <i className="fa fa-pencil" aria-hidden="true" />
+        <FaPencilAlt aria-hidden="true" />
       </span>
     );
   };
diff --git a/console/src/components/Services/RemoteSchema/RemoteSchemaSubSidebar.js b/console/src/components/Services/RemoteSchema/RemoteSchemaSubSidebar.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router';
+import { IoGitBranch } from 'react-icons/io5';
 
 import LeftSubSidebar from '../../Common/Layout/LeftSubSidebar/LeftSubSidebar';
 import styles from '../../Common/Layout/LeftSubSidebar/LeftSubSidebar.scss';
@@ -77,10 +78,7 @@ const RemoteSchemaSubSidebar = ({
                 to={`${appPrefix}/manage/${d.name}/details`}
                 data-test={d.name}
               >
-                <i
-                  className={`${styles.tableIcon} fa fa-code-fork`}
-                  aria-hidden="true"
-                />
+                <IoGitBranch className={styles.tableIcon} aria-hidden="true" />
                 {d.name}
                 {inconsistentCurrentSchema ? (
                   <WarningSymbol
diff --git a/console/src/components/Services/Settings/About/About.tsx b/console/src/components/Services/Settings/About/About.tsx
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { Connect } from 'react-redux';
 import Helmet from 'react-helmet';
+import { FaSpinner } from 'react-icons/fa';
 
 import globals from '../../../../Globals';
 
@@ -22,7 +23,7 @@ class About extends Component<ConnectInjectedProps & StateProps> {
 
     const { serverVersion } = this.props;
 
-    const spinner = <i className="fa fa-spinner fa-spin" />;
+    const spinner = <FaSpinner className="animate-spin" />;
 
     const getServerVersionSection = () => {
       return (
diff --git a/console/src/components/Services/Settings/MetadataStatus/MetadataStatus.js b/console/src/components/Services/Settings/MetadataStatus/MetadataStatus.js
@@ -16,6 +16,7 @@ import {
 } from '../../Data/DataActions';
 import { setDriver } from '../../../../dataSources';
 import _push from '../../Data/push';
+import { FaExclamationCircle, FaTimes } from 'react-icons/fa';
 
 const MetadataStatus = ({ dispatch, metadata }) => {
   const [shouldShowErrorBanner, toggleErrorBanner] = useState(true);
@@ -291,16 +292,16 @@ const MetadataStatus = ({ dispatch, metadata }) => {
     }
     return (
       <div className={`${styles.errorBanner} alert alert-danger`}>
-        <i
-          className={`${styles.add_mar_right_small} ${styles.fontStyleNormal} fa fa-exclamation-circle`}
+        <FaExclamationCircle
+          className={`${styles.add_mar_right_small} ${styles.fontStyleNormal}`}
           aria-hidden="true"
         />
         <strong>
           You have been redirected because your GraphQL Engine metadata is in an
           inconsistent state
         </strong>
-        <i
-          className={`${styles.align_right} ${styles.fontStyleNormal} ${styles.cursorPointer} fa fa-times`}
+        <FaTimes
+          className={`${styles.align_right} ${styles.fontStyleNormal} ${styles.cursorPointer}`}
           aria-hidden="true"
           onClick={dismissErrorBanner}
         />
diff --git a/console/src/features/FeatureFlags/components/FeatureFlagToast/FeatureFlagToast.tsx b/console/src/features/FeatureFlags/components/FeatureFlagToast/FeatureFlagToast.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
+import { FaChevronRight } from 'react-icons/fa';
 import { useFeatureFlagDismiss } from '../../hooks/useFeatureFlagDismiss';
 import { useFeatureFlags } from '../../hooks/useFeatureFlags';
 import { FeatureFlagDefinition, FeatureFlagId } from '../../types';
@@ -38,7 +39,7 @@ export const FeatureFlagToast = (props: FeatureFlagToastProps) => {
         onClick={() => dispatch(_push('/settings/feature-flags'))}
       >
         Try out the new feature before it gets to general availability.
-        <i className="fa fa-chevron-right ml-2" aria-hidden="true" />
+        <FaChevronRight className="ml-2" aria-hidden="true" />
       </div>
       <div className="flex p-4 justify-between border-t">
         <button onClick={() => setDismissed(true)}>Hide for now</button>

Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';`
`2`	`2`	`import { OverlayTrigger } from 'react-bootstrap';`
`3`	`3`	`import Tooltip from 'react-bootstrap/lib/Tooltip';`
`4`	`4`	`import { GraphQLSchema } from 'graphql';`
	`5`	`+import { FaQuestionCircle } from 'react-icons/fa';`
`5`	`6`
`6`	`7`	`import styles from '../../RemoteSchema.scss';`
`7`	`8`	`import { Button } from '../../../../Common';`
`@@ -225,7 +226,7 @@ const GraphQLCustomizationEdit = ({`
`225`	`226`	`</Tooltip>`
`226`	`227`	`}`
`227`	`228`	`>`
`228`		`- <i className="fa fa-question-circle" aria-hidden="true" />`
	`229`	`+ <FaQuestionCircle aria-hidden="true" />`
`229`	`230`	`</OverlayTrigger>`
`230`	`231`	`</div>`
`231`	`232`