Add latest changes from gitlab-org/gitlab@master

3 files changed, 70 insertions, 100 deletions

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 c254dd05aa4..ff613daf7fa 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,9 +1,10 @@
 <script>
 import { GlSprintf } from '@gitlab/ui';
+import TitleArea from '~/vue_shared/components/registry/title_area.vue';
 import { DETAILS_PAGE_TITLE } from '../../constants/index';
 
 export default {
-  components: { GlSprintf },
+  components: { GlSprintf, TitleArea },
   props: {
     imageName: {
       type: String,
@@ -18,13 +19,13 @@ export default {
 </script>
 
 <template>
-  <div class="gl-display-flex gl-my-2 gl-align-items-center">
-    <h4>
+  <title-area>
+    <template #title>
       <gl-sprintf :message="$options.i18n.DETAILS_PAGE_TITLE">
         <template #imageName>
           {{ imageName }}
         </template>
       </gl-sprintf>
-    </h4>
-  </div>
+    </template>
+  </title-area>
 </template>
diff --git a/app/assets/javascripts/registry/explorer/components/list_page/cli_commands.vue b/app/assets/javascripts/registry/explorer/components/list_page/cli_commands.vue
index 36a46ed58f4..85d87dab042 100644
--- a/app/assets/javascripts/registry/explorer/components/list_page/cli_commands.vue
+++ b/app/assets/javascripts/registry/explorer/components/list_page/cli_commands.vue
@@ -1,8 +1,8 @@
 <script>
-import { GlDeprecatedDropdown, GlFormGroup, GlFormInputGroup } from '@gitlab/ui';
+import { GlDeprecatedDropdown } from '@gitlab/ui';
 import { mapGetters } from 'vuex';
 import Tracking from '~/tracking';
-import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
 import {
   QUICK_START,
   LOGIN_COMMAND_LABEL,
@@ -13,22 +13,23 @@ import {
   COPY_PUSH_TITLE,
 } from '../../constants/index';
 
+const trackingLabel = 'quickstart_dropdown';
+
 export default {
   components: {
     GlDeprecatedDropdown,
-    GlFormGroup,
-    GlFormInputGroup,
-    ClipboardButton,
+    CodeInstruction,
   },
-  mixins: [Tracking.mixin({ label: 'quickstart_dropdown' })],
+  mixins: [Tracking.mixin({ label: trackingLabel })],
+  trackingLabel,
   i18n: {
-    dropdownTitle: QUICK_START,
-    loginCommandLabel: LOGIN_COMMAND_LABEL,
-    copyLoginTitle: COPY_LOGIN_TITLE,
-    buildCommandLabel: BUILD_COMMAND_LABEL,
-    copyBuildTitle: COPY_BUILD_TITLE,
-    pushCommandLabel: PUSH_COMMAND_LABEL,
-    copyPushTitle: COPY_PUSH_TITLE,
+    QUICK_START,
+    LOGIN_COMMAND_LABEL,
+    COPY_LOGIN_TITLE,
+    BUILD_COMMAND_LABEL,
+    COPY_BUILD_TITLE,
+    PUSH_COMMAND_LABEL,
+    COPY_PUSH_TITLE,
   },
   computed: {
     ...mapGetters(['dockerBuildCommand', 'dockerPushCommand', 'dockerLoginCommand']),
@@ -37,7 +38,7 @@ export default {
 </script>
 <template>
   <gl-deprecated-dropdown
-    :text="$options.i18n.dropdownTitle"
+    :text="$options.i18n.QUICK_START"
     variant="primary"
     size="sm"
     right
@@ -45,59 +46,30 @@ export default {
   >
     <!-- This li is used as a container since gl-dropdown produces a root ul, this mimics the functionality exposed by b-dropdown-form -->
     <li role="presentation" class="px-2 py-1 dropdown-menu-large">
-      <form>
-        <gl-form-group
-          label-size="sm"
-          label-for="docker-login-btn"
-          :label="$options.i18n.loginCommandLabel"
-        >
-          <gl-form-input-group id="docker-login-btn" :value="dockerLoginCommand" readonly>
-            <template #append>
-              <clipboard-button
-                class="border"
-                :text="dockerLoginCommand"
-                :title="$options.i18n.copyLoginTitle"
-                @click.native="track('click_copy_login')"
-              />
-            </template>
-          </gl-form-input-group>
-        </gl-form-group>
+      <code-instruction
+        :label="$options.i18n.LOGIN_COMMAND_LABEL"
+        :instruction="dockerLoginCommand"
+        :copy-text="$options.i18n.COPY_LOGIN_TITLE"
+        tracking-action="click_copy_login"
+        :tracking-label="$options.trackingLabel"
+      />
 
-        <gl-form-group
-          label-size="sm"
-          label-for="docker-build-btn"
-          :label="$options.i18n.buildCommandLabel"
-        >
-          <gl-form-input-group id="docker-build-btn" :value="dockerBuildCommand" readonly>
-            <template #append>
-              <clipboard-button
-                class="border"
-                :text="dockerBuildCommand"
-                :title="$options.i18n.copyBuildTitle"
-                @click.native="track('click_copy_build')"
-              />
-            </template>
-          </gl-form-input-group>
-        </gl-form-group>
+      <code-instruction
+        :label="$options.i18n.BUILD_COMMAND_LABEL"
+        :instruction="dockerBuildCommand"
+        :copy-text="$options.i18n.COPY_BUILD_TITLE"
+        tracking-action="click_copy_build"
+        :tracking-label="$options.trackingLabel"
+      />
 
-        <gl-form-group
-          class="mb-0"
-          label-size="sm"
-          label-for="docker-push-btn"
-          :label="$options.i18n.pushCommandLabel"
-        >
-          <gl-form-input-group id="docker-push-btn" :value="dockerPushCommand" readonly>
-            <template #append>
-              <clipboard-button
-                class="border"
-                :text="dockerPushCommand"
-                :title="$options.i18n.copyPushTitle"
-                @click.native="track('click_copy_push')"
-              />
-            </template>
-          </gl-form-input-group>
-        </gl-form-group>
-      </form>
+      <code-instruction
+        class="mb-0"
+        :label="$options.i18n.PUSH_COMMAND_LABEL"
+        :instruction="dockerPushCommand"
+        :copy-text="$options.i18n.COPY_PUSH_TITLE"
+        tracking-action="click_copy_push"
+        :tracking-label="$options.trackingLabel"
+      />
     </li>
   </gl-deprecated-dropdown>
 </template>
diff --git a/app/assets/javascripts/registry/explorer/components/list_page/registry_header.vue b/app/assets/javascripts/registry/explorer/components/list_page/registry_header.vue
index c7b4fd5f4b4..7d2f642f048 100644
--- a/app/assets/javascripts/registry/explorer/components/list_page/registry_header.vue
+++ b/app/assets/javascripts/registry/explorer/components/list_page/registry_header.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlSprintf, GlLink, GlIcon } from '@gitlab/ui';
+import TitleArea from '~/vue_shared/components/registry/title_area.vue';
 import { n__ } from '~/locale';
 import { approximateDuration, calculateRemainingMilliseconds } from '~/lib/utils/datetime_utility';
 
@@ -16,6 +17,7 @@ export default {
     GlIcon,
     GlSprintf,
     GlLink,
+    TitleArea,
   },
   props: {
     expirationPolicy: {
@@ -85,37 +87,32 @@ export default {
 
 <template>
   <div>
-    <div
-      class="gl-display-flex gl-justify-content-space-between gl-align-items-center"
-      data-testid="header"
-    >
-      <h4 data-testid="title">{{ $options.i18n.CONTAINER_REGISTRY_TITLE }}</h4>
-      <div class="gl-display-none d-sm-block" data-testid="commands-slot">
+    <title-area :title="$options.i18n.CONTAINER_REGISTRY_TITLE">
+      <template #right-actions>
         <slot name="commands"></slot>
-      </div>
-    </div>
-    <div
-      v-if="imagesCount"
-      class="gl-display-flex gl-align-items-center gl-mt-1 gl-mb-3 gl-text-gray-500"
-      data-testid="subheader"
-    >
-      <span class="gl-mr-3" data-testid="images-count">
-        <gl-icon class="gl-mr-1" name="container-image" />
-        <gl-sprintf :message="imagesCountText">
-          <template #count>
-            {{ imagesCount }}
-          </template>
-        </gl-sprintf>
-      </span>
-      <span v-if="!hideExpirationPolicyData" data-testid="expiration-policy">
-        <gl-icon class="gl-mr-1" name="expire" />
-        <gl-sprintf :message="expirationPolicyText">
-          <template #time>
-            {{ timeTillRun }}
-          </template>
-        </gl-sprintf>
-      </span>
-    </div>
+      </template>
+      <template #metadata_count>
+        <span v-if="imagesCount" data-testid="images-count">
+          <gl-icon class="gl-mr-1" name="container-image" />
+          <gl-sprintf :message="imagesCountText">
+            <template #count>
+              {{ imagesCount }}
+            </template>
+          </gl-sprintf>
+        </span>
+      </template>
+      <template #metadata_exp_policies>
+        <span v-if="!hideExpirationPolicyData" data-testid="expiration-policy">
+          <gl-icon class="gl-mr-1" name="expire" />
+          <gl-sprintf :message="expirationPolicyText">
+            <template #time>
+              {{ timeTillRun }}
+            </template>
+          </gl-sprintf>
+        </span>
+      </template>
+    </title-area>
+
     <div data-testid="info-area">
       <p>
         <span data-testid="default-intro">