1 files changed, 52 insertions, 49 deletions

diff --git a/app/assets/javascripts/registry/components/app.vue b/app/assets/javascripts/registry/components/app.vue
index efbf0a4e3cf..346dc470a59 100644
--- a/app/assets/javascripts/registry/components/app.vue
+++ b/app/assets/javascripts/registry/components/app.vue
@@ -1,10 +1,9 @@
 <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 SvgMessage from './svg_message.vue';
 import { s__, sprintf } from '../../locale';
 
 export default {
@@ -12,8 +11,8 @@ export default {
   components: {
     clipboardButton,
     CollapsibleContainer,
+    GlEmptyState,
     GlLoadingIcon,
-    SvgMessage,
   },
   props: {
     endpoint: {
@@ -93,7 +92,9 @@ export default {
     this.setMainEndpoint(this.endpoint);
   },
   mounted() {
-    this.fetchRepos();
+    if (!this.characterError) {
+      this.fetchRepos();
+    }
   },
   methods: {
     ...mapActions(['setMainEndpoint', 'fetchRepos']),
@@ -102,61 +103,63 @@ export default {
 </script>
 <template>
   <div>
-    <svg-message v-if="characterError" id="invalid-characters" :svg-path="containersErrorImage">
-      <h4>
-        {{ s__('ContainerRegistry|Docker connection error') }}
-      </h4>
-      <p v-html="dockerConnectionErrorText"></p>
-    </svg-message>
+    <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 && !characterError" size="md" class="prepend-top-16" />
+    <gl-loading-icon v-else-if="isLoading" size="md" class="prepend-top-16" />
 
-    <div v-else-if="!isLoading && !characterError && repos.length">
+    <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>
 
-    <svg-message
-      v-else-if="!isLoading && !characterError && !repos.length"
-      id="no-container-images"
+    <gl-empty-state
+      v-else
+      :title="s__('ContainerRegistry|There are no container images stored for this project')"
       :svg-path="noContainersImage"
+      class="container-message"
     >
-      <h4>
-        {{ s__('ContainerRegistry|There are no container images stored for this project') }}
-      </h4>
-      <p 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>
+      <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>
 
-      <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 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 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>