feat: Update Clockface to 5.2.0 (Icon Refactor) (#5128)

* feat: updated clockface to 5.0.0, and updated all old icons

* fix: updated to 5.1.0 and updated broken icon

* fix:  unit tests

* feat: updated to 5.2.0 and updated multi org icons

Author: brandenTenbrink

package.json

@@ -164,7 +164,7 @@
   "dependencies": {
     "@codingame/monaco-jsonrpc": "^0.3.1",
     "@docsearch/react": "^3.0.0-alpha.37",
-    "@influxdata/clockface": "^4.8.0",
+    "@influxdata/clockface": "^5.2.0",
     "@influxdata/flux-lsp-browser": "0.8.28",
     "@influxdata/giraffe": "^2.32.0",
     "@influxdata/influxdb-templates": "0.9.0",

src/alerting/components/AlertingIndex.tsx

@@ -76,7 +76,7 @@ const AlertingIndex: FunctionComponent = () => {
           {flowsCTA.alerts && (
             <FeatureFlag name="flowsCTA">
               <div className="header-cta">
-                <Icon glyph={IconFont.BookPencil} />
+                <Icon glyph={IconFont.Pencil} />
                 Now you can use {PROJECT_NAME_PLURAL} to explore your data while
                 building an alert
                 <Link

src/alerting/components/SentTableField.tsx

@@ -18,7 +18,7 @@ const SentTableField: FC<Props> = ({row: {sent}}) => {
       data-testid={`sent-table-field ${modifier}`}
     >
       {sent === 'true' ? (
-        <Icon glyph={IconFont.Checkmark_New} />
+        <Icon glyph={IconFont.CheckMark_New} />
       ) : (
         <Icon glyph={IconFont.AlertTriangle} />
       )}

src/authorizations/components/AllAccessTokenOverlay.tsx

@@ -109,14 +109,14 @@ const AllAccessTokenOverlay: FC<OwnProps> = props => {
               <Button
                 text="Cancel"
                 color={ComponentColor.Tertiary}
-                icon={IconFont.Remove}
+                icon={IconFont.Remove_New}
                 onClick={handleDismiss}
               />
 
               <Button
                 text="Save"
                 testID="button--save"
-                icon={IconFont.Checkmark}
+                icon={IconFont.CheckMark_New}
                 color={ComponentColor.Success}
                 type={ButtonType.Submit}
               />

src/authorizations/components/TokensTab.tsx

@@ -313,7 +313,7 @@ class TokensTab extends PureComponent<Props, State> {
       return IconFont.Subtract
     }
     if (tokensSelectedForBatchOperation.length === tokensOnCurrentPage.length) {
-      return IconFont.Checkmark
+      return IconFont.CheckMark_New
     }
 
     return IconFont.Subtract

src/billing/components/PayAsYouGo/NotificationSettingsOverlay.tsx

@@ -127,7 +127,7 @@ const NotificationSettingsOverlay: FC<Props> = ({onHideOverlay}) => {
                   }
                 >
                   <Input
-                    icon={IconFont.CurrencyUSD}
+                    icon={IconFont.CurrencyDollar}
                     type={InputType.Number}
                     min={10}
                     value={balanceThreshold}

src/checkout/NotificationSettingsForm.tsx

@@ -24,7 +24,7 @@ const NotificationSettingsForm: FC = () => {
   return (
     <>
       <FormToggle
-        icon={IconFont.Checkmark_New}
+        icon={IconFont.CheckMark_New}
         id="shouldNotify"
         label="Send me an email when my bill exceeds a certain amount"
         tabIndex={0}
@@ -43,7 +43,7 @@ const NotificationSettingsForm: FC = () => {
             </Grid.Column>
             <Grid.Column widthSM={Columns.Three}>
               <FormInput
-                icon={IconFont.CurrencyUSD}
+                icon={IconFont.CurrencyDollar}
                 id="balanceThreshold"
                 label={`Limit ($${MINIMUM_BALANCE_THRESHOLD} minimum)`}
                 min={MINIMUM_BALANCE_THRESHOLD}

src/checks/components/CheckEOSaveButton.tsx

@@ -73,7 +73,7 @@ const CheckEOSaveButton: FunctionComponent<Props> = ({
       <SquareButton
         ref={triggerRef}
         className={className}
-        icon={IconFont.Checkmark_New}
+        icon={IconFont.CheckMark_New}
         color={ComponentColor.Success}
         size={ComponentSize.Small}
         status={status}
@@ -98,7 +98,7 @@ const QueryChecklistItem: FunctionComponent<ChecklistItemProps> = ({
   const className = selected
     ? 'query-checklist--item valid'
     : 'query-checklist--item error'
-  const icon = selected ? IconFont.Checkmark_New : IconFont.Remove_New
+  const icon = selected ? IconFont.CheckMark_New : IconFont.Remove_New
 
   return (
     <li className={className}>

src/cloud/components/RateLimitAlert.tsx

@@ -107,7 +107,7 @@ const RateLimitAlert: FC<Props> = ({alertOnly, className, location}) => {
   })
 
   const icon = isFlagEnabled('credit250Experiment')
-    ? IconFont.Stop
+    ? IconFont.AlertTriangle
     : IconFont.Cloud
 
   if (CLOUD && status === 'exceeded' && resources.includes('cardinality')) {

src/dashboards/components/VEOHeader.tsx

@@ -56,7 +56,7 @@ class VEOHeader extends PureComponent<Props> {
             />
             <SquareButton
               className={saveButtonClass}
-              icon={IconFont.Checkmark_New}
+              icon={IconFont.CheckMark_New}
               color={ComponentColor.Success}
               size={ComponentSize.Small}
               onClick={onSave}