Guided setup for Google Cloud IAM integration - 3

Step 3 to implement the Google Cloud identity and access management
(IAM) integration. In this step we create an empty state, a guide and
manual setups. There is a way to navigate between the different
components.

Changelog: changed
EE: true

ee/app/assets/javascripts/integrations/edit/components/google_cloud_iam/constants.js

+export const STATE_EMPTY = 'empty';
+export const STATE_FORM = 'form';
+export const STATE_GUIDED = 'guided';
+export const STATE_INITIAL = 'initial';
+export const STATE_MANUAL = 'manual';

ee/app/assets/javascripts/integrations/edit/components/google_cloud_iam/empty_state.vue

+<script>
+import { GlButton, GlEmptyState, GlIcon, GlLink, GlSprintf } from '@gitlab/ui';
+import EmptyAdminAppsSvg from '@gitlab/svgs/dist/illustrations/empty-state/empty-admin-apps-md.svg';
+import InviteMembersTrigger from '~/invite_members/components/invite_members_trigger.vue';
+import { STATE_GUIDED, STATE_MANUAL } from './constants';
+
+export default {
+  components: {
+    GlButton,
+    GlIcon,
+    GlEmptyState,
+    GlLink,
+    InviteMembersTrigger,
+    GlSprintf,
+  },
+  methods: {
+    show(type) {
+      this.$emit('show', type);
+    },
+  },
+  EmptyAdminAppsSvg,
+  STATE_GUIDED,
+  STATE_MANUAL,
+};
+</script>
+
+<template>
+  <gl-empty-state
+    :svg-path="$options.EmptyAdminAppsSvg"
+    :title="s__('GoogleCloudPlatformService|Connect to Google Cloud')"
+  >
+    <template #description>
+      <gl-sprintf
+        :message="
+          s__(
+            'GoogleCloudPlatformService|Connect to Google Cloud with workload identity federation. Select %{strongStart}Guided setup%{strongEnd} if you can manage workload identity federation in Google Cloud. %{linkStart}What are the required permissions?%{linkEnd}',
+          )
+        "
+      >
+        <template #strong="{ content }">
+          <strong>{{ content }}</strong>
+        </template>
+        <template #link="{ content }">
+          <gl-link
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://cloud.google.com/iam/docs/manage-workload-identity-pools-providers#required-roles"
+          >
+            {{ content }}
+            <gl-icon name="external-link" :aria-label="__('(external link)')" />
+          </gl-link>
+        </template>
+      </gl-sprintf>
+    </template>
+    <template #actions>
+      <div class="gl-display-flex gl-gap-3">
+        <gl-button variant="confirm" @click="show($options.STATE_GUIDED)">{{
+          s__('GoogleCloudPlatformService|Guided setup')
+        }}</gl-button>
+        <gl-button @click="show($options.STATE_MANUAL)">{{
+          s__('GoogleCloudPlatformService|Manual setup')
+        }}</gl-button>
+        <invite-members-trigger
+          :display-text="s__('GoogleCloudPlatformService|Invite member to set up')"
+          trigger-source="google_cloud_artifact_registry_setup"
+        />
+      </div>
+    </template>
+  </gl-empty-state>
+</template>

ee/app/assets/javascripts/integrations/edit/components/google_cloud_iam/guided_setup.vue

