Merge branch 'gitlab-ui-integration-ek-add-include-toolbox-prop-to-charts' into 'master'

Replace `getToolboxOptions` usages with `option.toolbox.show` attribute

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/159188



Merged-by: Savas Vedova <svedova@gitlab.com>
Approved-by: Savas Vedova <svedova@gitlab.com>
Reviewed-by: Ezekiel Kigbo <3397881-ekigbo@users.noreply.gitlab.com>
Co-authored-by: Ezekiel Kigbo <ekigbo@gitlab.com>

ee/app/assets/javascripts/security_dashboard/components/project/project_security_dashboard.vue

@@ -5,7 +5,6 @@ import projectsHistoryQuery from 'ee/security_dashboard/graphql/queries/project_
 import severitiesCountQuery from 'ee/security_dashboard/graphql/queries/vulnerability_severities_count.query.graphql';
 import SecurityTrainingPromoBanner from 'ee/security_dashboard/components/project/security_training_promo_banner.vue';
 import { PROJECT_LOADING_ERROR_MESSAGE } from 'ee/security_dashboard/helpers';
-import { getToolboxOptions } from '~/lib/utils/chart_utils';
 import { createAlert } from '~/alert';
 import { formatDate, getDateInPast } from '~/lib/utils/datetime_utility';
 import { s__, __ } from '~/locale';
@@ -80,7 +79,6 @@ export default {
     return {
       chartWidth: 0,
       trendsByDay: [],
-      toolboxOptions: {},
     };
   },
   computed: {
@@ -153,13 +151,12 @@ export default {
             startValue: this.chartStartDate,
           },
         ],
-        ...this.toolboxOptions,
+        toolbox: {
+          show: true,
+        },
       };
     },
   },
-  async created() {
-    this.toolboxOptions = await getToolboxOptions();
-  },
 };
 </script>
 

ee/app/assets/javascripts/usage_quotas/transfer/components/usage_by_month.vue

 <script>
 import { GlAreaChart } from '@gitlab/ui/dist/charts';
 import { GlSkeletonLoader } from '@gitlab/ui';
-import { isEmpty } from 'lodash';
 import { s__, __ } from '~/locale';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
-import { getToolboxOptions } from '~/lib/utils/chart_utils';
 import { USAGE_BY_MONTH_HEADER } from '../../constants';
 
 export default {
@@ -59,16 +57,15 @@ export default {
             },
           },
         },
-        ...this.toolboxOptions,
+        toolbox: {
+          show: true,
+        },
       };
     },
     shouldRenderSkeletonLoader() {
-      return this.loading || isEmpty(this.toolboxOptions);
+      return this.loading;
     },
   },
-  async created() {
-    this.toolboxOptions = await getToolboxOptions();
-  },
   methods: {
     formatTooltipText({ seriesData }) {
       if (!seriesData?.[0]?.value) {

ee/spec/frontend/security_dashboard/components/project/project_security_dashboard_spec.js

@@ -14,10 +14,6 @@ import { mockProjectSecurityChartsWithData, mockSeverityCountsWithData } from '.
 
 Vue.use(VueApollo);
 
-jest.mock('~/lib/utils/icon_utils', () => ({
-  getSvgIconPathContent: jest.fn().mockResolvedValue('mockSvgPathContent'),
-}));
-
 describe('Project Security Dashboard component', () => {
   let wrapper;
   let severitiesCountQueryHandler;
@@ -116,16 +112,9 @@ describe('Project Security Dashboard component', () => {
       expect(findLoadingIcon().exists()).toBe(false);
     });
 
-    it.each([['restore'], ['saveAsImage']])('should contain %i icon', (icon) => {
-      const option = findLineChart().props('option').toolbox.feature;
-
-      expect(option[icon].icon).toBe('path://mockSvgPathContent');
-    });
-
-    it('contains dataZoom config', () => {
-      const option = findLineChart().props('option').toolbox.feature;
-      expect(option.dataZoom.icon.zoom).toBe('path://mockSvgPathContent');
-      expect(option.dataZoom.icon.back).toBe('path://mockSvgPathContent');
+    it('sets the contains `toolbox.show` option', () => {
+      const { toolbox } = findLineChart().props('option');
+      expect(toolbox).toMatchObject({ show: true });
     });
 
     it('contains the timeline slider', () => {

ee/spec/frontend/usage_quotas/transfer/components/usage_by_month_spec.js

@@ -5,12 +5,6 @@ import waitForPromises from 'helpers/wait_for_promises';
 import UsageByMonth from 'ee/usage_quotas/transfer/components/usage_by_month.vue';
 import { USAGE_BY_MONTH_HEADER } from 'ee/usage_quotas/constants';
 
-jest.mock('~/lib/utils/icon_utils', () => ({
-  getSvgIconPathContent: jest
-    .fn()
-    .mockImplementation((name) => Promise.resolve(`${name}-svg-path-mock`)),
-}));
-
 describe('UsageByMonth', () => {
   let wrapper;
 
@@ -73,20 +67,7 @@ describe('UsageByMonth', () => {
             axisLabel: { formatter: expect.any(Function) },
           },
           toolbox: {
-            feature: {
-              dataZoom: {
-                icon: {
-                  zoom: 'path://marquee-selection-svg-path-mock',
-                  back: 'path://redo-svg-path-mock',
-                },
-              },
-              restore: {
-                icon: 'path://repeat-svg-path-mock',
-              },
-              saveAsImage: {
-                icon: 'path://download-svg-path-mock',
-              },
-            },
+            show: true,
           },
         },
       });