Add latest changes from gitlab-org/gitlab@13-6-stable-ee

15 files changed, 65 insertions, 342 deletions

diff --git a/app/assets/javascripts/analytics/instance_statistics/components/instance_counts.vue b/app/assets/javascripts/analytics/instance_statistics/components/instance_counts.vue
index 4fbfb4daf22..b331e659a92 100644
--- a/app/assets/javascripts/analytics/instance_statistics/components/instance_counts.vue
+++ b/app/assets/javascripts/analytics/instance_statistics/components/instance_counts.vue
@@ -56,7 +56,7 @@ export default {
 
 <template>
   <metric-card
-    :title="__('Instance Statistics')"
+    :title="__('Usage Trends')"
     :metrics="counts"
     :is-loading="$apollo.queries.counts.loading"
     class="gl-mt-4"
diff --git a/app/assets/javascripts/gfm_auto_complete.js b/app/assets/javascripts/gfm_auto_complete.js
index 202f04f98f6..14538ad7237 100644
--- a/app/assets/javascripts/gfm_auto_complete.js
+++ b/app/assets/javascripts/gfm_auto_complete.js
@@ -42,7 +42,7 @@ export function membersBeforeSave(members) {
       title: sanitize(title),
       search: sanitize(`${member.username} ${member.name}`),
       icon: avatarIcon,
-      availability: member.availability,
+      availability: member?.availability,
     };
   });
 }
diff --git a/app/assets/javascripts/pages/admin/runners/index.js b/app/assets/javascripts/pages/admin/runners/index.js
index 104b7eeaf96..e60c6133c7c 100644
--- a/app/assets/javascripts/pages/admin/runners/index.js
+++ b/app/assets/javascripts/pages/admin/runners/index.js
@@ -1,12 +1,11 @@
 import initFilteredSearch from '~/pages/search/init_filtered_search';
 import AdminRunnersFilteredSearchTokenKeys from '~/filtered_search/admin_runners_filtered_search_token_keys';
 import { FILTERED_SEARCH } from '~/pages/constants';
-import { initInstallRunner } from '~/pages/shared/mount_runner_instructions';
 
