Bugfix/artesca 13437 fix icons

package.json

@@ -67,7 +67,7 @@
     "@hapi/joi-date": "^2.0.1",
     "@hookform/resolvers": "^2.8.8",
     "@monaco-editor/react": "^4.4.5",
-    "@scality/core-ui": "^0.138.0",
+    "@scality/core-ui": "^0.141.0",
     "@scality/module-federation": "^1.3.2",
     "@types/react-table": "^7.7.10",
     "@types/react-virtualized": "^9.21.20",

src/react/account/AccountDetails.tsx

@@ -1,21 +1,23 @@
+import { Icon } from '@scality/core-ui';
+import { Tabs } from '@scality/core-ui/dist/next';
+import { useParams } from 'react-router-dom';
 import { useTheme } from 'styled-components';
 import { Account } from '../../types/account';
-import { Tabs } from '@scality/core-ui/dist/next';
-import Properties from './details/Properties';
 import { Warning } from '../ui-elements/Warning';
-import { useParams } from 'react-router-dom';
-import AccountUserList from './AccountUserList';
-import AccountPoliciesList from './AccountPoliciesList';
-import { AccountLocations } from './AccountLocations';
 import { useAuthGroups } from '../utils/hooks';
+import { AccountLocations } from './AccountLocations';
+import AccountPoliciesList from './AccountPoliciesList';
+import AccountUserList from './AccountUserList';
+import Properties from './details/Properties';
+
 type Props = {
   account: Account | null | undefined;
 };
 
 const NotFound = () => (
   <Warning
-    //@ts-expect-error fix this when you are working on it
-    iconClass="fas fa-3x fa-exclamation-triangle"
+    centered={true}
+    icon={<Icon name="Exclamation-triangle" size="3x" />}
     title="Account not found."
   />
 );

src/react/account/AccountUserAccessKeys.tsx

@@ -21,7 +21,7 @@ import {
   useRouteMatch,
 } from 'react-router-dom';
 import { Column } from 'react-table';
-import styled, { useTheme } from 'styled-components';
+import { useTheme } from 'styled-components';
 import { useIAMClient } from '../IAMProvider';
 import { getUserAccessKeysQuery } from '../queries';
 import { BreadcrumbAccount } from '../ui-elements/Breadcrumb';
