update overage banner/message in invite modal to direct to the self hosted expansion modal if self hosted expansion is available.

Этот коммит содержится в:
Conor Macpherson
2023-04-14 16:50:53 -04:00
родитель 34eece7462
Коммит 42f6568d09
10 изменённых файлов: 142 добавлений и 40 удалений

Просмотреть файл

@@ -65,9 +65,8 @@ const EnterpriseEditionLeftPanel = ({
const actionQueryParam = query.get('action');
useEffect(() => {
if (actionQueryParam === 'show_expansion_modal' && canExpand && isSelfHostedExpansionEnabled) {
if (actionQueryParam === 'show_expansion_modal') {
selfHostedExpansionModal.open();
query.set('action', '');
}
}, []);
@@ -100,7 +99,7 @@ const EnterpriseEditionLeftPanel = ({
);
const handleClickAddSeats = () => {
if (!isSelfHostedExpansionEnabled && !canExpand) {
if (!isSelfHostedExpansionEnabled || !canExpand) {
window.open(expandableLink(unsanitizedLicense.Id), '_blank');
} else {
selfHostedExpansionModal.open();

Просмотреть файл

@@ -16,9 +16,11 @@ import {makeGetCategory} from 'mattermost-redux/selectors/entities/preferences';
import {PreferenceType} from '@mattermost/types/preferences';
import {useExpandOverageUsersCheck} from 'components/common/hooks/useExpandOverageUsersCheck';
import useOpenSalesLink from 'components/common/hooks/useOpenSalesLink';
import {StatTypes, Preferences, AnnouncementBarTypes} from 'utils/constants';
import {StatTypes, Preferences, AnnouncementBarTypes, ConsolePages} from 'utils/constants';
import './overage_users_banner.scss';
import {getSiteURL} from 'utils/url';
import useCanSelfHostedExpand from 'components/common/hooks/useCanSelfHostedExpand';
type AdminHasDismissedItArgs = {
preferenceName: string;
@@ -53,10 +55,13 @@ const OverageUsersBanner = () => {
activeUsers,
seatsPurchased,
});
const canSelfHostedExpand = useCanSelfHostedExpand();
const siteURL = getSiteURL();
const prefixPreferences = isOver10PercerntPurchasedSeats ? 'error' : 'warn';
const prefixLicenseId = (license.Id || '').substring(0, 8);
const preferenceName = `${prefixPreferences}_overage_seats_${prefixLicenseId}`;
const overageByUsers = activeUsers - seatsPurchased;
const isOverageState = isBetween5PercerntAnd10PercentPurchasedSeats || isOver10PercerntPurchasedSeats;
@@ -86,6 +91,12 @@ const OverageUsersBanner = () => {
const handleUpdateSeatsSelfServeClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
e.preventDefault();
trackEventFn('Self Serve');
if (canSelfHostedExpand) {
window.open(`${siteURL}/${ConsolePages.LICENSE}?action=show_expansion_modal`);
return;
}
window.open(expandableLink(license.Id), '_blank');
};
@@ -101,7 +112,8 @@ const OverageUsersBanner = () => {
return null;
}
const message = (
let message = (
<FormattedMessage
id='licensingPage.overageUsersBanner.text'
defaultMessage='Your workspace user count has exceeded your paid license seat count by {seats, number} {seats, plural, one {seat} other {seats}}. Purchase additional seats to remain compliant.'

Просмотреть файл

@@ -7,7 +7,7 @@ import {fireEvent, screen} from '@testing-library/react';
import {DeepPartial} from '@mattermost/types/utilities';
import {GlobalState} from 'types/store';
import {General} from 'mattermost-redux/constants';
import {OverActiveUserLimits, Preferences, StatTypes} from 'utils/constants';
import {OverActiveUserLimits, Preferences, SelfHostedProducts, StatTypes} from 'utils/constants';
import {renderWithIntlAndStore} from 'tests/react_testing_utils';
import {savePreferences} from 'mattermost-redux/actions/preferences';
import {trackEvent} from 'actions/telemetry_actions';
@@ -107,6 +107,21 @@ describe('components/overage_users_banner', () => {
getRequestState: 'IDLE',
},
},
hostedCustomer: {
products: {
productsLoaded: true,
products: {
prod_professional: TestHelper.getProductMock({
id: 'prod_professional',
name: 'Professional',
sku: SelfHostedProducts.PROFESSIONAL,
price_per_seat: 7.5,
}),
},
},
},
},
};

Просмотреть файл

@@ -16,7 +16,6 @@ import {findSelfHostedProductBySku} from 'utils/hosted_customer';
import useGetSelfHostedProducts from './useGetSelfHostedProducts';
export default function useCanSelfHostedExpand() {
// NOTE: This is a basic implementation to get things up and running, more details to come later.
const [expansionAvailable, setExpansionAvailable] = useState(false);
const config = useSelector(getConfig);
const isEnterpriseReady = config.BuildEnterpriseReady === 'true';

Просмотреть файл

@@ -25,7 +25,6 @@ interface HookOptions{
export default function useControlSelfHostedExpansionModal(options: HookOptions): ControlModal {
const dispatch = useDispatch();
const currentUser = useSelector(getCurrentUser);
const canExpand = useCanSelfHostedExpand();
const controlModal = useControlModal({
modalId: ModalIdentifiers.SELF_HOSTED_EXPANSION,
dialogType: SelfHostedExpansionModal,
@@ -35,9 +34,6 @@ export default function useControlSelfHostedExpansionModal(options: HookOptions)
return {
...controlModal,
open: async () => {
if (!canExpand) {
return;
}
const purchaseInProgress = localStorage.getItem(STORAGE_KEY_EXPANSION_IN_PROGRESS) === 'true';

Просмотреть файл

@@ -17,6 +17,8 @@ import ResultView from './result_view';
import InviteView from './invite_view';
import NoPermissionsView from './no_permissions_view';
import InvitationModal, {Props, View, InvitationModal as BaseInvitationModal} from './invitation_modal';
import {SelfHostedProducts} from 'utils/constants';
import {TestHelper} from 'utils/test_helper';
const defaultProps: Props = deepFreeze({
actions: {
@@ -87,6 +89,19 @@ describe('InvitationModal', () => {
preferences: {
myPreferences: {},
},
hostedCustomer: {
products: {
productsLoaded: true,
products: {
prod_professional: TestHelper.getProductMock({
id: 'prod_professional',
name: 'Professional',
sku: SelfHostedProducts.PROFESSIONAL,
price_per_seat: 7.5,
}),
},
},
},
},
};

Просмотреть файл

@@ -11,9 +11,12 @@ import {mountWithThemedIntl} from 'tests/helpers/themed-intl-test-helper';
import deepFreeze from 'mattermost-redux/utils/deep_freeze';
import {Team} from '@mattermost/types/teams';
import {generateId} from 'utils/utils';
import {TestHelper as TH} from 'utils/test_helper';
import InviteAs, {InviteType} from './invite_as';
import InviteView, {Props} from './invite_view';
import {SelfHostedProducts} from 'utils/constants';
import {act} from 'react-dom/test-utils';
const defaultProps: Props = deepFreeze({
setInviteAs: jest.fn(),
@@ -99,6 +102,19 @@ describe('InviteView', () => {
preferences: {
myPreferences: {},
},
hostedCustomer: {
products: {
productsLoaded: true,
products: {
prod_professional: TH.getProductMock({
id: 'prod_professional',
name: 'Professional',
sku: SelfHostedProducts.PROFESSIONAL,
price_per_seat: 7.5,
}),
},
},
},
},
};
@@ -108,40 +124,46 @@ describe('InviteView', () => {
props = defaultProps;
});
it('shows InviteAs component when user can choose to invite guests or users', () => {
const wrapper = mountWithThemedIntl(
<Provider store={store}>
<InviteView {...props}/>
</Provider>,
);
expect(wrapper.find(InviteAs).length).toBe(1);
it('shows InviteAs component when user can choose to invite guests or users', async () => {
await act(async () => {
const wrapper = mountWithThemedIntl(
<Provider store={store}>
<InviteView {...props}/>
</Provider>,
);
expect(wrapper.find(InviteAs).length).toBe(1);
});
});
it('hides InviteAs component when user can not choose members option', () => {
it('hides InviteAs component when user can not choose members option', async () => {
props = {
...defaultProps,
canAddUsers: false,
};
const wrapper = mountWithThemedIntl(
<Provider store={store}>
<InviteView {...props}/>
</Provider>,
);
expect(wrapper.find(InviteAs).length).toBe(0);
await act(async () => {
const wrapper = mountWithThemedIntl(
<Provider store={store}>
<InviteView {...props}/>
</Provider>,
);
expect(wrapper.find(InviteAs).length).toBe(0);
});
});
it('hides InviteAs component when user can not choose guests option', () => {
it('hides InviteAs component when user can not choose guests option', async () => {
props = {
...defaultProps,
canInviteGuests: false,
};
const wrapper = mountWithThemedIntl(
<Provider store={store}>
<InviteView {...props}/>
</Provider>,
);
expect(wrapper.find(InviteAs).length).toBe(0);
await act(async () => {
const wrapper = mountWithThemedIntl(
<Provider store={store}>
<InviteView {...props}/>
</Provider>,
);
expect(wrapper.find(InviteAs).length).toBe(0);
});
});
});

Просмотреть файл

@@ -4,6 +4,7 @@
import React from 'react';
import {FormattedMessage} from 'react-intl';
import {useDispatch, useSelector} from 'react-redux';
import {useHistory} from 'react-router-dom'
import {getCurrentUser, isCurrentUserSystemAdmin} from 'mattermost-redux/selectors/entities/users';
import {GlobalState} from 'types/store';
@@ -16,10 +17,12 @@ import {savePreferences} from 'mattermost-redux/actions/preferences';
import {makeGetCategory} from 'mattermost-redux/selectors/entities/preferences';
import {PreferenceType} from '@mattermost/types/preferences';
import {useExpandOverageUsersCheck} from 'components/common/hooks/useExpandOverageUsersCheck';
import {LicenseLinks, StatTypes, Preferences} from 'utils/constants';
import {LicenseLinks, StatTypes, Preferences, ConsolePages} from 'utils/constants';
import './overage_users_banner_notice.scss';
import ExternalLink from 'components/external_link';
import useCanSelfHostedExpand from 'components/common/hooks/useCanSelfHostedExpand';
import {getSiteURL} from 'utils/url';
type AdminHasDismissedArgs = {
preferenceName: string;
@@ -42,6 +45,9 @@ const OverageUsersBannerNotice = () => {
const currentUser = useSelector((state: GlobalState) => getCurrentUser(state));
const overagePreferences = useSelector((state: GlobalState) => getPreferencesCategory(state, Preferences.OVERAGE_USERS_BANNER));
const activeUsers = ((stats || {})[StatTypes.TOTAL_USERS]) as number || 0;
const canSelfHostedExpand = useCanSelfHostedExpand();
const siteURL = getSiteURL();
const {
isBetween5PercerntAnd10PercentPurchasedSeats,
isOver10PercerntPurchasedSeats,
@@ -83,7 +89,30 @@ const OverageUsersBannerNotice = () => {
};
let message;
if (!isGovSku) {
if (canSelfHostedExpand) {
message = (
<FormattedMessage
id='licensingPage.overageUsersBanner.selfHostedNoticeDescription'
defaultMessage={'<a>Purchase additional seats </a> to remain compliant.'}
values={{
a: (chunks: React.ReactNode) => {
return (
<ExternalLink
className='overage_users_banner__button'
href={`${siteURL}/${ConsolePages.LICENSE}?action=show_expansion_modal`}
rel='noopener noreferrer'
target="_blank"
>
{chunks}
</ExternalLink>
)
}
}}
/>
)
} else if (!isGovSku) {
message = (
<FormattedMessage
id='licensingPage.overageUsersBanner.noticeDescription'

Просмотреть файл

@@ -2,12 +2,12 @@
// See LICENSE.txt for license information.
import React from 'react';
import {fireEvent, screen} from '@testing-library/react';
import {act, fireEvent, screen} from '@testing-library/react';
import {DeepPartial} from '@mattermost/types/utilities';
import {GlobalState} from 'types/store';
import {General} from 'mattermost-redux/constants';
import {LicenseLinks, OverActiveUserLimits, Preferences, StatTypes} from 'utils/constants';
import {LicenseLinks, OverActiveUserLimits, Preferences, SelfHostedProducts, StatTypes} from 'utils/constants';
import {renderWithIntlAndStore} from 'tests/react_testing_utils';
import {savePreferences} from 'mattermost-redux/actions/preferences';
import {trackEvent} from 'actions/telemetry_actions';
@@ -93,6 +93,19 @@ describe('components/invitation_modal/overage_users_banner_notice', () => {
getRequestState: 'IDLE',
},
},
hostedCustomer: {
products: {
productsLoaded: true,
products: {
prod_professional: TestHelper.getProductMock({
id: 'prod_professional',
name: 'Professional',
sku: SelfHostedProducts.PROFESSIONAL,
price_per_seat: 7.5,
}),
},
},
},
},
};
@@ -483,7 +496,7 @@ describe('components/invitation_modal/overage_users_banner_notice', () => {
});
});
it('gov sku sees overage notice but not a call to do true up', () => {
it('gov sku sees overage notice but not a call to do true up', async () => {
const store: GlobalState = JSON.parse(JSON.stringify(initialState));
store.entities.admin = {
@@ -502,8 +515,10 @@ describe('components/invitation_modal/overage_users_banner_notice', () => {
};
store.entities.general.license.IsGovSku = 'true';
renderComponent({
store,
await act( async () => {
renderComponent({
store,
});
});
screen.getByText(text10PercentageState);

Просмотреть файл

@@ -509,7 +509,7 @@ export default function SelfHostedExpansionModal() {
<SuccessPage
onClose={() => {
setFormState({...formState, submitting: false, error: '', succeeded: false});
closeModal(ModalIdentifiers.SELF_HOSTED_EXPANSION);
dispatch(closeModal(ModalIdentifiers.SELF_HOSTED_EXPANSION));
}}
/>
)}