Add variant and category props

These props are needed to support
https://gitlab.com/gitlab-org/gitlab/-/issues/328385,
part of https://gitlab.com/groups/gitlab-org/-/epics/5820.

app/assets/javascripts/vue_shared/security_configuration/components/manage_via_mr.vue

@@ -16,6 +16,16 @@ export default {
       type: Object,
       required: true,
     },
+    variant: {
+      type: String,
+      required: false,
+      default: 'success',
+    },
+    category: {
+      type: String,
+      required: false,
+      default: 'secondary',
+    },
   },
   data() {
     return {
@@ -65,8 +75,8 @@ export default {
   <gl-button
     v-if="!feature.configured"
     :loading="isLoading"
-    variant="success"
-    category="secondary"
+    :variant="variant"
+    :category="category"
     @click="mutate"
     >{{ $options.i18n.buttonLabel }}</gl-button
   >

ee/spec/frontend/security_configuration/components/configuration_table_spec.js

@@ -67,7 +67,7 @@ describe('ConfigurationTable component', () => {
       gitlabCiHistoryPath: propsData.gitlabCiHistoryPath,
       autoDevopsEnabled: propsData.autoDevopsEnabled,
     });
-    expect(manage.find(ManageFeature).props()).toEqual({ feature });
+    expect(manage.find(ManageFeature).props()).toMatchObject({ feature });
     expect(description.find(GlLink).attributes('href')).toBe(feature.helpPath);
   });
 

ee/spec/frontend/security_configuration/components/manage_feature_spec.js

@@ -73,7 +73,7 @@ describe('ManageFeature component', () => {
     });
 
     it('passes through props to expected component', () => {
-      expect(component.props()).toEqual({ feature });
+      expect(component.props()).toMatchObject({ feature });
     });
   });
 

spec/frontend/vue_shared/security_reports/components/manage_via_mr_spec.js

