Add latest changes from gitlab-org/gitlab@master

12 files changed, 153 insertions, 33 deletions

diff --git a/app/assets/javascripts/organizations/groups_and_projects/components/groups_page.vue b/app/assets/javascripts/organizations/groups_and_projects/components/groups_page.vue
index b723cd98ce4..20db38403f7 100644
--- a/app/assets/javascripts/organizations/groups_and_projects/components/groups_page.vue
+++ b/app/assets/javascripts/organizations/groups_and_projects/components/groups_page.vue
@@ -1,9 +1,43 @@
 <script>
-export default {};
+import { GlLoadingIcon } from '@gitlab/ui';
+import { createAlert } from '~/alert';
+import { s__ } from '~/locale';
+import GroupsList from '~/vue_shared/components/groups_list/groups_list.vue';
+import groupsQuery from '../graphql/queries/groups.query.graphql';
+import { formatGroups } from '../utils';
+
+export default {
+  i18n: {
+    errorMessage: s__(
+      'Organization|An error occurred loading the groups. Please refresh the page to try again.',
+    ),
+  },
+  components: { GlLoadingIcon, GroupsList },
+  data() {
+    return {
+      groups: [],
+    };
+  },
+  apollo: {
+    groups: {
+      query: groupsQuery,
+      update(data) {
+        return formatGroups(data.organization.groups.nodes);
+      },
+      error(error) {
+        createAlert({ message: this.$options.i18n.errorMessage, error, captureError: true });
+      },
+    },
+  },
+  computed: {
+    isLoading() {
+      return this.$apollo.queries.groups.loading;
+    },
+  },
+};
 </script>
 
 <template>
-  <div>
-    <!-- Intentionally empty. Will be implemented in future commits. -->
-  </div>
+  <gl-loading-icon v-if="isLoading" class="gl-mt-5" size="md" />
+  <groups-list v-else :groups="groups" show-group-icon />
 </template>
diff --git a/app/assets/javascripts/organizations/groups_and_projects/graphql/queries/groups.query.graphql b/app/assets/javascripts/organizations/groups_and_projects/graphql/queries/groups.query.graphql
new file mode 100644
index 00000000000..842c601e326
--- /dev/null
+++ b/app/assets/javascripts/organizations/groups_and_projects/graphql/queries/groups.query.graphql
@@ -0,0 +1,22 @@
+query getOrganizationGroups {
+  organization @client {
+    id
+    groups {
+      nodes {
+        id
+        fullName
+        parent
+        webUrl
+        descriptionHtml
+        avatarUrl
+        descendantGroupsCount
+        projectsCount
+        groupMembersCount
+        visibility
+        accessLevel {
+          integerValue
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/organizations/groups_and_projects/graphql/resolvers.js b/app/assets/javascripts/organizations/groups_and_projects/graphql/resolvers.js
index e3e0529d6d9..8a375b28797 100644
--- a/app/assets/javascripts/organizations/groups_and_projects/graphql/resolvers.js
+++ b/app/assets/javascripts/organizations/groups_and_projects/graphql/resolvers.js
@@ -1,4 +1,8 @@
-import { organizationProjects } from 'jest/organizations/groups_and_projects/mock_data';
+import {
+  organization,
+  organizationProjects,
+  organizationGroups,
+} from 'jest/organizations/groups_and_projects/mock_data';
 
 export default {
   Query: {
@@ -8,7 +12,11 @@ export default {
         setTimeout(resolve, 1000);
       });
 
-      return organizationProjects;
+      return {
+        ...organization,
+        projects: organizationProjects,
+        groups: organizationGroups,
+      };
     },
   },
 };
diff --git a/app/assets/javascripts/organizations/groups_and_projects/utils.js b/app/assets/javascripts/organizations/groups_and_projects/utils.js
index 853a8543c1b..cbfa120503d 100644
--- a/app/assets/javascripts/organizations/groups_and_projects/utils.js
+++ b/app/assets/javascripts/organizations/groups_and_projects/utils.js
@@ -11,3 +11,9 @@ export const formatProjects = (projects) =>
       },
     },
   }));
