Add latest changes from gitlab-org/gitlab@16-5-stable-eev16.5.0-rc42

29 files changed, 295 insertions, 268 deletions

diff --git a/app/assets/javascripts/pages/admin/application_settings/general/components/signup_form.vue b/app/assets/javascripts/pages/admin/application_settings/general/components/signup_form.vue
index cde46c3da50..cd6c9677b5f 100644
--- a/app/assets/javascripts/pages/admin/application_settings/general/components/signup_form.vue
+++ b/app/assets/javascripts/pages/admin/application_settings/general/components/signup_form.vue
@@ -268,7 +268,7 @@ export default {
         name="application_setting[signup_enabled]"
         :help-text="signupEnabledHelpText"
         :label="$options.i18n.signupEnabledLabel"
-        data-qa-selector="signup_enabled_checkbox"
+        data-testid="signup-enabled-checkbox"
       />
 
       <signup-checkbox
@@ -277,7 +277,6 @@ export default {
         name="application_setting[require_admin_approval_after_user_signup]"
         :help-text="requireAdminApprovalHelpText"
         :label="$options.i18n.requireAdminApprovalLabel"
-        data-qa-selector="require_admin_approval_after_user_signup_checkbox"
         data-testid="require-admin-approval-checkbox"
       />
 
@@ -452,7 +451,7 @@ export default {
     </section>
 
     <gl-button
-      data-qa-selector="save_changes_button"
+      data-testid="save-changes-button"
       variant="confirm"
       @click.prevent="submitButtonHandler"
     >
diff --git a/app/assets/javascripts/pages/groups/custom_emoji/index.js b/app/assets/javascripts/pages/groups/custom_emoji/index.js
new file mode 100644
index 00000000000..dd02a6f5348
--- /dev/null
+++ b/app/assets/javascripts/pages/groups/custom_emoji/index.js
@@ -0,0 +1,3 @@
+import { initCustomEmojis } from '~/custom_emoji/custom_emoji_bundle';
+
+requestIdleCallback(initCustomEmojis);
diff --git a/app/assets/javascripts/pages/groups/observability/dashboards/index.js b/app/assets/javascripts/pages/groups/observability/dashboards/index.js
deleted file mode 100644
index c3b6ce6f99f..00000000000
--- a/app/assets/javascripts/pages/groups/observability/dashboards/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import ObservabilityApp from '~/observability';
-
-ObservabilityApp();
diff --git a/app/assets/javascripts/pages/groups/observability/datasources/index.js b/app/assets/javascripts/pages/groups/observability/datasources/index.js
deleted file mode 100644
index c3b6ce6f99f..00000000000
--- a/app/assets/javascripts/pages/groups/observability/datasources/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import ObservabilityApp from '~/observability';
-
-ObservabilityApp();
diff --git a/app/assets/javascripts/pages/groups/observability/explore/index.js b/app/assets/javascripts/pages/groups/observability/explore/index.js
deleted file mode 100644
index c3b6ce6f99f..00000000000
--- a/app/assets/javascripts/pages/groups/observability/explore/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import ObservabilityApp from '~/observability';
-
-ObservabilityApp();
diff --git a/app/assets/javascripts/pages/groups/observability/manage/index.js b/app/assets/javascripts/pages/groups/observability/manage/index.js
deleted file mode 100644
index c3b6ce6f99f..00000000000
--- a/app/assets/javascripts/pages/groups/observability/manage/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import ObservabilityApp from '~/observability';
-
-ObservabilityApp();
diff --git a/app/assets/javascripts/pages/groups/work_items/show/index.js b/app/assets/javascripts/pages/groups/work_items/show/index.js
new file mode 100644
index 00000000000..c091fbcc2b2
--- /dev/null
+++ b/app/assets/javascripts/pages/groups/work_items/show/index.js
@@ -0,0 +1,4 @@
+import { WORKSPACE_GROUP } from '~/issues/constants';
+import { initWorkItemsRoot } from '~/work_items';
+
+initWorkItemsRoot(WORKSPACE_GROUP);
diff --git a/app/assets/javascripts/pages/import/bulk_imports/history/components/bulk_imports_history_app.vue b/app/assets/javascripts/pages/import/bulk_imports/history/components/bulk_imports_history_app.vue
index 1d0eaae4c57..459546a5562 100644
--- a/app/assets/javascripts/pages/import/bulk_imports/history/components/bulk_imports_history_app.vue
+++ b/app/assets/javascripts/pages/import/bulk_imports/history/components/bulk_imports_history_app.vue
@@ -168,13 +168,22 @@ export default {
       }
     },
 
-    getFullDestinationUrl(params) {
+    destinationLinkHref(params) {
       return joinPaths(gon.relative_url_root || '', '/', params.destination_full_path);
     },
 
-    getPresentationUrl(item) {
+    pathWithSuffix(path, item) {
       const suffix = item.entity_type === WORKSPACE_GROUP ? '/' : '';
-      return `${item.destination_full_path}${suffix}`;
+      return `${path}${suffix}`;
+    },
+
+    destinationLinkText(item) {
+      return this.pathWithSuffix(item.destination_full_path, item);
+    },
+
+    destinationText(item) {
+      const fullPath = joinPaths(item.destination_namespace, item.destination_slug);
+      return this.pathWithSuffix(fullPath, item);
     },
 
     getEntityTooltip(item) {
@@ -187,6 +196,11 @@ export default {
           return '';
       }
     },
+
+    setPageSize(size) {
+      this.paginationConfig.perPage = size;
+      this.paginationConfig.page = 1;
+    },
   },
 
   gitlabLogo: window.gon.gitlab_logo,
@@ -218,19 +232,21 @@ export default {
         class="gl-w-full"
       >
         <template #cell(destination_name)="{ item }">
-          <template v-if="item.destination_full_path">
-            <gl-icon
-              v-gl-tooltip
-              :name="item.entity_type"
-              :title="getEntityTooltip(item)"
-              :aria-label="getEntityTooltip(item)"
-              class="gl-text-gray-500"
-            />
-            <gl-link :href="getFullDestinationUrl(item)" target="_blank">
-              {{ getPresentationUrl(item) }}
-            </gl-link>
-          </template>
-          <gl-loading-icon v-else inline />
+          <gl-icon
+            v-gl-tooltip
+            :name="item.entity_type"
+            :title="getEntityTooltip(item)"
+            :aria-label="getEntityTooltip(item)"
+            class="gl-text-gray-500"
+          />
+          <gl-link
+            v-if="item.destination_full_path"
+            :href="destinationLinkHref(item)"
+            target="_blank"
+          >
+            {{ destinationLinkText(item) }}
+          </gl-link>
+          <span v-else>{{ destinationText(item) }}</span>
         </template>
         <template #cell(created_at)="{ value }">
           <time-ago :time="value" />
@@ -253,7 +269,7 @@ export default {
         :page-info="pageInfo"
         class="gl-m-0 gl-mt-3"
         @set-page="paginationConfig.page = $event"
-        @set-page-size="paginationConfig.perPage = $event"
+        @set-page-size="setPageSize"
       />
     </template>
     <local-storage-sync
diff --git a/app/assets/javascripts/pages/organizations/organizations/index/index.js b/app/assets/javascripts/pages/organizations/organizations/index/index.js
new file mode 100644
index 00000000000..c7e087b81c6
--- /dev/null
+++ b/app/assets/javascripts/pages/organizations/organizations/index/index.js
@@ -0,0 +1,3 @@
+import { initOrganizationsIndex } from '~/organizations/index';
+
+initOrganizationsIndex();
diff --git a/app/assets/javascripts/pages/organizations/organizations/new/index.js b/app/assets/javascripts/pages/organizations/organizations/new/index.js
new file mode 100644
index 00000000000..ab23fbf155d
--- /dev/null
+++ b/app/assets/javascripts/pages/organizations/organizations/new/index.js
@@ -0,0 +1,3 @@
+import { initOrganizationsNew } from '~/organizations/new';
+
+initOrganizationsNew();
diff --git a/app/assets/javascripts/pages/projects/blob/show/index.js b/app/assets/javascripts/pages/projects/blob/show/index.js
index a3d930433c3..07662e4411e 100644
--- a/app/assets/javascripts/pages/projects/blob/show/index.js
+++ b/app/assets/javascripts/pages/projects/blob/show/index.js
@@ -21,6 +21,7 @@ import RefSelector from '~/ref/components/ref_selector.vue';
 import { joinPaths, visitUrl } from '~/lib/utils/url_utility';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import HighlightWorker from '~/vue_shared/components/source_viewer/workers/highlight_worker?worker';
+import initAmbiguousRefModal from '~/ref/init_ambiguous_ref_modal';
 
 Vue.use(Vuex);
 Vue.use(VueApollo);
@@ -62,6 +63,7 @@ const initRefSwitcher = () => {
 };
 
 initRefSwitcher();
+initAmbiguousRefModal();
 
 if (viewBlobEl) {
   const {
diff --git a/app/assets/javascripts/pages/projects/find_file/ref_switcher/index.js b/app/assets/javascripts/pages/projects/find_file/ref_switcher/index.js
index 9a3bb25de70..ffd4ef9efbb 100644
--- a/app/assets/javascripts/pages/projects/find_file/ref_switcher/index.js
+++ b/app/assets/javascripts/pages/projects/find_file/ref_switcher/index.js
@@ -2,7 +2,7 @@ import Vue from 'vue';
 import { s__ } from '~/locale';
 import Translate from '~/vue_shared/translate';
 import RefSelector from '~/ref/components/ref_selector.vue';
-import { visitUrl } from '~/lib/utils/url_utility';
+import { joinPaths, visitUrl } from '~/lib/utils/url_utility';
 import { generateRefDestinationPath } from './ref_switcher_utils';
 
 Vue.use(Translate);
@@ -13,7 +13,7 @@ export default () => {
   const el = document.getElementById('js-blob-ref-switcher');
   if (!el) return false;
 
-  const { projectId, ref, namespace } = el.dataset;
+  const { projectId, ref, refType, namespace } = el.dataset;
 
   return new Vue({
     el,
@@ -21,7 +21,8 @@ export default () => {
       return createElement(RefSelector, {
         props: {
           projectId,
-          value: ref,
+          value: refType ? joinPaths('refs', refType, ref) : ref,
+          useSymbolicRefNames: Boolean(refType),
           translations: {
             dropdownHeader: REF_SWITCH_HEADER,
             searchPlaceholder: REF_SWITCH_HEADER,
diff --git a/app/assets/javascripts/pages/projects/find_file/ref_switcher/ref_switcher_utils.js b/app/assets/javascripts/pages/projects/find_file/ref_switcher/ref_switcher_utils.js
index 5fecd024f1a..21a30f1c54b 100644
--- a/app/assets/javascripts/pages/projects/find_file/ref_switcher/ref_switcher_utils.js
+++ b/app/assets/javascripts/pages/projects/find_file/ref_switcher/ref_switcher_utils.js
@@ -10,19 +10,32 @@ export function generateRefDestinationPath(selectedRef, namespace) {
     return window.location.href;
   }
 
+  let refType = null;
   const { pathname } = window.location;
   const encodedHash = '%23';
 
   const [projectRootPath] = pathname.split(namespace);
+  let actualRef = selectedRef;
+
+  const matches = selectedRef.match(/^refs\/(heads|tags)\/(.+)/);
+  if (matches) {
+    [, refType, actualRef] = matches;
+  }
 
   const destinationPath = joinPaths(
     projectRootPath,
     namespace,
-    encodeURI(selectedRef).replace(/#/g, encodedHash),
+    encodeURI(actualRef).replace(/#/g, encodedHash),
   );
 
   const newURL = new URL(window.location);
   newURL.pathname = destinationPath;
 
+  if (refType) {
+    newURL.searchParams.set('ref_type', refType.toLowerCase());
+  } else {
+    newURL.searchParams.delete('ref_type');
+  }
+
   return newURL.href;
 }
diff --git a/app/assets/javascripts/pages/projects/find_file/show/index.js b/app/assets/javascripts/pages/projects/find_file/show/index.js
index e207df2434b..22c21430e8b 100644
--- a/app/assets/javascripts/pages/projects/find_file/show/index.js
+++ b/app/assets/javascripts/pages/projects/find_file/show/index.js
@@ -6,8 +6,9 @@ import InitBlobRefSwitcher from '../ref_switcher';
 InitBlobRefSwitcher();
 const findElement = document.querySelector('.js-file-finder');
 const projectFindFile = new ProjectFindFile($('.file-finder-holder'), {
-  url: findElement.dataset.fileFindUrl,
   treeUrl: findElement.dataset.findTreeUrl,
   blobUrlTemplate: findElement.dataset.blobUrlTemplate,
+  refType: findElement.dataset.refType,
 });
+projectFindFile.load(findElement.dataset.fileFindUrl);
 new ShortcutsFindFile(projectFindFile); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/pages/projects/graphs/charts/index.js b/app/assets/javascripts/pages/projects/graphs/charts/index.js
index 10c794c9ba2..c24a69bc26b 100644
--- a/app/assets/javascripts/pages/projects/graphs/charts/index.js
+++ b/app/assets/javascripts/pages/projects/graphs/charts/index.js
@@ -1,6 +1,5 @@
 import { GlColumnChart } from '@gitlab/ui/dist/charts';
 import Vue from 'vue';
-import { waitForCSSLoaded } from '~/helpers/startup_css_helper';
 import { __ } from '~/locale';
 import { visitUrl } from '~/lib/utils/url_utility';
 import { REF_TYPE_BRANCHES, REF_TYPE_TAGS } from '~/ref/constants';
@@ -10,205 +9,203 @@ import SeriesDataMixin from './series_data_mixin';
 
 const seriesDataToBarData = (raw) => Object.entries(raw).map(([name, data]) => ({ name, data }));
 
-waitForCSSLoaded(() => {
-  const languagesContainer = document.getElementById('js-languages-chart');
-  const codeCoverageContainer = document.getElementById('js-code-coverage-chart');
-  const monthContainer = document.getElementById('js-month-chart');
-  const weekdayContainer = document.getElementById('js-weekday-chart');
-  const hourContainer = document.getElementById('js-hour-chart');
-  const branchSelector = document.getElementById('js-project-graph-ref-switcher');
-  const LANGUAGE_CHART_HEIGHT = 300;
-  const reorderWeekDays = (weekDays, firstDayOfWeek = 0) => {
-    if (firstDayOfWeek === 0) {
-      return weekDays;
-    }
+const languagesContainer = document.getElementById('js-languages-chart');
+const codeCoverageContainer = document.getElementById('js-code-coverage-chart');
+const monthContainer = document.getElementById('js-month-chart');
+const weekdayContainer = document.getElementById('js-weekday-chart');
+const hourContainer = document.getElementById('js-hour-chart');
+const branchSelector = document.getElementById('js-project-graph-ref-switcher');
+const LANGUAGE_CHART_HEIGHT = 300;
+const reorderWeekDays = (weekDays, firstDayOfWeek = 0) => {
+  if (firstDayOfWeek === 0) {
+    return weekDays;
+  }
 
-    return Object.keys(weekDays).reduce((acc, dayName, idx, arr) => {
-      const reorderedDayName = arr[(idx + firstDayOfWeek) % arr.length];
+  return Object.keys(weekDays).reduce((acc, dayName, idx, arr) => {
+    const reorderedDayName = arr[(idx + firstDayOfWeek) % arr.length];
 
-      return {
-        ...acc,
-        [reorderedDayName]: weekDays[reorderedDayName],
-      };
-    }, {});
-  };
+    return {
+      ...acc,
+      [reorderedDayName]: weekDays[reorderedDayName],
+    };
+  }, {});
+};
 
-  // eslint-disable-next-line no-new
-  new Vue({
-    el: languagesContainer,
-    components: {
-      GlColumnChart,
-    },
-    data() {
-      return {
-        chartData: JSON.parse(languagesContainer.dataset.chartData),
-      };
-    },
-    computed: {
-      seriesData() {
-        return [{ name: 'full', data: this.chartData.map((d) => [d.label, d.value]) }];
+// eslint-disable-next-line no-new
+new Vue({
+  el: languagesContainer,
+  components: {
+    GlColumnChart,
+  },
+  data() {
+    return {
+      chartData: JSON.parse(languagesContainer.dataset.chartData),
+    };
+  },
+  computed: {
+    seriesData() {
+      return [{ name: 'full', data: this.chartData.map((d) => [d.label, d.value]) }];
+    },
+  },
+  render(h) {
+    return h(GlColumnChart, {
+      props: {
+        bars: this.seriesData,
+        xAxisTitle: __('Used programming language'),
+        yAxisTitle: __('Percentage'),
+        xAxisType: 'category',
       },
-    },
-    render(h) {
-      return h(GlColumnChart, {
-        props: {
-          bars: this.seriesData,
-          xAxisTitle: __('Used programming language'),
-          yAxisTitle: __('Percentage'),
-          xAxisType: 'category',
-        },
-        attrs: {
-          height: LANGUAGE_CHART_HEIGHT,
-          responsive: true,
-        },
-      });
-    },
-  });
+      attrs: {
+        height: LANGUAGE_CHART_HEIGHT,
+        responsive: true,
+      },
+    });
+  },
+});
 
-  const {
-    graphEndpoint,
-    graphEndDate,
-    graphStartDate,
-    graphRef,
-    graphCsvPath,
-  } = codeCoverageContainer.dataset;
-  // eslint-disable-next-line no-new
-  new Vue({
-    el: codeCoverageContainer,
-    render(h) {
-      return h(CodeCoverage, {
-        props: {
-          graphEndpoint,
-          graphEndDate,
-          graphStartDate,
-          graphRef,
-          graphCsvPath,
-        },
-      });
-    },
-  });
+const {
+  graphEndpoint,
+  graphEndDate,
+  graphStartDate,
+  graphRef,
+  graphCsvPath,
+} = codeCoverageContainer.dataset;
+// eslint-disable-next-line no-new
+new Vue({
+  el: codeCoverageContainer,
+  render(h) {
+    return h(CodeCoverage, {
+      props: {
+        graphEndpoint,
+        graphEndDate,
+        graphStartDate,
+        graphRef,
+        graphCsvPath,
+      },
+    });
+  },
+});
 
-  // eslint-disable-next-line no-new
-  new Vue({
-    el: monthContainer,
-    components: {
-      GlColumnChart,
-    },
-    mixins: [SeriesDataMixin],
-    data() {
-      return {
-        chartData: JSON.parse(monthContainer.dataset.chartData),
-      };
-    },
-    render(h) {
-      return h(GlColumnChart, {
-        props: {
-          bars: seriesDataToBarData(this.seriesData),
-          xAxisTitle: __('Day of month'),
-          yAxisTitle: __('No. of commits'),
-          xAxisType: 'category',
-        },
-        attrs: {
-          responsive: true,
-        },
-      });
-    },
-  });
+// eslint-disable-next-line no-new
+new Vue({
+  el: monthContainer,
+  components: {
+    GlColumnChart,
+  },
+  mixins: [SeriesDataMixin],
+  data() {
+    return {
+      chartData: JSON.parse(monthContainer.dataset.chartData),
+    };
+  },
+  render(h) {
+    return h(GlColumnChart, {
+      props: {
+        bars: seriesDataToBarData(this.seriesData),
+        xAxisTitle: __('Day of month'),
+        yAxisTitle: __('No. of commits'),
+        xAxisType: 'category',
+      },
+      attrs: {
+        responsive: true,
+      },
+    });
+  },
+});
 
-  // eslint-disable-next-line no-new
-  new Vue({
-    el: weekdayContainer,
-    components: {
-      GlColumnChart,
-    },
-    data() {
-      return {
-        chartData: JSON.parse(weekdayContainer.dataset.chartData),
-      };
-    },
-    computed: {
-      seriesData() {
-        const weekDays = reorderWeekDays(this.chartData, gon.first_day_of_week);
-        const data = Object.keys(weekDays).reduce((acc, key) => {
-          acc.push([key, weekDays[key]]);
-          return acc;
-        }, []);
-        return [{ name: 'full', data }];
+// eslint-disable-next-line no-new
+new Vue({
+  el: weekdayContainer,
+  components: {
+    GlColumnChart,
+  },
+  data() {
+    return {
+      chartData: JSON.parse(weekdayContainer.dataset.chartData),
+    };
+  },
+  computed: {
+    seriesData() {
+      const weekDays = reorderWeekDays(this.chartData, gon.first_day_of_week);
+      const data = Object.keys(weekDays).reduce((acc, key) => {
+        acc.push([key, weekDays[key]]);
+        return acc;
+      }, []);
+      return [{ name: 'full', data }];
+    },
+  },
+  render(h) {
+    return h(GlColumnChart, {
+      props: {
+        bars: this.seriesData,
+        xAxisTitle: __('Weekday'),
+        yAxisTitle: __('No. of commits'),
+        xAxisType: 'category',
       },
-    },
-    render(h) {
-      return h(GlColumnChart, {
-        props: {
-          bars: this.seriesData,
-          xAxisTitle: __('Weekday'),
-          yAxisTitle: __('No. of commits'),
-          xAxisType: 'category',
-        },
-        attrs: {
-          responsive: true,
-        },
-      });
-    },
-  });
+      attrs: {
+        responsive: true,
+      },
+    });
+  },
+});
 
-  // eslint-disable-next-line no-new
-  new Vue({
-    el: hourContainer,
-    components: {
-      GlColumnChart,
-    },
-    mixins: [SeriesDataMixin],
-    data() {
-      return {
-        chartData: JSON.parse(hourContainer.dataset.chartData),
-      };
-    },
-    render(h) {
-      return h(GlColumnChart, {
-        props: {
-          bars: seriesDataToBarData(this.seriesData),
-          xAxisTitle: __('Hour (UTC)'),
-          yAxisTitle: __('No. of commits'),
-          xAxisType: 'category',
-        },
-        attrs: {
-          responsive: true,
-        },
-      });
-    },
-  });
+// eslint-disable-next-line no-new
+new Vue({
+  el: hourContainer,
+  components: {
+    GlColumnChart,
+  },
+  mixins: [SeriesDataMixin],
+  data() {
+    return {
+      chartData: JSON.parse(hourContainer.dataset.chartData),
+    };
+  },
+  render(h) {
+    return h(GlColumnChart, {
+      props: {
+        bars: seriesDataToBarData(this.seriesData),
+        xAxisTitle: __('Hour (UTC)'),
+        yAxisTitle: __('No. of commits'),
+        xAxisType: 'category',
+      },
+      attrs: {
+        responsive: true,
+      },
+    });
+  },
+});
 
-  const { projectId, projectBranch, graphPath } = branchSelector.dataset;
+const { projectId, projectBranch, graphPath } = branchSelector.dataset;
 
-  const GRAPHS_PATH_REGEX = /^(.*?)\/-\/graphs/g;
-  const graphsPathPrefix = graphPath.match(GRAPHS_PATH_REGEX)?.[0];
-  if (!graphsPathPrefix) {
-    // eslint-disable-next-line @gitlab/require-i18n-strings
-    throw new Error('Path is not correct');
-  }
+const GRAPHS_PATH_REGEX = /^(.*?)\/-\/graphs/g;
+const graphsPathPrefix = graphPath.match(GRAPHS_PATH_REGEX)?.[0];
+if (!graphsPathPrefix) {
+  // eslint-disable-next-line @gitlab/require-i18n-strings
+  throw new Error('Path is not correct');
+}
 
-  // eslint-disable-next-line no-new
-  new Vue({
-    el: branchSelector,
-    name: 'RefSelector',
-    render(createComponent) {
-      return createComponent(RefSelector, {
-        props: {
-          enabledRefTypes: [REF_TYPE_BRANCHES, REF_TYPE_TAGS],
-          value: projectBranch,
-          translations: {
-            dropdownHeader: __('Switch branch/tag'),
-            searchPlaceholder: __('Search branches and tags'),
-          },
-          projectId,
+// eslint-disable-next-line no-new
+new Vue({
+  el: branchSelector,
+  name: 'RefSelector',
+  render(createComponent) {
+    return createComponent(RefSelector, {
+      props: {
+        enabledRefTypes: [REF_TYPE_BRANCHES, REF_TYPE_TAGS],
+        value: projectBranch,
+        translations: {
+          dropdownHeader: __('Switch branch/tag'),
+          searchPlaceholder: __('Search branches and tags'),
         },
-        class: 'gl-w-20',
-        on: {
-          input(selected) {
-            visitUrl(`${graphsPathPrefix}/${encodeURIComponent(selected)}/charts`);
-          },
+        projectId,
+      },
+      class: 'gl-w-20',
+      on: {
+        input(selected) {
+          visitUrl(`${graphsPathPrefix}/${encodeURIComponent(selected)}/charts`);
         },
-      });
-    },
-  });
+      },
+    });
+  },
 });
diff --git a/app/assets/javascripts/pages/projects/issues/service_desk/index.js b/app/assets/javascripts/pages/projects/issues/service_desk/index.js
index ead15143072..4118541d973 100644
--- a/app/assets/javascripts/pages/projects/issues/service_desk/index.js
+++ b/app/assets/javascripts/pages/projects/issues/service_desk/index.js
@@ -1,6 +1,4 @@
-import { initFilteredSearchServiceDesk } from '~/issues';
-import { mountServiceDeskListApp } from '~/issues/service_desk';
+import { initFilteredSearchServiceDesk, mountServiceDeskListApp } from '~/issues/service_desk';
 
 initFilteredSearchServiceDesk();
-
 mountServiceDeskListApp();
diff --git a/app/assets/javascripts/pages/projects/jobs/show/index.js b/app/assets/javascripts/pages/projects/jobs/show/index.js
index cd83f2b7b64..6618b68e9fe 100644
--- a/app/assets/javascripts/pages/projects/jobs/show/index.js
+++ b/app/assets/javascripts/pages/projects/jobs/show/index.js
@@ -1,3 +1,3 @@
-import initJobDetails from '~/ci/job_details';
+import { initJobDetails } from '~/ci/job_details';
 
 initJobDetails();
diff --git a/app/assets/javascripts/pages/projects/merge_requests/creations/new/index.js b/app/assets/javascripts/pages/projects/merge_requests/creations/new/index.js
index d23a0615bb8..8cb1462c883 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/creations/new/index.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/creations/new/index.js
@@ -43,6 +43,7 @@ if (mrNewCompareNode) {
         project: 'js-source-project',
         branch: 'js-source-branch gl-font-monospace',
       },
+      compareSide: 'source',
     },
     methods: {
       async selectedBranch(branchName) {
diff --git a/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js b/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js
index 2cdbf0fb830..af1635221ab 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js
@@ -4,8 +4,9 @@ import { s__ } from '~/locale';
 import ShortcutsIssuable from '~/behaviors/shortcuts/shortcuts_issuable';
 import { initPipelineCountListener } from '~/commit/pipelines/utils';
 import { initIssuableSidebar } from '~/issuable';
-import MergeRequestStatusBadge from '~/merge_requests/components/merge_request_status_badge.vue';
+import MergeRequestHeader from '~/merge_requests/components/merge_request_header.vue';
 import createDefaultClient from '~/lib/graphql';
+import { parseBoolean } from '~/lib/utils/common_utils';
 import initSourcegraph from '~/sourcegraph';
 import ZenMode from '~/zen_mode';
 import initAwardsApp from '~/emoji/awards_app';
@@ -14,7 +15,7 @@ import { initMrExperienceSurvey } from '~/surveys/merge_request_experience';
 import toast from '~/vue_shared/plugins/global_toast';
 import getStateQuery from './queries/get_state.query.graphql';
 
-export default function initMergeRequestShow() {
+export default function initMergeRequestShow(store) {
   new ZenMode(); // eslint-disable-line no-new
   initPipelineCountListener(document.querySelector('#commit-pipeline-table-view'));
   new ShortcutsIssuable(true); // eslint-disable-line no-new
@@ -23,26 +24,27 @@ export default function initMergeRequestShow() {
   initAwardsApp(document.getElementById('js-vue-awards-block'));
   initMrExperienceSurvey();
 
-  const el = document.querySelector('.js-mr-status-box');
-  const { iid, issuableType, projectPath, state } = el.dataset;
+  const el = document.querySelector('.js-mr-header');
+  const { hidden, iid, projectPath, state } = el.dataset;
 
   // eslint-disable-next-line no-new
   new Vue({
     el,
-    name: 'IssuableStatusBoxRoot',
+    name: 'MergeRequestHeaderRoot',
+    store,
     apolloProvider: new VueApollo({
       defaultClient: createDefaultClient(),
     }),
     provide: {
       query: getStateQuery,
+      hidden: parseBoolean(hidden),
       iid,
       projectPath,
     },
     render(createElement) {
-      return createElement(MergeRequestStatusBadge, {
+      return createElement(MergeRequestHeader, {
         props: {
           initialState: state,
-          issuableType,
         },
       });
     },
diff --git a/app/assets/javascripts/pages/projects/merge_requests/page.js b/app/assets/javascripts/pages/projects/merge_requests/page.js
index f7b522f7c85..fb243d01dc6 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/page.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/page.js
@@ -1,7 +1,6 @@
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import initMrNotes from 'ee_else_ce/mr_notes';
-import { mountHeaderMetadata } from '~/merge_requests';
 import StickyHeader from '~/merge_requests/components/sticky_header.vue';
 import { start as startCodeReviewMessaging } from '~/code_review/signals';
 import diffsEventHub from '~/diffs/event_hub';
@@ -17,14 +16,13 @@ Vue.use(VueApollo);
 
 export function initMrPage() {
   initMrNotes();
-  initShow();
+  initShow(store);
   initMrMoreDropdown();
   startCodeReviewMessaging({ signalBus: diffsEventHub });
 }
 
 requestIdleCallback(() => {
   initSidebarBundle(store);
-  mountHeaderMetadata(store);
 
   const el = document.getElementById('js-merge-sticky-header');
 
diff --git a/app/assets/javascripts/pages/projects/ml/models/show/index.js b/app/assets/javascripts/pages/projects/ml/models/show/index.js
new file mode 100644
index 00000000000..87ee5c851f6
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/ml/models/show/index.js
@@ -0,0 +1,4 @@
+import { initSimpleApp } from '~/helpers/init_simple_app_helper';
+import { ShowMlModel } from '~/ml/model_registry/apps';
+
+initSimpleApp('#js-mount-show-ml-model', ShowMlModel);
diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue
index 642fd56eab1..9c4582ece21 100644
--- a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue
@@ -1,12 +1,5 @@
 <script>
-import {
-  GlFormRadio,
-  GlFormRadioGroup,
-  GlIcon,
-  GlLink,
-  GlSprintf,
-  GlTooltipDirective,
-} from '@gitlab/ui';
+import { GlFormRadio, GlFormRadioGroup, GlIcon, GlLink, GlTooltipDirective } from '@gitlab/ui';
 import { getWeekdayNames } from '~/lib/utils/datetime_utility';
 import { __, s__, sprintf } from '~/locale';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -23,7 +16,6 @@ export default {
     GlFormRadioGroup,
     GlIcon,
     GlLink,
-    GlSprintf,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -97,8 +89,7 @@ export default {
         },
         {
           value: KEY_CUSTOM,
-          text: s__('PipelineScheduleIntervalPattern|Custom (%{linkStart}Learn more%{linkEnd}.)'),
-          link: this.cronSyntaxUrl,
+          text: s__('PipelineScheduleIntervalPattern|Custom'),
         },
       ];
     },
@@ -155,6 +146,10 @@ export default {
       return value === KEY_CUSTOM && this.dailyLimit;
     },
   },
+  i18n: {
+    learnCronSyntax: s__('PipelineScheduleIntervalPattern|Set a custom interval with Cron syntax.'),
+    cronSyntaxLink: s__('PipelineScheduleIntervalPattern|What is Cron syntax?'),
+  },
 };
 </script>
 
@@ -167,19 +162,14 @@ export default {
         :value="option.value"
         :data-testid="option.value"
       >
-        <gl-sprintf v-if="option.link" :message="option.text">
-          <template #link="{ content }">
-            <gl-link :href="option.link" target="_blank" class="gl-font-sm">{{ content }}</gl-link>
-          </template>
-        </gl-sprintf>
-
-        <template v-else>{{ option.text }}</template>
+        {{ option.text }}
 
         <gl-icon
           v-if="showDailyLimitMessage(option)"
           v-gl-tooltip.hover
           name="question-o"
           :title="scheduleDailyLimitMsg"
+          data-testid="daily-limit"
         />
       </gl-form-radio>
     </gl-form-radio-group>
@@ -193,5 +183,11 @@ export default {
       required="true"
       @input="onCustomInput"
     />
+    <p class="gl-mt-1 gl-mb-0 gl-text-secondary">
+      {{ $options.i18n.learnCronSyntax }}
+      <gl-link :href="cronSyntaxUrl" target="_blank">
+        {{ $options.i18n.cronSyntaxLink }}
+      </gl-link>
+    </p>
   </div>
 </template>
diff --git a/app/assets/javascripts/pages/projects/show/index.js b/app/assets/javascripts/pages/projects/show/index.js
index bee0731d711..98c58515d24 100644
--- a/app/assets/javascripts/pages/projects/show/index.js
+++ b/app/assets/javascripts/pages/projects/show/index.js
@@ -7,6 +7,7 @@ import initTerraformNotification from '~/projects/terraform_notification';
 import { initUploadFileTrigger } from '~/projects/upload_file';
 import initReadMore from '~/read_more';
 import initForksButton from '~/forks/init_forks_button';
+import initAmbiguousRefModal from '~/ref/init_ambiguous_ref_modal';
 
 // Project show page loads different overview content based on user preferences
 if (document.getElementById('js-tree-list')) {
@@ -45,6 +46,7 @@ initTerraformNotification();
 
 initReadMore();
 initStarButton();
+initAmbiguousRefModal();
 
 if (document.querySelector('.js-autodevops-banner')) {
   import(/* webpackChunkName: 'userCallOut' */ '~/user_callout')
diff --git a/app/assets/javascripts/pages/projects/tree/show/index.js b/app/assets/javascripts/pages/projects/tree/show/index.js
index 17c17014ece..d87f8898c63 100644
--- a/app/assets/javascripts/pages/projects/tree/show/index.js
+++ b/app/assets/javascripts/pages/projects/tree/show/index.js
@@ -2,7 +2,9 @@ import $ from 'jquery';
 import initTree from 'ee_else_ce/repository';
 import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 import NewCommitForm from '~/new_commit_form';
+import initAmbiguousRefModal from '~/ref/init_ambiguous_ref_modal';
 
 new NewCommitForm($('.js-create-dir-form')); // eslint-disable-line no-new
 initTree();
+initAmbiguousRefModal();
 new ShortcutsNavigation(); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/pages/projects/work_items/index.js b/app/assets/javascripts/pages/projects/work_items/index.js
index 11c257611f0..b44ca708b28 100644
--- a/app/assets/javascripts/pages/projects/work_items/index.js
+++ b/app/assets/javascripts/pages/projects/work_items/index.js
@@ -1,3 +1,3 @@
-import { initWorkItemsRoot } from '~/work_items/index';
+import { initWorkItemsRoot } from '~/work_items';
 
 initWorkItemsRoot();
diff --git a/app/assets/javascripts/pages/registrations/new/index.js b/app/assets/javascripts/pages/registrations/new/index.js
index 84050c3cb0f..90a9c9e7279 100644
--- a/app/assets/javascripts/pages/registrations/new/index.js
+++ b/app/assets/javascripts/pages/registrations/new/index.js
@@ -1,5 +1,3 @@
-import { trackNewRegistrations } from '~/google_tag_manager';
-
 import NoEmojiValidator from '~/emoji/no_emoji_validator';
 import LengthValidator from '~/validators/length_validator';
 import UsernameValidator from '~/pages/sessions/new/username_validator';
@@ -13,8 +11,6 @@ new LengthValidator(); // eslint-disable-line no-new
 new NoEmojiValidator(); // eslint-disable-line no-new
 new EmailFormatValidator(); // eslint-disable-line no-new
 
-trackNewRegistrations();
-
 Tracking.enableFormTracking({
   forms: { allow: ['new_user'] },
 });
diff --git a/app/assets/javascripts/pages/shared/wikis/components/delete_wiki_modal.vue b/app/assets/javascripts/pages/shared/wikis/components/delete_wiki_modal.vue
index 3792dad376b..3c070d2708d 100644
--- a/app/assets/javascripts/pages/shared/wikis/components/delete_wiki_modal.vue
+++ b/app/assets/javascripts/pages/shared/wikis/components/delete_wiki_modal.vue
@@ -77,7 +77,7 @@ export default {
       v-gl-modal="$options.modal.modalId"
       category="secondary"
       variant="danger"
-      data-qa-selector="delete_button"
+      data-qa-selector="delete-button"
     >
       {{ $options.i18n.deletePageText }}
     </gl-button>
diff --git a/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue b/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue
index 553cb1f0464..eaa99556994 100644
--- a/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue
+++ b/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue
@@ -317,7 +317,7 @@ export default {
             name="wiki[title]"
             type="text"
             class="form-control"
-            data-qa-selector="wiki_title_textbox"
+            data-testid="wiki-title-textbox"
             :required="true"
             :autofocus="!pageInfo.persisted"
             :placeholder="$options.i18n.title.placeholder"
@@ -397,7 +397,7 @@ export default {
             name="wiki[message]"
             type="text"
             class="form-control"
-            data-qa-selector="wiki_message_textbox"
+            data-testid="wiki-message-textbox"
             :placeholder="$options.i18n.commitMessage.label"
           />
         </gl-form-group>
@@ -409,7 +409,6 @@ export default {
         category="primary"
         variant="confirm"
         type="submit"
-        data-qa-selector="wiki_submit_button"
         data-testid="wiki-submit-button"
         :disabled="disableSubmitButton"
         >{{ submitButtonText }}</gl-button
diff --git a/app/assets/javascripts/pages/users/terms/index/index.js b/app/assets/javascripts/pages/users/terms/index/index.js
index 29ddde6da94..3619bcff65c 100644
--- a/app/assets/javascripts/pages/users/terms/index/index.js
+++ b/app/assets/javascripts/pages/users/terms/index/index.js
@@ -1,4 +1,3 @@
 import { initTermsApp } from '~/terms';
-import { waitForCSSLoaded } from '~/helpers/startup_css_helper';
 
-waitForCSSLoaded(initTermsApp);
+initTermsApp();