diff --git a/ui/src/app/applications/components/__snapshots__/utils.test.tsx.snap b/ui/src/app/applications/components/__snapshots__/utils.test.tsx.snap index 81af34d623984..fcdf464603a7c 100644 --- 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`] = ` -[ - , - " ", -] + } + viewBox="0 0 512 512" + xmlns="http://www.w3.org/2000/svg" +> + + `; exports[`HealthStatusIcon.Degraded 1`] = ` @@ -88,16 +91,22 @@ exports[`HealthStatusIcon.Missing 1`] = ` `; exports[`HealthStatusIcon.Progressing 1`] = ` - + viewBox="0 0 512 512" + xmlns="http://www.w3.org/2000/svg" +> + + `; exports[`HealthStatusIcon.Suspended 1`] = ` @@ -128,16 +137,22 @@ exports[`HealthStatusIcon.Unknown 1`] = ` exports[`OperationState.Deleting 1`] = ` [ - , + viewBox="0 0 512 512" + xmlns="http://www.w3.org/2000/svg" + > + + , " ", "Deleting", ] @@ -196,16 +211,22 @@ exports[`OperationState.Sync failed 1`] = ` exports[`OperationState.Syncing 1`] = ` [ - , + viewBox="0 0 512 512" + xmlns="http://www.w3.org/2000/svg" + > + + , " ", "Syncing", ] @@ -213,16 +234,22 @@ exports[`OperationState.Syncing 1`] = ` exports[`OperationState.Unknown 1`] = ` [ - , + viewBox="0 0 512 512" + xmlns="http://www.w3.org/2000/svg" + > + + , " ", "Unknown", ] @@ -255,15 +282,22 @@ exports[`ResourceResultIcon.Hook.Failed 1`] = ` `; exports[`ResourceResultIcon.Hook.Running 1`] = ` - + viewBox="0 0 512 512" + xmlns="http://www.w3.org/2000/svg" +> + + `; exports[`ResourceResultIcon.Hook.Succeeded 1`] = ` @@ -278,14 +312,22 @@ exports[`ResourceResultIcon.Hook.Succeeded 1`] = ` `; exports[`ResourceResultIcon.Hook.Terminating 1`] = ` - + viewBox="0 0 512 512" + xmlns="http://www.w3.org/2000/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 index c70379b2c0491..72386f0b40b2c 100644 --- 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 @@ -414,7 +414,7 @@ &__node-status-icon { font-size: 0.8em; - i { + i, svg { margin-right: 2px; } } diff --git a/ui/src/app/applications/components/utils.scss b/ui/src/app/applications/components/utils.scss index a52ddf6d9bda2..197bcfc87ab42 100644 --- a/ui/src/app/applications/components/utils.scss +++ b/ui/src/app/applications/components/utils.scss @@ -43,3 +43,20 @@ i.utils-health-status-icon { background-color: $argo-color-gray-4; } } + +.icon.spin { + animation: spin 2s linear infinite; + width: 0.5em; + height: 0.5em; + vertical-align: -0.05em; + overflow: visible; +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} diff --git a/ui/src/app/applications/components/utils.test.tsx b/ui/src/app/applications/components/utils.test.tsx index 2f42d34b0b42d..a64244c61bfba 100644 --- a/ui/src/app/applications/components/utils.test.tsx +++ b/ui/src/app/applications/components/utils.test.tsx @@ -758,4 +758,4 @@ status: expect(reason).toBe('SchedulingGated'); }); -}); +}); \ No newline at end of file diff --git a/ui/src/app/applications/components/utils.tsx b/ui/src/app/applications/components/utils.tsx index c7d054a2032af..8410c2fcdb779 100644 --- a/ui/src/app/applications/components/utils.tsx +++ b/ui/src/app/applications/components/utils.tsx @@ -49,6 +49,22 @@ export function helpTip(text: string) { ); } + +//CLassic Solid circle-notch icon +// +//this will replace all fa-spin icons as they are currently misbehaving with no fix available. + +export const SpinningIcon = ({color, qeId}: {color: string; qeId: string}) => { + return ( + + + + ); +}; + export async function deleteApplication(appName: string, appNamespace: string, apis: ContextApis): Promise { let confirmed = false; const propagationPolicies: {name: string; message: string}[] = [ @@ -221,7 +237,11 @@ export const OperationPhaseIcon = ({app, isButton}: {app: appModels.Application; color = COLORS.operation.running; break; } - return ; + return className.includes('fa-spin') ? ( + + ) : ( + + ); }; export const HydrateOperationPhaseIcon = ({operationState, isButton}: {operationState?: appModels.HydrateOperation; isButton?: boolean}) => { @@ -244,7 +264,11 @@ export const HydrateOperationPhaseIcon = ({operationState, isButton}: {operation color = COLORS.operation.running; break; } - return ; + return className.includes('fa-spin') ? ( + + ) : ( + + ); }; export const ComparisonStatusIcon = ({ @@ -283,7 +307,9 @@ export const ComparisonStatusIcon = ({ className = `fa fa-circle-notch ${noSpin ? '' : 'fa-spin'}${isButton ? ' status-button' : ''}`; break; } - return ( + return className.includes('fa-spin') ? ( + + ) : ( {label && title} @@ -892,7 +918,11 @@ export const HealthStatusIcon = ({state, noSpin}: {state: appModels.HealthStatus if (state.message) { title = `${state.status}: ${state.message}`; } - return ; + return icon.includes('fa-spin') ? ( + + ) : ( + + ); }; export const PodHealthIcon = ({state}: {state: appModels.HealthStatus}) => { @@ -916,7 +946,11 @@ export const PodHealthIcon = ({state}: {state: appModels.HealthStatus}) => { if (state.message) { title = `${state.status}: ${state.message}`; } - return ; + return icon.includes('fa-spin') ? ( + + ) : ( + + ); }; export const PodPhaseIcon = ({state}: {state: appModels.PodPhase}) => { @@ -938,7 +972,7 @@ export const PodPhaseIcon = ({state}: {state: appModels.PodPhase}) => { className = 'fa fa-question-circle'; break; } - return ; + return className.includes('fa-spin') ? : ; }; export const ResourceResultIcon = ({resource}: {resource: appModels.ResourceResult}) => { @@ -997,7 +1031,7 @@ export const ResourceResultIcon = ({resource}: {resource: appModels.ResourceResu if (resource.message) { title = `${resource.hookPhase}: ${resource.message}`; } - return ; + return className.includes('fa-spin') ? : ; } return null; }; diff --git a/ui/src/app/shared/components/spinner.tsx b/ui/src/app/shared/components/spinner.tsx index 374874b5c6478..4f222e1bddfd8 100644 --- 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 ? ( - + ) : null;