1 files changed, 74 insertions, 0 deletions
diff --git a/app/assets/javascripts/service_desk/components/empty_state_without_any_issues.vue b/app/assets/javascripts/service_desk/components/empty_state_without_any_issues.vue
new file mode 100644
index 00000000000..9dbed2c2579
--- /dev/null
+++ b/app/assets/javascripts/service_desk/components/empty_state_without_any_issues.vue
@@ -0,0 +1,74 @@
+<script>
+import { GlEmptyState, GlLink } from '@gitlab/ui';
+import {
+  noIssuesSignedOutButtonText,
+  infoBannerTitle,
+  infoBannerUserNote,
+  infoBannerAdminNote,
+  learnMore,
+} from '../constants';
+
+export default {
+  i18n: {
+    noIssuesSignedOutButtonText,
+    infoBannerTitle,
+    infoBannerUserNote,
+    infoBannerAdminNote,
+    learnMore,
+  },
+  components: {
+    GlEmptyState,
+    GlLink,
+  },
+  inject: [
+    'emptyStateSvgPath',
+    'isSignedIn',
+    'signInPath',
+    'canAdminIssues',
+    'isServiceDeskEnabled',
+    'serviceDeskEmailAddress',
+    'serviceDeskHelpPath',
+  ],
+  computed: {
+    canSeeEmailAddress() {
+      return this.canAdminIssues && this.isServiceDeskEnabled;
+    },
+  },
+};
+</script>
+
+<template>
+  <div v-if="isSignedIn">
+    <gl-empty-state
+      :title="$options.i18n.infoBannerTitle"
+      :svg-path="emptyStateSvgPath"
+      content-class="gl-max-w-80!"
+    >
+      <template #description>
+        <p v-if="canSeeEmailAddress">
+          {{ $options.i18n.infoBannerAdminNote }} <br /><code>{{ serviceDeskEmailAddress }}</code>
+        </p>
+        <p>{{ $options.i18n.infoBannerUserNote }}</p>
+        <gl-link :href="serviceDeskHelpPath">
+          {{ $options.i18n.learnMore }}
+        </gl-link>
+      </template>
+    </gl-empty-state>
+  </div>
+
+  <gl-empty-state
+    v-else
+    :title="$options.i18n.infoBannerTitle"
+    :svg-path="emptyStateSvgPath"
+    :primary-button-text="$options.i18n.noIssuesSignedOutButtonText"
+    :primary-button-link="signInPath"
+    content-class="gl-max-w-80!"
+  >
+    <template #description>
+      <p>{{ $options.i18n.infoBannerUserNote }}</p>
+      <gl-link :href="serviceDeskHelpPath">
+        {{ $options.i18n.learnMore }}
+      </gl-link>
+    </template>
+  </gl-empty-state>
+</template>