Add latest changes from gitlab-org/gitlab@master

3 files changed, 107 insertions, 2 deletions

diff --git a/app/assets/javascripts/crm/components/contacts_root.vue b/app/assets/javascripts/crm/components/contacts_root.vue
index 6d32ba41eae..83c02f7d5fe 100644
--- a/app/assets/javascripts/crm/components/contacts_root.vue
+++ b/app/assets/javascripts/crm/components/contacts_root.vue
@@ -1,7 +1,80 @@
 <script>
-export default {};
+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></div>
+  <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/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/contacts_bundle.js b/app/assets/javascripts/crm/contacts_bundle.js
index a46acfdc2d5..6438953596e 100644
--- a/app/assets/javascripts/crm/contacts_bundle.js
+++ b/app/assets/javascripts/crm/contacts_bundle.js
@@ -1,15 +1,25 @@
 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);
     },