Merge branch '346793-improve-error-message-when-runner-deletion-fails' into 'master'

Add title to runner delete error alert

See merge request !102535



Merged-by: Miguel Rincon <mrincon@gitlab.com>
Approved-by: Fiona Neill <fneill@gitlab.com>
Approved-by: Rahul Chanila <rchanila@gitlab.com>
Approved-by: Dan Mizzi-Harris <dmizzi-harris@gitlab.com>

app/assets/javascripts/ci/runner/components/runner_delete_button.vue

@@ -2,7 +2,7 @@
 import { GlButton, GlModalDirective, GlTooltipDirective } from '@gitlab/ui';
 import runnerDeleteMutation from '~/ci/runner/graphql/shared/runner_delete.mutation.graphql';
 import { createAlert } from '~/flash';
-import { sprintf } from '~/locale';
+import { sprintf, s__ } from '~/locale';
 import { captureException } from '~/ci/runner/sentry_utils';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { I18N_DELETE_RUNNER, I18N_DELETED_TOAST } from '../constants';
@@ -122,8 +122,11 @@ export default {
     onError(error) {
       this.deleting = false;
       const { message } = error;
+      const title = sprintf(s__('Runner|Runner %{runnerName} failed to delete'), {
+        runnerName: this.runnerName,
+      });
 
-      createAlert({ message });
+      createAlert({ title, message });
       captureException({ error, component: this.$options.name });
     },
   },

locale/gitlab.pot

@@ -35479,6 +35479,9 @@ msgstr ""
 msgid "Runner|Owner"
 msgstr ""
+msgid "Runner|Runner %{runnerName} failed to delete"
+msgstr ""
+
 msgid "Running"
 msgstr ""

spec/frontend/ci/runner/components/runner_delete_button_spec.js

@@ -17,6 +17,7 @@ import { allRunnersData } from '../mock_data';
 
 const mockRunner = allRunnersData.data.runners.nodes[0];
 const mockRunnerId = getIdFromGraphQLId(mockRunner.id);
+const mockRunnerName = `#${mockRunnerId} (${mockRunner.shortSha})`;
 
 Vue.use(VueApollo);
 
@@ -96,7 +97,7 @@ describe('RunnerDeleteButton', () => {
   });
 
   it('Displays a modal with the runner name', () => {
-    expect(findModal().props('runnerName')).toBe(`#${mockRunnerId} (${mockRunner.shortSha})`);
+    expect(findModal().props('runnerName')).toBe(mockRunnerName);
   });
 
   it('Does not have tabindex when button is enabled', () => {
@@ -189,6 +190,10 @@ describe('RunnerDeleteButton', () => {
 
       it('error is shown to the user', () => {
         expect(createAlert).toHaveBeenCalledTimes(1);
+        expect(createAlert).toHaveBeenCalledWith({
+          title: expect.stringContaining(mockRunnerName),
+          message: mockErrorMsg,
+        });
       });
     });
 
@@ -217,6 +222,10 @@ describe('RunnerDeleteButton', () => {
 
       it('error is shown to the user', () => {
         expect(createAlert).toHaveBeenCalledTimes(1);
+        expect(createAlert).toHaveBeenCalledWith({
+          title: expect.stringContaining(mockRunnerName),
+          message: `${mockErrorMsg} ${mockErrorMsg2}`,
+        });
       });
 
       it('does not evict runner from apollo cache', () => {