From: Wouter Admiraal <wouter.admiraal@sonarsource.com>
Date: Mon, 22 Feb 2021 14:46:12 +0000 (+0100)
Subject: SONAR-14496 Rely on sonar.core.serverBaseURL in CI tutorials
X-Git-Tag: 8.8.0.42792~119
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=a75155b3585788656620a17dbfb58764f5e82422;p=sonarqube.git

SONAR-14496 Rely on sonar.core.serverBaseURL in CI tutorials
---

diff --git a/server/sonar-web/src/main/js/components/tutorials/TutorialSelection.tsx b/server/sonar-web/src/main/js/components/tutorials/TutorialSelection.tsx
index 64a0eab297e..ddf797e83c2 100644
--- a/server/sonar-web/src/main/js/components/tutorials/TutorialSelection.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/TutorialSelection.tsx
@@ -19,8 +19,11 @@
  */
 import * as React from 'react';
 import { WithRouterProps } from 'react-router';
+import { getHostUrl } from 'sonar-ui-common/helpers/urls';
 import { getAlmDefinitionsNoCatch, getProjectAlmBinding } from '../../api/alm-settings';
+import { getValues } from '../../api/settings';
 import { AlmBindingDefinition, ProjectAlmBindingResponse } from '../../types/alm-settings';
+import { SettingsKey } from '../../types/settings';
 import { withRouter } from '../hoc/withRouter';
 import TutorialSelectionRenderer from './TutorialSelectionRenderer';
 import { TutorialModes } from './types';
