Add latest changes from gitlab-org/gitlab@master

7 files changed, 347 insertions, 86 deletions

diff --git a/spec/features/projects/settings/registry_settings_cleanup_tags_spec.rb b/spec/features/projects/settings/registry_settings_cleanup_tags_spec.rb
index 85f9a109ed5..477c4c2e1ba 100644
--- a/spec/features/projects/settings/registry_settings_cleanup_tags_spec.rb
+++ b/spec/features/projects/settings/registry_settings_cleanup_tags_spec.rb
@@ -20,6 +20,14 @@ RSpec.describe 'Project > Settings > Packages and registries > Container registr
   end
 
   context 'as owner', :js do
+    it 'shows active tab on sidebar' do
+      subject
+
+      expect(find('.sidebar-top-level-items > li.active')).to have_content('Settings')
+      expect(find('.sidebar-sub-level-items > li.active:not(.fly-out-top-item)'))
+        .to have_content('Packages and registries')
+    end
+
     it 'shows available section' do
       subject
 
@@ -44,7 +52,8 @@ RSpec.describe 'Project > Settings > Packages and registries > Container registr
         submit_button.click
       end
 
-      expect(find('.gl-toast')).to have_content('Cleanup policy successfully saved.')
+      expect(page).to have_current_path(project_settings_packages_and_registries_path(project))
+      expect(find('.gl-alert-body')).to have_content('Cleanup policy successfully saved.')
     end
 
     it 'does not save cleanup policy submit form with invalid regex' do
diff --git a/spec/features/projects/settings/registry_settings_spec.rb b/spec/features/projects/settings/registry_settings_spec.rb
index 1ed9ff83cdd..d64570cd5cc 100644
--- a/spec/features/projects/settings/registry_settings_spec.rb
+++ b/spec/features/projects/settings/registry_settings_spec.rb
@@ -20,6 +20,14 @@ RSpec.describe 'Project > Settings > Packages and registries > Container registr
   end
 
   context 'as owner', :js do
+    it 'shows active tab on sidebar' do
+      subject
+
+      expect(find('.sidebar-top-level-items > li.active')).to have_content('Settings')
+      expect(find('.sidebar-sub-level-items > li.active:not(.fly-out-top-item)'))
+        .to have_content('Packages and registries')
+    end
+
     it 'shows available section' do
       subject
 
