diff --git a/app/assets/javascripts/ci/runner/components/runner_cloud_connection_form.vue b/app/assets/javascripts/ci/runner/components/runner_cloud_connection_form.vue
index 897d258569bd5f27b66ba95cd86e5e8de3b9f4a3..06b167603c7e7a403076254366ab8a545dc32e60 100644
--- a/app/assets/javascripts/ci/runner/components/runner_cloud_connection_form.vue
+++ b/app/assets/javascripts/ci/runner/components/runner_cloud_connection_form.vue
@@ -1,8 +1,8 @@
<script>
import {
- GlAlert,
+ GlAccordion,
+ GlAccordionItem,
GlButton,
- GlDrawer,
GlForm,
GlFormGroup,
GlFormInput,
@@ -10,41 +10,30 @@ import {
GlLink,
} from '@gitlab/ui';
import { s__ } from '~/locale';
-import { DRAWER_Z_INDEX } from '~/lib/utils/constants';
+import CodeBlock from '~/vue_shared/components/code_block.vue';
export default {
name: 'RunnerCloudForm',
- DRAWER_Z_INDEX,
i18n: {
- title: s__('Runners|Google Cloud connection'),
- wifTitle: s__('Runners|Workload identity federation'),
- wifAlertText: s__(
- 'Runners|These workload identity federation settings are also used by the Google Artifact Registry integration.',
+ title: s__('Runners|Google Cloud'),
+ description: s__(
+ 'Runners|To improve security, use a dedicated project for CI/CD, separate from resources and identity management projects.',
),
- wifSetupDescription: s__(
- 'Runners|Google Cloud workload identity federation must be set up for secure access without accounts or keys.',
- ),
- wifSetupText: s__('Runners|Set up workload identity federation'),
- cloudSetupDescription: s__(
- 'Runners|Set up your Google Cloud project to use the runner. To improve security, use a dedicated Google Cloud project for CI/CD, separate from resources and identity management projects.',
- ),
- cloudSetupText: s__('Runners|Set up google cloud project'),
- iapLabel: s__('Runners|Identity provider audience'),
- iapHelpText: s__(
- 'Runners|The full resource name of the workload identity provider in Google Cloud.',
- ),
- iapDescription:
- 'For example: //iam.googleapis.com/projects/<project-number>/locations/global/workloadIdentityPools/<pool-id>/providers/<provider-id>.',
- iapDocsLink: s__('Runners|Where’s my identity provider audience?'),
+ docsLinkText: s__('Runners|Where’s my project ID in Google Cloud?'),
projectIdLabel: s__('Runners|Google Cloud project ID'),
- projectRunnerTitle: s__('Runners|Project for runner'),
- projectIdHelpText: s__('Runners|Project for the new runner.'),
+ helpText: s__('Runners|Project for the new runner.'),
+ configurationLabel: s__('Runners|Configuration'),
+ configurationHelpText: s__(
+ "Runners|If you haven't already, configure your Google Cloud project to connect to this GitLab project and use the runner.",
+ ),
+ accordionTitle: s__('Runners|Configuration instructions'),
continueBtnText: s__('Runners|Continue to runner details'),
},
components: {
- GlAlert,
+ CodeBlock,
+ GlAccordion,
+ GlAccordionItem,
GlButton,
- GlDrawer,
GlForm,
GlFormGroup,
GlFormInput,
@@ -53,133 +42,64 @@ export default {
},
data() {
return {
- cloudConnection: {
- resourcePath: '',
- projectId: '',
- },
- showWifDrawer: false,
- showCloudProjectDrawer: false,
+ projectId: '',
+ /* eslint-disable @gitlab/require-i18n-strings */
+ configurationScript: `hello world.`,
+ /* eslint-enable @gitlab/require-i18n-strings */
};
},
- methods: {
- onWifSetupClick() {
- if (this.showCloudProjectDrawer) {
- this.showCloudProjectDrawer = false;
- }
-
- this.showWifDrawer = true;
- },
- onCloudSetupClick() {
- if (this.showWifDrawer) {
- this.showWifDrawer = false;
- }
-
- this.showCloudProjectDrawer = true;
- },
- closeDrawers() {
- this.showWifDrawer = false;
- this.showCloudProjectDrawer = false;
- },
- },
};
</script>
<template>
<div>
- <h2 class="gl-font-size-h2 gl-mb-4">{{ $options.i18n.title }}</h2>
-
- <div class="gl-mb-5 gl-pt-1">
- <h2 class="gl-font-size-h2 gl-mb-3">{{ $options.i18n.wifTitle }}</h2>
- <gl-alert :dismissible="false">{{ $options.i18n.wifAlertText }}</gl-alert>
- </div>
-
- <p class="gl-mb-3">{{ $options.i18n.wifSetupDescription }}</p>
- <gl-button class="gl-mb-5" data-testid="wif-setup-btn" @click="onWifSetupClick">
- {{ $options.i18n.wifSetupText }}
- </gl-button>
+ <h2 class="gl-font-size-h2 gl-mb-5">{{ $options.i18n.title }}</h2>
<gl-form>
- <gl-form-group label-for="resource-name">
+ <gl-form-group label-for="project-id">
<template #label>
- <div class="gl-mb-3">{{ $options.i18n.iapLabel }}</div>
- <span class="gl-font-weight-normal">{{ $options.i18n.iapHelpText }}</span>
+ <div class="gl-mb-3">{{ $options.i18n.projectIdLabel }}</div>
+ <span class="gl-font-weight-normal">{{ $options.i18n.helpText }}</span>
</template>
<template #description>
- <span class="gl-display-block gl-mb-2">{{ $options.i18n.iapDescription }}</span>
+ <span class="gl-display-block gl-mb-2">{{ $options.i18n.description }}</span>
<gl-link
href="https://cloud.google.com/resource-manager/docs/creating-managing-projects#identifying_projects"
target="_blank"
>
- {{ $options.i18n.iapDocsLink }}
+ {{ $options.i18n.docsLinkText }}
<gl-icon name="external-link" />
</gl-link>
</template>
<gl-form-input
- id="resource-name"
- v-model="cloudConnection.resourcePath"
+ id="project-id"
+ v-model="projectId"
type="text"
- data-testid="resource-input"
+ data-testid="project-id-input"
/>
</gl-form-group>
</gl-form>
- <h2 class="gl-font-size-h2 gl-mb-3">{{ $options.i18n.projectRunnerTitle }}</h2>
-
- <p class="gl-mb-3">{{ $options.i18n.cloudSetupDescription }}</p>
- <gl-button class="gl-mb-5" data-testid="cloud-setup-btn" @click="onCloudSetupClick">
- {{ $options.i18n.cloudSetupText }}
- </gl-button>
+ <label>{{ $options.i18n.configurationLabel }}</label>
+ <p>{{ $options.i18n.configurationHelpText }}</p>
- <gl-form>
- <gl-form-group label-for="project-id">
- <template #label>
- <div class="gl-mb-3">{{ $options.i18n.projectIdLabel }}</div>
- <span class="gl-font-weight-normal">{{ $options.i18n.projectIdHelpText }}</span>
- </template>
- <gl-form-input
- id="project-id"
- v-model="cloudConnection.projectId"
- type="text"
- data-testid="project-id-input"
+ <gl-accordion :header-level="3">
+ <gl-accordion-item :title="$options.i18n.accordionTitle" :header-level="3" visible>
+ <!-- TODO add configuration setup details https://gitlab.com/gitlab-org/gitlab/-/issues/439486 -->
+ <code-block
+ :code="configurationScript"
+ class="gl-border-1 gl-border-solid gl-border-gray-200 gl-p-3!"
/>
- </gl-form-group>
- </gl-form>
+ </gl-accordion-item>
+ </gl-accordion>
<gl-button
- class="gl-float-right gl-mt-3"
+ class="gl-mt-5"
variant="confirm"
data-testid="continue-btn"
- @click="$emit('continue', cloudConnection)"
+ @click="$emit('continue', projectId)"
>
{{ $options.i18n.continueBtnText }}
</gl-button>
-
- <gl-drawer
- :open="showWifDrawer"
- :z-index="$options.DRAWER_Z_INDEX"
- data-testid="wif-drawer"
- @close="closeDrawers"
- >
- <template #title>
- <h2 class="gl-font-size-h2">{{ $options.i18n.wifSetupText }}</h2>
- </template>
- <template #default>
- <!-- todo, show script to copy -->
- </template>
- </gl-drawer>
-
- <gl-drawer
- :open="showCloudProjectDrawer"
- :z-index="$options.DRAWER_Z_INDEX"
- data-testid="cloud-drawer"
- @close="closeDrawers"
- >
- <template #title>
- <h2 class="gl-font-size-h2">{{ $options.i18n.cloudSetupText }}</h2>
- </template>
- <template #default>
- <!-- todo, show script to copy -->
- </template>
- </gl-drawer>
</div>
</template>
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 5410ad5b65a8e9cdcf80a934c1928256ac114786..be7ddffd6fdb5d03bf075ed22f5769e63c959e30 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -42358,6 +42358,9 @@ msgstr ""
msgid "Runners|Configuration"
msgstr ""
+msgid "Runners|Configuration instructions"
+msgstr ""
+
msgid "Runners|Containers"
msgstr ""
@@ -42492,15 +42495,12 @@ msgstr ""
msgid "Runners|Go to runners page"
msgstr ""
-msgid "Runners|Google Cloud connection"
+msgid "Runners|Google Cloud"
msgstr ""
msgid "Runners|Google Cloud project ID"
msgstr ""
-msgid "Runners|Google Cloud workload identity federation must be set up for secure access without accounts or keys."
-msgstr ""
-
msgid "Runners|Group"
msgstr ""
@@ -42513,15 +42513,15 @@ msgstr ""
msgid "Runners|IP Address"
msgstr ""
-msgid "Runners|Identity provider audience"
-msgstr ""
-
msgid "Runners|Idle"
msgstr ""
msgid "Runners|If both settings are disabled, new runners cannot be registered."
msgstr ""
+msgid "Runners|If you haven't already, configure your Google Cloud project to connect to this GitLab project and use the runner."
+msgstr ""
+
msgid "Runners|In GitLab Runner 15.6, the use of registration tokens and runner parameters in the 'register' command was deprecated. They have been replaced by authentication tokens. %{linkStart}How does this impact my current registration workflow?%{linkEnd}"
msgstr ""
@@ -42685,9 +42685,6 @@ msgstr ""
msgid "Runners|Project"
msgstr ""
-msgid "Runners|Project for runner"
-msgstr ""
-
msgid "Runners|Project for the new runner."
msgstr ""
@@ -42880,15 +42877,6 @@ msgstr ""
msgid "Runners|Separate multiple tags with a comma. For example, %{example}."
msgstr ""
-msgid "Runners|Set up google cloud project"
-msgstr ""
-
-msgid "Runners|Set up workload identity federation"
-msgstr ""
-
-msgid "Runners|Set up your Google Cloud project to use the runner. To improve security, use a dedicated Google Cloud project for CI/CD, separate from resources and identity management projects."
-msgstr ""
-
msgid "Runners|Shared runners are disabled in the group settings."
msgstr ""
@@ -42955,9 +42943,6 @@ msgstr ""
msgid "Runners|The %{boldStart}runner authentication token%{boldEnd} is no longer visible, it is stored in the %{codeStart}config.toml%{codeEnd} if you have registered the runner."
msgstr ""
-msgid "Runners|The full resource name of the workload identity provider in Google Cloud."
-msgstr ""
-
msgid "Runners|The project, group or instance where the runner was registered. Instance runners are always owned by Administrator."
msgstr ""
@@ -42981,9 +42966,6 @@ msgstr ""
msgid "Runners|These runners are assigned to this project."
msgstr ""
-msgid "Runners|These workload identity federation settings are also used by the Google Artifact Registry integration."
-msgstr ""
-
msgid "Runners|This group currently has 1 stale runner."
msgid_plural "Runners|This group currently has %d stale runners."
msgstr[0] ""
@@ -43016,6 +42998,9 @@ msgstr ""
msgid "Runners|This runner is outdated, an upgrade is recommended"
msgstr ""
+msgid "Runners|To improve security, use a dedicated project for CI/CD, separate from resources and identity management projects."
+msgstr ""
+
msgid "Runners|To install Runner in Kubernetes follow the instructions described in the GitLab documentation."
msgstr ""
@@ -43103,7 +43088,7 @@ msgstr ""
msgid "Runners|Wait time to pick a job"
msgstr ""
-msgid "Runners|Where’s my identity provider audience?"
+msgid "Runners|Where’s my project ID in Google Cloud?"
msgstr ""
msgid "Runners|Windows 2019 Shell with manual scaling and optional scheduling. %{percentage} spot."
@@ -43112,9 +43097,6 @@ msgstr ""
msgid "Runners|Windows 2019 Shell with manual scaling and optional scheduling. Non-spot."
msgstr ""
-msgid "Runners|Workload identity federation"
-msgstr ""
-
msgid "Runners|Yes, disable shared runners"
msgstr ""
diff --git a/spec/frontend/ci/runner/components/runner_cloud_connection_form_spec.js b/spec/frontend/ci/runner/components/runner_cloud_connection_form_spec.js
index a7284136433d06cadf3d9e4c3dd5a7a2dd8f9141..8c969f91c08db97dc03dbd54534195be4a155cc3 100644
--- a/spec/frontend/ci/runner/components/runner_cloud_connection_form_spec.js
+++ b/spec/frontend/ci/runner/components/runner_cloud_connection_form_spec.js
@@ -1,19 +1,14 @@
-import { GlLink } from '@gitlab/ui';
-import { nextTick } from 'vue';
+import { GlAccordion, GlLink } from '@gitlab/ui';
import { shallowMountExtended, mountExtended } from 'helpers/vue_test_utils_helper';
import RunnerCloudConnectionForm from '~/ci/runner/components/runner_cloud_connection_form.vue';
describe('Runner Cloud Connection Form', () => {
let wrapper;
- const findWifSetupBtn = () => wrapper.findByTestId('wif-setup-btn');
- const findCloudSetupBtn = () => wrapper.findByTestId('cloud-setup-btn');
const findContinueBtn = () => wrapper.findByTestId('continue-btn');
- const findCloudDrawer = () => wrapper.findByTestId('cloud-drawer');
- const findWifDrawer = () => wrapper.findByTestId('wif-drawer');
- const findResourceInput = () => wrapper.findByTestId('resource-input');
const findProjectIdInput = () => wrapper.findByTestId('project-id-input');
const findDocsLink = () => wrapper.findComponent(GlLink);
+ const findConfigurationInstructions = () => wrapper.findComponent(GlAccordion);
const createComponent = (mountFn = shallowMountExtended) => {
wrapper = mountFn(RunnerCloudConnectionForm);
@@ -22,54 +17,9 @@ describe('Runner Cloud Connection Form', () => {
it('displays all inputs', () => {
createComponent();
- expect(findResourceInput().exists()).toBe(true);
expect(findProjectIdInput().exists()).toBe(true);
});
- it('opens wif drawer', async () => {
- createComponent();
-
- expect(findWifDrawer().props('open')).toBe(false);
-
- findWifSetupBtn().vm.$emit('click');
-
- await nextTick();
-
- expect(findWifDrawer().props('open')).toBe(true);
- });
-
- it('opens google cloud project drawer', async () => {
- createComponent();
-
- expect(findCloudDrawer().props('open')).toBe(false);
-
- findCloudSetupBtn().vm.$emit('click');
-
- await nextTick();
-
- expect(findCloudDrawer().props('open')).toBe(true);
- });
-
- it('two drawers cannot be displayed at once', async () => {
- createComponent();
-
- expect(findWifDrawer().props('open')).toBe(false);
- expect(findCloudDrawer().props('open')).toBe(false);
-
- findWifSetupBtn().vm.$emit('click');
-
- await nextTick();
-
- expect(findWifDrawer().props('open')).toBe(true);
-
- findCloudSetupBtn().vm.$emit('click');
-
- await nextTick();
-
- expect(findWifDrawer().props('open')).toBe(false);
- expect(findCloudDrawer().props('open')).toBe(true);
- });
-
it('contains external docs link', () => {
createComponent(mountExtended);
@@ -78,17 +28,21 @@ describe('Runner Cloud Connection Form', () => {
);
});
- it('emits cloud connection data', () => {
+ it('emits project id', () => {
createComponent(mountExtended);
- const resourcePath = 'resource-path';
const projectId = '12';
- findResourceInput().vm.$emit('input', resourcePath);
findProjectIdInput().vm.$emit('input', projectId);
findContinueBtn().vm.$emit('click');
- expect(wrapper.emitted()).toMatchObject({ continue: [[{ projectId, resourcePath }]] });
+ expect(wrapper.emitted()).toMatchObject({ continue: [[projectId]] });
+ });
+
+ it('displays configuration instructions', () => {
+ createComponent();
+
+ expect(findConfigurationInstructions().exists()).toBe(true);
});
});