Remove old haml template content

Removes all the existing content from the
cycle_analytics haml template, leaving only the
vue app mount point

Minor template fixes

app/assets/javascripts/cycle_analytics/components/base.vue

@@ -53,7 +53,7 @@ export default {
       isLoading: false,
       isLoadingStage: false,
       isEmptyStage: false,
-      hasError: false,
+      hasError: true,
       startDate: 30,
       isOverviewDialogDismissed: Cookies.get(OVERVIEW_DIALOG_COOKIE),
     };
@@ -77,22 +77,9 @@ export default {
       this.store.setErrorState(true);
       return new Flash(__('There was an error while fetching value stream analytics data.'));
     },
-    initDropdown() {
-      const $dropdown = $('.js-ca-dropdown');
-      const $label = $dropdown.find('.dropdown-label');
-
-      // eslint-disable-next-line @gitlab/no-global-event-off
-      $dropdown
-        .find('li a')
-        .off('click')
-        .on('click', (e) => {
-          e.preventDefault();
-          const $target = $(e.currentTarget);
-          this.startDate = $target.data('value');
-
-          $label.text($target.text().trim());
-          this.fetchCycleAnalyticsData({ startDate: this.startDate });
-        });
+    handleDateSelect(startDate) {
+      this.startDate = startDate;
+      this.fetchCycleAnalyticsData({ startDate: this.startDate });
     },
     fetchCycleAnalyticsData(options) {
       const fetchOptions = options || { startDate: this.startDate };
@@ -104,7 +91,6 @@ export default {
         .then((response) => {
           this.store.setCycleAnalyticsData(response);
           this.selectDefaultStage();
-          this.initDropdown();
           this.isLoading = false;
         })
         .catch(() => {
@@ -153,7 +139,6 @@ export default {
 };
 </script>
 <template>
-  <!-- TODO: add error message if hasError = true -->
   <div class="cycle-analytics">
     <gl-loading-icon v-if="isLoading" size="lg" />
     <div v-else class="wrapper">
@@ -168,19 +153,25 @@ export default {
             <div class="js-ca-dropdown dropdown inline">
               <button class="dropdown-menu-toggle" data-toggle="dropdown" type="button">
                 <span class="dropdown-label">
-                  {{ n__('Last %d day', 'Last %d days', 30) }}
+                  {{ n__('Last %d day', 'Last %d days', startDate) }}
                   <gl-icon name="chevron-down" class="dropdown-menu-toggle-icon gl-top-3" />
                 </span>
               </button>
               <ul class="dropdown-menu dropdown-menu-right">
                 <li>
-                  <a href="#" data-value="7">{{ n__('Last %d day', 'Last %d days', 7) }}</a>
+                  <a href="#" @click.prevent="handleDateSelect(7)">{{
+                    n__('Last %d day', 'Last %d days', 7)
+                  }}</a>
                 </li>
                 <li>
-                  <a href="#" data-value="30">{{ n__('Last %d day', 'Last %d days', 30) }}</a>
+                  <a href="#" @click.prevent="handleDateSelect(30)">{{
+                    n__('Last %d day', 'Last %d days', 30)
+                  }}</a>
                 </li>
                 <li>
-                  <a href="#" data-value="90">{{ n__('Last %d day', 'Last %d days', 90) }}</a>
+                  <a href="#" @click.prevent="handleDateSelect(90)">{{
+                    n__('Last %d day', 'Last %d days', 90)
+                  }}</a>
                 </li>
               </ul>
             </div>
@@ -282,7 +273,7 @@ export default {
                     class="js-empty-state"
                     :description="currentStage.emptyStageText"
                     :svg-path="noDataSvgPath"
-                    :title="__('We don't have enough data to show this stage.')"
+                    :title="__('We don\'t have enough data to show this stage.')"
                   />
                 </template>
                 <template v-if="state.events.length && !isLoadingStage && !isEmptyStage">

app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js → app/assets/javascripts/cycle_analytics/index.js

@@ -12,12 +12,12 @@ const createCycleAnalyticsService = (requestPath) =>
   });
 export default () => {
-  const cycleAnalyticsEl = document.querySelector('#cycle-analytics');
-  const { noAccessSvgPath, noDataSvgPath } = cycleAnalyticsEl.dataset;
+  const el = document.querySelector('#js-cycle-analytics');
+  const { noAccessSvgPath, noDataSvgPath } = el.dataset;
   // eslint-disable-next-line no-new
   new Vue({
-    el: '#cycle-analytics',
+    el,
     name: 'CycleAnalytics',
     render: (createElement) =>
       createElement(CycleAnalytics, {
@@ -25,7 +25,7 @@ export default () => {
           noDataSvgPath,
           noAccessSvgPath,
           store: CycleAnalyticsStore,
-          service: createCycleAnalyticsService(cycleAnalyticsEl.dataset.requestPath),
+          service: createCycleAnalyticsService(el.dataset.requestPath),
         },
       }),
   });

app/assets/javascripts/pages/projects/cycle_analytics/show/index.js

-import initCycleAnalytics from '~/cycle_analytics/cycle_analytics_bundle';
+import initCycleAnalytics from '~/cycle_analytics';
 document.addEventListener('DOMContentLoaded', initCycleAnalytics);

app/assets/stylesheets/page_bundles/cycle_analytics.scss

 @import 'mixins_and_variables_and_functions';
-#cycle-analytics,
 .cycle-analytics {
   margin: 24px auto 0;
   position: relative;

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

@@ -3,66 +3,4 @@
 - 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: initial_data }
-  %gl-loading-icon{ "v-show" => "isLoading", "size" => "lg" }
-  .wrapper{ "v-show" => "!isLoading && !hasError" }
-    .card
-      .card-header
-        {{ __('Recent Project Activity') }}
-      .d-flex.justify-content-between
-        .flex-grow.text-center{ "v-for" => "item in state.summary" }
-          %h3.header {{ item.value }}
-          %p.text {{ item.title }}
-        .flex-grow.align-self-center.text-center
-          .dropdown.inline.js-ca-dropdown
-            %button.dropdown-menu-toggle{ "data-toggle" => "dropdown", :type => "button" }
-              %span.dropdown-label {{ n__('Last %d day', 'Last %d days', 30) }}
-              = sprite_icon("chevron-down", css_class: "dropdown-menu-toggle-icon gl-top-3")
-            %ul.dropdown-menu.dropdown-menu-right
-              %li
-                %a{ "href" => "#", "data-value" => "7" }
-                  {{ n__('Last %d day', 'Last %d days', 7) }}
-              %li
-                %a{ "href" => "#", "data-value" => "30" }
-                  {{ n__('Last %d day', 'Last %d days', 30) }}
-              %li
-                %a{ "href" => "#", "data-value" => "90" }
-                  {{ n__('Last %d day', 'Last %d days', 90) }}
-    .stage-panel-container
-      .card.stage-panel
-        .card-header.border-bottom-0
-          %nav.col-headers
-            %ul
-              %li.stage-header.pl-5
-                %span.stage-name.font-weight-bold
-                  {{ s__('ProjectLifecycle|Stage') }}
-                %span.has-tooltip{ "data-placement" => "top", title: _("The phase of the development lifecycle."), "aria-hidden" => "true" }
-                  = sprite_icon('question-o', css_class: 'gl-text-gray-500')
-              %li.median-header
-                %span.stage-name.font-weight-bold
-                  {{ __('Median') }}
-                %span.has-tooltip{ "data-placement" => "top", title: _("The value lying at the midpoint of a series of observed values. E.g., between 3, 5, 9, the median is 5. Between 3, 5, 7, 8, the median is (5+7)/2 = 6."), "aria-hidden" => "true" }
-                  = sprite_icon('question-o', css_class: 'gl-text-gray-500')
-              %li.event-header.pl-3
-                %span.stage-name.font-weight-bold{ "v-if" => "currentStage && currentStage.legend" }
-                  {{ currentStage ? __(currentStage.legend) : __('Related Issues') }}
-                %span.has-tooltip{ "data-placement" => "top", title: _("The collection of events added to the data gathered for that stage."), "aria-hidden" => "true" }
-                  = sprite_icon('question-o', css_class: 'gl-text-gray-500')
-              %li.total-time-header.pr-5.text-right
-                %span.stage-name.font-weight-bold
-                  {{ __('Time') }}
-                %span.has-tooltip{ "data-placement" => "top", title: _("The time taken by each data entry gathered by that stage."), "aria-hidden" => "true" }
-                  = sprite_icon('question-o', css_class: 'gl-text-gray-500')
-        .stage-panel-body
-          %nav.stage-nav
-            %ul
-              %stage-nav-item{ "v-for" => "stage in state.stages", ":key" => '`ca-stage-title-${stage.title}`', '@select' => 'selectStage(stage)', ":title" => "stage.title", ":is-user-allowed" => "stage.isUserAllowed", ":value" => "stage.value", ":is-active" => "stage.active" }
-          .section.stage-events.overflow-auto
-            %gl-loading-icon{ "v-show" => "isLoadingStage", "size" => "lg" }
-            %template{ "v-if" => "currentStage && !currentStage.isUserAllowed" }
-              %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" => "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" }
+#js-cycle-analytics{ data: initial_data }