+
+export const formatGroups = (groups) =>
+  groups.map(({ id, ...group }) => ({
+    ...group,
+    id: getIdFromGraphQLId(id),
+  }));
diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/create/index.js b/app/assets/javascripts/pages/projects/pipeline_schedules/create/index.js
deleted file mode 100644
index 6dd21380bec..00000000000
--- a/app/assets/javascripts/pages/projects/pipeline_schedules/create/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import initForm from '../shared/init_form';
-
-initForm();
diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/update/index.js b/app/assets/javascripts/pages/projects/pipeline_schedules/update/index.js
deleted file mode 100644
index 6dd21380bec..00000000000
--- a/app/assets/javascripts/pages/projects/pipeline_schedules/update/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import initForm from '../shared/init_form';
-
-initForm();
diff --git a/app/assets/javascripts/users/profile/actions/components/user_actions_app.vue b/app/assets/javascripts/users/profile/actions/components/user_actions_app.vue
index a8ecc014a95..5dfa9c67852 100644
--- a/app/assets/javascripts/users/profile/actions/components/user_actions_app.vue
+++ b/app/assets/javascripts/users/profile/actions/components/user_actions_app.vue
@@ -1,10 +1,12 @@
 <script>
 import { GlDisclosureDropdown } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
+import AbuseCategorySelector from '~/abuse_reports/components/abuse_category_selector.vue';
 
 export default {
   components: {
     GlDisclosureDropdown,
+    AbuseCategorySelector,
   },
   props: {
     userId: {
@@ -13,14 +15,22 @@ export default {
     },
     rssSubscriptionPath: {
       type: String,
-      required: true,
+      required: false,
+      default: '',
+    },
+    reportedUserId: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+    reportedFromUrl: {
+      type: String,
+      required: false,
+      default: '',
     },
   },
   data() {
     return {
-      // Only implement the copy function and RSS subscription in MR for now
-      // https://gitlab.com/gitlab-org/gitlab/-/merge_requests/122971
-      // The rest will be implemented in the upcoming MR.
       defaultDropdownItems: [
         {
           action: this.onUserIdCopy,
@@ -30,38 +40,56 @@ export default {
           },
         },
       ],
+      open: false,
     };
   },
   computed: {
     dropdownItems() {
+      const dropdownItems = this.defaultDropdownItems.slice();
       if (this.rssSubscriptionPath) {
-        return [
-          ...this.defaultDropdownItems,
-          {
-            href: this.rssSubscriptionPath,
-            text: this.$options.i18n.rssSubscribe,
-            extraAttrs: {
-              'data-testid': 'user-profile-rss-subscription-link',
-            },
+        dropdownItems.push({
+          href: this.rssSubscriptionPath,
+          text: this.$options.i18n.rssSubscribe,
+          extraAttrs: {
+            'data-testid': 'user-profile-rss-subscription-link',
           },
-        ];
+        });
+      }
+      if (this.reportedUserId) {
+        dropdownItems.push({
+          action: () => this.toggleDrawer(true),
+          text: this.$options.i18n.reportToAdmin,
+        });
       }
-      return this.defaultDropdownItems;
+      return dropdownItems;
     },
   },
   methods: {
     onUserIdCopy() {
       this.$toast.show(this.$options.i18n.userIdCopied);
     },
+    toggleDrawer(open) {
+      this.open = open;
+    },
   },
   i18n: {
     userId: s__('UserProfile|Copy user ID: %{id}'),
     userIdCopied: s__('UserProfile|User ID copied to clipboard'),
     rssSubscribe: s__('UserProfile|Subscribe'),
+    reportToAdmin: s__('ReportAbuse|Report abuse to administrator'),
   },
 };
 </script>
 
 <template>
-  <gl-disclosure-dropdown icon="ellipsis_v" category="tertiary" no-caret :items="dropdownItems" />
+  <span>
+    <gl-disclosure-dropdown icon="ellipsis_v" category="tertiary" no-caret :items="dropdownItems" />
+    <abuse-category-selector
+      v-if="reportedUserId"
+      :reported-user-id="reportedUserId"
+      :reported-from-url="reportedFromUrl"
+      :show-drawer="open"
+      @close-drawer="toggleDrawer(false)"
+    />
+  </span>
 </template>
diff --git a/app/assets/javascripts/users/profile/actions/index.js b/app/assets/javascripts/users/profile/actions/index.js
index 22507165ece..e1f9352966b 100644
--- a/app/assets/javascripts/users/profile/actions/index.js
+++ b/app/assets/javascripts/users/profile/actions/index.js
@@ -7,18 +7,29 @@ export const initUserActionsApp = () => {
 
   if (!mountingEl) return false;
 
-  const { userId, rssSubscriptionPath } = mountingEl.dataset;
+  const {
+    userId,
+    rssSubscriptionPath,
+    reportAbusePath,
+    reportedUserId,
+    reportedFromUrl,
+  } = mountingEl.dataset;
 
   Vue.use(GlToast);
 
   return new Vue({
     el: mountingEl,
     name: 'UserActionsRoot',
+    provide: {
+      reportAbusePath,
+    },
     render(createElement) {
       return createElement(UserActionsApp, {
         props: {
           userId,
           rssSubscriptionPath,
+          reportedUserId: reportedUserId ? parseInt(reportedUserId, 10) : null,
+          reportedFromUrl,
         },
       });
     },
diff --git a/app/assets/javascripts/users/profile/index.js b/app/assets/javascripts/users/profile/index.js
index c6b85489785..3ae3cc2de98 100644
--- a/app/assets/javascripts/users/profile/index.js
+++ b/app/assets/javascripts/users/profile/index.js
@@ -13,7 +13,7 @@ export const initReportAbuse = () => {
     name: 'ReportAbuseButtonRoot',
     provide: {
       reportAbusePath,
-      reportedUserId: parseInt(reportedUserId, 10),
+      reportedUserId: reportedUserId ? parseInt(reportedUserId, 10) : null,
       reportedFromUrl,
     },
     render(createElement) {
diff --git a/app/assets/javascripts/vue_shared/components/badges/beta_badge.stories.js b/app/assets/javascripts/vue_shared/components/badges/beta_badge.stories.js
index 3cef1bf4ba5..805a32273f4 100644
--- a/app/assets/javascripts/vue_shared/components/badges/beta_badge.stories.js
+++ b/app/assets/javascripts/vue_shared/components/badges/beta_badge.stories.js
@@ -7,13 +7,18 @@ export default {
 
 const template = `
     <div style="height:600px;" class="gl-display-flex gl-justify-content-center gl-align-items-center">
-      <beta-badge />
+      <beta-badge :size="size" />
     </div>
   `;
 
-const Template = () => ({
+const Template = (args, { argTypes }) => ({
   components: { BetaBadge },
+  data() {
+    return { value: args.value };
+  },
+  props: Object.keys(argTypes),
   template,
 });
 
 export const Default = Template.bind({});
+Default.args = {};
diff --git a/app/assets/javascripts/vue_shared/components/badges/beta_badge.vue b/app/assets/javascripts/vue_shared/components/badges/beta_badge.vue
index 198b6580277..e8d33b5538e 100644
--- a/app/assets/javascripts/vue_shared/components/badges/beta_badge.vue
+++ b/app/assets/javascripts/vue_shared/components/badges/beta_badge.vue
@@ -12,11 +12,18 @@ export default {
       "BetaBadge|A Beta feature is not production-ready, but is unlikely to change drastically before it's released. We encourage users to try Beta features and provide feedback.",
     ),
     listIntroduction: s__('BetaBadge|A Beta feature:'),
-    listItemStability: s__('BetaBadge|May have performance or stability issues.'),
+    listItemStability: s__('BetaBadge|May be unstable.'),
     listItemDataLoss: s__('BetaBadge|Should not cause data loss.'),
     listItemReasonableEffort: s__('BetaBadge|Is supported by a commercially reasonable effort.'),
     listItemNearCompletion: s__('BetaBadge|Is complete or near completion.'),
   },
+  props: {
+    size: {
+      type: String,
+      required: false,
+      default: 'md',
+    },
+  },
   methods: {
     target() {
       /**
@@ -35,7 +42,9 @@ export default {
 
 <template>
   <div>
-    <gl-badge ref="badge" class="gl-cursor-pointer">{{ $options.i18n.badgeLabel }}</gl-badge>
+    <gl-badge ref="badge" href="#" :size="size" variant="neutral" class="gl-cursor-pointer">{{
+      $options.i18n.badgeLabel
+    }}</gl-badge>
     <gl-popover
       triggers="hover focus click"
       :show-close-button="true"
diff --git a/app/assets/javascripts/vue_shared/components/markdown/comment_templates_dropdown.vue b/app/assets/javascripts/vue_shared/components/markdown/comment_templates_dropdown.vue
index 966a5556d24..abfb92f772d 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/comment_templates_dropdown.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/comment_templates_dropdown.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlCollapsibleListbox, GlTooltip, GlButton } from '@gitlab/ui';
 import fuzzaldrinPlus from 'fuzzaldrin-plus';
+import { InternalEvents } from '~/tracking';
 import savedRepliesQuery from './saved_replies.query.graphql';
 
 export default {
@@ -18,6 +19,7 @@ export default {
     GlButton,
     GlTooltip,
   },
+  mixins: [InternalEvents.mixin()],
   props: {
     newCommentTemplatePath: {
       type: String,
@@ -55,6 +57,7 @@ export default {
       const savedReply = this.savedReplies.find((r) => r.id === id);
       if (savedReply) {
         this.$emit('select', savedReply.content);
+        this.track_event('i_code_review_saved_replies_use');
       }
     },
   },