Add latest changes from gitlab-org/gitlab@14-5-stable-eev14.5.0-rc42

6 files changed, 242 insertions, 0 deletions

diff --git a/app/assets/javascripts/crm/components/contacts_root.vue b/app/assets/javascripts/crm/components/contacts_root.vue
new file mode 100644
index 00000000000..83c02f7d5fe
--- /dev/null
+++ b/app/assets/javascripts/crm/components/contacts_root.vue
@@ -0,0 +1,80 @@
+<script>
+import { GlLoadingIcon, GlTable } from '@gitlab/ui';
+import createFlash from '~/flash';
+import { s__, __ } from '~/locale';
+import getGroupContactsQuery from './queries/get_group_contacts.query.graphql';
+
+export default {
+  components: {
+    GlLoadingIcon,
+    GlTable,
+  },
+  inject: ['groupFullPath'],
+  data() {
+    return { contacts: [] };
+  },
+  apollo: {
+    contacts: {
+      query() {
+        return getGroupContactsQuery;
+      },
+      variables() {
+        return {
+          groupFullPath: this.groupFullPath,
+        };
+      },
+      update(data) {
+        return this.extractContacts(data);
+      },
+      error(error) {
+        createFlash({
+          message: __('Something went wrong. Please try again.'),
+          error,
+          captureError: true,
+        });
+      },
+    },
+  },
+  computed: {
+    isLoading() {
+      return this.$apollo.queries.contacts.loading;
+    },
+  },
+  methods: {
+    extractContacts(data) {
+      const contacts = data?.group?.contacts?.nodes || [];
+      return contacts.slice().sort((a, b) => a.firstName.localeCompare(b.firstName));
+    },
+  },
+  fields: [
+    { key: 'firstName', sortable: true },
+    { key: 'lastName', sortable: true },
+    { key: 'email', sortable: true },
+    { key: 'phone', sortable: true },
+    { key: 'description', sortable: true },
+    {
+      key: 'organization',
+      formatter: (organization) => {
+        return organization?.name;
+      },
+      sortable: true,
+    },
+  ],
+  i18n: {
+    emptyText: s__('Crm|No contacts found'),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-loading-icon v-if="isLoading" class="gl-mt-5" size="lg" />
+    <gl-table
+      v-else
+      :items="contacts"
+      :fields="$options.fields"
+      :empty-text="$options.i18n.emptyText"
+      show-empty
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/crm/components/organizations_root.vue b/app/assets/javascripts/crm/components/organizations_root.vue
new file mode 100644
index 00000000000..98b45d0a042
--- /dev/null
+++ b/app/assets/javascripts/crm/components/organizations_root.vue
@@ -0,0 +1,71 @@
+<script>
+import { GlLoadingIcon, GlTable } from '@gitlab/ui';
+import createFlash from '~/flash';
+import { s__, __ } from '~/locale';
+import getGroupOrganizationsQuery from './queries/get_group_organizations.query.graphql';
+
+export default {
+  components: {
+    GlLoadingIcon,
+    GlTable,
+  },
+  inject: ['groupFullPath'],
+  data() {
+    return { organizations: [] };
+  },
+  apollo: {
+    organizations: {
+      query() {
+        return getGroupOrganizationsQuery;
+      },
+      variables() {
+        return {
+          groupFullPath: this.groupFullPath,
+        };
+      },
+      update(data) {
+        return this.extractOrganizations(data);
+      },
+      error(error) {
+        createFlash({
+          message: __('Something went wrong. Please try again.'),
+          error,
+          captureError: true,
+        });
+      },
+    },
+  },
+  computed: {
+    isLoading() {
+      return this.$apollo.queries.organizations.loading;
+    },
+  },
+  methods: {
+    extractOrganizations(data) {
+      const organizations = data?.group?.organizations?.nodes || [];
+      return organizations.slice().sort((a, b) => a.name.localeCompare(b.name));
+    },
+  },
+  fields: [
+    { key: 'name', sortable: true },
+    { key: 'defaultRate', sortable: true },
+    { key: 'description', sortable: true },
+  ],
+  i18n: {
+    emptyText: s__('Crm|No organizations found'),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-loading-icon v-if="isLoading" class="gl-mt-5" size="lg" />
+    <gl-table
+      v-else
+      :items="organizations"
+      :fields="$options.fields"
+      :empty-text="$options.i18n.emptyText"
+      show-empty
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/crm/components/queries/get_group_contacts.query.graphql b/app/assets/javascripts/crm/components/queries/get_group_contacts.query.graphql
new file mode 100644
index 00000000000..f6acd258585
--- /dev/null
+++ b/app/assets/javascripts/crm/components/queries/get_group_contacts.query.graphql
@@ -0,0 +1,22 @@
+query contacts($groupFullPath: ID!) {
+  group(fullPath: $groupFullPath) {
+    __typename
+    id
+    contacts {
+      nodes {
+        __typename
+        id
+        firstName
+        lastName
+        email
+        phone
+        description
+        organization {
+          __typename
+          id
+          name
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/crm/components/queries/get_group_organizations.query.graphql b/app/assets/javascripts/crm/components/queries/get_group_organizations.query.graphql
new file mode 100644
index 00000000000..7c4ec6ec585
--- /dev/null
+++ b/app/assets/javascripts/crm/components/queries/get_group_organizations.query.graphql
@@ -0,0 +1,15 @@
+query organizations($groupFullPath: ID!) {
+  group(fullPath: $groupFullPath) {
+    __typename
+    id
+    organizations {
+      nodes {
+        __typename
+        id
+        name
+        defaultRate
+        description
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/crm/contacts_bundle.js b/app/assets/javascripts/crm/contacts_bundle.js
new file mode 100644
index 00000000000..6438953596e
--- /dev/null
+++ b/app/assets/javascripts/crm/contacts_bundle.js
@@ -0,0 +1,27 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
+import CrmContactsRoot from './components/contacts_root.vue';
+
+Vue.use(VueApollo);
+
+export default () => {
+  const el = document.getElementById('js-crm-contacts-app');
+
+  const apolloProvider = new VueApollo({
+    defaultClient: createDefaultClient(),
+  });
+
+  if (!el) {
+    return false;
+  }
+
+  return new Vue({
+    el,
+    apolloProvider,
+    provide: { groupFullPath: el.dataset.groupFullPath },
+    render(createElement) {
+      return createElement(CrmContactsRoot);
+    },
+  });
+};
diff --git a/app/assets/javascripts/crm/organizations_bundle.js b/app/assets/javascripts/crm/organizations_bundle.js
new file mode 100644
index 00000000000..ac9990b9fb4
--- /dev/null
+++ b/app/assets/javascripts/crm/organizations_bundle.js
@@ -0,0 +1,27 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
+import CrmOrganizationsRoot from './components/organizations_root.vue';
+
+Vue.use(VueApollo);
+
+export default () => {
+  const el = document.getElementById('js-crm-organizations-app');
+
+  const apolloProvider = new VueApollo({
+    defaultClient: createDefaultClient(),
+  });
+
+  if (!el) {
+    return false;
+  }
+
+  return new Vue({
+    el,
+    apolloProvider,
+    provide: { groupFullPath: el.dataset.groupFullPath },
+    render(createElement) {
+      return createElement(CrmOrganizationsRoot);
+    },
+  });
+};