diff --git a/spec/frontend/clusters/agents/components/agent_integration_status_row_spec.js b/spec/frontend/clusters/agents/components/agent_integration_status_row_spec.js
new file mode 100644
index 00000000000..2af64191a88
--- /dev/null
+++ b/spec/frontend/clusters/agents/components/agent_integration_status_row_spec.js
@@ -0,0 +1,96 @@
+import { GlLink, GlIcon, GlBadge } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import AgentIntegrationStatusRow from '~/clusters/agents/components/agent_integration_status_row.vue';
+
+const defaultProps = {
+  text: 'Default integration status',
+};
+
+describe('IntegrationStatus', () => {
+  let wrapper;
+
+  const createWrapper = ({ props = {}, glFeatures = {} } = {}) => {
+    wrapper = shallowMount(AgentIntegrationStatusRow, {
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
+      provide: {
+        glFeatures,
+      },
+    });
+  };
+
+  const findLink = () => wrapper.findComponent(GlLink);
+  const findIcon = () => wrapper.findComponent(GlIcon);
+  const findBadge = () => wrapper.findComponent(GlBadge);
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('icon', () => {
+    const icon = 'status-success';
+    const iconClass = 'text-success-500';
+    it.each`
+      props                  | iconName         | iconClassName
+      ${{ icon, iconClass }} | ${icon}          | ${iconClass}
+      ${{ icon }}            | ${icon}          | ${'text-info'}
+      ${{ iconClass }}       | ${'information'} | ${iconClass}
+      ${null}                | ${'information'} | ${'text-info'}
+    `('displays correct icon when props are $props', ({ props, iconName, iconClassName }) => {
+      createWrapper({ props });
+
+      expect(findIcon().props('name')).toBe(iconName);
+      expect(findIcon().attributes('class')).toContain(iconClassName);
+    });
+  });
+
+  describe('helpUrl', () => {
+    it('displays a link with the correct help url when provided in props', () => {
+      const props = {
+        helpUrl: 'help-page-path',
+      };
+      createWrapper({ props });
+
+      expect(findLink().attributes('href')).toBe(props.helpUrl);
+      expect(findLink().text()).toBe(defaultProps.text);
+    });
+
+    it("displays the text without a link when it's not provided", () => {
+      createWrapper();
+
+      expect(findLink().exists()).toBe(false);
+      expect(wrapper.text()).toBe(defaultProps.text);
+    });
+  });
+
+  describe('badge', () => {
+    it('does not display premium feature badge when featureName is not provided', () => {
+      createWrapper();
+
+      expect(findBadge().exists()).toBe(false);
+    });
+
+    it('does not display premium feature badge when featureName is provided and is available for the project', () => {
+      const props = { featureName: 'feature' };
+      const glFeatures = { feature: true };
+      createWrapper({ props, glFeatures });
+
+      expect(findBadge().exists()).toBe(false);
+    });
+
+    it('displays premium feature badge when featureName is provided and is not available for the project', () => {
+      const props = { featureName: 'feature' };
+      const glFeatures = { feature: false };
+      createWrapper({ props, glFeatures });
+
+      expect(findBadge().props()).toMatchObject({
+        icon: 'license',
+        variant: 'tier',
+        size: 'md',
+      });
+      expect(findBadge().text()).toBe(wrapper.vm.$options.i18n.premiumTitle);
+    });
+  });
+});
diff --git a/spec/frontend/clusters/agents/components/integration_status_spec.js b/spec/frontend/clusters/agents/components/integration_status_spec.js
new file mode 100644
index 00000000000..36f0e622452
--- /dev/null
+++ b/spec/frontend/clusters/agents/components/integration_status_spec.js
@@ -0,0 +1,111 @@
+import { GlCollapse, GlButton, GlIcon } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import IntegrationStatus from '~/clusters/agents/components/integration_status.vue';
+import AgentIntegrationStatusRow from '~/clusters/agents/components/agent_integration_status_row.vue';
+import { ACTIVE_CONNECTION_TIME } from '~/clusters_list/constants';
+import {
+  INTEGRATION_STATUS_VALID_TOKEN,
+  INTEGRATION_STATUS_NO_TOKEN,
+  INTEGRATION_STATUS_RESTRICTED_CI_CD,
+} from '~/clusters/agents/constants';
+
+const connectedTimeNow = new Date();
+const connectedTimeInactive = new Date(connectedTimeNow.getTime() - ACTIVE_CONNECTION_TIME);
+
+describe('IntegrationStatus', () => {
+  let wrapper;
+
+  const createWrapper = (tokens = []) => {
+    wrapper = shallowMountExtended(IntegrationStatus, {
+      propsData: { tokens },
+    });
+  };
+
+  const findCollapseButton = () => wrapper.findComponent(GlButton);
+  const findCollapse = () => wrapper.findComponent(GlCollapse);
+  const findStatusIcon = () => wrapper.findComponent(GlIcon);
+  const findAgentStatus = () => wrapper.findByTestId('agent-status');
+  const findAgentIntegrationStatusRows = () => wrapper.findAllComponents(AgentIntegrationStatusRow);
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it.each`
+    lastUsedAt               | status               | iconName
+    ${null}                  | ${'Never connected'} | ${'status-neutral'}
+    ${connectedTimeNow}      | ${'Connected'}       | ${'status-success'}
+    ${connectedTimeInactive} | ${'Not connected'}   | ${'status-alert'}
+  `(
+    'displays correct text and icon when agent connection status is "$status"',
+    ({ lastUsedAt, status, iconName }) => {
+      const tokens = [{ lastUsedAt }];
+      createWrapper(tokens);
+
+      expect(findStatusIcon().props('name')).toBe(iconName);
+      expect(findAgentStatus().text()).toBe(status);
+    },
+  );
+
+  describe('default', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
+    it('shows the collapse toggle button', () => {
+      expect(findCollapseButton().text()).toBe(wrapper.vm.$options.i18n.title);
+      expect(findCollapseButton().attributes()).toMatchObject({
+        variant: 'link',
+        icon: 'chevron-right',
+        size: 'small',
+      });
+    });
+
+    it('sets collapse component as invisible by default', () => {
+      expect(findCollapse().props('visible')).toBeUndefined();
+    });
+  });
+
+  describe('when user clicks collapse toggle', () => {
+    beforeEach(() => {
+      createWrapper();
+      findCollapseButton().vm.$emit('click');
+    });
+
+    it('changes the collapse button icon', () => {
+      expect(findCollapseButton().props('icon')).toBe('chevron-down');
+    });
+
+    it('sets collapse component as visible', () => {
+      expect(findCollapse().attributes('visible')).toBe('true');
+    });
+  });
+
+  describe('integration status details', () => {
+    it.each`
+      agentStatus   | tokens                                     | integrationStatuses
+      ${'active'}   | ${[{ lastUsedAt: connectedTimeNow }]}      | ${[INTEGRATION_STATUS_VALID_TOKEN, INTEGRATION_STATUS_RESTRICTED_CI_CD]}
+      ${'inactive'} | ${[{ lastUsedAt: connectedTimeInactive }]} | ${[INTEGRATION_STATUS_RESTRICTED_CI_CD]}
+      ${'inactive'} | ${[]}                                      | ${[INTEGRATION_STATUS_NO_TOKEN, INTEGRATION_STATUS_RESTRICTED_CI_CD]}
+      ${'unused'}   | ${[{ lastUsedAt: null }]}                  | ${[INTEGRATION_STATUS_RESTRICTED_CI_CD]}
+      ${'unused'}   | ${[]}                                      | ${[INTEGRATION_STATUS_NO_TOKEN, INTEGRATION_STATUS_RESTRICTED_CI_CD]}
+    `(
+      'displays AgentIntegrationStatusRow component with correct properties when agent status is $agentStatus and agent has $tokens.length tokens',
+      ({ tokens, integrationStatuses }) => {
+        createWrapper(tokens);
+
+        expect(findAgentIntegrationStatusRows().length).toBe(integrationStatuses.length);
+
+        integrationStatuses.forEach((integrationStatus, index) => {
+          expect(findAgentIntegrationStatusRows().at(index).props()).toMatchObject({
+            icon: integrationStatus.icon,
+            iconClass: integrationStatus.iconClass,
+            text: integrationStatus.text,
+            helpUrl: integrationStatus.helpUrl || null,
+            featureName: integrationStatus.featureName || null,
+          });
+        });
+      },
+    );
+  });
+});
diff --git a/spec/frontend/clusters/agents/components/show_spec.js b/spec/frontend/clusters/agents/components/show_spec.js
index f2f073544e3..efa85136b17 100644
--- a/spec/frontend/clusters/agents/components/show_spec.js
+++ b/spec/frontend/clusters/agents/components/show_spec.js
@@ -6,6 +6,7 @@ import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import ClusterAgentShow from '~/clusters/agents/components/show.vue';
 import TokenTable from '~/clusters/agents/components/token_table.vue';
 import ActivityEvents from '~/clusters/agents/components/activity_events_list.vue';
