Merge branch 'nhxnguyen-geo-ui-336083' into 'master'

Geo Admin UI visual improvements

See merge request gitlab-org/gitlab!72035

ee/app/assets/javascripts/geo_nodes/components/details/secondary_node/geo_node_replication_details.vue

@@ -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"

ee/app/assets/javascripts/geo_nodes/components/details/secondary_node/geo_node_replication_status.vue

@@ -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"

ee/app/assets/javascripts/geo_nodes/components/details/secondary_node/geo_node_secondary_other_info.vue

@@ -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>

ee/app/assets/javascripts/geo_nodes/constants.js

@@ -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'),
   },

ee/spec/frontend/geo_nodes/components/details/secondary_node/geo_node_replication_status_spec.js

@@ -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);