import styled from '@emotion/styled';
import tw from 'twin.macro';
-export const UnorderedList = styled.ul`
- list-style: none;
+export const UnorderedList = styled.ul<{ ticks?: boolean }>`
+ list-style: ${({ ticks }) => (ticks ? 'disc' : 'none')};
${tw`sw-mt-4`}
${tw`sw-pl-0`}
export * from './TreeMapRect';
export * from './TutorialStep';
export * from './TutorialStepList';
+export * from './UnorderedList';
+export * from './UnorderedListItem';
export * from './buttons';
export { ClipboardIconButton } from './clipboard';
export * from './code-line/LineCoverage';
* 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 { Button } from '../../../components/controls/buttons';
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 FinishButton from '../components/FinishButton';
-import Step from '../components/Step';
+import AllSet from '../components/AllSet';
import BranchAnalysisStepContent from './BranchAnalysisStepContent';
import ExtensionInstallationStepContent from './ExtensionInstallationStepContent';
import ServiceEndpointStepContent from './ServiceEndpointStepContent';
}
export enum Steps {
- ExtensionInstallation,
- ServiceEndpoint,
- BranchAnalysis,
- AllSet,
-}
-
-interface Step {
- step: Steps;
- content: JSX.Element;
- checkValidity?: boolean;
+ ExtensionInstallation = 'ExtensionInstallation',
+ ServiceEndpoint = 'ServiceEndpoint',
+ BranchAnalysis = 'BranchAnalysis',
}
export default function AzurePipelinesTutorial(props: AzurePipelinesTutorialProps) {
const { alm, baseUrl, component, currentUser, willRefreshAutomatically } = props;
-
- const [currentStep, setCurrentStep] = React.useState(Steps.ExtensionInstallation);
- const [isCurrentStepValid, setIsCurrentStepValid] = React.useState(false);
-
- const steps: Array<Step> = [
- { step: Steps.ExtensionInstallation, content: <ExtensionInstallationStepContent /> },
- {
- step: Steps.ServiceEndpoint,
- content: (
- <ServiceEndpointStepContent
- baseUrl={baseUrl}
- component={component}
- currentUser={currentUser}
- />
- ),
- },
- {
- step: Steps.BranchAnalysis,
- content: (
- <BranchAnalysisStepContent
- component={component}
- onStepValidationChange={(isValid) => setIsCurrentStepValid(isValid)}
- />
- ),
- checkValidity: true,
- },
- ];
-
- const switchCurrentStep = (step: Steps) => {
- setCurrentStep(step);
- setIsCurrentStepValid(false);
- };
-
- const canContinue = (step: Step) => !step.checkValidity || isCurrentStepValid;
+ const [done, setDone] = React.useState<boolean>(false);
return (
<>
- <div className="page-header big-spacer-bottom">
- <h2 className="page-title">
- {translate('onboarding.tutorial.with.azure_pipelines.title')}
- </h2>
- </div>
+ <Title>{translate('onboarding.tutorial.with.azure_pipelines.title')}</Title>
- {steps.map((step, i) => (
- <Step
- key={step.step}
- stepNumber={i + 1}
- stepTitle={translate(
- `onboarding.tutorial.with.azure_pipelines.${Steps[step.step]}.title`
+ <TutorialStepList>
+ <TutorialStep
+ title={translate(
+ `onboarding.tutorial.with.azure_pipelines.${Steps.ExtensionInstallation}.title`
)}
- open={step.step === currentStep}
- finished={step.step < currentStep}
- onOpen={() => switchCurrentStep(step.step)}
- renderForm={() => (
- <div className="boxed-group-inner">
- <div>{step.content}</div>
- {canContinue(step) &&
- (step.step === Steps.BranchAnalysis ? (
- <FinishButton onClick={() => switchCurrentStep(step.step + 1)} />
- ) : (
- <Button
- className="big-spacer-top spacer-bottom"
- onClick={() => switchCurrentStep(step.step + 1)}
- >
- {translate('continue')}
- </Button>
- ))}
- </div>
+ >
+ <ExtensionInstallationStepContent />
+ </TutorialStep>
+
+ <TutorialStep
+ title={translate(
+ `onboarding.tutorial.with.azure_pipelines.${Steps.ServiceEndpoint}.title`
)}
- />
- ))}
- <AllSetStep
- alm={alm || AlmKeys.Azure}
- stepNumber={4}
- open={currentStep === Steps.AllSet}
- willRefreshAutomatically={willRefreshAutomatically}
- />
+ >
+ <ServiceEndpointStepContent
+ baseUrl={baseUrl}
+ component={component}
+ currentUser={currentUser}
+ />
+ </TutorialStep>
+
+ <TutorialStep
+ title={translate(
+ `onboarding.tutorial.with.azure_pipelines.${Steps.BranchAnalysis}.title`
+ )}
+ >
+ <BranchAnalysisStepContent component={component} onDone={setDone} />
+ </TutorialStep>
+
+ {done && (
+ <>
+ <BasicSeparator className="sw-my-10" />
+ <AllSet
+ alm={alm ?? AlmKeys.Azure}
+ willRefreshAutomatically={willRefreshAutomatically}
+ />
+ </>
+ )}
+ </TutorialStepList>
</>
);
}
export interface BranchesAnalysisStepProps {
languages: Languages;
component: Component;
-
- onStepValidationChange: (isValid: boolean) => void;
+ onDone: (done: boolean) => void;
}
const BUILD_TOOLS_ORDERED: Array<BuildTools> = [
];
export function BranchAnalysisStepContent(props: BranchesAnalysisStepProps) {
- const { component, onStepValidationChange, languages } = props;
+ const { component, languages } = props;
const [buildTechnology, setBuildTechnology] = React.useState<BuildTools | undefined>();
const buildToolsList = languages['c']
options={buildToolsList}
/>
<AnalysisCommand
- onStepValidationChange={onStepValidationChange}
+ onStepValidationChange={props.onDone}
buildTool={buildTechnology}
projectKey={component.key}
projectName={component.name}
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
+import { Link } from 'design-system';
import * as React from 'react';
import { FormattedMessage } from 'react-intl';
import { translate } from '../../../helpers/l10n';
-import Link from '../../common/Link';
export default function ExtensionInstallationStepContent() {
return (
id="onboarding.tutorial.with.azure_pipelines.ExtensionInstallation.sentence"
values={{
link: (
- <Link
- to="https://marketplace.visualstudio.com/items?itemName=SonarSource.sonarqube"
- target="_blank"
- >
+ <Link to="https://marketplace.visualstudio.com/items?itemName=SonarSource.sonarqube">
{translate(
'onboarding.tutorial.with.azure_pipelines.ExtensionInstallation.sentence.link'
)}
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
+import { NumberedListItem, UnorderedList, UnorderedListItem } from 'design-system';
import * as React from 'react';
import { FormattedMessage } from 'react-intl';
import { translate } from '../../../helpers/l10n';
'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java_installer.sentence'
)}
values={{
- field: <strong>{field}</strong>,
- value: <strong>{value}</strong>,
+ field: <b className="sw-font-semibold">{field}</b>,
+ value: <b className="sw-font-semibold">{value}</b>,
}}
/>
);
export default function JavaToolInstallation() {
return (
- <li>
+ <NumberedListItem>
{translate('onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java_installer.title')}
- <ul className="list-styled list-alpha">
- <li>
+ <UnorderedList ticks className="sw-ml-12">
+ <UnorderedListItem>
{renderSentenceWithFieldAndValue({
field: translate(
'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java_installer.java_version'
{translate(
'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java_installer.or_higher'
)}
- </li>
- <li>
+ </UnorderedListItem>
+ <UnorderedListItem>
{renderSentenceWithFieldAndValue({
field: translate(
'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java_installer.java_architecture'
),
value: 'x64',
})}
- </li>
- <li>
+ </UnorderedListItem>
+ <UnorderedListItem>
{renderSentenceWithFieldAndValue({
field: translate(
'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java_installer.java_source'
'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java_installer.pre-installed'
),
})}
- </li>
- </ul>
- </li>
+ </UnorderedListItem>
+ </UnorderedList>
+ </NumberedListItem>
);
}
* 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,
+ NumberedList,
+ NumberedListItem,
+} 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 { TokenType } from '../../../types/token';
import { Component } from '../../../types/types';
import { LoggedInUser } from '../../../types/users';
import EditTokenModal from '../components/EditTokenModal';
+import { InlineSnippet } from '../components/InlineSnippet';
import SentenceWithHighlights from '../components/SentenceWithHighlights';
export interface ServiceEndpointStepProps {
return (
<>
- <ol className="list-styled">
- <li>
+ <NumberedList>
+ <NumberedListItem>
<SentenceWithHighlights
translationKey="onboarding.tutorial.with.azure_pipelines.ServiceEndpoint.step1"
highlightKeys={['menu']}
/>
- </li>
- <li>
+ </NumberedListItem>
+ <NumberedListItem>
<SentenceWithHighlights
translationKey="onboarding.tutorial.with.azure_pipelines.ServiceEndpoint.step2"
highlightKeys={['type']}
/>
- </li>
- <li>
+ </NumberedListItem>
+ <NumberedListItem className="sw-flex sw-items-center">
<FormattedMessage
defaultMessage={translate(
'onboarding.tutorial.with.azure_pipelines.ServiceEndpoint.step3.sentence'
)}
id="onboarding.tutorial.with.azure_pipelines.ServiceEndpoint.step3.sentence"
values={{
- url: <code className="rule">{baseUrl}</code>,
- button: <ClipboardIconButton copyValue={baseUrl} />,
+ url: (
+ <span className="sw-ml-1">
+ <InlineSnippet snippet={baseUrl} />
+ </span>
+ ),
+ button: <ClipboardIconButton className="sw-ml-2" copyValue={baseUrl} />,
}}
/>
- </li>
- <li>
+ </NumberedListItem>
+ <NumberedListItem>
<span>
{translate('onboarding.tutorial.with.azure_pipelines.ServiceEndpoint.step4.sentence')}:
</span>
- <Button className="spacer-left" onClick={() => toggleModal(true)}>
+ <ButtonSecondary className="sw-ml-2" onClick={() => toggleModal(true)}>
{translate('onboarding.token.generate.long')}
- </Button>
- </li>
- <li>
+ </ButtonSecondary>
+ </NumberedListItem>
+ <NumberedListItem>
{translate('onboarding.tutorial.with.azure_pipelines.ServiceEndpoint.step5.sentence')}
- </li>
- <li>
+ </NumberedListItem>
+ <NumberedListItem>
{translate('onboarding.tutorial.with.azure_pipelines.ServiceEndpoint.step6.sentence')}
- </li>
- </ol>
+ </NumberedListItem>
+ </NumberedList>
{isModalVisible && (
<EditTokenModal
tokenMock.reset();
});
-it('should render correctly and allow navigating between the different steps', async () => {
+it('should render correctly and allow token generation', async () => {
renderAzurePipelinesTutorial();
const user = userEvent.setup();
//// Default step.
assertDefaultStepIsCorrectlyRendered();
- // Continue.
- await goToNextStep(user);
-
//// Token step.
assertServiceEndpointStepIsCorrectlyRendered();
).toBeInTheDocument();
await clickButton(user, 'continue', modal);
- // Continue.
- await goToNextStep(user);
-
//// Analysis step: .NET
await user.click(getTutorialBuildButtons().dotnetBuildButton.get());
assertDotNetStepIsCorrectlyRendered();
assertOtherStepIsCorrectlyRendered();
//// Finish tutorial
- await clickButton(user, 'tutorials.finish');
assertFinishStepIsCorrectlyRendered();
});
-it('allows to navigate back to a previous step', async () => {
- renderAzurePipelinesTutorial();
- const user = userEvent.setup();
-
- // No clickable steps.
- expect(
- screen.queryByRole('button', {
- name: 'onboarding.tutorial.with.azure_pipelines.ExtensionInstallation.title',
- })
- ).not.toBeInTheDocument();
-
- // Go to the next steps.
- await goToNextStep(user);
- await goToNextStep(user);
-
- // The first 2 steps become clickable.
- expect(
- screen.getByRole('button', {
- name: 'onboarding.tutorial.with.azure_pipelines.ExtensionInstallation.title',
- })
- ).toBeInTheDocument();
- expect(
- screen.getByRole('button', {
- name: 'onboarding.tutorial.with.azure_pipelines.ServiceEndpoint.title',
- })
- ).toBeInTheDocument();
-
- // Navigate back to the first step.
- await clickButton(user, 'onboarding.tutorial.with.azure_pipelines.ExtensionInstallation.title');
-
- // No more clickable steps.
- expect(
- screen.queryByRole('button', {
- name: 'onboarding.tutorial.with.azure_pipelines.ExtensionInstallation.title',
- })
- ).not.toBeInTheDocument();
-});
-
-it('should not offer CFamily analysis if the language is not available', async () => {
+it('should not offer CFamily analysis if the language is not available', () => {
renderAzurePipelinesTutorial(undefined, { languages: {} });
- const user = userEvent.setup();
-
- // Go to the analysis step.
- await goToNextStep(user);
- await goToNextStep(user);
expect(getTutorialBuildButtons().dotnetBuildButton.get()).toBeInTheDocument();
expect(getTutorialBuildButtons().cFamilyBuildButton.query()).not.toBeInTheDocument();
name: 'onboarding.tutorial.with.azure_pipelines.ServiceEndpoint.title',
})
).toBeInTheDocument();
- expect(getCopyToClipboardValue()).toBe('https://sonarqube.example.com/');
+ expect(getCopyToClipboardValue(0, 'Copy to clipboard')).toBe('https://sonarqube.example.com/');
expect(
screen.getByRole('button', { name: 'onboarding.token.generate.long' })
).toBeInTheDocument();
name: 'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.title',
})
).toBeInTheDocument();
- expect(getCopyToClipboardValue()).toBe('foo');
+
+ expect(getCopyToClipboardValue(1, 'Copy to clipboard')).toBe('foo');
}
function assertMavenStepIsCorrectlyRendered() {
- expect(getCopyToClipboardValue()).toMatchSnapshot('maven, copy additional properties');
+ expect(getCopyToClipboardValue(0, 'Copy')).toMatchSnapshot('maven, copy additional properties');
}
function assertGradleStepIsCorrectlyRendered() {
- expect(getCopyToClipboardValue()).toMatchSnapshot('gradle, copy additional properties');
+ expect(getCopyToClipboardValue(0, 'Copy')).toMatchSnapshot('gradle, copy additional properties');
}
function assertCFamilyStepIsCorrectlyRendered(os: string) {
- expect(getCopyToClipboardValue(0)).toMatchSnapshot(`cfamily ${os}, copy shell script`);
- expect(getCopyToClipboardValue(1)).toBe('foo');
- expect(getCopyToClipboardValue(2)).toMatchSnapshot(`cfamily ${os}, copy additional properties`);
- expect(getCopyToClipboardValue(3)).toMatchSnapshot(`cfamily ${os}, copy build-wrapper command`);
+ expect(getCopyToClipboardValue(0, 'Copy')).toMatchSnapshot(`cfamily ${os}, copy shell script`);
+ expect(getCopyToClipboardValue(1, 'Copy to clipboard')).toBe('foo');
+ expect(getCopyToClipboardValue(2, 'Copy to clipboard')).toMatchSnapshot(
+ `cfamily ${os}, copy additional properties`
+ );
+ expect(getCopyToClipboardValue(1, 'Copy')).toMatchSnapshot(
+ `cfamily ${os}, copy build-wrapper command`
+ );
}
function assertOtherStepIsCorrectlyRendered() {
- expect(getCopyToClipboardValue()).toBe('foo');
+ expect(getCopyToClipboardValue(1, 'Copy to clipboard')).toBe('foo');
}
function assertFinishStepIsCorrectlyRendered() {
await user.click(screen.getByRole('button', { name }));
}
}
-
-async function goToNextStep(user: UserEvent) {
- await clickButton(user, 'continue');
-}
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`should render correctly and allow navigating between the different steps: cfamily linux, copy additional properties 1`] = `"sonar.cfamily.build-wrapper-output=bw-output"`;
+exports[`should render correctly and allow token generation: cfamily linux, copy additional properties 1`] = `"sonar.cfamily.build-wrapper-output=bw-output"`;
-exports[`should render correctly and allow navigating between the different steps: cfamily linux, copy build-wrapper command 1`] = `"./build-wrapper-linux-x86/build-wrapper-linux-x86-64 --out-dir bw-output <your build command here>"`;
+exports[`should render correctly and allow token generation: cfamily linux, copy build-wrapper command 1`] = `"./build-wrapper-linux-x86/build-wrapper-linux-x86-64 --out-dir bw-output <your build command here>"`;
-exports[`should render correctly and allow navigating between the different steps: cfamily linux, copy shell script 1`] = `
+exports[`should render correctly and allow token generation: cfamily linux, copy shell script 1`] = `
"curl 'http://localhost/static/cpp/build-wrapper-linux-x86.zip' --output build-wrapper.zip
unzip build-wrapper.zip"
`;
-exports[`should render correctly and allow navigating between the different steps: cfamily mac, copy additional properties 1`] = `"sonar.cfamily.build-wrapper-output=bw-output"`;
+exports[`should render correctly and allow token generation: cfamily mac, copy additional properties 1`] = `"sonar.cfamily.build-wrapper-output=bw-output"`;
-exports[`should render correctly and allow navigating between the different steps: cfamily mac, copy build-wrapper command 1`] = `"./build-wrapper-macos-x86/build-wrapper-macos-x86 --out-dir bw-output <your build command here>"`;
+exports[`should render correctly and allow token generation: cfamily mac, copy build-wrapper command 1`] = `"./build-wrapper-macos-x86/build-wrapper-macos-x86 --out-dir bw-output <your build command here>"`;
-exports[`should render correctly and allow navigating between the different steps: cfamily mac, copy shell script 1`] = `
+exports[`should render correctly and allow token generation: cfamily mac, copy shell script 1`] = `
"curl 'http://localhost/static/cpp/build-wrapper-macosx-x86.zip' --output build-wrapper.zip
unzip build-wrapper.zip"
`;
-exports[`should render correctly and allow navigating between the different steps: cfamily win, copy additional properties 1`] = `"sonar.cfamily.build-wrapper-output=bw-output"`;
+exports[`should render correctly and allow token generation: cfamily win, copy additional properties 1`] = `"sonar.cfamily.build-wrapper-output=bw-output"`;
-exports[`should render correctly and allow navigating between the different steps: cfamily win, copy build-wrapper command 1`] = `"build-wrapper-win-x86/build-wrapper-win-x86-64.exe --out-dir bw-output <your build command here>"`;
+exports[`should render correctly and allow token generation: cfamily win, copy build-wrapper command 1`] = `"build-wrapper-win-x86/build-wrapper-win-x86-64.exe --out-dir bw-output <your build command here>"`;
-exports[`should render correctly and allow navigating between the different steps: cfamily win, copy shell script 1`] = `
+exports[`should render correctly and allow token generation: cfamily win, copy shell script 1`] = `
"Invoke-WebRequest -Uri 'http://localhost/static/cpp/build-wrapper-win-x86.zip' -OutFile 'build-wrapper.zip'
Expand-Archive -Path 'build-wrapper.zip' -DestinationPath '.'"
`;
-exports[`should render correctly and allow navigating between the different steps: gradle, copy additional properties 1`] = `
+exports[`should render correctly and allow token generation: gradle, copy additional properties 1`] = `
"# Additional properties that will be passed to the scanner,
# Put one key=value per line, example:
# sonar.exclusions=**/*.bin
"
`;
-exports[`should render correctly and allow navigating between the different steps: maven, copy additional properties 1`] = `
+exports[`should render correctly and allow token generation: maven, copy additional properties 1`] = `
"# Additional properties that will be passed to the scanner,
# Put one key=value per line, example:
# sonar.exclusions=**/*.bin
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
+import { FlagMessage, Link } from 'design-system';
import * as React from 'react';
import { FormattedMessage } from 'react-intl';
-import { Alert } from '../../../../components/ui/Alert';
import { ALM_DOCUMENTATION_PATHS } from '../../../../helpers/constants';
+import { useDocUrl } from '../../../../helpers/docs';
import { translate } from '../../../../helpers/l10n';
import { AlmKeys } from '../../../../types/alm-settings';
-import DocLink from '../../../common/DocLink';
export default function AlertClassicEditor() {
+ const docUrl = useDocUrl();
+
return (
- <Alert variant="info" className="big-spacer-top">
- <FormattedMessage
- id="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.info"
- defaultMessage={translate('onboarding.tutorial.with.azure_pipelines.BranchAnalysis.info')}
- values={{
- doc_link: (
- <DocLink to={ALM_DOCUMENTATION_PATHS[AlmKeys.Azure]}>
- {translate('onboarding.tutorial.with.azure_pipelines.BranchAnalysis.info.doc_link')}
- </DocLink>
- ),
- }}
- />
- </Alert>
+ <FlagMessage variant="info" className="sw-mt-4">
+ <span>
+ <FormattedMessage
+ id="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.info"
+ defaultMessage={translate('onboarding.tutorial.with.azure_pipelines.BranchAnalysis.info')}
+ values={{
+ doc_link: (
+ <Link to={docUrl(ALM_DOCUMENTATION_PATHS[AlmKeys.Azure])}>
+ {translate('onboarding.tutorial.with.azure_pipelines.BranchAnalysis.info.doc_link')}
+ </Link>
+ ),
+ }}
+ />
+ </span>
+ </FlagMessage>
);
}
}
export default function AnalysisCommand(props: AnalysisCommandProps) {
- const { buildTool, projectKey, projectName } = props;
+ const { buildTool, onStepValidationChange, projectKey, projectName } = props;
React.useEffect(() => {
if (buildTool && buildTool !== BuildTools.CFamily) {
- props.onStepValidationChange(true);
+ onStepValidationChange(true);
}
- }, [buildTool, props.onStepValidationChange]);
+ }, [buildTool, onStepValidationChange]);
if (!buildTool) {
return null;
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
+import {
+ CodeSnippet,
+ NumberedList,
+ NumberedListItem,
+ UnorderedList,
+ UnorderedListItem,
+} from 'design-system';
import * as React from 'react';
import { translate } from '../../../../helpers/l10n';
import { getHostUrl } from '../../../../helpers/urls';
-import CodeSnippet from '../../../common/CodeSnippet';
import { CompilationInfo } from '../../components/CompilationInfo';
import GithubCFamilyExampleRepositories from '../../components/GithubCFamilyExampleRepositories';
import RenderOptions from '../../components/RenderOptions';
};
export default function ClangGCC(props: ClangGCCProps) {
- const { projectKey } = props;
+ const { projectKey, onStepValidationChange } = props;
const [os, setOs] = React.useState<OSs | undefined>();
const host = getHostUrl();
React.useEffect(() => {
if (os) {
- props.onStepValidationChange(true);
+ onStepValidationChange(true);
} else {
- props.onStepValidationChange(false);
+ onStepValidationChange(false);
}
- }, [os, props.onStepValidationChange]);
+ }, [os, onStepValidationChange]);
const handlOsChange = (value: OSs) => {
setOs(value);
return (
<>
- <span className="big-spacer-top display-block">
- {translate('onboarding.tutorial.with.azure_pipelines.os')}
- </span>
+ <div className="sw-mt-4">{translate('onboarding.tutorial.with.azure_pipelines.os')}</div>
<RenderOptions
label={translate('onboarding.tutorial.with.azure_pipelines.os')}
checked={os}
{os && (
<>
<GithubCFamilyExampleRepositories
- className="big-spacer-top abs-width-600"
+ className="sw-mt-4 sw-w-abs-600"
os={os}
ci={TutorialModes.AzurePipelines}
/>
<AlertClassicEditor />
- <ol className="list-styled big-spacer-top">
- <li>
+ <NumberedList className="sw-mt-4">
+ <NumberedListItem>
<SentenceWithHighlights
translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.build_wrapper.ccpp"
highlightPrefixKeys="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare"
highlightKeys={['pipeline']}
/>
- <ul className="list-styled list-alpha spacer-top">
- <li>
+ <UnorderedList ticks className="sw-ml-12 sw-mt-2">
+ <UnorderedListItem>
<SentenceWithHighlights
translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.build_wrapper.ccpp.script"
highlightPrefixKeys={codeSnippetDownload[os].highlightScriptKey}
highlightKeys={['task', 'inline']}
/>
- <CodeSnippet snippet={codeSnippetDownload[os].script} />
- </li>
- </ul>
- </li>
+ <CodeSnippet
+ className="sw-px-4 sw-py-6"
+ snippet={codeSnippetDownload[os].script}
+ />
+ </UnorderedListItem>
+ </UnorderedList>
+ </NumberedListItem>
- <li>
+ <NumberedListItem>
<SentenceWithHighlights
translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare.ccpp"
highlightPrefixKeys="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare"
kind={PrepareType.StandAlone}
projectKey={projectKey}
/>
- </li>
+ </NumberedListItem>
- <li>
+ <NumberedListItem>
<SentenceWithHighlights
translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.build.ccpp"
highlightKeys={['task']}
/>
- <ul className="list-styled list-alpha spacer-top">
- <li>
+ <UnorderedList className="sw-mt-2">
+ <UnorderedListItem>
<SentenceWithHighlights
translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.build_script.ccpp"
highlightKeys={['build_wrapper']}
/>
- <CodeSnippet snippet={codeSnippetDownload[os].scriptBuild} />
+ <CodeSnippet
+ className="sw-px-4 sw-py-6"
+ isOneLine
+ snippet={codeSnippetDownload[os].scriptBuild}
+ />
<CompilationInfo />
- </li>
- </ul>
- </li>
+ </UnorderedListItem>
+ </UnorderedList>
+ </NumberedListItem>
- <li>
+ <NumberedListItem>
<SentenceWithHighlights
translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run.ccpp"
highlightPrefixKeys="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run"
highlightKeys={['task', 'after']}
/>
- </li>
+ </NumberedListItem>
+
<PublishSteps />
- </ol>
+ </NumberedList>
</>
)}
</>
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
+import { NumberedList, NumberedListItem } from 'design-system';
import * as React from 'react';
import SentenceWithHighlights from '../../components/SentenceWithHighlights';
import { BuildTools } from '../../types';
return (
<>
<AlertClassicEditor />
- <ol className="list-styled big-spacer-top">
- <li>
+ <NumberedList className="sw-mt-4">
+ <NumberedListItem>
<SentenceWithHighlights
translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare"
highlightKeys={['pipeline', 'task', 'before']}
kind={PrepareType.MSBuild}
projectKey={projectKey}
/>
- </li>
- <li>
+ </NumberedListItem>
+ <NumberedListItem>
<SentenceWithHighlights
translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run"
highlightKeys={['task', 'after']}
/>
- </li>
+ </NumberedListItem>
<PublishSteps />
- </ol>
+ </NumberedList>
</>
);
}
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
+import { NumberedList, NumberedListItem, UnorderedList, UnorderedListItem } from 'design-system';
import * as React from 'react';
import { translate, translateWithParameters } from '../../../../helpers/l10n';
import SentenceWithHighlights from '../../components/SentenceWithHighlights';
return (
<>
<AlertClassicEditor />
- <ol className="list-styled big-spacer-top">
- <li>
+ <NumberedList className="sw-mt-4">
+ <NumberedListItem>
<SentenceWithHighlights
translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare"
highlightKeys={['pipeline', 'task', 'before']}
projectKey={projectKey}
projectName={projectName}
/>
- </li>
+ </NumberedListItem>
<JavaToolInstallation />
- <li>
+ <NumberedListItem>
{translateWithParameters(
'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java',
translate('onboarding.build', BuildTools.Gradle)
)}
- <ul className="list-styled list-alpha big-spacer-bottom">
- <li>
+ <UnorderedList ticks className="sw-ml-12 sw-mb-4">
+ <UnorderedListItem>
<SentenceWithHighlights
translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java.settings"
highlightKeys={['section', 'option']}
/>
- </li>
- </ul>
- </li>
+ </UnorderedListItem>
+ </UnorderedList>
+ </NumberedListItem>
<PublishSteps />
- </ol>
+ </NumberedList>
</>
);
}
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
+import { NumberedList, NumberedListItem, UnorderedList, UnorderedListItem } from 'design-system';
import * as React from 'react';
import { translate, translateWithParameters } from '../../../../helpers/l10n';
import SentenceWithHighlights from '../../components/SentenceWithHighlights';
return (
<>
<AlertClassicEditor />
- <ol className="list-styled big-spacer-top">
- <li>
+ <NumberedList className="sw-mt-4">
+ <NumberedListItem>
<SentenceWithHighlights
translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare"
highlightKeys={['pipeline', 'task', 'before']}
projectKey={projectKey}
projectName={projectName}
/>
- </li>
+ </NumberedListItem>
<JavaToolInstallation />
- <li>
+ <NumberedListItem>
{translateWithParameters(
'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java',
translate('onboarding.build', BuildTools.Maven)
)}
- <ul className="list-styled list-alpha big-spacer-bottom">
- <li>
+ <UnorderedList ticks className="sw-ml-12 sw-mb-4">
+ <UnorderedListItem>
<SentenceWithHighlights
translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java.settings"
highlightKeys={['section', 'option']}
/>
- </li>
- </ul>
- </li>
+ </UnorderedListItem>
+ </UnorderedList>
+ </NumberedListItem>
<PublishSteps />
- </ol>
+ </NumberedList>
</>
);
}
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
+import { NumberedList, NumberedListItem } from 'design-system';
import * as React from 'react';
import SentenceWithHighlights from '../../components/SentenceWithHighlights';
import { BuildTools } from '../../types';
return (
<>
<AlertClassicEditor />
- <ol className="list-styled big-spacer-top">
- <li>
+ <NumberedList className="sw-mt-4">
+ <NumberedListItem>
<SentenceWithHighlights
translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare"
highlightKeys={['pipeline', 'task', 'before']}
kind={PrepareType.StandAlone}
projectKey={projectKey}
/>
- </li>
+ </NumberedListItem>
- <li>
+ <NumberedListItem>
<SentenceWithHighlights
translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run"
highlightKeys={['task', 'after']}
/>
- </li>
+ </NumberedListItem>
<PublishSteps />
- </ol>
+ </NumberedList>
</>
);
}
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
+import { ClipboardIconButton, CodeSnippet, UnorderedList, UnorderedListItem } from 'design-system';
import * as React from 'react';
import { FormattedMessage } from 'react-intl';
-import { ClipboardIconButton } from '../../../../components/controls/clipboard';
import { translate } from '../../../../helpers/l10n';
-import CodeSnippet from '../../../common/CodeSnippet';
+import { InlineSnippet } from '../../components/InlineSnippet';
import SentenceWithHighlights from '../../components/SentenceWithHighlights';
import { BuildTools } from '../../types';
`;
return (
- <ul className="list-styled list-alpha spacer-top">
- <li>
+ <UnorderedList ticks className="sw-ml-12 sw-my-2">
+ <UnorderedListItem>
<SentenceWithHighlights
translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare.endpoint"
highlightKeys={['endpoint']}
/>
- </li>
- <li>
+ </UnorderedListItem>
+ <UnorderedListItem>
<FormattedMessage
id="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare.run_analysis"
defaultMessage={translate(
)}
values={{
section: (
- <strong>
+ <b className="sw-font-semibold">
{translate(
'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare.run_analysis.section'
)}
- </strong>
+ </b>
),
run_analysis_value: (
- <strong>
+ <b className="sw-font-semibold">
{translate(
'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare.run_analysis.values',
buildTool
)}
- </strong>
+ </b>
),
}}
/>
- </li>
+ </UnorderedListItem>
{kind === PrepareType.StandAlone && (
<>
- <li>
+ <UnorderedListItem>
<SentenceWithHighlights
translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.manual"
highlightKeys={['mode']}
/>
- </li>
+ </UnorderedListItem>
- <li>
- <FormattedMessage
- id="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run.key.sentence"
- defaultMessage={translate(
- 'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run.key.sentence'
- )}
- values={{
- project_key: (
- <b>
- {translate(
- 'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run.key.sentence.project_key'
- )}
- </b>
- ),
- key: <code className="rule">{projectKey}</code>,
- button: <ClipboardIconButton copyValue={projectKey} />,
- }}
- />
- </li>
- {buildTool === BuildTools.CFamily && (
- <li>
+ <UnorderedListItem>
+ <span className="sw-flex sw-items-center">
<FormattedMessage
- id="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare_additional.ccpp"
+ id="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run.key.sentence"
defaultMessage={translate(
- 'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare_additional.ccpp'
+ 'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run.key.sentence'
)}
values={{
- advanced: (
- <b>
+ project_key: (
+ <b className="sw-font-semibold sw-mx-1">
{translate(
- 'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare_additional.ccpp.advanced'
+ 'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run.key.sentence.project_key'
)}
</b>
),
- additional: (
- <b>
- {translate(
- 'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare_additional.ccpp.additional'
- )}
- </b>
+ key: (
+ <span className="sw-ml-1">
+ <InlineSnippet snippet={projectKey} />
+ </span>
),
- property: <code className="rule">{ADDITIONAL_PROPERTY}</code>,
- button: <ClipboardIconButton copyValue={ADDITIONAL_PROPERTY} />,
+ button: <ClipboardIconButton className="sw-ml-2" copyValue={projectKey} />,
}}
/>
- </li>
+ </span>
+ </UnorderedListItem>
+ {buildTool === BuildTools.CFamily && (
+ <UnorderedListItem>
+ <span className="sw-flex sw-items-center sw-flex-wrap">
+ <FormattedMessage
+ id="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare_additional.ccpp"
+ defaultMessage={translate(
+ 'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare_additional.ccpp'
+ )}
+ values={{
+ advanced: (
+ <b className="sw-font-semibold sw-mx-1">
+ {translate(
+ 'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare_additional.ccpp.advanced'
+ )}
+ </b>
+ ),
+ additional: (
+ <b className="sw-font-semibold sw-mx-1">
+ {translate(
+ 'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare_additional.ccpp.additional'
+ )}
+ </b>
+ ),
+ property: (
+ <span className="sw-ml-1">
+ <InlineSnippet snippet={ADDITIONAL_PROPERTY} />
+ </span>
+ ),
+ button: (
+ <ClipboardIconButton className="sw-ml-2" copyValue={ADDITIONAL_PROPERTY} />
+ ),
+ }}
+ />
+ </span>
+ </UnorderedListItem>
)}
</>
)}
{kind === PrepareType.JavaMavenGradle && (
- <li>
+ <UnorderedListItem>
<SentenceWithHighlights
translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.advanced_properties"
highlightKeys={['section', 'properties']}
/>
:
- <CodeSnippet snippet={MAVEN_GRADLE_PROPS_SNIPPET} />
- </li>
+ <CodeSnippet
+ className="sw-p-6"
+ language="properties"
+ snippet={MAVEN_GRADLE_PROPS_SNIPPET}
+ />
+ </UnorderedListItem>
)}
{kind === PrepareType.MSBuild && (
- <li>
- <FormattedMessage
- id="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run.key.sentence"
- defaultMessage={translate(
- 'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run.key.sentence'
- )}
- values={{
- project_key: (
- <b>
- {translate(
- 'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run.key.sentence.project_key'
- )}
- </b>
- ),
- key: <code className="rule">{projectKey}</code>,
- button: <ClipboardIconButton copyValue={projectKey} />,
- }}
- />
- </li>
+ <UnorderedListItem>
+ <span className="sw-flex sw-items-center">
+ <FormattedMessage
+ id="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run.key.sentence"
+ defaultMessage={translate(
+ 'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run.key.sentence'
+ )}
+ values={{
+ project_key: (
+ <b className="sw-font-semibold sw-mx-1">
+ {translate(
+ 'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run.key.sentence.project_key'
+ )}
+ </b>
+ ),
+ key: (
+ <span className="sw-ml-1">
+ <InlineSnippet snippet={projectKey} />
+ </span>
+ ),
+ button: <ClipboardIconButton className="sw-ml-2" copyValue={projectKey} />,
+ }}
+ />
+ </span>
+ </UnorderedListItem>
)}
- </ul>
+ </UnorderedList>
);
}
* 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, FlagMessage, Link, NumberedListItem } from 'design-system';
import * as React from 'react';
import { FormattedMessage } from 'react-intl';
import withAvailableFeatures, {
WithAvailableFeaturesProps,
} from '../../../../app/components/available-features/withAvailableFeatures';
-import { Alert } from '../../../../components/ui/Alert';
import { ALM_DOCUMENTATION_PATHS } from '../../../../helpers/constants';
+import { useDocUrl } from '../../../../helpers/docs';
import { translate } from '../../../../helpers/l10n';
import { AlmKeys } from '../../../../types/alm-settings';
import { Feature } from '../../../../types/features';
-import DocLink from '../../../common/DocLink';
import SentenceWithHighlights from '../../components/SentenceWithHighlights';
export interface PublishStepsProps extends WithAvailableFeaturesProps {}
+
export function PublishSteps(props: PublishStepsProps) {
const branchSupportEnabled = props.hasFeature(Feature.BranchSupport);
+ const docUrl = useDocUrl();
+
return (
<>
- <li>
+ <NumberedListItem>
<SentenceWithHighlights
translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.publish_qg"
highlightKeys={['task']}
/>
- <Alert variant="info" className="spacer-top">
+ <FlagMessage variant="info" className="sw-mt-2">
{translate(
'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.publish_qg.info.sentence1'
)}
- </Alert>
- </li>
- <li>
+ </FlagMessage>
+ </NumberedListItem>
+ <NumberedListItem>
<SentenceWithHighlights
translationKey={
branchSupportEnabled
}
highlightKeys={['tab', 'continuous_integration']}
/>
- </li>
+ </NumberedListItem>
{branchSupportEnabled && (
<>
- <hr />
- <FormattedMessage
- id="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.branch_protection"
- defaultMessage={translate(
- 'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.branch_protection'
- )}
- values={{
- link: (
- <DocLink to={ALM_DOCUMENTATION_PATHS[AlmKeys.Azure]}>
- {translate(
- 'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.branch_protection.link'
- )}
- </DocLink>
- ),
- }}
- />
+ <BasicSeparator className="sw-my-4" />
+ <div>
+ <FormattedMessage
+ id="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.branch_protection"
+ defaultMessage={translate(
+ 'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.branch_protection'
+ )}
+ values={{
+ link: (
+ <Link to={docUrl(ALM_DOCUMENTATION_PATHS[AlmKeys.Azure])}>
+ {translate(
+ 'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.branch_protection.link'
+ )}
+ </Link>
+ ),
+ }}
+ />
+ </div>
</>
)}
</>
+++ /dev/null
-/*
- * SonarQube
- * Copyright (C) 2009-2023 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.
- */
-.github-cfamily-example-repositories-box {
- box-sizing: border-box;
-}
import { translate } from '../../../helpers/l10n';
import { getBaseUrl } from '../../../helpers/system';
import { OSs, TutorialModes } from '../types';
-import './GithubCFamilyExampleRepositories.css';
export interface GithubCFamilyExampleRepositoriesProps {
className?: string;
<div>
<img
alt="" // Should be ignored by screen readers
- className="spacer-right"
+ className="sw-mr-2"
height={20}
src={`${getBaseUrl()}/images/alm/github.svg`}
/>
const transhighlightPrefixKeys = highlightPrefixKeys || translationKey;
highlightKeys.forEach((key) => {
- values[key] = <strong>{translate(transhighlightPrefixKeys, 'sentence', key)}</strong>;
+ values[key] = (
+ <strong className="sw-font-semibold">
+ {translate(transhighlightPrefixKeys, 'sentence', key)}
+ </strong>
+ );
});
return (
<FormattedMessage
projects / sonarqube.git / commitdiff