+import IntegrationStatus from '~/clusters/agents/components/integration_status.vue';
 import getAgentQuery from '~/clusters/agents/graphql/queries/get_cluster_agent.query.graphql';
 import { useFakeDate } from 'helpers/fake_date';
 import createMockApollo from 'helpers/mock_apollo_helper';
@@ -76,6 +77,7 @@ describe('ClusterAgentShow', () => {
   const findTokenCount = () => wrapper.findByTestId('cluster-agent-token-count').text();
   const findEESecurityTabSlot = () => wrapper.findByTestId('ee-security-tab');
   const findActivity = () => wrapper.findComponent(ActivityEvents);
+  const findIntegrationStatus = () => wrapper.findComponent(IntegrationStatus);
 
   afterEach(() => {
     wrapper.destroy();
@@ -107,6 +109,10 @@ describe('ClusterAgentShow', () => {
       expect(findCreatedText()).toMatchInterpolatedText('Created by user-1 2 days ago');
     });
 
+    it('displays agent integration status section', () => {
+      expect(findIntegrationStatus().exists()).toBe(true);
+    });
+
     it('displays token count', () => {
       expect(findTokenCount()).toMatchInterpolatedText(
         `${ClusterAgentShow.i18n.tokens} ${defaultClusterAgent.tokens.count}`,
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/container_expiration_policy_form_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/container_expiration_policy_form_spec.js
index 5bd6608a9b8..8e08864bdb8 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/components/container_expiration_policy_form_spec.js
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/container_expiration_policy_form_spec.js
@@ -2,13 +2,11 @@ import { shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import Vue, { nextTick } from 'vue';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { GlCard, GlLoadingIcon } from 'jest/packages_and_registries/shared/stubs';
 import component from '~/packages_and_registries/settings/project/components/container_expiration_policy_form.vue';
-import {
-  UPDATE_SETTINGS_ERROR_MESSAGE,
-  UPDATE_SETTINGS_SUCCESS_MESSAGE,
-} from '~/packages_and_registries/settings/project/constants';
+import { UPDATE_SETTINGS_ERROR_MESSAGE } from '~/packages_and_registries/settings/project/constants';
 import updateContainerExpirationPolicyMutation from '~/packages_and_registries/settings/project/graphql/mutations/update_container_expiration_policy.mutation.graphql';
 import expirationPolicyQuery from '~/packages_and_registries/settings/project/graphql/queries/get_expiration_policy.query.graphql';
 import Tracking from '~/tracking';
@@ -20,6 +18,7 @@ describe('Container Expiration Policy Settings Form', () => {
 
   const defaultProvidedValues = {
     projectPath: 'path',
+    projectSettingsPath: 'settings-path',
   };
 
   const {
@@ -36,7 +35,7 @@ describe('Container Expiration Policy Settings Form', () => {
     label: 'docker_container_retention_and_expiration_policies',
   };
 
-  const findForm = () => wrapper.findComponent({ ref: 'form-element' });
+  const findForm = () => wrapper.find('form');
 
   const findCancelButton = () => wrapper.find('[data-testid="cancel-button"');
   const findSaveButton = () => wrapper.find('[data-testid="save-button"');
@@ -208,7 +207,9 @@ describe('Container Expiration Policy Settings Form', () => {
       });
 
       it('validation event updates buttons disabled state', async () => {
-        mountComponent();
+        mountComponent({
+          props: { ...defaultProps, isEdited: true },
+        });
 
         expect(findSaveButton().props('disabled')).toBe(false);
 
@@ -229,52 +230,22 @@ describe('Container Expiration Policy Settings Form', () => {
   });
 
   describe('form', () => {
-    describe('form reset event', () => {
-      it('calls the appropriate function', () => {
-        mountComponent();
-
-        findForm().trigger('reset');
-
-        expect(wrapper.emitted('reset')).toEqual([[]]);
-      });
-
-      it('tracks the reset event', () => {
-        mountComponent();
-
-        findForm().trigger('reset');
-
-        expect(Tracking.event).toHaveBeenCalledWith(undefined, 'reset_form', trackingPayload);
-      });
-
-      it('resets the errors objects', async () => {
-        mountComponent({
-          data: { apiErrors: { nameRegex: 'bar' }, localErrors: { nameRegexKeep: false } },
-        });
-
-        findForm().trigger('reset');
-
-        await nextTick();
+    describe('form submit event', () => {
+      useMockLocationHelper();
 
-        expect(findKeepRegexInput().props('error')).toBe('');
-        expect(findRemoveRegexInput().props('error')).toBe('');
-        expect(findSaveButton().props('disabled')).toBe(false);
-      });
-    });
-
-    describe('form submit event ', () => {
       it('save has type submit', () => {
         mountComponent();
 
         expect(findSaveButton().attributes('type')).toBe('submit');
       });
 
-      it('dispatches the correct apollo mutation', () => {
+      it('dispatches the correct apollo mutation', async () => {
         const mutationResolver = jest.fn().mockResolvedValue(expirationPolicyMutationPayload());
         mountComponentWithApollo({
           mutationResolver,
         });
 
-        findForm().trigger('submit');
+        await submitForm();
 
         expect(mutationResolver).toHaveBeenCalled();
       });
@@ -286,9 +257,7 @@ describe('Container Expiration Policy Settings Form', () => {
           queryPayload: expirationPolicyPayload({ keepN: null, cadence: null, olderThan: null }),
         });
 
-        await waitForPromises();
-
-        findForm().trigger('submit');
+        await submitForm();
 
         expect(mutationResolver).toHaveBeenCalledWith({
           input: {
@@ -303,24 +272,26 @@ describe('Container Expiration Policy Settings Form', () => {
         });
       });
 
-      it('tracks the submit event', () => {
+      it('tracks the submit event', async () => {
         mountComponentWithApollo({
           mutationResolver: jest.fn().mockResolvedValue(expirationPolicyMutationPayload()),
         });
 
-        findForm().trigger('submit');
+        await submitForm();
 
         expect(Tracking.event).toHaveBeenCalledWith(undefined, 'submit_form', trackingPayload);
       });
 
-      it('show a success toast when submit succeed', async () => {
+      it('redirects to package and registry project settings page when submitted successfully', async () => {
         mountComponentWithApollo({
           mutationResolver: jest.fn().mockResolvedValue(expirationPolicyMutationPayload()),
         });
 
         await submitForm();
 
-        expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(UPDATE_SETTINGS_SUCCESS_MESSAGE);
+        expect(window.location.href.endsWith('settings-path?showSetupSuccessAlert=true')).toBe(
+          true,
+        );
       });
 
       describe('when submit fails', () => {
@@ -348,6 +319,7 @@ describe('Container Expiration Policy Settings Form', () => {
             await submitForm();
 
             expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(UPDATE_SETTINGS_ERROR_MESSAGE);
+            expect(window.location.href).toBeUndefined();
           });
 
           it('parses the error messages', async () => {
@@ -375,24 +347,24 @@ describe('Container Expiration Policy Settings Form', () => {
 
   describe('form actions', () => {
     describe('cancel button', () => {
-      it('has type reset', () => {
+      it('links to project package and registry settings path', () => {
         mountComponent();
 
-        expect(findCancelButton().attributes('type')).toBe('reset');
+        expect(findCancelButton().attributes('href')).toBe(
+          defaultProvidedValues.projectSettingsPath,
+        );
       });
 
       it.each`
-        isLoading | isEdited | mutationLoading
-        ${true}   | ${true}  | ${true}
-        ${false}  | ${true}  | ${true}
-        ${false}  | ${false} | ${true}
-        ${true}   | ${false} | ${false}
-        ${false}  | ${false} | ${false}
+        isLoading | mutationLoading
+        ${true}   | ${true}
+        ${false}  | ${true}
+        ${true}   | ${false}
       `(
-        'when isLoading is $isLoading, isEdited is $isEdited and mutationLoading is $mutationLoading is disabled',
-        ({ isEdited, isLoading, mutationLoading }) => {
+        'is disabled when isLoading is $isLoading and mutationLoading is $mutationLoading',
+        ({ isLoading, mutationLoading }) => {
           mountComponent({
-            props: { ...defaultProps, isEdited, isLoading },
+            props: { ...defaultProps, isLoading },
             data: { mutationLoading },
           });
 
@@ -409,18 +381,19 @@ describe('Container Expiration Policy Settings Form', () => {
       });
 
       it.each`
-        isLoading | localErrors       | mutationLoading
-        ${true}   | ${{}}             | ${true}
-        ${true}   | ${{}}             | ${false}
-        ${false}  | ${{}}             | ${true}
-        ${false}  | ${{ foo: false }} | ${true}
-        ${true}   | ${{ foo: false }} | ${false}
-        ${false}  | ${{ foo: false }} | ${false}
+        isLoading | isEdited | localErrors       | mutationLoading
+        ${true}   | ${false} | ${{}}             | ${true}
+        ${true}   | ${false} | ${{}}             | ${false}
+        ${false}  | ${false} | ${{}}             | ${true}
+        ${false}  | ${false} | ${{}}             | ${false}
+        ${false}  | ${false} | ${{ foo: false }} | ${true}
+        ${true}   | ${false} | ${{ foo: false }} | ${false}
+        ${false}  | ${false} | ${{ foo: false }} | ${false}
       `(
-        'when isLoading is $isLoading, localErrors is $localErrors and mutationLoading is $mutationLoading is disabled',
-        ({ localErrors, isLoading, mutationLoading }) => {
+        'is disabled when isLoading is $isLoading, isEdited is $isEdited, localErrors is $localErrors and mutationLoading is $mutationLoading',
+        ({ localErrors, isEdited, isLoading, mutationLoading }) => {
           mountComponent({
-            props: { ...defaultProps, isLoading },
+            props: { ...defaultProps, isEdited, isLoading },
             data: { mutationLoading, localErrors },
           });
 
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/registry_settings_app_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/registry_settings_app_spec.js
index 5dd27679708..07d13839c61 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/components/registry_settings_app_spec.js
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/registry_settings_app_spec.js
@@ -1,41 +1,99 @@
+import { GlAlert } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import waitForPromises from 'helpers/wait_for_promises';
+import setWindowLocation from 'helpers/set_window_location_helper';
+import * as commonUtils from '~/lib/utils/common_utils';
 import component from '~/packages_and_registries/settings/project/components/registry_settings_app.vue';
 import ContainerExpirationPolicy from '~/packages_and_registries/settings/project/components/container_expiration_policy.vue';
 import PackagesCleanupPolicy from '~/packages_and_registries/settings/project/components/packages_cleanup_policy.vue';
+import {
+  SHOW_SETUP_SUCCESS_ALERT,
+  UPDATE_SETTINGS_SUCCESS_MESSAGE,
+} from '~/packages_and_registries/settings/project/constants';
+
+jest.mock('~/lib/utils/common_utils');
 
 describe('Registry Settings app', () => {
   let wrapper;
 
   const findContainerExpirationPolicy = () => wrapper.findComponent(ContainerExpirationPolicy);
   const findPackagesCleanupPolicy = () => wrapper.findComponent(PackagesCleanupPolicy);
+  const findAlert = () => wrapper.findComponent(GlAlert);
 
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
   });
 
-  const mountComponent = (provide) => {
+  const defaultProvide = {
+    showContainerRegistrySettings: true,
+    showPackageRegistrySettings: true,
+  };
+
+  const mountComponent = (provide = defaultProvide) => {
     wrapper = shallowMount(component, {
       provide,
     });
   };
 
-  it.each`
-    showContainerRegistrySettings | showPackageRegistrySettings
-    ${true}                       | ${false}
-    ${true}                       | ${true}
-    ${false}                      | ${true}
-    ${false}                      | ${false}
-  `(
-    'container expiration policy $showContainerRegistrySettings and package cleanup policy is $showPackageRegistrySettings',
-    ({ showContainerRegistrySettings, showPackageRegistrySettings }) => {
-      mountComponent({
-        showContainerRegistrySettings,
-        showPackageRegistrySettings,
+  describe('container policy success alert handling', () => {
+    const originalLocation = window.location.href;
+    const search = `?${SHOW_SETUP_SUCCESS_ALERT}=true`;
+
+    beforeEach(() => {
+      setWindowLocation(search);
+    });
+
+    afterEach(() => {
+      setWindowLocation(originalLocation);
+    });
+
+    it(`renders alert if the query string contains ${SHOW_SETUP_SUCCESS_ALERT}`, async () => {
+      mountComponent();
+
+      await waitForPromises();
+
+      expect(findAlert().exists()).toBe(true);
+      expect(findAlert().props()).toMatchObject({
+        dismissible: true,
+        variant: 'success',
       });
+      expect(findAlert().text()).toMatchInterpolatedText(UPDATE_SETTINGS_SUCCESS_MESSAGE);
+    });
+
+    it('calls historyReplaceState with a clean url', () => {
+      mountComponent();
+
+      expect(commonUtils.historyReplaceState).toHaveBeenCalledWith(originalLocation);
+    });
+
+    it(`does nothing if the query string does not contain ${SHOW_SETUP_SUCCESS_ALERT}`, () => {
+      setWindowLocation('?');
+      mountComponent();
 
-      expect(findContainerExpirationPolicy().exists()).toBe(showContainerRegistrySettings);
-      expect(findPackagesCleanupPolicy().exists()).toBe(showPackageRegistrySettings);
-    },
-  );
+      expect(findAlert().exists()).toBe(false);
+      expect(commonUtils.historyReplaceState).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('settings', () => {
+    it.each`
+      showContainerRegistrySettings | showPackageRegistrySettings
+      ${true}                       | ${false}
+      ${true}                       | ${true}
+      ${false}                      | ${true}
+      ${false}                      | ${false}
+    `(
+      'container expiration policy $showContainerRegistrySettings and package cleanup policy is $showPackageRegistrySettings',
+      ({ showContainerRegistrySettings, showPackageRegistrySettings }) => {
+        mountComponent({
+          showContainerRegistrySettings,
+          showPackageRegistrySettings,
+        });
+
+        expect(findContainerExpirationPolicy().exists()).toBe(showContainerRegistrySettings);
+        expect(findPackagesCleanupPolicy().exists()).toBe(showPackageRegistrySettings);
+      },
+    );
+  });
 });