+<script>
+import { GlButton, GlIcon, GlLink, GlSprintf } from '@gitlab/ui';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import { STATE_MANUAL } from './constants';
+
+export default {
+  components: {
+    GlButton,
+    GlIcon,
+    GlLink,
+    GlSprintf,
+    ClipboardButton,
+  },
+  curlLine: `export GL_PAT=<your_access_token>
+curl --request GET
+  --data 'google_cloud_project_id=<your_google_cloud_project_id>'
+  --header "PRIVATE-TOKEN: $GL_PAT"
+  --url "https://gitlab.com/api/v4/projects/<your_gitlab_project_id>/google_cloud/setup/wlif.sh"
+| bash`,
+  STATE_MANUAL,
+};
+</script>
+
+<template>
+  <div>
+    <h3>{{ s__('GoogleCloudPlatformService|Guided setup') }}</h3>
+    <p>
+      <gl-sprintf
+        :message="
+          s__(
+            'GoogleCloudPlatformService|%{linkStart}Switch to the manual setup%{linkEnd} if you cannot manage workload identity federation in Google Cloud. %{link2Start}What are the required permissions?%{link2End}',
+          )
+        "
+      >
+        <template #link="{ content }">
+          <gl-link @click="$emit('show', $options.STATE_MANUAL)">{{ content }}</gl-link>
+        </template>
+        >
+        <template #link2="{ content }">
+          <gl-link
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://cloud.google.com/iam/docs/manage-workload-identity-pools-providers#required-roles"
+          >
+            {{ content }}
+            <gl-icon name="external-link" :aria-label="__('(external link)')" />
+          </gl-link>
+        </template>
+      </gl-sprintf>
+    </p>
+
+    <h4>{{ s__('GoogleCloudPlatformService|Instructions') }}</h4>
+    <p>
+      <gl-sprintf
+        :message="
+          s__(
+            'GoogleCloudPlatformService|Before you begin, %{linkStart}install the Google Cloud CLI%{linkEnd}.',
+          )
+        "
+      >
+        <template #link="{ content }">
+          <gl-link
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://cloud.google.com/sdk/docs/install#installation_instructions"
+          >
+            {{ content }}
+            <gl-icon name="external-link" :aria-label="__('(external link)')" />
+          </gl-link>
+        </template>
+      </gl-sprintf>
+    </p>
+    <p>
+      {{
+        s__(
+          'GoogleCloudPlatformService|Run the following command to set up and connect to your Google Cloud project with workload identity federation.',
+        )
+      }}
+    </p>
+    <ul>
+      <li>
+        <gl-sprintf
+          :message="
+            s__(
+              'GoogleCloudPlatformService|Replace %{codeStart}your_access_token%{codeEnd} with a %{linkStart}new personal access token%{linkEnd} with the %{strongStart}api%{strongEnd} scope. This token sets up your Google Cloud IAM integration in GitLab.',
+            )
+          "
+        >
+          <template #code="{ content }">
+            <code>&lt;{{ content }}&gt;</code>
+          </template>
+          <template #link="{ content }">
+            <gl-link target="_blank" href="/-/user_settings/personal_access_tokens">{{
+              content
+            }}</gl-link>
+          </template>
+          <template #strong="{ content }">
+            <strong>{{ content }}</strong>
+          </template>
+        </gl-sprintf>
+      </li>
+      <li>
+        <gl-sprintf
+          :message="
+            s__(
+              'GoogleCloudPlatformService|Replace %{codeStart}your_google_cloud_project_id%{codeEnd} with your Google Cloud project ID. To improve security, use a dedicated project for identity management, separate from resources and CI/CD projects. %{linkStart}Where’s my project ID?%{linkEnd}',
+            )
+          "
+        >
+          <template #code="{ content }">
+            <code>&lt;{{ content }}&gt;</code>
+          </template>
+          <template #link="{ content }">
+            <gl-link
+              href="https://cloud.google.com/resource-manager/docs/creating-managing-projects#identifying_projects"
+              target="_blank"
+              rel="noopener noreferrer"
+              >{{ content }}
+              <gl-icon name="external-link" :aria-label="__('(external link)')" />
+            </gl-link>
+          </template>
+        </gl-sprintf>
+      </li>
+      <li>{{ s__('GoogleCloudPlatformService|You might be prompted to sign in to Google.') }}</li>
+    </ul>
+    <div class="position-relative">
+      <pre class="gl-w-full">{{ $options.curlLine }}</pre>
+      <clipboard-button
+        :text="$options.curlLine"
+        :title="__('Copy')"
+        category="tertiary"
+        class="gl-display-none gl-md-display-flex position-absolute position-top-0 position-right-0 gl-m-3"
+      />
+    </div>
+    <p>
+      <gl-sprintf
+        :message="
+          s__(
+            'GoogleCloudPlatformService|After Google Cloud workload identity federation has been set up, select %{strongStart}Continue%{strongEnd}.',
+          )
+        "
+      >
+        <template #strong="{ content }">
+          <strong>{{ content }}</strong>
+        </template>
+      </gl-sprintf>
+    </p>
+
+    <div class="gl-mt-6 gl-display-flex gl-gap-3">
+      <gl-button variant="confirm" @click="$emit('show', 'form')">{{ __('Continue') }}</gl-button>
+      <gl-button @click="$emit('show', 'empty')">{{ __('Cancel') }}</gl-button>
+    </div>
+  </div>
+</template>

