Improve Cohorts empty state

- Adds a placeholder image and text
to match DevOps Score when
usage ping is disabled

app/assets/javascripts/admin/cohorts/components/usage_ping_disabled.vue

+<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>

app/assets/javascripts/pages/admin/cohorts/index.js

+import Vue from 'vue';
+import UsagePingDisabled from '~/admin/cohorts/components/usage_ping_disabled.vue';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const emptyStateContainer = document.getElementById('js-cohorts-empty-state');
+
+  if (!emptyStateContainer) return false;
+
+  const { emptyStateSvgPath, enableUsagePingLink, docsLink } = emptyStateContainer.dataset;
+
+  return new Vue({
+    el: emptyStateContainer,
+    provide: {
+      svgPath: emptyStateSvgPath,
+      primaryButtonPath: enableUsagePingLink,
+      docsLink,
+    },
+    render(h) {
+      return h(UsagePingDisabled);
+    },
+  });
+});

app/views/admin/cohorts/index.html.haml

@@ -4,12 +4,4 @@
 - if @cohorts
   = render 'cohorts_table'
 - else
-  .bs-callout.bs-callout-warning.clearfix
-    %p
-      - usage_ping_path = help_page_path('development/telemetry/usage_ping')
-      - usage_ping_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: usage_ping_path }
-      = s_('User Cohorts are only shown when the %{usage_ping_link_start}usage ping%{usage_ping_link_end} is enabled.').html_safe % { usage_ping_link_start: usage_ping_link_start, usage_ping_link_end: '</a>'.html_safe }
-      - if current_user.admin?
-        - application_settings_path = metrics_and_profiling_admin_application_settings_path(anchor: 'js-usage-settings')
-        - application_settings_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: application_settings_path }
-        = s_('To enable it and see User Cohorts, visit %{application_settings_link_start}application settings%{application_settings_link_end}.').html_safe % { application_settings_link_start: application_settings_link_start, application_settings_link_end: '</a>'.html_safe }
+  #js-cohorts-empty-state{ data: { empty_state_svg_path: image_path('illustrations/convdev/convdev_no_index.svg'), enable_usage_ping_link: metrics_and_profiling_admin_application_settings_path(anchor: 'js-usage-settings'), docs_link: help_page_path('user/admin_area/analytics/user_cohorts') } }

changelogs/unreleased/235993-cohorts-improve-empty-state-to-match-devops-score.yml

+---
+title: Improve empty state for Cohorts to match DevOps Score
+merge_request: 39828
+author:
+type: changed

locale/gitlab.pot

@@ -1396,6 +1396,9 @@ msgstr ""
 msgid "Activate Service Desk"
 msgstr ""
 
+msgid "Activate user activity analysis"
+msgstr ""
+
 msgid "Active"
 msgstr ""
 
@@ -25806,9 +25809,6 @@ msgstr ""
 msgid "To define internal users, first enable new users set to external"
 msgstr ""
 
-msgid "To enable it and see User Cohorts, visit %{application_settings_link_start}application settings%{application_settings_link_end}."
-msgstr ""
-
 msgid "To further protect your account, consider configuring a %{mfa_link_start}two-factor authentication%{mfa_link_end} method."
 msgstr ""
 
@@ -26193,9 +26193,15 @@ msgstr ""
 msgid "Turn On"
 msgstr ""
 
+msgid "Turn on %{strongStart}usage ping%{strongEnd} to activate analysis of user activity, known as %{docLinkStart}Cohorts%{docLinkEnd}."
+msgstr ""
+
 msgid "Turn on Service Desk"
 msgstr ""
 
+msgid "Turn on usage ping"
+msgstr ""
+
 msgid "Twitter"
 msgstr ""
 
@@ -26817,9 +26823,6 @@ msgstr ""
 msgid "User %{username} was successfully removed."
 msgstr ""
 
-msgid "User Cohorts are only shown when the %{usage_ping_link_start}usage ping%{usage_ping_link_end} is enabled."
-msgstr ""
-
 msgid "User IDs"
 msgstr ""
 

spec/features/admin/admin_cohorts_spec.rb

@@ -5,15 +5,27 @@ require 'spec_helper'
 RSpec.describe 'Cohorts page' do
   before do
     sign_in(create(:admin))
+  end
+
+  context 'with usage ping enabled' do
+    it 'shows users count per month' do
+      stub_application_setting(usage_ping_enabled: true)
+
+      create_list(:user, 2)
+
+      visit admin_cohorts_path
 
-    stub_application_setting(usage_ping_enabled: true)
+      expect(page).to have_content("#{Time.now.strftime('%b %Y')} 3 0")
+    end
   end
 
-  it 'See users count per month' do
-    create_list(:user, 2)
+  context 'with usage ping disabled' do
+    it 'shows empty state', :js do
+      stub_application_setting(usage_ping_enabled: false)
 
-    visit admin_cohorts_path
+      visit admin_cohorts_path
 
-    expect(page).to have_content("#{Time.now.strftime('%b %Y')} 3 0")
+      expect(page).to have_selector(".js-empty-state")
+    end
   end
 end