SONAR-12782 Updating labels for project tokens

diff --git a/server/sonar-web/src/main/js/components/tutorials/manual/TokenStep.tsx b/server/sonar-web/src/main/js/components/tutorials/manual/TokenStep.tsx
index 328a306788d9eb3093bc2958296df480f0b95775..c9ba982badae915123d0f08d0ec650cf0868dc27 100644 (file)
--- a/server/sonar-web/src/main/js/components/tutorials/manual/TokenStep.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/manual/TokenStep.tsx
@@ -27,6 +27,7 @@ import AlertSuccessIcon from '../../../components/icons/AlertSuccessIcon';
 import { translate } from '../../../helpers/l10n';
 import { TokenType, UserToken } from '../../../types/token';
 import { LoggedInUser } from '../../../types/users';
+import DocumentationTooltip from '../../common/DocumentationTooltip';
 import AlertErrorIcon from '../../icons/AlertErrorIcon';
 import Step from '../components/Step';
 import { getUniqueTokenName } from '../utils';
@@ -172,23 +173,38 @@ export default class TokenStep extends React.PureComponent<Props, State> {
       )}
       {this.state.selection === 'generate' && (
         <div className="big-spacer-top">
-          <form onSubmit={this.handleTokenGenerate}>
-            <input
-              autoFocus={true}
-              className="input-super-large spacer-right text-middle"
-              onChange={this.handleTokenNameChange}
-              placeholder={translate('onboarding.token.generate_project_token.placeholder')}
-              required={true}
-              type="text"
-              value={this.state.tokenName || ''}
-            />
-            {this.state.loading ? (
-              <i className="spinner text-middle" />
-            ) : (
-              <SubmitButton className="text-middle" disabled={!this.state.tokenName}>
-                {translate('onboarding.token.generate')}
-              </SubmitButton>
-            )}
+          <form className="display-flex-column" onSubmit={this.handleTokenGenerate}>
+            <label className="h3" htmlFor="generate-token-input">
+              {translate('onboarding.token.generate_project_token.label')}
+              <DocumentationTooltip
+                className="spacer-left"
+                content={translate('onboarding.token.generate_project_token.help')}
+                links={[
+                  {
+                    href: '/documentation/user-guide/user-token/',
+                    label: translate('learn_more')
+                  }
+                ]}
+              />
+            </label>
+            <div>
+              <input
+                id="generate-token-input"
+                autoFocus={true}
+                className="input-super-large spacer-right spacer-top text-middle"
+                onChange={this.handleTokenNameChange}
+                required={true}
+                type="text"
+                value={this.state.tokenName || ''}
+              />
+              {this.state.loading ? (
+                <i className="spinner text-middle" />
+              ) : (
+                <SubmitButton className="text-middle spacer-top" disabled={!this.state.tokenName}>
+                  {translate('onboarding.token.generate')}
+                </SubmitButton>
+              )}
+            </div>
           </form>
         </div>
       )}
