1 files changed, 39 insertions, 0 deletions
diff --git a/app/assets/javascripts/registry/explorer/components/list_page/group_empty_state.vue b/app/assets/javascripts/registry/explorer/components/list_page/group_empty_state.vue
new file mode 100644
index 00000000000..a29a9bd23c3
--- /dev/null
+++ b/app/assets/javascripts/registry/explorer/components/list_page/group_empty_state.vue
@@ -0,0 +1,39 @@
+<script>
+import { GlEmptyState, GlSprintf, GlLink } from '@gitlab/ui';
+import { mapState } from 'vuex';
+
+export default {
+  name: 'GroupEmptyState',
+  components: {
+    GlEmptyState,
+    GlSprintf,
+    GlLink,
+  },
+  computed: {
+    ...mapState(['config']),
+  },
+};
+</script>
+<template>
+  <gl-empty-state
+    :title="s__('ContainerRegistry|There are no container images available in this group')"
+    :svg-path="config.noContainersImage"
+    class="container-message"
+  >
+    <template #description>
+      <p class="js-no-container-images-text">
+        <gl-sprintf
+          :message="
+            s__(
+              `ContainerRegistry|With the Container Registry, every project can have its own space to store its Docker images. Push at least one Docker image in one of this group's projects in order to show up here. %{docLinkStart}More Information%{docLinkEnd}`,
+            )
+          "
+        >
+          <template #docLink="{content}">
+            <gl-link :href="config.helpPagePath" target="_blank">{{ content }}</gl-link>
+          </template>
+        </gl-sprintf>
+      </p>
+    </template>
+  </gl-empty-state>
+</template>