From 614553f4d0b7ca613855cda736bf067557cc6de0 Mon Sep 17 00:00:00 2001
From: Kevin Silva <kevin.silva@sonarsource.com>
Date: Mon, 17 Jul 2023 16:02:38 +0200
Subject: [PATCH] SONAR-19923 Onboarding Tutorial - Token modal

---
 .../src/components/modal/Modal.tsx            |   6 +-
 .../src/components/modal/ModalBody.tsx        |  15 +-
 .../__snapshots__/ModalBody-test.tsx.snap     |   4 +
 server/sonar-web/src/main/js/app/theme.js     |   2 +-
 .../tutorials/components/EditTokenModal.tsx   | 226 +++++++++---------
 server/sonar-web/tailwind.base.config.js      |   2 +-
 6 files changed, 137 insertions(+), 118 deletions(-)

diff --git a/server/sonar-web/design-system/src/components/modal/Modal.tsx b/server/sonar-web/design-system/src/components/modal/Modal.tsx
index db54a652555..c2e1ce8ed6a 100644
--- a/server/sonar-web/design-system/src/components/modal/Modal.tsx
+++ b/server/sonar-web/design-system/src/components/modal/Modal.tsx
@@ -38,6 +38,7 @@ interface CommonProps {
   closeOnOverlayClick?: boolean;
   isLarge?: boolean;
   isOpen?: boolean;
+  isOverflowVisible?: boolean;
   isScrollable?: boolean;
   onClose: VoidFunction;
 }
