Add latest changes from gitlab-org/gitlab@master

3 files changed, 91 insertions, 2 deletions

diff --git a/app/assets/javascripts/crm/components/organizations_root.vue b/app/assets/javascripts/crm/components/organizations_root.vue
index 6d32ba41eae..98b45d0a042 100644
--- a/app/assets/javascripts/crm/components/organizations_root.vue
+++ b/app/assets/javascripts/crm/components/organizations_root.vue
@@ -1,7 +1,71 @@
 <script>
-export default {};
+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></div>
+  <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_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/organizations_bundle.js b/app/assets/javascripts/crm/organizations_bundle.js
index d4b2dff8f3e..ac9990b9fb4 100644
--- a/app/assets/javascripts/crm/organizations_bundle.js
+++ b/app/assets/javascripts/crm/organizations_bundle.js
@@ -1,15 +1,25 @@
 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);
     },