Add latest changes from gitlab-org/gitlab@master

3 files changed, 50 insertions, 13 deletions

diff --git a/app/assets/javascripts/crm/components/contacts_root.vue b/app/assets/javascripts/crm/components/contacts_root.vue
index 0242bdab541..180a450f839 100644
--- a/app/assets/javascripts/crm/components/contacts_root.vue
+++ b/app/assets/javascripts/crm/components/contacts_root.vue
@@ -71,6 +71,9 @@ export default {
       this.error = false;
       this.errorMessages = [];
     },
+    getIssuesPath(path, value) {
+      return `${path}?scope=all&state=opened&crm_contact_id=${value}`;
+    },
   },
   fields: [
     { key: 'firstName', sortable: true },
@@ -142,7 +145,7 @@ export default {
           data-testid="issues-link"
           icon="issues"
           :aria-label="$options.i18n.issuesButtonLabel"
-          :href="`${groupIssuesPath}?scope=all&state=opened&crm_contact_id=${data.value}`"
+          :href="getIssuesPath(groupIssuesPath, data.value)"
         />
       </template>
     </gl-table>
diff --git a/app/assets/javascripts/crm/components/organizations_root.vue b/app/assets/javascripts/crm/components/organizations_root.vue
index 98b45d0a042..336087e3dff 100644
--- a/app/assets/javascripts/crm/components/organizations_root.vue
+++ b/app/assets/javascripts/crm/components/organizations_root.vue
@@ -1,17 +1,25 @@
 <script>
-import { GlLoadingIcon, GlTable } from '@gitlab/ui';
-import createFlash from '~/flash';
+import { GlAlert, GlButton, GlLoadingIcon, GlTable, GlTooltipDirective } from '@gitlab/ui';
 import { s__, __ } from '~/locale';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import getGroupOrganizationsQuery from './queries/get_group_organizations.query.graphql';
 
 export default {
   components: {
+    GlAlert,
+    GlButton,
     GlLoadingIcon,
     GlTable,
   },
-  inject: ['groupFullPath'],
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  inject: ['groupFullPath', 'groupIssuesPath'],
   data() {
-    return { organizations: [] };
+    return {
+      error: false,
+      organizations: [],
+    };
   },
   apollo: {
     organizations: {
@@ -26,12 +34,8 @@ export default {
       update(data) {
         return this.extractOrganizations(data);
       },
-      error(error) {
-        createFlash({
-          message: __('Something went wrong. Please try again.'),
-          error,
-          captureError: true,
-        });
+      error() {
+        this.error = true;
       },
     },
   },
@@ -45,20 +49,38 @@ export default {
       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}`;
+    },
   },
   fields: [
     { key: 'name', sortable: true },
     { key: 'defaultRate', sortable: true },
     { key: 'description', sortable: true },
+    {
+      key: 'id',
+      label: __('Issues'),
+      formatter: (id) => {
+        return getIdFromGraphQLId(id);
+      },
+    },
   ],
   i18n: {
     emptyText: s__('Crm|No organizations found'),
+    issuesButtonLabel: __('View issues'),
+    errorText: __('Something went wrong. Please try again.'),
   },
 };
 </script>
 
 <template>
   <div>
+    <gl-alert v-if="error" variant="danger" class="gl-my-6" @dismiss="dismissError">
+      <div>{{ $options.i18n.errorText }}</div>
+    </gl-alert>
     <gl-loading-icon v-if="isLoading" class="gl-mt-5" size="lg" />
     <gl-table
       v-else
@@ -66,6 +88,16 @@ export default {
       :fields="$options.fields"
       :empty-text="$options.i18n.emptyText"
       show-empty
-    />
+    >
+      <template #cell(id)="data">
+        <gl-button
+          v-gl-tooltip.hover.bottom="$options.i18n.issuesButtonLabel"
+          data-testid="issues-link"
+          icon="issues"
+          :aria-label="$options.i18n.issuesButtonLabel"
+          :href="getIssuesPath(groupIssuesPath, data.value)"
+        />
+      </template>
+    </gl-table>
   </div>
 </template>
diff --git a/app/assets/javascripts/crm/organizations_bundle.js b/app/assets/javascripts/crm/organizations_bundle.js
index ac9990b9fb4..71b9d9698bf 100644
--- a/app/assets/javascripts/crm/organizations_bundle.js
+++ b/app/assets/javascripts/crm/organizations_bundle.js
@@ -16,10 +16,12 @@ export default () => {
     return false;
   }
 
+  const { groupFullPath, groupIssuesPath } = el.dataset;
+
   return new Vue({
     el,
     apolloProvider,
-    provide: { groupFullPath: el.dataset.groupFullPath },
+    provide: { groupFullPath, groupIssuesPath },
     render(createElement) {
       return createElement(CrmOrganizationsRoot);
     },