Merge branch 'replace-svg-message-with-empty-state' into 'master'

Remove svg component from Container Registry

Closes #66371

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

4 files changed, 56 insertions, 86 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>
diff --git a/app/assets/javascripts/registry/components/svg_message.vue b/app/assets/javascripts/registry/components/svg_message.vue
deleted file mode 100644
index 617093e054e..00000000000
--- a/app/assets/javascripts/registry/components/svg_message.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script>
-export default {
-  name: 'RegistrySvgMessage',
-  props: {
-    id: {
-      type: String,
-      required: true,
-    },
-    svgPath: {
-      type: String,
-      required: true,
-    },
-  },
-};
-</script>
-
-<template>
-  <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>
diff --git a/app/assets/stylesheets/pages/container_registry.scss b/app/assets/stylesheets/pages/container_registry.scss
index 0f4bdb219a3..b88bd78cf3d 100644
--- a/app/assets/stylesheets/pages/container_registry.scss
+++ b/app/assets/stylesheets/pages/container_registry.scss
@@ -3,10 +3,6 @@
  */
 
 .container-message {
-  pre {
-    white-space: pre-line;
-  }
-
   span .btn {
     margin: 0;
   }
diff --git a/spec/javascripts/registry/components/app_spec.js b/spec/javascripts/registry/components/app_spec.js
index e7675669f7a..5ea3f85a247 100644
--- a/spec/javascripts/registry/components/app_spec.js
+++ b/spec/javascripts/registry/components/app_spec.js
@@ -84,12 +84,7 @@ describe('Registry List', () => {
 
     it('should render empty message', done => {
       setTimeout(() => {
-        expect(
-          vm.$el
-            .querySelector('p')
-            .textContent.trim()
-            .replace(/[\r\n]+/g, ' '),
-        ).toEqual(
+        expect(vm.$el.querySelector('.js-no-container-images-text').textContent).toEqual(
           'With the Container Registry, every project can have its own space to store its Docker images. More Information',
         );
         done();
@@ -124,7 +119,9 @@ describe('Registry List', () => {
 
     it('should render invalid characters error message', done => {
       setTimeout(() => {
-        expect(vm.$el.querySelector('.container-message')).not.toBe(null);
+        expect(vm.$el.querySelector('p')).not.toContain(
+          'We are having trouble connecting to Docker, which could be due to an issue with your project name or path. More information',
+        );
         done();
       });
     });