1 files changed, 128 insertions, 15 deletions

diff --git a/app/assets/javascripts/registry/components/app.vue b/app/assets/javascripts/registry/components/app.vue
index ee973017387..346dc470a59 100644
--- a/app/assets/javascripts/registry/components/app.vue
+++ b/app/assets/javascripts/registry/components/app.vue
@@ -1,13 +1,17 @@
 <script>
 import { mapGetters, mapActions } from 'vuex';
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlEmptyState } from '@gitlab/ui';
 import store from '../stores';
+import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
 import CollapsibleContainer from './collapsible_container.vue';
+import { s__, sprintf } from '../../locale';
 
 export default {
   name: 'RegistryListApp',
   components: {
+    clipboardButton,
     CollapsibleContainer,
+    GlEmptyState,
     GlLoadingIcon,
   },
   props: {
@@ -15,16 +19,82 @@ export default {
       type: String,
       required: true,
     },
+    characterError: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    helpPagePath: {
+      type: String,
+      required: true,
+    },
+    noContainersImage: {
+      type: String,
+      required: true,
+    },
+    containersErrorImage: {
+      type: String,
+      required: true,
+    },
+    repositoryUrl: {
+      type: String,
+      required: true,
+    },
   },
   store,
   computed: {
     ...mapGetters(['isLoading', 'repos']),
+    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. 
+            %{docLinkStart}More Information%{docLinkEnd}`),
+        {
+          docLinkStart: `<a href="${this.helpPagePath}#docker-connection-error" target="_blank">`,
+          docLinkEnd: '</a>',
+        },
+        false,
+      );
+    },
+    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. 
+            %{docLinkStart}More Information%{docLinkEnd}`),
+        {
+          docLinkStart: `<a href="${this.helpPagePath}" target="_blank">`,
+          docLinkEnd: '</a>',
+        },
+        false,
+      );
+    },
+    noContainerImagesText() {
+      return sprintf(
+        s__(`ContainerRegistry|With the Container Registry, every project can have its own space to
+            store its Docker images. %{docLinkStart}More Information%{docLinkEnd}`),
+        {
+          docLinkStart: `<a href="${this.helpPagePath}" target="_blank">`,
+          docLinkEnd: '</a>',
+        },
+        false,
+      );
+    },
+    dockerBuildCommand() {
+      // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
+      return `docker build -t ${this.repositoryUrl} .`;
+    },
+    dockerPushCommand() {
+      // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
+      return `docker push ${this.repositoryUrl}`;
+    },
   },
   created() {
     this.setMainEndpoint(this.endpoint);
   },
   mounted() {
-    this.fetchRepos();
+    if (!this.characterError) {
+      this.fetchRepos();
+    }
   },
   methods: {
     ...mapActions(['setMainEndpoint', 'fetchRepos']),
@@ -33,20 +103,63 @@ export default {
 </script>
 <template>
   <div>
-    <gl-loading-icon v-if="isLoading" size="md" />
+    <gl-empty-state
+      v-if="characterError"
+      :title="s__('ContainerRegistry|Docker connection error')"
+      :svg-path="containersErrorImage"
+    >
+      <template #description>
+        <p v-html="dockerConnectionErrorText"></p>
+      </template>
+    </gl-empty-state>
+
+    <gl-loading-icon v-else-if="isLoading" size="md" class="prepend-top-16" />
+
+    <div v-else-if="!isLoading && repos.length">
+      <h4>{{ s__('ContainerRegistry|Container Registry') }}</h4>
+      <p v-html="introText"></p>
+      <collapsible-container v-for="item in repos" :key="item.id" :repo="item" />
+    </div>
+
+    <gl-empty-state
+      v-else
+      :title="s__('ContainerRegistry|There are no container images stored for this project')"
+      :svg-path="noContainersImage"
+      class="container-message"
+    >
+      <template #description>
+        <p class="js-no-container-images-text" v-html="noContainerImagesText"></p>
+        <h5>{{ s__('ContainerRegistry|Quick Start') }}</h5>
+        <p>
+          {{
+            s__(
+              'ContainerRegistry|You can add an image to this registry with the following commands:',
+            )
+          }}
+        </p>
 
-    <collapsible-container
-      v-for="item in repos"
-      v-else-if="!isLoading && repos.length"
-      :key="item.id"
-      :repo="item"
-    />
+        <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>
 
-    <p v-else-if="!isLoading && !repos.length">
-      {{
-        __(`No container images stored for this project.
-      Add one by following the instructions above.`)
-      }}
-    </p>
+        <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>
+      </template>
+    </gl-empty-state>
   </div>
 </template>