Replace no-access partial

Remove empty stage template

Removes some haml partials that can be
replaced with relevant vue components

app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js

@@ -24,6 +24,7 @@ Vue.use(Translate);
 export default () => {
   const OVERVIEW_DIALOG_COOKIE = 'cycle_analytics_help_dismissed';
   const cycleAnalyticsEl = document.querySelector('#cycle-analytics');
+  const { noAccessSvgPath, noDataSvgPath } = cycleAnalyticsEl.dataset;
 
   // eslint-disable-next-line no-new
   new Vue({
@@ -53,6 +54,8 @@ export default () => {
         startDate: 30,
         isOverviewDialogDismissed: Cookies.get(OVERVIEW_DIALOG_COOKIE),
         service: this.createCycleAnalyticsService(cycleAnalyticsEl.dataset.requestPath),
+        noAccessSvgPath,
+        noDataSvgPath,
       };
     },
     computed: {

app/assets/stylesheets/page_bundles/cycle_analytics.scss

@@ -316,35 +316,4 @@
       }
     }
   }
-
-  .empty-stage,
-  .no-access-stage {
-    text-align: center;
-    width: 75%;
-    margin: 0 auto;
-    padding-top: 130px;
-    color: var(--gray-500, $gray-500);
-
-    h4 {
-      color: var(--gl-text-color, $gl-text-color);
-    }
-  }
-
-  .empty-stage {
-    .icon-no-data {
-      height: 36px;
-      width: 78px;
-      display: inline-block;
-      margin-bottom: 20px;
-    }
-  }
-
-  .no-access-stage {
-    .icon-lock {
-      height: 36px;
-      width: 78px;
-      display: inline-block;
-      margin-bottom: 20px;
-    }
-  }
 }

app/views/projects/cycle_analytics/_empty_stage.html.haml

-.empty-stage-container
-  .empty-stage
-    .icon-no-data
-      = custom_icon ('icon_no_data')
-    %h4 {{ __('We don\'t have enough data to show this stage.') }}
-    %p
-      {{currentStage.emptyStageText}}

app/views/projects/cycle_analytics/_no_access.html.haml

-.no-access-stage-container
-  .no-access-stage
-    .icon-lock
-      = custom_icon ('icon_lock')
-    %h4 {{ __('You need permission.') }}
-    %p
-      {{ __('Want to see the data? Please ask an administrator for access.') }}

app/views/projects/cycle_analytics/show.html.haml

 - page_title _("Value Stream Analytics")
 - add_page_specific_style 'page_bundles/cycle_analytics'
+- svgs = { empty_state_svg_path: image_path("illustrations/analytics/cycle-analytics-empty-chart.svg"), no_data_svg_path: image_path("illustrations/analytics/cycle-analytics-empty-chart.svg"), no_access_svg_path: image_path("illustrations/analytics/no-access.svg") }
+- initial_data = { request_path: project_cycle_analytics_path(@project) }.merge!(svgs)
 
-#cycle-analytics{ "v-cloak" => "true", data: { request_path: project_cycle_analytics_path(@project) } }
+#cycle-analytics{ "v-cloak" => "true", data: initial_data }
   %gl-loading-icon{ "v-show" => "isLoading", "size" => "lg" }
   .wrapper{ "v-show" => "!isLoading && !hasError" }
     .card
@@ -58,9 +60,9 @@
           .section.stage-events.overflow-auto
             %gl-loading-icon{ "v-show" => "isLoadingStage", "size" => "lg" }
             %template{ "v-if" => "currentStage && !currentStage.isUserAllowed" }
-              = render partial: "no_access"
+              %gl-empty-state.js-empty-state{ "title" => _('You need permission.'), ":svg-path" => "noAccessSvgPath", "description" => _("Want to see the data? Please ask an administrator for access.") }
             %template{ "v-else" => true }
-              %template{ "v-if" => "isEmptyStage && !isLoadingStage" }
-                = render partial: "empty_stage"
+              %template{ "v-if" => "currentStage && isEmptyStage && !isLoadingStage" }
+                %gl-empty-state.js-empty-state{ ":description" => "currentStage.emptyStageText", ":svg-path" => "noDataSvgPath", "title" => _("We don't have enough data to show this stage.") }
               %template{ "v-if" => "state.events.length && !isLoadingStage && !isEmptyStage" }
                 %component{ ":is" => "currentStage.component", ":stage" => "currentStage", ":items" => "state.events" }