ee/app/assets/javascripts/integrations/edit/components/google_cloud_iam/manual_setup.vue

+<script>
+import { GlIcon, GlLink, GlSprintf } from '@gitlab/ui';
+import InviteMembersTrigger from '~/invite_members/components/invite_members_trigger.vue';
+import { STATE_GUIDED } from './constants';
+
+export default {
+  components: {
+    GlIcon,
+    GlLink,
+    GlSprintf,
+    InviteMembersTrigger,
+  },
+  STATE_GUIDED,
+};
+</script>
+
+<template>
+  <div>
+    <h3>{{ s__('GoogleCloudPlatformService|Manual setup') }}</h3>
+    <p>
+      <gl-sprintf
+        :message="
+          s__(
+            'GoogleCloudPlatformService|%{linkStart}Switch to the guided setup%{linkEnd} if you can manage workload identity federation in Google Cloud. %{link2Start}What are the required permissions?%{link2End}',
+          )
+        "
+      >
+        <template #link="{ content }">
+          <gl-link @click="$emit('show', $options.STATE_GUIDED)">{{ content }}</gl-link>
+        </template>
+        >
+        <template #link2="{ content }">
+          <gl-link
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://cloud.google.com/iam/docs/manage-workload-identity-pools-providers#required-roles"
+          >
+            {{ content }}
+            <gl-icon name="external-link" :aria-label="__('(external link)')" />
+          </gl-link>
+        </template>
+      </gl-sprintf>
+    </p>
+    <h4>{{ s__('GoogleCloudPlatformService|Instructions') }}</h4>
+    <ol>
+      <li>
+        <gl-sprintf
+          :message="
+            s__(
+              'GoogleCloudPlatformService|Share the following information with someone that can manage Google Cloud workload identity federation. Or %{linkStart}invite them%{linkEnd} to set up.',
+            )
+          "
+        >
+          <template #link="{ content }">
+            <invite-members-trigger
+              :display-text="content"
+              class="gl-vertical-align-baseline"
+              variant="link"
+              trigger-source="google_cloud_artifact_registry_setup"
+            />
+          </template>
+          >
+        </gl-sprintf>
+      </li>
+      <ol type="a">
+        <li>
+          {{ s__('GoogleCloudPlatformService|The setup instructions page') }}
+        </li>
+        <li>
+          {{ s__('GoogleCloudPlatformService|Your GitLab project ID') }}
+        </li>
+        <li>
+          {{
+            s__('GoogleCloudPlatformService|Your workload identify federation (WLIF) issuer URL.')
+          }}
+        </li>
+      </ol>
+      <li>
+        {{
+          s__(
+            'GoogleCloudPlatformService|After Google Cloud workload identity federation has been set up, enter the details in the following form.',
+          )
+        }}
+      </li>
+    </ol>
+    <hr class="gl-border-gray-100" />
+  </div>
+</template>

ee/app/assets/javascripts/integrations/edit/components/sections/google_cloud_iam.vue

 <script>
 // eslint-disable-next-line no-restricted-imports
 import { mapGetters } from 'vuex';
+import {
+  STATE_EMPTY,
+  STATE_FORM,
+  STATE_GUIDED,
+  STATE_INITIAL,
+  STATE_MANUAL,
+} from '../google_cloud_iam/constants';
+import EmptyState from '../google_cloud_iam/empty_state.vue';
 import GcIamForm from '../google_cloud_iam/form.vue';