@@ -20,39 +20,22 @@ describe('ManageViaMr component', () => {
 
   const findButton = () => wrapper.findComponent(GlButton);
 
-  // This component supports different report types/mutations depending on
-  // whether it's in a CE or EE context. This makes sure we are only testing
-  // the ones available in the current test context.
-  const supportedReportTypes = Object.entries(featureToMutationMap).map(
-    ([featureType, { getMutationPayload, mutationId }]) => {
-      const { mutation } = getMutationPayload();
-      return [humanize(featureType), featureType, mutation, mutationId];
-    },
-  );
-
-  describe.each(supportedReportTypes)('%s', (featureName, featureType, mutation, mutationId) => {
-    const buildConfigureSecurityFeatureMock = buildConfigureSecurityFeatureMockFactory(mutationId);
-    const successHandler = async () => buildConfigureSecurityFeatureMock();
-    const noSuccessPathHandler = async () =>
-      buildConfigureSecurityFeatureMock({
-        successPath: '',
-      });
-    const errorHandler = async () =>
-      buildConfigureSecurityFeatureMock({
-        errors: ['foo'],
-      });
-    const pendingHandler = () => new Promise(() => {});
-
-    function createMockApolloProvider(handler) {
+  function createMockApolloProvider(mutation, handler) {
     const requestHandlers = [[mutation, handler]];
 
     return createMockApollo(requestHandlers);
   }
 
-    function createComponent({ mockApollo, isFeatureConfigured = false } = {}) {
+  function createComponent({
+    featureName = 'SAST',
+    featureType = 'sast',
+    isFeatureConfigured = false,
+    variant = undefined,
+    category = undefined,
+    ...options
+  } = {}) {
     wrapper = extendedWrapper(
       mount(ManageViaMr, {
-          apolloProvider: mockApollo,
         provide: {
           projectPath: 'testProjectPath',
         },
@@ -62,7 +45,10 @@ describe('ManageViaMr component', () => {
             type: featureType,
             configured: isFeatureConfigured,
           },
+          variant,
+          category,
         },
+        ...options,
       }),
     );
   }
@@ -71,10 +57,33 @@ describe('ManageViaMr component', () => {
     wrapper.destroy();
   });
 
+  // This component supports different report types/mutations depending on
+  // whether it's in a CE or EE context. This makes sure we are only testing
+  // the ones available in the current test context.
+  const supportedReportTypes = Object.entries(featureToMutationMap).map(
+    ([featureType, { getMutationPayload, mutationId }]) => {
+      const { mutation } = getMutationPayload();
+      return [humanize(featureType), featureType, mutation, mutationId];
+    },
+  );
+
+  describe.each(supportedReportTypes)('%s', (featureName, featureType, mutation, mutationId) => {
+    const buildConfigureSecurityFeatureMock = buildConfigureSecurityFeatureMockFactory(mutationId);
+    const successHandler = async () => buildConfigureSecurityFeatureMock();
+    const noSuccessPathHandler = async () =>
+      buildConfigureSecurityFeatureMock({
+        successPath: '',
+      });
+    const errorHandler = async () =>
+      buildConfigureSecurityFeatureMock({
+        errors: ['foo'],
+      });
+    const pendingHandler = () => new Promise(() => {});
+
     describe('when feature is configured', () => {
       beforeEach(() => {
-        const mockApollo = createMockApolloProvider(successHandler);
-        createComponent({ mockApollo, isFeatureConfigured: true });
+        const apolloProvider = createMockApolloProvider(mutation, successHandler);
+        createComponent({ apolloProvider, featureName, featureType, isFeatureConfigured: true });
       });
 
       it('it does not render a button', () => {
@@ -84,8 +93,8 @@ describe('ManageViaMr component', () => {
 
     describe('when feature is not configured', () => {
       beforeEach(() => {
-        const mockApollo = createMockApolloProvider(successHandler);
-        createComponent({ mockApollo, isFeatureConfigured: false });
+        const apolloProvider = createMockApolloProvider(mutation, successHandler);
+        createComponent({ apolloProvider, featureName, featureType, isFeatureConfigured: false });
       });
 
       it('it does render a button', () => {
@@ -95,8 +104,8 @@ describe('ManageViaMr component', () => {
 
     describe('given a pending response', () => {
       beforeEach(() => {
-        const mockApollo = createMockApolloProvider(pendingHandler);
-        createComponent({ mockApollo });
+        const apolloProvider = createMockApolloProvider(mutation, pendingHandler);
+        createComponent({ apolloProvider, featureName, featureType });
       });
 
       it('renders spinner correctly', async () => {
@@ -109,8 +118,8 @@ describe('ManageViaMr component', () => {
 
     describe('given a successful response', () => {
       beforeEach(() => {
-        const mockApollo = createMockApolloProvider(successHandler);
-        createComponent({ mockApollo });
+        const apolloProvider = createMockApolloProvider(mutation, successHandler);
+        createComponent({ apolloProvider, featureName, featureType });
       });
 
       it('should call redirect helper with correct value', async () => {
@@ -133,8 +142,8 @@ describe('ManageViaMr component', () => {
       ${errorHandler}         | ${'foo'}
     `('given an error response', ({ handler, message }) => {
       beforeEach(() => {
-        const mockApollo = createMockApolloProvider(handler);
-        createComponent({ mockApollo });
+        const apolloProvider = createMockApolloProvider(mutation, handler);
+        createComponent({ apolloProvider, featureName, featureType });
       });
 
       it('should catch and emit error', async () => {
@@ -145,4 +154,17 @@ describe('ManageViaMr component', () => {
       });
     });
   });
+
+  describe('button props', () => {
+    it('passes the variant and category props to the GlButton', () => {
+      const variant = 'danger';
+      const category = 'tertiary';
+      createComponent({ variant, category });
+
+      expect(wrapper.findComponent(GlButton).props()).toMatchObject({
+        variant,
+        category,
+      });
+    });
+  });
 });