@@ -77,6 +78,7 @@ export function Modal({
   closeOnOverlayClick = true,
   isLarge,
   isOpen = true,
+  isOverflowVisible = false,
   isScrollable = true,
   onClose,
   ...props
@@ -102,7 +104,9 @@ export function Modal({
           <>
             <ModalHeader description={props.headerDescription} title={props.headerTitle} />
 
-            <ModalBody isScrollable={isScrollable}>{props.body}</ModalBody>
+            <ModalBody isOverflowVisible={isOverflowVisible} isScrollable={isScrollable}>
+              {props.body}
+            </ModalBody>
 
             <ModalFooter
               loading={props.loading}
diff --git a/server/sonar-web/design-system/src/components/modal/ModalBody.tsx b/server/sonar-web/design-system/src/components/modal/ModalBody.tsx
index 6b7ead1f8db..213bd2d4c23 100644
--- a/server/sonar-web/design-system/src/components/modal/ModalBody.tsx
+++ b/server/sonar-web/design-system/src/components/modal/ModalBody.tsx
@@ -26,11 +26,18 @@ import { themeColor } from '../../helpers/theme';
 
 interface Props {
   children: ReactNode;
+  isOverflowVisible?: boolean;
   isScrollable?: boolean;
 }
 
-export function ModalBody({ children, isScrollable = true }: Props) {
-  return <StyledMain className={classNames({ scrollable: isScrollable })}>{children}</StyledMain>;
+export function ModalBody({ children, isScrollable = true, isOverflowVisible = false }: Props) {
+  return (
+    <StyledMain
+      className={classNames({ scrollable: isScrollable, overflowVisible: isOverflowVisible })}
+    >
+      {children}
+    </StyledMain>
+  );
 }
 
 const StyledMain = styled.div`
@@ -45,4 +52,8 @@ const StyledMain = styled.div`
   &.scrollable {
     overflow-y: auto;
   }
+
+  &.overflowVisible {
+    overflow: visible;
+  }
 `;
diff --git a/server/sonar-web/design-system/src/components/modal/__tests__/__snapshots__/ModalBody-test.tsx.snap b/server/sonar-web/design-system/src/components/modal/__tests__/__snapshots__/ModalBody-test.tsx.snap
index 4d41d0c95e2..32d0bdc498b 100644
--- a/server/sonar-web/design-system/src/components/modal/__tests__/__snapshots__/ModalBody-test.tsx.snap
+++ b/server/sonar-web/design-system/src/components/modal/__tests__/__snapshots__/ModalBody-test.tsx.snap
@@ -20,6 +20,10 @@ exports[`renders with children 1`] = `
   overflow-y: auto;
 }
 
+.emotion-0.overflowVisible {
+  overflow: visible;
+}
+
 <div>
   <div
     class="scrollable emotion-0 emotion-1"
diff --git a/server/sonar-web/src/main/js/app/theme.js b/server/sonar-web/src/main/js/app/theme.js
index e0be09f66de..08f4d1f3a4d 100644
--- a/server/sonar-web/src/main/js/app/theme.js
+++ b/server/sonar-web/src/main/js/app/theme.js
@@ -258,7 +258,7 @@ module.exports = {
 
     contextbarZIndex: '420',
 
-    tooltipZIndex: '8000',
+    tooltipZIndex: '9001',
 
     dropdownMenuZIndex: '7500',
 
diff --git a/server/sonar-web/src/main/js/components/tutorials/components/EditTokenModal.tsx b/server/sonar-web/src/main/js/components/tutorials/components/EditTokenModal.tsx
index a03b0b7c94f..e1d62e9745d 100644
--- a/server/sonar-web/src/main/js/components/tutorials/components/EditTokenModal.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/components/EditTokenModal.tsx
@@ -17,18 +17,27 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import {
+  ButtonSecondary,
+  ClipboardIconButton,
+  DeferredSpinner,
+  DestructiveIcon,
+  FlagMessage,
+  InputField,
+  InputSelect,
+  LabelValueSelectOption,
+  Link,
+  Modal,
+  TrashIcon,
+} from 'design-system';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { generateToken, getTokens, revokeToken } from '../../../api/user-tokens';
-import { Button, DeleteButton } from '../../../components/controls/buttons';
-import { ClipboardIconButton } from '../../../components/controls/clipboard';
-import SimpleModal from '../../../components/controls/SimpleModal';
-import { Alert } from '../../../components/ui/Alert';
-import DeferredSpinner from '../../../components/ui/DeferredSpinner';
+
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 import {
-  computeTokenExpirationDate,
   EXPIRATION_OPTIONS,
+  computeTokenExpirationDate,
   getAvailableExpirationOptions,
 } from '../../../helpers/tokens';
 import { hasGlobalPermission } from '../../../helpers/users';
@@ -36,9 +45,8 @@ import { Permissions } from '../../../types/permissions';
 import { TokenExpiration, TokenType } from '../../../types/token';
 import { Component } from '../../../types/types';
 import { LoggedInUser } from '../../../types/users';
-import Link from '../../common/Link';
-import Select from '../../controls/Select';
 import { getUniqueTokenName } from '../utils';
+import { InlineSnippet } from './InlineSnippet';
 import ProjectTokenScopeInfo from './ProjectTokenScopeInfo';
 
 interface State {
@@ -130,12 +138,10 @@ export default class EditTokenModal extends React.PureComponent<Props, State> {
   };
 
   handleTokenNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    this.setState({
-      tokenName: event.target.value,
-    });
+    this.setState({ tokenName: event.currentTarget.value });
   };
 
-  handleTokenExpirationChange = ({ value }: { value: TokenExpiration }) => {
+  handleTokenExpirationChange = (value: TokenExpiration) => {
     this.setState({ tokenExpiration: value });
   };
 
@@ -154,118 +160,112 @@ export default class EditTokenModal extends React.PureComponent<Props, State> {
     }
   };
 
-  render() {
+  renderForm(type: TokenType) {
     const { loading, token, tokenName, tokenExpiration, tokenExpirationOptions } = this.state;
-
-    const type = this.getTokenType();
-    const header = translate('onboarding.token.generate', type);
     const intro = translate('onboarding.token.text', type);
 
     return (
-      <SimpleModal header={header} onClose={this.props.onClose} onSubmit={this.props.onClose}>
-        {({ onCloseClick }) => (
+      <div className="sw-body-sm">
+        <FormattedMessage
+          defaultMessage={intro}
+          id={intro}
+          values={{
+            link: (
+              <Link target="_blank" to="/account/security">
+                {translate('onboarding.token.text.user_account')}
+              </Link>
+            ),
+          }}
+        />
+
+        {token ? (
           <>
-            <div className="modal-head">
-              <h2>{header}</h2>
+            <span>
+              {tokenName}
+              {': '}
+            </span>
+            <div>
+              <InlineSnippet snippet={token} />
+              <ClipboardIconButton
+                copyLabel={translate('copy_to_clipboard')}
+                className="sw-ml-2"
+                copyValue={token}
+              />
+              <DestructiveIcon
+                className="sw-ml-1"
+                Icon={TrashIcon}
+                aria-label={translate('onboarding.token.delete')}
+                onClick={this.handleTokenRevoke}
+              />
             </div>
-
-            <div className="modal-body">
-              <p className="spacer-bottom">
-                <FormattedMessage
-                  defaultMessage={intro}
-                  id={intro}
-                  values={{
-                    link: (
-                      <Link target="_blank" to="/account/security">
-                        {translate('onboarding.token.text.user_account')}
-                      </Link>
-                    ),
-                  }}
-                />
-              </p>
-
-              {token ? (
-                <>
-                  <span className="text-middle">
-                    {tokenName}
-                    {': '}
-                  </span>
-                  <div className="display-float-center">
-                    <code className="rule spacer-right">{token}</code>
-
-                    <ClipboardIconButton copyValue={token} />
-
-                    <DeleteButton
-                      aria-label={translate('onboarding.token.delete')}
-                      onClick={this.handleTokenRevoke}
+            <FlagMessage className="sw-mt-2" variant="warning">
+              {translateWithParameters('users.tokens.new_token_created', token)}
+            </FlagMessage>
+          </>
+        ) : (
+          <>
+            <div className="sw-flex sw-pt-4">
+              <DeferredSpinner loading={loading}>
+                <div className="sw-flex-col sw-mr-2">
+                  <label className="sw-block" htmlFor="token-name">
+                    {translate('onboarding.token.name.label')}
+                  </label>
+                  <InputField
+                    aria-label={translate('onboarding.token.name.label')}
+                    onChange={this.handleTokenNameChange}
+                    id="token-name"
+                    placeholder={translate('onboarding.token.name.placeholder')}
+                    value={tokenName}
+                    type="text"
+                  />
+                </div>
+                <div className="sw-flex-col">
+                  <label htmlFor="token-expiration">{translate('users.tokens.expires_in')}</label>
+                  <div className="sw-flex">
+                    <InputSelect
+                      size="medium"
+                      id="token-expiration"
+                      isSearchable={false}
+                      onChange={(data: LabelValueSelectOption<TokenExpiration>) =>
+                        this.handleTokenExpirationChange(data.value)
+                      }
+                      options={tokenExpirationOptions}
+                      value={tokenExpirationOptions.find(
+                        (option) => option.value === tokenExpiration
+                      )}
                     />
+                    <ButtonSecondary
+                      className="sw-ml-2"
+                      disabled={!tokenName}
+                      onClick={this.getNewToken}
+                    >
+                      {translate('onboarding.token.generate')}
+                    </ButtonSecondary>
                   </div>
-
-                  <Alert className="big-spacer-top" variant="warning">
-                    {translateWithParameters('users.tokens.new_token_created', token)}
-                  </Alert>
-                </>
-              ) : (
-                <>
-                  <div className="big-spacer-top display-flex-center">
-                    {loading ? (
-                      <DeferredSpinner />
-                    ) : (
-                      <>
-                        <div className="display-flex-column">
-                          <label className="text-bold little-spacer-bottom" htmlFor="token-name">
-                            {translate('onboarding.token.name.label')}
-                          </label>
-                          <input
-                            className="input-large spacer-right text-middle"
-                            onChange={this.handleTokenNameChange}
-                            required
-                            id="token-name"
-                            type="text"
-                            placeholder={translate('onboarding.token.name.placeholder')}
-                            value={tokenName}
-                          />
-                        </div>
-                        <div className="display-flex-column">
-                          <label
-                            className="text-bold little-spacer-bottom"
-                            htmlFor="token-expiration"
-                          >
-                            {translate('users.tokens.expires_in')}
-                          </label>
-                          <div className="display-flex-center">
-                            <Select
-                              id="token-expiration"
-                              className="abs-width-100 spacer-right"
-                              isSearchable={false}
-                              onChange={this.handleTokenExpirationChange}
-                              options={tokenExpirationOptions}
-                              value={tokenExpirationOptions.find(
-                                (option) => option.value === tokenExpiration
-                              )}
-                            />
-                            <Button
-                              className="text-middle"
-                              disabled={!tokenName}
-                              onClick={this.getNewToken}
-                            >
-                              {translate('onboarding.token.generate')}
-                            </Button>
-                          </div>
-                        </div>
-                      </>
-                    )}
-                  </div>
-                  {type === TokenType.Project && <ProjectTokenScopeInfo />}
-                </>
-              )}
-            </div>
-            <div className="modal-foot">
-              <Button onClick={onCloseClick}>{translate('continue')}</Button>
+                </div>
+              </DeferredSpinner>
             </div>
+            {type === TokenType.Project && <ProjectTokenScopeInfo />}
           </>
         )}
-      </SimpleModal>
+      </div>
+    );
+  }
+
+  render() {
+    const { loading } = this.state;
+    const type = this.getTokenType();
+    const header = translate('onboarding.token.generate', type);
+
+    return (
+      <Modal
+        onClose={this.props.onClose}
+        headerTitle={header}
+        isOverflowVisible
+        loading={loading}
+        body={this.renderForm(type)}
+        secondaryButtonLabel={translate('continue')}
+      />
     );
   }
 }
diff --git a/server/sonar-web/tailwind.base.config.js b/server/sonar-web/tailwind.base.config.js
index b7d497c8c88..5dd51df591a 100644
--- a/server/sonar-web/tailwind.base.config.js
+++ b/server/sonar-web/tailwind.base.config.js
@@ -116,9 +116,9 @@ module.exports = {
       'core-concepts': '422',
       'global-popup': '5000',
       'dropdown-menu': '7500',
-      tooltip: '8000',
       'modal-overlay': 8500,
       modal: '9000',
+      tooltip: '9001',
     },
     extend: {
       width: {
-- 
2.39.5