Merge branch '346459-geo-icon-actions' into 'master'

Geo Sites - Icon Actions

See merge request gitlab-org/gitlab!78410

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

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