hardcoded-svg

Signed-off-by: Surajyadav <[email protected]>
argoproj · Jan 19, 2025 · 2fbde97 · 2fbde97
1 parent 76bd8ef
commit 2fbde97
Show file tree

Hide file tree

Showing 5 changed files with 137 additions and 49 deletions.
diff --git a/ui/src/app/applications/components/__snapshots__/utils.test.tsx.snap b/ui/src/app/applications/components/__snapshots__/utils.test.tsx.snap
@@ -33,19 +33,22 @@ exports[`ComparisonStatusIcon.Synced 1`] = `
 `;
 
 exports[`ComparisonStatusIcon.Unknown 1`] = `
-[
-  <i
-    className="fa fa-circle-notch fa-spin"
-    qe-id="utils-sync-status-title"
-    style={
-      {
-        "color": "#CCD6DD",
-      }
+<svg
+  className="icon spin"
+  qe-id="utils-sync-status-title"
+  style={
+    {
+      "color": "#CCD6DD",
     }
-    title="Unknown"
-  />,
-  " ",
-]
+  }
+  viewBox="0 0 512 512"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M222.7 32.1c5 16.9-4.6 34.8-21.5 39.8C121.8 95.6 64 169.1 64 256c0 106 86 192 192 192s192-86 192-192c0-86.9-57.8-160.4-137.1-184.1c-16.9-5-26.6-22.9-21.5-39.8s22.9-26.6 39.8-21.5C434.9 42.1 512 140 512 256c0 141.4-114.6 256-256 256S0 397.4 0 256C0 140 77.1 42.1 182.9 10.6c16.9-5 34.8 4.6 39.8 21.5z"
+    fill="#CCD6DD"
+  />
+</svg>
 `;
 
 exports[`HealthStatusIcon.Degraded 1`] = `
@@ -88,16 +91,22 @@ exports[`HealthStatusIcon.Missing 1`] = `
 `;
 
 exports[`HealthStatusIcon.Progressing 1`] = `
-<i
-  className="fa fa fa-circle-notch fa-spin utils-health-status-icon"
+<svg
+  className="icon spin"
   qe-id="utils-health-status-title"
   style={
     {
       "color": "#0DADEA",
     }
   }
-  title="Progressing"
-/>
+  viewBox="0 0 512 512"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M222.7 32.1c5 16.9-4.6 34.8-21.5 39.8C121.8 95.6 64 169.1 64 256c0 106 86 192 192 192s192-86 192-192c0-86.9-57.8-160.4-137.1-184.1c-16.9-5-26.6-22.9-21.5-39.8s22.9-26.6 39.8-21.5C434.9 42.1 512 140 512 256c0 141.4-114.6 256-256 256S0 397.4 0 256C0 140 77.1 42.1 182.9 10.6c16.9-5 34.8 4.6 39.8 21.5z"
+    fill="#0DADEA"
+  />
+</svg>
 `;
 
 exports[`HealthStatusIcon.Suspended 1`] = `
@@ -128,16 +137,22 @@ exports[`HealthStatusIcon.Unknown 1`] = `
 
 exports[`OperationState.Deleting 1`] = `
 [
-  <i
-    className="fa fa-circle-notch fa-spin"
+  <svg
+    className="icon spin"
     qe-id="utils-operations-status-title"
     style={
       {
         "color": "#0DADEA",
       }
     }
-    title="Deleting"
-  />,
+    viewBox="0 0 512 512"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M222.7 32.1c5 16.9-4.6 34.8-21.5 39.8C121.8 95.6 64 169.1 64 256c0 106 86 192 192 192s192-86 192-192c0-86.9-57.8-160.4-137.1-184.1c-16.9-5-26.6-22.9-21.5-39.8s22.9-26.6 39.8-21.5C434.9 42.1 512 140 512 256c0 141.4-114.6 256-256 256S0 397.4 0 256C0 140 77.1 42.1 182.9 10.6c16.9-5 34.8 4.6 39.8 21.5z"
+      fill="#0DADEA"
+    />
+  </svg>,
   " ",
   "Deleting",
 ]