@@ -208,12 +224,25 @@ export default class TokenStep extends React.PureComponent<Props, State> {
           {translate('onboarding.token.use_existing_token')}
         </Radio>
         {this.state.selection === 'use-existing' && (
-          <div className="big-spacer-top">
+          <div className="big-spacer-top display-flex-column">
+            <label className="h3" htmlFor="existing-token-input">
+              {translate('onboarding.token.use_existing_token.label')}
+              <DocumentationTooltip
+                className="spacer-left"
+                content={translate('onboarding.token.use_existing_token.help')}
+                links={[
+                  {
+                    href: '/documentation/user-guide/user-token/',
+                    label: translate('learn_more')
+                  }
+                ]}
+              />
+            </label>
             <input
+              id="existing-token-input"
               autoFocus={true}
-              className="input-super-large spacer-right text-middle"
+              className="input-super-large spacer-right spacer-top text-middle"
               onChange={this.handleExisingTokenChange}
-              placeholder={translate('onboarding.token.use_existing_token.placeholder')}
               required={true}
               type="text"
               value={this.state.existingToken}

diff --git a/server/sonar-web/src/main/js/components/tutorials/manual/__tests__/__snapshots__/TokenStep-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/manual/__tests__/__snapshots__/TokenStep-test.tsx.snap
index e2e79d0cdb538d0e367f5fe4ca922b8783619ff8..269c233855d3eaabc5e9820477808f1000ebb06f 100644 (file)
--- a/server/sonar-web/src/main/js/components/tutorials/manual/__tests__/__snapshots__/TokenStep-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/manual/__tests__/__snapshots__/TokenStep-test.tsx.snap
@@ -35,23 +35,44 @@ exports[`generates token 1`] = `
             className="big-spacer-top"
           >
             <form
+              className="display-flex-column"
               onSubmit={[Function]}
             >
-              <input
-                autoFocus={true}
-                className="input-super-large spacer-right text-middle"
-                onChange={[Function]}
-                placeholder="onboarding.token.generate_project_token.placeholder"
-                required={true}
-                type="text"
-                value=""
-              />
-              <SubmitButton
-                className="text-middle"
-                disabled={true}
+              <label
+                className="h3"
+                htmlFor="generate-token-input"
               >
-                onboarding.token.generate
-              </SubmitButton>
+                onboarding.token.generate_project_token.label
+                <DocumentationTooltip
+                  className="spacer-left"
+                  content="onboarding.token.generate_project_token.help"
+                  links={
+                    Array [
+                      Object {
+                        "href": "/documentation/user-guide/user-token/",
+                        "label": "learn_more",
+                      },
+                    ]
+                  }
+                />
+              </label>
+              <div>
+                <input
+                  autoFocus={true}
+                  className="input-super-large spacer-right spacer-top text-middle"
+                  id="generate-token-input"
+                  onChange={[Function]}
+                  required={true}
+                  type="text"
+                  value=""
+                />
+                <SubmitButton
+                  className="text-middle spacer-top"
+                  disabled={true}
+                >
+                  onboarding.token.generate
+                </SubmitButton>
+              </div>
             </form>
           </div>
         </div>
@@ -127,20 +148,41 @@ exports[`generates token 2`] = `
             className="big-spacer-top"
           >
             <form
+              className="display-flex-column"
               onSubmit={[Function]}
             >
-              <input
-                autoFocus={true}
-                className="input-super-large spacer-right text-middle"
-                onChange={[Function]}
-                placeholder="onboarding.token.generate_project_token.placeholder"
-                required={true}
-                type="text"
-                value="my token"
-              />
-              <i
-                className="spinner text-middle"
-              />
+              <label
+                className="h3"
+                htmlFor="generate-token-input"
+              >
+                onboarding.token.generate_project_token.label
+                <DocumentationTooltip
+                  className="spacer-left"
+                  content="onboarding.token.generate_project_token.help"
+                  links={
+                    Array [
+                      Object {
+                        "href": "/documentation/user-guide/user-token/",
+                        "label": "learn_more",
+                      },
+                    ]
+                  }
+                />
+              </label>
+              <div>
+                <input
+                  autoFocus={true}
+                  className="input-super-large spacer-right spacer-top text-middle"
+                  id="generate-token-input"
+                  onChange={[Function]}
+                  required={true}
+                  type="text"
+                  value="my token"
+                />
+                <i
+                  className="spinner text-middle"
+                />
+              </div>
             </form>
           </div>
         </div>
@@ -443,23 +485,44 @@ exports[`revokes token 3`] = `
             className="big-spacer-top"
           >
             <form
+              className="display-flex-column"
               onSubmit={[Function]}
             >
-              <input
-                autoFocus={true}
-                className="input-super-large spacer-right text-middle"
-                onChange={[Function]}
-                placeholder="onboarding.token.generate_project_token.placeholder"
-                required={true}
-                type="text"
-                value=""
-              />
-              <SubmitButton
-                className="text-middle"
-                disabled={true}
+              <label
+                className="h3"
+                htmlFor="generate-token-input"
               >
-                onboarding.token.generate
-              </SubmitButton>
+                onboarding.token.generate_project_token.label
+                <DocumentationTooltip
+                  className="spacer-left"
+                  content="onboarding.token.generate_project_token.help"
+                  links={
+                    Array [
+                      Object {
+                        "href": "/documentation/user-guide/user-token/",
+                        "label": "learn_more",
+                      },
+                    ]
+                  }
+                />
+              </label>
+              <div>
+                <input
+                  autoFocus={true}
+                  className="input-super-large spacer-right spacer-top text-middle"
+                  id="generate-token-input"
+                  onChange={[Function]}
+                  required={true}
+                  type="text"
+                  value=""
+                />
+                <SubmitButton
+                  className="text-middle spacer-top"
+                  disabled={true}
+                >
+                  onboarding.token.generate
+                </SubmitButton>
+              </div>
             </form>
           </div>
         </div>

diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
index 3333fd74db096ba89cb8c8affb089d79a19fb7fe..993f74bfb8d8a6cbd889d3cccbdd080f688db5a5 100644 (file)
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -3459,13 +3459,13 @@ onboarding.token.text.user_account=user account
 onboarding.token.generate=Generate
 onboarding.token.placeholder=Enter a name for your token
 onboarding.token.generate_token=Generate a token
-onboarding.token.generate_token.placeholder=Enter a name for your token
 onboarding.token.generate_project_token=Generate a project token
-onboarding.token.generate_project_token.placeholder=Enter a name for your project token
+onboarding.token.generate_project_token.label=Token name
 onboarding.token.use_existing_token=Use existing token
-onboarding.token.use_existing_token.placeholder=Enter your existing token
 onboarding.token.use_existing_token.label=Existing token value
 onboarding.token.invalid_format=The token you have entered has invalid format.
+onboarding.token.use_existing_token.help=Paste an existing token value into the input field.
+onboarding.token.generate_project_token.help=Enter a name for your project token
 
 onboarding.tutorial.env_variables=In the {field} field, enter {value} {extra}
 onboarding.tutorial.env_variables.field=Value