Commit 166df959 authored by Nick Nguyen's avatar Nick Nguyen

Make cosmetic improvements to Geo Admin UI

* Remove replication status icon from Geo admin UI
* Style time ago text
* Decrease replication details dropdown margin

Changelog: changed
EE: true
parent e38fab34
...@@ -73,7 +73,7 @@ export default { ...@@ -73,7 +73,7 @@ export default {
class="gl-display-flex gl-align-items-center gl-cursor-pointer gl-py-5 gl-border-b-1 gl-border-b-solid gl-border-b-gray-100 gl-border-t-1 gl-border-t-solid gl-border-t-gray-100" class="gl-display-flex gl-align-items-center gl-cursor-pointer gl-py-5 gl-border-b-1 gl-border-b-solid gl-border-b-gray-100 gl-border-t-1 gl-border-t-solid gl-border-t-gray-100"
> >
<gl-button <gl-button
class="gl-mr-3 gl-p-0!" class="gl-mr-1 gl-p-0!"
category="tertiary" category="tertiary"
variant="confirm" variant="confirm"
:icon="chevronIcon" :icon="chevronIcon"
......
...@@ -31,11 +31,6 @@ export default { ...@@ -31,11 +31,6 @@ export default {
<template> <template>
<div class="gl-display-flex gl-align-items-center"> <div class="gl-display-flex gl-align-items-center">
<gl-icon
:name="replicationStatusUi.icon"
:class="replicationStatusUi.color"
data-testid="replication-status-icon"
/>
<span <span
class="gl-font-weight-bold" class="gl-font-weight-bold"
:class="replicationStatusUi.color" :class="replicationStatusUi.color"
......
...@@ -17,6 +17,7 @@ export default { ...@@ -17,6 +17,7 @@ export default {
unknown: __('Unknown'), unknown: __('Unknown'),
ok: __('OK'), ok: __('OK'),
}, },
classTimestamp: 'gl-text-gray-500 gl-font-sm gl-font-weight-normal',
components: { components: {
GlCard, GlCard,
GlSprintf, GlSprintf,
...@@ -84,11 +85,13 @@ export default { ...@@ -84,11 +85,13 @@ export default {
<div class="gl-font-weight-bold gl-mt-2" data-testid="last-event"> <div class="gl-font-weight-bold gl-mt-2" data-testid="last-event">
<template v-if="hasEventInfo"> <template v-if="hasEventInfo">
<span v-if="node.lastEventId">{{ node.lastEventId }}</span> <span v-if="node.lastEventId">{{ node.lastEventId }}</span>
<gl-sprintf v-if="lastEventTimestamp" :message="$options.i18n.lastEventTime"> <span v-if="lastEventTimestamp" :class="$options.classTimestamp">
<template #timeAgo> <gl-sprintf :message="$options.i18n.lastEventTime">
<time-ago :time="lastEventTimestamp" /> <template #timeAgo>
</template> <time-ago :time="lastEventTimestamp" />
</gl-sprintf> </template>
</gl-sprintf>
</span>
</template> </template>
<span v-else>{{ $options.i18n.unknown }}</span> <span v-else>{{ $options.i18n.unknown }}</span>
</div> </div>
...@@ -98,11 +101,13 @@ export default { ...@@ -98,11 +101,13 @@ export default {
<div class="gl-font-weight-bold gl-mt-2" data-testid="last-cursor-event"> <div class="gl-font-weight-bold gl-mt-2" data-testid="last-cursor-event">
<template v-if="hasCursorEventInfo"> <template v-if="hasCursorEventInfo">
<span v-if="node.cursorLastEventId">{{ node.cursorLastEventId }}</span> <span v-if="node.cursorLastEventId">{{ node.cursorLastEventId }}</span>
<gl-sprintf v-if="lastCursorEventTimestamp" :message="$options.i18n.lastEventTime"> <span v-if="lastCursorEventTimestamp" :class="$options.classTimestamp">
<template #timeAgo> <gl-sprintf :message="$options.i18n.lastEventTime">
<time-ago :time="lastCursorEventTimestamp" /> <template #timeAgo>
</template> <time-ago :time="lastCursorEventTimestamp" />
</gl-sprintf> </template>
</gl-sprintf>
</span>
</template> </template>
<span v-else>{{ $options.i18n.unknown }}</span> <span v-else>{{ $options.i18n.unknown }}</span>
</div> </div>
......
...@@ -57,12 +57,10 @@ export const HEALTH_STATUS_UI = { ...@@ -57,12 +57,10 @@ export const HEALTH_STATUS_UI = {
export const REPLICATION_STATUS_UI = { export const REPLICATION_STATUS_UI = {
enabled: { enabled: {
icon: 'play',
color: 'gl-text-green-600', color: 'gl-text-green-600',
text: __('Enabled'), text: __('Enabled'),
}, },
disabled: { disabled: {
icon: 'pause',
color: 'gl-text-orange-600', color: 'gl-text-orange-600',
text: __('Paused'), text: __('Paused'),
}, },
......
...@@ -27,7 +27,6 @@ describe('GeoNodeReplicationStatus', () => { ...@@ -27,7 +27,6 @@ describe('GeoNodeReplicationStatus', () => {
wrapper.destroy(); wrapper.destroy();
}); });
const findReplicationStatusIcon = () => wrapper.findByTestId('replication-status-icon');
const findReplicationStatusText = () => wrapper.findByTestId('replication-status-text'); const findReplicationStatusText = () => wrapper.findByTestId('replication-status-text');
const findQuestionIcon = () => wrapper.find({ ref: 'replicationStatus' }); const findQuestionIcon = () => wrapper.find({ ref: 'replicationStatus' });
const findGlPopover = () => wrapper.findComponent(GlPopover); const findGlPopover = () => wrapper.findComponent(GlPopover);
...@@ -39,10 +38,6 @@ describe('GeoNodeReplicationStatus', () => { ...@@ -39,10 +38,6 @@ describe('GeoNodeReplicationStatus', () => {
createComponent(); createComponent();
}); });
it('renders the replication status icon', () => {
expect(findReplicationStatusIcon().exists()).toBe(true);
});
it('renders the replication status text', () => { it('renders the replication status text', () => {
expect(findReplicationStatusText().exists()).toBe(true); expect(findReplicationStatusText().exists()).toBe(true);
}); });
...@@ -72,11 +67,6 @@ describe('GeoNodeReplicationStatus', () => { ...@@ -72,11 +67,6 @@ describe('GeoNodeReplicationStatus', () => {
}); });
describe(`when enabled is ${enabled}`, () => { describe(`when enabled is ${enabled}`, () => {
it(`renders the replication status icon correctly`, () => {
expect(findReplicationStatusIcon().classes(uiData.color)).toBe(true);
expect(findReplicationStatusIcon().attributes('name')).toBe(uiData.icon);
});
it(`renders the replication status text correctly`, () => { it(`renders the replication status text correctly`, () => {
expect(findReplicationStatusText().classes(uiData.color)).toBe(true); expect(findReplicationStatusText().classes(uiData.color)).toBe(true);
expect(findReplicationStatusText().text()).toBe(uiData.text); expect(findReplicationStatusText().text()).toBe(uiData.text);
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment