Commit 88075a58 authored by Andrew Fontaine's avatar Andrew Fontaine

Merge branch '346273-resolve-hand-raise-lead-extensibility' into 'master'

Refactor hand raise lead button to allow variants

See merge request gitlab-org/gitlab!85330
parents 22cd7dc4 e0245fe9
...@@ -44,6 +44,13 @@ export default { ...@@ -44,6 +44,13 @@ export default {
}; };
}, },
i18n, i18n,
handRaiseLeadAttributes: {
size: 'small',
variant: 'confirm',
class: 'gl-mb-3 gl-w-full',
buttonTextClasses: 'gl-font-sm',
href: '#',
},
computed: { computed: {
formattedTrialEndDate() { formattedTrialEndDate() {
return formatDate(this.trialEndDate, trialEndDateFormatString); return formatDate(this.trialEndDate, trialEndDateFormatString);
...@@ -127,13 +134,13 @@ export default { ...@@ -127,13 +134,13 @@ export default {
<div data-testid="contact-sales-btn" @click="trackPageAction('contactSalesBtnClick')"> <div data-testid="contact-sales-btn" @click="trackPageAction('contactSalesBtnClick')">
<div <div
class="js-hand-raise-lead-button" class="js-hand-raise-lead-button"
:data-button-attributes="JSON.stringify($options.handRaiseLeadAttributes)"
:data-namespace-id="user.namespaceId" :data-namespace-id="user.namespaceId"
:data-user-name="user.userName" :data-user-name="user.userName"
:data-first-name="user.firstName" :data-first-name="user.firstName"
:data-last-name="user.lastName" :data-last-name="user.lastName"
:data-company-name="user.companyName" :data-company-name="user.companyName"
:data-glm-content="user.glmContent" :data-glm-content="user.glmContent"
small
></div> ></div>
</div> </div>
</template> </template>
......
...@@ -60,8 +60,11 @@ export default { ...@@ -60,8 +60,11 @@ export default {
user: { user: {
default: {}, default: {},
}, },
small: { buttonAttributes: {
default: false, default: {},
},
buttonText: {
default: PQL_BUTTON_TEXT,
}, },
ctaTracking: { ctaTracking: {
default: { default: {
...@@ -214,7 +217,6 @@ export default { ...@@ -214,7 +217,6 @@ export default {
stateLabel: PQL_STATE_LABEL, stateLabel: PQL_STATE_LABEL,
stateSelectPrompt: PQL_STATE_PROMPT, stateSelectPrompt: PQL_STATE_PROMPT,
commentLabel: PQL_COMMENT_LABEL, commentLabel: PQL_COMMENT_LABEL,
buttonText: PQL_BUTTON_TEXT,
modalTitle: PQL_MODAL_TITLE, modalTitle: PQL_MODAL_TITLE,
modalPrimary: PQL_MODAL_PRIMARY, modalPrimary: PQL_MODAL_PRIMARY,
modalCancel: PQL_MODAL_CANCEL, modalCancel: PQL_MODAL_CANCEL,
...@@ -230,18 +232,15 @@ export default { ...@@ -230,18 +232,15 @@ export default {
<div> <div>
<gl-button <gl-button
v-gl-modal.hand-raise-lead v-gl-modal.hand-raise-lead
v-bind="buttonAttributes"
:loading="isLoading" :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-action="ctaTracking.action"
:data-track-label="ctaTracking.label" :data-track-label="ctaTracking.label"
:data-track-property="ctaTracking.property" :data-track-property="ctaTracking.property"
:data-track-value="ctaTracking.value" :data-track-value="ctaTracking.value"
:data-track-experiment="ctaTracking.experiment" :data-track-experiment="ctaTracking.experiment"
> >
<span :class="{ 'gl-font-sm': small }">{{ $options.i18n.buttonText }}</span> {{ buttonText }}
</gl-button> </gl-button>
<gl-modal <gl-modal
......
import Vue from 'vue'; import Vue from 'vue';
import HandRaiseLeadButton from 'ee/hand_raise_leads/hand_raise_lead/components/hand_raise_lead_button.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 apolloProvider from 'ee/subscriptions/buy_addons_shared/graphql';
import { PQL_BUTTON_TEXT } from './constants';
export const initHandRaiseLeadButton = (el) => { export const initHandRaiseLeadButton = (el) => {
const { const {
...@@ -15,13 +16,16 @@ export const initHandRaiseLeadButton = (el) => { ...@@ -15,13 +16,16 @@ export const initHandRaiseLeadButton = (el) => {
trackProperty, trackProperty,
trackValue, trackValue,
trackExperiment, trackExperiment,
buttonAttributes,
buttonText,
} = el.dataset; } = el.dataset;
return new Vue({ return new Vue({
el, el,
apolloProvider, apolloProvider,
provide: { provide: {
small: Boolean(el.hasAttribute('small')), buttonAttributes: buttonAttributes && JSON.parse(buttonAttributes),
buttonText: buttonText || PQL_BUTTON_TEXT,
user: { user: {
namespaceId, namespaceId,
userName, userName,
......
...@@ -21,13 +21,13 @@ exports[`TrialStatusPopover component group_contact_sales experiment candidate m ...@@ -21,13 +21,13 @@ exports[`TrialStatusPopover component group_contact_sales experiment candidate m
> >
<div <div
class="js-hand-raise-lead-button" 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-company-name="companyName"
data-first-name="firstName" data-first-name="firstName"
data-glm-content="glmContent" data-glm-content="glmContent"
data-last-name="lastName" data-last-name="lastName"
data-namespace-id="namespaceId" data-namespace-id="namespaceId"
data-user-name="userName" data-user-name="userName"
small=""
/> />
</div> </div>
......
...@@ -119,14 +119,25 @@ describe('HandRaiseLeadButton', () => { ...@@ -119,14 +119,25 @@ describe('HandRaiseLeadButton', () => {
}); });
}); });
describe('small button', () => { describe('sets button attributes', () => {
it('has small confirm button and the "Contact sales" text on the button', () => { it('has all the set properties on the button', () => {
wrapper = createComponent({ small: true }); const provide = {
buttonAttributes: {
href: '#',
size: 'small',
variant: 'confirm',
buttonTextClasses: 'gl-font-sm',
},
buttonText: '_button_text_',
};
wrapper = createComponent(provide);
const button = findButton(); const button = findButton();
expect(button.props('variant')).toBe('confirm'); expect(button.props('variant')).toBe(provide.buttonAttributes.variant);
expect(button.props('size')).toBe('small'); expect(button.props('size')).toBe(provide.buttonAttributes.size);
expect(button.text()).toBe(PQL_BUTTON_TEXT); expect(button.props('buttonTextClasses')).toBe(provide.buttonAttributes.buttonTextClasses);
expect(button.attributes('href')).toBe(provide.buttonAttributes.href);
expect(button.text()).toBe(provide.buttonText);
}); });
}); });
}); });
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment