Add GlAlert component

This replaces the createFlash call for the GlAlert
component, updates some vuex related code and tests

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

 <script>
 import {
+  GlAlert,
   GlButton,
   GlModal,
   GlModalDirective,
@@ -13,6 +14,7 @@ import { __, s__ } from '~/locale';
 
 export default {
   components: {
+    GlAlert,
     GlButton,
     GlButtonGroup,
     GlDropdown,
@@ -28,6 +30,7 @@ export default {
       'availablePlatforms',
       'instructions',
       'selectedArchitecture',
+      'showAlert',
     ]),
     ...mapGetters('installRunnerPopup', [
       'getSupportedArchitectures',
@@ -53,6 +56,7 @@ export default {
       'requestPlatforms',
       'selectPlatform',
       'startInstructionsRequest',
+      'toggleAlert',
     ]),
   },
   modalId: 'installation-instructions-modal',
@@ -63,6 +67,7 @@ export default {
     downloadLatestBinary: s__('Runners|Download Latest Binary'),
     registerRunner: s__('Runners|Register Runner'),
     method: __('Method'),
+    genericError: __('An error has occurred'),
   },
 };
 </script>
@@ -76,6 +81,9 @@ export default {
       :title="$options.i18n.installARunner"
       :action-secondary="closeButton"
     >
+      <gl-alert v-if="showAlert" variant="danger" @dismiss="toggleAlert(false)">
+        {{ $options.i18n.genericError }}
+      </gl-alert>
       <h5>{{ __('Environment') }}</h5>
       <gl-button-group class="gl-mb-5">
         <gl-button
@@ -113,7 +121,7 @@ export default {
         </div>
       </template>
       <template v-if="!instructionsEmpty">
-        <div v-if="!instructionsEmpty" class="gl-display-flex">
+        <div class="gl-display-flex">
           <pre class="bg-light gl-flex-fill-1" data-testid="binary-instructions">
             {{ instructions.install.trimStart() }}
           </pre>

app/assets/javascripts/vue_shared/components/runner_instructions/store/actions.js

 import axios from '~/lib/utils/axios_utils';
-import statusCodes from '~/lib/utils/http_status';
-import createFlash from '~/flash';
-import { __ } from '~/locale';
 import * as types from './mutation_types';
 
 export const requestPlatforms = ({ state, commit, getters, dispatch }) => {
   axios
     .get(state.platformsPath)
     .then(resp => {
-      if (resp.status === statusCodes.OK) {
-        commit(types.SET_AVAILABLE_PLATFORMS, resp?.data);
-        // Select the first platform and architecture
-        const platform = Object.keys(resp.data)[0];
-
-        commit(types.SET_AVAILABLE_PLATFORM, platform);
-        dispatch('selectArchitecture', getters.getSupportedArchitectures[0]);
-        dispatch('requestPlatformsInstructions');
-      }
+      commit(types.SET_AVAILABLE_PLATFORMS, resp?.data);
+      // Select the first platform and architecture
+      const platform = Object.keys(resp.data)[0];
+
+      commit(types.SET_AVAILABLE_PLATFORM, platform);
+      dispatch('selectArchitecture', getters.getSupportedArchitectures[0]);
+      dispatch('requestPlatformsInstructions');
     })
-    .catch(() => createFlash({ message: __('An error has occurred') }));
+    .catch(() => dispatch('toggleAlert', true));
 };
 
-export const requestPlatformsInstructions = ({ commit, state }) => {
+export const requestPlatformsInstructions = ({ commit, state, dispatch }) => {
   let path = `${state.instructionsPath}?os=${state.selectedAvailablePlatform}`;
   path =
     state.selectedArchitecture !== ''
@@ -30,14 +25,8 @@ export const requestPlatformsInstructions = ({ commit, state }) => {
 
   axios
     .get(path)
-    .then(resp => {
-      if (resp.status === statusCodes.OK) {
-        commit(types.SET_INSTRUCTIONS, resp?.data);
-      }
-    })
-    .catch(() =>
-      createFlash({ message: __('An error has occurred fetching platform instructions') }),
-    );
+    .then(resp => commit(types.SET_INSTRUCTIONS, resp?.data))
+    .catch(() => dispatch('toggleAlert', true));
 };
 
 export const startInstructionsRequest = ({ dispatch }, architecture) => {
@@ -58,3 +47,7 @@ export const selectPlatform = ({ commit, dispatch, getters }, platform) => {
 export const selectArchitecture = ({ commit }, architecture) => {
   commit(types.SET_ARCHITECTURE, architecture);
 };
+
+export const toggleAlert = ({ commit }, state) => {
+  commit(types.SET_SHOW_ALERT, state);
+};

app/assets/javascripts/vue_shared/components/runner_instructions/store/getters.js

@@ -3,16 +3,13 @@ export const hasDownloadLocationsAvailable = state => {
 };
 
 export const getSupportedArchitectures = state => {
-  if (hasDownloadLocationsAvailable(state)) {
-    return Object.keys(
-      state.availablePlatforms[state.selectedAvailablePlatform]?.download_locations,
-    );
-  }
-  return [];
+  return Object.keys(
+    state.availablePlatforms[state.selectedAvailablePlatform]?.download_locations || {},
+  );
 };
 
 export const instructionsEmpty = state => {
-  return !Object.keys(state.instructions).length > 0;
+  return !Object.keys(state.instructions).length;
 };
 
 export const getDownloadLocation = state => {

app/assets/javascripts/vue_shared/components/runner_instructions/store/mutation_types.js

@@ -2,3 +2,4 @@ export const SET_AVAILABLE_PLATFORMS = 'SET_AVAILABLE_PLATFORMS';
 export const SET_AVAILABLE_PLATFORM = 'SET_AVAILABLE_PLATFORM';
 export const SET_ARCHITECTURE = 'SET_ARCHITECTURE';
 export const SET_INSTRUCTIONS = 'SET_INSTRUCTIONS';
+export const SET_SHOW_ALERT = 'SET_SHOW_ALERT';

app/assets/javascripts/vue_shared/components/runner_instructions/store/mutations.js

@@ -13,4 +13,7 @@ export default {
   [types.SET_INSTRUCTIONS](state, instructions) {
     state.instructions = instructions;
   },
+  [types.SET_SHOW_ALERT](state, show) {
+    state.showAlert = show;
+  },
 };

app/assets/javascripts/vue_shared/components/runner_instructions/store/state.js

@@ -5,4 +5,5 @@ export default (initialState = {}) => ({
   selectedAvailablePlatform: initialState.selectedAvailablePlatform || '', // index from the availablePlatforms array
   selectedArchitecture: initialState.selectedArchitecture || '',
   instructions: initialState.instructions || {},
+  showAlert: false,
 });

locale/gitlab.pot

@@ -2810,9 +2810,6 @@ msgstr ""
 msgid "An error has occurred"
 msgstr ""
 
-msgid "An error has occurred fetching platform instructions"
-msgstr ""
-
 msgid "An error occured while making the changes: %{error}"
 msgstr ""
 

spec/frontend/vue_shared/components/runner_instructions/store/actions_spec.js

@@ -76,7 +76,14 @@ describe('Runner Instructions actions', () => {
       });
 
       it('shows an error', done => {
-        testAction(actions.requestPlatformsInstructions, null, state, [], [], done);
+        testAction(
+          actions.requestPlatformsInstructions,
+          null,
+          state,
+          [],
+          [{ type: 'toggleAlert', payload: true }],
+          done,
+        );
       });
     });
   });
@@ -85,6 +92,8 @@ describe('Runner Instructions actions', () => {
     describe('successful request', () => {
       beforeEach(() => {
         state.platformsPath = '/platforms';
+        state.availablePlatforms = mockPlatformsObject;
+        state.getSupportedArchitectures = ['linux', 'windows'];
         axiosMock.onGet(state.platformsPath).reply(statusCodes.OK, mockPlatformsObject);
       });
 
@@ -97,7 +106,10 @@ describe('Runner Instructions actions', () => {
             { type: types.SET_AVAILABLE_PLATFORMS, payload: mockPlatformsObject },
             { type: types.SET_AVAILABLE_PLATFORM, payload: 'linux' },
           ],
-          [],
+          [
+            { type: 'selectArchitecture', payload: 'linux' },
+            { type: 'requestPlatformsInstructions' },
+          ],
           done,
         );
       });
@@ -110,7 +122,14 @@ describe('Runner Instructions actions', () => {
       });
 
       it('shows an error', done => {
-        testAction(actions.requestPlatforms, null, state, [], [], done);
+        testAction(
+          actions.requestPlatforms,
+          null,
+          state,
+          [],
+          [{ type: 'toggleAlert', payload: true }],
+          done,
+        );
       });
     });
   });
@@ -130,4 +149,17 @@ describe('Runner Instructions actions', () => {
       );
     });
   });
+
+  describe('toggleAlert', () => {
+    it('commits the SET_SHOW_ALERT mutation', done => {
+      testAction(
+        actions.toggleAlert,
+        true,
+        state,
+        [{ type: types.SET_SHOW_ALERT, payload: true }],
+        [],
+        done,
+      );
+    });
+  });
 });

spec/frontend/vue_shared/components/runner_instructions/store/mutations_spec.js

@@ -40,4 +40,12 @@ describe('Runner Instructions mutations', () => {
       expect(localState.instructions).toEqual(mockInstructions);
     });
   });
+
+  describe('SET_SHOW_ALERT', () => {
+    it('should set the showAlert boolean', () => {
+      mutations.SET_SHOW_ALERT(localState, true);
+
+      expect(localState.showAlert).toEqual(true);
+    });
+  });
 });