Add latest changes from gitlab-org/gitlab@master

14 files changed, 291 insertions, 416 deletions

diff --git a/spec/frontend/behaviors/components/diagram_performance_warning_spec.js b/spec/frontend/behaviors/components/diagram_performance_warning_spec.js
new file mode 100644
index 00000000000..c58c2bc55a9
--- /dev/null
+++ b/spec/frontend/behaviors/components/diagram_performance_warning_spec.js
@@ -0,0 +1,40 @@
+import { GlAlert } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import DiagramPerformanceWarning from '~/behaviors/components/diagram_performance_warning.vue';
+
+describe('DiagramPerformanceWarning component', () => {
+  let wrapper;
+
+  const findAlert = () => wrapper.findComponent(GlAlert);
+
+  beforeEach(() => {
+    wrapper = shallowMount(DiagramPerformanceWarning);
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders warning alert with button', () => {
+    expect(findAlert().props()).toMatchObject({
+      primaryButtonText: DiagramPerformanceWarning.i18n.buttonText,
+      variant: 'warning',
+    });
+  });
+
+  it('renders warning message', () => {
+    expect(findAlert().text()).toBe(DiagramPerformanceWarning.i18n.bodyText);
+  });
+
+  it('emits event when closing alert', () => {
+    findAlert().vm.$emit('dismiss');
+
+    expect(wrapper.emitted('closeAlert')).toEqual([[]]);
+  });
+
+  it('emits event when accepting alert', () => {
+    findAlert().vm.$emit('primaryAction');
+
+    expect(wrapper.emitted('showImage')).toEqual([[]]);
+  });
+});
diff --git a/spec/frontend/crm/contact_form_spec.js b/spec/frontend/crm/contact_form_spec.js
deleted file mode 100644
index 0edab4f5ec5..00000000000
--- a/spec/frontend/crm/contact_form_spec.js
+++ /dev/null
@@ -1,157 +0,0 @@
-import { GlAlert } from '@gitlab/ui';
-import Vue from 'vue';
-import VueApollo from 'vue-apollo';
-import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import createMockApollo from 'helpers/mock_apollo_helper';
-import waitForPromises from 'helpers/wait_for_promises';
-import ContactForm from '~/crm/components/contact_form.vue';
-import createContactMutation from '~/crm/components/queries/create_contact.mutation.graphql';
-import updateContactMutation from '~/crm/components/queries/update_contact.mutation.graphql';
-import getGroupContactsQuery from '~/crm/components/queries/get_group_contacts.query.graphql';
-import {
-  createContactMutationErrorResponse,
-  createContactMutationResponse,
-  getGroupContactsQueryResponse,
-  updateContactMutationErrorResponse,
-  updateContactMutationResponse,
-} from './mock_data';
-
-describe('Customer relations contact form component', () => {
-  Vue.use(VueApollo);
-  let wrapper;
-  let fakeApollo;
-  let mutation;
-  let queryHandler;
-
-  const findSaveContactButton = () => wrapper.findByTestId('save-contact-button');
-  const findCancelButton = () => wrapper.findByTestId('cancel-button');
-  const findForm = () => wrapper.find('form');
-  const findError = () => wrapper.findComponent(GlAlert);
-
-  const mountComponent = ({ mountFunction = shallowMountExtended, editForm = false } = {}) => {
-    fakeApollo = createMockApollo([[mutation, queryHandler]]);
-    fakeApollo.clients.defaultClient.cache.writeQuery({
-      query: getGroupContactsQuery,
-      variables: { groupFullPath: 'flightjs' },
-      data: getGroupContactsQueryResponse.data,
-    });
-    const propsData = { drawerOpen: true };
-    if (editForm)
-      propsData.contact = { firstName: 'First', lastName: 'Last', email: 'email@example.com' };
-    wrapper = mountFunction(ContactForm, {
-      provide: { groupId: 26, groupFullPath: 'flightjs' },
-      apolloProvider: fakeApollo,
-      propsData,
-    });
-  };
-
-  beforeEach(() => {
-    mutation = createContactMutation;
-    queryHandler = jest.fn().mockResolvedValue(createContactMutationResponse);
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-    fakeApollo = null;
-  });
-
-  describe('Save contact button', () => {
-    it('should be disabled when required fields are empty', () => {
-      mountComponent();
-
-      expect(findSaveContactButton().props('disabled')).toBe(true);
-    });
-
-    it('should not be disabled when required fields have values', async () => {
-      mountComponent();
-
-      wrapper.find('#contact-first-name').vm.$emit('input', 'A');
-      wrapper.find('#contact-last-name').vm.$emit('input', 'B');
-      wrapper.find('#contact-email').vm.$emit('input', 'C');
-      await waitForPromises();
-
-      expect(findSaveContactButton().props('disabled')).toBe(false);
-    });
-  });
-
-  it("should emit 'close' when cancel button is clicked", () => {
-    mountComponent();
-
-    findCancelButton().vm.$emit('click');
-
-    expect(wrapper.emitted().close).toBeTruthy();
-  });
-
-  describe('when create mutation is successful', () => {
-    it("should emit 'close'", async () => {
-      mountComponent();
-
-      findForm().trigger('submit');
-      await waitForPromises();
-
-      expect(wrapper.emitted().close).toBeTruthy();
-    });
-  });
-
-  describe('when create mutation fails', () => {
-    it('should show error on reject', async () => {
-      queryHandler = jest.fn().mockRejectedValue('ERROR');
-      mountComponent();
-
-      findForm().trigger('submit');
-      await waitForPromises();
-
-      expect(findError().exists()).toBe(true);
-    });
-
-    it('should show error on error response', async () => {
-      queryHandler = jest.fn().mockResolvedValue(createContactMutationErrorResponse);
-      mountComponent();
-
-      findForm().trigger('submit');
-      await waitForPromises();
-
-      expect(findError().exists()).toBe(true);
-      expect(findError().text()).toBe('create contact is invalid.');
-    });
-  });
-
-  describe('when update mutation is successful', () => {
-    it("should emit 'close'", async () => {
-      mutation = updateContactMutation;
-      queryHandler = jest.fn().mockResolvedValue(updateContactMutationResponse);
-      mountComponent({ editForm: true });
-
-      findForm().trigger('submit');
-      await waitForPromises();
-
-      expect(wrapper.emitted().close).toBeTruthy();
-    });
-  });
-
-  describe('when update mutation fails', () => {
-    beforeEach(() => {
-      mutation = updateContactMutation;
-    });
-
-    it('should show error on reject', async () => {
-      queryHandler = jest.fn().mockRejectedValue('ERROR');
-      mountComponent({ editForm: true });
-      findForm().trigger('submit');
-      await waitForPromises();
-
-      expect(findError().exists()).toBe(true);
-    });
-
-    it('should show error on error response', async () => {
-      queryHandler = jest.fn().mockResolvedValue(updateContactMutationErrorResponse);
-      mountComponent({ editForm: true });
-
-      findForm().trigger('submit');
-      await waitForPromises();
-
-      expect(findError().exists()).toBe(true);
-      expect(findError().text()).toBe('update contact is invalid.');
-    });
-  });
-});
diff --git a/spec/frontend/crm/contact_form_wrapper_spec.js b/spec/frontend/crm/contact_form_wrapper_spec.js
new file mode 100644
index 00000000000..6307889a7aa
--- /dev/null
+++ b/spec/frontend/crm/contact_form_wrapper_spec.js
@@ -0,0 +1,88 @@
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import ContactFormWrapper from '~/crm/contacts/components/contact_form_wrapper.vue';
+import ContactForm from '~/crm/components/form.vue';
+import getGroupContactsQuery from '~/crm/contacts/components/graphql/get_group_contacts.query.graphql';
+import createContactMutation from '~/crm/contacts/components/graphql/create_contact.mutation.graphql';
+import updateContactMutation from '~/crm/contacts/components/graphql/update_contact.mutation.graphql';
+
+describe('Customer relations contact form wrapper', () => {
+  let wrapper;
+
+  const findContactForm = () => wrapper.findComponent(ContactForm);
+
+  const $apollo = {
+    queries: {
+      contacts: {
+        loading: false,
+      },
+    },
+  };
+  const $route = {
+    params: {
+      id: 7,
+    },
+  };
+  const contacts = [{ id: 'gid://gitlab/CustomerRelations::Contact/7' }];
+
+  const mountComponent = ({ isEditMode = false } = {}) => {
+    wrapper = shallowMountExtended(ContactFormWrapper, {
+      propsData: {
+        isEditMode,
+      },
+      provide: {
+        groupFullPath: 'flightjs',
+        groupId: 26,
+      },
+      mocks: {
+        $apollo,
+        $route,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('in edit mode', () => {
+    it('should render contact form with correct props', () => {
+      mountComponent({ isEditMode: true });
+
+      const contactForm = findContactForm();
+      expect(contactForm.props('fields')).toHaveLength(5);
+      expect(contactForm.props('title')).toBe('Edit contact');
+      expect(contactForm.props('successMessage')).toBe('Contact has been updated.');
+      expect(contactForm.props('mutation')).toBe(updateContactMutation);
+      expect(contactForm.props('getQuery')).toMatchObject({
+        query: getGroupContactsQuery,
+        variables: { groupFullPath: 'flightjs' },
+      });
+      expect(contactForm.props('getQueryNodePath')).toBe('group.contacts');
+      expect(contactForm.props('existingId')).toBe(contacts[0].id);
+      expect(contactForm.props('additionalCreateParams')).toMatchObject({
+        groupId: 'gid://gitlab/Group/26',
+      });
+    });
+  });
+
+  describe('in create mode', () => {
+    it('should render contact form with correct props', () => {
+      mountComponent();
+
+      const contactForm = findContactForm();
+      expect(contactForm.props('fields')).toHaveLength(5);
+      expect(contactForm.props('title')).toBe('New contact');
+      expect(contactForm.props('successMessage')).toBe('Contact has been added.');
+      expect(contactForm.props('mutation')).toBe(createContactMutation);
+      expect(contactForm.props('getQuery')).toMatchObject({
+        query: getGroupContactsQuery,
+        variables: { groupFullPath: 'flightjs' },
+      });
+      expect(contactForm.props('getQueryNodePath')).toBe('group.contacts');
+      expect(contactForm.props('existingId')).toBeNull();
+      expect(contactForm.props('additionalCreateParams')).toMatchObject({
+        groupId: 'gid://gitlab/Group/26',
+      });
+    });
+  });
+});
diff --git a/spec/frontend/crm/contacts_root_spec.js b/spec/frontend/crm/contacts_root_spec.js
index b30349305a3..b02d94e9cb1 100644
--- a/spec/frontend/crm/contacts_root_spec.js
+++ b/spec/frontend/crm/contacts_root_spec.js
@@ -5,11 +5,9 @@ import VueRouter from 'vue-router';
 import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import ContactsRoot from '~/crm/components/contacts_root.vue';
-import ContactForm from '~/crm/components/contact_form.vue';
-import getGroupContactsQuery from '~/crm/components/queries/get_group_contacts.query.graphql';
-import { NEW_ROUTE_NAME, EDIT_ROUTE_NAME } from '~/crm/constants';
-import routes from '~/crm/routes';
+import ContactsRoot from '~/crm/contacts/components/contacts_root.vue';
+import getGroupContactsQuery from '~/crm/contacts/components/graphql/get_group_contacts.query.graphql';
+import routes from '~/crm/contacts/routes';
 import { getGroupContactsQueryResponse } from './mock_data';
 
 describe('Customer relations contacts root app', () => {
@@ -23,8 +21,6 @@ describe('Customer relations contacts root app', () => {
   const findRowByName = (rowName) => wrapper.findAllByRole('row', { name: rowName });
   const findIssuesLinks = () => wrapper.findAllByTestId('issues-link');
   const findNewContactButton = () => wrapper.findByTestId('new-contact-button');
-  const findEditContactButton = () => wrapper.findByTestId('edit-contact-button');
-  const findContactForm = () => wrapper.findComponent(ContactForm);
   const findError = () => wrapper.findComponent(GlAlert);
   const successQueryHandler = jest.fn().mockResolvedValue(getGroupContactsQueryResponse);
 
@@ -40,8 +36,8 @@ describe('Customer relations contacts root app', () => {
       router,
       provide: {
         groupFullPath: 'flightjs',
-        groupIssuesPath: '/issues',
         groupId: 26,
+        groupIssuesPath: '/issues',
         canAdminCrmContact,
       },
       apolloProvider: fakeApollo,
@@ -82,71 +78,6 @@ describe('Customer relations contacts root app', () => {
     });
   });
 
-  describe('contact form', () => {
-    it('should not exist by default', async () => {
-      mountComponent();
-      await waitForPromises();
-
-      expect(findContactForm().exists()).toBe(false);
-    });
-
-    it('should exist when user clicks new contact button', async () => {
-      mountComponent();
-
-      findNewContactButton().vm.$emit('click');
-      await waitForPromises();
-
-      expect(findContactForm().exists()).toBe(true);
-    });
-
-    it('should exist when user navigates directly to `new` route', async () => {
-      router.replace({ name: NEW_ROUTE_NAME });
-      mountComponent();
-      await waitForPromises();
-
-      expect(findContactForm().exists()).toBe(true);
-    });
-
-    it('should exist when user clicks edit contact button', async () => {
-      mountComponent({ mountFunction: mountExtended });
-      await waitForPromises();
-
-      findEditContactButton().vm.$emit('click');
-      await waitForPromises();
-
-      expect(findContactForm().exists()).toBe(true);
-    });
-
-    it('should exist when user navigates directly to `edit` route', async () => {
-      router.replace({ name: EDIT_ROUTE_NAME, params: { id: 16 } });
-      mountComponent();
-      await waitForPromises();
-
-      expect(findContactForm().exists()).toBe(true);
-    });
-
-    it('should not exist when new form emits close', async () => {
-      router.replace({ name: NEW_ROUTE_NAME });
-      mountComponent();
-
-      findContactForm().vm.$emit('close');
-      await waitForPromises();
-
-      expect(findContactForm().exists()).toBe(false);
-    });
-
-    it('should not exist when edit form emits close', async () => {
-      router.replace({ name: EDIT_ROUTE_NAME, params: { id: 16 } });
-      mountComponent();
-      await waitForPromises();
-
-      findContactForm().vm.$emit('close');
-      await waitForPromises();
-
-      expect(findContactForm().exists()).toBe(false);
-    });
-  });
-
   describe('error', () => {
     it('should exist on reject', async () => {
       mountComponent({ queryHandler: jest.fn().mockRejectedValue('ERROR') });
diff --git a/spec/frontend/crm/form_spec.js b/spec/frontend/crm/form_spec.js
index 0e3abc05c37..5c349b24ea1 100644
--- a/spec/frontend/crm/form_spec.js
+++ b/spec/frontend/crm/form_spec.js
@@ -6,12 +6,12 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import Form from '~/crm/components/form.vue';
-import routes from '~/crm/routes';
-import createContactMutation from '~/crm/components/queries/create_contact.mutation.graphql';
-import updateContactMutation from '~/crm/components/queries/update_contact.mutation.graphql';
-import getGroupContactsQuery from '~/crm/components/queries/get_group_contacts.query.graphql';
-import createOrganizationMutation from '~/crm/components/queries/create_organization.mutation.graphql';
-import getGroupOrganizationsQuery from '~/crm/components/queries/get_group_organizations.query.graphql';
+import routes from '~/crm/contacts/routes';
+import createContactMutation from '~/crm/contacts/components/graphql/create_contact.mutation.graphql';
+import updateContactMutation from '~/crm/contacts/components/graphql/update_contact.mutation.graphql';
+import getGroupContactsQuery from '~/crm/contacts/components/graphql/get_group_contacts.query.graphql';
+import createOrganizationMutation from '~/crm/organizations/components/graphql/create_organization.mutation.graphql';
+import getGroupOrganizationsQuery from '~/crm/organizations/components/graphql/get_group_organizations.query.graphql';
 import {
   createContactMutationErrorResponse,
   createContactMutationResponse,
@@ -101,6 +101,11 @@ describe('Reusable form component', () => {
         { name: 'phone', label: 'Phone' },
         { name: 'description', label: 'Description' },
       ],
+      getQuery: {
+        query: getGroupContactsQuery,
+        variables: { groupFullPath: 'flightjs' },
+      },
+      getQueryNodePath: 'group.contacts',
       ...propsData,
     });
   };
@@ -108,13 +113,8 @@ describe('Reusable form component', () => {
   const mountContactCreate = () => {
     const propsData = {
       title: 'New contact',
-      successMessage: 'Contact has been added',
+      successMessage: 'Contact has been added.',
       buttonLabel: 'Create contact',
-      getQuery: {
-        query: getGroupContactsQuery,
-        variables: { groupFullPath: 'flightjs' },
-      },
-      getQueryNodePath: 'group.contacts',
       mutation: createContactMutation,
       additionalCreateParams: { groupId: 'gid://gitlab/Group/26' },
     };
@@ -124,14 +124,9 @@ describe('Reusable form component', () => {
   const mountContactUpdate = () => {
     const propsData = {
       title: 'Edit contact',
-      successMessage: 'Contact has been updated',
+      successMessage: 'Contact has been updated.',
       mutation: updateContactMutation,
-      existingModel: {
-        id: 'gid://gitlab/CustomerRelations::Contact/12',
-        firstName: 'First',
-        lastName: 'Last',
-        email: 'email@example.com',
-      },
+      existingId: 'gid://gitlab/CustomerRelations::Contact/12',
     };
     mountContact({ propsData });
   };
@@ -143,6 +138,11 @@ describe('Reusable form component', () => {
         { name: 'defaultRate', label: 'Default rate', input: { type: 'number', step: '0.01' } },
         { name: 'description', label: 'Description' },
       ],
+      getQuery: {
+        query: getGroupOrganizationsQuery,
+        variables: { groupFullPath: 'flightjs' },
+      },
+      getQueryNodePath: 'group.organizations',
       ...propsData,
     });
   };
@@ -150,13 +150,8 @@ describe('Reusable form component', () => {
   const mountOrganizationCreate = () => {
     const propsData = {
       title: 'New organization',
-      successMessage: 'Organization has been added',
+      successMessage: 'Organization has been added.',
       buttonLabel: 'Create organization',
-      getQuery: {
-        query: getGroupOrganizationsQuery,
-        variables: { groupFullPath: 'flightjs' },
-      },
-      getQueryNodePath: 'group.organizations',
       mutation: createOrganizationMutation,
       additionalCreateParams: { groupId: 'gid://gitlab/Group/26' },
     };
@@ -167,17 +162,17 @@ describe('Reusable form component', () => {
     [FORM_CREATE_CONTACT]: {
       mountFunction: mountContactCreate,
       mutationErrorResponse: createContactMutationErrorResponse,
-      toastMessage: 'Contact has been added',
+      toastMessage: 'Contact has been added.',
     },
     [FORM_UPDATE_CONTACT]: {
       mountFunction: mountContactUpdate,
       mutationErrorResponse: updateContactMutationErrorResponse,
-      toastMessage: 'Contact has been updated',
+      toastMessage: 'Contact has been updated.',
     },
     [FORM_CREATE_ORG]: {
       mountFunction: mountOrganizationCreate,
       mutationErrorResponse: createOrganizationMutationErrorResponse,
-      toastMessage: 'Organization has been added',
+      toastMessage: 'Organization has been added.',
     },
   };
   const asTestParams = (...keys) => keys.map((name) => [name, forms[name]]);
diff --git a/spec/frontend/crm/mock_data.js b/spec/frontend/crm/mock_data.js
index e351e101b29..35bc7fb69b4 100644
--- a/spec/frontend/crm/mock_data.js
+++ b/spec/frontend/crm/mock_data.js
@@ -157,3 +157,28 @@ export const createOrganizationMutationErrorResponse = {
     },
   },
 };
+
+export const updateOrganizationMutationResponse = {
+  data: {
+    customerRelationsOrganizationUpdate: {
+      __typeName: 'CustomerRelationsOrganizationUpdatePayload',
+      organization: {
+        __typename: 'CustomerRelationsOrganization',
+        id: 'gid://gitlab/CustomerRelations::Organization/2',
+        name: 'A',
+        defaultRate: null,
+        description: null,
+      },
+      errors: [],
+    },
+  },
+};
+
+export const updateOrganizationMutationErrorResponse = {
+  data: {
+    customerRelationsOrganizationUpdate: {
+      organization: null,
+      errors: ['Description is invalid.'],
+    },
+  },
+};
diff --git a/spec/frontend/crm/new_organization_form_spec.js b/spec/frontend/crm/new_organization_form_spec.js
deleted file mode 100644
index 0a7909774c9..00000000000
--- a/spec/frontend/crm/new_organization_form_spec.js
+++ /dev/null
@@ -1,109 +0,0 @@
-import { GlAlert } from '@gitlab/ui';
-import Vue from 'vue';
-import VueApollo from 'vue-apollo';
-import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import createMockApollo from 'helpers/mock_apollo_helper';
-import waitForPromises from 'helpers/wait_for_promises';
-import NewOrganizationForm from '~/crm/components/new_organization_form.vue';
-import createOrganizationMutation from '~/crm/components/queries/create_organization.mutation.graphql';
-import getGroupOrganizationsQuery from '~/crm/components/queries/get_group_organizations.query.graphql';
-import {
-  createOrganizationMutationErrorResponse,
-  createOrganizationMutationResponse,
-  getGroupOrganizationsQueryResponse,
-} from './mock_data';
-
-describe('Customer relations organizations root app', () => {
-  Vue.use(VueApollo);
-  let wrapper;
-  let fakeApollo;
-  let queryHandler;
-
-  const findCreateNewOrganizationButton = () =>
-    wrapper.findByTestId('create-new-organization-button');
-  const findCancelButton = () => wrapper.findByTestId('cancel-button');
-  const findForm = () => wrapper.find('form');
-  const findError = () => wrapper.findComponent(GlAlert);
-
-  const mountComponent = () => {
-    fakeApollo = createMockApollo([[createOrganizationMutation, queryHandler]]);
-    fakeApollo.clients.defaultClient.cache.writeQuery({
-      query: getGroupOrganizationsQuery,
-      variables: { groupFullPath: 'flightjs' },
-      data: getGroupOrganizationsQueryResponse.data,
-    });
-    wrapper = shallowMountExtended(NewOrganizationForm, {
-      provide: { groupId: 26, groupFullPath: 'flightjs' },
-      apolloProvider: fakeApollo,
-      propsData: { drawerOpen: true },
-    });
-  };
-
-  beforeEach(() => {
-    queryHandler = jest.fn().mockResolvedValue(createOrganizationMutationResponse);
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-    fakeApollo = null;
-  });
-
-  describe('Create new organization button', () => {
-    it('should be disabled by default', () => {
-      mountComponent();
-
-      expect(findCreateNewOrganizationButton().attributes('disabled')).toBeTruthy();
-    });
-
-    it('should not be disabled when first, last and email have values', async () => {
-      mountComponent();
-
-      wrapper.find('#organization-name').vm.$emit('input', 'A');
-      await waitForPromises();
-
-      expect(findCreateNewOrganizationButton().attributes('disabled')).toBeFalsy();
-    });
-  });
-
-  it("should emit 'close' when cancel button is clicked", () => {
-    mountComponent();
-
-    findCancelButton().vm.$emit('click');
-
-    expect(wrapper.emitted().close).toBeTruthy();
-  });
-
-  describe('when query is successful', () => {
-    it("should emit 'close'", async () => {
-      mountComponent();
-
-      findForm().trigger('submit');
-      await waitForPromises();
-
-      expect(wrapper.emitted().close).toBeTruthy();
-    });
-  });
-
-  describe('when query fails', () => {
-    it('should show error on reject', async () => {
-      queryHandler = jest.fn().mockRejectedValue('ERROR');
-      mountComponent();
-
-      findForm().trigger('submit');
-      await waitForPromises();
-
-      expect(findError().exists()).toBe(true);
-    });
-
-    it('should show error on error response', async () => {
-      queryHandler = jest.fn().mockResolvedValue(createOrganizationMutationErrorResponse);
-      mountComponent();
-
-      findForm().trigger('submit');
-      await waitForPromises();
-
-      expect(findError().exists()).toBe(true);
-      expect(findError().text()).toBe('create organization is invalid.');
-    });
-  });
-});
diff --git a/spec/frontend/crm/organization_form_wrapper_spec.js b/spec/frontend/crm/organization_form_wrapper_spec.js
new file mode 100644
index 00000000000..1a5a7c6ca5d
--- /dev/null
+++ b/spec/frontend/crm/organization_form_wrapper_spec.js
@@ -0,0 +1,88 @@
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import OrganizationFormWrapper from '~/crm/organizations/components/organization_form_wrapper.vue';
+import OrganizationForm from '~/crm/components/form.vue';
+import getGroupOrganizationsQuery from '~/crm/organizations/components/graphql/get_group_organizations.query.graphql';
+import createOrganizationMutation from '~/crm/organizations/components/graphql/create_organization.mutation.graphql';
+import updateOrganizationMutation from '~/crm/organizations/components/graphql/update_organization.mutation.graphql';
+
+describe('Customer relations organization form wrapper', () => {
+  let wrapper;
+
+  const findOrganizationForm = () => wrapper.findComponent(OrganizationForm);
+
+  const $apollo = {
+    queries: {
+      organizations: {
+        loading: false,
+      },
+    },
+  };
+  const $route = {
+    params: {
+      id: 7,
+    },
+  };
+  const organizations = [{ id: 'gid://gitlab/CustomerRelations::Organization/7' }];
+
+  const mountComponent = ({ isEditMode = false } = {}) => {
+    wrapper = shallowMountExtended(OrganizationFormWrapper, {
+      propsData: {
+        isEditMode,
+      },
+      provide: {
+        groupFullPath: 'flightjs',
+        groupId: 26,
+      },
+      mocks: {
+        $apollo,
+        $route,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('in edit mode', () => {
+    it('should render organization form with correct props', () => {
+      mountComponent({ isEditMode: true });
+
+      const organizationForm = findOrganizationForm();
+      expect(organizationForm.props('fields')).toHaveLength(3);
+      expect(organizationForm.props('title')).toBe('Edit organization');
+      expect(organizationForm.props('successMessage')).toBe('Organization has been updated.');
+      expect(organizationForm.props('mutation')).toBe(updateOrganizationMutation);
+      expect(organizationForm.props('getQuery')).toMatchObject({
+        query: getGroupOrganizationsQuery,
+        variables: { groupFullPath: 'flightjs' },
+      });
+      expect(organizationForm.props('getQueryNodePath')).toBe('group.organizations');
+      expect(organizationForm.props('existingId')).toBe(organizations[0].id);
+      expect(organizationForm.props('additionalCreateParams')).toMatchObject({
+        groupId: 'gid://gitlab/Group/26',
+      });
+    });
+  });
+
+  describe('in create mode', () => {
+    it('should render organization form with correct props', () => {
+      mountComponent();
+
+      const organizationForm = findOrganizationForm();
+      expect(organizationForm.props('fields')).toHaveLength(3);
+      expect(organizationForm.props('title')).toBe('New organization');
+      expect(organizationForm.props('successMessage')).toBe('Organization has been added.');
+      expect(organizationForm.props('mutation')).toBe(createOrganizationMutation);
+      expect(organizationForm.props('getQuery')).toMatchObject({
+        query: getGroupOrganizationsQuery,
+        variables: { groupFullPath: 'flightjs' },
+      });
+      expect(organizationForm.props('getQueryNodePath')).toBe('group.organizations');
+      expect(organizationForm.props('existingId')).toBeNull();
+      expect(organizationForm.props('additionalCreateParams')).toMatchObject({
+        groupId: 'gid://gitlab/Group/26',
+      });
+    });
+  });
+});
diff --git a/spec/frontend/crm/organizations_root_spec.js b/spec/frontend/crm/organizations_root_spec.js
index aef417964f4..231208d938e 100644
--- a/spec/frontend/crm/organizations_root_spec.js
+++ b/spec/frontend/crm/organizations_root_spec.js
@@ -5,11 +5,9 @@ import VueRouter from 'vue-router';
 import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import OrganizationsRoot from '~/crm/components/organizations_root.vue';
-import NewOrganizationForm from '~/crm/components/new_organization_form.vue';
-import { NEW_ROUTE_NAME } from '~/crm/constants';
-import routes from '~/crm/routes';
-import getGroupOrganizationsQuery from '~/crm/components/queries/get_group_organizations.query.graphql';
+import OrganizationsRoot from '~/crm/organizations/components/organizations_root.vue';
+import routes from '~/crm/organizations/routes';
+import getGroupOrganizationsQuery from '~/crm/organizations/components/graphql/get_group_organizations.query.graphql';
 import { getGroupOrganizationsQueryResponse } from './mock_data';
 
 describe('Customer relations organizations root app', () => {
@@ -23,7 +21,6 @@ describe('Customer relations organizations root app', () => {
   const findRowByName = (rowName) => wrapper.findAllByRole('row', { name: rowName });
   const findIssuesLinks = () => wrapper.findAllByTestId('issues-link');
   const findNewOrganizationButton = () => wrapper.findByTestId('new-organization-button');
-  const findNewOrganizationForm = () => wrapper.findComponent(NewOrganizationForm);
   const findError = () => wrapper.findComponent(GlAlert);
   const successQueryHandler = jest.fn().mockResolvedValue(getGroupOrganizationsQueryResponse);
 
@@ -37,7 +34,11 @@ describe('Customer relations organizations root app', () => {
     fakeApollo = createMockApollo([[getGroupOrganizationsQuery, queryHandler]]);
     wrapper = mountFunction(OrganizationsRoot, {
       router,
-      provide: { canAdminCrmOrganization, groupFullPath: 'flightjs', groupIssuesPath: '/issues' },
+      provide: {
+        canAdminCrmOrganization,
+        groupFullPath: 'flightjs',
+        groupIssuesPath: '/issues',
+      },
       apolloProvider: fakeApollo,
     });
   };
@@ -76,42 +77,6 @@ describe('Customer relations organizations root app', () => {
     });
   });
 
-  describe('new organization form', () => {
-    it('should not exist by default', async () => {
-      mountComponent();
-      await waitForPromises();
-
-      expect(findNewOrganizationForm().exists()).toBe(false);
-    });
-
-    it('should exist when user clicks new contact button', async () => {
-      mountComponent();
-
-      findNewOrganizationButton().vm.$emit('click');
-      await waitForPromises();
-
-      expect(findNewOrganizationForm().exists()).toBe(true);
-    });
-
-    it('should exist when user navigates directly to /new', async () => {
-      router.replace({ name: NEW_ROUTE_NAME });
-      mountComponent();
-      await waitForPromises();
-
-      expect(findNewOrganizationForm().exists()).toBe(true);
-    });
-
-    it('should not exist when form emits close', async () => {
-      router.replace({ name: NEW_ROUTE_NAME });
-      mountComponent();
-
-      findNewOrganizationForm().vm.$emit('close');
-      await waitForPromises();
-
-      expect(findNewOrganizationForm().exists()).toBe(false);
-    });
-  });
-
   it('should render error message on reject', async () => {
     mountComponent({ queryHandler: jest.fn().mockRejectedValue('ERROR') });
     await waitForPromises();
diff --git a/spec/frontend/ide/components/ide_side_bar_spec.js b/spec/frontend/ide/components/ide_side_bar_spec.js
index 34f14ef23a4..ace8988b8c9 100644
--- a/spec/frontend/ide/components/ide_side_bar_spec.js
+++ b/spec/frontend/ide/components/ide_side_bar_spec.js
@@ -1,4 +1,4 @@
-import { GlSkeletonLoading } from '@gitlab/ui';
+import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
diff --git a/spec/frontend/lib/utils/text_markdown_spec.js b/spec/frontend/lib/utils/text_markdown_spec.js
index a5877aa6e3e..55c18de0845 100644
--- a/spec/frontend/lib/utils/text_markdown_spec.js
+++ b/spec/frontend/lib/utils/text_markdown_spec.js
@@ -179,11 +179,13 @@ describe('init markdown', () => {
           text                           | expected
           ${'- item'}                    | ${'- item\n- '}
           ${'- [ ] item'}                | ${'- [ ] item\n- [ ] '}
-          ${'- [x] item'}                | ${'- [x] item\n- [x] '}
+          ${'- [x] item'}                | ${'- [x] item\n- [ ] '}
+          ${'- [X] item'}                | ${'- [X] item\n- [ ] '}
           ${'- item\n  - second'}        | ${'- item\n  - second\n  - '}
           ${'1. item'}                   | ${'1. item\n2. '}
           ${'1. [ ] item'}               | ${'1. [ ] item\n2. [ ] '}
-          ${'1. [x] item'}               | ${'1. [x] item\n2. [x] '}
+          ${'1. [x] item'}               | ${'1. [x] item\n2. [ ] '}
+          ${'1. [X] item'}               | ${'1. [X] item\n2. [ ] '}
           ${'108. item'}                 | ${'108. item\n109. '}
           ${'108. item\n     - second'}  | ${'108. item\n     - second\n     - '}
           ${'108. item\n     1. second'} | ${'108. item\n     1. second\n     2. '}
@@ -207,10 +209,12 @@ describe('init markdown', () => {
           ${'- item\n- '}                          | ${'- item\n'}
           ${'- [ ] item\n- [ ] '}                  | ${'- [ ] item\n'}
           ${'- [x] item\n- [x] '}                  | ${'- [x] item\n'}
+          ${'- [X] item\n- [X] '}                  | ${'- [X] item\n'}
           ${'- item\n  - second\n  - '}            | ${'- item\n  - second\n'}
           ${'1. item\n2. '}                        | ${'1. item\n'}
           ${'1. [ ] item\n2. [ ] '}                | ${'1. [ ] item\n'}
           ${'1. [x] item\n2. [x] '}                | ${'1. [x] item\n'}
+          ${'1. [X] item\n2. [X] '}                | ${'1. [X] item\n'}
           ${'108. item\n109. '}                    | ${'108. item\n'}
           ${'108. item\n     - second\n     - '}   | ${'108. item\n     - second\n'}
           ${'108. item\n     1. second\n     1. '} | ${'108. item\n     1. second\n'}
diff --git a/spec/frontend/runner/components/runner_jobs_spec.js b/spec/frontend/runner/components/runner_jobs_spec.js
index 9abb2861005..9e40e911448 100644
--- a/spec/frontend/runner/components/runner_jobs_spec.js
+++ b/spec/frontend/runner/components/runner_jobs_spec.js
@@ -1,4 +1,4 @@
-import { GlSkeletonLoading } from '@gitlab/ui';
+import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
diff --git a/spec/frontend/runner/components/runner_projects_spec.js b/spec/frontend/runner/components/runner_projects_spec.js
index 96de8d11bca..62ebc6539e2 100644
--- a/spec/frontend/runner/components/runner_projects_spec.js
+++ b/spec/frontend/runner/components/runner_projects_spec.js
@@ -1,4 +1,4 @@
-import { GlSkeletonLoading } from '@gitlab/ui';
+import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
diff --git a/spec/frontend/vue_shared/issuable/list/components/issuable_list_root_spec.js b/spec/frontend/vue_shared/issuable/list/components/issuable_list_root_spec.js
index 64823cd4c6c..058cb30c1d5 100644
--- a/spec/frontend/vue_shared/issuable/list/components/issuable_list_root_spec.js
+++ b/spec/frontend/vue_shared/issuable/list/components/issuable_list_root_spec.js
@@ -1,4 +1,9 @@
-import { GlAlert, GlKeysetPagination, GlSkeletonLoading, GlPagination } from '@gitlab/ui';
+import {
+  GlAlert,
+  GlKeysetPagination,
+  GlDeprecatedSkeletonLoading as GlSkeletonLoading,
+  GlPagination,
+} from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import VueDraggable from 'vuedraggable';