Remove redundant queries and refactor

This removes redundant queries and
makes multiple related queries live in
a single GraphQL file, this also removes
DOMContentLoaded calls

app/assets/javascripts/pages/admin/runners/index.js

@@ -3,12 +3,10 @@ import AdminRunnersFilteredSearchTokenKeys from '~/filtered_search/admin_runners
 import { FILTERED_SEARCH } from '~/pages/constants';
 import { initInstallRunner } from '~/pages/shared/mount_runner_instructions';
 
-document.addEventListener('DOMContentLoaded', () => {
-  initFilteredSearch({
-    page: FILTERED_SEARCH.ADMIN_RUNNERS,
-    filteredSearchTokenKeys: AdminRunnersFilteredSearchTokenKeys,
-    useDefaultState: true,
-  });
-
-  initInstallRunner();
+initFilteredSearch({
+  page: FILTERED_SEARCH.ADMIN_RUNNERS,
+  filteredSearchTokenKeys: AdminRunnersFilteredSearchTokenKeys,
+  useDefaultState: true,
 });
+
+initInstallRunner();

app/assets/javascripts/pages/groups/settings/ci_cd/show/index.js

@@ -6,18 +6,16 @@ import { FILTERED_SEARCH } from '~/pages/constants';
 import initSharedRunnersForm from '~/group_settings/mount_shared_runners';
 import { initInstallRunner } from '~/pages/shared/mount_runner_instructions';
 
-document.addEventListener('DOMContentLoaded', () => {
-  // Initialize expandable settings panels
-  initSettingsPanels();
+// Initialize expandable settings panels
+initSettingsPanels();
 
-  initFilteredSearch({
-    page: FILTERED_SEARCH.ADMIN_RUNNERS,
-    filteredSearchTokenKeys: GroupRunnersFilteredSearchTokenKeys,
-    anchor: FILTERED_SEARCH.GROUP_RUNNERS_ANCHOR,
-    useDefaultState: false,
-  });
-
-  initSharedRunnersForm();
-  initVariableList();
-  initInstallRunner();
+initFilteredSearch({
+  page: FILTERED_SEARCH.ADMIN_RUNNERS,
+  filteredSearchTokenKeys: GroupRunnersFilteredSearchTokenKeys,
+  anchor: FILTERED_SEARCH.GROUP_RUNNERS_ANCHOR,
+  useDefaultState: false,
 });
+
+initSharedRunnersForm();
+initVariableList();
+initInstallRunner();

app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js

@@ -6,32 +6,30 @@ import initDeployFreeze from '~/deploy_freeze';
 import initSettingsPipelinesTriggers from '~/ci_settings_pipeline_triggers';
 import { initInstallRunner } from '~/pages/shared/mount_runner_instructions';
 
-document.addEventListener('DOMContentLoaded', () => {
-  // Initialize expandable settings panels
-  initSettingsPanels();
+// Initialize expandable settings panels
+initSettingsPanels();
 
-  const runnerToken = document.querySelector('.js-secret-runner-token');
-  if (runnerToken) {
-    const runnerTokenSecretValue = new SecretValues({
-      container: runnerToken,
-    });
-    runnerTokenSecretValue.init();
-  }
-
-  initVariableList();
-
-  // hide extra auto devops settings based checkbox state
-  const autoDevOpsExtraSettings = document.querySelector('.js-extra-settings');
-  const instanceDefaultBadge = document.querySelector('.js-instance-default-badge');
-  document.querySelector('.js-toggle-extra-settings').addEventListener('click', event => {
-    const { target } = event;
-    if (instanceDefaultBadge) instanceDefaultBadge.style.display = 'none';
-    autoDevOpsExtraSettings.classList.toggle('hidden', !target.checked);
+const runnerToken = document.querySelector('.js-secret-runner-token');
+if (runnerToken) {
+  const runnerTokenSecretValue = new SecretValues({
+    container: runnerToken,
   });
+  runnerTokenSecretValue.init();
+}
 
-  registrySettingsApp();
-  initDeployFreeze();
+initVariableList();
 
-  initSettingsPipelinesTriggers();
-  initInstallRunner();
+// hide extra auto devops settings based checkbox state
+const autoDevOpsExtraSettings = document.querySelector('.js-extra-settings');
+const instanceDefaultBadge = document.querySelector('.js-instance-default-badge');
+document.querySelector('.js-toggle-extra-settings').addEventListener('click', event => {
+  const { target } = event;
+  if (instanceDefaultBadge) instanceDefaultBadge.style.display = 'none';
+  autoDevOpsExtraSettings.classList.toggle('hidden', !target.checked);
 });
+
+registrySettingsApp();
+initDeployFreeze();
+
+initSettingsPipelinesTriggers();
+initInstallRunner();

app/assets/javascripts/pages/shared/mount_runner_instructions.js

@@ -5,9 +5,9 @@ import InstallRunnerInstructions from '~/vue_shared/components/runner_instructio
 
 Vue.use(VueApollo);
 
-export function initInstallRunner() {
-  const installRunnerEl = document.getElementById('js-install-runner');
-  const { projectPath, groupPath } = installRunnerEl.dataset || {};
+export function initInstallRunner(componentId = 'js-install-runner') {
+  const installRunnerEl = document.getElementById(componentId);
+  const { projectPath, groupPath } = installRunnerEl?.dataset;
 
   if (installRunnerEl) {
     const defaultClient = createDefaultClient();

app/assets/javascripts/vue_shared/components/runner_instructions/graphql/queries/get_group_id.query.graphql

-query getGroupID($groupPath: ID!) {
-  group(fullPath: $groupPath) {
-    id
-  }
-}

app/assets/javascripts/vue_shared/components/runner_instructions/graphql/queries/get_project_id.query.graphql

-query getProjectId($projectPath: ID!) {
-  project(fullPath: $projectPath) {
-    id
-  }
-}

app/assets/javascripts/vue_shared/components/runner_instructions/graphql/queries/get_runner_platforms.query.graphql

-query getRunnerPlatforms {
+query getRunnerPlatforms($projectPath: ID!, $groupPath: ID!) {
   runnerPlatforms {
     nodes {
       name
@@ -11,4 +11,10 @@ query getRunnerPlatforms {
       }
     }
   }
+  project(fullPath: $projectPath) {
+    id
+  }
+  group(fullPath: $groupPath) {
+    id
+  }
 }

app/assets/javascripts/vue_shared/components/runner_instructions/graphql/queries/get_runner_setup.query.graphql

-query runnerSetupInstructions($platform: String!, $architecture: String!, $projectId: ID!) {
-  runnerSetup(platform: $platform, architecture: $architecture, projectId: $projectId) {
+query runnerSetupInstructions(
+  $platform: String!
+  $architecture: String!
+  $projectId: ID!
+  $groupId: ID!
+) {
+  runnerSetup(
+    platform: $platform
+    architecture: $architecture
+    projectId: $projectId
+    groupId: $groupId
+  ) {
     installInstructions
     registerInstructions
   }

app/assets/javascripts/vue_shared/components/runner_instructions/graphql/queries/get_runner_setup_admin.query.graphql

-query runnerSetupInstructionsGroup($platform: String!, $architecture: String!) {
-  runnerSetup(platform: $platform, architecture: $architecture) {
-    installInstructions
-    registerInstructions
-  }
-}

app/assets/javascripts/vue_shared/components/runner_instructions/graphql/queries/get_runner_setup_group.query.graphql

-query runnerSetupInstructionsGroup($platform: String!, $architecture: String!, $groupId: ID!) {
-  runnerSetup(platform: $platform, architecture: $architecture, groupId: $groupId) {
-    installInstructions
-    registerInstructions
-  }
-}

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

@@ -12,10 +12,6 @@ import {
 import { __, s__ } from '~/locale';
 import getRunnerPlatforms from './graphql/queries/get_runner_platforms.query.graphql';
 import getRunnerSetupInstructions from './graphql/queries/get_runner_setup.query.graphql';
-import getRunnerSetupInstructionsGroup from './graphql/queries/get_runner_setup_group.query.graphql';
-import getRunnerSetupInstructionsAdmin from './graphql/queries/get_runner_setup_admin.query.graphql';
-import getProjectId from './graphql/queries/get_project_id.query.graphql';
-import getGroupId from './graphql/queries/get_group_id.query.graphql';
 
 export default {
   components: {
@@ -41,36 +37,16 @@ export default {
   apollo: {
     runnerPlatforms: {
       query: getRunnerPlatforms,
-      update(data) {
-        return data?.runnerPlatforms?.nodes;
-      },
-      error() {
-        this.showAlert = true;
-      },
-    },
-    projectId: {
-      query: getProjectId,
       variables() {
         return {
           projectPath: this.projectPath,
-        };
-      },
-      update(data) {
-        return data?.project?.id;
-      },
-      error() {
-        this.showAlert = true;
-      },
-    },
-    groupId: {
-      query: getGroupId,
-      variables() {
-        return {
           groupPath: this.groupPath,
         };
       },
       update(data) {
-        return data?.group?.id;
+        this.groupId = data.group?.id;
+        this.projectId = data.project?.id;
+        return data?.runnerPlatforms?.nodes;
       },
       error() {
         this.showAlert = true;
@@ -90,17 +66,11 @@ export default {
     };
   },
   computed: {
-    closeButton() {
-      return {
-        text: __('Close'),
-        attributes: [{ variant: 'default' }],
-      };
-    },
     isPlatformSelected() {
       return Object.keys(this.selectedPlatform).length > 0;
     },
     instructionsEmpty() {
-      return this.instructions == null || Object.keys(this.instructions).length === 0;
+      return this.instructions && Object.keys(this.instructions).length === 0;
     },
   },
   methods: {
@@ -108,38 +78,21 @@ export default {
       this.selectedPlatform = this.runnerPlatforms.find(platform => platform.name === name);
       this.selectedPlatformArchitectures = this.selectedPlatform?.architectures?.nodes;
       [this.selectedArchitecture] = this.selectedPlatformArchitectures;
-      this.selectArchitecture(this.selectedArchitecture.name);
+      this.selectArchitecture(this.selectedArchitecture);
     },
-    selectArchitecture(name) {
-      this.selectedArchitecture = this.selectedPlatformArchitectures.find(
-        architecture => architecture.name === name,
-      );
+    selectArchitecture(architecture) {
+      this.selectedArchitecture = architecture;
 
       this.$apollo.addSmartQuery('instructions', {
         variables() {
-          const vars = {
+          return {
             platform: this.selectedPlatform.name,
             architecture: this.selectedArchitecture.name,
+            projectId: this.projectId ? this.projectId : '',
+            groupId: this.groupId ? this.groupId : '',
           };
-          if (this.projectId) {
-            vars.projectId = this.projectId;
-          }
-
-          if (this.groupId) {
-            vars.groupId = this.groupId;
-          }
-
-          return vars;
-        },
-        query() {
-          if (this.projectId) {
-            return getRunnerSetupInstructions;
-          } else if (this.groupId) {
-            return getRunnerSetupInstructionsGroup;
-          }
-
-          return getRunnerSetupInstructionsAdmin;
         },
+        query: getRunnerSetupInstructions,
         update(data) {
           return data?.runnerSetup;
         },
@@ -155,14 +108,18 @@ export default {
   modalId: 'installation-instructions-modal',
   i18n: {
     installARunner: __('Install a Runner'),
-    architecture: __('Architecture'),
+    architecture: s__('Runners|Architecture'),
     downloadInstallBinary: s__('Runners|Download and Install Binary'),
     downloadLatestBinary: s__('Runners|Download Latest Binary'),
     registerRunner: s__('Runners|Register Runner'),
     method: __('Method'),
-    genericError: __('An error has occurred'),
+    fetchError: s__('An error has occurred fetching instructions'),
     instructions: __('Show Runner installation instructions'),
   },
+  closeButton: {
+    text: __('Close'),
+    attributes: [{ variant: 'default' }],
+  },
 };
 </script>
 <template>
@@ -173,10 +130,10 @@ export default {
     <gl-modal
       :modal-id="$options.modalId"
       :title="$options.i18n.installARunner"
-      :action-secondary="closeButton"
+      :action-secondary="$options.closeButton"
     >
       <gl-alert v-if="showAlert" variant="danger" @dismiss="toggleAlert(false)">
-        {{ $options.i18n.genericError }}
+        {{ $options.i18n.fetchError }}
       </gl-alert>
       <h5>{{ __('Environment') }}</h5>
       <gl-button-group class="gl-mb-5">
@@ -198,7 +155,7 @@ export default {
             v-for="architecture in selectedPlatformArchitectures"
             :key="architecture.name"
             data-testid="architecture-dropdown-item"
-            @click="selectArchitecture(architecture.name)"
+            @click="selectArchitecture(architecture)"
           >
             {{ architecture.name }}
           </gl-dropdown-item>

locale/gitlab.pot

@@ -2810,6 +2810,9 @@ msgstr ""
 msgid "An error has occurred"
 msgstr ""
 
+msgid "An error has occurred fetching instructions"
+msgstr ""
+
 msgid "An error occured while making the changes: %{error}"
 msgstr ""
 
@@ -3418,9 +3421,6 @@ msgstr ""
 msgid "April"
 msgstr ""
 
-msgid "Architecture"
-msgstr ""
-
 msgid "Architecture not found for OS"
 msgstr ""
 

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

@@ -89,6 +89,8 @@ export const mockGraphqlRunnerPlatforms = {
       ],
       __typename: 'RunnerPlatformConnection',
     },
+    project: { id: 'gid://gitlab/Project/1', __typename: 'Project' },
+    group: null,
   },
 };
 
@@ -103,17 +105,3 @@ export const mockGraphqlInstructions = {
     },
   },
 };
-
-export const mockGraphqlProjectId = {
-  data: {
-    project: {
-      id: 'gid://gitlab/Project/1',
-    },
-  },
-};
-
-export const mockGraphqlGroupId = {
-  data: {
-    group: null,
-  },
-};

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

@@ -3,16 +3,9 @@ import VueApollo from 'vue-apollo';
 import createMockApollo from 'jest/helpers/mock_apollo_helper';
 import RunnerInstructions from '~/vue_shared/components/runner_instructions/runner_instructions.vue';
 import getRunnerPlatforms from '~/vue_shared/components/runner_instructions/graphql/queries/get_runner_platforms.query.graphql';
-import getProjectId from '~/vue_shared/components/runner_instructions/graphql/queries/get_project_id.query.graphql';
-import getGroupId from '~/vue_shared/components/runner_instructions/graphql/queries/get_group_id.query.graphql';
 import getRunnerSetupInstructions from '~/vue_shared/components/runner_instructions/graphql/queries/get_runner_setup.query.graphql';
 
-import {
-  mockGraphqlRunnerPlatforms,
-  mockGraphqlProjectId,
-  mockGraphqlInstructions,
-  mockGraphqlGroupId,
-} from './mock_data';
+import { mockGraphqlRunnerPlatforms, mockGraphqlInstructions } from './mock_data';
 
 const projectPath = 'gitlab-org/gitlab';
 const localVue = createLocalVue();
@@ -33,8 +26,6 @@ describe('RunnerInstructions component', () => {
     const requestHandlers = [
       [getRunnerPlatforms, jest.fn().mockResolvedValue(mockGraphqlRunnerPlatforms)],
       [getRunnerSetupInstructions, jest.fn().mockResolvedValue(mockGraphqlInstructions)],
-      [getProjectId, jest.fn().mockResolvedValue(mockGraphqlProjectId)],
-      [getGroupId, jest.fn().mockResolvedValue(mockGraphqlGroupId)],
     ];
 
     fakeApollo = createMockApollo(requestHandlers);