+import GuidedSetup from '../google_cloud_iam/guided_setup.vue';
+import ManualSetup from '../google_cloud_iam/manual_setup.vue';
 
 export default {
   name: 'IntegrationSectionGoogleCloudIAM',
   components: {
+    EmptyState,
     GcIamForm,
+    GuidedSetup,
+    ManualSetup,
+  },
+  data() {
+    return {
+      show: STATE_INITIAL,
+    };
   },
   computed: {
     ...mapGetters(['propsSource']),
     dynamicFields() {
       return this.propsSource.fields;
     },
+    isEditable() {
+      return [STATE_FORM, STATE_MANUAL].includes(this.show);
+    },
+    isFormEmpty() {
+      return this.propsSource.fields.every((field) => !field.value);
+    },
+  },
+  watch: {
+    isEditable: {
+      handler(editable) {
+        this.propsSource.editable = editable;
+      },
+      immediate: true,
+    },
   },
+  created() {
+    this.show = this.isFormEmpty ? 'empty' : 'form';
+  },
+  methods: {
+    onShow(type) {
+      this.show = type;
+    },
+  },
+  STATE_EMPTY,
+  STATE_GUIDED,
+  STATE_MANUAL,
 };
 </script>
 
 <template>
-  <div>
-    <gc-iam-form :fields="dynamicFields" />
+  <div aria-live="polite">
+    <empty-state v-if="show === $options.STATE_EMPTY" @show="onShow" />
+    <guided-setup v-else-if="show === $options.STATE_GUIDED" @show="onShow" />
+    <manual-setup v-else-if="show === $options.STATE_MANUAL" @show="onShow" />
+
+    <gc-iam-form v-if="isEditable" :fields="dynamicFields" />
   </div>
 </template>

ee/spec/features/groups/integrations/google_cloud_platform/user_activates_workload_identity_federation_spec.rb

@@ -13,6 +13,7 @@
 
   it 'activates integration', :js do
     visit_group_integration(integration.title)
