1 files changed, 48 insertions, 0 deletions
diff --git a/app/assets/javascripts/admin/cohorts/components/usage_ping_disabled.vue b/app/assets/javascripts/admin/cohorts/components/usage_ping_disabled.vue
new file mode 100644
index 00000000000..2ea55d44420
--- /dev/null
+++ b/app/assets/javascripts/admin/cohorts/components/usage_ping_disabled.vue
@@ -0,0 +1,48 @@
+<script>
+import { GlEmptyState, GlSprintf, GlLink } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlEmptyState,
+    GlSprintf,
+    GlLink,
+  },
+  inject: {
+    svgPath: {
+      type: String,
+    },
+    docsLink: {
+      type: String,
+    },
+    primaryButtonPath: {
+      type: String,
+    },
+  },
+};
+</script>
+<template>
+  <gl-empty-state
+    class="js-empty-state"
+    :title="__('Activate user activity analysis')"
+    :svg-path="svgPath"
+    :primary-button-text="__('Turn on usage ping')"
+    :primary-button-link="primaryButtonPath"
+  >
+    <template #description>
+      <gl-sprintf
+        :message="
+          __(
+            'Turn on %{strongStart}usage ping%{strongEnd} to activate analysis of user activity, known as %{docLinkStart}Cohorts%{docLinkEnd}.',
+          )
+        "
+      >
+        <template #docLink="{content}">
+          <gl-link :href="docsLink" target="_blank">{{ content }}</gl-link>
+        </template>
+        <template #strong="{ content }"
+          ><strong>{{ content }}</strong></template
+        >
+      </gl-sprintf>
+    </template>
+  </gl-empty-state>
+</template>