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,6 +20,43 @@ describe('ManageViaMr component', () => {
 
   const findButton = () => wrapper.findComponent(GlButton);
 
+  function createMockApolloProvider(mutation, handler) {
+    const requestHandlers = [[mutation, handler]];
+
+    return createMockApollo(requestHandlers);
+  }
+
+  function createComponent({
+    featureName = 'SAST',
+    featureType = 'sast',
+    isFeatureConfigured = false,
+    variant = undefined,
+    category = undefined,
+    ...options
+  } = {}) {
+    wrapper = extendedWrapper(
+      mount(ManageViaMr, {
+        provide: {
+          projectPath: 'testProjectPath',
+        },
+        propsData: {
+          feature: {
+            name: featureName,
+            type: featureType,
+            configured: isFeatureConfigured,
+          },
+          variant,
+          category,
+        },
+        ...options,
+      }),
+    );
+  }
+
+  afterEach(() => {
+    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.
@@ -43,38 +80,10 @@ describe('ManageViaMr component', () => {
       });
     const pendingHandler = () => new Promise(() => {});
 
-    function createMockApolloProvider(handler) {
-      const requestHandlers = [[mutation, handler]];
-
-      return createMockApollo(requestHandlers);
-    }
-
-    function createComponent({ mockApollo, isFeatureConfigured = false } = {}) {
-      wrapper = extendedWrapper(
-        mount(ManageViaMr, {
-          apolloProvider: mockApollo,
-          provide: {
-            projectPath: 'testProjectPath',
-          },
-          propsData: {
-            feature: {
-              name: featureName,
-              type: featureType,
-              configured: isFeatureConfigured,
-            },
-          },
-        }),
-      );
-    }
-
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
     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,
+      });
+    });
+  });
 });