Merge branch '235733-mlunoe-clean-up-page-loading-computed-in-insights-analytics' into 'master'

Resolve "Clean up `pageLoading` computed in `insights.vue`"

Closes #235733

See merge request gitlab-org/gitlab!40096

ee/app/assets/javascripts/insights/components/insights.vue

 <script>
 import { mapActions, mapState } from 'vuex';
-import { GlAlert, GlDeprecatedDropdown, GlDeprecatedDropdownItem, GlLoadingIcon } from '@gitlab/ui';
+import {
+  GlAlert,
+  GlDeprecatedDropdown,
+  GlDeprecatedDropdownItem,
+  GlEmptyState,
+  GlLoadingIcon,
+} from '@gitlab/ui';
+import { EMPTY_STATE_TITLE, EMPTY_STATE_DESCRIPTION, EMPTY_STATE_SVG_PATH } from '../constants';
 import InsightsPage from './insights_page.vue';
-import InsightsConfigWarning from './insights_config_warning.vue';
 
 export default {
   components: {
     GlAlert,
     GlLoadingIcon,
     InsightsPage,
-    InsightsConfigWarning,
+    GlEmptyState,
     GlDeprecatedDropdown,
     GlDeprecatedDropdownItem,
   },
@@ -36,15 +42,22 @@ export default {
       'activePage',
       'chartData',
     ]),
-    pageLoading() {
+    emptyState() {
+      return {
+        title: EMPTY_STATE_TITLE,
+        description: EMPTY_STATE_DESCRIPTION,
+        svgPath: EMPTY_STATE_SVG_PATH,
+      };
+    },
+    hasAllChartsLoaded() {
       const requestedChartKeys = this.activePage?.charts?.map(chart => chart.title) || [];
-      const storeChartKeys = Object.keys(this.chartData);
-      const loadedCharts = storeChartKeys.filter(key => this.chartData[key].loaded);
-      const chartsLoaded =
-        Boolean(requestedChartKeys.length) &&
-        requestedChartKeys.every(key => loadedCharts.includes(key));
-      const chartsErrored = storeChartKeys.some(key => this.chartData[key].error);
-      return !chartsLoaded && !chartsErrored;
+      return requestedChartKeys.every(key => this.chartData[key]?.loaded);
+    },
+    hasChartsError() {
+      return Object.values(this.chartData).some(data => data.error);
+    },
+    pageLoading() {
+      return !this.hasChartsError && !this.hasAllChartsLoaded;
     },
     pages() {
       const { configData, activeTab } = this;
@@ -138,15 +151,11 @@ export default {
       </gl-alert>
       <insights-page :query-endpoint="queryEndpoint" :page-config="activePage" />
     </div>
-    <insights-config-warning
+    <gl-empty-state
       v-else
-      :title="__('Invalid Insights config file detected')"
-      :summary="
-        __(
-          'Please check the configuration file to ensure that it is available and the YAML is valid',
-        )
-      "
-      image="illustrations/monitoring/getting_started.svg"
+      :title="emptyState.title"
+      :description="emptyState.description"
+      :svg-path="emptyState.svgPath"
     />
   </div>
 </template>

ee/app/assets/javascripts/insights/components/insights_config_warning.vue

-<script>
-import { imagePath } from '~/lib/utils/common_utils';
-
-export default {
-  props: {
-    image: {
-      type: String,
-      required: true,
-    },
-    title: {
-      type: String,
-      required: true,
-    },
-    summary: {
-      type: String,
-      required: true,
-    },
-  },
-  computed: {
-    imageSrc() {
-      return imagePath(this.image);
-    },
-  },
-};
-</script>
-<template>
-  <div class="row js-empty-state empty-state">
-    <div class="col-12">
-      <div class="svg-content"><img class="content-image" :src="imageSrc" /></div>
-    </div>
-    <div class="col-12">
-      <div class="text-content">
-        <h4 class="content-title text-center">{{ title }}</h4>
-        <p class="content-summary">{{ summary }}</p>
-      </div>
-    </div>
-  </div>
-</template>

ee/app/assets/javascripts/insights/constants.js

+import { __ } from '~/locale';
+
 export const CHART_TYPES = {
   BAR: 'bar',
   LINE: 'line',
@@ -6,4 +8,8 @@ export const CHART_TYPES = {
   PIE: 'pie',
 };
 
-export default { CHART_TYPES };
+export const EMPTY_STATE_TITLE = __('Invalid Insights config file detected');
+export const EMPTY_STATE_DESCRIPTION = __(
+  'Please check the configuration file to ensure that it is available and the YAML is valid',
+);
+export const EMPTY_STATE_SVG_PATH = '/assets/illustrations/monitoring/getting_started.svg';

ee/changelogs/unreleased/235733-mlunoe-clean-up-page-loading-computed-in-insights-analytics.yml

+---
+title: Fix issue where the select page dropdown would be disabled on the Insights
+  Analytics page when no charts were loaded.
+merge_request: 40096
+author:
+type: fixed

ee/spec/frontend/insights/components/insights_config_warning_spec.js

-import InsightsConfigWarning from 'ee/insights/components/insights_config_warning.vue';
-import { shallowMount } from '@vue/test-utils';
-
-describe('Insights config warning component', () => {
-  const image = 'illustrations/monitoring/getting_started.svg';
-  const title = 'There are no charts configured for this page';
-  const summary =
-    'Please check the configuration file to ensure that a collection of charts has been declared.';
-
-  let wrapper;
-
-  beforeEach(() => {
-    wrapper = shallowMount(InsightsConfigWarning, {
-      propsData: { image, title, summary },
-    });
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  it('renders the component', () => {
-    expect(
-      wrapper
-        .findAll('.content-image')
-        .at(0)
-        .attributes('src'),
-    ).toContain(image);
-
-    expect(wrapper.find('.content-title').text()).toBe(title);
-    expect(wrapper.find('.content-summary').text()).toBe(summary);
-  });
-});