Skip to content

feat: Make certain Status panel items look more 'clickable' (#19698) #22232

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ishitasequeira merged 3 commits into from
Mar 11, 2025
Merged

feat: Make certain Status panel items look more 'clickable' (#19698) #22232

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f529379
feat: Make certain Status panel items look more 'clickable' (#19698)
keithchong Mar 6, 2025
300af09
Fix off-centered buttons; update status for hydrate status (#19698)
keithchong Mar 7, 2025
79b3686
Add empty line (#19698)
keithchong Mar 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions ui/src/app/applications/components/application-status-panel/application-status-panel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@
padding: 0 5px;
cursor: pointer;
color: $argo-color-gray-6;
border: 1px solid $argo-color-gray-5;
}

&__item {
Expand Down Expand Up @@ -179,6 +180,16 @@
padding-left: 8px;
margin-bottom: 2px;
}

&__status-button {
border-radius: 5px;
padding: 2px;
border: 1px solid $argo-color-gray-5;
&:hover {
background-color: $argo-color-gray-4;
}
}

}

&__hydrator-link {
Expand Down
12 changes: 6 additions & 6 deletions ui/src/app/applications/components/application-status-panel/application-status-panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ const sectionHeader = (info: SectionInfo, onClick?: () => any) => {
<div style={{display: 'flex', alignItems: 'center', marginBottom: '0.5em'}}>
{sectionLabel(info)}
{onClick && (
<button className='application-status-panel__more-button' onClick={onClick}>
<button className='argo-button application-status-panel__more-button' onClick={onClick}>
<i className='fa fa-ellipsis-h' />
</button>
)}
Expand Down Expand Up @@ -140,7 +140,7 @@ export const ApplicationStatusPanel = ({application, showDiff, showOperation, sh
<div>
{application.status.sync.status === models.SyncStatuses.OutOfSync ? (
<a onClick={() => showDiff && showDiff()}>
<ComparisonStatusIcon status={application.status.sync.status} label={true} />
<ComparisonStatusIcon status={application.status.sync.status} label={true} isButton={true} />
</a>
) : (
<ComparisonStatusIcon status={application.status.sync.status} label={true} />
Expand Down Expand Up @@ -188,7 +188,7 @@ export const ApplicationStatusPanel = ({application, showDiff, showOperation, sh
)}
<div className={`application-status-panel__item-value application-status-panel__item-value--${appOperationState.phase}`}>
<a onClick={() => showOperation && showOperation()}>
<OperationState app={application} />{' '}
<OperationState app={application} isButton={true} />{' '}
</a>
{appOperationState.syncResult && (appOperationState.syncResult.revision || appOperationState.syncResult.revisions) && (
<div className='application-status-panel__item-value__revision show-for-large'>
Expand Down Expand Up @@ -217,17 +217,17 @@ export const ApplicationStatusPanel = ({application, showDiff, showOperation, sh
<div className='application-status-panel__item-value application-status-panel__conditions' onClick={() => showConditions && showConditions()}>
{infos && (
<a className='info'>
<i className='fa fa-info-circle' /> {infos} Info
<i className='fa fa-info-circle application-status-panel__item-value__status-button' /> {infos} Info
</a>
)}
{warnings && (
<a className='warning'>
<i className='fa fa-exclamation-triangle' /> {warnings} Warning{warnings !== 1 && 's'}
<i className='fa fa-exclamation-triangle application-status-panel__item-value__status-button' /> {warnings} Warning{warnings !== 1 && 's'}
</a>
)}
{errors && (
<a className='error'>
<i className='fa fa-exclamation-circle' /> {errors} Error{errors !== 1 && 's'}
<i className='fa fa-exclamation-circle application-status-panel__item-value__status-button' /> {errors} Error{errors !== 1 && 's'}
</a>
)}
</div>
Expand Down
9 changes: 9 additions & 0 deletions ui/src/app/applications/components/utils.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,4 +31,13 @@
i.utils-health-status-icon {
min-width: 13px;
text-align: center;
}

.status-button {
border-radius: 5px;
padding: 2px;
border: 1px solid $argo-color-gray-5;
&:hover {
background-color: $argo-color-gray-4;
}
}
23 changes: 12 additions & 11 deletions ui/src/app/applications/components/utils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,7 @@ const PropagationPolicyOption = ReactForm.FormField((props: {fieldApi: ReactForm
);
});

export const OperationPhaseIcon = ({app}: {app: appModels.Application}) => {
export const OperationPhaseIcon = ({app, isButton}: {app: appModels.Application; isButton?: boolean}) => {
const operationState = getAppOperationState(app);
if (operationState === undefined) {
return <React.Fragment />;
Expand All @@ -205,15 +205,15 @@ export const OperationPhaseIcon = ({app}: {app: appModels.Application}) => {
let color = '';
switch (operationState.phase) {
case appModels.OperationPhases.Succeeded:
className = 'fa fa-check-circle';
className = `fa fa-check-circle${isButton ? ' status-button' : ''}`;
color = COLORS.operation.success;
break;
case appModels.OperationPhases.Error:
className = 'fa fa-times-circle';
className = `fa fa-times-circle${isButton ? ' status-button' : ''}`;
color = COLORS.operation.error;
break;
case appModels.OperationPhases.Failed:
className = 'fa fa-times-circle';
className = `fa fa-times-circle${isButton ? ' status-button' : ''}`;
color = COLORS.operation.failed;
break;
default:
Expand Down Expand Up @@ -251,35 +251,36 @@ export const ComparisonStatusIcon = ({
status,
resource,
label,
noSpin
noSpin,
isButton
}: {
status: appModels.SyncStatusCode;
resource?: {requiresPruning?: boolean};
label?: boolean;
noSpin?: boolean;
isButton?: boolean;
}) => {
let className = 'fas fa-question-circle';
let color = COLORS.sync.unknown;
let title: string = 'Unknown';

switch (status) {
case appModels.SyncStatuses.Synced:
className = 'fa fa-check-circle';
className = `fa fa-check-circle${isButton ? ' status-button' : ''}`;
color = COLORS.sync.synced;
title = 'Synced';
break;
case appModels.SyncStatuses.OutOfSync:
// eslint-disable-next-line no-case-declarations
const requiresPruning = resource && resource.requiresPruning;
className = requiresPruning ? 'fa fa-trash' : 'fa fa-arrow-alt-circle-up';
className = requiresPruning ? `fa fa-trash${isButton ? ' status-button' : ''}` : `fa fa-arrow-alt-circle-up${isButton ? ' status-button' : ''}`;
title = 'OutOfSync';
if (requiresPruning) {
title = `${title} (This resource is not present in the application's source. It will be deleted from Kubernetes if the prune option is enabled during sync.)`;
}
color = COLORS.sync.out_of_sync;
break;
case appModels.SyncStatuses.Unknown:
className = `fa fa-circle-notch ${noSpin ? '' : 'fa-spin'}`;
className = `fa fa-circle-notch ${noSpin ? '' : 'fa-spin'}${isButton ? ' status-button' : ''}`;
break;
}
return (
Expand Down Expand Up @@ -1055,7 +1056,7 @@ const getOperationStateTitle = (app: appModels.Application) => {
return 'Unknown';
};

export const OperationState = ({app, quiet}: {app: appModels.Application; quiet?: boolean}) => {
export const OperationState = ({app, quiet, isButton}: {app: appModels.Application; quiet?: boolean; isButton?: boolean}) => {
const appOperationState = getAppOperationState(app);
if (appOperationState === undefined) {
return <React.Fragment />;
Expand All @@ -1066,7 +1067,7 @@ export const OperationState = ({app, quiet}: {app: appModels.Application; quiet?

return (
<React.Fragment>
<OperationPhaseIcon app={app} /> {getOperationStateTitle(app)}
<OperationPhaseIcon app={app} isButton={isButton} /> {getOperationStateTitle(app)}
</React.Fragment>
);
};
Expand Down
16 changes: 16 additions & 0 deletions ui/src/app/shared/components/__snapshots__/revision.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ exports[`Revision.Branch.Children 1`] = `
target="_blank"
>
foo

<i
className="fa fa-external-link-alt"
/>
</a>
`;

Expand All @@ -17,6 +21,10 @@ exports[`Revision.Branch.NoChildren 1`] = `
target="_blank"
>
long-branch-name

<i
className="fa fa-external-link-alt"
/>
</a>
`;

Expand All @@ -27,6 +35,10 @@ exports[`Revision.SHA1.Children 1`] = `
target="_blank"
>
foo

<i
className="fa fa-external-link-alt"
/>
</a>
`;

Expand All @@ -37,5 +49,9 @@ exports[`Revision.SHA1.NoChildren 1`] = `
target="_blank"
>
24eb0b2

<i
className="fa fa-external-link-alt"
/>
</a>
`;
2 changes: 1 addition & 1 deletion ui/src/app/shared/components/revision.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export const Revision = ({repoUrl, revision, path, isForPath, children}: {repoUr
const content = children || (isSHA(revision) ? revision.substr(0, 7) : revision);
return url !== null ? (
<a href={url} target='_blank' rel='noopener noreferrer'>
{content}
{content} <i className='fa fa-external-link-alt' />
</a>
) : (
<span>{content}</span>
Expand Down
Loading