Add latest changes from gitlab-org/gitlab@master

21 files changed, 171 insertions, 144 deletions

diff --git a/app/assets/javascripts/api.js b/app/assets/javascripts/api.js
index 41cc2036a6b..1bb19208828 100644
--- a/app/assets/javascripts/api.js
+++ b/app/assets/javascripts/api.js
@@ -83,8 +83,8 @@ const Api = {
   tagsPath: '/api/:version/projects/:id/repository/tags',
   freezePeriodsPath: '/api/:version/projects/:id/freeze_periods',
   freezePeriodPath: '/api/:version/projects/:id/freeze_periods/:freeze_period_id',
-  usageDataIncrementCounterPath: '/api/:version/usage_data/increment_counter',
-  usageDataIncrementUniqueUsersPath: '/api/:version/usage_data/increment_unique_users',
+  serviceDataIncrementCounterPath: '/api/:version/usage_data/increment_counter',
+  serviceDataIncrementUniqueUsersPath: '/api/:version/usage_data/increment_unique_users',
   featureFlagUserLists: '/api/:version/projects/:id/feature_flags_user_lists',
   featureFlagUserList: '/api/:version/projects/:id/feature_flags_user_lists/:list_iid',
   containerRegistryDetailsPath: '/api/:version/registry/repositories/:id/',
@@ -875,7 +875,7 @@ const Api = {
       return null;
     }
 
-    const url = Api.buildUrl(this.usageDataIncrementCounterPath);
+    const url = Api.buildUrl(this.serviceDataIncrementCounterPath);
     const headers = {
       'Content-Type': 'application/json',
     };
@@ -888,7 +888,7 @@ const Api = {
       return null;
     }
 
-    const url = Api.buildUrl(this.usageDataIncrementUniqueUsersPath);
+    const url = Api.buildUrl(this.serviceDataIncrementUniqueUsersPath);
     const headers = {
       'Content-Type': 'application/json',
     };
diff --git a/app/assets/javascripts/design_management/pages/design/index.vue b/app/assets/javascripts/design_management/pages/design/index.vue
index ad78433c7ce..19bfa123487 100644
--- a/app/assets/javascripts/design_management/pages/design/index.vue
+++ b/app/assets/javascripts/design_management/pages/design/index.vue
@@ -41,7 +41,7 @@ import {
   TOGGLE_TODO_ERROR,
   designDeletionError,
 } from '../../utils/error_messages';
-import { trackDesignDetailView, usagePingDesignDetailView } from '../../utils/tracking';
+import { trackDesignDetailView, servicePingDesignDetailView } from '../../utils/tracking';
 
 const DEFAULT_SCALE = 1;
 
@@ -292,7 +292,7 @@ export default {
       );
 
       if (this.glFeatures.usageDataDesignAction) {
-        usagePingDesignDetailView();
+        servicePingDesignDetailView();
       }
     },
     updateActiveDiscussion(id, source = ACTIVE_DISCUSSION_SOURCE_TYPES.discussion) {
diff --git a/app/assets/javascripts/design_management/utils/tracking.js b/app/assets/javascripts/design_management/utils/tracking.js
index 905134fa985..23aec46c152 100644
--- a/app/assets/javascripts/design_management/utils/tracking.js
+++ b/app/assets/javascripts/design_management/utils/tracking.js
@@ -14,7 +14,7 @@ export const DESIGN_SNOWPLOW_EVENT_TYPES = {
   UPDATE_DESIGN: 'update_design',
 };
 
-export const DESIGN_USAGE_PING_EVENT_TYPES = {
+export const DESIGN_SERVICE_PING_EVENT_TYPES = {
   DESIGN_ACTION: 'design_action',
 };
 
@@ -52,8 +52,8 @@ export function trackDesignUpdate() {
 }
 
 /**
- * Track "design detail" view via usage ping
+ * Track "design detail" view via service ping
  */
-export function usagePingDesignDetailView() {
-  Api.trackRedisHllUserEvent(DESIGN_USAGE_PING_EVENT_TYPES.DESIGN_ACTION);
+export function servicePingDesignDetailView() {
+  Api.trackRedisHllUserEvent(DESIGN_SERVICE_PING_EVENT_TYPES.DESIGN_ACTION);
 }
diff --git a/app/assets/javascripts/issues_list/components/issues_list_app.vue b/app/assets/javascripts/issues_list/components/issues_list_app.vue
index 051512e9a66..583f8b6ed17 100644
--- a/app/assets/javascripts/issues_list/components/issues_list_app.vue
+++ b/app/assets/javascripts/issues_list/components/issues_list_app.vue
@@ -11,6 +11,7 @@ import {
 import fuzzaldrinPlus from 'fuzzaldrin-plus';
 import getIssuesQuery from 'ee_else_ce/issues_list/queries/get_issues.query.graphql';
 import createFlash from '~/flash';
+import { convertToGraphQLId } from '~/graphql_shared/utils';
 import CsvImportExportButtons from '~/issuable/components/csv_import_export_buttons.vue';
 import IssuableByEmail from '~/issuable/components/issuable_by_email.vue';
 import IssuableList from '~/issuable_list/components/issuable_list_root.vue';
@@ -70,6 +71,10 @@ import LabelToken from '~/vue_shared/components/filtered_search_bar/tokens/label
 import MilestoneToken from '~/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue';
 import WeightToken from '~/vue_shared/components/filtered_search_bar/tokens/weight_token.vue';
 import eventHub from '../eventhub';
+import searchIterationsQuery from '../queries/search_iterations.query.graphql';
+import searchLabelsQuery from '../queries/search_labels.query.graphql';
+import searchMilestonesQuery from '../queries/search_milestones.query.graphql';
+import searchUsersQuery from '../queries/search_users.query.graphql';
 import IssueCardTimeInfo from './issue_card_time_info.vue';
 
 export default {
@@ -94,9 +99,6 @@ export default {
     autocompleteAwardEmojisPath: {
       default: '',
     },
-    autocompleteUsersPath: {
-      default: '',
-    },
     calendarPath: {
       default: '',
     },
@@ -118,6 +120,9 @@ export default {
     hasIssueWeightsFeature: {
       default: false,
     },
+    hasIterationsFeature: {
+      default: false,
+    },
     hasMultipleIssueAssigneesFeature: {
       default: false,
     },
@@ -139,15 +144,6 @@ export default {
     newIssuePath: {
       default: '',
     },
-    projectIterationsPath: {
-      default: '',
-    },
-    projectLabelsPath: {
-      default: '',
-    },
-    projectMilestonesPath: {
-      default: '',
-    },
     projectPath: {
       default: '',
     },
@@ -233,7 +229,7 @@ export default {
 
       if (gon.current_user_id) {
         preloadedAuthors.push({
-          id: gon.current_user_id,
+          id: convertToGraphQLId('User', gon.current_user_id), // eslint-disable-line @gitlab/require-i18n-strings
           name: gon.current_user_fullname,
           username: gon.current_username,
           avatar_url: gon.current_user_avatar_url,
@@ -308,7 +304,7 @@ export default {
         });
       }
 
-      if (this.projectIterationsPath) {
+      if (this.hasIterationsFeature) {
         tokens.push({
           type: TOKEN_TYPE_ITERATION,
           title: TOKEN_TITLE_ITERATION,
@@ -407,19 +403,42 @@ export default {
         : epics.filter((epic) => epic.id === number);
     },
     fetchLabels(search) {
-      return this.fetchWithCache(this.projectLabelsPath, 'labels', 'title', search);
+      return this.$apollo
+        .query({
+          query: searchLabelsQuery,
+          variables: { projectPath: this.projectPath, search },
+        })
+        .then(({ data }) => data.project.labels.nodes);
     },
     fetchMilestones(search) {
-      return this.fetchWithCache(this.projectMilestonesPath, 'milestones', 'title', search, true);
+      return this.$apollo
+        .query({
+          query: searchMilestonesQuery,
+          variables: { projectPath: this.projectPath, search },
+        })
+        .then(({ data }) => data.project.milestones.nodes);
     },
     fetchIterations(search) {
       const id = Number(search);
-      return !search || Number.isNaN(id)
-        ? axios.get(this.projectIterationsPath, { params: { search } })
-        : axios.get(this.projectIterationsPath, { params: { id } });
+      const variables =
+        !search || Number.isNaN(id)
+          ? { projectPath: this.projectPath, search }
+          : { projectPath: this.projectPath, id };
+
+      return this.$apollo
+        .query({
+          query: searchIterationsQuery,
+          variables,
+        })
+        .then(({ data }) => data.project.iterations.nodes);
     },
     fetchUsers(search) {
-      return axios.get(this.autocompleteUsersPath, { params: { search } });
+      return this.$apollo
+        .query({
+          query: searchUsersQuery,
+          variables: { projectPath: this.projectPath, search },
+        })
+        .then(({ data }) => data.project.projectMembers.nodes.map((member) => member.user));
     },
     getExportCsvPathWithQuery() {
       return `${this.exportCsvPath}${window.location.search}`;
diff --git a/app/assets/javascripts/issues_list/index.js b/app/assets/javascripts/issues_list/index.js
index 97b9a9a115d..dc73d8c7cc8 100644
--- a/app/assets/javascripts/issues_list/index.js
+++ b/app/assets/javascripts/issues_list/index.js
@@ -82,7 +82,6 @@ export function mountIssuesListApp() {
 
   const {
     autocompleteAwardEmojisPath,
-    autocompleteUsersPath,
     calendarPath,
     canBulkUpdate,
     canEdit,
@@ -95,6 +94,7 @@ export function mountIssuesListApp() {
     hasBlockedIssuesFeature,
     hasIssuableHealthStatusFeature,
     hasIssueWeightsFeature,
+    hasIterationsFeature,
     hasMultipleIssueAssigneesFeature,
     hasProjectIssues,
     importCsvIssuesPath,
@@ -106,9 +106,6 @@ export function mountIssuesListApp() {
     maxAttachmentSize,
     newIssuePath,
     projectImportJiraPath,
-    projectIterationsPath,
-    projectLabelsPath,
-    projectMilestonesPath,
     projectPath,
     quickActionsHelpPath,
     resetPath,
@@ -122,7 +119,6 @@ export function mountIssuesListApp() {
     apolloProvider,
     provide: {
       autocompleteAwardEmojisPath,
-      autocompleteUsersPath,
       calendarPath,
       canBulkUpdate: parseBoolean(canBulkUpdate),
       emptyStateSvgPath,
@@ -130,15 +126,13 @@ export function mountIssuesListApp() {
       hasBlockedIssuesFeature: parseBoolean(hasBlockedIssuesFeature),
       hasIssuableHealthStatusFeature: parseBoolean(hasIssuableHealthStatusFeature),
       hasIssueWeightsFeature: parseBoolean(hasIssueWeightsFeature),
+      hasIterationsFeature: parseBoolean(hasIterationsFeature),
       hasMultipleIssueAssigneesFeature: parseBoolean(hasMultipleIssueAssigneesFeature),
       hasProjectIssues: parseBoolean(hasProjectIssues),
       isSignedIn: parseBoolean(isSignedIn),
       issuesPath,
       jiraIntegrationPath,
       newIssuePath,
-      projectIterationsPath,
-      projectLabelsPath,
-      projectMilestonesPath,
       projectPath,
       rssPath,
       showNewIssueLink: parseBoolean(showNewIssueLink),
diff --git a/app/assets/javascripts/issues_list/queries/search_iterations.query.graphql b/app/assets/javascripts/issues_list/queries/search_iterations.query.graphql
new file mode 100644
index 00000000000..11d9dcea573
--- /dev/null
+++ b/app/assets/javascripts/issues_list/queries/search_iterations.query.graphql
@@ -0,0 +1,10 @@
+query searchIterations($projectPath: ID!, $search: String, $id: ID) {
+  project(fullPath: $projectPath) {
+    iterations(title: $search, id: $id) {
+      nodes {
+        id
+        title
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/issues_list/queries/search_labels.query.graphql b/app/assets/javascripts/issues_list/queries/search_labels.query.graphql
new file mode 100644
index 00000000000..de884e1221c
--- /dev/null
+++ b/app/assets/javascripts/issues_list/queries/search_labels.query.graphql
@@ -0,0 +1,12 @@
+query searchLabels($projectPath: ID!, $search: String) {
+  project(fullPath: $projectPath) {
+    labels(searchTerm: $search, includeAncestorGroups: true) {
+      nodes {
+        id
+        color
+        textColor
+        title
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/issues_list/queries/search_milestones.query.graphql b/app/assets/javascripts/issues_list/queries/search_milestones.query.graphql
new file mode 100644
index 00000000000..91f74fd220b
--- /dev/null
+++ b/app/assets/javascripts/issues_list/queries/search_milestones.query.graphql
@@ -0,0 +1,10 @@
+query searchMilestones($projectPath: ID!, $search: String) {
+  project(fullPath: $projectPath) {
+    milestones(searchTitle: $search, includeAncestors: true) {
+      nodes {
+        id
+        title
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/issues_list/queries/search_users.query.graphql b/app/assets/javascripts/issues_list/queries/search_users.query.graphql
new file mode 100644
index 00000000000..953157cfe3a
--- /dev/null
+++ b/app/assets/javascripts/issues_list/queries/search_users.query.graphql
@@ -0,0 +1,14 @@
+query searchUsers($projectPath: ID!, $search: String) {
+  project(fullPath: $projectPath) {
+    projectMembers(search: $search) {
+      nodes {
+        user {
+          id
+          avatarUrl
+          name
+          username
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 2309f7a420f..63c25136f74 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -31,7 +31,7 @@ import initFrequentItemDropdowns from './frequent_items';
 import initBreadcrumbs from './breadcrumb';
 import initPersistentUserCallouts from './persistent_user_callouts';
 import { initUserTracking, initDefaultTrackers } from './tracking';
-import initUsagePingConsent from './usage_ping_consent';
+import initServicePingConsent from './service_ping_consent';
 import GlFieldErrors from './gl_field_errors';
 import initUserPopovers from './user_popovers';
 import initBroadcastNotifications from './broadcast_notification';
@@ -86,7 +86,7 @@ function deferredInitialisation() {
   initBreadcrumbs();
   initTodoToggle();
   initLogoAnimation();
-  initUsagePingConsent();
+  initServicePingConsent();
   initUserPopovers();
   initBroadcastNotifications();
   initFrequentItemDropdowns();
diff --git a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue
index 452420314ed..c7de8516c86 100644
--- a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue
+++ b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlLoadingIcon } from '@gitlab/ui';
 import { fetchPolicies } from '~/lib/graphql';
+import { queryToObject } from '~/lib/utils/url_utility';
 import { s__ } from '~/locale';
 
 import { unwrapStagesWithNeeds } from '~/pipelines/components/unwrapping_utils';
@@ -41,6 +42,7 @@ export default {
   },
   data() {
     return {
+      starterTemplateName: STARTER_TEMPLATE_NAME,
       ciConfigData: {},
       failureType: null,
       failureReasons: [],
@@ -160,7 +162,7 @@ export default {
       variables() {
         return {
           projectPath: this.projectFullPath,
-          templateName: STARTER_TEMPLATE_NAME,
+          templateName: this.starterTemplateName,
         };
       },
       skip({ isNewCiConfigFile }) {
@@ -203,6 +205,9 @@ export default {
       }
     },
   },
+  mounted() {
+    this.loadTemplateFromURL();
+  },
   methods: {
     hideFailure() {
       this.showFailure = false;
@@ -258,6 +263,14 @@ export default {
       // if the user has made changes to the file that are unsaved.
       this.lastCommittedContent = this.currentCiFileContent;
     },
+    loadTemplateFromURL() {
+      const templateName = queryToObject(window.location.search)?.template;
+
+      if (templateName) {
+        this.starterTemplateName = templateName;
+        this.setNewEmptyCiConfigFile();
+      }
+    },
   },
 };
 </script>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue b/app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue
index 104a3caab4c..1ce6654e0e9 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue
@@ -16,7 +16,6 @@ export default {
       consuming tasks, so you can spend more time creating.`),
     aboutRunnersBtnText: s__('Pipelines|Learn about Runners'),
     installRunnersBtnText: s__('Pipelines|Install GitLab Runners'),
-    getStartedBtnText: s__('Pipelines|Get started with CI/CD'),
     codeQualityTitle: s__('Pipelines|Improve code quality with GitLab CI/CD'),
     codeQualityDescription: s__(`Pipelines|To keep your codebase simple,
       readable, and accessible to contributors, use GitLab CI/CD
@@ -55,9 +54,6 @@ export default {
     ciHelpPagePath() {
       return helpPagePath('ci/quick_start/index.md');
     },
-    isPipelineEmptyStateTemplatesExperimentActive() {
-      return this.canSetCi && Boolean(getExperimentData('pipeline_empty_state_templates'));
-    },
     isCodeQualityExperimentActive() {
       return this.canSetCi && Boolean(getExperimentData('code_quality_walkthrough'));
     },
@@ -81,37 +77,8 @@ export default {
 </script>
 <template>
   <div>
-    <gitlab-experiment
-      v-if="isPipelineEmptyStateTemplatesExperimentActive"
-      name="pipeline_empty_state_templates"
-    >
-      <template #control>
-        <gl-empty-state
-          :title="$options.i18n.title"
-          :svg-path="emptyStateSvgPath"
-          :description="$options.i18n.description"
-          :primary-button-text="$options.i18n.getStartedBtnText"
-          :primary-button-link="ciHelpPagePath"
-        />
-      </template>
-      <template #candidate>
-        <pipelines-ci-templates />
-      </template>
-    </gitlab-experiment>
-    <gitlab-experiment v-else-if="isCodeQualityExperimentActive" name="code_quality_walkthrough">
-      <template #control>
-        <gl-empty-state
-          :title="$options.i18n.title"
-          :svg-path="emptyStateSvgPath"
-          :description="$options.i18n.description"
-        >
-          <template #actions>
-            <gl-button :href="ciHelpPagePath" variant="confirm" @click="trackClick()">
-              {{ $options.i18n.getStartedBtnText }}
-            </gl-button>
-          </template>
-        </gl-empty-state>
-      </template>
+    <gitlab-experiment v-if="isCodeQualityExperimentActive" name="code_quality_walkthrough">
+      <template #control><pipelines-ci-templates /></template>
       <template #candidate>
         <gl-empty-state
           :title="$options.i18n.codeQualityTitle"
@@ -127,23 +94,7 @@ export default {
       </template>
     </gitlab-experiment>
     <gitlab-experiment v-else-if="isCiRunnerTemplatesExperimentActive" name="ci_runner_templates">
-      <template #control>
-        <gl-empty-state
-          :title="$options.i18n.title"
-          :svg-path="emptyStateSvgPath"
-          :description="$options.i18n.description"
-        >
-          <template #actions>
-            <gl-button
-              :href="ciHelpPagePath"
-              variant="confirm"
-              @click="trackCiRunnerTemplatesClick('get_started_button_clicked')"
-            >
-              {{ $options.i18n.getStartedBtnText }}
-            </gl-button>
-          </template>
-        </gl-empty-state>
-      </template>
+      <template #control><pipelines-ci-templates /></template>
       <template #candidate>
         <gl-empty-state
           :title="$options.i18n.title"
@@ -169,14 +120,7 @@ export default {
         </gl-empty-state>
       </template>
     </gitlab-experiment>
-    <gl-empty-state
-      v-else-if="canSetCi"
-      :title="$options.i18n.title"
-      :svg-path="emptyStateSvgPath"
-      :description="$options.i18n.description"
-      :primary-button-text="$options.i18n.getStartedBtnText"
-      :primary-button-link="ciHelpPagePath"
-    />
+    <pipelines-ci-templates v-else-if="canSetCi" />
     <gl-empty-state
       v-else
       title=""
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_ci_templates.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_ci_templates.vue
index 9bb6075c050..c6c81d5253b 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_ci_templates.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_ci_templates.vue
@@ -1,9 +1,9 @@
 <script>
 import { GlAvatar, GlButton, GlCard, GlSprintf } from '@gitlab/ui';
-import ExperimentTracking from '~/experimentation/experiment_tracking';
 import { mergeUrlParams } from '~/lib/utils/url_utility';
 import { s__, sprintf } from '~/locale';
-import { HELLO_WORLD_TEMPLATE_KEY } from '../../constants';
+import { STARTER_TEMPLATE_NAME } from '~/pipeline_editor/constants';
+import Tracking from '~/tracking';
 
 export default {
   components: {
@@ -12,7 +12,8 @@ export default {
     GlCard,
     GlSprintf,
   },
-  HELLO_WORLD_TEMPLATE_KEY,
+  mixins: [Tracking.mixin()],
+  STARTER_TEMPLATE_NAME,
   i18n: {
     cta: s__('Pipelines|Use template'),
     testTemplates: {
@@ -20,10 +21,10 @@ export default {
       subtitle: s__(
         'Pipelines|Use a sample %{codeStart}.gitlab-ci.yml%{codeEnd} template file to explore how CI/CD works.',
       ),
-      helloWorld: {
-        title: s__('Pipelines|“Hello world” with GitLab CI/CD'),
+      gettingStarted: {
+        title: s__('Pipelines|Get started with GitLab CI/CD'),
         description: s__(
-          'Pipelines|Get familiar with GitLab CI/CD syntax by starting with a simple pipeline that runs a “Hello world” script.',
+          'Pipelines|Get familiar with GitLab CI/CD syntax by starting with a basic 3 stage CI/CD pipeline.',
         ),
       },
     },
@@ -35,31 +36,30 @@ export default {
       description: s__('Pipelines|CI/CD template to test and deploy your %{name} project.'),
     },
   },
-  inject: ['addCiYmlPath', 'suggestedCiTemplates'],
+  inject: ['pipelineEditorPath', 'suggestedCiTemplates'],
   data() {
     const templates = this.suggestedCiTemplates.map(({ name, logo }) => {
       return {
         name,
         logo,
-        link: mergeUrlParams({ template: name }, this.addCiYmlPath),
+        link: mergeUrlParams({ template: name }, this.pipelineEditorPath),
         description: sprintf(this.$options.i18n.templates.description, { name }),
       };
     });
 
     return {
       templates,
-      helloWorldTemplateUrl: mergeUrlParams(
-        { template: HELLO_WORLD_TEMPLATE_KEY },
-        this.addCiYmlPath,
+      gettingStartedTemplateUrl: mergeUrlParams(
+        { template: STARTER_TEMPLATE_NAME },
+        this.pipelineEditorPath,
       ),
     };
   },
   methods: {
     trackEvent(template) {
-      const tracking = new ExperimentTracking('pipeline_empty_state_templates', {
+      this.track('template_clicked', {
         label: template,
       });
-      tracking.event('template_clicked');
     },
   },
 };
@@ -82,18 +82,18 @@ export default {
             <div class="gl-py-5"><gl-emoji class="gl-font-size-h2-xl" data-name="wave" /></div>
             <div class="gl-mb-3">
               <strong class="gl-text-gray-800 gl-mb-2">{{
-                $options.i18n.testTemplates.helloWorld.title
+                $options.i18n.testTemplates.gettingStarted.title
               }}</strong>
             </div>
-            <p class="gl-font-sm">{{ $options.i18n.testTemplates.helloWorld.description }}</p>
+            <p class="gl-font-sm">{{ $options.i18n.testTemplates.gettingStarted.description }}</p>
           </div>
 
           <gl-button
             category="primary"
             variant="confirm"
-            :href="helloWorldTemplateUrl"
+            :href="gettingStartedTemplateUrl"
             data-testid="test-template-link"
-            @click="trackEvent($options.HELLO_WORLD_TEMPLATE_KEY)"
+            @click="trackEvent($options.STARTER_TEMPLATE_NAME)"
           >
             {{ $options.i18n.cta }}
           </gl-button>
diff --git a/app/assets/javascripts/pipelines/constants.js b/app/assets/javascripts/pipelines/constants.js
index 01705e7726f..21b114825a6 100644
--- a/app/assets/javascripts/pipelines/constants.js
+++ b/app/assets/javascripts/pipelines/constants.js
@@ -35,6 +35,3 @@ export const POST_FAILURE = 'post_failure';
 export const UNSUPPORTED_DATA = 'unsupported_data';
 
 export const CHILD_VIEW = 'child';
-
-// The key of the template is the same as the filename
-export const HELLO_WORLD_TEMPLATE_KEY = 'Hello-World';
diff --git a/app/assets/javascripts/pipelines/pipelines_index.js b/app/assets/javascripts/pipelines/pipelines_index.js
index 925a96ea1aa..c4c2b5f2927 100644
--- a/app/assets/javascripts/pipelines/pipelines_index.js
+++ b/app/assets/javascripts/pipelines/pipelines_index.js
@@ -29,7 +29,7 @@ export const initPipelinesIndex = (selector = '#pipelines-list-vue') => {
     errorStateSvgPath,
     noPipelinesSvgPath,
     newPipelinePath,
-    addCiYmlPath,
+    pipelineEditorPath,
     suggestedCiTemplates,
     canCreatePipeline,
     hasGitlabCi,
@@ -44,7 +44,7 @@ export const initPipelinesIndex = (selector = '#pipelines-list-vue') => {
   return new Vue({
     el,
     provide: {
-      addCiYmlPath,
+      pipelineEditorPath,
       artifactsEndpoint,
       artifactsEndpointPlaceholder,
       suggestedCiTemplates: JSON.parse(suggestedCiTemplates),
diff --git a/app/assets/javascripts/usage_ping_consent.js b/app/assets/javascripts/service_ping_consent.js
index 621a8d9d3b6..f145a1b30db 100644
--- a/app/assets/javascripts/usage_ping_consent.js
+++ b/app/assets/javascripts/service_ping_consent.js
@@ -5,19 +5,20 @@ import { parseBoolean } from './lib/utils/common_utils';
 import { __ } from './locale';
 
 export default () => {
-  $('body').on('click', '.js-usage-consent-action', (e) => {
+  $('body').on('click', '.js-service-ping-consent-action', (e) => {
     e.preventDefault();
     e.stopImmediatePropagation(); // overwrite rails listener
 
-    const { url, checkEnabled, pingEnabled } = e.target.dataset;
+    const { url, checkEnabled, servicePingEnabled } = e.target.dataset;
     const data = {
       application_setting: {
         version_check_enabled: parseBoolean(checkEnabled),
-        usage_ping_enabled: parseBoolean(pingEnabled),
+        service_ping_enabled: parseBoolean(servicePingEnabled),
       },
     };
 
-    const hideConsentMessage = () => hideFlash(document.querySelector('.ping-consent-message'));
+    const hideConsentMessage = () =>
+      hideFlash(document.querySelector('.service-ping-consent-message'));
 
     axios
       .put(url, data)
diff --git a/app/assets/javascripts/static_site_editor/constants.js b/app/assets/javascripts/static_site_editor/constants.js
index b08bf26e1dc..ab7fd0542bf 100644
--- a/app/assets/javascripts/static_site_editor/constants.js
+++ b/app/assets/javascripts/static_site_editor/constants.js
@@ -28,7 +28,8 @@ export const TRACKING_ACTION_CREATE_COMMIT = 'create_commit';
 export const TRACKING_ACTION_CREATE_MERGE_REQUEST = 'create_merge_request';
 export const TRACKING_ACTION_INITIALIZE_EDITOR = 'initialize_editor';
 
-export const USAGE_PING_TRACKING_ACTION_CREATE_COMMIT = 'static_site_editor_commits';
-export const USAGE_PING_TRACKING_ACTION_CREATE_MERGE_REQUEST = 'static_site_editor_merge_requests';
+export const SERVICE_PING_TRACKING_ACTION_CREATE_COMMIT = 'static_site_editor_commits';
+export const SERVICE_PING_TRACKING_ACTION_CREATE_MERGE_REQUEST =
+  'static_site_editor_merge_requests';
 
 export const MR_META_LOCAL_STORAGE_KEY = 'sse-merge-request-meta-storage-key';
diff --git a/app/assets/javascripts/static_site_editor/services/submit_content_changes.js b/app/assets/javascripts/static_site_editor/services/submit_content_changes.js
index ecb7f60a421..99534413d92 100644
--- a/app/assets/javascripts/static_site_editor/services/submit_content_changes.js
+++ b/app/assets/javascripts/static_site_editor/services/submit_content_changes.js
@@ -9,8 +9,8 @@ import {
   SUBMIT_CHANGES_MERGE_REQUEST_ERROR,
   TRACKING_ACTION_CREATE_COMMIT,
   TRACKING_ACTION_CREATE_MERGE_REQUEST,
-  USAGE_PING_TRACKING_ACTION_CREATE_COMMIT,
-  USAGE_PING_TRACKING_ACTION_CREATE_MERGE_REQUEST,
+  SERVICE_PING_TRACKING_ACTION_CREATE_COMMIT,
+  SERVICE_PING_TRACKING_ACTION_CREATE_MERGE_REQUEST,
   DEFAULT_FORMATTING_CHANGES_COMMIT_MESSAGE,
   DEFAULT_FORMATTING_CHANGES_COMMIT_DESCRIPTION,
 } from '../constants';
@@ -58,7 +58,7 @@ const createUpdateSourceFileAction = (sourcePath, content) => [
 
 const commit = (projectId, message, branch, actions) => {
   Tracking.event(document.body.dataset.page, TRACKING_ACTION_CREATE_COMMIT);
-  Api.trackRedisCounterEvent(USAGE_PING_TRACKING_ACTION_CREATE_COMMIT);
+  Api.trackRedisCounterEvent(SERVICE_PING_TRACKING_ACTION_CREATE_COMMIT);
 
   return Api.commitMultiple(
     projectId,
@@ -74,7 +74,7 @@ const commit = (projectId, message, branch, actions) => {
 
 const createMergeRequest = (projectId, title, description, sourceBranch, targetBranch) => {
   Tracking.event(document.body.dataset.page, TRACKING_ACTION_CREATE_MERGE_REQUEST);
-  Api.trackRedisCounterEvent(USAGE_PING_TRACKING_ACTION_CREATE_MERGE_REQUEST);
+  Api.trackRedisCounterEvent(SERVICE_PING_TRACKING_ACTION_CREATE_MERGE_REQUEST);
 
   return Api.createProjectMergeRequest(
     projectId,
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue
index 10be0099fb7..1fc845dfd79 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue
@@ -6,6 +6,7 @@ import {
   GlDropdownSectionHeader,
   GlLoadingIcon,
 } from '@gitlab/ui';
+import { debounce } from 'lodash';
 
 import { DEBOUNCE_DELAY } from '../constants';
 import { getRecentlyUsedSuggestions, setTokenValueToRecentlyUsed } from '../filtered_search_utils';
@@ -128,12 +129,12 @@ export default {
     },
   },
   methods: {
-    handleInput({ data }) {
+    handleInput: debounce(function debouncedSearch({ data }) {
       this.searchKey = data;
-      setTimeout(() => {
-        if (!this.suggestionsLoading) this.$emit('fetch-suggestions', data);
-      }, DEBOUNCE_DELAY);
-    },
+      if (!this.suggestionsLoading) {
+        this.$emit('fetch-suggestions', data);
+      }
+    }, DEBOUNCE_DELAY),
     handleTokenValueSelected(activeTokenValue) {
       // Make sure that;
       // 1. Recently used values feature is enabled
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/iteration_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/iteration_token.vue
index cdb04ea79e1..15260763329 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/iteration_token.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/iteration_token.vue
@@ -7,6 +7,7 @@ import {
 } from '@gitlab/ui';
 import { debounce } from 'lodash';
 import createFlash from '~/flash';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { __ } from '~/locale';
 import { DEBOUNCE_DELAY, DEFAULT_ITERATIONS } from '../constants';
 
@@ -30,7 +31,7 @@ export default {
   data() {
     return {
       iterations: this.config.initialIterations || [],
-      loading: true,
+      loading: false,
     };
   },
   computed: {
@@ -38,7 +39,9 @@ export default {
       return this.value.data;
     },
     activeIteration() {
-      return this.iterations.find((iteration) => iteration.id === Number(this.currentValue));
+      return this.iterations.find(
+        (iteration) => getIdFromGraphQLId(iteration.id) === Number(this.currentValue),
+      );
     },
     defaultIterations() {
       return this.config.defaultIterations || DEFAULT_ITERATIONS;
@@ -55,6 +58,9 @@ export default {
     },
   },
   methods: {
+    getValue(iteration) {
+      return String(getIdFromGraphQLId(iteration.id));
+    },
     fetchIterationBySearchTerm(searchTerm) {
       const fetchPromise = this.config.fetchPath
         ? this.config.fetchIterations(this.config.fetchPath, searchTerm)
@@ -102,7 +108,7 @@ export default {
         <gl-filtered-search-suggestion
           v-for="iteration in iterations"
           :key="iteration.id"
-          :value="String(iteration.id)"
+          :value="getValue(iteration)"
         >
           {{ iteration.title }}
         </gl-filtered-search-suggestion>
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue
index 4099ac6071c..16738ae52c5 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue
@@ -35,7 +35,7 @@ export default {
     return {
       milestones: this.config.initialMilestones || [],
       defaultMilestones: this.config.defaultMilestones || DEFAULT_MILESTONES,
-      loading: true,
+      loading: false,
     };
   },
   computed: {
@@ -60,11 +60,16 @@ export default {
   },
   methods: {
     fetchMilestoneBySearchTerm(searchTerm = '') {
+      if (this.loading) {
+        return;
+      }
+
       this.loading = true;
       this.config
         .fetchMilestones(searchTerm)
-        .then(({ data }) => {
-          this.milestones = data.sort(sortMilestonesByDueDate);
+        .then((response) => {
+          const data = Array.isArray(response) ? response : response.data;
+          this.milestones = data.slice().sort(sortMilestonesByDueDate);
         })
         .catch(() => createFlash({ message: __('There was a problem fetching milestones.') }))
         .finally(() => {