@@ -32,6 +35,7 @@ interface Props extends Pick<WithRouterProps, 'router' | 'location'> {
 
 interface State {
   almBinding?: AlmBindingDefinition;
+  baseUrl: string;
   forceManual: boolean;
   loading: boolean;
   projectBinding?: ProjectAlmBindingResponse;
@@ -40,13 +44,23 @@ interface State {
 export class TutorialSelection extends React.PureComponent<Props, State> {
   mounted = false;
   state: State = {
+    baseUrl: getHostUrl(),
     forceManual: true,
     loading: true
   };
 
-  componentDidMount() {
+  async componentDidMount() {
     this.mounted = true;
-    this.fetchAlmBindings();
+
+    await Promise.all([this.fetchAlmBindings(), this.fetchBaseUrl()]);
+
+    if (this.mounted) {
+      this.setState({ loading: false });
+    }
+  }
+
+  componentWillUnmount() {
+    this.mounted = false;
   }
 
   fetchAlmBindings = async () => {
@@ -59,18 +73,26 @@ export class TutorialSelection extends React.PureComponent<Props, State> {
 
     if (this.mounted) {
       if (projectBinding === undefined) {
-        this.setState({ loading: false, forceManual: true });
+        this.setState({ forceManual: true });
       } else {
         let almBinding;
         if (almDefinitions !== undefined) {
           const specificDefinitions = almDefinitions[projectBinding.alm] as AlmBindingDefinition[];
           almBinding = specificDefinitions.find(d => d.key === projectBinding.key);
         }
-        this.setState({ almBinding, forceManual: false, projectBinding, loading: false });
+        this.setState({ almBinding, forceManual: false, projectBinding });
       }
     }
   };
 
+  fetchBaseUrl = async () => {
+    const settings = await getValues({ keys: SettingsKey.ServerBaseUrl }).catch(() => undefined);
+    const baseUrl = settings && settings.find(s => s.key === SettingsKey.ServerBaseUrl)?.value;
+    if (baseUrl && baseUrl.length > 0 && this.mounted) {
+      this.setState({ baseUrl });
+    }
+  };
+
   handleSelectTutorial = (selectedTutorial: TutorialModes) => {
     const {
       router,
@@ -85,7 +107,7 @@ export class TutorialSelection extends React.PureComponent<Props, State> {
 
   render() {
     const { component, currentUser, location } = this.props;
-    const { almBinding, forceManual, loading, projectBinding } = this.state;
+    const { almBinding, baseUrl, forceManual, loading, projectBinding } = this.state;
 
     const selectedTutorial: TutorialModes | undefined = forceManual
       ? TutorialModes.Manual
@@ -94,6 +116,7 @@ export class TutorialSelection extends React.PureComponent<Props, State> {
     return (
       <TutorialSelectionRenderer
         almBinding={almBinding}
+        baseUrl={baseUrl}
         component={component}
         currentUser={currentUser}
         loading={loading}
diff --git a/server/sonar-web/src/main/js/components/tutorials/TutorialSelectionRenderer.tsx b/server/sonar-web/src/main/js/components/tutorials/TutorialSelectionRenderer.tsx
index 0689d78aff4..323c6a682cc 100644
--- a/server/sonar-web/src/main/js/components/tutorials/TutorialSelectionRenderer.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/TutorialSelectionRenderer.tsx
@@ -29,6 +29,7 @@ import { TutorialModes } from './types';
 
 export interface TutorialSelectionRendererProps {
   almBinding?: AlmBindingDefinition;
+  baseUrl: string;
   component: T.Component;
   currentUser: T.LoggedInUser;
   loading: boolean;
@@ -38,7 +39,15 @@ export interface TutorialSelectionRendererProps {
 }
 
 export default function TutorialSelectionRenderer(props: TutorialSelectionRendererProps) {
-  const { almBinding, component, currentUser, loading, projectBinding, selectedTutorial } = props;
+  const {
+    almBinding,
+    baseUrl,
+    component,
+    currentUser,
+    loading,
+    projectBinding,
+    selectedTutorial
+  } = props;
 
   if (loading) {
     return <i className="spinner" />;
@@ -138,6 +147,7 @@ export default function TutorialSelectionRenderer(props: TutorialSelectionRender
 
       {selectedTutorial === TutorialModes.GitLabCI && projectBinding !== undefined && (
         <GitLabCITutorial
+          baseUrl={baseUrl}
           component={component}
           currentUser={currentUser}
           projectBinding={projectBinding}
@@ -146,6 +156,7 @@ export default function TutorialSelectionRenderer(props: TutorialSelectionRender
 
       {selectedTutorial === TutorialModes.AzurePipelines && projectBinding !== undefined && (
         <AzurePipelinesTutorial
+          baseUrl={baseUrl}
           component={component}
           currentUser={currentUser}
           projectBinding={projectBinding}
diff --git a/server/sonar-web/src/main/js/components/tutorials/__tests__/TutorialSelection-test.tsx b/server/sonar-web/src/main/js/components/tutorials/__tests__/TutorialSelection-test.tsx
index 76b4dbe9d79..41bcdf0f729 100644
--- a/server/sonar-web/src/main/js/components/tutorials/__tests__/TutorialSelection-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/__tests__/TutorialSelection-test.tsx
@@ -20,7 +20,9 @@
 import { shallow } from 'enzyme';
 import * as React from 'react';
 import { waitAndUpdate } from 'sonar-ui-common/helpers/testUtils';
+import { getHostUrl } from 'sonar-ui-common/helpers/urls';
 import { getAlmDefinitionsNoCatch, getProjectAlmBinding } from '../../../api/alm-settings';
+import { getValues } from '../../../api/settings';
 import { mockBitbucketBindingDefinition } from '../../../helpers/mocks/alm-settings';
 import {
   mockComponent,
@@ -29,14 +31,23 @@ import {
   mockRouter
 } from '../../../helpers/testMocks';
 import { AlmKeys } from '../../../types/alm-settings';
+import { SettingsKey } from '../../../types/settings';
 import { TutorialSelection } from '../TutorialSelection';
 import { TutorialModes } from '../types';
 
+jest.mock('sonar-ui-common/helpers/urls', () => ({
+  getHostUrl: jest.fn().mockReturnValue('http://host.url')
+}));
+
 jest.mock('../../../api/alm-settings', () => ({
   getProjectAlmBinding: jest.fn().mockRejectedValue(null),
   getAlmDefinitionsNoCatch: jest.fn().mockRejectedValue(null)
 }));
 
+jest.mock('../../../api/settings', () => ({
+  getValues: jest.fn().mockResolvedValue([])
+}));
+
 beforeEach(jest.clearAllMocks);
 
 it('should render correctly', () => {
@@ -88,6 +99,32 @@ it('should handle selection', () => {
   );
 });
 
+it('should fetch the correct baseUrl', async () => {
+  (getValues as jest.Mock)
+    .mockResolvedValueOnce([{ key: SettingsKey.ServerBaseUrl, value: '' }])
+    .mockResolvedValueOnce([{ key: SettingsKey.ServerBaseUrl, value: 'http://sq.example.com' }])
+    .mockRejectedValueOnce(null);
+
+  let wrapper = shallowRender();
+
+  expect(getValues).toBeCalled();
+  expect(getHostUrl).toBeCalled();
+
+  // No baseURL, fallback to the URL in the browser.
+  await waitAndUpdate(wrapper);
+  expect(wrapper.state().baseUrl).toBe('http://host.url');
+
+  // A baseURL was set.
+  wrapper = shallowRender();
+  await waitAndUpdate(wrapper);
+  expect(wrapper.state().baseUrl).toBe('http://sq.example.com');
+
+  // Access denied, fallback to the URL in the browser.
+  wrapper = shallowRender();
+  await waitAndUpdate(wrapper);
+  expect(wrapper.state().baseUrl).toBe('http://host.url');
+});
+
 function shallowRender(props: Partial<TutorialSelection['props']> = {}) {
   return shallow<TutorialSelection>(
     <TutorialSelection
diff --git a/server/sonar-web/src/main/js/components/tutorials/__tests__/TutorialSelectionRenderer-test.tsx b/server/sonar-web/src/main/js/components/tutorials/__tests__/TutorialSelectionRenderer-test.tsx
index 7efd8c10f88..5ff0893230d 100644
--- a/server/sonar-web/src/main/js/components/tutorials/__tests__/TutorialSelectionRenderer-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/__tests__/TutorialSelectionRenderer-test.tsx
@@ -125,6 +125,7 @@ function shallowRender(props: Partial<TutorialSelectionRendererProps> = {}) {
   return shallow<TutorialSelectionRendererProps>(
     <TutorialSelectionRenderer
       almBinding={mockBitbucketBindingDefinition()}
+      baseUrl="http://localhost:9000"
       component={mockComponent()}
       currentUser={mockLoggedInUser()}
       loading={false}
diff --git a/server/sonar-web/src/main/js/components/tutorials/__tests__/__snapshots__/TutorialSelection-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/__tests__/__snapshots__/TutorialSelection-test.tsx.snap
index 4ec730fade5..f686da4184a 100644
--- a/server/sonar-web/src/main/js/components/tutorials/__tests__/__snapshots__/TutorialSelection-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/__tests__/__snapshots__/TutorialSelection-test.tsx.snap
@@ -2,6 +2,7 @@
 
 exports[`should render correctly 1`] = `
 <TutorialSelectionRenderer
+  baseUrl="http://host.url"
   component={
     Object {
       "breadcrumbs": Array [],
diff --git a/server/sonar-web/src/main/js/components/tutorials/__tests__/__snapshots__/TutorialSelectionRenderer-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/__tests__/__snapshots__/TutorialSelectionRenderer-test.tsx.snap
index bdc9b40712c..bcdfec2e016 100644
--- a/server/sonar-web/src/main/js/components/tutorials/__tests__/__snapshots__/TutorialSelectionRenderer-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/__tests__/__snapshots__/TutorialSelectionRenderer-test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`should render correctly: azure pipelines tutorial 1`] = `
 <Fragment>
   <AzurePipelinesTutorial
+    baseUrl="http://localhost:9000"
     component={
       Object {
         "breadcrumbs": Array [],
@@ -51,6 +52,7 @@ exports[`should render correctly: azure pipelines tutorial 1`] = `
 exports[`should render correctly: gitlab tutorial 1`] = `
 <Fragment>
   <GitLabCITutorial
+    baseUrl="http://localhost:9000"
     component={
       Object {
         "breadcrumbs": Array [],
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/AzurePipelinesTutorial.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/AzurePipelinesTutorial.tsx
index 225405a0fd1..e7ab59b267d 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/AzurePipelinesTutorial.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/AzurePipelinesTutorial.tsx
@@ -32,6 +32,7 @@ import SaveAndRunStepContent from './SaveAndRunStepContent';
 import ServiceEndpointStepContent from './ServiceEndpointStepContent';
 
 export interface AzurePipelinesTutorialProps {
+  baseUrl: string;
   component: T.Component;
   currentUser: T.LoggedInUser;
   projectBinding: ProjectAlmBindingResponse;
@@ -51,7 +52,7 @@ interface Step {
 }
 
 export default function AzurePipelinesTutorial(props: AzurePipelinesTutorialProps) {
-  const { component, currentUser, projectBinding } = props;
+  const { baseUrl, component, currentUser, projectBinding } = props;
 
   const [currentStep, setCurrentStep] = React.useState(Steps.ExtensionInstallation);
   const [isCurrentStepValid, setIsCurrentStepValid] = React.useState(false);
@@ -69,7 +70,13 @@ export default function AzurePipelinesTutorial(props: AzurePipelinesTutorialProp
     { step: Steps.ExtensionInstallation, content: <ExtensionInstallationStepContent /> },
     {
       step: Steps.ServiceEndpoint,
-      content: <ServiceEndpointStepContent component={component} currentUser={currentUser} />
+      content: (
+        <ServiceEndpointStepContent
+          baseUrl={baseUrl}
+          component={component}
+          currentUser={currentUser}
+        />
+      )
     },
     {
       step: Steps.BranchAnalysis,
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/ServiceEndpointStepContent.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/ServiceEndpointStepContent.tsx
index a5d7daafdcb..04254a2482b 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/ServiceEndpointStepContent.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/ServiceEndpointStepContent.tsx
@@ -22,17 +22,17 @@ import { FormattedMessage } from 'react-intl';
 import { Button } from 'sonar-ui-common/components/controls/buttons';
 import { ClipboardIconButton } from 'sonar-ui-common/components/controls/clipboard';
 import { translate } from 'sonar-ui-common/helpers/l10n';
-import { getHostUrl } from 'sonar-ui-common/helpers/urls';
 import EditTokenModal from '../components/EditTokenModal';
 import SentenceWithHighlights from '../components/SentenceWithHighlights';
 
 export interface ServiceEndpointStepProps {
+  baseUrl: string;
   component: T.Component;
   currentUser: T.LoggedInUser;
 }
 
 export default function ServiceEndpointStepContent(props: ServiceEndpointStepProps) {
-  const { component, currentUser } = props;
+  const { baseUrl, component, currentUser } = props;
 
   const [isModalVisible, toggleModal] = React.useState(false);
 
@@ -61,8 +61,8 @@ export default function ServiceEndpointStepContent(props: ServiceEndpointStepPro
             )}
             id="onboarding.tutorial.with.azure_pipelines.ServiceEndpoint.step4.sentence"
             values={{
-              url: <code className="rule">{getHostUrl()}</code>,
-              button: <ClipboardIconButton copyValue={getHostUrl()} />
+              url: <code className="rule">{baseUrl}</code>,
+              button: <ClipboardIconButton copyValue={baseUrl} />
             }}
           />
         </li>
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/AzurePipelinesTutorial-test.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/AzurePipelinesTutorial-test.tsx
index bb41f38cbc1..1ff63b59569 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/AzurePipelinesTutorial-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/AzurePipelinesTutorial-test.tsx
@@ -101,6 +101,7 @@ it('should open a step when user click on it', () => {
 function shallowRender(props: Partial<AzurePipelinesTutorialProps> = {}) {
   return shallow<AzurePipelinesTutorialProps>(
     <AzurePipelinesTutorial
+      baseUrl="http://localhost:9000"
       component={mockComponent()}
       currentUser={mockLoggedInUser()}
       projectBinding={mockProjectAzureBindingResponse()}
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/ServiceEndpointStepContent-test.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/ServiceEndpointStepContent-test.tsx
index 604bd6085fe..0f4f849718f 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/ServiceEndpointStepContent-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/ServiceEndpointStepContent-test.tsx
@@ -46,6 +46,10 @@ it('should render open/close the token modal when asked to', () => {
 
 function shallowRender() {
   return shallow(
-    <ServiceEndpointStepContent component={mockComponent()} currentUser={mockLoggedInUser()} />
+    <ServiceEndpointStepContent
+      baseUrl="http://localhost:9000"
+      component={mockComponent()}
+      currentUser={mockLoggedInUser()}
+    />
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/__snapshots__/ServiceEndpointStepContent-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/__snapshots__/ServiceEndpointStepContent-test.tsx.snap
index 1596e44fa1c..7b52581aa12 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/__snapshots__/ServiceEndpointStepContent-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/__snapshots__/ServiceEndpointStepContent-test.tsx.snap
@@ -35,12 +35,12 @@ exports[`should render correctly 1`] = `
         values={
           Object {
             "button": <ClipboardIconButton
-              copyValue="http://localhost"
+              copyValue="http://localhost:9000"
             />,
             "url": <code
               className="rule"
             >
-              http://localhost
+              http://localhost:9000
             </code>,
           }
         }
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 02934fa507a..47e02fc1dc1 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
@@ -22,11 +22,11 @@ import { FormattedMessage } from 'react-intl';
 import { Button } from 'sonar-ui-common/components/controls/buttons';
 import { ClipboardIconButton } from 'sonar-ui-common/components/controls/clipboard';
 import { translate } from 'sonar-ui-common/helpers/l10n';
-import { getHostUrl } from 'sonar-ui-common/helpers/urls';
 import EditTokenModal from '../components/EditTokenModal';
 import Step from '../components/Step';
 
 export interface EnvironmentVariablesStepProps {
+  baseUrl: string;
   component: T.Component;
   currentUser: T.LoggedInUser;
   finished: boolean;
@@ -40,7 +40,7 @@ const pipelineDescriptionLinkLabel = translate(
 );
 
 export default function EnvironmentVariablesStep(props: EnvironmentVariablesStepProps) {
-  const { component, currentUser, finished, open } = props;
+  const { baseUrl, component, currentUser, finished, open } = props;
 
   const [isModalVisible, toggleModal] = React.useState(false);
 
@@ -139,9 +139,9 @@ export default function EnvironmentVariablesStep(props: EnvironmentVariablesStep
             defaultMessage={fieldValueTranslation}
             id="onboarding.tutorial.with.gitlab_ci.env_variables.step2"
             values={{
-              extra: <ClipboardIconButton copyValue={getHostUrl()} />,
+              extra: <ClipboardIconButton copyValue={baseUrl} />,
               field: translate('onboarding.tutorial.with.gitlab_ci.env_variables.step2'),
-              value: <code className="rule">{getHostUrl()}</code>
+              value: <code className="rule">{baseUrl}</code>
             }}
           />
         </li>
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 f7f08f40d94..0d53961bb59 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
@@ -36,13 +36,14 @@ export enum Steps {
 }
 
 export interface GitLabCITutorialProps {
+  baseUrl: string;
   component: T.Component;
   currentUser: T.LoggedInUser;
   projectBinding: ProjectAlmBindingResponse;
 }
 
 export default function GitLabCITutorial(props: GitLabCITutorialProps) {
-  const { component, currentUser, projectBinding } = props;
+  const { baseUrl, component, currentUser, projectBinding } = props;
 
   const [step, setStep] = React.useState(Steps.PROJECT_KEY);
   const [buildTool, setBuildTool] = React.useState<BuildTools | undefined>();
@@ -71,6 +72,7 @@ export default function GitLabCITutorial(props: GitLabCITutorialProps) {
       />
 
       <EnvironmentVariablesStep
+        baseUrl={baseUrl}
         component={component}
         currentUser={currentUser}
         finished={step > Steps.ENV_VARIABLES}
diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/EnvironmentVariablesStep-test.tsx b/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/EnvironmentVariablesStep-test.tsx
index 57cf4a4be3c..d01b5e292e9 100644
--- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/EnvironmentVariablesStep-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/EnvironmentVariablesStep-test.tsx
@@ -34,6 +34,7 @@ it('should render correctly', () => {
 function shallowRender(props: Partial<EnvironmentVariablesStepProps> = {}) {
   return shallow<EnvironmentVariablesStepProps>(
     <EnvironmentVariablesStep
+      baseUrl="http://localhost:9000"
       currentUser={mockLoggedInUser()}
       component={mockComponent()}
       finished={false}
diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/GitLabCITutorial-test.tsx b/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/GitLabCITutorial-test.tsx
index 1e2b42dce5d..0fb15cf2bf3 100644
--- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/GitLabCITutorial-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/GitLabCITutorial-test.tsx
@@ -36,6 +36,7 @@ it('should render correctly', () => {
 function shallowRender(props: Partial<GitLabCITutorialProps> = {}) {
   return shallow<GitLabCITutorialProps>(
     <GitLabCITutorial
+      baseUrl="http://localhost:9000"
       component={mockComponent()}
       currentUser={mockLoggedInUser()}
       projectBinding={mockProjectGitLabBindingResponse()}
diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/__snapshots__/EnvironmentVariablesStep-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/__snapshots__/EnvironmentVariablesStep-test.tsx.snap
index d37c4021463..c1e8ff710f1 100644
--- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/__snapshots__/EnvironmentVariablesStep-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/__snapshots__/EnvironmentVariablesStep-test.tsx.snap
@@ -140,13 +140,13 @@ exports[`should render correctly: initial content 1`] = `
         values={
           Object {
             "extra": <ClipboardIconButton
-              copyValue="http://localhost"
+              copyValue="http://localhost:9000"
             />,
             "field": "onboarding.tutorial.with.gitlab_ci.env_variables.step2",
             "value": <code
               className="rule"
             >
-              http://localhost
+              http://localhost:9000
             </code>,
           }
         }
diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/__snapshots__/GitLabCITutorial-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/__snapshots__/GitLabCITutorial-test.tsx.snap
index 00c4ef25f2c..e7e458b4f47 100644
--- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/__snapshots__/GitLabCITutorial-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/__snapshots__/GitLabCITutorial-test.tsx.snap
@@ -41,6 +41,7 @@ exports[`should render correctly 1`] = `
     setBuildTool={[Function]}
   />
   <EnvironmentVariablesStep
+    baseUrl="http://localhost:9000"
     component={
       Object {
         "breadcrumbs": Array [],
diff --git a/server/sonar-web/src/main/js/types/settings.ts b/server/sonar-web/src/main/js/types/settings.ts
index c284c1689a2..5626af2b709 100644
--- a/server/sonar-web/src/main/js/types/settings.ts
+++ b/server/sonar-web/src/main/js/types/settings.ts
@@ -19,5 +19,6 @@
  */
 export const enum SettingsKey {
   DaysBeforeDeletingInactiveBranchesAndPRs = 'sonar.dbcleaner.daysBeforeDeletingInactiveBranchesAndPRs',
-  DefaultProjectVisibility = 'projects.default.visibility'
+  DefaultProjectVisibility = 'projects.default.visibility',
+  ServerBaseUrl = 'sonar.core.serverBaseURL'
 }