Improve error handling of runner instructions

This change improves the error handling when instructions cannot be
loaded or are empty.

It also fixes an edge case for sub-groups.

app/assets/javascripts/vue_shared/components/runner_instructions/runner_instructions.vue

@@ -9,6 +9,7 @@ import {
   GlDropdownItem,
   GlIcon,
 } from '@gitlab/ui';
+import { isEmpty } from 'lodash';
 import { __, s__ } from '~/locale';
 import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
 import {
@@ -79,7 +80,7 @@ export default {
       return Object.keys(this.selectedPlatform).length > 0;
     },
     instructionsEmpty() {
-      return Object.keys(this.instructions).length === 0;
+      return isEmpty(this.instructions);
     },
     groupId() {
       return this.group?.id ?? '';
@@ -212,10 +213,7 @@ export default {
             <pre
               class="gl-bg-gray gl-flex-fill-1 gl-white-space-pre-line"
               data-testid="binary-instructions"
-            >
-
-            {{ instructions.installInstructions }}
-          </pre
+              >{{ instructions.installInstructions }}</pre
             >
             <modal-copy-button
               :title="$options.i18n.copyInstructions"

app/views/groups/runners/_group_runners.html.haml

@@ -19,5 +19,5 @@
                      type: 'group',
                      reset_token_url: reset_registration_token_group_settings_ci_cd_path,
                      project_path: '',
-                     group_path: @group.path }
+                     group_path: @group.full_path }
   %br

changelogs/unreleased/326018-handle-missing-instruction-error.yml

+---
+title: Display error message when runner installation instructions modal cannot be
+  loaded correctly
+merge_request: 57588
+author:
+type: fixed

spec/frontend/vue_shared/components/runner_instructions/runner_instructions_spec.js

+import { GlAlert } from '@gitlab/ui';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
@@ -14,7 +15,10 @@ localVue.use(VueApollo);
 describe('RunnerInstructions component', () => {
   let wrapper;
   let fakeApollo;
+  let runnerPlatformsHandler;
+  let runnerSetupInstructionsHandler;
 
+  const findAlert = () => wrapper.findComponent(GlAlert);
   const findModalButton = () => wrapper.find('[data-testid="show-modal-button"]');
   const findPlatformButtons = () => wrapper.findAll('[data-testid="platform-button"]');
   const findArchitectureDropdownItems = () =>
@@ -22,10 +26,10 @@ describe('RunnerInstructions component', () => {
   const findBinaryInstructionsSection = () => wrapper.find('[data-testid="binary-instructions"]');
   const findRunnerInstructionsSection = () => wrapper.find('[data-testid="runner-instructions"]');
 
-  beforeEach(async () => {
+  const createComponent = () => {
     const requestHandlers = [
-      [getRunnerPlatforms, jest.fn().mockResolvedValue(mockGraphqlRunnerPlatforms)],
-      [getRunnerSetupInstructions, jest.fn().mockResolvedValue(mockGraphqlInstructions)],
+      [getRunnerPlatforms, runnerPlatformsHandler],
+      [getRunnerSetupInstructions, runnerSetupInstructionsHandler],
     ];
 
     fakeApollo = createMockApollo(requestHandlers);
@@ -37,6 +41,13 @@ describe('RunnerInstructions component', () => {
       localVue,
       apolloProvider: fakeApollo,
     });
+  };
+
+  beforeEach(async () => {
+    runnerPlatformsHandler = jest.fn().mockResolvedValue(mockGraphqlRunnerPlatforms);
+    runnerSetupInstructionsHandler = jest.fn().mockResolvedValue(mockGraphqlInstructions);
+
+    createComponent();
 
     await wrapper.vm.$nextTick();
   });
@@ -46,6 +57,10 @@ describe('RunnerInstructions component', () => {
     wrapper = null;
   });
 
+  it('should not show alert', () => {
+    expect(findAlert().exists()).toBe(false);
+  });
+
   it('should show the "Show Runner installation instructions" button', () => {
     const button = findModalButton();
 
@@ -110,4 +125,23 @@ describe('RunnerInstructions component', () => {
 
     expect(runner.text()).toMatch(mockGraphqlInstructions.data.runnerSetup.registerInstructions);
   });
+
+  describe('when instructions cannot be loaded', () => {
+    beforeEach(async () => {
+      runnerSetupInstructionsHandler.mockRejectedValue();
+
+      createComponent();
+
+      await wrapper.vm.$nextTick();
+    });
+
+    it('should show alert', () => {
+      expect(findAlert().exists()).toBe(true);
+    });
+
+    it('should not show instructions', () => {
+      expect(findBinaryInstructionsSection().exists()).toBe(false);
+      expect(findRunnerInstructionsSection().exists()).toBe(false);
+    });
+  });
 });