Skip to content

Commit f529379

Browse files
keithchongkeithchong
committed
feat: Make certain Status panel items look more 'clickable' (#19698)
Signed-off-by: Keith Chong <[email protected]>
1 parent 3baca9b commit f529379

File tree

6 files changed

+55
-18
lines changed

6 files changed

+55
-18
lines changed

‎ui/src/app/applications/components/application-status-panel/application-status-panel.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@
5858
padding: 0 5px;
5959
cursor: pointer;
6060
color: $argo-color-gray-6;
61+
border: 1px solid $argo-color-gray-5;
6162
}
6263

6364
&__item {
@@ -179,6 +180,16 @@
179180
padding-left: 8px;
180181
margin-bottom: 2px;
181182
}
183+
184+
&__status-button {
185+
border-radius: 5px;
186+
padding: 2px;
187+
border: 1px solid $argo-color-gray-5;
188+
&:hover {
189+
background-color: $argo-color-gray-4;
190+
}
191+
}
192+
182193
}
183194

184195
&__hydrator-link {

‎ui/src/app/applications/components/application-status-panel/application-status-panel.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const sectionHeader = (info: SectionInfo, onClick?: () => any) => {
4747
<div style={{display: 'flex', alignItems: 'center', marginBottom: '0.5em'}}>
4848
{sectionLabel(info)}
4949
{onClick && (
50-
<button className='application-status-panel__more-button' onClick={onClick}>
50+
<button className='argo-button application-status-panel__more-button' onClick={onClick}>
5151
<i className='fa fa-ellipsis-h' />
5252
</button>
5353
)}
@@ -140,7 +140,7 @@ export const ApplicationStatusPanel = ({application, showDiff, showOperation, sh
140140
<div>
141141
{application.status.sync.status === models.SyncStatuses.OutOfSync ? (
142142
<a onClick={() => showDiff && showDiff()}>
143-
<ComparisonStatusIcon status={application.status.sync.status} label={true} />
143+
<ComparisonStatusIcon status={application.status.sync.status} label={true} isButton={true} />
144144
</a>
145145
) : (
146146
<ComparisonStatusIcon status={application.status.sync.status} label={true} />
@@ -188,7 +188,7 @@ export const ApplicationStatusPanel = ({application, showDiff, showOperation, sh
188188
)}
189189
<div className={`application-status-panel__item-value application-status-panel__item-value--${appOperationState.phase}`}>
190190
<a onClick={() => showOperation && showOperation()}>
191-
<OperationState app={application} />{' '}
191+
<OperationState app={application} isButton={true} />{' '}
192192
</a>
193193
{appOperationState.syncResult && (appOperationState.syncResult.revision || appOperationState.syncResult.revisions) && (
194194
<div className='application-status-panel__item-value__revision show-for-large'>
@@ -217,17 +217,17 @@ export const ApplicationStatusPanel = ({application, showDiff, showOperation, sh
217217
<div className='application-status-panel__item-value application-status-panel__conditions' onClick={() => showConditions && showConditions()}>
218218
{infos && (
219219
<a className='info'>
220-
<i className='fa fa-info-circle' /> {infos} Info
220+
<i className='fa fa-info-circle application-status-panel__item-value__status-button' /> {infos} Info
221221
</a>
222222
)}
223223
{warnings && (
224224
<a className='warning'>
225-
<i className='fa fa-exclamation-triangle' /> {warnings} Warning{warnings !== 1 && 's'}
225+
<i className='fa fa-exclamation-triangle application-status-panel__item-value__status-button' /> {warnings} Warning{warnings !== 1 && 's'}
226226
</a>
227227
)}
228228
{errors && (
229229
<a className='error'>
230-
<i className='fa fa-exclamation-circle' /> {errors} Error{errors !== 1 && 's'}
230+
<i className='fa fa-exclamation-circle application-status-panel__item-value__status-button' /> {errors} Error{errors !== 1 && 's'}
231231
</a>
232232
)}
233233
</div>

‎ui/src/app/applications/components/utils.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,4 +31,13 @@
3131
i.utils-health-status-icon {
3232
min-width: 13px;
3333
text-align: center;
34+
}
35+
36+
.status-button {
37+
border-radius: 5px;
38+
padding: 2px;
39+
border: 1px solid $argo-color-gray-5;
40+
&:hover {
41+
background-color: $argo-color-gray-4;
42+
}
3443
}

‎ui/src/app/applications/components/utils.tsx‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,7 @@ const PropagationPolicyOption = ReactForm.FormField((props: {fieldApi: ReactForm
196196
);
197197
});
198198

199-
export const OperationPhaseIcon = ({app}: {app: appModels.Application}) => {
199+
export const OperationPhaseIcon = ({app, isButton}: {app: appModels.Application; isButton?: boolean}) => {
200200
const operationState = getAppOperationState(app);
201201
if (operationState === undefined) {
202202
return <React.Fragment />;
@@ -205,15 +205,15 @@ export const OperationPhaseIcon = ({app}: {app: appModels.Application}) => {
205205
let color = '';
206206
switch (operationState.phase) {
207207
case appModels.OperationPhases.Succeeded:
208-
className = 'fa fa-check-circle';
208+
className = `fa fa-check-circle${isButton ? ' status-button' : ''}`;
209209
color = COLORS.operation.success;
210210
break;
211211
case appModels.OperationPhases.Error:
212-
className = 'fa fa-times-circle';
212+
className = `fa fa-times-circle${isButton ? ' status-button' : ''}`;
213213
color = COLORS.operation.error;
214214
break;
215215
case appModels.OperationPhases.Failed:
216-
className = 'fa fa-times-circle';
216+
className = `fa fa-times-circle${isButton ? ' status-button' : ''}`;
217217
color = COLORS.operation.failed;
218218
break;
219219
default:
@@ -251,35 +251,36 @@ export const ComparisonStatusIcon = ({
251251
status,
252252
resource,
253253
label,
254-
noSpin
254+
noSpin,
255+
isButton
255256
}: {
256257
status: appModels.SyncStatusCode;
257258
resource?: {requiresPruning?: boolean};
258259
label?: boolean;
259260
noSpin?: boolean;
261+
isButton?: boolean;
260262
}) => {
261263
let className = 'fas fa-question-circle';
262264
let color = COLORS.sync.unknown;
263265
let title: string = 'Unknown';
264-
265266
switch (status) {
266267
case appModels.SyncStatuses.Synced:
267-
className = 'fa fa-check-circle';
268+
className = `fa fa-check-circle${isButton ? ' status-button' : ''}`;
268269
color = COLORS.sync.synced;
269270
title = 'Synced';
270271
break;
271272
case appModels.SyncStatuses.OutOfSync:
272273
// eslint-disable-next-line no-case-declarations
273274
const requiresPruning = resource && resource.requiresPruning;
274-
className = requiresPruning ? 'fa fa-trash' : 'fa fa-arrow-alt-circle-up';
275+
className = requiresPruning ? `fa fa-trash${isButton ? ' status-button' : ''}` : `fa fa-arrow-alt-circle-up${isButton ? ' status-button' : ''}`;
275276
title = 'OutOfSync';
276277
if (requiresPruning) {
277278
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.)`;
278279
}
279280
color = COLORS.sync.out_of_sync;
280281
break;
281282
case appModels.SyncStatuses.Unknown:
282-
className = `fa fa-circle-notch ${noSpin ? '' : 'fa-spin'}`;
283+
className = `fa fa-circle-notch ${noSpin ? '' : 'fa-spin'}${isButton ? ' status-button' : ''}`;
283284
break;
284285
}
285286
return (
@@ -1055,7 +1056,7 @@ const getOperationStateTitle = (app: appModels.Application) => {
10551056
return 'Unknown';
10561057
};
10571058

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

10671068
return (
10681069
<React.Fragment>
1069-
<OperationPhaseIcon app={app} /> {getOperationStateTitle(app)}
1070+
<OperationPhaseIcon app={app} isButton={isButton} /> {getOperationStateTitle(app)}
10701071
</React.Fragment>
10711072
);
10721073
};

‎ui/src/app/shared/components/__snapshots__/revision.test.tsx.snap‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ exports[`Revision.Branch.Children 1`] = `
77
target="_blank"
88
>
99
foo
10+
11+
<i
12+
className="fa fa-external-link-alt"
13+
/>
1014
</a>
1115
`;
1216

@@ -17,6 +21,10 @@ exports[`Revision.Branch.NoChildren 1`] = `
1721
target="_blank"
1822
>
1923
long-branch-name
24+
25+
<i
26+
className="fa fa-external-link-alt"
27+
/>
2028
</a>
2129
`;
2230

@@ -27,6 +35,10 @@ exports[`Revision.SHA1.Children 1`] = `
2735
target="_blank"
2836
>
2937
foo
38+
39+
<i
40+
className="fa fa-external-link-alt"
41+
/>
3042
</a>
3143
`;
3244

@@ -37,5 +49,9 @@ exports[`Revision.SHA1.NoChildren 1`] = `
3749
target="_blank"
3850
>
3951
24eb0b2
52+
53+
<i
54+
className="fa fa-external-link-alt"
55+
/>
4056
</a>
4157
`;

‎ui/src/app/shared/components/revision.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export const Revision = ({repoUrl, revision, path, isForPath, children}: {repoUr
1515
const content = children || (isSHA(revision) ? revision.substr(0, 7) : revision);
1616
return url !== null ? (
1717
<a href={url} target='_blank' rel='noopener noreferrer'>
18-
{content}
18+
{content} <i className='fa fa-external-link-alt' />
1919
</a>
2020
) : (
2121
<span>{content}</span>

0 commit comments

Comments
 (0)