*/
import styled from '@emotion/styled';
import classNames from 'classnames';
+import { escape as lodashEscape } from 'lodash';
import tw from 'twin.macro';
import { themeBorder, themeColor } from '../helpers/theme';
import { isDefined } from '../helpers/types';
<StyledClipboardButton copyValue={finalSnippet} />
);
- const renderSnippet = render ?? (wrap || isOneLine ? finalSnippet : `<pre>${finalSnippet}</pre>`);
+ const renderSnippet =
+ render ?? (wrap || isOneLine)
+ ? `<code>${lodashEscape(finalSnippet)}</code>`
+ : `<pre>${lodashEscape(finalSnippet)}</pre>`;
return (
<Wrapper
import { FCProps } from '../../types/misc';
import { CodeSnippet } from '../CodeSnippet';
-it('should show full size when multiline with no editting', () => {
+it('should show full size when multiline with no editing', () => {
const { container } = setupWithProps();
const copyButton = screen.getByRole('button', { name: 'Copy' });
expect(copyButton).toHaveStyle('top: 1.5rem');
expect(container).toMatchSnapshot();
});
-it('should show reduced size when single line with no editting', () => {
+it('should show reduced size when single line with no editing', () => {
const { container } = setupWithProps({ isOneLine: true, snippet: 'foobar' });
const copyButton = screen.getByRole('button', { name: 'Copy' });
expect(copyButton).toHaveStyle('top: 1rem');
expect(container).toMatchSnapshot();
});
+it('should highlight code content correctly', () => {
+ const { container } = setupWithProps({ snippet: '<prop>foobar<prop>' });
+ expect(container).toMatchSnapshot();
+});
+
function setupWithProps(props: Partial<FCProps<typeof CodeSnippet>> = {}) {
return renderWithContext(
<HelmetProvider>
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`should show full size when multiline with no editting 1`] = `
+exports[`should highlight code content correctly 1`] = `
+.emotion-0 {
+ background-color: rgb(252,252,253);
+ border: 1px solid rgb(225,230,243);
+ border-radius: 0.5rem;
+ position: relative;
+ margin-top: 0.5rem;
+ margin-bottom: 0.5rem;
+}
+
+.emotion-0.code-snippet-simple-oneline {
+ margin-top: 0;
+ margin-bottom: 0;
+ border-radius: 0.25rem;
+}
+
+.emotion-4 {
+ box-sizing: border-box;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ outline: none;
+ border: var(--border);
+ color: var(--color);
+ background-color: var(--background);
+ -webkit-transition: background-color 0.2s ease,outline 0.2s ease;
+ transition: background-color 0.2s ease,outline 0.2s ease;
+ display: -webkit-inline-box;
+ display: -webkit-inline-flex;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ height: 2.25rem;
+ font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
+ font-size: 0.875rem;
+ line-height: 1.25rem;
+ font-weight: 600;
+ padding-left: 1rem;
+ padding-right: 1rem;
+ padding-top: 0.5rem;
+ padding-bottom: 0.5rem;
+ border-radius: 0.5rem;
+ cursor: pointer;
+ --background: rgb(255,255,255);
+ --backgroundHover: rgb(239,242,249);
+ --color: rgb(62,67,87);
+ --focus: rgba(197,205,223,0.2);
+ --border: 1px solid rgb(197,205,223);
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
+ font-size: 0.875rem;
+ line-height: 1.25rem;
+ font-weight: 400;
+ right: 1.5rem;
+ top: 1.5rem;
+ position: absolute;
+}
+
+.emotion-4:hover,
+.emotion-4:active {
+ color: var(--color);
+ background-color: var(--backgroundHover);
+}
+
+.emotion-4:focus,
+.emotion-4:active {
+ color: var(--color);
+ outline: 4px solid var(--focus);
+}
+
+.emotion-4:disabled,
+.emotion-4:disabled:hover {
+ color: rgb(166,173,194);
+ background-color: rgb(239,242,249);
+ border: 1px solid rgb(197,205,223);
+ cursor: not-allowed;
+}
+
+.emotion-4>svg {
+ margin-right: 0.25rem;
+}
+
+.emotion-4 [disabled] {
+ pointer-events: none;
+}
+
+.emotion-4:hover,
+.emotion-4:active,
+.emotion-4:focus {
+ border-color: rgb(197,205,223);
+}
+
+.code-snippet-highlighted-oneline .emotion-4 {
+ bottom: 0.5rem;
+}
+
+.emotion-6 code {
+ font-family: Ubuntu Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
+ font-size: 0.875rem;
+ line-height: 1.125rem;
+ font-weight: 400;
+ background: rgb(252,252,253);
+ color: rgb(51,53,60);
+}
+
+.emotion-6 code.hljs {
+ padding: unset;
+}
+
+.emotion-6 .hljs-meta,
+.emotion-6 .hljs-variable {
+ color: rgb(51,53,60);
+}
+
+.emotion-6 .hljs-doctag,
+.emotion-6 .hljs-title,
+.emotion-6 .hljs-title.class_,
+.emotion-6 .hljs-title.function_ {
+ color: rgb(34,84,192);
+}
+
+.emotion-6 .hljs-comment {
+ font-family: Ubuntu Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
+ font-size: 0.875rem;
+ line-height: 1.125rem;
+ font-style: italic;
+ color: rgb(109,111,119);
+}
+
+.emotion-6 .hljs-keyword,
+.emotion-6 .hljs-tag,
+.emotion-6 .hljs-type {
+ color: rgb(152,29,150);
+}
+
+.emotion-6 .hljs-literal,
+.emotion-6 .hljs-number {
+ color: rgb(126,83,5);
+}
+
+.emotion-6 .hljs-string {
+ color: rgb(32,105,31);
+}
+
+.emotion-6 .hljs-meta .hljs-keyword {
+ color: rgb(47,103,48);
+}
+
+.emotion-6.code-wrap {
+ white-space: pre-wrap;
+ word-break: break-all;
+}
+
+.emotion-6 mark {
+ font-weight: 400;
+ padding: 0.25rem;
+ border-radius: 0.25rem;
+ background-color: rgb(197,205,223);
+ color: rgb(217,45,32);
+}
+
+<div>
+ <div
+ class="sw-code fs-mask emotion-0 emotion-1"
+ >
+ <button
+ aria-describedby="tooltip-3"
+ class="sw-select-none emotion-2 emotion-3 emotion-4 emotion-5"
+ data-clipboard-text="<prop>foobar<prop>"
+ type="button"
+ >
+ <svg
+ aria-hidden="true"
+ class="octicon octicon-copy"
+ fill="currentColor"
+ focusable="false"
+ height="16"
+ role="img"
+ style="display: inline-block; user-select: none; vertical-align: middle; overflow: visible;"
+ viewBox="0 0 16 16"
+ width="16"
+ >
+ <path
+ d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"
+ />
+ <path
+ d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"
+ />
+ </svg>
+ Copy
+ </button>
+ <span
+ class="hljs sw-overflow-auto sw-pr-24 sw-flex emotion-6 emotion-7"
+ >
+ <pre>
+ <prop>foobar<prop>
+ </pre>
+ </span>
+ </div>
+</div>
+`;
+
+exports[`should show full size when multiline with no editing 1`] = `
.emotion-0 {
background-color: rgb(252,252,253);
border: 1px solid rgb(225,230,243);
</div>
`;
-exports[`should show reduced size when single line with no editting 1`] = `
+exports[`should show reduced size when single line with no editing 1`] = `
.emotion-0 {
background-color: rgb(252,252,253);
border: 1px solid rgb(225,230,243);
<span
class="hljs sw-overflow-auto sw-pr-24 sw-flex emotion-6 emotion-7"
>
- foobar
+ <code>
+ foobar
+ </code>
</span>
</div>
</div>
defaultMessage={translate('onboarding.tutorial.env_variables')}
id="onboarding.tutorial.env_variables"
values={{
- extra: <ClipboardIconButton copyValue={baseUrl} />,
+ extra: <ClipboardIconButton copyValue={baseUrl} className="sw-ml-1" />,
field: (
<span className="sw-body-sm-highlight">
{translate('onboarding.tutorial.env_variables.field')}
<GradleBuildSelection className="sw-my-4">
{(build) => (
<CodeSnippet
- language="gradle"
+ language={build === GradleBuildDSL.Groovy ? 'groovy' : 'kotlin'}
className="sw-p-6"
snippet={buildGradleSnippet(component.key, component.name, build)}
/>
defaultMessage={fieldValueTranslation}
id="onboarding.tutorial.with.gitlab_ci.variables.step1"
values={{
- extra: <ClipboardIconButton copyValue="SONAR_TOKEN" />,
+ extra: <ClipboardIconButton copyValue="SONAR_TOKEN" className="sw-ml-1" />,
field: (
<span className="sw-body-sm-highlight">
{translate('onboarding.tutorial.with.gitlab_ci.variables.step1')}
defaultMessage={fieldValueTranslation}
id="onboarding.tutorial.with.gitlab_ci.variables.step1"
values={{
- extra: <ClipboardIconButton copyValue="SONAR_HOST_URL" />,
+ extra: <ClipboardIconButton copyValue="SONAR_HOST_URL" className="sw-ml-1" />,
field: (
<span className="sw-body-sm-highlight">
{translate('onboarding.tutorial.with.gitlab_ci.variables.step1')}
defaultMessage={fieldValueTranslation}
id="onboarding.tutorial.with.gitlab_ci.variables.step2"
values={{
- extra: <ClipboardIconButton copyValue={baseUrl} />,
+ extra: <ClipboardIconButton copyValue={baseUrl} className="sw-ml-1" />,
field: (
<span className="sw-body-sm-highlight">
{translate('onboarding.tutorial.env_variables.field')}
[BuildTools.Other]: 'sonar-project.properties',
};
+const snippetLanguageForBuildTool = {
+ [BuildTools.CFamily]: undefined,
+ [BuildTools.Gradle]: undefined,
+ [BuildTools.Maven]: 'xml',
+ [BuildTools.Other]: undefined,
+};
+
export function YmlFileStep(props: YmlFileStepProps) {
const { component, hasCLanguageFeature } = props;
{(build) => (
<CodeSnippet
className="sw-p-6"
- language="yml"
+ language="gradle"
snippet={snippetForBuildTool[buildTool](component.key, component.name, build)}
/>
)}
) : (
<CodeSnippet
className="sw-p-6"
- language="yml"
+ language={snippetLanguageForBuildTool[buildTool]}
snippet={snippetForBuildTool[buildTool](component.key, component.name)}
/>
)}
--- /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.
+ */
+import { FlagMessage, NumberedList, NumberedListItem, TutorialStep } from 'design-system';
+import * as React from 'react';
+import { translate } from '../../../helpers/l10n';
+import { Component } from '../../../types/types';
+import { withCLanguageFeature } from '../../hoc/withCLanguageFeature';
+import RenderOptions from '../components/RenderOptions';
+import { BuildTools } from '../types';
+import CFamilly from './buildtool-steps/CFamilly';
+import DotNet from './buildtool-steps/DotNet';
+import Gradle from './buildtool-steps/Gradle';
+import Maven from './buildtool-steps/Maven';
+import Other from './buildtool-steps/Other';
+
+const BUILD_TOOLS_WITH_NO_ADDITIONAL_OPTIONS = [
+ BuildTools.Maven,
+ BuildTools.Gradle,
+ BuildTools.Other,
+];
+
+const BUILDTOOL_COMPONENT_MAP: {
+ [x in BuildTools]: React.ComponentType<LanguageProps>;
+} = {
+ [BuildTools.Maven]: Maven,
+ [BuildTools.Gradle]: Gradle,
+ [BuildTools.DotNet]: DotNet,
+ [BuildTools.CFamily]: CFamilly,
+ [BuildTools.Other]: Other,
+};
+
+export interface JenkinsfileStepProps {
+ baseUrl: string;
+ component: Component;
+ hasCLanguageFeature: boolean;
+ onDone: (done: boolean) => void;
+}
+
+export interface LanguageProps {
+ onDone: (done: boolean) => void;
+ component: Component;
+ baseUrl: string;
+}
+
+export function JenkinsfileStep(props: JenkinsfileStepProps) {
+ const { component, hasCLanguageFeature, baseUrl, onDone } = props;
+
+ const [buildTool, setBuildTool] = React.useState<BuildTools>();
+
+ const buildToolOrder = Object.keys(BUILDTOOL_COMPONENT_MAP);
+ if (!hasCLanguageFeature) {
+ buildToolOrder.splice(buildToolOrder.indexOf(BuildTools.CFamily), 1);
+ }
+
+ const BuildToolComponent = buildTool ? BUILDTOOL_COMPONENT_MAP[buildTool] : undefined;
+
+ React.useEffect(() => {
+ if (buildTool && BUILD_TOOLS_WITH_NO_ADDITIONAL_OPTIONS.includes(buildTool)) {
+ onDone(true);
+ }
+ }, [buildTool, onDone]);
+
+ return (
+ <TutorialStep title={translate('onboarding.tutorial.with.jenkins.jenkinsfile.title')}>
+ <NumberedList>
+ <NumberedListItem>
+ {translate('onboarding.build')}
+ <RenderOptions
+ label={translate('onboarding.build')}
+ checked={buildTool}
+ onCheck={(value) => setBuildTool(value as BuildTools)}
+ optionLabelKey="onboarding.build"
+ options={buildToolOrder}
+ />
+ {buildTool === BuildTools.CFamily && (
+ <FlagMessage variant="info" className="sw-mt-2 sw-w-abs-600">
+ {translate('onboarding.tutorial.with.jenkins.jenkinsfile.cfamilly.agent_setup')}
+ </FlagMessage>
+ )}
+ </NumberedListItem>
+ {BuildToolComponent !== undefined && (
+ <BuildToolComponent component={component} baseUrl={baseUrl} onDone={props.onDone} />
+ )}
+ </NumberedList>
+ </TutorialStep>
+ );
+}
+
+export default withCLanguageFeature(JenkinsfileStep);
* 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 } from 'design-system';
+import { BasicSeparator, Title, TutorialStepList } from 'design-system';
import * as React from 'react';
import withAvailableFeatures, {
WithAvailableFeaturesProps,
import { Feature } from '../../../types/features';
import { Component } from '../../../types/types';
import AllSet from '../components/AllSet';
-import JenkinsfileStep from './JenkinsfileStep';
+import JenkinsfileStep from './JenkinsStep';
import MultiBranchPipelineStep from './MultiBranchPipelineStep';
import PipelineStep from './PipelineStep';
import PreRequisitesStep from './PreRequisitesStep';
<Title>{translate('onboarding.tutorial.with.jenkins.title')}</Title>
{hasSelectAlmStep && <SelectAlmStep alm={alm} onChange={setAlm} />}
-
{alm && (
<>
- <PreRequisitesStep alm={alm} branchesEnabled={branchSupportEnabled} />
+ <TutorialStepList className="sw-mb-10">
+ <PreRequisitesStep alm={alm} branchesEnabled={branchSupportEnabled} />
+
+ {branchSupportEnabled ? (
+ <MultiBranchPipelineStep
+ alm={alm}
+ almBinding={almBinding}
+ projectBinding={projectBinding}
+ />
+ ) : (
+ <PipelineStep alm={alm} />
+ )}
- {branchSupportEnabled ? (
- <MultiBranchPipelineStep
+ <WebhookStep
alm={alm}
almBinding={almBinding}
+ branchesEnabled={branchSupportEnabled}
projectBinding={projectBinding}
/>
- ) : (
- <PipelineStep alm={alm} />
- )}
-
- <WebhookStep
- alm={alm}
- almBinding={almBinding}
- branchesEnabled={branchSupportEnabled}
- projectBinding={projectBinding}
- />
-
- <JenkinsfileStep component={component} baseUrl={baseUrl} onDone={setDone} />
+ <JenkinsfileStep component={component} baseUrl={baseUrl} onDone={setDone} />
+ </TutorialStepList>
{done && (
<>
<BasicSeparator className="sw-my-10" />
+++ /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.
- */
-import { FlagMessage, NumberedList, NumberedListItem, TutorialStep } from 'design-system';
-import * as React from 'react';
-import { translate } from '../../../helpers/l10n';
-import { Component } from '../../../types/types';
-import { withCLanguageFeature } from '../../hoc/withCLanguageFeature';
-import RenderOptions from '../components/RenderOptions';
-import { BuildTools } from '../types';
-import CFamilly from './buildtool-steps/CFamilly';
-import DotNet from './buildtool-steps/DotNet';
-import Gradle from './buildtool-steps/Gradle';
-import Maven from './buildtool-steps/Maven';
-import Other from './buildtool-steps/Other';
-
-const BUILD_TOOLS_WITH_NO_ADDITIONAL_OPTIONS = [
- BuildTools.Maven,
- BuildTools.Gradle,
- BuildTools.Other,
-];
-
-const BUILDTOOL_COMPONENT_MAP: {
- [x in BuildTools]: React.ComponentType<LanguageProps>;
-} = {
- [BuildTools.Maven]: Maven,
- [BuildTools.Gradle]: Gradle,
- [BuildTools.DotNet]: DotNet,
- [BuildTools.CFamily]: CFamilly,
- [BuildTools.Other]: Other,
-};
-
-export interface JenkinsfileStepProps {
- baseUrl: string;
- component: Component;
- hasCLanguageFeature: boolean;
- onDone: (done: boolean) => void;
-}
-
-export interface LanguageProps {
- onDone: (done: boolean) => void;
- component: Component;
- baseUrl: string;
-}
-
-export function JenkinsfileStep(props: JenkinsfileStepProps) {
- const { component, hasCLanguageFeature, baseUrl, onDone } = props;
-
- const [buildTool, setBuildTool] = React.useState<BuildTools>();
-
- const buildToolOrder = Object.keys(BUILDTOOL_COMPONENT_MAP);
- if (!hasCLanguageFeature) {
- buildToolOrder.splice(buildToolOrder.indexOf(BuildTools.CFamily), 1);
- }
-
- const BuildToolComponent = buildTool ? BUILDTOOL_COMPONENT_MAP[buildTool] : undefined;
-
- React.useEffect(() => {
- if (buildTool && BUILD_TOOLS_WITH_NO_ADDITIONAL_OPTIONS.includes(buildTool)) {
- onDone(true);
- }
- }, [buildTool, onDone]);
-
- return (
- <TutorialStep title={translate('onboarding.tutorial.with.jenkins.jenkinsfile.title')}>
- <NumberedList>
- <NumberedListItem>
- {translate('onboarding.build')}
- <RenderOptions
- label={translate('onboarding.build')}
- checked={buildTool}
- onCheck={(value) => setBuildTool(value as BuildTools)}
- optionLabelKey="onboarding.build"
- options={buildToolOrder}
- />
- {buildTool === BuildTools.CFamily && (
- <FlagMessage variant="info" className="sw-mt-2 sw-w-abs-600">
- {translate('onboarding.tutorial.with.jenkins.jenkinsfile.cfamilly.agent_setup')}
- </FlagMessage>
- )}
- </NumberedListItem>
- {BuildToolComponent !== undefined && (
- <BuildToolComponent component={component} baseUrl={baseUrl} onDone={props.onDone} />
- )}
- </NumberedList>
- </TutorialStep>
- );
-}
-
-export default withCLanguageFeature(JenkinsfileStep);
)}
:
</strong>
- <UnorderedList ticks className="sw-ml-4 sw-mt-1 sw-w-abs-600">
+ <UnorderedList ticks className="sw-ml-4 sw-mt-1">
<ListItem>
<LabelActionPair
translationKey={`onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.${
<ListItem>
<LabelActionPair translationKey="onboarding.tutorial.with.jenkins.webhook.step1.name" />
</ListItem>
- <ListItem className="sw-w-abs-600">
+ <ListItem>
<p>
<LabelActionPair translationKey="onboarding.tutorial.with.jenkins.webhook.bitbucket.step1.url" />
</p>
/>
<UnorderedList ticks className="sw-ml-12">
{branchesEnabled ? (
- <ListItem className="sw-w-abs-600">
+ <ListItem>
<p>
<LabelActionPair translationKey="onboarding.tutorial.with.jenkins.webhook.gitlab.step1.url_with_branches" />
</p>
}}
/>
<UnorderedList ticks className="sw-ml-12">
- <ListItem className="sw-w-abs-600">
+ <ListItem>
<p>
<LabelActionPair translationKey="onboarding.tutorial.with.jenkins.webhook.github.step1.url" />
</p>
import GithubCFamilyExampleRepositories from '../../components/GithubCFamilyExampleRepositories';
import RenderOptions from '../../components/RenderOptions';
import { OSs, TutorialModes } from '../../types';
-import { LanguageProps } from '../JenkinsfileStep';
+import { LanguageProps } from '../JenkinsStep';
import CreateJenkinsfileBulletPoint from './CreateJenkinsfileBulletPoint';
const YAML_MAP: Record<OSs, (baseUrl: string) => string> = {
export default function CFamilly(props: LanguageProps) {
const { baseUrl, component, onDone } = props;
- const [os, setOs] = React.useState<OSs>();
+ const [os, setOs] = React.useState<OSs>(OSs.Linux);
React.useEffect(() => {
onDone(os !== undefined);
return (
<>
<DefaultProjectKey component={component} />
- <NumberedListItem className="sw-max-w-2/3">
+ <NumberedListItem>
{translate('onboarding.build.other.os')}
- <div className="sw-ml-8">
- <RenderOptions
- label={translate('onboarding.build.other.os')}
- checked={os}
- optionLabelKey="onboarding.build.other.os"
- onCheck={(value) => setOs(value as OSs)}
- options={Object.values(OSs)}
+ <RenderOptions
+ label={translate('onboarding.build.other.os')}
+ checked={os}
+ optionLabelKey="onboarding.build.other.os"
+ onCheck={(value) => setOs(value as OSs)}
+ options={Object.values(OSs)}
+ />
+ {os && (
+ <GithubCFamilyExampleRepositories
+ className="sw-my-4 sw-w-abs-600"
+ os={os}
+ ci={TutorialModes.Jenkins}
/>
- {os && (
- <GithubCFamilyExampleRepositories
- className="sw-my-4"
- os={os}
- ci={TutorialModes.Jenkins}
- />
- )}
- </div>
+ )}
</NumberedListItem>
{os && (
<CreateJenkinsfileBulletPoint
const { children, snippet, alertTranslationKeyPart } = props;
return (
- <NumberedListItem className="sw-max-w-2/3">
+ <NumberedListItem>
<SentenceWithFilename
filename="Jenkinsfile"
translationKey="onboarding.tutorial.with.jenkins.jenkinsfile.jenkinsfile_step"
/>
- <div className="sw-ml-8">
- {alertTranslationKeyPart && (
- <FlagMessage className="sw-mt-2" variant="info">
- <div>
- <SentenceWithHighlights
- highlightKeys={['default', 'in_jenkins']}
- translationKey={`${alertTranslationKeyPart}.replace`}
- />
- <HelpTooltip
- className="sw-ml-1"
- overlay={
- <>
- <p className="sw-mb-2">
- <SentenceWithHighlights
- highlightKeys={['path']}
- translationKey={`${alertTranslationKeyPart}.help1`}
- />
- </p>
- <p>
- <SentenceWithHighlights
- highlightKeys={['path', 'name']}
- translationKey={`${alertTranslationKeyPart}.help2`}
- />
- </p>
- </>
- }
- >
- <HelperHintIcon />
- </HelpTooltip>
- </div>
- </FlagMessage>
- )}
- <CodeSnippet className="sw-p-6" language="groovy" snippet={snippet} />
- {children}
- </div>
+ <br />
+ {alertTranslationKeyPart && (
+ <FlagMessage className="sw-mt-2" variant="info">
+ <div>
+ <SentenceWithHighlights
+ highlightKeys={['default', 'in_jenkins']}
+ translationKey={`${alertTranslationKeyPart}.replace`}
+ />
+ <HelpTooltip
+ className="sw-ml-1"
+ overlay={
+ <>
+ <p className="sw-mb-2">
+ <SentenceWithHighlights
+ highlightKeys={['path']}
+ translationKey={`${alertTranslationKeyPart}.help1`}
+ />
+ </p>
+ <p>
+ <SentenceWithHighlights
+ highlightKeys={['path', 'name']}
+ translationKey={`${alertTranslationKeyPart}.help2`}
+ />
+ </p>
+ </>
+ }
+ >
+ <HelperHintIcon />
+ </HelpTooltip>
+ </div>
+ </FlagMessage>
+ )}
+ <CodeSnippet className="sw-p-6" language="groovy" snippet={snippet} />
+ {children}
</NumberedListItem>
);
}
import { Component } from '../../../../types/types';
import RenderOptions from '../../components/RenderOptions';
import { OSs } from '../../types';
-import { LanguageProps } from '../JenkinsfileStep';
+import { LanguageProps } from '../JenkinsStep';
import DotNetCore from './DotNetCore';
import DotNetFramework from './DotNetFramework';
export default function DotNet(props: LanguageProps) {
const { component, onDone } = props;
- const [flavorComponent, setFlavorComponent] = React.useState<keyof typeof DotNetFlavor>();
+ const [flavorComponent, setFlavorComponent] =
+ React.useState<keyof typeof DotNetFlavor>('win_core');
const DotNetTutorial = flavorComponent && DotNetFlavor[flavorComponent];
React.useEffect(() => {
<>
<NumberedListItem>
{translate('onboarding.tutorial.with.jenkins.jenkinsfile.dotnet.build_agent')}
- <div className="sw-ml-8">
- <RenderOptions
- label={translate('onboarding.tutorial.with.jenkins.jenkinsfile.dotnet.build_agent')}
- checked={flavorComponent}
- optionLabelKey="onboarding.build.dotnet"
- onCheck={(value) => setFlavorComponent(value as keyof typeof DotNetFlavor)}
- options={Object.keys(DotNetFlavor)}
- />
- </div>
+ <RenderOptions
+ label={translate('onboarding.tutorial.with.jenkins.jenkinsfile.dotnet.build_agent')}
+ checked={flavorComponent}
+ optionLabelKey="onboarding.build.dotnet"
+ onCheck={(value) => setFlavorComponent(value as keyof typeof DotNetFlavor)}
+ options={Object.keys(DotNetFlavor)}
+ />
</NumberedListItem>
{DotNetTutorial && flavorComponent && (
<DotNetTutorial component={component} os={DotOS[flavorComponent]} />
return (
<>
<DotNetPrereqsScanner />
- <NumberedListItem className="sw-max-w-2/3">
+ <NumberedListItem>
<SentenceWithFilename
filename="Jenkinsfile"
translationKey="onboarding.tutorial.with.jenkins.jenkinsfile.jenkinsfile_step"
/>
<CodeSnippet
- className="sw-ml-8 sw-p-6"
+ className="sw-p-6"
language="groovy"
snippet={jenkinsfileSnippet(component.key, os)}
/>
<>
<DotNetPrereqsScanner />
<DotNetPrereqsMSBuild />
- <NumberedListItem className="sw-max-w-2/3">
+ <NumberedListItem>
<SentenceWithFilename
filename="Jenkinsfile"
translationKey="onboarding.tutorial.with.jenkins.jenkinsfile.jenkinsfile_step"
export default function DotNetPrereqsMSBuild() {
return (
- <NumberedListItem className="sw-max-w-2/3">
+ <NumberedListItem>
<SentenceWithHighlights
highlightKeys={['default_msbuild']}
translationKey="onboarding.tutorial.with.jenkins.dotnet.msbuild.prereqs.title"
export default function DotNetPrereqsScanner() {
return (
- <NumberedListItem className="sw-max-w-2/3">
+ <NumberedListItem>
<SentenceWithHighlights
highlightKeys={['default_scanner']}
translationKey="onboarding.tutorial.with.jenkins.dotnet.scanner.prereqs.title"
/>
- <FlagMessage className="sw-ml-8 sw-mt-2" variant="info">
+ <br />
+ <FlagMessage className="sw-mt-2" variant="info">
{translate('onboarding.tutorial.with.jenkins.dotnet.scanner.prereqs.info')}
</FlagMessage>
<OrderedList tickStyle="ALPHA" className="sw-ml-12">
import { InlineSnippet } from '../../components/InlineSnippet';
import { GradleBuildDSL } from '../../types';
import { buildGradleSnippet } from '../../utils';
-import { LanguageProps } from '../JenkinsfileStep';
+import { LanguageProps } from '../JenkinsStep';
import CreateJenkinsfileBulletPoint from './CreateJenkinsfileBulletPoint';
const JENKINSFILE_SNIPPET = `node {
return (
<>
- <NumberedListItem className="sw-max-w-2/3">
+ <NumberedListItem>
<span>
<FormattedMessage
defaultMessage={translate(
}}
/>
</span>
- <div className="sw-ml-8">
- <GradleBuildSelection className="sw-my-4">
- {(build) => (
- <CodeSnippet
- className="sw-p-6"
- language={build === GradleBuildDSL.Groovy ? 'groovy' : 'kotlin'}
- snippet={buildGradleSnippet(component.key, component.name, build)}
- />
- )}
- </GradleBuildSelection>
- </div>
+ <GradleBuildSelection className="sw-my-4">
+ {(build) => (
+ <CodeSnippet
+ className="sw-p-6"
+ language={build === GradleBuildDSL.Groovy ? 'groovy' : 'kotlin'}
+ snippet={buildGradleSnippet(component.key, component.name, build)}
+ />
+ )}
+ </GradleBuildSelection>
</NumberedListItem>
<CreateJenkinsfileBulletPoint snippet={JENKINSFILE_SNIPPET} />
</>
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
-import { LanguageProps } from '../JenkinsfileStep';
+import { LanguageProps } from '../JenkinsStep';
import CreateJenkinsfileBulletPoint from './CreateJenkinsfileBulletPoint';
function jenkinsfileSnippet(projectKey: string, projectName: string) {
*/
import * as React from 'react';
import DefaultProjectKey from '../../components/DefaultProjectKey';
-import { LanguageProps } from '../JenkinsfileStep';
+import { LanguageProps } from '../JenkinsStep';
import CreateJenkinsfileBulletPoint from './CreateJenkinsfileBulletPoint';
const JENKINSFILE_SNIPPET = `node {
{config.buildTool === BuildTools.CFamily && config.os && (
<GithubCFamilyExampleRepositories
- className="sw-mt-4"
+ className="sw-mt-4 sw-w-abs-600"
os={config.os}
ci={TutorialModes.Local}
/>
projects / sonarqube.git / commitdiff