Merge branch 'jnnkl-provide-inject-refactor' into 'master'

Refactor dependency list to use provide/inject for static values

See merge request gitlab-org/gitlab!76955

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

@@ -24,28 +24,13 @@ export default {
     DependencyListJobFailedAlert,
     PaginatedDependenciesTable,
   },
-  props: {
-    endpoint: {
-      type: String,
-      required: true,
-    },
-    sbomSurveySvgPath: {
-      type: String,
-      required: true,
-    },
-    emptyStateSvgPath: {
-      type: String,
-      required: true,
-    },
-    documentationPath: {
-      type: String,
-      required: true,
-    },
-    supportDocumentationPath: {
-      type: String,
-      required: true,
-    },
-  },
+  inject: [
+    'sbomSurveySvgPath',
+    'emptyStateSvgPath',
+    'documentationPath',
+    'endpoint',
+    'supportDocumentationPath',
+  ],
   data() {
     return {
       isIncompleteAlertDismissed: false,

ee/app/assets/javascripts/dependencies/index.js

@@ -5,13 +5,13 @@ import createStore from './store';
 export default () => {
   const el = document.querySelector('#js-dependencies-app');
 
-  const {
-    endpoint,
-    emptyStateSvgPath,
-    documentationPath,
-    supportDocumentationPath,
-    sbomSurveySvgPath,
-  } = el.dataset;
+  const provide = {
+    sbomSurveySvgPath: el.dataset.sbomSurveySvgPath,
+    emptyStateSvgPath: el.dataset.emptyStateSvgPath,
+    documentationPath: el.dataset.documentationPath,
+    endpoint: el.dataset.endpoint,
+    supportDocumentationPath: el.dataset.supportDocumentationPath,
+  };
 
   const store = createStore();
 
@@ -21,16 +21,9 @@ export default () => {
       DependenciesApp,
     },
     store,
+    provide,
     render(createElement) {
-      return createElement(DependenciesApp, {
-        props: {
-          endpoint,
-          emptyStateSvgPath,
-          documentationPath,
-          supportDocumentationPath,
-          sbomSurveySvgPath,
-        },
-      });
+      return createElement(DependenciesApp);
     },
   });
 };

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

@@ -36,20 +36,7 @@ export default {
     LicenseManagement,
   },
   mixins: [glFeatureFlagsMixin()],
-  props: {
-    emptyStateSvgPath: {
-      type: String,
-      required: true,
-    },
-    sbomSurveySvgPath: {
-      type: String,
-      required: true,
-    },
-    documentationPath: {
-      type: String,
-      required: true,
-    },
-  },
+  inject: ['sbomSurveySvgPath', 'emptyStateSvgPath', 'documentationPath'],
   data() {
     return {
       tabIndex: this.activeTabIndex(),

ee/app/assets/javascripts/license_compliance/index.js

@@ -7,8 +7,6 @@ export default () => {
   const el = document.querySelector('#js-licenses-app');
   const {
     projectLicensesEndpoint,
-    emptyStateSvgPath,
-    documentationPath,
     readLicensePoliciesEndpoint,
     writeLicensePoliciesEndpoint,
     projectId,
@@ -18,7 +16,6 @@ export default () => {
     approvalsDocumentationPath,
     lockedApprovalsRuleName,
     softwareLicenses,
-    sbomSurveySvgPath,
   } = el.dataset;
 
   const storeSettings = {
@@ -31,6 +28,12 @@ export default () => {
   };
   const store = createStore(storeSettings);
 
+  const provide = {
+    sbomSurveySvgPath: el.dataset.sbomSurveySvgPath,
+    emptyStateSvgPath: el.dataset.emptyStateSvgPath,
+    documentationPath: el.dataset.documentationPath,
+  };
+
   store.dispatch('licenseManagement/setIsAdmin', Boolean(writeLicensePoliciesEndpoint));
   store.dispatch('licenseManagement/setAPISettings', {
     apiUrlManageLicenses: readLicensePoliciesEndpoint,
@@ -45,14 +48,9 @@ export default () => {
     components: {
       LicenseComplianceApp,
     },
+    provide: () => provide,
     render(createElement) {
-      return createElement(LicenseComplianceApp, {
-        props: {
-          sbomSurveySvgPath,
-          emptyStateSvgPath,
-          documentationPath,
-        },
-      });
+      return createElement(LicenseComplianceApp);
     },
   });
 };

ee/spec/frontend/dependencies/components/app_spec.js

@@ -26,7 +26,7 @@ describe('DependenciesApp component', () => {
     supportDocumentationPath: `${TEST_HOST}/dependency_scanning#supported-languages`,
   };
 
-  const factory = ({ props = basicAppProps, ...options } = {}) => {
+  const factory = ({ ...options } = {}) => {
     store = createStore();
     jest.spyOn(store, 'dispatch').mockImplementation();
 
@@ -41,9 +41,15 @@ describe('DependenciesApp component', () => {
     wrapper = extendedWrapper(
       mount(DependenciesApp, {
         store,
-        propsData: { ...props },
         stubs,
         ...options,
+        provide: {
+          endpoint: '/foo',
+          emptyStateSvgPath: '/bar.svg',
+          sbomSurveySvgPath: '/foo.svg',
+          documentationPath: TEST_HOST,
+          supportDocumentationPath: `${TEST_HOST}/dependency_scanning#supported-languages`,
+        },
       }),
     );
   };
@@ -221,7 +227,7 @@ describe('DependenciesApp component', () => {
       it('renders the SbomBannercomponent with the right props', () => {
         const sbomBanner = findSbomBanner();
         expect(sbomBanner.exists()).toBe(true);
-        expect(sbomBanner.props().sbomSurveySvgPath).toEqual(wrapper.props().sbomSurveySvgPath);
+        expect(sbomBanner.props().sbomSurveySvgPath).toEqual(basicAppProps.sbomSurveySvgPath);
       });
 
       describe('given the user has public permissions', () => {

ee/spec/frontend/license_compliance/components/app_spec.js

@@ -74,15 +74,17 @@ const createComponent = ({ state, props, options }) => {
 
   wrapper = mountFunc(LicenseComplianceApp, {
     propsData: {
-      emptyStateSvgPath,
-      documentationPath,
-      sbomSurveySvgPath,
       readLicensePoliciesEndpoint,
       ...props,
     },
     ...options,
     store: fakeStore,
     stubs: { transition: stubTransition() },
+    provide: {
+      sbomSurveySvgPath,
+      emptyStateSvgPath,
+      documentationPath,
+    },
   });
 };
 
@@ -190,7 +192,7 @@ describe('Project Licenses', () => {
     it('renders the SbomBannercomponent with the right props', () => {
       const sbomBanner = findSbomBanner();
       expect(sbomBanner.exists()).toBe(true);
-      expect(sbomBanner.props().sbomSurveySvgPath).toEqual(wrapper.props().sbomSurveySvgPath);
+      expect(sbomBanner.props().sbomSurveySvgPath).toEqual(sbomSurveySvgPath);
     });
 
     it('renders a "Detected in project" tab and a "Policies" tab', () => {