-initFilteredSearch({
-  page: FILTERED_SEARCH.ADMIN_RUNNERS,
-  filteredSearchTokenKeys: AdminRunnersFilteredSearchTokenKeys,
-  useDefaultState: true,
+document.addEventListener('DOMContentLoaded', () => {
+  initFilteredSearch({
+    page: FILTERED_SEARCH.ADMIN_RUNNERS,
+    filteredSearchTokenKeys: AdminRunnersFilteredSearchTokenKeys,
+    useDefaultState: true,
+  });
 });
-
-initInstallRunner();
diff --git a/app/assets/javascripts/pages/groups/clusters/destroy/index.js b/app/assets/javascripts/pages/groups/clusters/destroy/index.js
index 487e7a14a16..8001d2dd1da 100644
--- a/app/assets/javascripts/pages/groups/clusters/destroy/index.js
+++ b/app/assets/javascripts/pages/groups/clusters/destroy/index.js
@@ -1,3 +1,5 @@
 import ClustersBundle from '~/clusters/clusters_bundle';
 
-new ClustersBundle(); // eslint-disable-line no-new
+document.addEventListener('DOMContentLoaded', () => {
+  new ClustersBundle(); // eslint-disable-line no-new
+});
diff --git a/app/assets/javascripts/pages/groups/clusters/edit/index.js b/app/assets/javascripts/pages/groups/clusters/edit/index.js
index 487e7a14a16..8001d2dd1da 100644
--- a/app/assets/javascripts/pages/groups/clusters/edit/index.js
+++ b/app/assets/javascripts/pages/groups/clusters/edit/index.js
@@ -1,3 +1,5 @@
 import ClustersBundle from '~/clusters/clusters_bundle';
 
-new ClustersBundle(); // eslint-disable-line no-new
+document.addEventListener('DOMContentLoaded', () => {
+  new ClustersBundle(); // eslint-disable-line no-new
+});
diff --git a/app/assets/javascripts/pages/groups/clusters/index.js b/app/assets/javascripts/pages/groups/clusters/index.js
index 3b92c244346..9f466e0d60a 100644
--- a/app/assets/javascripts/pages/groups/clusters/index.js
+++ b/app/assets/javascripts/pages/groups/clusters/index.js
@@ -1,5 +1,7 @@
 import initCreateCluster from '~/create_cluster/init_create_cluster';
 import initIntegrationForm from '~/clusters/forms/show/index';
 
-initCreateCluster(document, gon);
-initIntegrationForm();
+document.addEventListener('DOMContentLoaded', () => {
+  initCreateCluster(document, gon);
+  initIntegrationForm();
+});
diff --git a/app/assets/javascripts/pages/groups/clusters/index/index.js b/app/assets/javascripts/pages/groups/clusters/index/index.js
index 3b71517f017..744be65bfbe 100644
--- a/app/assets/javascripts/pages/groups/clusters/index/index.js
+++ b/app/assets/javascripts/pages/groups/clusters/index/index.js
@@ -1,6 +1,8 @@
 import PersistentUserCallout from '~/persistent_user_callout';
 import initClustersListApp from '~/clusters_list';
 
-const callout = document.querySelector('.gcp-signup-offer');
-PersistentUserCallout.factory(callout);
-initClustersListApp();
+document.addEventListener('DOMContentLoaded', () => {
+  const callout = document.querySelector('.gcp-signup-offer');
+  PersistentUserCallout.factory(callout);
+  initClustersListApp();
+});
diff --git a/app/assets/javascripts/pages/groups/clusters/new/index.js b/app/assets/javascripts/pages/groups/clusters/new/index.js
index de9ded87ef3..876bab0b339 100644
--- a/app/assets/javascripts/pages/groups/clusters/new/index.js
+++ b/app/assets/javascripts/pages/groups/clusters/new/index.js
@@ -1,3 +1,5 @@
 import initNewCluster from '~/clusters/new_cluster';
 
-initNewCluster();
+document.addEventListener('DOMContentLoaded', () => {
+  initNewCluster();
+});
diff --git a/app/assets/javascripts/pages/groups/clusters/show/index.js b/app/assets/javascripts/pages/groups/clusters/show/index.js
index 5d202a8824f..ccf631b2c53 100644
--- a/app/assets/javascripts/pages/groups/clusters/show/index.js
+++ b/app/assets/javascripts/pages/groups/clusters/show/index.js
@@ -1,5 +1,7 @@
 import ClustersBundle from '~/clusters/clusters_bundle';
 import initClusterHealth from '~/pages/projects/clusters/show/cluster_health';
 
-new ClustersBundle(); // eslint-disable-line no-new
-initClusterHealth();
+document.addEventListener('DOMContentLoaded', () => {
+  new ClustersBundle(); // eslint-disable-line no-new
+  initClusterHealth();
+});
diff --git a/app/assets/javascripts/pages/groups/settings/ci_cd/show/index.js b/app/assets/javascripts/pages/groups/settings/ci_cd/show/index.js
index 3456048d718..e8d8c985ade 100644
--- a/app/assets/javascripts/pages/groups/settings/ci_cd/show/index.js
+++ b/app/assets/javascripts/pages/groups/settings/ci_cd/show/index.js
@@ -4,18 +4,18 @@ import initFilteredSearch from '~/pages/search/init_filtered_search';
 import GroupRunnersFilteredSearchTokenKeys from '~/filtered_search/group_runners_filtered_search_token_keys';
 import { FILTERED_SEARCH } from '~/pages/constants';
 import initSharedRunnersForm from '~/group_settings/mount_shared_runners';
-import { initInstallRunner } from '~/pages/shared/mount_runner_instructions';
 
-// Initialize expandable settings panels
-initSettingsPanels();
+document.addEventListener('DOMContentLoaded', () => {
+  // Initialize expandable settings panels
+  initSettingsPanels();
 
-initFilteredSearch({
-  page: FILTERED_SEARCH.ADMIN_RUNNERS,
-  filteredSearchTokenKeys: GroupRunnersFilteredSearchTokenKeys,
-  anchor: FILTERED_SEARCH.GROUP_RUNNERS_ANCHOR,
-  useDefaultState: false,
-});
+  initFilteredSearch({
+    page: FILTERED_SEARCH.ADMIN_RUNNERS,
+    filteredSearchTokenKeys: GroupRunnersFilteredSearchTokenKeys,
+    anchor: FILTERED_SEARCH.GROUP_RUNNERS_ANCHOR,
+    useDefaultState: false,
+  });
 
-initSharedRunnersForm();
-initVariableList();
-initInstallRunner();
+  initSharedRunnersForm();
+  initVariableList();
+});
diff --git a/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js b/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js
index 5d4c1595342..d18cde4ac87 100644
--- a/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js
+++ b/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js
@@ -4,32 +4,32 @@ import registrySettingsApp from '~/registry/settings/registry_settings_bundle';
 import initVariableList from '~/ci_variable_list';
 import initDeployFreeze from '~/deploy_freeze';
 import initSettingsPipelinesTriggers from '~/ci_settings_pipeline_triggers';
-import { initInstallRunner } from '~/pages/shared/mount_runner_instructions';
 
-// Initialize expandable settings panels
-initSettingsPanels();
+document.addEventListener('DOMContentLoaded', () => {
+  // Initialize expandable settings panels
+  initSettingsPanels();
 
-const runnerToken = document.querySelector('.js-secret-runner-token');
-if (runnerToken) {
-  const runnerTokenSecretValue = new SecretValues({
-    container: runnerToken,
-  });
-  runnerTokenSecretValue.init();
-}
+  const runnerToken = document.querySelector('.js-secret-runner-token');
+  if (runnerToken) {
+    const runnerTokenSecretValue = new SecretValues({
+      container: runnerToken,
+    });
+    runnerTokenSecretValue.init();
+  }
 
-initVariableList();
+  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);
-});
+  // 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();
+  registrySettingsApp();
+  initDeployFreeze();
 
-initSettingsPipelinesTriggers();
-initInstallRunner();
+  initSettingsPipelinesTriggers();
+});
diff --git a/app/assets/javascripts/pages/shared/mount_runner_instructions.js b/app/assets/javascripts/pages/shared/mount_runner_instructions.js
deleted file mode 100644
index b7662155339..00000000000
--- a/app/assets/javascripts/pages/shared/mount_runner_instructions.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import Vue from 'vue';
-import VueApollo from 'vue-apollo';
-import createDefaultClient from '~/lib/graphql';
-import InstallRunnerInstructions from '~/vue_shared/components/runner_instructions/runner_instructions.vue';
-
-Vue.use(VueApollo);
-
-export function initInstallRunner(componentId = 'js-install-runner') {
-  const installRunnerEl = document.getElementById(componentId);
-  const { projectPath, groupPath } = installRunnerEl?.dataset;
-
-  if (installRunnerEl) {
-    const defaultClient = createDefaultClient();
-
-    const apolloProvider = new VueApollo({
-      defaultClient,
-    });
-
-    // eslint-disable-next-line no-new
-    new Vue({
-      el: installRunnerEl,
-      apolloProvider,
-      provide: {
-        projectPath,
-        groupPath,
-      },
-      render(createElement) {
-        return createElement(InstallRunnerInstructions);
-      },
-    });
-  }
-}
diff --git a/app/assets/javascripts/vue_shared/components/runner_instructions/graphql/queries/get_runner_platforms.query.graphql b/app/assets/javascripts/vue_shared/components/runner_instructions/graphql/queries/get_runner_platforms.query.graphql
deleted file mode 100644
index ff0626167a9..00000000000
--- a/app/assets/javascripts/vue_shared/components/runner_instructions/graphql/queries/get_runner_platforms.query.graphql
+++ /dev/null
@@ -1,20 +0,0 @@
-query getRunnerPlatforms($projectPath: ID!, $groupPath: ID!) {
-  runnerPlatforms {
-    nodes {
-      name
-      humanReadableName
-      architectures {
-        nodes {
-          name
-          downloadLocation
-        }
-      }
-    }
-  }
-  project(fullPath: $projectPath) {
-    id
-  }
-  group(fullPath: $groupPath) {
-    id
-  }
-}
diff --git a/app/assets/javascripts/vue_shared/components/runner_instructions/graphql/queries/get_runner_setup.query.graphql b/app/assets/javascripts/vue_shared/components/runner_instructions/graphql/queries/get_runner_setup.query.graphql
deleted file mode 100644
index 643c1991807..00000000000
--- a/app/assets/javascripts/vue_shared/components/runner_instructions/graphql/queries/get_runner_setup.query.graphql
+++ /dev/null
@@ -1,16 +0,0 @@
-query runnerSetupInstructions(
-  $platform: String!
-  $architecture: String!
-  $projectId: ID!
-  $groupId: ID!
-) {
-  runnerSetup(
-    platform: $platform
-    architecture: $architecture
-    projectId: $projectId
-    groupId: $groupId
-  ) {
-    installInstructions
-    registerInstructions
-  }
-}
diff --git a/app/assets/javascripts/vue_shared/components/runner_instructions/runner_instructions.vue b/app/assets/javascripts/vue_shared/components/runner_instructions/runner_instructions.vue
deleted file mode 100644
index b70b1277155..00000000000
--- a/app/assets/javascripts/vue_shared/components/runner_instructions/runner_instructions.vue
+++ /dev/null
@@ -1,220 +0,0 @@
-<script>
-import {
-  GlAlert,
-  GlButton,
-  GlModal,
-  GlModalDirective,
-  GlButtonGroup,
-  GlDropdown,
-  GlDropdownItem,
-  GlIcon,
-} from '@gitlab/ui';
-import { __, s__ } from '~/locale';
-import getRunnerPlatforms from './graphql/queries/get_runner_platforms.query.graphql';
-import getRunnerSetupInstructions from './graphql/queries/get_runner_setup.query.graphql';
-
-export default {
-  components: {
-    GlAlert,
-    GlButton,
-    GlButtonGroup,
-    GlDropdown,
-    GlDropdownItem,
-    GlModal,
-    GlIcon,
-  },
-  directives: {
-    GlModalDirective,
-  },
-  inject: {
-    projectPath: {
-      default: '',
-    },
-    groupPath: {
-      default: '',
-    },
-  },
-  apollo: {
-    runnerPlatforms: {
-      query: getRunnerPlatforms,
-      variables() {
-        return {
-          projectPath: this.projectPath,
-          groupPath: this.groupPath,
-        };
-      },
-      update(data) {
-        return data;
-      },
-      error() {
-        this.showAlert = true;
-      },
-    },
-  },
-  data() {
-    return {
-      showAlert: false,
-      selectedPlatformArchitectures: [],
-      selectedPlatform: {},
-      selectedArchitecture: {},
-      runnerPlatforms: {},
-      instructions: {},
-    };
-  },
-  computed: {
-    isPlatformSelected() {
-      return Object.keys(this.selectedPlatform).length > 0;
-    },
-    instructionsEmpty() {
-      return this.instructions && Object.keys(this.instructions).length === 0;
-    },
-    groupId() {
-      return this.runnerPlatforms?.group?.id ?? '';
-    },
-    projectId() {
-      return this.runnerPlatforms?.project?.id ?? '';
-    },
-    platforms() {
-      return this.runnerPlatforms.runnerPlatforms?.nodes;
-    },
-  },
-  methods: {
-    selectPlatform(name) {
-      this.selectedPlatform = this.platforms.find(platform => platform.name === name);
-      this.selectedPlatformArchitectures = this.selectedPlatform?.architectures?.nodes;
-      [this.selectedArchitecture] = this.selectedPlatformArchitectures;
-      this.selectArchitecture(this.selectedArchitecture);
-    },
-    selectArchitecture(architecture) {
-      this.selectedArchitecture = architecture;
-
-      this.$apollo.addSmartQuery('instructions', {
-        variables() {
-          return {
-            platform: this.selectedPlatform.name,
-            architecture: this.selectedArchitecture.name,
-            projectId: this.projectId,
-            groupId: this.groupId,
-          };
-        },
-        query: getRunnerSetupInstructions,
-        update(data) {
-          return data?.runnerSetup;
-        },
-        error() {
-          this.showAlert = true;
-        },
-      });
-    },
-    toggleAlert(state) {
-      this.showAlert = state;
-    },
-  },
-  modalId: 'installation-instructions-modal',
-  i18n: {
-    installARunner: __('Install a Runner'),
-    architecture: s__('Runners|Architecture'),
-    downloadInstallBinary: s__('Runners|Download and Install Binary'),
-    downloadLatestBinary: s__('Runners|Download Latest Binary'),
-    registerRunner: s__('Runners|Register Runner'),
-    method: __('Method'),
-    fetchError: s__('An error has occurred fetching instructions'),
-    instructions: __('Show Runner installation instructions'),
-  },
-  closeButton: {
-    text: __('Close'),
-    attributes: [{ variant: 'default' }],
-  },
-};
-</script>
-<template>
-  <div>
-    <gl-button v-gl-modal-directive="$options.modalId" data-testid="show-modal-button">
-      {{ $options.i18n.instructions }}
-    </gl-button>
-    <gl-modal
-      :modal-id="$options.modalId"
-      :title="$options.i18n.installARunner"
-      :action-secondary="$options.closeButton"
-    >
-      <gl-alert v-if="showAlert" variant="danger" @dismiss="toggleAlert(false)">
-        {{ $options.i18n.fetchError }}
-      </gl-alert>
-      <h5>{{ __('Environment') }}</h5>
-      <gl-button-group class="gl-mb-5">
-        <gl-button
-          v-for="platform in platforms"
-          :key="platform.name"
-          data-testid="platform-button"
-          @click="selectPlatform(platform.name)"
-        >
-          {{ platform.humanReadableName }}
-        </gl-button>
-      </gl-button-group>
-      <template v-if="isPlatformSelected">
-        <h5>
-          {{ $options.i18n.architecture }}
-        </h5>
-        <gl-dropdown class="gl-mb-5" :text="selectedArchitecture.name">
-          <gl-dropdown-item
-            v-for="architecture in selectedPlatformArchitectures"
-            :key="architecture.name"
-            data-testid="architecture-dropdown-item"
-            @click="selectArchitecture(architecture)"
-          >
-            {{ architecture.name }}
-          </gl-dropdown-item>
-        </gl-dropdown>
-        <div class="gl-display-flex gl-align-items-center gl-mb-5">
-          <h5>{{ $options.i18n.downloadInstallBinary }}</h5>
-          <gl-button
-            class="gl-ml-auto"
-            :href="selectedArchitecture.downloadLocation"
-            download
-            data-testid="binary-download-button"
-          >
-            {{ $options.i18n.downloadLatestBinary }}
-          </gl-button>
-        </div>
-      </template>
-      <template v-if="!instructionsEmpty">
-        <div class="gl-display-flex">
-          <pre
-            class="bg-light gl-flex-fill-1 gl-white-space-pre-line"
-            data-testid="binary-instructions"
-          >
-            {{ instructions.installInstructions }}
-          </pre>
-          <gl-button
-            class="gl-align-self-start gl-ml-2 gl-mt-2"
-            category="tertiary"
-            variant="link"
-            :data-clipboard-text="instructions.installationInstructions"
-          >
-            <gl-icon name="copy-to-clipboard" />
-          </gl-button>
-        </div>
-
-        <hr />
-        <h5 class="gl-mb-5">{{ $options.i18n.registerRunner }}</h5>
-        <h5 class="gl-mb-5">{{ $options.i18n.method }}</h5>
-        <div class="gl-display-flex">
-          <pre
-            class="bg-light gl-flex-fill-1 gl-white-space-pre-line"
-            data-testid="runner-instructions"
-          >
-            {{ instructions.registerInstructions }}
-          </pre>
-          <gl-button
-            class="gl-align-self-start gl-ml-2 gl-mt-2"
-            category="tertiary"
-            variant="link"
-            :data-clipboard-text="instructions.registerInstructions"
-          >
-            <gl-icon name="copy-to-clipboard" />
-          </gl-button>
-        </div>
-      </template>
-    </gl-modal>
-  </div>
-</template>