Merge branch '2256-add-new-crm-organization-component' into 'master'

Add create crm organization component

See merge request gitlab-org/gitlab!76059

app/assets/javascripts/crm/components/new_organization_form.vue

+<script>
+import { GlAlert, GlButton, GlDrawer, GlFormGroup, GlFormInput } from '@gitlab/ui';
+import { produce } from 'immer';
+import { __, s__ } from '~/locale';
+import { convertToGraphQLId } from '~/graphql_shared/utils';
+import { TYPE_GROUP } from '~/graphql_shared/constants';
+import createOrganization from './queries/create_organization.mutation.graphql';
+import getGroupOrganizationsQuery from './queries/get_group_organizations.query.graphql';
+
+export default {
+  components: {
+    GlAlert,
+    GlButton,
+    GlDrawer,
+    GlFormGroup,
+    GlFormInput,
+  },
+  inject: ['groupFullPath', 'groupId'],
+  props: {
+    drawerOpen: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      name: '',
+      defaultRate: null,
+      description: '',
+      submitting: false,
+      errorMessages: [],
+    };
+  },
+  computed: {
+    invalid() {
+      return this.name.trim() === '';
+    },
+  },
+  methods: {
+    save() {
+      this.submitting = true;
+      return this.$apollo
+        .mutate({
+          mutation: createOrganization,
+          variables: {
+            input: {
+              groupId: convertToGraphQLId(TYPE_GROUP, this.groupId),
+              name: this.name,
+              defaultRate: this.defaultRate ? parseFloat(this.defaultRate) : null,
+              description: this.description,
+            },
+          },
+          update: this.updateCache,
+        })
+        .then(({ data }) => {
+          if (data.customerRelationsOrganizationCreate.errors.length === 0) this.close(true);
+
+          this.submitting = false;
+        })
+        .catch(() => {
+          this.errorMessages = [this.$options.i18n.somethingWentWrong];
+          this.submitting = false;
+        });
+    },
+    close(success) {
+      this.$emit('close', success);
+    },
+    updateCache(store, { data: { customerRelationsOrganizationCreate } }) {
+      if (customerRelationsOrganizationCreate.errors.length > 0) {
+        this.errorMessages = customerRelationsOrganizationCreate.errors;
+        return;
+      }
+
+      const variables = {
+        groupFullPath: this.groupFullPath,
+      };
+      const sourceData = store.readQuery({
+        query: getGroupOrganizationsQuery,
+        variables,
+      });
+
+      const data = produce(sourceData, (draftState) => {
+        draftState.group.organizations.nodes = [
+          ...sourceData.group.organizations.nodes,
+          customerRelationsOrganizationCreate.organization,
+        ];
+      });
+
+      store.writeQuery({
+        query: getGroupOrganizationsQuery,
+        variables,
+        data,
+      });
+    },
+    getDrawerHeaderHeight() {
+      const wrapperEl = document.querySelector('.content-wrapper');
+
+      if (wrapperEl) {
+        return `${wrapperEl.offsetTop}px`;
+      }
+
+      return '';
+    },
+  },
+  i18n: {
+    buttonLabel: s__('Crm|Create organization'),
+    cancel: __('Cancel'),
+    name: __('Name'),
+    defaultRate: s__('Crm|Default rate (optional)'),
+    description: __('Description (optional)'),
+    title: s__('Crm|New Organization'),
+    somethingWentWrong: __('Something went wrong. Please try again.'),
+  },
+};
+</script>
+
+<template>
+  <gl-drawer
+    class="gl-drawer-responsive"
+    :open="drawerOpen"
+    :header-height="getDrawerHeaderHeight()"
+    @close="close(false)"
+  >
+    <template #title>
+      <h4>{{ $options.i18n.title }}</h4>
+    </template>
+    <gl-alert v-if="errorMessages.length" variant="danger" @dismiss="errorMessages = []">
+      <ul class="gl-mb-0! gl-ml-5">
+        <li v-for="error in errorMessages" :key="error">
+          {{ error }}
+        </li>
+      </ul>
+    </gl-alert>
+    <form @submit.prevent="save">
+      <gl-form-group :label="$options.i18n.name" label-for="organization-name">
+        <gl-form-input id="organization-name" v-model="name" />
+      </gl-form-group>
+      <gl-form-group :label="$options.i18n.defaultRate" label-for="organization-default-rate">
+        <gl-form-input
+          id="organization-default-rate"
+          v-model="defaultRate"
+          type="number"
+          step="0.01"
+        />
+      </gl-form-group>
+      <gl-form-group :label="$options.i18n.description" label-for="organization-description">
+        <gl-form-input id="organization-description" v-model="description" />
+      </gl-form-group>
+      <span class="gl-float-right">
+        <gl-button data-testid="cancel-button" @click="close(false)">
+          {{ $options.i18n.cancel }}
+        </gl-button>
+        <gl-button
+          variant="confirm"
+          :disabled="invalid"
+          :loading="submitting"
+          data-testid="create-new-organization-button"
+          type="submit"
+          >{{ $options.i18n.buttonLabel }}</gl-button
+        >
+      </span>
+    </form>
+  </gl-drawer>
+</template>

