Add latest changes from gitlab-org/gitlab@master

18 files changed, 372 insertions, 60 deletions

diff --git a/app/assets/javascripts/emoji/components/picker.vue b/app/assets/javascripts/emoji/components/picker.vue
index 71cabe80529..e08d294b8c5 100644
--- a/app/assets/javascripts/emoji/components/picker.vue
+++ b/app/assets/javascripts/emoji/components/picker.vue
@@ -79,6 +79,7 @@ export default {
       :toggle-class="toggleClass"
       :boundary="getBoundaryElement()"
       menu-class="dropdown-extended-height"
+      category="tertiary"
       no-flip
       right
       lazy
diff --git a/app/assets/javascripts/integrations/edit/components/jira_trigger_fields.vue b/app/assets/javascripts/integrations/edit/components/jira_trigger_fields.vue
index b0f19e5b585..93d8bcc4c19 100644
--- a/app/assets/javascripts/integrations/edit/components/jira_trigger_fields.vue
+++ b/app/assets/javascripts/integrations/edit/components/jira_trigger_fields.vue
@@ -16,13 +16,13 @@ const commentDetailOptions = [
   {
     value: 'standard',
     label: s__('Integrations|Standard'),
-    help: s__('Integrations|Includes commit title and branch'),
+    help: s__('Integrations|Includes commit title and branch.'),
   },
   {
     value: 'all_details',
     label: s__('Integrations|All details'),
     help: s__(
-      'Integrations|Includes Standard plus entire commit message, commit hash, and issue IDs',
+      'Integrations|Includes Standard, plus the entire commit message, commit hash, and issue IDs',
     ),
   },
 ];
@@ -144,7 +144,7 @@ export default {
       label-for="service[trigger]"
       :description="
         s__(
-          'Integrations|When a Jira issue is mentioned in a commit or merge request a remote link and comment (if enabled) is created.',
+          'Integrations|When you mention a Jira issue in a commit or merge request, GitLab creates a remote link and comment (if enabled).',
         )
       "
     >
diff --git a/app/assets/javascripts/notes/components/note_actions.vue b/app/assets/javascripts/notes/components/note_actions.vue
index 16c76e048bd..0cc818c6d0e 100644
--- a/app/assets/javascripts/notes/components/note_actions.vue
+++ b/app/assets/javascripts/notes/components/note_actions.vue
@@ -278,7 +278,6 @@ export default {
       v-if="canResolve"
       ref="resolveButton"
       v-gl-tooltip
-      size="small"
       category="tertiary"
       :variant="resolveVariant"
       :class="{ 'is-disabled': !resolvable, 'is-active': isResolved }"
@@ -292,7 +291,7 @@ export default {
     <template v-if="canAwardEmoji">
       <emoji-picker
         v-if="glFeatures.improvedEmojiPicker"
-        toggle-class="note-action-button note-emoji-button gl-text-gray-600 gl-m-2 gl-p-0! gl-shadow-none! gl-bg-transparent!"
+        toggle-class="note-action-button note-emoji-button gl-text-gray-600 gl-m-3 gl-p-0! gl-shadow-none! gl-bg-transparent!"
         @click="setAwardEmoji"
       >
         <template #button-content>
@@ -305,10 +304,9 @@ export default {
         v-else
         v-gl-tooltip
         :class="{ 'js-user-authored': isAuthoredByCurrentUser }"
-        class="note-action-button note-emoji-button add-reaction-button js-add-award js-note-emoji"
+        class="note-action-button note-emoji-button add-reaction-button btn-icon js-add-award js-note-emoji"
         category="tertiary"
         variant="default"
-        size="small"
         :title="$options.i18n.addReactionLabel"
         :aria-label="$options.i18n.addReactionLabel"
         data-position="right"
@@ -336,7 +334,6 @@ export default {
       :title="$options.i18n.editCommentLabel"
       :aria-label="$options.i18n.editCommentLabel"
       icon="pencil"
-      size="small"
       category="tertiary"
       class="note-action-button js-note-edit"
       data-qa-selector="note_edit_button"
@@ -347,7 +344,6 @@ export default {
       v-gl-tooltip
       :title="$options.i18n.deleteCommentLabel"
       :aria-label="$options.i18n.deleteCommentLabel"
-      size="small"
       icon="remove"
       category="tertiary"
       class="note-action-button js-note-delete"
@@ -360,7 +356,6 @@ export default {
         :title="$options.i18n.moreActionsLabel"
         :aria-label="$options.i18n.moreActionsLabel"
         icon="ellipsis_v"
-        size="small"
         category="tertiary"
         class="note-action-button more-actions-toggle"
         data-toggle="dropdown"
diff --git a/app/assets/javascripts/notes/components/note_actions/reply_button.vue b/app/assets/javascripts/notes/components/note_actions/reply_button.vue
index 5ce03091504..0cd2afcf8a0 100644
--- a/app/assets/javascripts/notes/components/note_actions/reply_button.vue
+++ b/app/assets/javascripts/notes/components/note_actions/reply_button.vue
@@ -22,7 +22,6 @@ export default {
     data-track-event="click_button"
     data-track-label="reply_comment_button"
     category="tertiary"
-    size="small"
     icon="comment"
     :title="$options.i18n.buttonText"
     :aria-label="$options.i18n.buttonText"
diff --git a/app/assets/javascripts/pipeline_editor/components/drawer/cards/first_pipeline_card.vue b/app/assets/javascripts/pipeline_editor/components/drawer/cards/first_pipeline_card.vue
new file mode 100644
index 00000000000..22c1563350d
--- /dev/null
+++ b/app/assets/javascripts/pipeline_editor/components/drawer/cards/first_pipeline_card.vue
@@ -0,0 +1,67 @@
+<script>
+import { GlCard, GlLink, GlSprintf } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import PipelineVisualReference from '../ui/pipeline_visual_reference.vue';
+
+export default {
+  i18n: {
+    title: s__('PipelineEditorTutorial|🚀 Run your first pipeline'),
+    firstParagraph: s__(
+      'PipelineEditorTutorial|A typical GitLab pipeline consists of three stages: build, test and deploy. Each stage can have one or more jobs.',
+    ),
+    secondParagraph: s__(
+      'PipelineEditorTutorial|In the example below, %{codeStart}build%{codeEnd} and %{codeStart}deploy%{codeEnd} each contain one job, and %{codeStart}test%{codeEnd} contains two jobs. Your scripts run in jobs like these.',
+    ),
+    thirdParagraph: s__(
+      'PipelineEditorTutorial|You can use %{linkStart}CI/CD examples and templates%{linkEnd} to get your first %{codeStart}.gitlab-ci.yml%{codeEnd} configuration file started. Your first pipeline runs when you commit the changes.',
+    ),
+    note: s__(
+      'PipelineEditorTutorial|If you’re using a self-managed GitLab instance, %{linkStart}make sure your instance has runners available.%{linkEnd}',
+    ),
+  },
+  components: {
+    GlCard,
+    GlLink,
+    GlSprintf,
+    PipelineVisualReference,
+  },
+  inject: ['ciExamplesHelpPagePath', 'runnerHelpPagePath'],
+};
+</script>
+<template>
+  <gl-card>
+    <template #default>
+      <h4 class="gl-font-lg gl-mt-0">{{ $options.i18n.title }}</h4>
+      <p class="gl-mb-3">{{ $options.i18n.firstParagraph }}</p>
+      <p class="gl-mb-3">
+        <gl-sprintf :message="$options.i18n.secondParagraph">
+          <template #code="{ content }">
+            <code>{{ content }}</code>
+          </template>
+        </gl-sprintf>
+      </p>
+      <pipeline-visual-reference />
+      <p class="gl-my-3">
+        <gl-sprintf :message="$options.i18n.thirdParagraph">
+          <template #link="{ content }">
+            <gl-link :href="ciExamplesHelpPagePath" target="_blank">
+              {{ content }}
+            </gl-link>
+          </template>
+          <template #code="{ content }">
+            <code>{{ content }}</code>
+          </template>
+        </gl-sprintf>
+      </p>
+      <p class="gl-mb-0">
+        <gl-sprintf :message="$options.i18n.note">
+          <template #link="{ content }">
+            <gl-link :href="runnerHelpPagePath" target="_blank">
+              {{ content }}
+            </gl-link>
+          </template>
+        </gl-sprintf>
+      </p>
+    </template>
+  </gl-card>
+</template>
diff --git a/app/assets/javascripts/pipeline_editor/components/drawer/cards/getting_started_card.vue b/app/assets/javascripts/pipeline_editor/components/drawer/cards/getting_started_card.vue
new file mode 100644
index 00000000000..3da535f5f94
--- /dev/null
+++ b/app/assets/javascripts/pipeline_editor/components/drawer/cards/getting_started_card.vue
@@ -0,0 +1,35 @@
+<script>
+import { GlCard, GlSprintf } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+export default {
+  i18n: {
+    title: s__('PipelineEditorTutorial|Get started with GitLab CI/CD'),
+    firstParagraph: s__(
+      'PipelineEditorTutorial|GitLab CI/CD can automatically build, test, and deploy your application.',
+    ),
+    secondParagraph: s__(
+      'PipelineEditorTutorial|The pipeline stages and jobs are defined in a %{codeStart}.gitlab-ci.yml%{codeEnd} file. You can edit, visualize and validate the syntax in this file by using the Pipeline Editor.',
+    ),
+  },
+  components: {
+    GlCard,
+    GlSprintf,
+  },
+};
+</script>
+<template>
+  <gl-card>
+    <template #default>
+      <h4 class="gl-font-lg gl-mt-0">{{ $options.i18n.title }}</h4>
+      <p class="gl-mb-3">{{ $options.i18n.firstParagraph }}</p>
+      <p class="gl-mb-0">
+        <gl-sprintf :message="$options.i18n.secondParagraph">
+          <template #code="{ content }">
+            <code>{{ content }}</code>
+          </template>
+        </gl-sprintf>
+      </p>
+    </template>
+  </gl-card>
+</template>
diff --git a/app/assets/javascripts/pipeline_editor/components/drawer/cards/pipeline_config_reference_card.vue b/app/assets/javascripts/pipeline_editor/components/drawer/cards/pipeline_config_reference_card.vue
new file mode 100644
index 00000000000..f714f6411f1
--- /dev/null
+++ b/app/assets/javascripts/pipeline_editor/components/drawer/cards/pipeline_config_reference_card.vue
@@ -0,0 +1,75 @@
+<script>
+import { GlCard, GlLink, GlSprintf } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+export default {
+  i18n: {
+    title: s__('PipelineEditorTutorial|⚙️ Pipeline configuration reference'),
+    firstParagraph: s__('PipelineEditorTutorial|Resources to help with your CI/CD configuration:'),
+    browseExamples: s__(
+      'PipelineEditorTutorial|Browse %{linkStart}CI/CD examples and templates%{linkEnd}',
+    ),
+    viewSyntaxRef: s__(
+      'PipelineEditorTutorial|View %{linkStart}.gitlab-ci.yml syntax reference%{linkEnd}',
+    ),
+    learnMore: s__(
+      'PipelineEditorTutorial|Learn more about %{linkStart}GitLab CI/CD concepts%{linkEnd}',
+    ),
+    needs: s__(
+      'PipelineEditorTutorial|Make your pipeline more efficient with the %{linkStart}Needs keyword%{linkEnd}',
+    ),
+  },
+  components: {
+    GlCard,
+    GlLink,
+    GlSprintf,
+  },
+  inject: ['ciExamplesHelpPagePath', 'ciHelpPagePath', 'needsHelpPagePath', 'ymlHelpPagePath'],
+};
+</script>
+<template>
+  <gl-card>
+    <template #default>
+      <h4 class="gl-font-lg gl-mt-0">{{ $options.i18n.title }}</h4>
+      <p class="gl-mb-3">{{ $options.i18n.firstParagraph }}</p>
+      <ul>
+        <li>
+          <gl-sprintf :message="$options.i18n.browseExamples">
+            <template #link="{ content }">
+              <gl-link :href="ciExamplesHelpPagePath" target="_blank">
+                {{ content }}
+              </gl-link>
+            </template>
+          </gl-sprintf>
+        </li>
+        <li>
+          <gl-sprintf :message="$options.i18n.viewSyntaxRef">
+            <template #link="{ content }">
+              <gl-link :href="ymlHelpPagePath" target="_blank">
+                {{ content }}
+              </gl-link>
+            </template>
+          </gl-sprintf>
+        </li>
+        <li>
+          <gl-sprintf :message="$options.i18n.learnMore">
+            <template #link="{ content }">
+              <gl-link :href="ciHelpPagePath" target="_blank">
+                {{ content }}
+              </gl-link>
+            </template>
+          </gl-sprintf>
+        </li>
+        <li>
+          <gl-sprintf :message="$options.i18n.needs">
+            <template #link="{ content }">
+              <gl-link :href="needsHelpPagePath" target="_blank">
+                {{ content }}
+              </gl-link>
+            </template>
+          </gl-sprintf>
+        </li>
+      </ul>
+    </template>
+  </gl-card>
+</template>
diff --git a/app/assets/javascripts/pipeline_editor/components/drawer/cards/visualize_and_lint_card.vue b/app/assets/javascripts/pipeline_editor/components/drawer/cards/visualize_and_lint_card.vue
new file mode 100644
index 00000000000..512414f0246
--- /dev/null
+++ b/app/assets/javascripts/pipeline_editor/components/drawer/cards/visualize_and_lint_card.vue
@@ -0,0 +1,24 @@
+<script>
+import { GlCard } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+export default {
+  i18n: {
+    title: s__('PipelineEditorTutorial|💡 Tip: Visualize and validate your pipeline'),
+    firstParagraph: s__(
+      'PipelineEditorTutorial|Use the Visualize and Lint tabs in the Pipeline Editor to visualize your pipeline and check for any errors or warnings before committing your changes.',
+    ),
+  },
+  components: {
+    GlCard,
+  },
+};
+</script>
+<template>
+  <gl-card>
+    <template #default>
+      <h4 class="gl-font-lg gl-mt-0">{{ $options.i18n.title }}</h4>
+      <p class="gl-mb-0">{{ $options.i18n.firstParagraph }}</p>
+    </template>
+  </gl-card>
+</template>
diff --git a/app/assets/javascripts/pipeline_editor/components/drawer/pipeline_editor_drawer.vue b/app/assets/javascripts/pipeline_editor/components/drawer/pipeline_editor_drawer.vue
index ef5be8abf9a..e1f38b4332b 100644
--- a/app/assets/javascripts/pipeline_editor/components/drawer/pipeline_editor_drawer.vue
+++ b/app/assets/javascripts/pipeline_editor/components/drawer/pipeline_editor_drawer.vue
@@ -1,6 +1,10 @@
 <script>
 import { GlButton, GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
+import FirstPipelineCard from './cards/first_pipeline_card.vue';
+import GettingStartedCard from './cards/getting_started_card.vue';
+import PipelineConfigReferenceCard from './cards/pipeline_config_reference_card.vue';
+import VisualizeAndLintCard from './cards/visualize_and_lint_card.vue';
 
 export default {
   width: {
@@ -11,6 +15,10 @@ export default {
     toggleTxt: __('Collapse'),
   },
   components: {
+    FirstPipelineCard,
+    GettingStartedCard,
+    PipelineConfigReferenceCard,
+    VisualizeAndLintCard,
     GlButton,
     GlIcon,
   },
@@ -55,7 +63,7 @@ export default {
 <template>
   <aside
     aria-live="polite"
-    class="gl-fixed gl-right-0 gl-h-full gl-bg-gray-10 gl-transition-medium gl-border-l-solid gl-border-1 gl-border-gray-100"
+    class="gl-fixed gl-right-0 gl-bg-gray-10 gl-shadow-drawer gl-transition-medium gl-border-l-solid gl-border-1 gl-border-gray-100 gl-h-full gl-z-index-9999 gl-overflow-y-auto"
     :style="rootStyle"
   >
     <gl-button
@@ -63,14 +71,19 @@ export default {
       class="gl-w-full gl-h-9 gl-rounded-0! gl-border-none! gl-border-b-solid! gl-border-1! gl-border-gray-100 gl-text-decoration-none! gl-outline-0! gl-display-flex"
       :class="buttonClass"
       :title="__('Toggle sidebar')"
-      data-testid="toggleBtn"
       @click="toggleDrawer"
     >
-      <span v-if="isExpanded" class="gl-text-gray-500 gl-mr-3" data-testid="collapse-text">{{
-        __('Collapse')
-      }}</span>
+      <span v-if="isExpanded" class="gl-text-gray-500 gl-mr-3" data-testid="collapse-text">
+        {{ __('Collapse') }}
+      </span>
       <gl-icon data-testid="toggle-icon" :name="buttonIconName" />
     </gl-button>
-    <div v-if="isExpanded" class="gl-p-5" data-testid="drawer-content"></div>
+    <div v-if="isExpanded" class="gl-h-full gl-p-5" data-testid="drawer-content">
+      <getting-started-card class="gl-mb-4" />
+      <first-pipeline-card class="gl-mb-4" />
+      <visualize-and-lint-card class="gl-mb-4" />
+      <pipeline-config-reference-card />
+      <div class="gl-h-13"></div>
+    </div>
   </aside>
 </template>
diff --git a/app/assets/javascripts/pipeline_editor/components/drawer/ui/demo_job_pill.vue b/app/assets/javascripts/pipeline_editor/components/drawer/ui/demo_job_pill.vue
new file mode 100644
index 00000000000..049504181c4
--- /dev/null
+++ b/app/assets/javascripts/pipeline_editor/components/drawer/ui/demo_job_pill.vue
@@ -0,0 +1,17 @@
+<script>
+export default {
+  props: {
+    jobName: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <div
+    class="gl-w-13 gl-h-6 gl-font-sm gl-bg-white gl-inset-border-1-blue-500 gl-text-center gl-text-truncate gl-rounded-pill gl-px-4 gl-py-2 gl-relative gl-z-index-1 gl-transition-duration-slow gl-transition-timing-function-ease"
+  >
+    {{ jobName }}
+  </div>
+</template>
diff --git a/app/assets/javascripts/pipeline_editor/components/drawer/ui/pipeline_visual_reference.vue b/app/assets/javascripts/pipeline_editor/components/drawer/ui/pipeline_visual_reference.vue
new file mode 100644
index 00000000000..1017237365b
--- /dev/null
+++ b/app/assets/javascripts/pipeline_editor/components/drawer/ui/pipeline_visual_reference.vue
@@ -0,0 +1,43 @@
+<script>
+import { s__ } from '~/locale';
+import DemoJobPill from './demo_job_pill.vue';
+
+export default {
+  i18n: {
+    stageNames: {
+      build: s__('StageName|Build'),
+      test: s__('StageName|Test'),
+      deploy: s__('StageName|Deploy'),
+    },
+    jobNames: {
+      build: s__('JobName|build-job'),
+      test_1: s__('JobName|unit-test'),
+      test_2: s__('JobName|lint-test'),
+      deploy: s__('JobName|deploy-app'),
+    },
+  },
+  stageClasses:
+    'gl-bg-blue-50 gl-display-flex gl-flex-direction-column gl-align-items-center gl-p-4 gl-rounded-base',
+  titleClasses: 'gl-text-blue-600 gl-mb-4',
+  components: {
+    DemoJobPill,
+  },
+};
+</script>
+<template>
+  <div class="gl-display-flex gl-justify-content-center">
+    <div :class="$options.stageClasses" class="gl-mr-5">
+      <div :class="$options.titleClasses">{{ $options.i18n.stageNames.build }}</div>
+      <demo-job-pill :job-name="$options.i18n.jobNames.build" />
+    </div>
+    <div :class="$options.stageClasses" class="gl-mr-5">
+      <div :class="$options.titleClasses">{{ $options.i18n.stageNames.test }}</div>
+      <demo-job-pill class="gl-mb-3" :job-name="$options.i18n.jobNames.test_1" />
+      <demo-job-pill :job-name="$options.i18n.jobNames.test_2" />
+    </div>
+    <div :class="$options.stageClasses">
+      <div :class="$options.titleClasses">{{ $options.i18n.stageNames.deploy }}</div>
+      <demo-job-pill :job-name="$options.i18n.jobNames.deploy" />
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/pipeline_editor/index.js b/app/assets/javascripts/pipeline_editor/index.js
index 9c5681cf74b..361e2b64e0b 100644
--- a/app/assets/javascripts/pipeline_editor/index.js
+++ b/app/assets/javascripts/pipeline_editor/index.js
@@ -30,13 +30,19 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => {
     pipelineEtag,
     // Add to provide/inject API for static values
     ciConfigPath,
+    ciExamplesHelpPagePath,
+    ciHelpPagePath,
     defaultBranch,
     emptyStateIllustrationPath,
+    helpPaths,
     lintHelpPagePath,
+    needsHelpPagePath,
     newMergeRequestPath,
+    pipelinePagePath,
     projectFullPath,
     projectPath,
     projectNamespace,
+    runnerHelpPagePath,
     ymlHelpPagePath,
   } = el?.dataset;
 
@@ -80,15 +86,21 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => {
     apolloProvider,
     provide: {
       ciConfigPath,
+      ciExamplesHelpPagePath,
+      ciHelpPagePath,
+      configurationPaths,
       defaultBranch,
       emptyStateIllustrationPath,
+      helpPaths,
       lintHelpPagePath,
+      needsHelpPagePath,
       newMergeRequestPath,
+      pipelinePagePath,
       projectFullPath,
       projectPath,
       projectNamespace,
+      runnerHelpPagePath,
       ymlHelpPagePath,
-      configurationPaths,
     },
     render(h) {
       return h(PipelineEditorApp);
diff --git a/app/assets/javascripts/registry/explorer/components/details_page/details_header.vue b/app/assets/javascripts/registry/explorer/components/details_page/details_header.vue
index 0422bfb13c5..80ed9a32039 100644
--- a/app/assets/javascripts/registry/explorer/components/details_page/details_header.vue
+++ b/app/assets/javascripts/registry/explorer/components/details_page/details_header.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlButton, GlIcon, GlTooltipDirective } from '@gitlab/ui';
-import { sprintf, n__ } from '~/locale';
+import { sprintf, n__, s__ } from '~/locale';
 import MetadataItem from '~/vue_shared/components/registry/metadata_item.vue';
 import TitleArea from '~/vue_shared/components/registry/title_area.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
@@ -23,6 +23,8 @@ import {
   ROOT_IMAGE_TOOLTIP,
 } from '../../constants/index';
 
+import getContainerRepositoryTagsCountQuery from '../../graphql/queries/get_container_repository_tags_count.query.graphql';
+
 export default {
   name: 'DetailsHeader',
   components: { GlButton, GlIcon, TitleArea, MetadataItem },
@@ -35,60 +37,77 @@ export default {
       type: Object,
       required: true,
     },
-    metadataLoading: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
     disabled: {
       type: Boolean,
       default: false,
       required: false,
     },
   },
+  data() {
+    return {
+      containerRepository: {},
+      fetchTagsCount: false,
+    };
+  },
+  apollo: {
+    containerRepository: {
+      query: getContainerRepositoryTagsCountQuery,
+      variables() {
+        return {
+          id: this.image.id,
+        };
+      },
+    },
+  },
   computed: {
+    imageDetails() {
+      return { ...this.image, ...this.containerRepository };
+    },
     visibilityIcon() {
-      return this.image?.project?.visibility === 'public' ? 'eye' : 'eye-slash';
+      return this.imageDetails?.project?.visibility === 'public' ? 'eye' : 'eye-slash';
     },
     timeAgo() {
-      return this.timeFormatted(this.image.updatedAt);
+      return this.timeFormatted(this.imageDetails.updatedAt);
     },
     updatedText() {
       return sprintf(UPDATED_AT, { time: this.timeAgo });
     },
     tagCountText() {
-      return n__('%d tag', '%d tags', this.image.tagsCount);
+      if (this.$apollo.queries.containerRepository.loading) {
+        return s__('ContainerRegistry|-- tags');
+      }
+      return n__('%d tag', '%d tags', this.imageDetails.tagsCount);
     },
     cleanupTextAndTooltip() {
-      if (!this.image.project.containerExpirationPolicy?.enabled) {
+      if (!this.imageDetails.project.containerExpirationPolicy?.enabled) {
         return { text: CLEANUP_DISABLED_TEXT, tooltip: CLEANUP_DISABLED_TOOLTIP };
       }
       return {
         [UNSCHEDULED_STATUS]: {
           text: sprintf(CLEANUP_UNSCHEDULED_TEXT, {
-            time: this.timeFormatted(this.image.project.containerExpirationPolicy.nextRunAt),
+            time: this.timeFormatted(this.imageDetails.project.containerExpirationPolicy.nextRunAt),
           }),
         },
         [SCHEDULED_STATUS]: { text: CLEANUP_SCHEDULED_TEXT, tooltip: CLEANUP_SCHEDULED_TOOLTIP },
         [ONGOING_STATUS]: { text: CLEANUP_ONGOING_TEXT, tooltip: CLEANUP_ONGOING_TOOLTIP },
         [UNFINISHED_STATUS]: { text: CLEANUP_UNFINISHED_TEXT, tooltip: CLEANUP_UNFINISHED_TOOLTIP },
-      }[this.image?.expirationPolicyCleanupStatus];
+      }[this.imageDetails?.expirationPolicyCleanupStatus];
     },
     deleteButtonDisabled() {
-      return this.disabled || !this.image.canDelete;
+      return this.disabled || !this.imageDetails.canDelete;
     },
     rootImageTooltip() {
-      return !this.image.name ? ROOT_IMAGE_TOOLTIP : '';
+      return !this.imageDetails.name ? ROOT_IMAGE_TOOLTIP : '';
     },
     imageName() {
-      return this.image.name || ROOT_IMAGE_TEXT;
+      return this.imageDetails.name || ROOT_IMAGE_TEXT;
     },
   },
 };
 </script>
 
 <template>
-  <title-area :metadata-loading="metadataLoading">
+  <title-area>
     <template #title>
       <span data-testid="title">
         {{ imageName }}
@@ -124,12 +143,7 @@ export default {
       />
     </template>
     <template #right-actions>
-      <gl-button
-        v-if="!metadataLoading"
-        variant="danger"
-        :disabled="deleteButtonDisabled"
-        @click="$emit('delete')"
-      >
+      <gl-button variant="danger" :disabled="deleteButtonDisabled" @click="$emit('delete')">
         {{ __('Delete image repository') }}
       </gl-button>
     </template>
diff --git a/app/assets/javascripts/registry/explorer/graphql/queries/get_container_repository_details.query.graphql b/app/assets/javascripts/registry/explorer/graphql/queries/get_container_repository_details.query.graphql
index 0f50531c3c5..88c2e667afd 100644
--- a/app/assets/javascripts/registry/explorer/graphql/queries/get_container_repository_details.query.graphql
+++ b/app/assets/javascripts/registry/explorer/graphql/queries/get_container_repository_details.query.graphql
@@ -8,7 +8,6 @@ query getContainerRepositoryDetails($id: ID!) {
     canDelete
     createdAt
     updatedAt
-    tagsCount
     expirationPolicyStartedAt
     expirationPolicyCleanupStatus
     project {
diff --git a/app/assets/javascripts/registry/explorer/graphql/queries/get_container_repository_tags.query.graphql b/app/assets/javascripts/registry/explorer/graphql/queries/get_container_repository_tags.query.graphql
index c87c0f847b3..a703c2dd0ac 100644
--- a/app/assets/javascripts/registry/explorer/graphql/queries/get_container_repository_tags.query.graphql
+++ b/app/assets/javascripts/registry/explorer/graphql/queries/get_container_repository_tags.query.graphql
@@ -1,6 +1,6 @@
 #import "~/graphql_shared/fragments/pageInfo.fragment.graphql"
 
-query getContainerRepositoryDetails(
+query getContainerRepositoryTags(
   $id: ID!
   $first: Int
   $last: Int
diff --git a/app/assets/javascripts/registry/explorer/graphql/queries/get_container_repository_tags_count.query.graphql b/app/assets/javascripts/registry/explorer/graphql/queries/get_container_repository_tags_count.query.graphql
new file mode 100644
index 00000000000..9092a71edb0
--- /dev/null
+++ b/app/assets/javascripts/registry/explorer/graphql/queries/get_container_repository_tags_count.query.graphql
@@ -0,0 +1,6 @@
+query getContainerRepositoryTagsCount($id: ID!) {
+  containerRepository(id: $id) {
+    id
+    tagsCount
+  }
+}
diff --git a/app/assets/javascripts/registry/explorer/pages/details.vue b/app/assets/javascripts/registry/explorer/pages/details.vue
index 50feea79747..34ec3b085a5 100644
--- a/app/assets/javascripts/registry/explorer/pages/details.vue
+++ b/app/assets/javascripts/registry/explorer/pages/details.vue
@@ -48,14 +48,11 @@ export default {
   mixins: [Tracking.mixin()],
   inject: ['breadCrumbState', 'config'],
   apollo: {
-    image: {
+    containerRepository: {
       query: getContainerRepositoryDetailsQuery,
       variables() {
         return this.queryVariables;
       },
-      update(data) {
-        return data.containerRepository;
-      },
       result() {
         this.updateBreadcrumb();
       },
@@ -66,7 +63,7 @@ export default {
   },
   data() {
     return {
-      image: {},
+      containerRepository: {},
       itemsToBeDeleted: [],
       isMobile: false,
       mutationLoading: false,
@@ -82,12 +79,12 @@ export default {
       };
     },
     isLoading() {
-      return this.$apollo.queries.image.loading || this.mutationLoading;
+      return this.$apollo.queries.containerRepository.loading || this.mutationLoading;
     },
     showPartialCleanupWarning() {
       return (
         this.config.showUnfinishedTagCleanupCallout &&
-        this.image?.expirationPolicyCleanupStatus === UNFINISHED_STATUS &&
+        this.containerRepository?.expirationPolicyCleanupStatus === UNFINISHED_STATUS &&
         !this.hidePartialCleanupWarning
       );
     },
@@ -98,13 +95,13 @@ export default {
       };
     },
     pageActionsAreDisabled() {
-      return Boolean(this.image?.status);
+      return Boolean(this.containerRepository?.status);
     },
   },
   methods: {
     updateBreadcrumb() {
-      const name = this.image?.id
-        ? this.image?.name || ROOT_IMAGE_TEXT
+      const name = this.containerRepository?.id
+        ? this.containerRepository?.name || ROOT_IMAGE_TEXT
         : MISSING_OR_DELETED_IMAGE_BREADCRUMB;
       this.breadCrumbState.updateName(name);
     },
@@ -164,7 +161,7 @@ export default {
     },
     deleteImage() {
       this.deleteImageAlert = true;
-      this.itemsToBeDeleted = [{ path: this.image.path }];
+      this.itemsToBeDeleted = [{ path: this.containerRepository.path }];
       this.$refs.deleteModal.show();
     },
     deleteImageError() {
@@ -180,7 +177,7 @@ export default {
 
 <template>
   <div v-gl-resize-observer="handleResize" class="gl-my-3">
-    <template v-if="image">
+    <template v-if="containerRepository">
       <delete-alert
         v-model="deleteAlertType"
         :garbage-collection-help-page-path="config.garbageCollectionHelpPagePath"
@@ -195,11 +192,11 @@ export default {
         @dismiss="dismissPartialCleanupWarning"
       />
 
-      <status-alert v-if="image.status" :status="image.status" />
+      <status-alert v-if="containerRepository.status" :status="containerRepository.status" />
 
       <details-header
-        :image="image"
-        :metadata-loading="isLoading"
+        v-if="!isLoading"
+        :image="containerRepository"
         :disabled="pageActionsAreDisabled"
         @delete="deleteImage"
       />
@@ -215,7 +212,7 @@ export default {
       />
 
       <delete-image
-        :id="image.id"
+        :id="containerRepository.id"
         ref="deleteImage"
         use-update-fn
         @start="deleteImageIniit"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue
index abc831c8abe..a5d165ebd49 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue
@@ -1,5 +1,12 @@
 <script>
-import { GlButtonGroup, GlDropdown, GlDropdownItem, GlLink, GlSearchBoxByType } from '@gitlab/ui';
+import {
+  GlButtonGroup,
+  GlDropdown,
+  GlDropdownItem,
+  GlIcon,
+  GlLink,
+  GlSearchBoxByType,
+} from '@gitlab/ui';
 import autofocusonshow from '~/vue_shared/directives/autofocusonshow';
 import ReviewAppLink from '../review_app_link.vue';
 
@@ -9,6 +16,7 @@ export default {
     GlButtonGroup,
     GlDropdown,
     GlDropdownItem,
+    GlIcon,
     GlLink,
     GlSearchBoxByType,
     ReviewAppLink,
@@ -71,7 +79,14 @@ export default {
         size="small"
         css-class="deploy-link js-deploy-url inline"
       />
-      <gl-dropdown size="small" class="js-mr-wigdet-deployment-dropdown">
+      <gl-dropdown toggle-class="gl-px-2!" size="small" class="js-mr-wigdet-deployment-dropdown">
+        <template #button-content>
+          <gl-icon
+            class="dropdown-chevron gl-mx-0!"
+            name="chevron-down"
+            data-testid="mr-wigdet-deployment-dropdown-icon"
+          />
+        </template>
         <gl-search-box-by-type v-model.trim="searchTerm" v-autofocusonshow autofocus />
         <gl-dropdown-item
           v-for="change in filteredChanges"