From 52875b9d3c697caf46c717de09ee1e8e64445cc9 Mon Sep 17 00:00:00 2001 From: Revanshu Paliwal Date: Tue, 18 Jul 2023 11:44:01 +0200 Subject: [PATCH] SONAR-19905 Migrating bitbucket and gitlab tutorial pages to MIUI --- .../bitbucket-pipelines/AnalysisCommand.tsx | 4 +- .../BitbucketPipelinesTutorial.tsx | 52 ++- .../RepositoryVariables.tsx | 119 +++---- .../BitbucketPipelinesTutorial-it.tsx | 16 +- .../tutorials/components/CreateYmlFile.tsx | 2 +- .../components/DefaultProjectKey.tsx | 2 +- .../tutorials/components/GradleBuild.tsx | 4 +- .../components/TokenStepGenerator.tsx | 38 +-- .../github-action/GitHubActionTutorial.tsx | 68 ++-- .../tutorials/github-action/SecretStep.tsx | 8 +- .../github-action/commands/CFamily.tsx | 2 +- .../gitlabci/EnvironmentVariablesStep.tsx | 310 +++++++++--------- .../tutorials/gitlabci/GitLabCITutorial.tsx | 46 +-- .../tutorials/gitlabci/YmlFileStep.tsx | 249 +++++++------- .../__tests__/GitLabCITutorial-it.tsx | 45 +-- .../gitlabci/commands/PipeCommand.tsx | 4 +- .../resources/org/sonar/l10n/core.properties | 3 +- 17 files changed, 464 insertions(+), 508 deletions(-) diff --git a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/AnalysisCommand.tsx b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/AnalysisCommand.tsx index b30644f81f0..684de937492 100644 --- a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/AnalysisCommand.tsx +++ b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/AnalysisCommand.tsx @@ -27,12 +27,12 @@ import { Component } from '../../../types/types'; import { CompilationInfo } from '../components/CompilationInfo'; import CreateYmlFile from '../components/CreateYmlFile'; import { BuildTools } from '../types'; +import { PreambuleYaml } from './PreambuleYaml'; import cFamilyExample from './commands/CFamily'; import dotNetExample from './commands/DotNet'; import gradleExample from './commands/Gradle'; import mavenExample from './commands/Maven'; import othersExample from './commands/Others'; -import { PreambuleYaml } from './PreambuleYaml'; export interface AnalysisCommandProps extends WithAvailableFeaturesProps { buildTool: BuildTools; @@ -70,7 +70,7 @@ export function AnalysisCommand(props: AnalysisCommandProps) { <> - {buildTool === BuildTools.CFamily && } + {buildTool === BuildTools.CFamily && } ); } diff --git a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/BitbucketPipelinesTutorial.tsx b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/BitbucketPipelinesTutorial.tsx index f697f99b000..3d3c4ef3f35 100644 --- a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/BitbucketPipelinesTutorial.tsx +++ b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/BitbucketPipelinesTutorial.tsx @@ -17,6 +17,7 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ +import { BasicSeparator, Title, TutorialStep, TutorialStepList } from 'design-system'; import * as React from 'react'; import { translate } from '../../../helpers/l10n'; import { @@ -26,10 +27,8 @@ import { } from '../../../types/alm-settings'; import { Component } from '../../../types/types'; import { LoggedInUser } from '../../../types/users'; -import AllSetStep from '../components/AllSetStep'; -import FinishButton from '../components/FinishButton'; +import AllSet from '../components/AllSet'; import GithubCFamilyExampleRepositories from '../components/GithubCFamilyExampleRepositories'; -import Step from '../components/Step'; import YamlFileStep from '../components/YamlFileStep'; import { BuildTools, TutorialModes } from '../types'; import AnalysisCommand from './AnalysisCommand'; @@ -62,37 +61,30 @@ export default function BitbucketPipelinesTutorial(props: BitbucketPipelinesTuto mainBranchName, } = props; - const [step, setStep] = React.useState(Steps.REPOSITORY_VARIABLES); + const [done, setDone] = React.useState(false); return ( <> - Steps.REPOSITORY_VARIABLES} - onOpen={() => setStep(Steps.REPOSITORY_VARIABLES)} - open={step === Steps.REPOSITORY_VARIABLES} - renderForm={() => ( + {translate('onboarding.tutorial.with.bitbucket_ci.title')} + + + setStep(Steps.YAML)} projectBinding={projectBinding} /> - )} - stepNumber={Steps.REPOSITORY_VARIABLES} - stepTitle={translate('onboarding.tutorial.with.bitbucket_pipelines.variables.title')} - /> - Steps.YAML} - onOpen={() => setStep(Steps.YAML)} - open={step === Steps.YAML} - renderForm={() => ( - + + + {(buildTool) => ( <> {buildTool === BuildTools.CFamily && ( )} @@ -101,20 +93,18 @@ export default function BitbucketPipelinesTutorial(props: BitbucketPipelinesTuto component={component} mainBranchName={mainBranchName} /> - setStep(Steps.ALL_SET)} /> )} + + + {done && ( + <> + + + )} - stepNumber={Steps.YAML} - stepTitle={translate('onboarding.tutorial.with.bitbucket_pipelines.yaml.title')} - /> - + ); } diff --git a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/RepositoryVariables.tsx b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/RepositoryVariables.tsx index 74324efc848..a84a8053335 100644 --- a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/RepositoryVariables.tsx +++ b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/RepositoryVariables.tsx @@ -17,14 +17,20 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ +import { + BasicSeparator, + ClipboardIconButton, + NumberedList, + NumberedListItem, + StandoutLink, +} from 'design-system'; import * as React from 'react'; import { FormattedMessage } from 'react-intl'; -import { Button } from '../../../components/controls/buttons'; -import { ClipboardIconButton } from '../../../components/controls/clipboard'; import { translate } from '../../../helpers/l10n'; import { AlmSettingsInstance, ProjectAlmBindingResponse } from '../../../types/alm-settings'; import { Component } from '../../../types/types'; import { LoggedInUser } from '../../../types/users'; +import { InlineSnippet } from '../components/InlineSnippet'; import SentenceWithHighlights from '../components/SentenceWithHighlights'; import TokenStepGenerator from '../components/TokenStepGenerator'; import { buildBitbucketCloudLink } from '../utils'; @@ -34,94 +40,95 @@ export interface RepositoryVariablesProps { baseUrl: string; component: Component; currentUser: LoggedInUser; - onDone: () => void; projectBinding?: ProjectAlmBindingResponse; } export default function RepositoryVariables(props: RepositoryVariablesProps) { const { almBinding, baseUrl, component, currentUser, projectBinding } = props; return ( -
-

- - {translate('onboarding.tutorial.with.bitbucket_pipelines.variables.intro.link')} - - ) : ( - - {translate('onboarding.tutorial.with.bitbucket_pipelines.variables.intro.link')} - - ), - }} - /> -

