Geo Sites - Icon Actions

This change updates the
desktop view actions
of Geo Sites to be
icon buttons with
tooltips rather
than text buttons.

There are no changes
to the Mobile buttons.

Changelog: changed
EE: true

ee/app/assets/javascripts/geo_nodes/components/header/geo_node_actions_desktop.vue

 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlTooltipDirective } from '@gitlab/ui';
 import { mapGetters } from 'vuex';
-import { __ } from '~/locale';
+import { s__ } from '~/locale';
 
 export default {
   name: 'GeoNodeActionsDesktop',
   i18n: {
-    editButtonLabel: __('Edit'),
-    removeButtonLabel: __('Remove'),
+    editButtonTooltip: s__('Geo|Edit %{nodeType} site'),
+    removeButtonTooltip: s__('Geo|Remove %{nodeType} site'),
   },
   components: {
     GlButton,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   props: {
     node: {
       type: Object,
@@ -20,22 +23,32 @@ export default {
   },
   computed: {
     ...mapGetters(['canRemoveNode']),
+    nodeType() {
+      return this.node.primary ? s__('Geo|primary') : s__('Geo|secondary');
+    },
   },
 };
 </script>
 
 <template>
   <div>
-    <gl-button class="gl-mr-3" :href="node.webEditUrl">{{
-      $options.i18n.editButtonLabel
-    }}</gl-button>
     <gl-button
-      variant="danger"
-      category="secondary"
+      v-gl-tooltip
+      :title="sprintf($options.i18n.editButtonTooltip, { nodeType })"
+      :aria-label="sprintf($options.i18n.editButtonTooltip, { nodeType })"
+      icon="pencil"
+      class="gl-mr-3"
+      data-testid="geo-desktop-edit-action"
+      :href="node.webEditUrl"
+    />
+    <gl-button
+      v-gl-tooltip
+      :title="sprintf($options.i18n.removeButtonTooltip, { nodeType })"
+      :aria-label="sprintf($options.i18n.removeButtonTooltip, { nodeType })"
+      icon="remove"
       :disabled="!canRemoveNode(node.id)"
       data-testid="geo-desktop-remove-action"
       @click="$emit('remove')"
-      >{{ $options.i18n.removeButtonLabel }}</gl-button
-    >
+    />
   </div>
 </template>

ee/spec/frontend/geo_nodes/components/header/geo_node_actions_desktop_spec.js

@@ -39,6 +39,7 @@ describe('GeoNodeActionsDesktop', () => {
   });
 
   const findGeoDesktopActionsButtons = () => wrapper.findAllComponents(GlButton);
+  const findGeoDesktopActionsEditButton = () => wrapper.findByTestId('geo-desktop-edit-action');
   const findGeoDesktopActionsRemoveButton = () => wrapper.findByTestId('geo-desktop-remove-action');
 
   describe('template', () => {
@@ -47,11 +48,10 @@ describe('GeoNodeActionsDesktop', () => {
         createComponent();
       });
 
-      it('renders an Edit and Remove button', () => {
-        expect(findGeoDesktopActionsButtons().wrappers.map((w) => w.text())).toStrictEqual([
-          'Edit',
-          'Remove',
-        ]);
+      it('renders an Edit and Remove button icon', () => {
+        expect(
+          findGeoDesktopActionsButtons().wrappers.map((w) => w.attributes('icon')),
+        ).toStrictEqual(['pencil', 'remove']);
       });
 
       it('renders edit link correctly', () => {
@@ -82,5 +82,27 @@ describe('GeoNodeActionsDesktop', () => {
         });
       });
     });
+
+    describe.each`
+      primary  | editTooltip              | removeTooltip
+      ${false} | ${'Edit secondary site'} | ${'Remove secondary site'}
+      ${true}  | ${'Edit primary site'}   | ${'Remove primary site'}
+    `('action tooltips', ({ primary, editTooltip, removeTooltip }) => {
+      describe(`when node is ${primary ? '' : ' not'} a primary node`, () => {
+        beforeEach(() => {
+          createComponent({ node: { ...MOCK_NODES[0], primary } });
+        });
+
+        it(`sets edit tooltip to ${editTooltip}`, () => {
+          expect(findGeoDesktopActionsEditButton().attributes('title')).toBe(editTooltip);
+          expect(findGeoDesktopActionsEditButton().attributes('aria-label')).toBe(editTooltip);
+        });
+
+        it(`sets remove tooltip to ${removeTooltip}`, () => {
+          expect(findGeoDesktopActionsRemoveButton().attributes('title')).toBe(removeTooltip);
+          expect(findGeoDesktopActionsRemoveButton().attributes('aria-label')).toBe(removeTooltip);
+        });
+      });
+    });
   });
 });

locale/gitlab.pot

@@ -15719,6 +15719,9 @@ msgstr ""
 msgid "Geo|Does not match the primary storage configuration"
 msgstr ""
 
+msgid "Geo|Edit %{nodeType} site"
+msgstr ""
+
 msgid "Geo|Failed"
 msgstr ""
 
@@ -15848,6 +15851,9 @@ msgstr ""
 msgid "Geo|Remove"
 msgstr ""
 
+msgid "Geo|Remove %{nodeType} site"
+msgstr ""
+
 msgid "Geo|Remove entry"
 msgstr ""