Add latest changes from gitlab-org/gitlab@master

3 files changed, 29 insertions, 4 deletions

diff --git a/app/assets/javascripts/analytics/devops_report/components/devops_score.vue b/app/assets/javascripts/analytics/devops_report/components/devops_score.vue
index 7dc552623f6..1a3289ffb75 100644
--- a/app/assets/javascripts/analytics/devops_report/components/devops_score.vue
+++ b/app/assets/javascripts/analytics/devops_report/components/devops_score.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlBadge, GlTable } from '@gitlab/ui';
+import { GlBadge, GlTable, GlLink, GlEmptyState } from '@gitlab/ui';
 import { GlSingleStat } from '@gitlab/ui/dist/charts';
 import { sprintf, s__ } from '~/locale';
 
@@ -13,11 +13,19 @@ export default {
     GlBadge,
     GlTable,
     GlSingleStat,
+    GlLink,
+    GlEmptyState,
   },
   inject: {
     devopsScoreMetrics: {
       default: null,
     },
+    devopsReportDocsPath: {
+      default: '',
+    },
+    noDataImagePath: {
+      default: '',
+    },
   },
   computed: {
     titleHelperText() {
@@ -28,6 +36,9 @@ export default {
         { timestamp: this.devopsScoreMetrics.createdAt },
       );
     },
+    isEmpty() {
+      return this.devopsScoreMetrics.averageScore === undefined;
+    },
   },
   tableHeaderFields: [
     {
@@ -54,7 +65,19 @@ export default {
 };
 </script>
 <template>
-  <div data-testid="devops-score-app">
+  <gl-empty-state
+    v-if="isEmpty"
+    :title="__('Data is still calculating...')"
+    :svg-path="noDataImagePath"
+  >
+    <template #description>
+      <p class="gl-mb-0">{{ __('It may be several days before you see feature usage data.') }}</p>
+      <gl-link :href="devopsReportDocsPath">{{
+        __('See example DevOps Score page in our documentation.')
+      }}</gl-link>
+    </template>
+  </gl-empty-state>
+  <div v-else data-testid="devops-score-app">
     <div class="gl-text-gray-400 gl-my-4" data-testid="devops-score-note-text">
       {{ titleHelperText }}
     </div>
diff --git a/app/assets/javascripts/analytics/devops_report/devops_score.js b/app/assets/javascripts/analytics/devops_report/devops_score.js
index 46b27e0a340..18f7cf0c3ab 100644
--- a/app/assets/javascripts/analytics/devops_report/devops_score.js
+++ b/app/assets/javascripts/analytics/devops_report/devops_score.js
@@ -6,12 +6,14 @@ export default () => {
 
   if (!el) return false;
 
-  const { devopsScoreMetrics } = el.dataset;
+  const { devopsScoreMetrics, devopsReportDocsPath, noDataImagePath } = el.dataset;
 
   return new Vue({
     el,
     provide: {
       devopsScoreMetrics: JSON.parse(devopsScoreMetrics),
+      devopsReportDocsPath,
+      noDataImagePath,
     },
     render(h) {
       return h(DevopsScore);
diff --git a/app/assets/javascripts/analytics/devops_report/devops_score_empty_state.js b/app/assets/javascripts/analytics/devops_report/devops_score_disabled_usage_ping.js
index 0cb8d9be0e4..0131407e723 100644
--- a/app/assets/javascripts/analytics/devops_report/devops_score_empty_state.js
+++ b/app/assets/javascripts/analytics/devops_report/devops_score_disabled_usage_ping.js
@@ -6,7 +6,7 @@ export default () => {
   // eslint-disable-next-line no-new
   new UserCallout();
 
-  const emptyStateContainer = document.getElementById('js-devops-empty-state');
+  const emptyStateContainer = document.getElementById('js-devops-usage-ping-disabled');
 
   if (!emptyStateContainer) return false;