app/assets/javascripts/crm/components/organizations_root.vue

 <script>
 import { GlAlert, GlButton, GlLoadingIcon, GlTable, GlTooltipDirective } from '@gitlab/ui';
+import { parseBoolean } from '~/lib/utils/common_utils';
 import { s__, __ } from '~/locale';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import { INDEX_ROUTE_NAME, NEW_ROUTE_NAME } from '../constants';
 import getGroupOrganizationsQuery from './queries/get_group_organizations.query.graphql';
+import NewOrganizationForm from './new_organization_form.vue';
 
 export default {
   components: {
@@ -10,11 +13,12 @@ export default {
     GlButton,
     GlLoadingIcon,
     GlTable,
+    NewOrganizationForm,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-  inject: ['groupFullPath', 'groupIssuesPath'],
+  inject: ['canAdminCrmOrganization', 'groupFullPath', 'groupIssuesPath'],
   data() {
     return {
       error: false,
@@ -43,18 +47,31 @@ export default {
     isLoading() {
       return this.$apollo.queries.organizations.loading;
     },
+    showNewForm() {
+      return this.$route.name === NEW_ROUTE_NAME;
+    },
+    canCreateNew() {
+      return parseBoolean(this.canAdminCrmOrganization);
+    },
   },
   methods: {
     extractOrganizations(data) {
       const organizations = data?.group?.organizations?.nodes || [];
       return organizations.slice().sort((a, b) => a.name.localeCompare(b.name));
     },
-    dismissError() {
-      this.error = false;
-    },
     getIssuesPath(path, value) {
       return `${path}?scope=all&state=opened&crm_organization_id=${value}`;
     },
+    displayNewForm() {
+      if (this.showNewForm) return;
+
+      this.$router.push({ name: NEW_ROUTE_NAME });
+    },
+    hideNewForm(success) {
+      if (success) this.$toast.show(this.$options.i18n.organizationAdded);
+
+      this.$router.replace({ name: INDEX_ROUTE_NAME });
+    },
   },
   fields: [
     { key: 'name', sortable: true },
@@ -71,19 +88,39 @@ export default {
   i18n: {
     emptyText: s__('Crm|No organizations found'),
     issuesButtonLabel: __('View issues'),
+    title: s__('Crm|Customer Relations Organizations'),
+    newOrganization: s__('Crm|New organization'),
     errorText: __('Something went wrong. Please try again.'),
+    organizationAdded: s__('Crm|Organization has been added'),
   },
 };
 </script>
 
 <template>
   <div>
-    <gl-alert v-if="error" variant="danger" class="gl-my-6" @dismiss="dismissError">
-      <div>{{ $options.i18n.errorText }}</div>
+    <gl-alert v-if="error" variant="danger" class="gl-mt-6" @dismiss="error = false">
+      {{ $options.i18n.errorText }}
     </gl-alert>
+    <div
+      class="gl-display-flex gl-align-items-baseline gl-flex-direction-row gl-justify-content-space-between gl-mt-6"
+    >
+      <h2 class="gl-font-size-h2 gl-my-0">
+        {{ $options.i18n.title }}
+      </h2>
+      <div
+        v-if="canCreateNew"
+        class="gl-display-none gl-md-display-flex gl-align-items-center gl-justify-content-end"
+      >
+        <gl-button variant="confirm" data-testid="new-organization-button" @click="displayNewForm">
+          {{ $options.i18n.newOrganization }}
+        </gl-button>
+      </div>
+    </div>
+    <new-organization-form v-if="showNewForm" :drawer-open="showNewForm" @close="hideNewForm" />
     <gl-loading-icon v-if="isLoading" class="gl-mt-5" size="lg" />
     <gl-table
       v-else
+      class="gl-mt-5"
       :items="organizations"
       :fields="$options.fields"
       :empty-text="$options.i18n.emptyText"

app/assets/javascripts/crm/components/queries/create_organization.mutation.graphql

+#import "./crm_organization_fields.fragment.graphql"
+
+mutation createOrganization($input: CustomerRelationsOrganizationCreateInput!) {
+  customerRelationsOrganizationCreate(input: $input) {
+    organization {
+      ...OrganizationFragment
+    }
+    errors
+  }
+}

app/assets/javascripts/crm/components/queries/crm_organization_fields.fragment.graphql

+fragment OrganizationFragment on CustomerRelationsOrganization {
+  __typename
+  id
+  name
+  defaultRate
+  description
+}

app/assets/javascripts/crm/components/queries/get_group_organizations.query.graphql

+#import "./crm_organization_fields.fragment.graphql"
+
 query organizations($groupFullPath: ID!) {
   group(fullPath: $groupFullPath) {
     __typename
     id
     organizations {
       nodes {
-        __typename
-        id
-        name
-        defaultRate
-        description
+        ...OrganizationFragment
       }
     }
   }

app/assets/javascripts/crm/organizations_bundle.js

+import { GlToast } from '@gitlab/ui';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
+import VueRouter from 'vue-router';
 import createDefaultClient from '~/lib/graphql';
 import CrmOrganizationsRoot from './components/organizations_root.vue';
+import routes from './routes';
 
 Vue.use(VueApollo);
+Vue.use(VueRouter);
+Vue.use(GlToast);
 
 export default () => {
   const el = document.getElementById('js-crm-organizations-app');
@@ -16,12 +21,19 @@ export default () => {
     return false;
   }
 
-  const { groupFullPath, groupIssuesPath } = el.dataset;
+  const { basePath, canAdminCrmOrganization, groupFullPath, groupId, groupIssuesPath } = el.dataset;
+
+  const router = new VueRouter({
+    base: basePath,
+    mode: 'history',
+    routes,
+  });
 
   return new Vue({
     el,
+    router,
     apolloProvider,
-    provide: { groupFullPath, groupIssuesPath },
+    provide: { canAdminCrmOrganization, groupFullPath, groupId, groupIssuesPath },
     render(createElement) {
       return createElement(CrmOrganizationsRoot);
     },

app/assets/javascripts/crm/routes.js

 import { INDEX_ROUTE_NAME, NEW_ROUTE_NAME, EDIT_ROUTE_NAME } from './constants';
-import CrmContactsRoot from './components/contacts_root.vue';
 
 export default [
   {
     name: INDEX_ROUTE_NAME,
     path: '/',
-    component: CrmContactsRoot,
   },
   {
     name: NEW_ROUTE_NAME,
     path: '/new',
-    component: CrmContactsRoot,
   },
   {
     name: EDIT_ROUTE_NAME,
     path: '/:id/edit',
-    component: CrmContactsRoot,
   },
 ];

app/controllers/groups/crm/organizations_controller.rb

@@ -5,6 +5,10 @@ class Groups::Crm::OrganizationsController < Groups::ApplicationController
 
   before_action :authorize_read_crm_organization!
 
+  def new
+    render action: "index"
+  end
+
   private
 
   def authorize_read_crm_organization!

app/views/groups/crm/organizations/index.html.haml

 - breadcrumb_title _('Customer Relations Organizations')
 - page_title _('Customer Relations Organizations')
 
-#js-crm-organizations-app{ data: { group_full_path: @group.full_path, group_issues_path: issues_group_path(@group) } }
+#js-crm-organizations-app{ data: { base_path: group_crm_organizations_path(@group), can_admin_crm_organization: can?(current_user, :admin_crm_organization, @group).to_s, group_full_path: @group.full_path, group_id: @group.id, group_issues_path: issues_group_path(@group) } }

config/routes/group.rb

@@ -128,7 +128,7 @@ constraints(::Constraints::GroupUrlConstrainer.new) do
 
     namespace :crm do
       resources :contacts, only: [:index, :new, :edit]
-      resources :organizations, only: [:index]
+      resources :organizations, only: [:index, :new]
     end
   end
 

locale/gitlab.pot

@@ -10315,9 +10315,18 @@ msgstr ""
 msgid "Crm|Create new contact"
 msgstr ""
 
+msgid "Crm|Create organization"
+msgstr ""
+
 msgid "Crm|Customer Relations Contacts"
 msgstr ""
 
+msgid "Crm|Customer Relations Organizations"
+msgstr ""
+
+msgid "Crm|Default rate (optional)"
+msgstr ""
+
 msgid "Crm|Description (optional)"
 msgstr ""
 
@@ -10333,15 +10342,24 @@ msgstr ""
 msgid "Crm|Last name"
 msgstr ""
 
+msgid "Crm|New Organization"
+msgstr ""
+
 msgid "Crm|New contact"
 msgstr ""
 
+msgid "Crm|New organization"
+msgstr ""
+
 msgid "Crm|No contacts found"
 msgstr ""
 
 msgid "Crm|No organizations found"
 msgstr ""
 
+msgid "Crm|Organization has been added"
+msgstr ""
+
 msgid "Crm|Phone number (optional)"
 msgstr ""
 

spec/frontend/crm/mock_data.js

@@ -134,3 +134,28 @@ export const updateContactMutationErrorResponse = {
     },
   },
 };
+
+export const createOrganizationMutationResponse = {
+  data: {
+    customerRelationsOrganizationCreate: {
+      __typeName: 'CustomerRelationsOrganizationCreatePayload',
+      organization: {
+        __typename: 'CustomerRelationsOrganization',
+        id: 'gid://gitlab/CustomerRelations::Organization/2',
+        name: 'A',
+        defaultRate: null,
+        description: null,
+      },
+      errors: [],
+    },
+  },
+};
+
+export const createOrganizationMutationErrorResponse = {
+  data: {
+    customerRelationsOrganizationCreate: {
+      organization: null,
+      errors: ['Name cannot be blank.'],
+    },
+  },
+};

spec/frontend/crm/new_organization_form_spec.js

+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('Name cannot be blank.');
+    });
+  });
+});

spec/frontend/crm/organizations_root_spec.js

 import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
+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 { getGroupOrganizationsQueryResponse } from './mock_data';
 
 describe('Customer relations organizations root app', () => {
   Vue.use(VueApollo);
+  Vue.use(VueRouter);
   let wrapper;
   let fakeApollo;
+  let router;
 
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   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);
 
+  const basePath = '/groups/flightjs/-/crm/organizations';
+
   const mountComponent = ({
     queryHandler = successQueryHandler,
     mountFunction = shallowMountExtended,
+    canAdminCrmOrganization = true,
   } = {}) => {
     fakeApollo = createMockApollo([[getGroupOrganizationsQuery, queryHandler]]);
     wrapper = mountFunction(OrganizationsRoot, {
-      provide: { groupFullPath: 'flightjs', groupIssuesPath: '/issues' },
+      router,
+      provide: { canAdminCrmOrganization, groupFullPath: 'flightjs', groupIssuesPath: '/issues' },
       apolloProvider: fakeApollo,
     });
   };
 
+  beforeEach(() => {
+    router = new VueRouter({
+      base: basePath,
+      mode: 'history',
+      routes,
+    });
+  });
+
   afterEach(() => {
     wrapper.destroy();
     fakeApollo = null;
+    router = null;
   });
 
   it('should render loading spinner', () => {
@@ -41,6 +62,56 @@ describe('Customer relations organizations root app', () => {
     expect(findLoadingIcon().exists()).toBe(true);
   });
 
+  describe('new organization button', () => {
+    it('should exist when user has permission', () => {
+      mountComponent();
+
+      expect(findNewOrganizationButton().exists()).toBe(true);
+    });
+
+    it('should not exist when user has no permission', () => {
+      mountComponent({ canAdminCrmOrganization: false });
+
+      expect(findNewOrganizationButton().exists()).toBe(false);
+    });
+  });
+
+  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();
@@ -48,18 +119,27 @@ describe('Customer relations organizations root app', () => {
     expect(findError().exists()).toBe(true);
   });
 
-  it('renders correct results', async () => {
-    mountComponent({ mountFunction: mountExtended });
-    await waitForPromises();
+  describe('on successful load', () => {
+    it('should not render error', async () => {
+      mountComponent();
+      await waitForPromises();
 
-    expect(findRowByName(/Test Inc/i)).toHaveLength(1);
-    expect(findRowByName(/VIP/i)).toHaveLength(1);
-    expect(findRowByName(/120/i)).toHaveLength(1);
+      expect(findError().exists()).toBe(false);
+    });
 
-    const issueLink = findIssuesLinks().at(0);
-    expect(issueLink.exists()).toBe(true);
-    expect(issueLink.attributes('href')).toBe(
-      '/issues?scope=all&state=opened&crm_organization_id=2',
-    );
+    it('renders correct results', async () => {
+      mountComponent({ mountFunction: mountExtended });
+      await waitForPromises();
+
+      expect(findRowByName(/Test Inc/i)).toHaveLength(1);
+      expect(findRowByName(/VIP/i)).toHaveLength(1);
+      expect(findRowByName(/120/i)).toHaveLength(1);
+
+      const issueLink = findIssuesLinks().at(0);
+      expect(issueLink.exists()).toBe(true);
+      expect(issueLink.attributes('href')).toBe(
+        '/issues?scope=all&state=opened&crm_organization_id=2',
+      );
+    });
   });
 });

spec/requests/groups/crm/organizations_controller_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe Groups::Crm::OrganizationsController do
+  let_it_be(:user) { create(:user) }
+
+  shared_examples 'response with 404 status' do
+    it 'returns 404' do
+      subject
+
+      expect(response).to have_gitlab_http_status(:not_found)
+    end
+  end
+
+  shared_examples 'ok response with index template' do
+    it 'renders the index template' do
+      subject
+
+      expect(response).to have_gitlab_http_status(:ok)
+      expect(response).to render_template(:index)
+    end
+  end
+
+  shared_examples 'ok response with index template if authorized' do
+    context 'private group' do
+      let(:group) { create(:group, :private) }
+
+      context 'with authorized user' do
+        before do
+          group.add_reporter(user)
+          sign_in(user)
+        end
+
+        context 'when feature flag is enabled' do
+          it_behaves_like 'ok response with index template'
+        end
+
+        context 'when feature flag is not enabled' do
+          before do
+            stub_feature_flags(customer_relations: false)
+          end
+
+          it_behaves_like 'response with 404 status'
+        end
+      end
+
+      context 'with unauthorized user' do
+        before do
+          sign_in(user)
+        end
+
+        it_behaves_like 'response with 404 status'
+      end
+
+      context 'with anonymous user' do
+        it 'blah' do
+          subject
+
+          expect(response).to have_gitlab_http_status(:found)
+          expect(response).to redirect_to(new_user_session_path)
+        end
+      end
+    end
+
+    context 'public group' do
+      let(:group) { create(:group, :public) }
+
+      context 'with anonymous user' do
+        it_behaves_like 'ok response with index template'
+      end
+    end
+  end
+
+  describe 'GET #index' do
+    subject do
+      get group_crm_organizations_path(group)
+      response
+    end
+
+    it_behaves_like 'ok response with index template if authorized'
+  end
+
+  describe 'GET #new' do
+    subject do
+      get new_group_crm_organization_path(group)
+    end
+
+    it_behaves_like 'ok response with index template if authorized'
+  end
+end