Updating wording as per desgn guidelines

Shortened descriptive text
Added copy button to code snippets

2 files changed, 42 insertions, 15 deletions

diff --git a/app/assets/javascripts/registry/components/app.vue b/app/assets/javascripts/registry/components/app.vue
index 7752723baac..38519c220c5 100644
--- a/app/assets/javascripts/registry/components/app.vue
+++ b/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>
diff --git a/app/assets/javascripts/registry/components/svg_message.vue b/app/assets/javascripts/registry/components/svg_message.vue
index d0d44bf2d14..617093e054e 100644
--- a/app/assets/javascripts/registry/components/svg_message.vue
+++ b/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>
-    <slot></slot>
+    <div class="text-content">
+      <slot></slot>
+    </div>
   </div>
 </template>