1 files changed, 59 insertions, 0 deletions

diff --git a/app/assets/javascripts/issues/service_desk/components/empty_state_with_any_issues.vue b/app/assets/javascripts/issues/service_desk/components/empty_state_with_any_issues.vue
new file mode 100644
index 00000000000..ab9e70ae223
--- /dev/null
+++ b/app/assets/javascripts/issues/service_desk/components/empty_state_with_any_issues.vue
@@ -0,0 +1,59 @@
+<script>
+import { GlEmptyState } from '@gitlab/ui';
+import {
+  noSearchResultsTitle,
+  noSearchResultsDescription,
+  infoBannerUserNote,
+  noOpenIssuesTitle,
+  noClosedIssuesTitle,
+} from '../constants';
+
+export default {
+  i18n: {
+    noSearchResultsTitle,
+    noSearchResultsDescription,
+    infoBannerUserNote,
+    noOpenIssuesTitle,
+    noClosedIssuesTitle,
+  },
+  components: {
+    GlEmptyState,
+  },
+  inject: ['emptyStateSvgPath'],
+  props: {
+    hasSearch: {
+      type: Boolean,
+      required: true,
+    },
+    isOpenTab: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  computed: {
+    content() {
+      if (this.hasSearch) {
+        return {
+          title: noSearchResultsTitle,
+          description: noSearchResultsDescription,
+          svgHeight: 150,
+        };
+      }
+      if (this.isOpenTab) {
+        return { title: noOpenIssuesTitle, description: infoBannerUserNote };
+      }
+
+      return { title: noClosedIssuesTitle, svgHeight: 150 };
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-empty-state
+    :description="content.description"
+    :title="content.title"
+    :svg-path="emptyStateSvgPath"
+    :svg-height="content.svgHeight"
+  />
+</template>