Migrate empty state DevOps into Vue component

- Replaces HAML partial with
empty state Vue component

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

+<script>
+import { GlEmptyState, GlSprintf, GlLink, GlButton } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlEmptyState,
+    GlSprintf,
+    GlLink,
+    GlButton,
+  },
+  inject: {
+    isAdmin: {
+      type: Boolean,
+    },
+    svgPath: {
+      type: String,
+    },
+    docsLink: {
+      type: String,
+    },
+    primaryButtonPath: {
+      type: String,
+    },
+  },
+};
+</script>
+<template>
+  <gl-empty-state class="js-empty-state" :title="__('Usage ping is off')" :svg-path="svgPath">
+    <template #description>
+      <gl-sprintf
+        v-if="!isAdmin"
+        :message="
+          __(
+            'To view instance-level analytics, ask an admin to turn on %{docLinkStart}usage ping%{docLinkEnd}.',
+          )
+        "
+      >
+        <template #docLink="{content}">
+          <gl-link :href="docsLink" target="_blank">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
+      <template v-else
+        ><p>
+          {{ __('Turn on usage ping to review instance-level analytics.') }}
+        </p>
+
+        <gl-button category="primary" variant="success" :href="primaryButtonPath">
+          {{ __('Turn on usage ping') }}</gl-button
+        >
+      </template>
+    </template>
+  </gl-empty-state>
+</template>

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

+import Vue from 'vue';
 import UserCallout from '~/user_callout';
+import UsagePingDisabled from '~/admin/dev_ops_score/components/usage_ping_disabled.vue';
 
-document.addEventListener('DOMContentLoaded', () => new UserCallout());
+document.addEventListener('DOMContentLoaded', () => {
+  // eslint-disable-next-line no-new
+  new UserCallout();
+
+  const emptyStateContainer = document.getElementById('js-devops-empty-state');
+
+  if (!emptyStateContainer) return false;
+
+  const { emptyStateSvgPath, enableUsagePingLink, docsLink, isAdmin } = emptyStateContainer.dataset;
+
+  return new Vue({
+    el: emptyStateContainer,
+    provide: {
+      isAdmin: Boolean(isAdmin),
+      svgPath: emptyStateSvgPath,
+      primaryButtonPath: enableUsagePingLink,
+      docsLink,
+    },
+    render(h) {
+      return h(UsagePingDisabled);
+    },
+  });
+});

app/views/admin/dev_ops_score/_disabled.html.haml

-.container.devops-empty
-  .col-sm-12.justify-content-center.text-center
-    = custom_icon('dev_ops_score_no_index')
-    %h4= _('Usage ping is not enabled')
-    - if !current_user.admin?
-      %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_('In order to enable instance-level analytics, please ask an admin to enable %{usage_ping_link_start}usage ping%{usage_ping_link_end}.').html_safe % { usage_ping_link_start: usage_ping_link_start, usage_ping_link_end: '</a>'.html_safe }
-    - if current_user.admin?
-      %p
-        = _('Enable usage ping to get an overview of how you are using GitLab from a feature perspective.')
-    - if current_user.admin?
-      = link_to _('Enable usage ping'), metrics_and_profiling_admin_application_settings_path(anchor: 'js-usage-settings'), class: 'btn btn-primary'

app/views/admin/dev_ops_score/show.html.haml

@@ -7,7 +7,7 @@
 
   .gl-mt-3
   - if !usage_ping_enabled
-    = render 'disabled'
+    #js-devops-empty-state{ data: { is_admin: current_user&.admin.to_s, 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('development/telemetry/usage_ping') } }
   - elsif @metric.blank?
     = render 'no_data'
   - else

changelogs/unreleased/241700-devops-score-migrate-empty-state-into-vue-component.yml

+---
+title: Migrate DevOps Score empty state into Vue component
+merge_request: 40595
+author:
+type: changed

locale/gitlab.pot

@@ -9272,9 +9272,6 @@ msgstr ""
 msgid "Enable usage ping"
 msgstr ""
 
-msgid "Enable usage ping to get an overview of how you are using GitLab from a feature perspective."
-msgstr ""
-
 msgid "Enable/disable your service desk. %{link_start}Learn more about service desk%{link_end}."
 msgstr ""
 
@@ -13025,9 +13022,6 @@ msgstr ""
 msgid "In %{time_to_now}"
 msgstr ""
 
-msgid "In order to enable instance-level analytics, please ask an admin to enable %{usage_ping_link_start}usage ping%{usage_ping_link_end}."
-msgstr ""
-
 msgid "In order to gather accurate feature usage data, it can take 1 to 2 weeks to see your index."
 msgstr ""
 
@@ -25962,6 +25956,9 @@ msgstr ""
 msgid "To view all %{scannedResourcesCount} scanned URLs, please download the CSV file"
 msgstr ""
 
+msgid "To view instance-level analytics, ask an admin to turn on %{docLinkStart}usage ping%{docLinkEnd}."
+msgstr ""
+
 msgid "To view the roadmap, add a start or due date to one of your epics in this group or its subgroups. In the months view, only epics in the past month, current month, and next 5 months are shown."
 msgstr ""
 
@@ -26271,6 +26268,9 @@ msgstr ""
 msgid "Turn on usage ping"
 msgstr ""
 
+msgid "Turn on usage ping to review instance-level analytics."
+msgstr ""
+
 msgid "Twitter"
 msgstr ""
 
@@ -26748,7 +26748,7 @@ msgstr ""
 msgid "Usage"
 msgstr ""
 
-msgid "Usage ping is not enabled"
+msgid "Usage ping is off"
 msgstr ""
 
 msgid "Usage statistics"

spec/features/admin/admin_dev_ops_score_spec.rb

@@ -22,10 +22,10 @@ RSpec.describe 'DevOps Report page' do
       stub_application_setting(usage_ping_enabled: false)
     end
 
-    it 'shows empty state' do
+    it 'shows empty state', :js do
       visit admin_dev_ops_score_path
 
-      expect(page).to have_content('Usage ping is not enabled')
+      expect(page).to have_selector(".js-empty-state")
     end
 
     it 'hides the intro callout' do