Merge branch '340339-policy-list-performance' into 'master'

Fix loading performance of policies list

See merge request gitlab-org/gitlab!69916

ee/app/assets/javascripts/threat_monitoring/components/environment_picker.vue

 <script>
 import { GlFormGroup, GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
-import { ALL_ENVIRONMENT_NAME } from '../constants';
+import { ALL_ENVIRONMENT_NAME, LOADING_TEXT } from '../constants';
 
 export default {
   components: {
@@ -17,12 +17,20 @@ export default {
     },
   },
   computed: {
-    ...mapState('threatMonitoring', ['environments', 'currentEnvironmentId', 'allEnvironments']),
+    ...mapState('threatMonitoring', [
+      'environments',
+      'currentEnvironmentId',
+      'allEnvironments',
+      'isLoadingEnvironments',
+    ]),
     ...mapGetters('threatMonitoring', ['currentEnvironmentName', 'canChangeEnvironment']),
     environmentName() {
-      return this.allEnvironments && this.includeAll
-        ? ALL_ENVIRONMENT_NAME
-        : this.currentEnvironmentName;
+      if (this.isLoadingEnvironments) {
+        return LOADING_TEXT;
+      } else if (this.allEnvironments && this.includeAll) {
+        return ALL_ENVIRONMENT_NAME;
+      }
+      return this.currentEnvironmentName;
     },
   },
   methods: {
@@ -45,16 +53,18 @@ export default {
       toggle-class="gl-truncate"
       :text="environmentName"
       :disabled="!canChangeEnvironment"
+      :loading="isLoadingEnvironments"
     >
       <gl-dropdown-item
         v-for="environment in environments"
         :key="environment.id"
         @click="setCurrentEnvironmentId(environment.id)"
-        >{{ environment.name }}</gl-dropdown-item
       >
-      <gl-dropdown-item v-if="includeAll" @click="setAllEnvironments">{{
-        $options.ALL_ENVIRONMENT_NAME
-      }}</gl-dropdown-item>
+        {{ environment.name }}
+      </gl-dropdown-item>
+      <gl-dropdown-item v-if="includeAll" @click="setAllEnvironments">
+        {{ $options.ALL_ENVIRONMENT_NAME }}
+      </gl-dropdown-item>
     </gl-dropdown>
   </gl-form-group>
 </template>

ee/app/assets/javascripts/threat_monitoring/components/policies/policies_list.vue

 <script>
-import { GlAlert, GlIcon, GlLink, GlSprintf, GlTable, GlTooltipDirective } from '@gitlab/ui';
+import {
+  GlAlert,
+  GlIcon,
+  GlLink,
+  GlLoadingIcon,
+  GlSprintf,
+  GlTable,
+  GlTooltipDirective,
+} from '@gitlab/ui';
 import { mapState, mapGetters } from 'vuex';
 import { PREDEFINED_NETWORK_POLICIES } from 'ee/threat_monitoring/constants';
 import createFlash from '~/flash';
@@ -37,6 +45,7 @@ export default {
     GlAlert,
     GlIcon,
     GlLink,
+    GlLoadingIcon,
     GlSprintf,
     GlTable,
     EnvironmentPicker,
@@ -81,9 +90,7 @@ export default {
       },
       error: createPolicyFetchError,
       skip() {
-        return (
-          !this.hasEnvironment || this.isLoadingEnvironments || !this.shouldShowNetworkPolicies
-        );
+        return !this.hasEnvironment || !this.shouldShowNetworkPolicies;
       },
     },
     scanExecutionPolicies: {
@@ -108,11 +115,7 @@ export default {
     };
   },
   computed: {
-    ...mapState('threatMonitoring', [
-      'currentEnvironmentId',
-      'allEnvironments',
-      'isLoadingEnvironments',
-    ]),
+    ...mapState('threatMonitoring', ['currentEnvironmentId', 'allEnvironments']),
     ...mapGetters('threatMonitoring', ['currentEnvironmentGid']),
     allPolicyTypes() {
       return {
@@ -142,7 +145,6 @@ export default {
     },
     isLoadingPolicies() {
       return (
-        this.isLoadingEnvironments ||
         this.$apollo.queries.networkPolicies.loading ||
         this.$apollo.queries.scanExecutionPolicies.loading
       );
@@ -317,6 +319,10 @@ export default {
         {{ getTimeAgoString(value.item.updatedAt) }}
       </template>
 
+      <template #table-busy>
+        <gl-loading-icon size="lg" />
+      </template>
+
       <template #empty>
         <no-policies-empty-state :has-existing-policies="hasExistingPolicies" />
       </template>

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

-import { s__ } from '~/locale';
+import { __, s__ } from '~/locale';
 
 export const DEFAULT_ASSIGNED_POLICY_PROJECT = { fullPath: '', branch: '' };
 
-export const INVALID_CURRENT_ENVIRONMENT_NAME = '–';
+export const LOADING_TEXT = __('Loading...');
+
+export const INVALID_CURRENT_ENVIRONMENT_NAME = '-';
 
 export const PREDEFINED_NETWORK_POLICIES = [
   {

ee/spec/frontend/threat_monitoring/components/environment_picker_spec.js

@@ -3,6 +3,7 @@ import { shallowMount } from '@vue/test-utils';
 import EnvironmentPicker from 'ee/threat_monitoring/components/environment_picker.vue';
 import {
   INVALID_CURRENT_ENVIRONMENT_NAME,
+  LOADING_TEXT,
   ALL_ENVIRONMENT_NAME,
 } from 'ee/threat_monitoring/constants';
 import createStore from 'ee/threat_monitoring/store';
@@ -40,10 +41,6 @@ describe('EnvironmentPicker component', () => {
         factory();
       });
 
-      it('has text set to the INVALID_CURRENT_ENVIRONMENT_NAME', () => {
-        expect(findEnvironmentsDropdown().attributes().text).toBe(INVALID_CURRENT_ENVIRONMENT_NAME);
-      });
-
       it('has no dropdown items', () => {
         expect(findEnvironmentsDropdownItems()).toHaveLength(0);
       });
@@ -99,13 +96,19 @@ describe('EnvironmentPicker component', () => {
   });
 
   describe.each`
-    context                            | isLoadingEnvironments | isLoadingNetworkPolicyStatistics | environments
-    ${'environments are loading'}      | ${true}               | ${false}                         | ${mockEnvironments}
-    ${'NetPol statistics are loading'} | ${false}              | ${true}                          | ${mockEnvironments}
-    ${'there are no environments'}     | ${false}              | ${false}                         | ${[]}
+    context                            | isLoadingEnvironments | isLoadingNetworkPolicyStatistics | environments        | text                                | loadingState
+    ${'environments are loading'}      | ${true}               | ${false}                         | ${mockEnvironments} | ${LOADING_TEXT}                     | ${'true'}
+    ${'NetPol statistics are loading'} | ${false}              | ${true}                          | ${mockEnvironments} | ${INVALID_CURRENT_ENVIRONMENT_NAME} | ${undefined}
+    ${'there are no environments'}     | ${false}              | ${false}                         | ${[]}               | ${INVALID_CURRENT_ENVIRONMENT_NAME} | ${undefined}
   `(
     'given $context',
-    ({ isLoadingEnvironments, isLoadingNetworkPolicyStatistics, environments }) => {
+    ({
+      isLoadingEnvironments,
+      isLoadingNetworkPolicyStatistics,
+      environments,
+      text,
+      loadingState,
+    }) => {
       beforeEach(() => {
         factory({
           environments,
@@ -118,6 +121,8 @@ describe('EnvironmentPicker component', () => {
 
       it('disables the environments dropdown', () => {
         expect(findEnvironmentsDropdown().attributes('disabled')).toBe('true');
+        expect(findEnvironmentsDropdown().attributes('text')).toBe(text);
+        expect(findEnvironmentsDropdown().attributes('loading')).toBe(loadingState);
       });
     },
   );

ee/spec/frontend/threat_monitoring/components/policies/policies_list_spec.js

@@ -321,25 +321,6 @@ describe('PoliciesList component', () => {
     });
   });
 
-  describe('given loading environment', () => {
-    beforeEach(() => {
-      mountWrapper({
-        propsData: {
-          hasEnvironment: true,
-        },
-        state: {
-          threatMonitoring: {
-            isLoadingEnvironments: true,
-          },
-        },
-      });
-    });
-
-    it('does not make a request for network policies', () => {
-      expect(networkPoliciesSpy).not.toHaveBeenCalled();
-    });
-  });
-
   describe('given no environments', () => {
     beforeEach(() => {
       mountWrapper({