Add latest changes from gitlab-org/gitlab@master

5 files changed, 96 insertions, 0 deletions

diff --git a/app/assets/javascripts/admin/dev_ops_report/components/devops_adoption_app.vue b/app/assets/javascripts/admin/dev_ops_report/components/devops_adoption_app.vue
new file mode 100644
index 00000000000..ee2fe00fe02
--- /dev/null
+++ b/app/assets/javascripts/admin/dev_ops_report/components/devops_adoption_app.vue
@@ -0,0 +1,13 @@
+<script>
+import DevopsAdoptionEmptyState from './devops_adoption_empty_state.vue';
+
+export default {
+  name: 'DevopsAdoptionApp',
+  components: {
+    DevopsAdoptionEmptyState,
+  },
+};
+</script>
+<template>
+  <devops-adoption-empty-state />
+</template>
diff --git a/app/assets/javascripts/admin/dev_ops_report/components/devops_adoption_empty_state.vue b/app/assets/javascripts/admin/dev_ops_report/components/devops_adoption_empty_state.vue
new file mode 100644
index 00000000000..0fff9beb435
--- /dev/null
+++ b/app/assets/javascripts/admin/dev_ops_report/components/devops_adoption_empty_state.vue
@@ -0,0 +1,25 @@
+<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>
diff --git a/app/assets/javascripts/admin/dev_ops_report/constants.js b/app/assets/javascripts/admin/dev_ops_report/constants.js
new file mode 100644
index 00000000000..4f3b7879332
--- /dev/null
+++ b/app/assets/javascripts/admin/dev_ops_report/constants.js
@@ -0,0 +1,11 @@
+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'),
+  },
+};
diff --git a/app/assets/javascripts/admin/dev_ops_report/devops_adoption.js b/app/assets/javascripts/admin/dev_ops_report/devops_adoption.js
new file mode 100644
index 00000000000..45901a5634f
--- /dev/null
+++ b/app/assets/javascripts/admin/dev_ops_report/devops_adoption.js
@@ -0,0 +1,20 @@
+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);
+    },
+  });
+};
diff --git a/app/assets/javascripts/admin/dev_ops_report/devops_score_empty_state.js b/app/assets/javascripts/admin/dev_ops_report/devops_score_empty_state.js
new file mode 100644
index 00000000000..0cb8d9be0e4
--- /dev/null
+++ b/app/assets/javascripts/admin/dev_ops_report/devops_score_empty_state.js
@@ -0,0 +1,27 @@
+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);
+    },
+  });
+};