Add latest changes from gitlab-org/gitlab@master

7 files changed, 119 insertions, 20 deletions

diff --git a/app/assets/javascripts/invite_members/components/invite_members_trigger.vue b/app/assets/javascripts/invite_members/components/invite_members_trigger.vue
index f526a108b20..e297bb6c806 100644
--- a/app/assets/javascripts/invite_members/components/invite_members_trigger.vue
+++ b/app/assets/javascripts/invite_members/components/invite_members_trigger.vue
@@ -1,11 +1,11 @@
 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlLink } from '@gitlab/ui';
 import ExperimentTracking from '~/experimentation/experiment_tracking';
 import { s__ } from '~/locale';
 import eventHub from '../event_hub';
 
 export default {
-  components: { GlButton },
+  components: { GlButton, GlLink },
   props: {
     displayText: {
       type: String,
@@ -37,6 +37,42 @@ export default {
       required: false,
       default: undefined,
     },
+    triggerElement: {
+      type: String,
+      required: false,
+      default: 'button',
+    },
+    event: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    label: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    isButton() {
+      return this.triggerElement === 'button';
+    },
+    componentAttributes() {
+      const baseAttributes = {
+        class: this.classes,
+        'data-qa-selector': 'invite_members_button',
+      };
+
+      if (this.event && this.label) {
+        return {
+          ...baseAttributes,
+          'data-track-event': this.event,
+          'data-track-label': this.label,
+        };
+      }
+
+      return baseAttributes;
+    },
   },
   mounted() {
     this.trackExperimentOnShow();
@@ -57,12 +93,15 @@ export default {
 
 <template>
   <gl-button
-    :class="classes"
-    :icon="icon"
+    v-if="isButton"
+    v-bind="componentAttributes"
     :variant="variant"
-    data-qa-selector="invite_members_button"
+    :icon="icon"
     @click="openModal"
   >
     {{ displayText }}
   </gl-button>
+  <gl-link v-else v-bind="componentAttributes" data-is-link="true" @click="openModal">
+    {{ displayText }}
+  </gl-link>
 </template>
diff --git a/app/assets/javascripts/packages/list/components/package_search.vue b/app/assets/javascripts/packages/list/components/package_search.vue
index cd61d323d83..904cdf0dc46 100644
--- a/app/assets/javascripts/packages/list/components/package_search.vue
+++ b/app/assets/javascripts/packages/list/components/package_search.vue
@@ -2,6 +2,7 @@
 import { mapState, mapActions } from 'vuex';
 import { __, s__ } from '~/locale';
 import RegistrySearch from '~/vue_shared/components/registry/registry_search.vue';
+import UrlSync from '~/vue_shared/components/url_sync.vue';
 import getTableHeaders from '../utils';
 import PackageTypeToken from './tokens/package_type_token.vue';
 
@@ -16,7 +17,7 @@ export default {
       operators: [{ value: '=', description: __('is'), default: 'true' }],
     },
   ],
-  components: { RegistrySearch },
+  components: { RegistrySearch, UrlSync },
   computed: {
     ...mapState({
       isGroupPage: (state) => state.config.isGroupPage,
@@ -38,13 +39,18 @@ export default {
 </script>
 
 <template>
-  <registry-search
-    :filter="filter"
-    :sorting="sorting"
-    :tokens="$options.tokens"
-    :sortable-fields="sortableFields"
-    @sorting:changed="updateSorting"
-    @filter:changed="setFilter"
-    @filter:submit="$emit('update')"
-  />
+  <url-sync>
+    <template #default="{ updateQuery }">
+      <registry-search
+        :filter="filter"
+        :sorting="sorting"
+        :tokens="$options.tokens"
+        :sortable-fields="sortableFields"
+        @sorting:changed="updateSorting"
+        @filter:changed="setFilter"
+        @filter:submit="$emit('update')"
+        @query:changed="updateQuery"
+      />
+    </template>
+  </url-sync>
 </template>
diff --git a/app/assets/javascripts/packages/list/components/packages_list_app.vue b/app/assets/javascripts/packages/list/components/packages_list_app.vue
index 3b236764088..b9d922bf1cf 100644
--- a/app/assets/javascripts/packages/list/components/packages_list_app.vue
+++ b/app/assets/javascripts/packages/list/components/packages_list_app.vue
@@ -6,6 +6,7 @@ import { historyReplaceState } from '~/lib/utils/common_utils';
 import { s__ } from '~/locale';
 import { SHOW_DELETE_SUCCESS_ALERT } from '~/packages/shared/constants';
 import { FILTERED_SEARCH_TERM } from '~/packages_and_registries/shared/constants';
+import { getQueryParams, extractFilterAndSorting } from '~/packages_and_registries/shared/utils';
 import { DELETE_PACKAGE_SUCCESS_MESSAGE } from '../constants';
 import PackageSearch from './package_search.vue';
 import PackageTitle from './package_title.vue';
@@ -42,11 +43,21 @@ export default {
     },
   },
   mounted() {
+    const queryParams = getQueryParams(window.document.location.search);
+    const { sorting, filters } = extractFilterAndSorting(queryParams);
+    this.setSorting(sorting);
+    this.setFilter(filters);
     this.requestPackagesList();
     this.checkDeleteAlert();
   },
   methods: {
-    ...mapActions(['requestPackagesList', 'requestDeletePackage', 'setSelectedType']),
+    ...mapActions([
+      'requestPackagesList',
+      'requestDeletePackage',
+      'setSelectedType',
+      'setSorting',
+      'setFilter',
+    ]),
     onPageChanged(page) {
       return this.requestPackagesList({ page });
     },
diff --git a/app/assets/javascripts/packages_and_registries/shared/utils.js b/app/assets/javascripts/packages_and_registries/shared/utils.js
index 663c0b2762a..cc5c7ce82bf 100644
--- a/app/assets/javascripts/packages_and_registries/shared/utils.js
+++ b/app/assets/javascripts/packages_and_registries/shared/utils.js
@@ -7,3 +7,23 @@ export const keyValueToFilterToken = (type, data) => ({ type, value: { data } })
 
 export const searchArrayToFilterTokens = (search) =>
   search.map((s) => keyValueToFilterToken(FILTERED_SEARCH_TERM, s));
+
+export const extractFilterAndSorting = (queryObject) => {
+  const { type, search, sort, orderBy } = queryObject;
+  const filters = [];
+  const sorting = {};
+
+  if (type) {
+    filters.push(keyValueToFilterToken('type', type));
+  }
+  if (search) {
+    filters.push(...searchArrayToFilterTokens(search));
+  }
+  if (sort) {
+    sorting.sort = sort;
+  }
+  if (orderBy) {
+    sorting.orderBy = orderBy;
+  }
+  return { filters, sorting };
+};
diff --git a/app/assets/javascripts/pages/projects/issues/show.js b/app/assets/javascripts/pages/projects/issues/show.js
index a29082245d3..26fecdf7518 100644
--- a/app/assets/javascripts/pages/projects/issues/show.js
+++ b/app/assets/javascripts/pages/projects/issues/show.js
@@ -4,6 +4,7 @@ import initIssuableSidebar from '~/init_issuable_sidebar';
 import initInviteMemberModal from '~/invite_member/init_invite_member_modal';
 import initInviteMemberTrigger from '~/invite_member/init_invite_member_trigger';
 import initInviteMembersModal from '~/invite_members/init_invite_members_modal';
+import initInviteMembersTrigger from '~/invite_members/init_invite_members_trigger';
 import { IssuableType } from '~/issuable_show/constants';
 import Issue from '~/issue';
 import '~/notes/index';
@@ -36,6 +37,7 @@ export default function initShowIssue() {
   initSentryErrorStackTraceApp();
   initRelatedMergeRequestsApp();
   initInviteMembersModal();
+  initInviteMembersTrigger();
 
   import(/* webpackChunkName: 'design_management' */ '~/design_management')
     .then((module) => module.default())
diff --git a/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js b/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js
index c132394412f..82b0ef154f2 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js
@@ -6,6 +6,7 @@ import initIssuableSidebar from '~/init_issuable_sidebar';
 import initInviteMemberModal from '~/invite_member/init_invite_member_modal';
 import initInviteMemberTrigger from '~/invite_member/init_invite_member_trigger';
 import initInviteMembersModal from '~/invite_members/init_invite_members_modal';
+import initInviteMembersTrigger from '~/invite_members/init_invite_members_trigger';
 import { handleLocationHash } from '~/lib/utils/common_utils';
 import StatusBox from '~/merge_request/components/status_box.vue';
 import initSourcegraph from '~/sourcegraph';
@@ -22,6 +23,7 @@ export default function initMergeRequestShow() {
   initInviteMemberModal();
   initInviteMemberTrigger();
   initInviteMembersModal();
+  initInviteMembersTrigger();
 
   const el = document.querySelector('.js-mr-status-box');
   // eslint-disable-next-line no-new
diff --git a/app/assets/javascripts/registry/explorer/pages/list.vue b/app/assets/javascripts/registry/explorer/pages/list.vue
index 46b3ebbc633..589b88d7bbe 100644
--- a/app/assets/javascripts/registry/explorer/pages/list.vue
+++ b/app/assets/javascripts/registry/explorer/pages/list.vue
@@ -12,6 +12,7 @@ import { get } from 'lodash';
 import getContainerRepositoriesQuery from 'shared_queries/container_registry/get_container_repositories.query.graphql';
 import createFlash from '~/flash';
 import { FILTERED_SEARCH_TERM } from '~/packages_and_registries/shared/constants';
+import { extractFilterAndSorting } from '~/packages_and_registries/shared/utils';
 import Tracking from '~/tracking';
 import RegistrySearch from '~/vue_shared/components/registry/registry_search.vue';
 import DeleteImage from '../components/delete_image.vue';
@@ -82,6 +83,9 @@ export default {
   searchConfig: SORT_FIELDS,
   apollo: {
     baseImages: {
+      skip() {
+        return !this.fetchBaseQuery;
+      },
       query: getContainerRepositoriesQuery,
       variables() {
         return this.queryVariables;
@@ -125,15 +129,19 @@ export default {
       sorting: { orderBy: 'UPDATED', sort: 'desc' },
       name: null,
       mutationLoading: false,
+      fetchBaseQuery: false,
       fetchAdditionalDetails: false,
     };
   },
   computed: {
     images() {
-      return this.baseImages.map((image, index) => ({
-        ...image,
-        ...get(this.additionalDetails, index, {}),
-      }));
+      if (this.baseImages) {
+        return this.baseImages.map((image, index) => ({
+          ...image,
+          ...get(this.additionalDetails, index, {}),
+        }));
+      }
+      return [];
     },
     graphqlResource() {
       return this.config.isGroupPage ? 'group' : 'project';
@@ -172,8 +180,15 @@ export default {
     },
   },
   mounted() {
+    const { sorting, filters } = extractFilterAndSorting(this.$route.query);
+
+    this.filter = [...filters];
+    this.name = filters[0]?.value.data;
+    this.sorting = { ...this.sorting, ...sorting };
+
     // If the two graphql calls - which are not batched - resolve togheter we will have a race
     //  condition when apollo sets the cache, with this we give the 'base' call an headstart
+    this.fetchBaseQuery = true;
     setTimeout(() => {
       this.fetchAdditionalDetails = true;
     }, 200);
@@ -245,6 +260,9 @@ export default {
       const search = this.filter.find((i) => i.type === FILTERED_SEARCH_TERM);
       this.name = search?.value?.data;
     },
+    updateUrlQueryString(query) {
+      this.$router.push({ query });
+    },
   },
 };
 </script>
@@ -304,6 +322,7 @@ export default {
         @sorting:changed="updateSorting"
         @filter:changed="filter = $event"
         @filter:submit="doFilter"
+        @query:changed="updateUrlQueryString"
       />
 
       <div v-if="isLoading" class="gl-mt-5">