-
    -
  1. + <> + + {translate('onboarding.tutorial.with.bitbucket_pipelines.variables.intro.link')} + + ) : ( + + {translate('onboarding.tutorial.with.bitbucket_pipelines.variables.intro.link')} + + ), + }} + /> + + - SONAR_TOKEN - -
    2. - -
  2. + + + + + + + -
    3. -
  3. + + -
    4. -
+ + -
+ -
    -
  1. + + - - SONAR_HOST_URL - -
    2. -
  2. + + + + , - field: {translate('onboarding.tutorial.env_variables.field')}, - value: {baseUrl}, + field: ( + + {translate('onboarding.tutorial.env_variables.field')} + + ), + value: , }} /> -
    3. -
  3. + + -
    4. -
- -
+ + + ); } diff --git a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/__tests__/BitbucketPipelinesTutorial-it.tsx b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/__tests__/BitbucketPipelinesTutorial-it.tsx index 07691d586b8..b35ef063934 100644 --- a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/__tests__/BitbucketPipelinesTutorial-it.tsx +++ b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/__tests__/BitbucketPipelinesTutorial-it.tsx @@ -67,10 +67,11 @@ it('should follow and complete all steps', async () => { expect(await ui.secretsStepTitle.find()).toBeInTheDocument(); // Env variables step - expect(getCopyToClipboardValue()).toMatchSnapshot('sonar token key'); - expect(getCopyToClipboardValue(1)).toMatchSnapshot('sonarqube host url key'); - expect(getCopyToClipboardValue(2)).toMatchSnapshot('sonarqube host url value'); - await user.click(ui.continueButton.get()); + expect(getCopyToClipboardValue(0, 'Copy to clipboard')).toMatchSnapshot('sonar token key'); + expect(getCopyToClipboardValue(1, 'Copy to clipboard')).toMatchSnapshot('sonarqube host url key'); + expect(getCopyToClipboardValue(2, 'Copy to clipboard')).toMatchSnapshot( + 'sonarqube host url value' + ); // Create/update configuration file step // Maven @@ -98,7 +99,6 @@ it('should follow and complete all steps', async () => { expect(getCopyToClipboardValue(0, 'Copy')).toMatchSnapshot('Other: sonar-project.properties'); expect(getCopyToClipboardValue(1, 'Copy')).toMatchSnapshot('Other: .github/workflows/build.yml'); - await user.click(ui.finishTutorialButton.get()); expect(ui.allSetSentence.get()).toBeInTheDocument(); }); @@ -111,7 +111,7 @@ it('should generate/delete a new token or use existing one', async () => { // Generate token await user.click(ui.genTokenDialogButton.get()); await user.click(ui.generateTokenButton.get()); - expect(getCopyToClipboardValue(3)).toEqual('generatedtoken2'); + expect(getCopyToClipboardValue()).toEqual('generatedtoken2'); // Revoke current token and create new one await user.click(ui.deleteTokenButton.get()); @@ -119,7 +119,7 @@ it('should generate/delete a new token or use existing one', async () => { await selectEvent.select(ui.expiresInSelect.get(), 'users.tokens.expiration.365'); await user.click(ui.generateTokenButton.get()); expect(ui.tokenValue.get()).toBeInTheDocument(); - await user.click(ui.continueButton.getAll()[1]); + await user.click(ui.continueButton.getAll()[0]); expect(ui.tokenValue.query()).not.toBeInTheDocument(); }); @@ -139,9 +139,7 @@ it('navigates between steps', async () => { // If project is bound, link to repo is visible expect(await ui.linkToRepo.find()).toBeInTheDocument(); - await user.click(await ui.continueButton.find()); await user.click(ui.mavenBuildButton.get()); - await user.click(ui.finishTutorialButton.get()); expect(ui.allSetSentence.get()).toBeInTheDocument(); await user.click(ui.ymlFileStepTitle.get()); diff --git a/server/sonar-web/src/main/js/components/tutorials/components/CreateYmlFile.tsx b/server/sonar-web/src/main/js/components/tutorials/components/CreateYmlFile.tsx index cad8d25b570..756c28edb29 100644 --- a/server/sonar-web/src/main/js/components/tutorials/components/CreateYmlFile.tsx +++ b/server/sonar-web/src/main/js/components/tutorials/components/CreateYmlFile.tsx @@ -39,7 +39,7 @@ export default function CreateYmlFile(props: CreateYmlFileProps) { file: ( <> - + ), }} diff --git a/server/sonar-web/src/main/js/components/tutorials/components/DefaultProjectKey.tsx b/server/sonar-web/src/main/js/components/tutorials/components/DefaultProjectKey.tsx index 5833fdfd374..6303900989e 100644 --- a/server/sonar-web/src/main/js/components/tutorials/components/DefaultProjectKey.tsx +++ b/server/sonar-web/src/main/js/components/tutorials/components/DefaultProjectKey.tsx @@ -38,7 +38,7 @@ export default function DefaultProjectKey(props: DefaultProjectKeyProps) { /> ); diff --git a/server/sonar-web/src/main/js/components/tutorials/components/GradleBuild.tsx b/server/sonar-web/src/main/js/components/tutorials/components/GradleBuild.tsx index 8087bdb5b04..6e1edddb92b 100644 --- a/server/sonar-web/src/main/js/components/tutorials/components/GradleBuild.tsx +++ b/server/sonar-web/src/main/js/components/tutorials/components/GradleBuild.tsx @@ -41,13 +41,13 @@ export default function GradleBuild({ component }: Props) { groovy: ( <> - + ), kotlin: ( <> - + ), sq: , diff --git a/server/sonar-web/src/main/js/components/tutorials/components/TokenStepGenerator.tsx b/server/sonar-web/src/main/js/components/tutorials/components/TokenStepGenerator.tsx index e43cb39b1c9..c8854e2ca02 100644 --- a/server/sonar-web/src/main/js/components/tutorials/components/TokenStepGenerator.tsx +++ b/server/sonar-web/src/main/js/components/tutorials/components/TokenStepGenerator.tsx @@ -17,7 +17,7 @@ * 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, NumberedListItem } from 'design-system'; +import { ButtonSecondary } from 'design-system'; import * as React from 'react'; import { FormattedMessage } from 'react-intl'; import { translate } from '../../../helpers/l10n'; @@ -39,25 +39,23 @@ export default function TokenStepGenerator(props: TokenStepGeneratorProps) { return ( <> - - - {translate('onboarding.token.generate.long')} - - ), - field: ( - - {translate('onboarding.tutorial.env_variables.field')} - - ), - value: translate('onboarding.tutorial.env_variables.token_generator.value'), - }} - /> - + + {translate('onboarding.token.generate.long')} + + ), + field: ( + + {translate('onboarding.tutorial.env_variables.field')} + + ), + value: translate('onboarding.tutorial.env_variables.token_generator.value'), + }} + /> {isModalVisible && ( )} diff --git a/server/sonar-web/src/main/js/components/tutorials/github-action/GitHubActionTutorial.tsx b/server/sonar-web/src/main/js/components/tutorials/github-action/GitHubActionTutorial.tsx index 0f0b134674e..e7f00e98a9d 100644 --- a/server/sonar-web/src/main/js/components/tutorials/github-action/GitHubActionTutorial.tsx +++ b/server/sonar-web/src/main/js/components/tutorials/github-action/GitHubActionTutorial.tsx @@ -17,7 +17,7 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { BasicSeparator, TutorialStep, TutorialStepList } from 'design-system'; +import { BasicSeparator, Title, TutorialStep, TutorialStepList } from 'design-system'; import * as React from 'react'; import { translate } from '../../../helpers/l10n'; import { @@ -54,36 +54,42 @@ export default function GitHubActionTutorial(props: GitHubActionTutorialProps) { willRefreshAutomatically, } = props; return ( - - - - - - - {(buildTool) => ( - - )} - - - {done && ( - <> - - + {translate('onboarding.tutorial.with.github_ci.title')} + + + + - - )} - + + + + {(buildTool) => ( + + )} + + + {done && ( + <> + + + + )} + + ); } diff --git a/server/sonar-web/src/main/js/components/tutorials/github-action/SecretStep.tsx b/server/sonar-web/src/main/js/components/tutorials/github-action/SecretStep.tsx index a86d562f45e..ef5ad4b7acd 100644 --- a/server/sonar-web/src/main/js/components/tutorials/github-action/SecretStep.tsx +++ b/server/sonar-web/src/main/js/components/tutorials/github-action/SecretStep.tsx @@ -81,9 +81,11 @@ export default function SecretStep(props: SecretStepProps) { highlightKeys={['name']} /> - + + + + - - + {os && ( diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/EnvironmentVariablesStep.tsx b/server/sonar-web/src/main/js/components/tutorials/gitlabci/EnvironmentVariablesStep.tsx index 4c0f3fa42cb..f79655dc9f9 100644 --- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/EnvironmentVariablesStep.tsx +++ b/server/sonar-web/src/main/js/components/tutorials/gitlabci/EnvironmentVariablesStep.tsx @@ -17,24 +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 { + BasicSeparator, + ClipboardIconButton, + NumberedList, + NumberedListItem, + TutorialStep, + UnorderedList, + UnorderedListItem, +} from 'design-system'; import * as React from 'react'; import { FormattedMessage } from 'react-intl'; -import { Button } from '../../../components/controls/buttons'; -import { ClipboardIconButton } from '../../../components/controls/clipboard'; import { translate } from '../../../helpers/l10n'; import { Component } from '../../../types/types'; import { LoggedInUser } from '../../../types/users'; -import Step from '../components/Step'; +import { InlineSnippet } from '../components/InlineSnippet'; import TokenStepGenerator from '../components/TokenStepGenerator'; export interface EnvironmentVariablesStepProps { baseUrl: string; component: Component; currentUser: LoggedInUser; - finished: boolean; - onDone: () => void; - onOpen: () => void; - open: boolean; } const pipelineDescriptionLinkLabel = translate( @@ -42,170 +45,157 @@ const pipelineDescriptionLinkLabel = translate( ); export default function EnvironmentVariablesStep(props: EnvironmentVariablesStepProps) { - const { baseUrl, component, currentUser, finished, open } = props; + const { baseUrl, component, currentUser } = props; const fieldValueTranslation = translate('onboarding.tutorial.env_variables'); const renderForm = () => ( -
-
    -
  1. -

    - {translate('onboarding.tutorial.with.gitlab_ci.variables.section.title')} -

    + + + {translate('onboarding.tutorial.with.gitlab_ci.variables.section.title')} - {pipelineDescriptionLinkLabel}, - }} - /> + {pipelineDescriptionLinkLabel}, + }} + /> -
      -
    • - , - field: ( - - {translate('onboarding.tutorial.with.gitlab_ci.variables.step1')} - - ), - value: SONAR_TOKEN, - }} - /> -
      • + + + , + field: ( + + {translate('onboarding.tutorial.with.gitlab_ci.variables.step1')} + + ), + value: , + }} + /> + + -
    • - - {translate('onboarding.tutorial.with.gitlab_ci.variables.step3.value')} - - ), - }} - /> -
      • -
    • - - {translate( - 'onboarding.tutorial.with.gitlab_ci.variables.section.step4.value' - )} - - ), - }} - /> -
      • -
    -
    -
    2. -
  2. -

    - {translate('onboarding.tutorial.with.gitlab_ci.variables.section2.title')} -

    + + + + {translate('onboarding.tutorial.with.gitlab_ci.variables.step3.value')} + + ), + }} + /> + + + + {translate('onboarding.tutorial.with.gitlab_ci.variables.section.step4.value')} + + ), + }} + /> + + + + + + {translate('onboarding.tutorial.with.gitlab_ci.variables.section2.title')} - {pipelineDescriptionLinkLabel}, - }} - /> + {pipelineDescriptionLinkLabel}, + }} + /> -
      -
    • - , - field: ( - - {translate('onboarding.tutorial.with.gitlab_ci.variables.step1')} - - ), - value: SONAR_HOST_URL, - }} - /> -
      • -
    • - , - field: {translate('onboarding.tutorial.env_variables.field')}, - value: {baseUrl}, - }} - /> -
      • -
    • - - {translate('onboarding.tutorial.with.gitlab_ci.variables.step3.value')} - - ), - }} - /> -
      • -
    • - - {translate( - 'onboarding.tutorial.with.gitlab_ci.variables.section.step4.value' - )} - - ), - }} - /> -
      • -
    - - -
    3. -
