Add latest changes from gitlab-org/gitlab@14-0-stable-eev14.0.0-rc42

6 files changed, 292 insertions, 0 deletions

diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/__snapshots__/terraform_installation_spec.js.snap b/spec/frontend/packages_and_registries/infrastructure_registry/components/__snapshots__/terraform_installation_spec.js.snap
new file mode 100644
index 00000000000..427160b45e3
--- /dev/null
+++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/__snapshots__/terraform_installation_spec.js.snap
@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TerraformInstallation renders all the messages 1`] = `
+<div>
+  <h3
+    class="gl-font-lg"
+  >
+    Provision instructions
+  </h3>
+   
+  <code-instruction-stub
+    copytext="Copy Terraform Command"
+    instruction="module \\"Test/system-22\\" {
+  source = \\"foo/Test/system-22\\"
+  version = \\"0.1\\"
+}"
+    label="Copy and paste into your Terraform configuration, insert the variables, and run Terraform init:"
+    multiline="true"
+    trackingaction=""
+    trackinglabel=""
+  />
+   
+  <h3
+    class="gl-font-lg"
+  >
+    Registry setup
+  </h3>
+   
+  <code-instruction-stub
+    copytext="Copy Terraform Setup Command"
+    instruction="credentials \\"gitlab.com\\" {
+  token = \\"<TOKEN>\\"
+}"
+    label="To authorize access to the Terraform registry:"
+    multiline="true"
+    trackingaction=""
+    trackinglabel=""
+  />
+   
+  <gl-sprintf-stub
+    message="For more information on the Terraform registry, %{linkStart}see our documentation%{linkEnd}."
+  />
+</div>
+`;
diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/details_title_spec.js b/spec/frontend/packages_and_registries/infrastructure_registry/components/details_title_spec.js
new file mode 100644
index 00000000000..87e0059344c
--- /dev/null
+++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/details_title_spec.js
@@ -0,0 +1,93 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import { terraformModule, mavenFiles, npmPackage } from 'jest/packages/mock_data';
+import component from '~/packages_and_registries/infrastructure_registry/components/details_title.vue';
+import TitleArea from '~/vue_shared/components/registry/title_area.vue';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('PackageTitle', () => {
+  let wrapper;
+  let store;
+
+  function createComponent({ packageFiles = mavenFiles, packageEntity = terraformModule } = {}) {
+    store = new Vuex.Store({
+      state: {
+        packageEntity,
+        packageFiles,
+      },
+      getters: {
+        packagePipeline: ({ packageEntity: { pipeline = null } }) => pipeline,
+      },
+    });
+
+    wrapper = shallowMount(component, {
+      localVue,
+      store,
+      stubs: {
+        TitleArea,
+      },
+    });
+    return wrapper.vm.$nextTick();
+  }
+
+  const findTitleArea = () => wrapper.findComponent(TitleArea);
+  const packageSize = () => wrapper.find('[data-testid="package-size"]');
+  const pipelineProject = () => wrapper.find('[data-testid="pipeline-project"]');
+  const packageRef = () => wrapper.find('[data-testid="package-ref"]');
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('module title', () => {
+    it('is correctly bound', async () => {
+      await createComponent();
+
+      expect(findTitleArea().props('title')).toBe(terraformModule.name);
+    });
+  });
+
+  describe('calculates the package size', () => {
+    it('correctly calculates the size', async () => {
+      await createComponent();
+
+      expect(packageSize().props('text')).toBe('300 bytes');
+    });
+  });
+
+  describe('package ref', () => {
+    it('does not display the ref if missing', async () => {
+      await createComponent();
+
+      expect(packageRef().exists()).toBe(false);
+    });
+
+    it('correctly shows the package ref if there is one', async () => {
+      await createComponent({ packageEntity: npmPackage });
+      expect(packageRef().props()).toMatchObject({
+        text: npmPackage.pipeline.ref,
+        icon: 'branch',
+      });
+    });
+  });
+
+  describe('pipeline project', () => {
+    it('does not display the project if missing', async () => {
+      await createComponent();
+
+      expect(pipelineProject().exists()).toBe(false);
+    });
+
+    it('correctly shows the pipeline project if there is one', async () => {
+      await createComponent({ packageEntity: npmPackage });
+
+      expect(pipelineProject().props()).toMatchObject({
+        text: npmPackage.pipeline.project.name,
+        icon: 'review-list',
+        link: npmPackage.pipeline.project.web_url,
+      });
+    });
+  });
+});
diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/terraform_installation_spec.js b/spec/frontend/packages_and_registries/infrastructure_registry/components/terraform_installation_spec.js
new file mode 100644
index 00000000000..7a129794d54
--- /dev/null
+++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/terraform_installation_spec.js
@@ -0,0 +1,61 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import { terraformModule as packageEntity } from 'jest/packages/mock_data';
+import TerraformInstallation from '~/packages_and_registries/infrastructure_registry/components/terraform_installation.vue';
+import CodeInstructions from '~/vue_shared/components/registry/code_instruction.vue';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('TerraformInstallation', () => {
+  let wrapper;
+
+  const store = new Vuex.Store({
+    state: {
+      packageEntity,
+      projectPath: 'foo',
+    },
+  });
+
+  const findCodeInstructions = () => wrapper.findAllComponents(CodeInstructions);
+
+  function createComponent() {
+    wrapper = shallowMount(TerraformInstallation, {
+      localVue,
+      store,
+    });
+  }
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders all the messages', () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  describe('installation commands', () => {
+    it('renders the correct command', () => {
+      expect(findCodeInstructions().at(0).props('instruction')).toMatchInlineSnapshot(`
+        "module \\"Test/system-22\\" {
+          source = \\"foo/Test/system-22\\"
+          version = \\"0.1\\"
+        }"
+      `);
+    });
+  });
+
+  describe('setup commands', () => {
+    it('renders the correct command', () => {
+      expect(findCodeInstructions().at(1).props('instruction')).toMatchInlineSnapshot(`
+        "credentials \\"gitlab.com\\" {
+          token = \\"<TOKEN>\\"
+        }"
+      `);
+    });
+  });
+});
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 a725941f7f6..8266f9bee89 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
@@ -10,6 +10,8 @@ import {
   UNAVAILABLE_USER_FEATURE_TEXT,
 } from '~/packages_and_registries/settings/project/constants';
 import expirationPolicyQuery from '~/packages_and_registries/settings/project/graphql/queries/get_expiration_policy.query.graphql';
+import CleanupPolicyEnabledAlert from '~/packages_and_registries/shared/components/cleanup_policy_enabled_alert.vue';
+import SettingsBlock from '~/vue_shared/components/settings/settings_block.vue';
 
 import {
   expirationPolicyPayload,
@@ -28,15 +30,19 @@ describe('Registry Settings App', () => {
     isAdmin: false,
     adminSettingsPath: 'settingsPath',
     enableHistoricEntries: false,
+    helpPagePath: 'helpPagePath',
+    showCleanupPolicyOnAlert: false,
   };
 
   const findSettingsComponent = () => wrapper.find(SettingsForm);
   const findAlert = () => wrapper.find(GlAlert);
+  const findCleanupAlert = () => wrapper.findComponent(CleanupPolicyEnabledAlert);
 
   const mountComponent = (provide = defaultProvidedValues, config) => {
     wrapper = shallowMount(component, {
       stubs: {
         GlSprintf,
+        SettingsBlock,
       },
       mocks: {
         $toast: {
@@ -66,6 +72,26 @@ describe('Registry Settings App', () => {
     wrapper.destroy();
   });
 
+  describe('cleanup is on alert', () => {
+    it('exist when showCleanupPolicyOnAlert is true and has the correct props', () => {
+      mountComponent({
+        ...defaultProvidedValues,
+        showCleanupPolicyOnAlert: true,
+      });
+
+      expect(findCleanupAlert().exists()).toBe(true);
+      expect(findCleanupAlert().props()).toMatchObject({
+        projectPath: 'path',
+      });
+    });
+
+    it('is hidden when showCleanupPolicyOnAlert is false', async () => {
+      mountComponent();
+
+      expect(findCleanupAlert().exists()).toBe(false);
+    });
+  });
+
   describe('isEdited status', () => {
     it.each`
       description                                  | apiResponse                       | workingCopy                                                   | result
