fix tests for expansion modal, lint.

webapp/channels/src/components/common/hooks/useControlSelfHostedExpansionModal.ts

@@ -19,7 +19,6 @@ import {useControlModal, ControlModal} from './useControlModal';
 import useCanSelfHostedExpand from './useCanSelfHostedExpand';
 
 interface HookOptions{
-    onClick?: () => void;
     trackingLocation?: string;
 }
 

webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/index.test.tsx

@@ -98,13 +98,10 @@ jest.mock('mattermost-redux/client', () => {
                     progress: mockCreatedIntent,
                 });
             },
-            confirmSelfHostedSignup: () => Promise.resolve({
+            confirmSelfHostedExpansion: () => Promise.resolve({
                 progress: mockCreatedLicense,
                 license: {Users: existingUsers * 2},
             }),
-            getClientLicenseOld: () => Promise.resolve({
-                data: {Sku: 'Enterprise'},
-            }),
         },
     };
 });
@@ -163,6 +160,7 @@ const initialState: DeepPartial<GlobalState> = {
                 EnableDeveloper: 'false',
             },
             license: {
+                SkuName: productName,
                 Sku: productName,
                 SkuName: productName,
                 Users: '50',
@@ -240,7 +238,7 @@ const defaultSuccessForm: PurchaseForm = {
     city: 'Minneapolis',
     state: 'MN',
     zip: '55423',
-    seats: '10',
+    seats: '50',
     agree: true,
 };
 
@@ -257,11 +255,6 @@ function fillForm(form: PurchaseForm) {
         fireEvent.click(screen.getByText('I have read and agree', {exact: false}));
     }
 
-    // not changing the license seats number, because it is expected to be pre-filled,
-    // with the correct number of seats (current active users - current licensed seats, or 1 if the difference is 0).
-
-    expect(document.getElementsByClassName('SelfHostedExpansionRHSCard__AddSeatsWarning')[0] as HTMLElement).toBeEnabled();
-
     const completeButton = screen.getByText('Complete purchase');
 
     if (form === defaultSuccessForm) {
@@ -307,14 +300,24 @@ describe('SelfHostedExpansionModal Open', () => {
         expect(screen.getByText('You must add a seat to continue')).toBeVisible();
     });
 
-    it('happy path submit shows success screen', async () => {
+    it('happy path submit shows success screen when confirmation succeeds', async () => {
         renderWithIntlAndStore(<div id='root-portal'><SelfHostedExpansionModal/></div>, initialState);
         expect(screen.getByText('Complete purchase')).toBeDisabled();
-        const upgradeButton = fillForm(defaultSuccessForm);
 
-        expect(upgradeButton).toBeEnabled();
+        const upgradeButton = fillForm(defaultSuccessForm);
         upgradeButton.click();
-        await waitFor(() => expect(screen.getByText('You\'ve successfully updated your license seat count')).toBeTruthy(), {timeout: 1234});
+
+        expect(screen.findByText('The license has been automatically applied')).toBeTruthy();
+    });
+
+    it('happy path submit shows submitting screen while requesting confirmation', async () => {
+        renderWithIntlAndStore(<div id='root-portal'><SelfHostedExpansionModal/></div>, initialState);
+        expect(screen.getByText('Complete purchase')).toBeDisabled();
+
+        const upgradeButton = fillForm(defaultSuccessForm);
+        upgradeButton.click();
+
+        await waitFor(() => expect(document.getElementsByClassName('submitting')[0]).toBeTruthy(), {timeout: 1234});
     });
 
     it('sad path submit shows error screen', async () => {

webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/index.tsx

@@ -50,7 +50,6 @@ import {STORAGE_KEY_EXPANSION_IN_PROGRESS} from '../constants';
 import Address from 'components/self_hosted_purchases/address';
 import ChooseDifferentShipping from 'components/choose_different_shipping';
 import Terms from 'components/self_hosted_purchases/self_hosted_purchase_modal/terms';
-import useControlSelfHostedExpansionModal from 'components/common/hooks/useControlSelfHostedExpansionModal';
 import classNames from 'classnames';
 
 export interface FormState {
@@ -168,7 +167,6 @@ export function canSubmit(formState: FormState, progress: ValueOf<typeof SelfHos
 }
 
 export default function SelfHostedExpansionModal() {
-    const selfHostedExpansionModal = useControlSelfHostedExpansionModal({});
     const dispatch = useDispatch<DispatchFunc>();
     const intl = useIntl();
     const cardRef = useRef<CardInputType | null>(null);
@@ -457,7 +455,7 @@ export default function SelfHostedExpansionModal() {
                                                 />
                                             </div>
                                             <Address
-                                                testPrefix='selfHostedExpansion'
+                                                testPrefix='shippingSelfHostedExpansion'
                                                 type='shipping'
                                                 country={formState.shippingCountry}
                                                 changeCountry={(option) => {
@@ -509,7 +507,10 @@ export default function SelfHostedExpansionModal() {
                         </div>
                         {((formState.succeeded || progress === SelfHostedSignupProgress.CREATED_LICENSE)) && !formState.error && !formState.submitting && (
                             <SuccessPage
-                                onClose={selfHostedExpansionModal.close}
+                                onClose={() => {
+                                    setFormState({...formState, submitting: false, error: '', succeeded: false});
+                                    closeModal(ModalIdentifiers.SELF_HOSTED_EXPANSION);
+                                }}
                             />
                         )}
                         {formState.submitting && (

webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/success_page.tsx

@@ -4,15 +4,12 @@
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import {NavLink} from 'react-router-dom';
-
-import {useDispatch} from 'react-redux';
+import {useHistory} from 'react-router-dom';
 
 import IconMessage from 'components/purchase_modal/icon_message';
 import PaymentSuccessStandardSvg from 'components/common/svg_images_components/payment_success_standard_svg';
-import {ConsolePages, ModalIdentifiers} from 'utils/constants';
+import {ConsolePages} from 'utils/constants';
 import BackgroundSvg from 'components/common/svg_images_components/background_svg';
-import {closeModal} from 'actions/views/modals';
 
 import './success_page.scss';
 
@@ -21,7 +18,7 @@ interface Props {
 }
 
 export default function SelfHostedExpansionSuccessPage(props: Props) {
-    const dispatch = useDispatch();
+    const history = useHistory();
     const titleText = (
         <FormattedMessage
             id={'self_hosted_expansion.expand_success'}
@@ -35,13 +32,15 @@ export default function SelfHostedExpansionSuccessPage(props: Props) {
             defaultMessage={'The license has been automatically applied to your Mattermost instance. Your updated invoice will be visible in the <billing>Billing section</billing> of the system console.'}
             values={{
                 billing: (billingText: React.ReactNode) => (
-                    <NavLink
-                        to={ConsolePages.BILLING_HISTORY}
-                        target='_blank'
-                        rel='noreferrer'
+                    <a
+                        href='#'
+                        onClick={() => {
+                            history.push(ConsolePages.BILLING_HISTORY);
+                            props.onClose();
+                        }}
                     >
                         {billingText}
-                    </NavLink>
+                    </a>
                 ),
             }}
         />
@@ -72,7 +71,6 @@ export default function SelfHostedExpansionSuccessPage(props: Props) {
                 formattedButtonText={formattedButtonText}
                 buttonHandler={() => {
                     props.onClose();
-                    dispatch(closeModal(ModalIdentifiers.SUCCESS_MODAL));
                 }}
             />
             <div className='background-svg'>

webapp/channels/src/utils/constants.tsx

@@ -2007,7 +2007,7 @@ export const ConsolePages = {
     WEB_SERVER: '/admin_console/environment/web_server',
     PUSH_NOTIFICATION_CENTER: '/admin_console/environment/push_notification_server',
     SMTP: '/admin_console/environment/smtp',
-    BILLING_HISTORY: 'admin_console/billing/billing_history',
+    BILLING_HISTORY: '/admin_console/billing/billing_history',
 };
 
 export const WindowSizes = {