@@ -196,33 +211,45 @@ exports[`OperationState.Sync failed 1`] = `
 
 exports[`OperationState.Syncing 1`] = `
 [
-  <i
-    className="fa fa-circle-notch fa-spin"
+  <svg
+    className="icon spin"
     qe-id="utils-operations-status-title"
     style={
       {
         "color": "#0DADEA",
       }
     }
-    title="Syncing"
-  />,
+    viewBox="0 0 512 512"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M222.7 32.1c5 16.9-4.6 34.8-21.5 39.8C121.8 95.6 64 169.1 64 256c0 106 86 192 192 192s192-86 192-192c0-86.9-57.8-160.4-137.1-184.1c-16.9-5-26.6-22.9-21.5-39.8s22.9-26.6 39.8-21.5C434.9 42.1 512 140 512 256c0 141.4-114.6 256-256 256S0 397.4 0 256C0 140 77.1 42.1 182.9 10.6c16.9-5 34.8 4.6 39.8 21.5z"
+      fill="#0DADEA"
+    />
+  </svg>,
   " ",
   "Syncing",
 ]
 `;
 
 exports[`OperationState.Unknown 1`] = `
 [
-  <i
-    className="fa fa-circle-notch fa-spin"
+  <svg
+    className="icon spin"
     qe-id="utils-operations-status-title"
     style={
       {
         "color": "#0DADEA",
       }
     }
-    title="Unknown"
-  />,
+    viewBox="0 0 512 512"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M222.7 32.1c5 16.9-4.6 34.8-21.5 39.8C121.8 95.6 64 169.1 64 256c0 106 86 192 192 192s192-86 192-192c0-86.9-57.8-160.4-137.1-184.1c-16.9-5-26.6-22.9-21.5-39.8s22.9-26.6 39.8-21.5C434.9 42.1 512 140 512 256c0 141.4-114.6 256-256 256S0 397.4 0 256C0 140 77.1 42.1 182.9 10.6c16.9-5 34.8 4.6 39.8 21.5z"
+      fill="#0DADEA"
+    />
+  </svg>,
   " ",
   "Unknown",
 ]
@@ -255,15 +282,22 @@ exports[`ResourceResultIcon.Hook.Failed 1`] = `
 `;
 
 exports[`ResourceResultIcon.Hook.Running 1`] = `
-<i
-  className="fa fa-circle-notch fa-spin"
+<svg
+  className="icon spin"
+  qe-id="utils-resource-result-icon"
   style={
     {
       "color": "#0DADEA",
     }
   }
-  title="Running: my-message"
-/>
+  viewBox="0 0 512 512"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M222.7 32.1c5 16.9-4.6 34.8-21.5 39.8C121.8 95.6 64 169.1 64 256c0 106 86 192 192 192s192-86 192-192c0-86.9-57.8-160.4-137.1-184.1c-16.9-5-26.6-22.9-21.5-39.8s22.9-26.6 39.8-21.5C434.9 42.1 512 140 512 256c0 141.4-114.6 256-256 256S0 397.4 0 256C0 140 77.1 42.1 182.9 10.6c16.9-5 34.8 4.6 39.8 21.5z"
+    fill="#0DADEA"
+  />
+</svg>
 `;
 
 exports[`ResourceResultIcon.Hook.Succeeded 1`] = `
@@ -278,14 +312,22 @@ exports[`ResourceResultIcon.Hook.Succeeded 1`] = `
 `;
 
 exports[`ResourceResultIcon.Hook.Terminating 1`] = `
-<i
-  className="fa fa-circle-notch fa-spin"
+<svg
+  className="icon spin"
+  qe-id="utils-resource-result-icon"
   style={
     {
       "color": "#DE303D",
     }
   }