-
+ + + , + field: ( + + {translate('onboarding.tutorial.with.gitlab_ci.variables.step1')} + + ), + value: , + }} + /> + + + , + field: ( + + {translate('onboarding.tutorial.env_variables.field')} + + ), + value: , + }} + /> + + + + {translate('onboarding.tutorial.with.gitlab_ci.variables.step3.value')} + + ), + }} + /> + + + + {translate('onboarding.tutorial.with.gitlab_ci.variables.section.step4.value')} + + ), + }} + /> + + + + ); return ( - + + {renderForm()} + ); } diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/GitLabCITutorial.tsx b/server/sonar-web/src/main/js/components/tutorials/gitlabci/GitLabCITutorial.tsx index 86a8b46dc38..7ebc36a4754 100644 --- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/GitLabCITutorial.tsx +++ b/server/sonar-web/src/main/js/components/tutorials/gitlabci/GitLabCITutorial.tsx @@ -17,12 +17,13 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ +import { BasicSeparator, Title, TutorialStepList } from 'design-system'; import * as React from 'react'; import { translate } from '../../../helpers/l10n'; import { AlmKeys } from '../../../types/alm-settings'; import { Component } from '../../../types/types'; import { LoggedInUser } from '../../../types/users'; -import AllSetStep from '../components/AllSetStep'; +import AllSet from '../components/AllSet'; import EnvironmentVariablesStep from './EnvironmentVariablesStep'; import YmlFileStep from './YmlFileStep'; @@ -42,38 +43,27 @@ export interface GitLabCITutorialProps { export default function GitLabCITutorial(props: GitLabCITutorialProps) { const { baseUrl, component, currentUser, willRefreshAutomatically } = props; - const [step, setStep] = React.useState(Steps.ENV_VARIABLES); - + const [done, setDone] = React.useState(false); return ( <> -
-

{translate('onboarding.tutorial.with.gitlab_ci.title')}

-
+ {translate('onboarding.tutorial.with.gitlab_ci.title')} - Steps.ENV_VARIABLES} - onDone={() => setStep(Steps.YML)} - onOpen={() => setStep(Steps.ENV_VARIABLES)} - open={step === Steps.ENV_VARIABLES} - /> + + - Steps.YML} - component={component} - onDone={() => setStep(Steps.ALL_SET)} - onOpen={() => setStep(Steps.YML)} - open={step === Steps.YML} - /> + + - + {done && ( + <> + + + + )} ); } diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/YmlFileStep.tsx b/server/sonar-web/src/main/js/components/tutorials/gitlabci/YmlFileStep.tsx index e5eb3526f37..664b4f2da6f 100644 --- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/YmlFileStep.tsx +++ b/server/sonar-web/src/main/js/components/tutorials/gitlabci/YmlFileStep.tsx @@ -18,33 +18,34 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { FlagMessage } from 'design-system'; +import { + ClipboardIconButton, + CodeSnippet, + FlagMessage, + NumberedList, + NumberedListItem, + TutorialStep, +} from 'design-system'; import * as React from 'react'; import { FormattedMessage } from 'react-intl'; import withAvailableFeatures, { WithAvailableFeaturesProps, } from '../../../app/components/available-features/withAvailableFeatures'; -import { ClipboardIconButton } from '../../../components/controls/clipboard'; import { GRADLE_SCANNER_VERSION } from '../../../helpers/constants'; import { translate } from '../../../helpers/l10n'; import { Component } from '../../../types/types'; -import CodeSnippet from '../../common/CodeSnippet'; import { withCLanguageFeature } from '../../hoc/withCLanguageFeature'; -import FinishButton from '../components/FinishButton'; import GithubCFamilyExampleRepositories from '../components/GithubCFamilyExampleRepositories'; import GradleBuildSelection from '../components/GradleBuildSelection'; +import { InlineSnippet } from '../components/InlineSnippet'; import RenderOptions from '../components/RenderOptions'; -import Step from '../components/Step'; import { BuildTools, GradleBuildDSL, TutorialModes } from '../types'; import PipeCommand from './commands/PipeCommand'; export interface YmlFileStepProps extends WithAvailableFeaturesProps { component: Component; - finished: boolean; hasCLanguageFeature: boolean; - onDone: () => void; - onOpen: () => void; - open: boolean; + setDone: (doneStatus: boolean) => void; } const mavenSnippet = (key: string, name: string) => ` @@ -100,7 +101,7 @@ const filenameForBuildTool = { }; export function YmlFileStep(props: YmlFileStepProps) { - const { component, hasCLanguageFeature, finished, open } = props; + const { component, hasCLanguageFeature } = props; const [buildTool, setBuildTool] = React.useState(); @@ -113,142 +114,130 @@ export function YmlFileStep(props: YmlFileStepProps) { buildTools.push(BuildTools.Other); const renderForm = () => ( -
-
    -
  1. - {translate('onboarding.build')} - - void} - optionLabelKey="onboarding.build" - options={buildTools} + + + {translate('onboarding.build')} + + void} + optionLabelKey="onboarding.build" + options={buildTools} + setDone={props.setDone} + /> + + {buildTool === BuildTools.CFamily && ( + - - {buildTool === BuildTools.CFamily && ( - - )} -
    2. - - {buildTool !== undefined && - buildTool !== BuildTools.CFamily && - buildTool !== BuildTools.DotNet && ( -
  2. - - {filenameForBuildTool[buildTool]} - - - - ), - }, - buildTool === BuildTools.Gradle - ? { - file2: ( - <> - {GradleBuildDSL.Kotlin} - - - - ), - } - : {} - )} - /> - - {buildTool === BuildTools.Gradle ? ( - - {(build) => ( - - )} - - ) : ( - + )} + + + {buildTool !== undefined && + buildTool !== BuildTools.CFamily && + buildTool !== BuildTools.DotNet && ( + + - )} - - {buildTool && ( -
  3. - {buildTool !== BuildTools.CFamily && ( - <> -
    - + + + + + ), + }, + buildTool === BuildTools.Gradle + ? { + file2: ( <> - - {translate('onboarding.tutorial.with.gitlab_ci.yaml.filename')} - + ), - }} + } + : {} + )} + /> + {buildTool === BuildTools.Gradle ? ( + + {(build) => ( + -
    + )} + + ) : ( + + )} + + )} -
    - -
    + {buildTool && ( + <> + {buildTool !== BuildTools.CFamily && ( + + + + + + + ), + }} + /> - - {translate('onboarding.tutorial.with.gitlab_ci.yaml.premium')} - + -

    - {translate('onboarding.tutorial.with.gitlab_ci.yaml.baseconfig')} -

    + + {translate('onboarding.tutorial.with.gitlab_ci.yaml.premium')} + -

    {translate('onboarding.tutorial.with.gitlab_ci.yaml.existing')}

    - - )} - -
    4. - )} -
-
+

+ {translate('onboarding.tutorial.with.gitlab_ci.yaml.baseconfig')} +

+ +

{translate('onboarding.tutorial.with.gitlab_ci.yaml.existing')}

+ + )} + + )} + ); return ( - + + {renderForm()} + ); } diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/GitLabCITutorial-it.tsx b/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/GitLabCITutorial-it.tsx index 48caa3e9c53..254cee6a35e 100644 --- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/GitLabCITutorial-it.tsx +++ b/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/GitLabCITutorial-it.tsx @@ -59,34 +59,34 @@ it('should follow and complete all steps', async () => { expect(await ui.secretsStepTitle.find()).toBeInTheDocument(); // Env variables step - expect(getCopyToClipboardValue()).toMatchSnapshot('sonar token key'); - expect(getCopyToClipboardValue(1)).toMatchSnapshot('sonarqube host url key'); - expect(getCopyToClipboardValue(2)).toMatchSnapshot('sonarqube host url value'); - await user.click(ui.continueButton.get()); + expect(getCopyToClipboardValue(0, 'Copy to clipboard')).toMatchSnapshot('sonar token key'); + expect(getCopyToClipboardValue(1, 'Copy to clipboard')).toMatchSnapshot('sonarqube host url key'); + expect(getCopyToClipboardValue(2, 'Copy to clipboard')).toMatchSnapshot( + 'sonarqube host url value' + ); // Create/update configuration file step // Maven await user.click(ui.mavenBuildButton.get()); - expect(getCopyToClipboardValue(1)).toMatchSnapshot('Maven: pom.xml'); - expect(getCopyToClipboardValue(3)).toMatchSnapshot('Maven: gitlab-ci.yml'); + expect(getCopyToClipboardValue(0, 'Copy')).toMatchSnapshot('Maven: pom.xml'); + expect(getCopyToClipboardValue(1, 'Copy')).toMatchSnapshot('Maven: gitlab-ci.yml'); // Gradle await user.click(ui.gradleBuildButton.get()); - expect(getCopyToClipboardValue(2)).toMatchSnapshot('Groovy: build.gradle'); + expect(getCopyToClipboardValue(0, 'Copy')).toMatchSnapshot('Groovy: build.gradle'); await user.click(ui.gradleDSLButton(GradleBuildDSL.Kotlin).get()); - expect(getCopyToClipboardValue(2)).toMatchSnapshot('Kotlin: build.gradle.kts'); - expect(getCopyToClipboardValue(4)).toMatchSnapshot('Gradle: gitlab-ci.yml'); + expect(getCopyToClipboardValue(0, 'Copy')).toMatchSnapshot('Kotlin: build.gradle.kts'); + expect(getCopyToClipboardValue(1, 'Copy')).toMatchSnapshot('Gradle: gitlab-ci.yml'); // .NET await user.click(ui.dotnetBuildButton.get()); - expect(getCopyToClipboardValue(1)).toMatchSnapshot('.NET: gitlab-ci.yml'); + expect(getCopyToClipboardValue(0, 'Copy')).toMatchSnapshot('.NET: gitlab-ci.yml'); // Other await user.click(ui.otherBuildButton.get()); - expect(getCopyToClipboardValue(1)).toMatchSnapshot('Other: sonar-project.properties'); - expect(getCopyToClipboardValue(3)).toMatchSnapshot('Other: gitlab-ci.yml'); + expect(getCopyToClipboardValue(0, 'Copy')).toMatchSnapshot('Other: sonar-project.properties'); + expect(getCopyToClipboardValue(1, 'Copy')).toMatchSnapshot('Other: gitlab-ci.yml'); - await user.click(ui.finishTutorialButton.get()); expect(ui.allSetSentence.get()).toBeInTheDocument(); }); @@ -99,7 +99,7 @@ it('should generate/delete a new token or use existing one', async () => { // Generate token await user.click(ui.genTokenDialogButton.get()); await user.click(ui.generateTokenButton.get()); - expect(getCopyToClipboardValue(3)).toEqual('generatedtoken2'); + expect(getCopyToClipboardValue()).toEqual('generatedtoken2'); // Revoke current token and create new one await user.click(ui.deleteTokenButton.get()); @@ -107,25 +107,10 @@ it('should generate/delete a new token or use existing one', async () => { await selectEvent.select(ui.expiresInSelect.get(), 'users.tokens.expiration.365'); await user.click(ui.generateTokenButton.get()); expect(ui.tokenValue.get()).toBeInTheDocument(); - await user.click(ui.continueButton.getAll()[1]); + await user.click(ui.continueButton.getAll()[0]); expect(ui.tokenValue.query()).not.toBeInTheDocument(); }); -it('navigates between steps', async () => { - const user = userEvent.setup(); - renderGitLabTutorial(); - - await user.click(await ui.continueButton.find()); - await user.click(ui.mavenBuildButton.get()); - await user.click(ui.finishTutorialButton.get()); - expect(ui.allSetSentence.get()).toBeInTheDocument(); - - await user.click(ui.ymlFileStepTitle.get()); - expect(ui.finishTutorialButton.get()).toBeInTheDocument(); - await user.click(ui.secretsStepTitle.get()); - expect(ui.continueButton.get()).toBeInTheDocument(); -}); - function renderGitLabTutorial( overrides: Partial = {}, { languages = { c: mockLanguage({ key: 'c' }) } }: RenderContext = {} diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/commands/PipeCommand.tsx b/server/sonar-web/src/main/js/components/tutorials/gitlabci/commands/PipeCommand.tsx index 542818a2f35..bf6143cebc0 100644 --- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/commands/PipeCommand.tsx +++ b/server/sonar-web/src/main/js/components/tutorials/gitlabci/commands/PipeCommand.tsx @@ -18,8 +18,8 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ +import { CodeSnippet } from 'design-system'; import * as React from 'react'; -import CodeSnippet from '../../../common/CodeSnippet'; import { BuildTools } from '../../types'; export interface PipeCommandProps { @@ -102,5 +102,5 @@ sonarqube-vulnerability-report: - sonarqube-check `; - return ; + return ; } 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 ab12969f863..4ca949a3f65 100644 --- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties +++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties @@ -4104,7 +4104,7 @@ onboarding.mode.help.otherci=SonarQube integrates with your workflow no matter w onboarding.tutorial.with.yaml.gradle=Update your {groovy} or {kotlin} file with the {sq} plugin and its configuration: - +onboarding.tutorial.with.bitbucket_ci.title=Analyze your project with Bitbucket CI onboarding.tutorial.with.bitbucket_pipelines.variables.title=Create repository variables onboarding.tutorial.with.bitbucket_pipelines.yaml.title=Create your pipelines builds configuration onboarding.tutorial.with.bitbucket_pipelines.variables.intro=In your Bitbucket repository, go to {repository_variables} and create two new variables: @@ -4116,6 +4116,7 @@ onboarding.tutorial.with.bitbucket_pipelines.variables.add.sentence.add=Add onboarding.tutorial.with.bitbucket_pipelines.variables.secured.sentence=Make sure {secured} is check. onboarding.tutorial.with.bitbucket_pipelines.variables.secured.sentence.secured=Secured +onboarding.tutorial.with.github_ci.title=Analyze your project with GitHub CI onboarding.tutorial.with.github_action.create_secret.title=Create GitHub Secrets onboarding.tutorial.with.github_action.secret.intro=In your GitHub repository, go to {settings_secret} and create two new secrets: onboarding.tutorial.with.github_action.secret.intro.link=Settings > Secrets -- 2.39.5