+    click_on s_('GoogleCloudPlatformService|Manual setup')
 
     fill_in(
       s_('GoogleCloudPlatformService|Project ID'),

ee/spec/features/projects/integrations/google_cloud_platform/user_activates_workload_identity_federation_spec.rb

@@ -13,6 +13,7 @@
 
   it 'activates integration', :js do
     visit_project_integration(integration.title)
+    click_on s_('GoogleCloudPlatformService|Manual setup')
 
     fill_in(
       s_('GoogleCloudPlatformService|Project ID'),

ee/spec/frontend/integrations/edit/components/google_cloud_iam/empty_state_spec.js

+import { GlButton, GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui';
+import EmptyAdminAppsSvg from '@gitlab/svgs/dist/illustrations/empty-state/empty-admin-apps-md.svg';
+import { shallowMount } from '@vue/test-utils';
+import {
+  STATE_GUIDED,
+  STATE_MANUAL,
+} from 'ee/integrations/edit/components/google_cloud_iam/constants';
+import EmptyState from 'ee/integrations/edit/components/google_cloud_iam/empty_state.vue';
+import InviteMembersTrigger from '~/invite_members/components/invite_members_trigger.vue';
+
+describe('EmptyState', () => {
+  let wrapper;
+  const createComponent = () => {
+    wrapper = shallowMount(EmptyState, {
+      stubs: {
+        GlEmptyState,
+        GlSprintf,
+      },
+    });
+  };
+
+  const findGlEmptyState = () => wrapper.findComponent(GlEmptyState);
+  const findDescription = () => wrapper.find('p');
+  const findLink = () => wrapper.findComponent(GlLink);
+  const findInviteMembersTrigger = () => wrapper.findComponent(InviteMembersTrigger);
+  const findButton = (variant) =>
+    wrapper.findAllComponents(GlButton).filter((button) => button.props('variant') === variant);
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  it('renders GlEmptyState', () => {
+    expect(findGlEmptyState().props()).toMatchObject({
+      svgPath: EmptyAdminAppsSvg,
+      title: 'Connect to Google Cloud',
+    });
+  });
+
+  it('renders description', () => {
+    expect(findDescription().text()).toContain(
+      'Connect to Google Cloud with workload identity federation. Select Guided setup if you can manage workload identity federation in Google Cloud.',
+    );
+  });
+
+  it('renders link to Google Cloud documentation', () => {
+    const link = findLink();
+    expect(link.attributes()).toMatchObject({
+      href:
+        'https://cloud.google.com/iam/docs/manage-workload-identity-pools-providers#required-roles',
+      rel: 'noopener noreferrer',
+      target: '_blank',
+    });
+    expect(link.text()).toBe('What are the required permissions?');
+  });
+
+  describe('Guided setup button', () => {
+    let guidedButton;
+
+    beforeEach(() => {
+      guidedButton = findButton('confirm').at(0);
+    });
+
+    it('renders variant confirm button', () => {
+      expect(guidedButton.text()).toBe('Guided setup');
+    });
+
+    it('emits `show` event', () => {
+      expect(wrapper.emitted().show).toBeUndefined();
+
+      guidedButton.vm.$emit('click');
+
+      expect(wrapper.emitted().show).toHaveLength(1);
+      expect(wrapper.emitted().show[0]).toContain(STATE_GUIDED);
+    });
+  });
+
+  describe('Manual setup button', () => {
+    let manualButton;
+
+    beforeEach(() => {
+      manualButton = findButton('default').at(0);
+    });
+
+    it('renders variant default button', () => {
+      expect(manualButton.text()).toBe('Manual setup');
+    });
+
+    it('emits `show` event', () => {
+      expect(wrapper.emitted().show).toBeUndefined();
+
+      manualButton.vm.$emit('click');
+
+      expect(wrapper.emitted().show).toHaveLength(1);
+      expect(wrapper.emitted().show[0]).toContain(STATE_MANUAL);
+    });
+  });
+
+  it('renders an InviteMembersTrigger component', () => {
+    expect(findInviteMembersTrigger().exists()).toBe(true);
+  });
+});

ee/spec/frontend/integrations/edit/components/google_cloud_iam/form_spec.js

 import { shallowMount } from '@vue/test-utils';
-import GcIamForm from 'ee_component/integrations/edit/components/google_cloud_iam/form.vue';
+import GcIamForm from 'ee/integrations/edit/components/google_cloud_iam/form.vue';
 import Configuration from '~/integrations/edit/components/sections/configuration.vue';
 import Connection from '~/integrations/edit/components/sections/connection.vue';
 import { createStore } from '~/integrations/edit/store';

ee/spec/frontend/integrations/edit/components/google_cloud_iam/guided_setup_spec.js

+import { GlButton, GlLink, GlSprintf } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import { STATE_MANUAL } from 'ee/integrations/edit/components/google_cloud_iam/constants';
+import GuidedSetup from 'ee/integrations/edit/components/google_cloud_iam/guided_setup.vue';
+
+describe('GuidedSetup', () => {
+  let wrapper;
+  const createComponent = () => {
+    wrapper = shallowMount(GuidedSetup, { stubs: { GlSprintf } });
+  };
+
+  const findFirstLink = () => wrapper.findAllComponents(GlLink).at(0);
+  const findButton = (variant) =>
+    wrapper.findAllComponents(GlButton).filter((button) => button.props('variant') === variant);
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  describe('Switch to manual setup link', () => {
+    let switchLink;
+
+    beforeEach(() => {
+      switchLink = findFirstLink();
+    });
+
+    it('renders link', () => {
+      expect(switchLink.text()).toBe('Switch to the manual setup');
+    });
+
+    it('emits `show` event', () => {
+      expect(wrapper.emitted().show).toBeUndefined();
+
+      switchLink.vm.$emit('click');
+
+      expect(wrapper.emitted().show).toHaveLength(1);
+      expect(wrapper.emitted().show[0]).toContain(STATE_MANUAL);
+    });
+  });
+
+  describe('Continue button', () => {
+    let continueButton;
+
+    beforeEach(() => {
+      continueButton = findButton('confirm').at(0);
+    });
+
+    it('renders variant confirm button', () => {
+      expect(continueButton.text()).toBe('Continue');
+    });
+
+    it('emits `show` event', () => {
+      expect(wrapper.emitted().show).toBeUndefined();
+
+      continueButton.vm.$emit('click');
+
+      expect(wrapper.emitted().show).toHaveLength(1);
+      expect(wrapper.emitted().show[0]).toContain('form');
+    });
+  });
+
+  describe('Cancel button', () => {
+    let cancelButton;
+
+    beforeEach(() => {
+      cancelButton = findButton('default').at(0);
+    });
+
+    it('renders variant confirm button', () => {
+      expect(cancelButton.text()).toBe('Cancel');
+    });
+
+    it('emits `show` event', () => {
+      expect(wrapper.emitted().show).toBeUndefined();
+
+      cancelButton.vm.$emit('click');
+
+      expect(wrapper.emitted().show).toHaveLength(1);
+      expect(wrapper.emitted().show[0]).toContain('empty');
+    });
+  });
+});

ee/spec/frontend/integrations/edit/components/google_cloud_iam/manual_setup_spec.js

+import { GlLink, GlSprintf } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import { STATE_GUIDED } from 'ee/integrations/edit/components/google_cloud_iam/constants';
+import ManualSetup from 'ee/integrations/edit/components/google_cloud_iam/manual_setup.vue';
+
+describe('ManualSetup', () => {
+  let wrapper;
+  const createComponent = () => {
+    wrapper = shallowMount(ManualSetup, { stubs: { GlSprintf } });
+  };
+
+  const findFirstLink = () => wrapper.findAllComponents(GlLink).at(0);
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  describe('Switch to guided setup link', () => {
+    let switchLink;
+
+    beforeEach(() => {
+      switchLink = findFirstLink();
+    });
+
+    it('renders link', () => {
+      expect(switchLink.text()).toBe('Switch to the guided setup');
+    });
+
+    it('emits `show` event', () => {
+      expect(wrapper.emitted().show).toBeUndefined();
+
+      switchLink.vm.$emit('click');
+
+      expect(wrapper.emitted().show).toHaveLength(1);
+      expect(wrapper.emitted().show[0]).toContain(STATE_GUIDED);
+    });
+  });
+});

ee/spec/frontend/integrations/edit/components/sections/google_cloud_iam_spec.js

+import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import IntegrationSectionGoogleCloudIAM from 'ee_component/integrations/edit/components/sections/google_cloud_iam.vue';
-import GcIamForm from 'ee_component/integrations/edit/components/google_cloud_iam/form.vue';
+import {
+  STATE_EMPTY,
+  STATE_GUIDED,
+  STATE_MANUAL,
+} from 'ee/integrations/edit/components/google_cloud_iam/constants';
+import EmptyState from 'ee/integrations/edit/components/google_cloud_iam/empty_state.vue';
+import GcIamForm from 'ee/integrations/edit/components/google_cloud_iam/form.vue';
+import GuidedSetup from 'ee/integrations/edit/components/google_cloud_iam/guided_setup.vue';
+import ManualSetup from 'ee/integrations/edit/components/google_cloud_iam/manual_setup.vue';
 import { createStore } from '~/integrations/edit/store';
 
 describe('IntegrationSectionGoogleCloudIAM', () => {
   let wrapper;
 
-  const createComponent = () => {
+  const createComponent = ({ fields = [] } = {}) => {
     const store = createStore({
       customState: {
-        fields: [],
+        fields,
       },
     });
 
@@ -18,11 +27,61 @@ describe('IntegrationSectionGoogleCloudIAM', () => {
     });
   };
 
+  const findEmptyState = () => wrapper.findComponent(EmptyState);
   const findGcIamForm = () => wrapper.findComponent(GcIamForm);
+  const findGuidedSetup = () => wrapper.findComponent(GuidedSetup);
+  const findManualSetup = () => wrapper.findComponent(ManualSetup);
 
-  it('renders Google Cloud IAM form', () => {
-    createComponent();
+  describe('when Google Cloud IAM form is empty', () => {
+    it('renders the empty state', () => {
+      createComponent();
 
-    expect(findGcIamForm().exists()).toBe(true);
+      expect(findEmptyState().exists()).toBe(true);
+      expect(findGcIamForm().exists()).toBe(false);
+    });
+  });
+
+  describe('when Google Cloud IAM form is not empty', () => {
+    it('renders the Google Cloud IAM form', () => {
+      createComponent({ fields: [{ value: '' }, { value: '1' }] });
+
+      expect(findEmptyState().exists()).toBe(false);
+      expect(findGcIamForm().exists()).toBe(true);
+    });
+  });
+
+  describe('when `show` events are emitted', () => {
+    it.each`
+      initialState    | event           | componentEmitting  | hasEmptyState | hasGuidedSetup | hasManualSetup | hasGcIamForm
+      ${STATE_EMPTY}  | ${STATE_GUIDED} | ${findEmptyState}  | ${false}      | ${true}        | ${false}       | ${false}
+      ${STATE_EMPTY}  | ${STATE_MANUAL} | ${findEmptyState}  | ${false}      | ${false}       | ${true}        | ${true}
+      ${STATE_GUIDED} | ${STATE_MANUAL} | ${findGuidedSetup} | ${false}      | ${false}       | ${true}        | ${true}
+      ${STATE_MANUAL} | ${STATE_GUIDED} | ${findManualSetup} | ${false}      | ${true}        | ${false}       | ${false}
+    `(
+      "render correct components for the '$event' event",
+      async ({
+        initialState,
+        event,
+        componentEmitting,
+        hasEmptyState,
+        hasGuidedSetup,
+        hasManualSetup,
+        hasGcIamForm,
+      }) => {
+        createComponent();
+
+        // Initial state
+        findEmptyState().vm.$emit('show', initialState);
+        await nextTick();
+
+        componentEmitting().vm.$emit('show', event);
+        await nextTick();
+
+        expect(findEmptyState().exists()).toBe(hasEmptyState);
+        expect(findGuidedSetup().exists()).toBe(hasGuidedSetup);
+        expect(findManualSetup().exists()).toBe(hasManualSetup);
+        expect(findGcIamForm().exists()).toBe(hasGcIamForm);
+      },
+    );
   });
 });

locale/gitlab.pot

@@ -23619,12 +23619,33 @@ msgstr ""
 msgid "GoogleArtifactRegistry|Your Google Cloud project must have specific Identity and Access Management (IAM) policies to use the Artifact Registry repository in this GitLab project."
 msgstr ""
+msgid "GoogleCloudPlatformService|%{linkStart}Switch to the guided setup%{linkEnd} if you can manage workload identity federation in Google Cloud. %{link2Start}What are the required permissions?%{link2End}"
+msgstr ""
+
+msgid "GoogleCloudPlatformService|%{linkStart}Switch to the manual setup%{linkEnd} if you cannot manage workload identity federation in Google Cloud. %{link2Start}What are the required permissions?%{link2End}"
+msgstr ""
+
 msgid "GoogleCloudPlatformService|%{link_start}Explore Google Cloud integration with GitLab%{link_end}, for CI/CD and more."
 msgstr ""
+msgid "GoogleCloudPlatformService|After Google Cloud workload identity federation has been set up, enter the details in the following form."
+msgstr ""
+
+msgid "GoogleCloudPlatformService|After Google Cloud workload identity federation has been set up, select %{strongStart}Continue%{strongEnd}."
+msgstr ""
+
+msgid "GoogleCloudPlatformService|Before you begin, %{linkStart}install the Google Cloud CLI%{linkEnd}."
+msgstr ""
+
+msgid "GoogleCloudPlatformService|Connect to Google Cloud"
+msgstr ""
+
 msgid "GoogleCloudPlatformService|Connect to Google Cloud with workload identity federation for secure access without accounts or keys."
 msgstr ""
+msgid "GoogleCloudPlatformService|Connect to Google Cloud with workload identity federation. Select %{strongStart}Guided setup%{strongEnd} if you can manage workload identity federation in Google Cloud. %{linkStart}What are the required permissions?%{linkEnd}"
+msgstr ""
+
 msgid "GoogleCloudPlatformService|Example: %{code_open}314053285323%{code_close}"
 msgstr ""
@@ -23649,6 +23670,9 @@ msgstr ""
 msgid "GoogleCloudPlatformService|Google Cloud project number for the Workload Identity Federation."
 msgstr ""
+msgid "GoogleCloudPlatformService|Guided setup"
+msgstr ""
+
 msgid "GoogleCloudPlatformService|ID of the Workload Identity Pool provider."
 msgstr ""
@@ -23658,6 +23682,12 @@ msgstr ""
 msgid "GoogleCloudPlatformService|Identify the Google Cloud project with the workload identity pool and provider. %{linkStart}Where are my project ID and project number?%{linkEnd}"
 msgstr ""
+msgid "GoogleCloudPlatformService|Instructions"
+msgstr ""
+
+msgid "GoogleCloudPlatformService|Invite member to set up"
+msgstr ""
+
 msgid "GoogleCloudPlatformService|Manage permissions for Google Cloud resources with Identity and Access Management (IAM)."
 msgstr ""
@@ -23667,6 +23697,9 @@ msgstr ""
 msgid "GoogleCloudPlatformService|Manage your artifacts in Google Artifact Registry."
 msgstr ""
+msgid "GoogleCloudPlatformService|Manual setup"
+msgstr ""
+
 msgid "GoogleCloudPlatformService|Pool ID"
 msgstr ""
@@ -23682,6 +23715,12 @@ msgstr ""
 msgid "GoogleCloudPlatformService|Provider ID"
 msgstr ""
+msgid "GoogleCloudPlatformService|Replace %{codeStart}your_access_token%{codeEnd} with a %{linkStart}new personal access token%{linkEnd} with the %{strongStart}api%{strongEnd} scope. This token sets up your Google Cloud IAM integration in GitLab."
+msgstr ""
+
+msgid "GoogleCloudPlatformService|Replace %{codeStart}your_google_cloud_project_id%{codeEnd} with your Google Cloud project ID. To improve security, use a dedicated project for identity management, separate from resources and CI/CD projects. %{linkStart}Where’s my project ID?%{linkEnd}"
+msgstr ""
+
 msgid "GoogleCloudPlatformService|Repository location"
 msgstr ""
@@ -23691,6 +23730,12 @@ msgstr ""
 msgid "GoogleCloudPlatformService|Repository name"
 msgstr ""
+msgid "GoogleCloudPlatformService|Run the following command to set up and connect to your Google Cloud project with workload identity federation."
+msgstr ""
+
+msgid "GoogleCloudPlatformService|Share the following information with someone that can manage Google Cloud workload identity federation. Or %{linkStart}invite them%{linkEnd} to set up."
+msgstr ""
+
 msgid "GoogleCloudPlatformService|The Google Cloud Identity and Access Management integration is not configured for this project"
 msgstr ""
@@ -23700,12 +23745,24 @@ msgstr ""
 msgid "GoogleCloudPlatformService|The google_cloud_support feature is not available"
 msgstr ""
+msgid "GoogleCloudPlatformService|The setup instructions page"
+msgstr ""
+
 msgid "GoogleCloudPlatformService|To improve security, use a dedicated project for resources, separate from CI/CD and identity management projects. %{link_start}Where’s my project ID? %{icon}%{link_end}"
 msgstr ""
 msgid "GoogleCloudPlatformService|Workload identity federation"
 msgstr ""
+msgid "GoogleCloudPlatformService|You might be prompted to sign in to Google."
+msgstr ""
+
+msgid "GoogleCloudPlatformService|Your GitLab project ID"
+msgstr ""
+
+msgid "GoogleCloudPlatformService|Your workload identify federation (WLIF) issuer URL."
+msgstr ""
+
 msgid "GoogleCloud|Cancel"
 msgstr ""