Add latest changes from gitlab-org/gitlab@master

5 files changed, 166 insertions, 105 deletions

diff --git a/app/assets/javascripts/registry/explorer/components/quickstart_dropdown.vue b/app/assets/javascripts/registry/explorer/components/cli_commands.vue
index 96455496239..96455496239 100644
--- a/app/assets/javascripts/registry/explorer/components/quickstart_dropdown.vue
+++ b/app/assets/javascripts/registry/explorer/components/cli_commands.vue
diff --git a/app/assets/javascripts/registry/explorer/components/project_policy_alert.vue b/app/assets/javascripts/registry/explorer/components/project_policy_alert.vue
deleted file mode 100644
index 88a0710574f..00000000000
--- a/app/assets/javascripts/registry/explorer/components/project_policy_alert.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<script>
-import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
-import { mapState } from 'vuex';
-import { approximateDuration, calculateRemainingMilliseconds } from '~/lib/utils/datetime_utility';
-import {
-  EXPIRATION_POLICY_ALERT_TITLE,
-  EXPIRATION_POLICY_ALERT_PRIMARY_BUTTON,
-  EXPIRATION_POLICY_ALERT_FULL_MESSAGE,
-  EXPIRATION_POLICY_ALERT_SHORT_MESSAGE,
-} from '../constants';
-
-export default {
-  components: {
-    GlAlert,
-    GlSprintf,
-    GlLink,
-  },
-
-  computed: {
-    ...mapState(['config', 'images', 'isLoading']),
-    isEmpty() {
-      return !this.images || this.images.length === 0;
-    },
-    showAlert() {
-      return this.config.expirationPolicy?.enabled;
-    },
-    timeTillRun() {
-      const difference = calculateRemainingMilliseconds(this.config.expirationPolicy?.next_run_at);
-      return approximateDuration(difference / 1000);
-    },
-    alertConfiguration() {
-      if (this.isEmpty || this.isLoading) {
-        return {
-          title: null,
-          primaryButton: null,
-          message: EXPIRATION_POLICY_ALERT_SHORT_MESSAGE,
-        };
-      }
-      return {
-        title: EXPIRATION_POLICY_ALERT_TITLE,
-        primaryButton: EXPIRATION_POLICY_ALERT_PRIMARY_BUTTON,
-        message: EXPIRATION_POLICY_ALERT_FULL_MESSAGE,
-      };
-    },
-  },
-};
-</script>
-
-<template>
-  <gl-alert
-    v-if="showAlert"
-    :dismissible="false"
-    :primary-button-text="alertConfiguration.primaryButton"
-    :primary-button-link="config.settingsPath"
-    :title="alertConfiguration.title"
-  >
-    <gl-sprintf :message="alertConfiguration.message">
-      <template #days>
-        <strong>{{ timeTillRun }}</strong>
-      </template>
-      <template #link="{content}">
-        <gl-link :href="config.expirationPolicyHelpPagePath" target="_blank">
-          {{ content }}
-        </gl-link>
-      </template>
-    </gl-sprintf>
-  </gl-alert>
-</template>
diff --git a/app/assets/javascripts/registry/explorer/components/registry_header.vue b/app/assets/javascripts/registry/explorer/components/registry_header.vue
new file mode 100644
index 00000000000..6b6154e87dc
--- /dev/null
+++ b/app/assets/javascripts/registry/explorer/components/registry_header.vue
@@ -0,0 +1,138 @@
+<script>
+import { GlSprintf, GlLink, GlIcon } from '@gitlab/ui';
+import { n__ } from '~/locale';
+import { approximateDuration, calculateRemainingMilliseconds } from '~/lib/utils/datetime_utility';
+
+import {
+  CONTAINER_REGISTRY_TITLE,
+  LIST_INTRO_TEXT,
+  EXPIRATION_POLICY_WILL_RUN_IN,
+  EXPIRATION_POLICY_DISABLED_TEXT,
+  EXPIRATION_POLICY_DISABLED_MESSAGE,
+} from '../constants';
+
+export default {
+  components: {
+    GlIcon,
+    GlSprintf,
+    GlLink,
+  },
+  props: {
+    expirationPolicy: {
+      type: Object,
+      default: () => ({}),
+      required: false,
+    },
+    imagesCount: {
+      type: Number,
+      default: 0,
+      required: false,
+    },
+    helpPagePath: {
+      type: String,
+      default: '',
+      required: false,
+    },
+    expirationPolicyHelpPagePath: {
+      type: String,
+      default: '',
+      required: false,
+    },
+    hideExpirationPolicyData: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  loader: {
+    repeat: 10,
+    width: 1000,
+    height: 40,
+  },
+  i18n: {
+    CONTAINER_REGISTRY_TITLE,
+    LIST_INTRO_TEXT,
+    EXPIRATION_POLICY_DISABLED_MESSAGE,
+  },
+  computed: {
+    imagesCountText() {
+      return n__(
+        'ContainerRegistry|%{count} Image repository',
+        'ContainerRegistry|%{count} Image repositories',
+        this.imagesCount,
+      );
+    },
+    timeTillRun() {
+      const difference = calculateRemainingMilliseconds(this.expirationPolicy?.next_run_at);
+      return approximateDuration(difference / 1000);
+    },
+    expirationPolicyEnabled() {
+      return this.expirationPolicy?.enabled;
+    },
+    expirationPolicyText() {
+      return this.expirationPolicyEnabled
+        ? EXPIRATION_POLICY_WILL_RUN_IN
+        : EXPIRATION_POLICY_DISABLED_TEXT;
+    },
+    showExpirationPolicyTip() {
+      return (
+        !this.expirationPolicyEnabled && this.imagesCount > 0 && !this.hideExpirationPolicyData
+      );
+    },
+  },
+};
+</script>
+
+<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">
+        <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-700"
+      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>
+    <div data-testid="info-area">
+      <p>
+        <span data-testid="default-intro">
+          <gl-sprintf :message="$options.i18n.LIST_INTRO_TEXT">
+            <template #docLink="{content}">
+              <gl-link :href="helpPagePath" target="_blank">{{ content }}</gl-link>
+            </template>
+          </gl-sprintf>
+        </span>
+        <span v-if="showExpirationPolicyTip" data-testid="expiration-disabled-message">
+          <gl-sprintf :message="$options.i18n.EXPIRATION_POLICY_DISABLED_MESSAGE">
+            <template #docLink="{content}">
+              <gl-link :href="expirationPolicyHelpPagePath" target="_blank">{{ content }}</gl-link>
+            </template>
+          </gl-sprintf>
+        </span>
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/registry/explorer/constants.js b/app/assets/javascripts/registry/explorer/constants.js
index 7cbe657bfc0..5325086b773 100644
--- a/app/assets/javascripts/registry/explorer/constants.js
+++ b/app/assets/javascripts/registry/explorer/constants.js
@@ -5,10 +5,10 @@ import { s__ } from '~/locale';
 export const CONTAINER_REGISTRY_TITLE = s__('ContainerRegistry|Container Registry');
 export const CONNECTION_ERROR_TITLE = s__('ContainerRegistry|Docker connection error');
 export const CONNECTION_ERROR_MESSAGE = s__(
-  `ContainerRegistry|We are having trouble connecting to Docker, which could be due to an issue with your project name or path. %{docLinkStart}More Information%{docLinkEnd}`,
+  `ContainerRegistry|We are having trouble connecting to the Registry, which could be due to an issue with your project name or path. %{docLinkStart}More information%{docLinkEnd}`,
 );
 export const LIST_INTRO_TEXT = s__(
-  `ContainerRegistry|With the Docker Container Registry integrated into GitLab, every project can have its own space to store its Docker images. %{docLinkStart}More Information%{docLinkEnd}`,
+  `ContainerRegistry|With the GitLab Container Registry, every project can have its own space to store images. %{docLinkStart}More information%{docLinkEnd}`,
 );
 
 export const LIST_DELETE_BUTTON_DISABLED = s__(
@@ -103,20 +103,21 @@ export const ADMIN_GARBAGE_COLLECTION_TIP = s__(
 
 // Expiration policies
 
-export const EXPIRATION_POLICY_ALERT_TITLE = s__(
-  'ContainerRegistry|Retention policy has been Enabled',
+export const EXPIRATION_POLICY_WILL_RUN_IN = s__(
+  'ContainerRegistry|Expiration policy will run in %{time}',
 );
-export const EXPIRATION_POLICY_ALERT_PRIMARY_BUTTON = s__('ContainerRegistry|Edit Settings');
-export const EXPIRATION_POLICY_ALERT_FULL_MESSAGE = s__(
-  'ContainerRegistry|The retention and expiration policy for this Container Registry has been enabled and will run in %{days}. For more information visit the %{linkStart}documentation%{linkEnd}',
+
+export const EXPIRATION_POLICY_DISABLED_TEXT = s__(
+  'ContainerRegistry|Expiration policy is disabled',
 );
-export const EXPIRATION_POLICY_ALERT_SHORT_MESSAGE = s__(
-  'ContainerRegistry|The retention and expiration policy for this Container Registry has been enabled. For more information visit the %{linkStart}documentation%{linkEnd}',
+
+export const EXPIRATION_POLICY_DISABLED_MESSAGE = s__(
+  'ContainerRegistry|Expiration policies help manage the storage space used by the Container Registry, but the expiration policies for this registry are disabled. Contact your administrator to enable. %{docLinkStart}More information%{docLinkEnd}',
 );
 
 // Quick Start
 
-export const QUICK_START = s__('ContainerRegistry|Quick Start');
+export const QUICK_START = s__('ContainerRegistry|CLI Commands');
 export const LOGIN_COMMAND_LABEL = s__('ContainerRegistry|Login');
 export const COPY_LOGIN_TITLE = s__('ContainerRegistry|Copy login command');
 export const BUILD_COMMAND_LABEL = s__('ContainerRegistry|Build an image');
diff --git a/app/assets/javascripts/registry/explorer/pages/list.vue b/app/assets/javascripts/registry/explorer/pages/list.vue
index 4efa6f08d84..fa8b56eb76b 100644
--- a/app/assets/javascripts/registry/explorer/pages/list.vue
+++ b/app/assets/javascripts/registry/explorer/pages/list.vue
@@ -14,17 +14,15 @@ import Tracking from '~/tracking';
 
 import ProjectEmptyState from '../components/project_empty_state.vue';
 import GroupEmptyState from '../components/group_empty_state.vue';
-import ProjectPolicyAlert from '../components/project_policy_alert.vue';
-import QuickstartDropdown from '../components/quickstart_dropdown.vue';
+import RegistryHeader from '../components/registry_header.vue';
 import ImageList from '../components/image_list.vue';
+import CliCommands from '../components/cli_commands.vue';
 
 import {
   DELETE_IMAGE_SUCCESS_MESSAGE,
   DELETE_IMAGE_ERROR_MESSAGE,
-  CONTAINER_REGISTRY_TITLE,
   CONNECTION_ERROR_TITLE,
   CONNECTION_ERROR_MESSAGE,
-  LIST_INTRO_TEXT,
   REMOVE_REPOSITORY_MODAL_TEXT,
   REMOVE_REPOSITORY_LABEL,
   SEARCH_PLACEHOLDER_TEXT,
@@ -39,8 +37,6 @@ export default {
     GlEmptyState,
     ProjectEmptyState,
     GroupEmptyState,
-    ProjectPolicyAlert,
-    QuickstartDropdown,
     ImageList,
     GlModal,
     GlSprintf,
@@ -48,6 +44,8 @@ export default {
     GlAlert,
     GlSkeletonLoader,
     GlSearchBoxByClick,
+    RegistryHeader,
+    CliCommands,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -59,10 +57,8 @@ export default {
     height: 40,
   },
   i18n: {
-    CONTAINER_REGISTRY_TITLE,
     CONNECTION_ERROR_TITLE,
     CONNECTION_ERROR_MESSAGE,
-    LIST_INTRO_TEXT,
     REMOVE_REPOSITORY_MODAL_TEXT,
     REMOVE_REPOSITORY_LABEL,
     SEARCH_PLACEHOLDER_TEXT,
@@ -85,7 +81,7 @@ export default {
         label: 'registry_repository_delete',
       };
     },
-    showQuickStartDropdown() {
+    showCommands() {
       return Boolean(!this.isLoading && !this.config?.isGroupPage && this.images?.length);
     },
     showDeleteAlert() {
@@ -149,8 +145,6 @@ export default {
       </gl-sprintf>
     </gl-alert>
 
-    <project-policy-alert v-if="!config.isGroupPage" class="mt-2" />
-
     <gl-empty-state
       v-if="config.characterError"
       :title="$options.i18n.CONNECTION_ERROR_TITLE"
@@ -170,21 +164,17 @@ export default {
     </gl-empty-state>
 
     <template v-else>
-      <div>
-        <div class="d-flex justify-content-between align-items-center">
-          <h4>{{ $options.i18n.CONTAINER_REGISTRY_TITLE }}</h4>
-          <quickstart-dropdown v-if="showQuickStartDropdown" class="d-none d-sm-block" />
-        </div>
-        <p>
-          <gl-sprintf :message="$options.i18n.LIST_INTRO_TEXT">
-            <template #docLink="{content}">
-              <gl-link :href="config.helpPagePath" target="_blank">
-                {{ content }}
-              </gl-link>
-            </template>
-          </gl-sprintf>
-        </p>
-      </div>
+      <registry-header
+        :images-count="pagination.total"
+        :expiration-policy="config.expirationPolicy"
+        :help-page-path="config.helpPagePath"
+        :expiration-policy-help-page-path="config.expirationPolicyHelpPagePath"
+        :hide-expiration-policy-data="config.isGroupPage"
+      >
+        <template #commands>
+          <cli-commands v-if="showCommands" />
+        </template>
+      </registry-header>
 
       <div v-if="isLoading" class="mt-2">
         <gl-skeleton-loader
@@ -201,7 +191,7 @@ export default {
       </div>
       <template v-else>
         <template v-if="!isEmpty">
-          <div class="gl-display-flex gl-p-1" data-testid="listHeader">
+          <div class="gl-display-flex gl-p-1 gl-mt-3" data-testid="listHeader">
             <div class="gl-flex-fill-1">
               <h5>{{ $options.i18n.IMAGE_REPOSITORY_LIST_LABEL }}</h5>
             </div>