Bootstrap devops adoption Vue app

At the same time, move the devops score emptry
state initialization out of DOMContentLoaded.

app/assets/javascripts/admin/dev_ops_report/components/devops_adoption_app.vue

+<script>
+import DevopsAdoptionEmptyState from './devops_adoption_empty_state.vue';
+
+export default {
+  name: 'DevopsAdoptionApp',
+  components: {
+    DevopsAdoptionEmptyState,
+  },
+};
+</script>
+<template>
+  <devops-adoption-empty-state />
+</template>

app/assets/javascripts/admin/dev_ops_report/components/devops_adoption_empty_state.vue

+<script>
+import { GlEmptyState, GlButton } from '@gitlab/ui';
+import { DEVOPS_ADOPTION_STRINGS } from '../constants';
+
+export default {
+  name: 'DevopsAdoptionEmptyState',
+  inject: ['emptyStateSvgPath'],
+  components: {
+    GlEmptyState,
+    GlButton,
+  },
+  i18n: DEVOPS_ADOPTION_STRINGS.emptyState,
+};
+</script>
+<template>
+  <gl-empty-state
+    :title="$options.i18n.title"
+    :description="$options.i18n.description"
+    :svg-path="emptyStateSvgPath"
+  >
+    <template #actions>
+      <gl-button variant="info">{{ $options.i18n.button }}</gl-button>
+    </template>
+  </gl-empty-state>
+</template>

app/assets/javascripts/admin/dev_ops_report/constants.js

+import { s__ } from '~/locale';
+
+export const DEVOPS_ADOPTION_STRINGS = {
+  emptyState: {
+    title: s__('DevopsAdoption|Add a segment to get started'),
+    description: s__(
+      'DevopsAdoption|DevOps adoption uses segments to track adoption across key features. Segments are a way to track multiple related projects and groups at once. For example, you could create a segment for the engineering department or a particular product team.',
+    ),
+    button: s__('DevopsAdoption|Add new segment'),
+  },
+};

app/assets/javascripts/admin/dev_ops_report/devops_adoption.js

+import Vue from 'vue';
+import DevopsAdoptionApp from './components/devops_adoption_app.vue';
+
+export default () => {
+  const el = document.querySelector('.js-devops-adoption');
+
+  if (!el) return false;
+
+  const { emptyStateSvgPath } = el.dataset;
+
+  return new Vue({
+    el,
+    provide: {
+      emptyStateSvgPath,
+    },
+    render(h) {
+      return h(DevopsAdoptionApp);
+    },
+  });
+};

app/assets/javascripts/admin/dev_ops_report/devops_score_empty_state.js

+import Vue from 'vue';
+import UserCallout from '~/user_callout';
+import UsagePingDisabled from './components/usage_ping_disabled.vue';
+
+export default () => {
+  // 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/assets/javascripts/pages/admin/dev_ops_report/index.js

-import Vue from 'vue';
-import UserCallout from '~/user_callout';
-import UsagePingDisabled from '~/admin/dev_ops_report/components/usage_ping_disabled.vue';
+import initDevOpsScoreEmptyState from '~/admin/dev_ops_report/devops_score_empty_state';
+import initDevopAdoption from '~/admin/dev_ops_report/devops_adoption';
 
-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);
-    },
-  });
-});
+initDevOpsScoreEmptyState();
+initDevopAdoption();

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

@@ -14,7 +14,7 @@
         .tab-pane.active#devops_score_pane
           = render 'report'
         .tab-pane#devops_adoption_pane
-          .js-devops-adoption
+          .js-devops-adoption{ data: { empty_state_svg_path: image_path('illustrations/monitoring/getting_started.svg') } }
     - else
       = render 'report'
 

locale/gitlab.pot

@@ -9223,6 +9223,15 @@ msgstr ""
 msgid "DevOps Score"
 msgstr ""
 
+msgid "DevopsAdoption|Add a segment to get started"
+msgstr ""
+
+msgid "DevopsAdoption|Add new segment"
+msgstr ""
+
+msgid "DevopsAdoption|DevOps adoption uses segments to track adoption across key features. Segments are a way to track multiple related projects and groups at once. For example, you could create a segment for the engineering department or a particular product team."
+msgstr ""
+
 msgid "Diff content limits"
 msgstr ""
 

spec/frontend/admin/dev_ops_report/components/devops_adoption_app_spec.js

+import { shallowMount } from '@vue/test-utils';
+import DevopsAdoptionApp from '~/admin/dev_ops_report/components/devops_adoption_app.vue';
+import DevopsAdoptionEmptyState from '~/admin/dev_ops_report/components/devops_adoption_empty_state.vue';
+
+describe('DevopsAdoptionApp', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    return shallowMount(DevopsAdoptionApp);
+  };
+
+  beforeEach(() => {
+    wrapper = createComponent();
+  });
+
+  describe('default behaviour', () => {
+    it('displays the empty state', () => {
+      expect(wrapper.find(DevopsAdoptionEmptyState).exists()).toBe(true);
+    });
+  });
+});

spec/frontend/admin/dev_ops_report/components/devops_adoption_empty_state_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { GlEmptyState, GlButton } from '@gitlab/ui';
+import DevopsAdoptionEmptyState from '~/admin/dev_ops_report/components/devops_adoption_empty_state.vue';
+import { DEVOPS_ADOPTION_STRINGS } from '~/admin/dev_ops_report/constants';
+
+const emptyStateSvgPath = 'illustrations/monitoring/getting_started.svg';
+
+describe('DevopsAdoptionEmptyState', () => {
+  let wrapper;
+
+  const createComponent = (options = {}) => {
+    const { stubs = {} } = options;
+    return shallowMount(DevopsAdoptionEmptyState, {
+      provide: {
+        emptyStateSvgPath,
+      },
+      stubs,
+    });
+  };
+
+  const findEmptyState = () => wrapper.find(GlEmptyState);
+  const findEmptyStateAction = () => findEmptyState().find(GlButton);
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('contains the correct svg', () => {
+    wrapper = createComponent();
+
+    expect(findEmptyState().props('svgPath')).toBe(emptyStateSvgPath);
+  });
+
+  it('contains the correct text', () => {
+    wrapper = createComponent();
+
+    const emptyState = findEmptyState();
+
+    expect(emptyState.props('title')).toBe(DEVOPS_ADOPTION_STRINGS.emptyState.title);
+    expect(emptyState.props('description')).toBe(DEVOPS_ADOPTION_STRINGS.emptyState.description);
+  });
+
+  it('contains an overridden action button', () => {
+    wrapper = createComponent({ stubs: { GlEmptyState } });
+
+    const actionButton = findEmptyStateAction();
+
+    expect(actionButton.exists()).toBe(true);
+    expect(actionButton.text()).toBe(DEVOPS_ADOPTION_STRINGS.emptyState.button);
+  });
+});