Consolidate IT's that are based on modals

server/sonar-web/src/main/js/apps/coding-rules/components/CustomRuleFormModal.tsx

@@ -309,33 +309,17 @@ export default class CustomRuleFormModal extends React.PureComponent<Props, Stat
     </div>
   );
 
-  renderSubmitButton = () => {
-    if (this.state.reactivating) {
-      return (
-        <SubmitButton
-          disabled={this.state.submitting}
-          id="coding-rules-custom-rule-creation-reactivate">
-          {translate('coding_rules.reactivate')}
-        </SubmitButton>
-      );
-    } else {
-      return (
-        <SubmitButton
-          disabled={this.state.submitting}
-          id="coding-rules-custom-rule-creation-create">
-          {translate(this.props.customRule ? 'save' : 'create')}
-        </SubmitButton>
-      );
-    }
-  };
-
   render() {
     const { customRule, templateRule } = this.props;
     const { reactivating, submitting } = this.state;
     const { params = [] } = templateRule;
-    const header = translate(
-      customRule ? 'coding_rules.update_custom_rule' : 'coding_rules.create_custom_rule'
-    );
+    const header = customRule
+      ? translate('coding_rules.update_custom_rule')
+      : translate('coding_rules.create_custom_rule');
+    let submit = this.props.customRule ? translate('save') : translate('create');
+    if (this.state.reactivating) {
+      submit = translate('coding_rules.reactivate');
+    }
     return (
       <Modal contentLabel={header} onRequestClose={this.props.onClose}>
         <form onSubmit={this.handleFormSubmit}>
@@ -362,7 +346,7 @@ export default class CustomRuleFormModal extends React.PureComponent<Props, Stat
 
           <div className="modal-foot">
             {submitting && <i className="spinner spacer-right" />}
-            {this.renderSubmitButton()}
+            <SubmitButton disabled={this.state.submitting}>{submit}</SubmitButton>
             <ResetButtonLink
               disabled={submitting}
               id="coding-rules-custom-rule-creation-cancel"

server/sonar-web/src/main/js/apps/coding-rules/components/RemoveExtendedDescriptionModal.tsx

@@ -43,10 +43,7 @@ export default function RemoveExtendedDescriptionModal({ onCancel, onSubmit }: P
 
           <footer className="modal-foot">
             {submitting && <i className="spinner spacer-right" />}
-            <SubmitButton
-              className="button-red"
-              disabled={submitting}
-              id="coding-rules-detail-extend-description-remove-submit">
+            <SubmitButton className="button-red" disabled={submitting}>
               {translate('remove')}
             </SubmitButton>
             <ResetButtonLink onClick={onCloseClick}>{translate('cancel')}</ResetButtonLink>

server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/CustomRuleFormModal-test.tsx

@@ -20,12 +20,24 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
 import CustomRuleFormModal from '../CustomRuleFormModal';
+import { createRule } from '../../../../api/rules';
 import { mockRule } from '../../../../helpers/testMocks';
+import { submit, waitAndUpdate } from '../../../../helpers/testUtils';
+
+jest.mock('../../../../api/rules', () => ({ createRule: jest.fn() }));
 
 it('should render correctly', () => {
   expect(shallowRender()).toMatchSnapshot();
 });
 
+it('should handle re-activation', async () => {
+  (createRule as jest.Mock).mockRejectedValue({ status: 409 });
+  const wrapper = shallowRender();
+  submit(wrapper.find('form'));
+  await waitAndUpdate(wrapper);
+  expect(wrapper).toMatchSnapshot();
+});
+
 function shallowRender(props: Partial<CustomRuleFormModal['props']> = {}) {
   return shallow(
     <CustomRuleFormModal

server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/CustomRuleFormModal-test.tsx.snap

@@ -1,5 +1,245 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`should handle re-activation 1`] = `
+<Modal
+  contentLabel="coding_rules.create_custom_rule"
+  onRequestClose={[MockFunction]}
+>
+  <form
+    onSubmit={[Function]}
+  >
+    <div
+      className="modal-head"
+    >
+      <h2>
+        coding_rules.create_custom_rule
+      </h2>
+    </div>
+    <div
+      className="modal-body modal-container"
+    >
+      <Alert
+        variant="warning"
+      >
+        coding_rules.reactivate.help
+      </Alert>
+      <div
+        className="modal-field"
+      >
+        <label
+          htmlFor="coding-rules-custom-rule-creation-name"
+        >
+          name
+           
+          <em
+            className="mandatory"
+          >
+            *
+          </em>
+        </label>
+        <input
+          autoFocus={true}
+          disabled={false}
+          id="coding-rules-custom-rule-creation-name"
+          onChange={[Function]}
+          required={true}
+          type="text"
+          value=""
+        />
+      </div>
+      <div
+        className="modal-field"
+      >
+        <label
+          htmlFor="coding-rules-custom-rule-creation-key"
+        >
+          key
+           
+          <em
+            className="mandatory"
+          >
+            *
+          </em>
+        </label>
+        <input
+          disabled={false}
+          id="coding-rules-custom-rule-creation-key"
+          onChange={[Function]}
+          required={true}
+          type="text"
+          value=""
+        />
+      </div>
+      <div
+        className="display-flex-space-between"
+      >
+        <div
+          className="modal-field flex-1 spacer-right"
+        >
+          <label
+            htmlFor="coding-rules-custom-rule-type"
+          >
+            type
+          </label>
+          <Select
+            clearable={false}
+            disabled={false}
+            id="coding-rules-custom-rule-type"
+            onChange={[Function]}
+            optionRenderer={[Function]}
+            options={
+              Array [
+                Object {
+                  "label": "issue.type.BUG",
+                  "value": "BUG",
+                },
+                Object {
+                  "label": "issue.type.VULNERABILITY",
+                  "value": "VULNERABILITY",
+                },
+                Object {
+                  "label": "issue.type.CODE_SMELL",
+                  "value": "CODE_SMELL",
+                },
+                Object {
+                  "label": "issue.type.SECURITY_HOTSPOT",
+                  "value": "SECURITY_HOTSPOT",
+                },
+                Object {
+                  "label": "issue.type.UNKNOWN",
+                  "value": "UNKNOWN",
+                },
+              ]
+            }
+            searchable={false}
+            value="CODE_SMELL"
+            valueRenderer={[Function]}
+          />
+        </div>
+        <div
+          className="modal-field flex-1 spacer-right"
+        >
+          <label
+            htmlFor="coding-rules-custom-rule-severity"
+          >
+            severity
+          </label>
+          <Select
+            clearable={false}
+            disabled={false}
+            id="coding-rules-custom-rule-severity"
+            onChange={[Function]}
+            optionRenderer={[Function]}
+            options={
+              Array [
+                Object {
+                  "label": "severity.BLOCKER",
+                  "value": "BLOCKER",
+                },
+                Object {
+                  "label": "severity.CRITICAL",
+                  "value": "CRITICAL",
+                },
+                Object {
+                  "label": "severity.MAJOR",
+                  "value": "MAJOR",
+                },
+                Object {
+                  "label": "severity.MINOR",
+                  "value": "MINOR",
+                },
+                Object {
+                  "label": "severity.INFO",
+                  "value": "INFO",
+                },
+              ]
+            }
+            searchable={false}
+            value="MAJOR"
+            valueRenderer={[Function]}
+          />
+        </div>
+        <div
+          className="modal-field flex-1"
+        >
+          <label
+            htmlFor="coding-rules-custom-rule-status"
+          >
+            coding_rules.filters.status
+          </label>
+          <Select
+            clearable={false}
+            disabled={false}
+            id="coding-rules-custom-rule-status"
+            onChange={[Function]}
+            options={
+              Array [
+                Object {
+                  "label": "rules.status.READY",
+                  "value": "READY",
+                },
+                Object {
+                  "label": "rules.status.BETA",
+                  "value": "BETA",
+                },
+                Object {
+                  "label": "rules.status.DEPRECATED",
+                  "value": "DEPRECATED",
+                },
+              ]
+            }
+            searchable={false}
+            value="READY"
+          />
+        </div>
+      </div>
+      <div
+        className="modal-field"
+      >
+        <label
+          htmlFor="coding-rules-custom-rule-creation-html-description"
+        >
+          description
+           
+          <em
+            className="mandatory"
+          >
+            *
+          </em>
+        </label>
+        <textarea
+          disabled={false}
+          id="coding-rules-custom-rule-creation-html-description"
+          onChange={[Function]}
+          required={true}
+          rows={5}
+          value=""
+        />
+        <MarkdownTips
+          className="modal-field-descriptor text-right"
+        />
+      </div>
+    </div>
+    <div
+      className="modal-foot"
+    >
+      <SubmitButton
+        disabled={false}
+      >
+        coding_rules.reactivate
+      </SubmitButton>
+      <ResetButtonLink
+        disabled={false}
+        id="coding-rules-custom-rule-creation-cancel"
+        onClick={[MockFunction]}
+      >
+        cancel
+      </ResetButtonLink>
+    </div>
+  </form>
+</Modal>
+`;
+
 exports[`should render correctly 1`] = `
 <Modal
   contentLabel="coding_rules.create_custom_rule"
@@ -220,7 +460,6 @@ exports[`should render correctly 1`] = `
     >
       <SubmitButton
         disabled={false}
-        id="coding-rules-custom-rule-creation-create"
       >
         create
       </SubmitButton>

server/sonar-web/src/main/js/apps/projectsManagement/BulkApplyTemplateModal.tsx

@@ -22,7 +22,7 @@ import { getPermissionTemplates, bulkApplyTemplate } from '../../api/permissions
 import { translate, translateWithParameters } from '../../helpers/l10n';
 import Modal from '../../components/controls/Modal';
 import Select from '../../components/controls/Select';
-import { Button, ResetButtonLink } from '../../components/ui/buttons';
+import { ResetButtonLink, SubmitButton } from '../../components/ui/buttons';
 import { toNotSoISOString } from '../../helpers/dates';
 import { Alert } from '../../components/ui/Alert';
 
@@ -171,11 +171,11 @@ export default class BulkApplyTemplateModal extends React.PureComponent<Props, S
         <footer className="modal-foot">
           {submitting && <i className="spinner spacer-right" />}
           {!loading && !done && permissionTemplates && (
-            <Button disabled={submitting} onClick={this.handleConfirmClick}>
+            <SubmitButton disabled={submitting} onClick={this.handleConfirmClick}>
               {translate('apply')}
-            </Button>
+            </SubmitButton>
           )}
-          <ResetButtonLink className="js-modal-close" onClick={this.props.onClose}>
+          <ResetButtonLink onClick={this.props.onClose}>
             {done ? translate('close') : translate('cancel')}
           </ResetButtonLink>
         </footer>

server/sonar-web/src/main/js/apps/projectsManagement/DeleteModal.tsx

@@ -20,7 +20,7 @@
 import * as React from 'react';
 import { bulkDeleteProjects } from '../../api/components';
 import Modal from '../../components/controls/Modal';
-import { Button, ResetButtonLink } from '../../components/ui/buttons';
+import { ResetButtonLink, SubmitButton } from '../../components/ui/buttons';
 import { translate, translateWithParameters } from '../../helpers/l10n';
 import { toNotSoISOString } from '../../helpers/dates';
 import { Alert } from '../../components/ui/Alert';
@@ -109,15 +109,13 @@ export default class DeleteModal extends React.PureComponent<Props, State> {
 
         <footer className="modal-foot">
           {this.state.loading && <i className="spinner spacer-right" />}
-          <Button
+          <SubmitButton
             className="button-red"
             disabled={this.state.loading}
             onClick={this.handleConfirmClick}>
             {translate('delete')}
-          </Button>
-          <ResetButtonLink className="js-modal-close" onClick={this.props.onClose}>
-            {translate('cancel')}
-          </ResetButtonLink>
+          </SubmitButton>
+          <ResetButtonLink onClick={this.props.onClose}>{translate('cancel')}</ResetButtonLink>
         </footer>
       </Modal>
     );

server/sonar-web/src/main/js/apps/projectsManagement/__tests__/BulkApplyTemplateModal-test.tsx

@@ -55,7 +55,7 @@ it('bulk applies template to all results', async () => {
   });
   expect(wrapper).toMatchSnapshot();
 
-  click(wrapper.find('Button'));
+  click(wrapper.find('SubmitButton'));
   expect(bulkApplyTemplate).toBeCalledWith({
     analyzedBefore: '2017-04-08T00:00:00+0000',
     onProvisionedOnly: true,
@@ -82,7 +82,7 @@ it('bulk applies template to selected results', async () => {
   });
   expect(wrapper).toMatchSnapshot();
 
-  click(wrapper.find('Button'));
+  click(wrapper.find('SubmitButton'));
   expect(wrapper).toMatchSnapshot();
   await new Promise(setImmediate);
   expect(bulkApplyTemplate).toBeCalledWith({
@@ -98,7 +98,7 @@ it('bulk applies template to selected results', async () => {
 it('closes', () => {
   const onClose = jest.fn();
   const wrapper = shallow(render({ onClose }));
-  click(wrapper.find('.js-modal-close'));
+  click(wrapper.find('ResetButtonLink'));
   expect(onClose).toBeCalled();
 });
 

server/sonar-web/src/main/js/apps/projectsManagement/__tests__/DeleteModal-test.tsx

@@ -40,7 +40,7 @@ it('deletes all projects', async () => {
   (wrapper.instance() as DeleteModal).mounted = true;
   expect(wrapper).toMatchSnapshot();
 
-  click(wrapper.find('Button'));
+  click(wrapper.find('SubmitButton'));
   expect(wrapper).toMatchSnapshot();
   expect(bulkDeleteProjects).toBeCalledWith({
     analyzedBefore: '2017-04-08T00:00:00+0000',
@@ -60,7 +60,7 @@ it('deletes selected projects', async () => {
   (wrapper.instance() as DeleteModal).mounted = true;
   expect(wrapper).toMatchSnapshot();
 
-  click(wrapper.find('Button'));
+  click(wrapper.find('SubmitButton'));
   expect(wrapper).toMatchSnapshot();
   expect(bulkDeleteProjects).toBeCalledWith({ organization: 'org', projects: 'proj1,proj2' });
 
@@ -71,7 +71,7 @@ it('deletes selected projects', async () => {
 it('closes', () => {
   const onClose = jest.fn();
   const wrapper = shallowRender({ onClose });
-  click(wrapper.find('.js-modal-close'));
+  click(wrapper.find('ResetButtonLink'));
   expect(onClose).toBeCalled();
 });
 

server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/BulkApplyTemplateModal-test.tsx.snap

@@ -24,7 +24,6 @@ exports[`bulk applies template to all results 1`] = `
     className="modal-foot"
   >
     <ResetButtonLink
-      className="js-modal-close"
       onClick={[MockFunction]}
     >
       cancel
@@ -88,14 +87,13 @@ exports[`bulk applies template to all results 2`] = `
   <footer
     className="modal-foot"
   >
-    <Button
+    <SubmitButton
       disabled={false}
       onClick={[Function]}
     >
       apply
-    </Button>
+    </SubmitButton>
     <ResetButtonLink
-      className="js-modal-close"
       onClick={[MockFunction]}
     >
       cancel
@@ -162,14 +160,13 @@ exports[`bulk applies template to all results 3`] = `
     <i
       className="spinner spacer-right"
     />
-    <Button
+    <SubmitButton
       disabled={true}
       onClick={[Function]}
     >
       apply
-    </Button>
+    </SubmitButton>
     <ResetButtonLink
-      className="js-modal-close"
       onClick={[MockFunction]}
     >
       cancel
@@ -204,7 +201,6 @@ exports[`bulk applies template to all results 4`] = `
     className="modal-foot"
   >
     <ResetButtonLink
-      className="js-modal-close"
       onClick={[MockFunction]}
     >
       close
@@ -237,7 +233,6 @@ exports[`bulk applies template to selected results 1`] = `
     className="modal-foot"
   >
     <ResetButtonLink
-      className="js-modal-close"
       onClick={[MockFunction]}
     >
       cancel
@@ -301,14 +296,13 @@ exports[`bulk applies template to selected results 2`] = `
   <footer
     className="modal-foot"
   >
-    <Button
+    <SubmitButton
       disabled={false}
       onClick={[Function]}
     >
       apply
-    </Button>
+    </SubmitButton>
     <ResetButtonLink
-      className="js-modal-close"
       onClick={[MockFunction]}
     >
       cancel
@@ -375,14 +369,13 @@ exports[`bulk applies template to selected results 3`] = `
     <i
       className="spinner spacer-right"
     />
-    <Button
+    <SubmitButton
       disabled={true}
       onClick={[Function]}
     >
       apply
-    </Button>
+    </SubmitButton>
     <ResetButtonLink
-      className="js-modal-close"
       onClick={[MockFunction]}
     >
       cancel
@@ -417,7 +410,6 @@ exports[`bulk applies template to selected results 4`] = `
     className="modal-foot"
   >
     <ResetButtonLink
-      className="js-modal-close"
       onClick={[MockFunction]}
     >
       close

server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/DeleteModal-test.tsx.snap

@@ -25,15 +25,14 @@ exports[`deletes all projects 1`] = `
   <footer
     className="modal-foot"
   >
-    <Button
+    <SubmitButton
       className="button-red"
       disabled={false}
       onClick={[Function]}
     >
       delete
-    </Button>
+    </SubmitButton>
     <ResetButtonLink
-      className="js-modal-close"
       onClick={[MockFunction]}
     >
       cancel
@@ -70,15 +69,14 @@ exports[`deletes all projects 2`] = `
     <i
       className="spinner spacer-right"
     />
-    <Button
+    <SubmitButton
       className="button-red"
       disabled={true}
       onClick={[Function]}
     >
       delete
-    </Button>
+    </SubmitButton>
     <ResetButtonLink
-      className="js-modal-close"
       onClick={[MockFunction]}
     >
       cancel
@@ -112,15 +110,14 @@ exports[`deletes selected projects 1`] = `
   <footer
     className="modal-foot"
   >
-    <Button
+    <SubmitButton
       className="button-red"
       disabled={false}
       onClick={[Function]}
     >
       delete
-    </Button>
+    </SubmitButton>
     <ResetButtonLink
-      className="js-modal-close"
       onClick={[MockFunction]}
     >
       cancel
@@ -157,15 +154,14 @@ exports[`deletes selected projects 2`] = `
     <i
       className="spinner spacer-right"
     />
-    <Button
+    <SubmitButton
       className="button-red"
       disabled={true}
       onClick={[Function]}
     >
       delete
-    </Button>
+    </SubmitButton>
     <ResetButtonLink
-      className="js-modal-close"
       onClick={[MockFunction]}
     >
       cancel

server/sonar-web/src/main/js/apps/users/components/PasswordForm.tsx

@@ -29,8 +29,8 @@ import { Alert } from '../../../components/ui/Alert';
 
 interface Props {
   isCurrentUser: boolean;
-  user: T.User;
   onClose: () => void;
+  user: T.User;
 }
 
 interface State {
@@ -164,14 +164,10 @@ export default class PasswordForm extends React.PureComponent<Props, State> {
           </div>
           <footer className="modal-foot">
             {submitting && <i className="spinner spacer-right" />}
-            <SubmitButton
-              className="js-confirm"
-              disabled={submitting || !newPassword || newPassword !== confirmPassword}>
+            <SubmitButton disabled={submitting || !newPassword || newPassword !== confirmPassword}>
               {translate('change_verb')}
             </SubmitButton>
-            <ResetButtonLink className="js-modal-close" onClick={this.props.onClose}>
-              {translate('cancel')}
-            </ResetButtonLink>
+            <ResetButtonLink onClick={this.props.onClose}>{translate('cancel')}</ResetButtonLink>
           </footer>
         </form>
       </Modal>

server/sonar-web/src/main/js/apps/users/components/TokensFormModal.tsx

@@ -21,6 +21,7 @@ import * as React from 'react';
 import TokensForm from './TokensForm';
 import Modal from '../../../components/controls/Modal';
 import { translate } from '../../../helpers/l10n';
+import { ResetButtonLink } from '../../../components/ui/buttons';
 
 interface Props {
   user: T.User;
@@ -28,31 +29,19 @@ interface Props {
   updateTokensCount: (login: string, tokensCount: number) => void;
 }
 
-export default class TokensFormModal extends React.PureComponent<Props> {
-  handleCloseClick = (evt: React.SyntheticEvent<HTMLAnchorElement>) => {
-    evt.preventDefault();
-    this.props.onClose();
-  };
-
-  render() {
-    const header = translate('users.tokens');
-    return (
-      <Modal contentLabel={header} onRequestClose={this.props.onClose}>
-        <header className="modal-head">
-          <h2>{header}</h2>
-        </header>
-        <div className="modal-body modal-container">
-          <TokensForm
-            login={this.props.user.login}
-            updateTokensCount={this.props.updateTokensCount}
-          />
-        </div>
-        <footer className="modal-foot">
-          <a className="js-modal-close" href="#" onClick={this.handleCloseClick}>
-            {translate('Done')}
-          </a>
-        </footer>
-      </Modal>
-    );
-  }
+export default function TokensFormModal(props: Props) {
+  const header = translate('users.tokens');
+  return (
+    <Modal contentLabel={header} onRequestClose={props.onClose}>
+      <header className="modal-head">
+        <h2>{header}</h2>
+      </header>
+      <div className="modal-body modal-container">
+        <TokensForm login={props.user.login} updateTokensCount={props.updateTokensCount} />
+      </div>
+      <footer className="modal-foot">
+        <ResetButtonLink onClick={props.onClose}>{translate('Done')}</ResetButtonLink>
+      </footer>
+    </Modal>
+  );
 }

server/sonar-web/src/main/js/apps/users/components/UserForm.tsx

@@ -259,12 +259,10 @@ export default class UserForm extends React.PureComponent<Props, State> {
 
           <footer className="modal-foot">
             {submitting && <i className="spinner spacer-right" />}
-            <SubmitButton className="js-confirm" disabled={submitting}>
+            <SubmitButton disabled={submitting}>
               {user ? translate('update_verb') : translate('create')}
             </SubmitButton>
-            <ResetButtonLink className="js-modal-close" onClick={this.props.onClose}>
-              {translate('cancel')}
-            </ResetButtonLink>
+            <ResetButtonLink onClick={this.props.onClose}>{translate('cancel')}</ResetButtonLink>
           </footer>
         </form>
       </Modal>

server/sonar-web/src/main/js/apps/users/components/__tests__/PasswordForm-test.tsx

@@ -0,0 +1,33 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import PasswordForm from '../PasswordForm';
+import { mockUser } from '../../../../helpers/testMocks';
+
+it('should render correctly', () => {
+  expect(shallowRender()).toMatchSnapshot();
+});
+
+function shallowRender(props: Partial<PasswordForm['props']> = {}) {
+  return shallow(
+    <PasswordForm isCurrentUser={true} onClose={jest.fn()} user={mockUser()} {...props} />
+  );
+}

server/sonar-web/src/main/js/apps/users/components/__tests__/TokensFormModal-test.tsx

@@ -0,0 +1,29 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import TokensFormModal from '../TokensFormModal';
+import { mockUser } from '../../../../helpers/testMocks';
+
+it('should render correctly', () => {
+  expect(
+    shallow(<TokensFormModal onClose={jest.fn()} updateTokensCount={jest.fn()} user={mockUser()} />)
+  ).toMatchSnapshot();
+});

server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/PasswordForm-test.tsx.snap

@@ -0,0 +1,125 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<Modal
+  contentLabel="my_profile.password.title"
+  onRequestClose={[MockFunction]}
+  size="small"
+>
+  <form
+    autoComplete="off"
+    id="user-password-form"
+    onSubmit={[Function]}
+  >
+    <header
+      className="modal-head"
+    >
+      <h2>
+        my_profile.password.title
+      </h2>
+    </header>
+    <div
+      className="modal-body"
+    >
+      <div
+        className="modal-field"
+      >
+        <label
+          htmlFor="old-user-password"
+        >
+          my_profile.password.old
+          <em
+            className="mandatory"
+          >
+            *
+          </em>
+        </label>
+        <input
+          className="hidden"
+          name="old-password-fake"
+          type="password"
+        />
+        <input
+          id="old-user-password"
+          maxLength={50}
+          name="old-password"
+          onChange={[Function]}
+          required={true}
+          type="password"
+          value=""
+        />
+      </div>
+      <div
+        className="modal-field"
+      >
+        <label
+          htmlFor="user-password"
+        >
+          my_profile.password.new
+          <em
+            className="mandatory"
+          >
+            *
+          </em>
+        </label>
+        <input
+          className="hidden"
+          name="password-fake"
+          type="password"
+        />
+        <input
+          id="user-password"
+          maxLength={50}
+          name="password"
+          onChange={[Function]}
+          required={true}
+          type="password"
+          value=""
+        />
+      </div>
+      <div
+        className="modal-field"
+      >
+        <label
+          htmlFor="confirm-user-password"
+        >
+          my_profile.password.confirm
+          <em
+            className="mandatory"
+          >
+            *
+          </em>
+        </label>
+        <input
+          className="hidden"
+          name="confirm-password-fake"
+          type="password"
+        />
+        <input
+          id="confirm-user-password"
+          maxLength={50}
+          name="confirm-password"
+          onChange={[Function]}
+          required={true}
+          type="password"
+          value=""
+        />
+      </div>
+    </div>
+    <footer
+      className="modal-foot"
+    >
+      <SubmitButton
+        disabled={true}
+      >
+        change_verb
+      </SubmitButton>
+      <ResetButtonLink
+        onClick={[MockFunction]}
+      >
+        cancel
+      </ResetButtonLink>
+    </footer>
+  </form>
+</Modal>
+`;

server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/TokensFormModal-test.tsx.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<Modal
+  contentLabel="users.tokens"
+  onRequestClose={[MockFunction]}
+>
+  <header
+    className="modal-head"
+  >
+    <h2>
+      users.tokens
+    </h2>
+  </header>
+  <div
+    className="modal-body modal-container"
+  >
+    <TokensForm
+      login="john.doe"
+      updateTokensCount={[MockFunction]}
+    />
+  </div>
+  <footer
+    className="modal-foot"
+  >
+    <ResetButtonLink
+      onClick={[MockFunction]}
+    >
+      Done
+    </ResetButtonLink>
+  </footer>
+</Modal>
+`;

server/sonar-web/src/main/js/helpers/testMocks.ts

@@ -504,6 +504,16 @@ export function mockStore(state: any = {}, reducer = (state: any) => state): Sto
   return createStore(reducer, state);
 }
 
+export function mockUser(overrides: Partial<T.User> = {}): T.User {
+  return {
+    active: true,
+    local: true,
+    login: 'john.doe',
+    name: 'John Doe',
+    ...overrides
+  };
+}
+
 export function mockDocumentationEntry(
   overrides: Partial<DocumentationEntry> = {}
 ): DocumentationEntry {