-/>
+  viewBox="0 0 512 512"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M222.7 32.1c5 16.9-4.6 34.8-21.5 39.8C121.8 95.6 64 169.1 64 256c0 106 86 192 192 192s192-86 192-192c0-86.9-57.8-160.4-137.1-184.1c-16.9-5-26.6-22.9-21.5-39.8s22.9-26.6 39.8-21.5C434.9 42.1 512 140 512 256c0 141.4-114.6 256-256 256S0 397.4 0 256C0 140 77.1 42.1 182.9 10.6c16.9-5 34.8 4.6 39.8 21.5z"
+    fill="#DE303D"
+  />
+</svg>
 `;
 
 exports[`ResourceResultIcon.Pruned 1`] = `

diff --git a/ui/src/app/applications/components/application-resource-tree/application-resource-tree.scss b/ui/src/app/applications/components/application-resource-tree/application-resource-tree.scss
@@ -411,7 +411,7 @@
 
     &__node-status-icon {
         font-size: 0.8em;
-        i {
+        i, svg {
             margin-right: 2px;
         }
     }
@@ -428,4 +428,4 @@
 
     }
 
-}
+}
diff --git a/ui/src/app/applications/components/utils.scss b/ui/src/app/applications/components/utils.scss
@@ -31,4 +31,20 @@
 i.utils-health-status-icon {
     min-width: 13px;
     text-align: center;
-}
+}
+
+.icon.spin {
+    animation: spin 2s linear infinite; 
+    width: 0.5em;
+    height: 0.5em;
+    vertical-align: -0.05em;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
diff --git a/ui/src/app/applications/components/utils.tsx b/ui/src/app/applications/components/utils.tsx
@@ -49,6 +49,19 @@ export function helpTip(text: string) {
         </Tooltip>
     );
 }