diff --git a/spec/frontend/packages_and_registries/shared/components/__snapshots__/cleanup_policy_enabled_alert_spec.js.snap b/spec/frontend/packages_and_registries/shared/components/__snapshots__/cleanup_policy_enabled_alert_spec.js.snap
new file mode 100644
index 00000000000..2cded2ead2e
--- /dev/null
+++ b/spec/frontend/packages_and_registries/shared/components/__snapshots__/cleanup_policy_enabled_alert_spec.js.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CleanupPolicyEnabledAlert renders 1`] = `
+<gl-alert-stub
+  class="gl-mt-2"
+  dismissible="true"
+  dismisslabel="Dismiss"
+  primarybuttonlink=""
+  primarybuttontext=""
+  secondarybuttonlink=""
+  secondarybuttontext=""
+  title=""
+  variant="info"
+>
+  <gl-sprintf-stub
+    message="Cleanup policies are now available for this project. %{linkStart}Click here to get started.%{linkEnd}"
+  />
+</gl-alert-stub>
+`;
diff --git a/spec/frontend/packages_and_registries/shared/components/cleanup_policy_enabled_alert_spec.js b/spec/frontend/packages_and_registries/shared/components/cleanup_policy_enabled_alert_spec.js
new file mode 100644
index 00000000000..269e087f5ac
--- /dev/null
+++ b/spec/frontend/packages_and_registries/shared/components/cleanup_policy_enabled_alert_spec.js
@@ -0,0 +1,49 @@
+import { GlAlert } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import component from '~/packages_and_registries/shared/components/cleanup_policy_enabled_alert.vue';
+import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
+
+describe('CleanupPolicyEnabledAlert', () => {
+  let wrapper;
+
+  const defaultProps = {
+    projectPath: 'foo',
+    cleanupPoliciesSettingsPath: 'label-bar',
+  };
+
+  const findAlert = () => wrapper.findComponent(GlAlert);
+
+  const mountComponent = (props) => {
+    wrapper = shallowMount(component, {
+      stubs: {
+        LocalStorageSync,
+      },
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders', () => {
+    mountComponent();
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it('when dismissed is not visible', async () => {
+    mountComponent();
+
+    expect(findAlert().exists()).toBe(true);
+    findAlert().vm.$emit('dismiss');
+
+    await nextTick();
+
+    expect(findAlert().exists()).toBe(false);
+  });
+});