@@ -34,15 +34,6 @@ import {
 import AccountUserSecretKeyModal from './AccountUserSecretKeyModal';
 import { TableHeaderWrapper } from '../ui-elements/Table';
 
-const CustomIcon = styled.i`
-  color: ${(props) => props.theme.textSecondary};
-  font-size: 32px;
-  cursor: pointer;
-  :hover {
-    color: ${(props) => props.theme.textPrimary};
-  }
-`;
-
 const CreatedOnCell = (rowValue) => {
   const outdatedAlert = useAccessKeyOutdatedStatus(rowValue);
   return (
@@ -286,8 +277,10 @@ const AccountUserAccessKeys = () => {
       <AppContainer.OverallSummary>
         <Stack withSeparators gap="r32">
           <>
-            <CustomIcon
-              className="fas fa-arrow-left"
+            <Icon
+              name="Arrow-left"
+              size="2x"
+              style={{ cursor: 'pointer' }}
               onClick={() => {
                 history.push('../');
               }}

src/react/databrowser/buckets/ObjectLockSetting.tsx

@@ -133,7 +133,7 @@ export default function ObjectLockSetting() {
               type="submit"
               variant="primary"
               label="Save"
-              icon={<i className="fas fa-save"></i>}
+              icon={<Icon name="Save" />}
             />
           </Stack>
         }

src/react/databrowser/objects/MetadataSearch.tsx

@@ -1,20 +1,21 @@
 import { useRef, useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
+import styled from 'styled-components';
 
 import { Hint, Hints, HintsTitle } from '../../ui-elements/Input';
 import {
   SearchButton,
-  SearchInputIcon,
   SearchMetadataContainer,
-  SearchMetadataInput,
   SearchMetadataInputAndIcon,
   SearchValidationIcon,
 } from '../../ui-elements/Table';
 import {
   useOutsideClick,
-  useQueryParams,
   usePrefixWithSlash,
+  useQueryParams,
 } from '../../utils/hooks';
+import { Icon, spacing } from '@scality/core-ui';
+import { Input } from '@scality/core-ui/dist/next';
 
 export const METADATA_SEARCH_HINT_ITEMS = [
   {
@@ -50,6 +51,19 @@ export const METADATA_SEARCH_HINT_ITEMS = [
     q: 'replication-status="PENDING"',
   },
 ];
+
+const SearchMetadataInputContainer = styled.div`
+  width: 100%;
+  > div {
+    width: 100%;
+  }
+`;
+const SearchMetadataInput = styled(Input)`
+  background-color: ${(props) => props.theme.backgroundLevel1};
+  padding: 0px ${spacing.r32};
+  max-height: ${spacing.r32};
+  box-sizing: border-box;
+`;
 type Props = {
   isMetadataType: boolean;
   errorZenkoMsg: string | null | undefined;
@@ -110,6 +124,8 @@ const MetadataSearch = ({ isMetadataType, errorZenkoMsg }: Props) => {
     setHintsShown(true);
   };
 
+  const isHidden = !isMetadataType && !errorZenkoMsg;
+
   return (
     <SearchMetadataContainer
       //@ts-expect-error fix this when you are working on it
@@ -121,20 +137,27 @@ const MetadataSearch = ({ isMetadataType, errorZenkoMsg }: Props) => {
           isMetadataType={isMetadataType}
           isError={!!errorZenkoMsg}
         />
-        <SearchMetadataInput
-          //@ts-expect-error fix this when you are working on it
-          disableToggle={true}
-          ref={inputRef}
-          onChange={handleChange}
-          placeholder="Metadata Search"
-          value={inputText}
-          onClick={handleInputClicked}
-        />
-        <SearchInputIcon
-          className="fas fa-times-circle"
+        <SearchMetadataInputContainer>
+          <SearchMetadataInput
+            id="metadata-search-input"
+            ref={inputRef}
+            onChange={handleChange}
+            placeholder="Metadata Search"
+            value={inputText}
+            onClick={handleInputClicked}
+          />
+        </SearchMetadataInputContainer>
+
+        <Icon
+          name="Times-circle"
+          style={{
+            position: 'absolute',
+            visibility: isHidden ? 'hidden' : 'visible',
+            right: '10px',
+            cursor: 'pointer',
+          }}
+          //@ts-expect-error Need to improve typing on core-ui for including the event
           onClick={reset}
-          //@ts-expect-error fix this when you are working on it
-          isHidden={!isMetadataType && !errorZenkoMsg ? 1 : 0}
         />
       </SearchMetadataInputAndIcon>
       {hintsShown && !inputText && (

src/react/databrowser/objects/ObjectListTable.tsx

@@ -5,10 +5,9 @@ import { AutoSizer } from 'react-virtualized';
 import { FixedSizeList } from 'react-window';
 import InfiniteLoader from 'react-window-infinite-loader';
 import { List } from 'immutable';
-import { FormattedDateTime, PrettyBytes, Text } from '@scality/core-ui';
+import { FormattedDateTime, Icon, PrettyBytes, Text } from '@scality/core-ui';
 import { convertRemToPixels } from '@scality/core-ui/dist/utils';
 import { spacing } from '@scality/core-ui';
-import styled from 'styled-components';
 import { useHistory, useParams } from 'react-router-dom';
 import { useQuery } from 'react-query';
 
@@ -34,10 +33,6 @@ import { useAccountsLocationsAndEndpoints } from '../../next-architecture/domain
 import { useAccountsLocationsEndpointsAdapter } from '../../next-architecture/ui/AccountsLocationsEndpointsAdapterProvider';
 import { EmptyCell } from '@scality/core-ui/dist/components/tablev2/Tablev2.component';
 
-export const Icon = styled.i<{ isMargin?: boolean }>`
-  margin-right: ${spacing.r4};
-  margin-left: ${(props) => (props.isMargin ? spacing.r16 : '0px')};
-`;
 type CellProps = {
   row: {
     original: ObjectEntity;
@@ -195,7 +190,7 @@ export default function ObjectListTable({
           if (original.isFolder) {
             return (
               <span>
-                <Icon className="far fa-folder"></Icon>
+                <Icon name="Folder" />
                 <T.CellClick
                   onClick={handleCellClicked(bucketName, original.key)}
                 >
@@ -205,34 +200,31 @@ export default function ObjectListTable({
             );
           }
 
+          const iconStyle = {
+            marginRight: spacing.r4,
+            marginLeft: !original.isLatest ? spacing.r16 : 0,
+          };
+
           if (original.isDeleteMarker) {
             return (
               <span>
                 {' '}
-                <Icon
-                  isMargin={!original.isLatest}
-                  className="fas fa-ban"
-                ></Icon>
+                <Icon style={iconStyle} name="Deletion-marker" />
                 {original.name}
               </span>
             );
           }
 
           return (
             <span>
-              <Icon
-                isMargin={!original.isLatest}
-                className="far fa-file"
-              ></Icon>
+              <Icon style={iconStyle} name="File" />
               {original.lockStatus === 'LOCKED' && (
-                <Icon className="fa fa-lock"></Icon>
+                <Icon style={iconStyle} name="Lock" />
               )}
               {original.lockStatus === 'RELEASED' && (
-                <Icon className="fa fa-lock-open"></Icon>
-              )}
-              {original.isLegalHoldEnabled && (
-                <Icon className="fas fa-balance-scale"></Icon>
+                <Icon style={iconStyle} name="Lock-open" />
               )}
+              {original.isLegalHoldEnabled && <Icon name="Rebalance" />}
               {isObjectInColdStorage &&
               (headObjectStatus === 'idle' ||
                 headObjectStatus === 'loading' ||

src/react/locations/LocationDetails/LocationDetails.tsx

@@ -4,7 +4,7 @@ import {
   LocationTypeKey,
 } from '../../../types/config';
 import React from 'react';
-import { Tooltip } from '@scality/core-ui';
+import { Tooltip, Icon } from '@scality/core-ui';
 import { storageOptions } from './storageOptions';
 
 type Props = {
@@ -66,7 +66,7 @@ export default class LocationDetails extends React.Component<Props> {
       } else if (this.props.repStatus === 'disabled') {
         msg = (
           <div>
-            <span className="mr-2 fa fa-exclamation-circle" />
+            <Icon name="Exclamation-triangle" />
             <span>
               Your instance failed to automatically resume this location. Please
               resume manually.

src/react/locations/LocationEditor.tsx

@@ -357,7 +357,7 @@ function LocationEditor() {
           content={
             <Select
               id="locationType"
-              placeholder="Select an option..."
+              placeholder="Select a location type..."
               onChange={onTypeChange}
               disabled={editingExisting}
               //@ts-expect-error fix this when you are working on it