+
+//this will replace all <i> fa-spin </i> icons as they are currently misbehaving with no fix available.
+export const SpinningIcon = ({color, qeId}: {color: string; qeId: string}) => {
+    return (
+        <svg className='icon spin' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' style={{color}} qe-id={qeId}>
+            <path
+                fill={color}
+                d='M222.7 32.1c5 16.9-4.6 34.8-21.5 39.8C121.8 95.6 64 169.1 64 256c0 106 86 192 192 192s192-86 192-192c0-86.9-57.8-160.4-137.1-184.1c-16.9-5-26.6-22.9-21.5-39.8s22.9-26.6 39.8-21.5C434.9 42.1 512 140 512 256c0 141.4-114.6 256-256 256S0 397.4 0 256C0 140 77.1 42.1 182.9 10.6c16.9-5 34.8 4.6 39.8 21.5z'
+            />
+        </svg>
+    );
+};
+
 export async function deleteApplication(appName: string, appNamespace: string, apis: ContextApis): Promise<boolean> {
     let confirmed = false;
     const propagationPolicies: {name: string; message: string}[] = [
@@ -221,7 +234,11 @@ export const OperationPhaseIcon = ({app}: {app: appModels.Application}) => {
             color = COLORS.operation.running;
             break;
     }
-    return <i title={getOperationStateTitle(app)} qe-id='utils-operations-status-title' className={className} style={{color}} />;
+    return className.includes('fa-spin') ? (
+        <SpinningIcon color={color} qeId='utils-operations-status-title' />
+    ) : (
+        <i title={getOperationStateTitle(app)} qe-id='utils-operations-status-title' className={className} style={{color}} />
+    );
 };
 
 export const HydrateOperationPhaseIcon = ({operationState}: {operationState?: appModels.HydrateOperation}) => {
@@ -244,7 +261,11 @@ export const HydrateOperationPhaseIcon = ({operationState}: {operationState?: ap
             color = COLORS.operation.running;
             break;
     }
-    return <i title={operationState.phase} qe-id='utils-operations-status-title' className={className} style={{color}} />;
+    return className.includes('fa-spin') ? (
+        <SpinningIcon color={color} qeId='utils-operations-status-title' />
+    ) : (
+        <i title={operationState.phase} qe-id='utils-operations-status-title' className={className} style={{color}} />
+    );
 };
 
 export const ComparisonStatusIcon = ({
@@ -282,7 +303,9 @@ export const ComparisonStatusIcon = ({
             className = `fa fa-circle-notch ${noSpin ? '' : 'fa-spin'}`;
             break;
     }
-    return (
+    return className.includes('fa-spin') ? (
+        <SpinningIcon color={color} qeId='utils-sync-status-title' />
+    ) : (
         <React.Fragment>
             <i qe-id='utils-sync-status-title' title={title} className={className} style={{color}} /> {label && title}
         </React.Fragment>
@@ -890,7 +913,11 @@ export const HealthStatusIcon = ({state, noSpin}: {state: appModels.HealthStatus
     if (state.message) {
         title = `${state.status}: ${state.message}`;
     }
-    return <i qe-id='utils-health-status-title' title={title} className={'fa ' + icon + ' utils-health-status-icon'} style={{color}} />;
+    return icon.includes('fa-spin') ? (
+        <SpinningIcon color={color} qeId='utils-health-status-title' />
+    ) : (
+        <i qe-id='utils-health-status-title' title={title} className={'fa ' + icon + ' utils-health-status-icon'} style={{color}} />
+    );
 };
 
 export const PodHealthIcon = ({state}: {state: appModels.HealthStatus}) => {
@@ -914,7 +941,11 @@ export const PodHealthIcon = ({state}: {state: appModels.HealthStatus}) => {
     if (state.message) {
         title = `${state.status}: ${state.message}`;
     }
-    return <i qe-id='utils-health-status-title' title={title} className={'fa ' + icon} />;
+    return icon.includes('fa-spin') ? (
+        <SpinningIcon color={'white'} qeId='utils-health-status-title' />
+    ) : (
+        <i qe-id='utils-health-status-title' title={title} className={'fa ' + icon} />
+    );
 };
 
 export const PodPhaseIcon = ({state}: {state: appModels.PodPhase}) => {
@@ -936,7 +967,7 @@ export const PodPhaseIcon = ({state}: {state: appModels.PodPhase}) => {
             className = 'fa fa-question-circle';
             break;
     }
-    return <i qe-id='utils-pod-phase-icon' className={className} />;
+    return className.includes('fa-spin') ? <SpinningIcon color={'white'} qeId='utils-pod-phase-icon' /> : <i qe-id='utils-pod-phase-icon' className={className} />;
 };
 
 export const ResourceResultIcon = ({resource}: {resource: appModels.ResourceResult}) => {
@@ -995,7 +1026,7 @@ export const ResourceResultIcon = ({resource}: {resource: appModels.ResourceResu
         if (resource.message) {
             title = `${resource.hookPhase}: ${resource.message}`;
         }
-        return <i title={title} className={className} style={{color}} />;
+        return className.includes('fa-spin') ? <SpinningIcon color={color} qeId='utils-resource-result-icon' /> : <i title={title} className={className} style={{color}} />;
     }
     return null;
 };
@@ -1568,5 +1599,3 @@ export function getAppUrl(app: appModels.Application): string {
     }
     return `applications/${app.metadata.namespace}/${app.metadata.name}`;
 }
-
-//still trying
diff --git a/ui/src/app/shared/components/spinner.tsx b/ui/src/app/shared/components/spinner.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
 import {COLORS} from './colors';
+import {SpinningIcon} from '../../applications/components/utils';
 
 export const Spinner = ({show, style = {}}: {show: boolean; style?: React.CSSProperties}) =>
     show ? (
         <span style={style}>
-            <i className='fa fa-circle-notch fa-spin' style={{color: COLORS.operation.running}} />
+            <SpinningIcon color={COLORS.operation.running} qeId='Spinnner-icon' />
         </span>
-    ) : null;
+    ) : null;