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 {
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
class="gl-mr-3 gl-p-0!"
class="gl-mr-1 gl-p-0!"
category="tertiary"
variant="confirm"
:icon="chevronIcon"
......
......@@ -31,11 +31,6 @@ export default {
<template>
<div class="gl-display-flex gl-align-items-center">
<gl-icon
:name="replicationStatusUi.icon"
:class="replicationStatusUi.color"
data-testid="replication-status-icon"
/>
<span
class="gl-font-weight-bold"
:class="replicationStatusUi.color"
......
......@@ -17,6 +17,7 @@ export default {
unknown: __('Unknown'),
ok: __('OK'),
},
classTimestamp: 'gl-text-gray-500 gl-font-sm gl-font-weight-normal',
components: {
GlCard,
GlSprintf,
......@@ -84,11 +85,13 @@ export default {
<div class="gl-font-weight-bold gl-mt-2" data-testid="last-event">
<template v-if="hasEventInfo">
<span v-if="node.lastEventId">{{ node.lastEventId }}</span>
<gl-sprintf v-if="lastEventTimestamp" :message="$options.i18n.lastEventTime">
<template #timeAgo>
<time-ago :time="lastEventTimestamp" />
</template>
</gl-sprintf>
<span v-if="lastEventTimestamp" :class="$options.classTimestamp">
<gl-sprintf :message="$options.i18n.lastEventTime">
<template #timeAgo>
<time-ago :time="lastEventTimestamp" />
</template>
</gl-sprintf>
</span>
</template>
<span v-else>{{ $options.i18n.unknown }}</span>
</div>
......@@ -98,11 +101,13 @@ export default {
<div class="gl-font-weight-bold gl-mt-2" data-testid="last-cursor-event">
<template v-if="hasCursorEventInfo">
<span v-if="node.cursorLastEventId">{{ node.cursorLastEventId }}</span>
<gl-sprintf v-if="lastCursorEventTimestamp" :message="$options.i18n.lastEventTime">
<template #timeAgo>
<time-ago :time="lastCursorEventTimestamp" />
</template>
</gl-sprintf>
<span v-if="lastCursorEventTimestamp" :class="$options.classTimestamp">
<gl-sprintf :message="$options.i18n.lastEventTime">
<template #timeAgo>
<time-ago :time="lastCursorEventTimestamp" />
</template>
</gl-sprintf>
</span>
</template>
<span v-else>{{ $options.i18n.unknown }}</span>
</div>
......
......@@ -57,12 +57,10 @@ export const HEALTH_STATUS_UI = {
export const REPLICATION_STATUS_UI = {
enabled: {
icon: 'play',
color: 'gl-text-green-600',
text: __('Enabled'),
},
disabled: {
icon: 'pause',
color: 'gl-text-orange-600',
text: __('Paused'),
},
......
......@@ -27,7 +27,6 @@ describe('GeoNodeReplicationStatus', () => {
wrapper.destroy();
});
const findReplicationStatusIcon = () => wrapper.findByTestId('replication-status-icon');
const findReplicationStatusText = () => wrapper.findByTestId('replication-status-text');
const findQuestionIcon = () => wrapper.find({ ref: 'replicationStatus' });
const findGlPopover = () => wrapper.findComponent(GlPopover);
......@@ -39,10 +38,6 @@ describe('GeoNodeReplicationStatus', () => {
createComponent();
});
it('renders the replication status icon', () => {
expect(findReplicationStatusIcon().exists()).toBe(true);
});
it('renders the replication status text', () => {
expect(findReplicationStatusText().exists()).toBe(true);
});
......@@ -72,11 +67,6 @@ describe('GeoNodeReplicationStatus', () => {
});
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`, () => {
expect(findReplicationStatusText().classes(uiData.color)).toBe(true);
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