Refactor hand raise lead button to allow variants

- for future extensibility

ee/app/assets/javascripts/contextual_sidebar/components/trial_status_popover.vue

@@ -44,6 +44,13 @@ export default {
     };
   },
   i18n,
+  handRaiseLeadAttributes: {
+    size: 'small',
+    variant: 'confirm',
+    class: 'gl-mb-3 gl-w-full',
+    buttonTextClasses: 'gl-font-sm',
+    href: '#',
+  },
   computed: {
     formattedTrialEndDate() {
       return formatDate(this.trialEndDate, trialEndDateFormatString);
@@ -127,13 +134,13 @@ export default {
           <div data-testid="contact-sales-btn" @click="trackPageAction('contactSalesBtnClick')">
             <div
               class="js-hand-raise-lead-button"
+              :data-button-attributes="JSON.stringify($options.handRaiseLeadAttributes)"
               :data-namespace-id="user.namespaceId"
               :data-user-name="user.userName"
               :data-first-name="user.firstName"
               :data-last-name="user.lastName"
               :data-company-name="user.companyName"
               :data-glm-content="user.glmContent"
-              small
             ></div>
           </div>
         </template>

ee/app/assets/javascripts/hand_raise_leads/hand_raise_lead/components/hand_raise_lead_button.vue

@@ -60,8 +60,11 @@ export default {
     user: {
       default: {},
     },
-    small: {
-      default: false,
+    buttonAttributes: {
+      default: {},
+    },
+    buttonText: {
+      default: PQL_BUTTON_TEXT,
     },
     ctaTracking: {
       default: {
@@ -214,7 +217,6 @@ export default {
     stateLabel: PQL_STATE_LABEL,
     stateSelectPrompt: PQL_STATE_PROMPT,
     commentLabel: PQL_COMMENT_LABEL,
-    buttonText: PQL_BUTTON_TEXT,
     modalTitle: PQL_MODAL_TITLE,
     modalPrimary: PQL_MODAL_PRIMARY,
     modalCancel: PQL_MODAL_CANCEL,
@@ -230,18 +232,15 @@ export default {
   <div>
     <gl-button
       v-gl-modal.hand-raise-lead
+      v-bind="buttonAttributes"
       :loading="isLoading"
-      :href="small ? '#' : ''"
-      :variant="small ? 'confirm' : 'default'"
-      :size="small ? 'small' : 'medium'"
-      :class="{ 'gl-mb-3 gl-w-full': small }"
       :data-track-action="ctaTracking.action"
       :data-track-label="ctaTracking.label"
       :data-track-property="ctaTracking.property"
       :data-track-value="ctaTracking.value"
       :data-track-experiment="ctaTracking.experiment"
     >
-      <span :class="{ 'gl-font-sm': small }">{{ $options.i18n.buttonText }}</span>
+      {{ buttonText }}
     </gl-button>
 
     <gl-modal

ee/app/assets/javascripts/hand_raise_leads/hand_raise_lead/init_hand_raise_lead_button.js

 import Vue from 'vue';
 import HandRaiseLeadButton from 'ee/hand_raise_leads/hand_raise_lead/components/hand_raise_lead_button.vue';
 import apolloProvider from 'ee/subscriptions/buy_addons_shared/graphql';
+import { PQL_BUTTON_TEXT } from './constants';
 
 export const initHandRaiseLeadButton = (el) => {
   const {
@@ -15,13 +16,16 @@ export const initHandRaiseLeadButton = (el) => {
     trackProperty,
     trackValue,
     trackExperiment,
+    buttonAttributes,
+    buttonText,
   } = el.dataset;
 
   return new Vue({
     el,
     apolloProvider,
     provide: {
-      small: Boolean(el.hasAttribute('small')),
+      buttonAttributes: buttonAttributes && JSON.parse(buttonAttributes),
+      buttonText: buttonText || PQL_BUTTON_TEXT,
       user: {
         namespaceId,
         userName,

ee/spec/frontend/contextual_sidebar/__snapshots__/trial_status_popover_spec.js.snap

@@ -21,13 +21,13 @@ exports[`TrialStatusPopover component group_contact_sales experiment candidate m
     >
       <div
         class="js-hand-raise-lead-button"
+        data-button-attributes="{\\"size\\":\\"small\\",\\"variant\\":\\"confirm\\",\\"class\\":\\"gl-mb-3 gl-w-full\\",\\"buttonTextClasses\\":\\"gl-font-sm\\",\\"href\\":\\"#\\"}"
         data-company-name="companyName"
         data-first-name="firstName"
         data-glm-content="glmContent"
         data-last-name="lastName"
         data-namespace-id="namespaceId"
         data-user-name="userName"
-        small=""
       />
     </div>
      

ee/spec/frontend/hand_raise_leads/components/hand_raise_lead_button_spec.js

@@ -119,14 +119,25 @@ describe('HandRaiseLeadButton', () => {
       });
     });
 
-    describe('small button', () => {
-      it('has small confirm button and the "Contact sales" text on the button', () => {
-        wrapper = createComponent({ small: true });
+    describe('sets button attributes', () => {
+      it('has all the set properties on the button', () => {
+        const provide = {
+          buttonAttributes: {
+            href: '#',
+            size: 'small',
+            variant: 'confirm',
+            buttonTextClasses: 'gl-font-sm',
+          },
+          buttonText: '_button_text_',
+        };
+        wrapper = createComponent(provide);
         const button = findButton();
 
-        expect(button.props('variant')).toBe('confirm');
-        expect(button.props('size')).toBe('small');
-        expect(button.text()).toBe(PQL_BUTTON_TEXT);
+        expect(button.props('variant')).toBe(provide.buttonAttributes.variant);
+        expect(button.props('size')).toBe(provide.buttonAttributes.size);
+        expect(button.props('buttonTextClasses')).toBe(provide.buttonAttributes.buttonTextClasses);
+        expect(button.attributes('href')).toBe(provide.buttonAttributes.href);
+        expect(button.text()).toBe(provide.buttonText);
       });
     });
   });