Merge branch '64249-align-container-registry-empty-state-with-design-guidelines' into 'master'

Align container registry empty state with design guidelines

Closes #64249

See merge request gitlab-org/gitlab-ce!30502

app/assets/javascripts/registry/components/app.vue

@@ -2,6 +2,7 @@
 import { mapGetters, mapActions } from 'vuex';
 import { GlLoadingIcon } from '@gitlab/ui';
 import store from '../stores';
+import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
 import CollapsibleContainer from './collapsible_container.vue';
 import SvgMessage from './svg_message.vue';
 import { s__, sprintf } from '../../locale';
@@ -9,6 +10,7 @@ import { s__, sprintf } from '../../locale';
 export default {
   name: 'RegistryListApp',
   components: {
+    clipboardButton,
     CollapsibleContainer,
     GlLoadingIcon,
     SvgMessage,
@@ -46,10 +48,10 @@ export default {
     dockerConnectionErrorText() {
       return sprintf(
         s__(`ContainerRegistry|We are having trouble connecting to Docker, which could be due to an
-            issue with your project name or path. For more information, please review the
-            %{docLinkStart}Container Registry documentation%{docLinkEnd}.`),
+            issue with your project name or path. 
+            %{docLinkStart}More Information%{docLinkEnd}`),
         {
-          docLinkStart: `<a href="${this.helpPagePath}#docker-connection-error">`,
+          docLinkStart: `<a href="${this.helpPagePath}#docker-connection-error" target="_blank">`,
           docLinkEnd: '</a>',
         },
         false,
@@ -58,10 +60,10 @@ export default {
     introText() {
       return sprintf(
         s__(`ContainerRegistry|With the Docker Container Registry integrated into GitLab, every 
-            project can have its own space to store its Docker images. Learn more about the 
-            %{docLinkStart}Container Registry%{docLinkEnd}.`),
+            project can have its own space to store its Docker images. 
+            %{docLinkStart}More Information%{docLinkEnd}`),
         {
-          docLinkStart: `<a href="${this.helpPagePath}">`,
+          docLinkStart: `<a href="${this.helpPagePath}" target="_blank">`,
           docLinkEnd: '</a>',
         },
         false,
@@ -70,14 +72,20 @@ export default {
     noContainerImagesText() {
       return sprintf(
         s__(`ContainerRegistry|With the Container Registry, every project can have its own space to
-            store its Docker images. Learn more about the %{docLinkStart}Container Registry%{docLinkEnd}.`),
+            store its Docker images. %{docLinkStart}More Information%{docLinkEnd}`),
         {
-          docLinkStart: `<a href="${this.helpPagePath}">`,
+          docLinkStart: `<a href="${this.helpPagePath}" target="_blank">`,
           docLinkEnd: '</a>',
         },
         false,
       );
     },
+    dockerBuildCommand() {
+      return `docker build -t ${this.repositoryUrl} .`;
+    },
+    dockerPushCommand() {
+      return `docker push ${this.repositoryUrl}`;
+    },
   },
   created() {
     this.setMainEndpoint(this.endpoint);
@@ -99,7 +107,7 @@ export default {
       <p v-html="dockerConnectionErrorText"></p>
     </svg-message>
 
-    <gl-loading-icon v-else-if="isLoading" size="md" class="prepend-top-16" />
+    <gl-loading-icon v-else-if="isLoading && !characterError" size="md" class="prepend-top-16" />
 
     <div v-else-if="!isLoading && !characterError && repos.length">
       <h4>{{ s__('ContainerRegistry|Container Registry') }}</h4>
@@ -126,10 +134,27 @@ export default {
         }}
       </p>
 
-      <pre>
-        docker build -t {{ repositoryUrl }} .
-        docker push {{ repositoryUrl }}
-      </pre>
+      <div class="input-group append-bottom-10">
+        <input :value="dockerBuildCommand" type="text" class="form-control monospace" readonly />
+        <span class="input-group-append">
+          <clipboard-button
+            :text="dockerBuildCommand"
+            :title="s__('ContainerRegistry|Copy build command to clipboard')"
+            class="input-group-text"
+          />
+        </span>
+      </div>
+
+      <div class="input-group">
+        <input :value="dockerPushCommand" type="text" class="form-control monospace" readonly />
+        <span class="input-group-append">
+          <clipboard-button
+            :text="dockerPushCommand"
+            :title="s__('ContainerRegistry|Copy push command to clipboard')"
+            class="input-group-text"
+          />
+        </span>
+      </div>
     </svg-message>
   </div>
 </template>

app/assets/javascripts/registry/components/svg_message.vue

@@ -15,10 +15,12 @@ export default {
 </script>
 
 <template>
-  <div :id="id" class="empty-state container-message mw-70p">
+  <div :id="id" class="empty-state container-message">
     <div class="svg-content">
       <img :src="svgPath" class="flex-align-self-center" />
     </div>
+    <div class="text-content">
       <slot></slot>
     </div>
+  </div>
 </template>

app/assets/stylesheets/pages/container_registry.scss

@@ -6,6 +6,10 @@
   pre {
     white-space: pre-line;
   }
+
+  span .btn {
+    margin: 0;
+  }
 }
 
 .container-image {

changelogs/unreleased/64249-align-container-registry-empty-state-with-design-guidelines.yml

+---
+title: Alignign empty container registry message with design guidelines
+merge_request: 30502
+author:
+type: other

locale/gitlab.pot

@@ -2978,6 +2978,12 @@ msgstr ""
 msgid "ContainerRegistry|Container Registry"
 msgstr ""
 
+msgid "ContainerRegistry|Copy build command to clipboard"
+msgstr ""
+
+msgid "ContainerRegistry|Copy push command to clipboard"
+msgstr ""
+
 msgid "ContainerRegistry|Docker connection error"
 msgstr ""
 
@@ -3011,13 +3017,13 @@ msgstr ""
 msgid "ContainerRegistry|There are no container images stored for this project"
 msgstr ""
 
-msgid "ContainerRegistry|We are having trouble connecting to Docker, which could be due to an issue with your project name or path. For more information, please review the %{docLinkStart}Container Registry documentation%{docLinkEnd}."
+msgid "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}"
 msgstr ""
 
-msgid "ContainerRegistry|With the Container Registry, every project can have its own space to store its Docker images. Learn more about the %{docLinkStart}Container Registry%{docLinkEnd}."
+msgid "ContainerRegistry|With the Container Registry, every project can have its own space to store its Docker images. %{docLinkStart}More Information%{docLinkEnd}"
 msgstr ""
 
-msgid "ContainerRegistry|With the Docker Container Registry integrated into GitLab, every project can have its own space to store its Docker images. Learn more about the %{docLinkStart}Container Registry%{docLinkEnd}."
+msgid "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}"
 msgstr ""
 
 msgid "ContainerRegistry|You are about to delete the image <b>%{title}</b>. This will delete the image and all tags pointing to this image."

spec/javascripts/registry/components/app_spec.js

@@ -90,7 +90,7 @@ describe('Registry List', () => {
             .textContent.trim()
             .replace(/[\r\n]+/g, ' '),
         ).toEqual(
-          'With the Container Registry, every project can have its own space to store its Docker images. Learn more about the Container Registry.',
+          'With the Container Registry, every project can have its own space to store its Docker images. More Information',
         );
         done();
       }, 0);