Add latest changes from gitlab-org/gitlab@master

23 files changed, 72 insertions, 63 deletions

diff --git a/app/assets/javascripts/admin/application_settings/inactive_project_deletion/components/form.vue b/app/assets/javascripts/admin/application_settings/inactive_project_deletion/components/form.vue
index ef4a5319eec..0b640a34864 100644
--- a/app/assets/javascripts/admin/application_settings/inactive_project_deletion/components/form.vue
+++ b/app/assets/javascripts/admin/application_settings/inactive_project_deletion/components/form.vue
@@ -143,7 +143,7 @@ export default {
             v-model="minSizeMb"
             :state="isMinSizeMbValid"
             name="application_setting[inactive_projects_min_size_mb]"
-            size="md"
+            width="md"
             type="number"
             :min="0"
             data-testid="min-size-input"
@@ -177,7 +177,7 @@ export default {
               v-model="deleteAfterMonths"
               :state="isDeleteAfterMonthsValid"
               name="application_setting[inactive_projects_delete_after_months]"
-              size="sm"
+              width="sm"
               type="number"
               :min="0"
               data-testid="delete-after-months-input"
@@ -215,7 +215,7 @@ export default {
               v-model="sendWarningEmailAfterMonths"
               :state="isSendWarningEmailAfterMonthsValid"
               name="application_setting[inactive_projects_send_warning_email_after_months]"
-              size="sm"
+              width="sm"
               type="number"
               :min="0"
               data-testid="send-warning-email-after-months-input"
diff --git a/app/assets/javascripts/admin/broadcast_messages/components/datetime_picker.vue b/app/assets/javascripts/admin/broadcast_messages/components/datetime_picker.vue
index 07814ef2511..253eefc323c 100644
--- a/app/assets/javascripts/admin/broadcast_messages/components/datetime_picker.vue
+++ b/app/assets/javascripts/admin/broadcast_messages/components/datetime_picker.vue
@@ -42,6 +42,6 @@ export default {
 <template>
   <div class="gl-display-flex gl-gap-3 gl-align-items-center">
     <gl-datepicker v-model="date" />
-    <gl-form-input v-model="time" size="sm" type="time" data-testid="time-picker" />
+    <gl-form-input v-model="time" width="sm" type="time" data-testid="time-picker" />
   </div>
 </template>
diff --git a/app/assets/javascripts/boards/components/issue_board_filtered_search.vue b/app/assets/javascripts/boards/components/issue_board_filtered_search.vue
index a7b3f5536a4..c28415de620 100644
--- a/app/assets/javascripts/boards/components/issue_board_filtered_search.vue
+++ b/app/assets/javascripts/boards/components/issue_board_filtered_search.vue
@@ -62,11 +62,7 @@ export default {
     tokensCE() {
       const { issue, incident } = this.$options.i18n;
       const { types } = this.$options;
-      const { fetchUsers, fetchLabels } = issueBoardFilters(
-        this.$apollo,
-        this.fullPath,
-        this.isGroupBoard,
-      );
+      const { fetchLabels } = issueBoardFilters(this.$apollo, this.fullPath, this.isGroupBoard);
 
       const tokens = [
         {
@@ -77,7 +73,8 @@ export default {
           token: UserToken,
           dataType: 'user',
           unique: true,
-          fetchUsers,
+          isProject: !this.isGroupBoard,
+          fullPath: this.fullPath,
           preloadedUsers: this.preloadedUsers(),
         },
         {
@@ -89,7 +86,8 @@ export default {
           token: UserToken,
           dataType: 'user',
           unique: true,
-          fetchUsers,
+          isProject: !this.isGroupBoard,
+          fullPath: this.fullPath,
           preloadedUsers: this.preloadedUsers(),
         },
         {
diff --git a/app/assets/javascripts/boards/issue_board_filters.js b/app/assets/javascripts/boards/issue_board_filters.js
index ba5da70c6ec..0a6580dd49b 100644
--- a/app/assets/javascripts/boards/issue_board_filters.js
+++ b/app/assets/javascripts/boards/issue_board_filters.js
@@ -1,5 +1,3 @@
-import { BoardType } from 'ee_else_ce/boards/constants';
-import usersAutocompleteQuery from '~/graphql_shared/queries/users_autocomplete.query.graphql';
 import boardLabels from './graphql/board_labels.query.graphql';
 
 export default function issueBoardFilters(apollo, fullPath, isGroupBoard) {
@@ -7,17 +5,6 @@ export default function issueBoardFilters(apollo, fullPath, isGroupBoard) {
     return isGroupBoard ? data.group?.labels.nodes || [] : data.project?.labels.nodes || [];
   };
 
-  const fetchUsers = (usersSearchTerm) => {
-    const namespace = isGroupBoard ? BoardType.group : BoardType.project;
-
-    return apollo
-      .query({
-        query: usersAutocompleteQuery,
-        variables: { fullPath, search: usersSearchTerm, isProject: !isGroupBoard },
-      })
-      .then(({ data }) => data[namespace]?.autocompleteUsers);
-  };
-
   const fetchLabels = (labelSearchTerm) => {
     return apollo
       .query({
@@ -34,6 +21,5 @@ export default function issueBoardFilters(apollo, fullPath, isGroupBoard) {
 
   return {
     fetchLabels,
-    fetchUsers,
   };
 }
diff --git a/app/assets/javascripts/branches/components/delete_merged_branches.vue b/app/assets/javascripts/branches/components/delete_merged_branches.vue
index 17dc084e560..24ae9b83b9c 100644
--- a/app/assets/javascripts/branches/components/delete_merged_branches.vue
+++ b/app/assets/javascripts/branches/components/delete_merged_branches.vue
@@ -168,7 +168,7 @@ export default {
           <gl-form-input
             v-model="enteredText"
             type="text"
-            size="sm"
+            width="sm"
             class="gl-mt-2"
             aria-labelledby="input-label"
             autocomplete="off"
diff --git a/app/assets/javascripts/ci/job_details/components/stuck_block.vue b/app/assets/javascripts/ci/job_details/components/stuck_block.vue
index 8c73f09daea..b8ff0b032cc 100644
--- a/app/assets/javascripts/ci/job_details/components/stuck_block.vue
+++ b/app/assets/javascripts/ci/job_details/components/stuck_block.vue
@@ -78,7 +78,7 @@ export default {
         </template>
       </gl-sprintf>
       <template v-if="stuckData.showTags">
-        <gl-badge v-for="tag in tags" :key="tag" variant="info">
+        <gl-badge v-for="tag in tags" :key="tag" size="sm" variant="info">
           {{ tag }}
         </gl-badge>
       </template>
diff --git a/app/assets/javascripts/deploy_tokens/components/new_deploy_token.vue b/app/assets/javascripts/deploy_tokens/components/new_deploy_token.vue
index ccf4b064fa4..f21086185fb 100644
--- a/app/assets/javascripts/deploy_tokens/components/new_deploy_token.vue
+++ b/app/assets/javascripts/deploy_tokens/components/new_deploy_token.vue
@@ -283,7 +283,7 @@ export default {
           </template>
         </gl-sprintf>
       </template>
-      <gl-form-input id="deploy_token_username" v-model="username" class="gl-form-input-xl" />
+      <gl-form-input id="deploy_token_username" v-model="username" width="xl" />
     </gl-form-group>
     <gl-form-group
       :label="$options.translations.addTokenScopesLabel"
diff --git a/app/assets/javascripts/environments/components/kubernetes_tabs.vue b/app/assets/javascripts/environments/components/kubernetes_tabs.vue
index 4492d209e3b..b6fee171d34 100644
--- a/app/assets/javascripts/environments/components/kubernetes_tabs.vue
+++ b/app/assets/javascripts/environments/components/kubernetes_tabs.vue
@@ -24,6 +24,7 @@ export default {
       variables() {
         return {
           configuration: this.configuration,
+          namespace: this.namespace,
         };
       },
       update(data) {
diff --git a/app/assets/javascripts/environments/graphql/queries/k8s_services.query.graphql b/app/assets/javascripts/environments/graphql/queries/k8s_services.query.graphql
index d97849eecc1..8fc4a54b08b 100644
--- a/app/assets/javascripts/environments/graphql/queries/k8s_services.query.graphql
+++ b/app/assets/javascripts/environments/graphql/queries/k8s_services.query.graphql
@@ -1,5 +1,5 @@
-query getK8sServices($configuration: LocalConfiguration) {
-  k8sServices(configuration: $configuration) @client {
+query getK8sServices($configuration: LocalConfiguration, $namespace: String) {
+  k8sServices(configuration: $configuration, namespace: $namespace) @client {
     metadata {
       name
       namespace
diff --git a/app/assets/javascripts/environments/graphql/resolvers/kubernetes.js b/app/assets/javascripts/environments/graphql/resolvers/kubernetes.js
index 9ab65d0bb7f..c1660b6e55f 100644
--- a/app/assets/javascripts/environments/graphql/resolvers/kubernetes.js
+++ b/app/assets/javascripts/environments/graphql/resolvers/kubernetes.js
@@ -62,10 +62,13 @@ export default {
         handleClusterError(err);
       });
   },
-  k8sServices(_, { configuration }) {
+  k8sServices(_, { configuration, namespace }) {
     const coreV1Api = new CoreV1Api(new Configuration(configuration));
-    return coreV1Api
-      .listCoreV1ServiceForAllNamespaces()
+    const servicesApi = namespace
+      ? coreV1Api.listCoreV1NamespacedService(namespace)
+      : coreV1Api.listCoreV1ServiceForAllNamespaces();
+
+    return servicesApi
       .then((res) => {
         const items = res?.data?.items || [];
         return items.map((item) => {
diff --git a/app/assets/javascripts/feature_flags/components/strategies/flexible_rollout.vue b/app/assets/javascripts/feature_flags/components/strategies/flexible_rollout.vue
index 0fde87dd0ba..7cc87544be9 100644
--- a/app/assets/javascripts/feature_flags/components/strategies/flexible_rollout.vue
+++ b/app/assets/javascripts/feature_flags/components/strategies/flexible_rollout.vue
@@ -93,7 +93,7 @@ export default {
               type="number"
               min="0"
               max="100"
-              size="xs"
+              width="xs"
               @input="onPercentageChange"
             />
             <span class="ml-1">%</span>
diff --git a/app/assets/javascripts/feature_flags/components/strategies/percent_rollout.vue b/app/assets/javascripts/feature_flags/components/strategies/percent_rollout.vue
index 0acb0d4366c..a46eee7b130 100644
--- a/app/assets/javascripts/feature_flags/components/strategies/percent_rollout.vue
+++ b/app/assets/javascripts/feature_flags/components/strategies/percent_rollout.vue
@@ -59,7 +59,7 @@ export default {
           type="number"
           min="0"
           max="100"
-          size="xs"
+          width="xs"
           @input="onPercentageChange"
         />
         <span class="gl-ml-2">%</span>
diff --git a/app/assets/javascripts/groups/components/group_name_and_path.vue b/app/assets/javascripts/groups/components/group_name_and_path.vue
index fd633df3022..853fdd7c55e 100644
--- a/app/assets/javascripts/groups/components/group_name_and_path.vue
+++ b/app/assets/javascripts/groups/components/group_name_and_path.vue
@@ -294,7 +294,7 @@ export default {
         :name="fields.name.name"
         :placeholder="$options.i18n.inputs.name.placeholder"
         data-testid="group-name-field"
-        :size="$options.inputSize"
+        :width="$options.inputSize"
         :state="nameFeedbackState"
         @invalid="handleInvalidName"
       />
@@ -374,7 +374,7 @@ export default {
             :maxlength="fields.path.maxLength"
             :pattern="fields.path.pattern"
             :state="pathFeedbackState"
-            :size="pathInputSize"
+            :width="pathInputSize"
             required
             data-testid="group-path-field"
             :data-bind-in="mattermostEnabled ? $options.mattermostDataBindName : null"
@@ -397,7 +397,7 @@ export default {
           :id="fields.groupId.id"
           :value="fields.groupId.value"
           :name="fields.groupId.name"
-          size="sm"
+          width="sm"
           readonly
         />
       </gl-form-group>
diff --git a/app/assets/javascripts/ide/lib/gitlab_web_ide/handle_tracking_event.js b/app/assets/javascripts/ide/lib/gitlab_web_ide/handle_tracking_event.js
index 615dad02386..5e3e5bfe4c1 100644
--- a/app/assets/javascripts/ide/lib/gitlab_web_ide/handle_tracking_event.js
+++ b/app/assets/javascripts/ide/lib/gitlab_web_ide/handle_tracking_event.js
@@ -8,7 +8,7 @@ export const handleTracking = ({ name, data }) => {
   if (data && Object.keys(data).length) {
     Tracking.event(undefined, snakeCaseEventName, {
       /* See GitLab snowplow schema for a definition of the extra field
-       * https://docs.gitlab.com/ee/development/snowplow/schemas.html#gitlab_standard.
+       * https://gitlab.com/gitlab-org/iglu/-/blob/master/public/schemas/com.gitlab/gitlab_standard/jsonschema/1-0-9.
        */
       extra: convertObjectPropsToSnakeCase(data, {
         deep: true,
diff --git a/app/assets/javascripts/issues/list/components/issues_list_app.vue b/app/assets/javascripts/issues/list/components/issues_list_app.vue
index 3d8ed3af816..16e687cff10 100644
--- a/app/assets/javascripts/issues/list/components/issues_list_app.vue
+++ b/app/assets/javascripts/issues/list/components/issues_list_app.vue
@@ -21,7 +21,6 @@ import getIssuesCountsQuery from 'ee_else_ce/issues/list/queries/get_issues_coun
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import { createAlert, VARIANT_INFO } from '~/alert';
 import { TYPENAME_USER } from '~/graphql_shared/constants';
-import usersAutocompleteQuery from '~/graphql_shared/queries/users_autocomplete.query.graphql';
 import CsvImportExportButtons from '~/issuable/components/csv_import_export_buttons.vue';
 import { convertToGraphQLId, getIdFromGraphQLId } from '~/graphql_shared/utils';
 import IssuableByEmail from '~/issuable/components/issuable_by_email.vue';
@@ -384,7 +383,8 @@ export default {
           dataType: 'user',
           defaultUsers: [],
           operators: this.hasOrFeature ? OPERATORS_IS_NOT_OR : OPERATORS_IS_NOT,
-          fetchUsers: this.fetchUsers,
+          fullPath: this.fullPath,
+          isProject: this.isProject,
           recentSuggestionsStorageKey: `${this.fullPath}-issues-recent-tokens-author`,
           preloadedUsers,
         },
@@ -395,7 +395,8 @@ export default {
           token: UserToken,
           dataType: 'user',
           operators: this.hasOrFeature ? OPERATORS_IS_NOT_OR : OPERATORS_IS_NOT,
-          fetchUsers: this.fetchUsers,
+          fullPath: this.fullPath,
+          isProject: this.isProject,
           recentSuggestionsStorageKey: `${this.fullPath}-issues-recent-tokens-assignee`,
           preloadedUsers,
         },
@@ -634,14 +635,6 @@ export default {
     fetchLatestLabels(search) {
       return this.fetchLabelsWithFetchPolicy(search, fetchPolicies.NETWORK_ONLY);
     },
-    fetchUsers(search) {
-      return this.$apollo
-        .query({
-          query: usersAutocompleteQuery,
-          variables: { fullPath: this.fullPath, search, isProject: this.isProject },
-        })
-        .then(({ data }) => data[this.namespace]?.autocompleteUsers);
-    },
     getExportCsvPathWithQuery() {
       return `${this.exportCsvPath}${window.location.search}`;
     },
diff --git a/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue b/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue
index 1905678209f..7d2b371801b 100644
--- a/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue
+++ b/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue
@@ -178,7 +178,7 @@ export default {
               id="timeline-input-hours"
               v-model="hourPickerInput"
               data-testid="input-hours"
-              size="xs"
+              width="xs"
               type="number"
               min="00"
               max="23"
@@ -189,7 +189,7 @@ export default {
               v-model="minutePickerInput"
               class="gl-ml-3"
               data-testid="input-minutes"
-              size="xs"
+              width="xs"
               type="number"
               min="00"
               max="59"
diff --git a/app/assets/javascripts/notes/components/multiline_comment_form.vue b/app/assets/javascripts/notes/components/multiline_comment_form.vue
index 2c2264c36f3..78097ff1033 100644
--- a/app/assets/javascripts/notes/components/multiline_comment_form.vue
+++ b/app/assets/javascripts/notes/components/multiline_comment_form.vue
@@ -88,7 +88,7 @@ export default {
           id="comment-line-start"
           :value="commentLineStart"
           :options="commentLineOptions"
-          size="sm"
+          width="sm"
           class="gl-w-auto gl-vertical-align-baseline"
           @change="updateCommentLineStart"
         />
diff --git a/app/assets/javascripts/packages_and_registries/settings/group/components/exceptions_input.vue b/app/assets/javascripts/packages_and_registries/settings/group/components/exceptions_input.vue
index 9ac1673dbf3..5a7feba35a4 100644
--- a/app/assets/javascripts/packages_and_registries/settings/group/components/exceptions_input.vue
+++ b/app/assets/javascripts/packages_and_registries/settings/group/components/exceptions_input.vue
@@ -70,7 +70,7 @@ export default {
     <gl-form-input
       :id="id"
       :disabled="duplicatesAllowed || loading"
-      size="lg"
+      width="lg"
       :value="duplicateExceptionRegex"
       :state="isExceptionRegexValid"
       @change="update(name, $event)"
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/create_timelog_form.vue b/app/assets/javascripts/sidebar/components/time_tracking/create_timelog_form.vue
index 9b582ba41ed..f11c7e6ac4d 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/create_timelog_form.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/create_timelog_form.vue
@@ -206,7 +206,7 @@ export default {
             :value="spentAt"
             show-clear-button
             autocomplete="off"
-            size="small"
+            width="small"
             @input="updateSpentAtDate"
             @clear="updateSpentAtDate(null)"
           />
diff --git a/app/assets/javascripts/super_sidebar/components/nav_item.vue b/app/assets/javascripts/super_sidebar/components/nav_item.vue
index 305e2f94c20..5416f86abeb 100644
--- a/app/assets/javascripts/super_sidebar/components/nav_item.vue
+++ b/app/assets/javascripts/super_sidebar/components/nav_item.vue
@@ -7,6 +7,7 @@ import {
   TRACKING_UNKNOWN_ID,
   TRACKING_UNKNOWN_PANEL,
 } from '~/super_sidebar/constants';
+import eventHub from '../event_hub';
 import NavItemLink from './nav_item_link.vue';
 import NavItemRouterLink from './nav_item_router_link.vue';
 
@@ -69,16 +70,14 @@ export default {
     return {
       isMouseIn: false,
       canClickPinButton: false,
+      pillCount: this.item.pill_count,
     };
   },
   computed: {
-    pillData() {
-      return this.item.pill_count;
-    },
     hasPill() {
       return (
-        Number.isFinite(this.pillData) ||
-        (typeof this.pillData === 'string' && this.pillData !== '')
+        Number.isFinite(this.pillCount) ||
+        (typeof this.pillCount === 'string' && this.pillCount !== '')
       );
     },
     isPinnable() {
@@ -182,11 +181,21 @@ export default {
     if (this.item.is_active) {
       this.$el.scrollIntoView(false);
     }
+
+    eventHub.$on('updatePillValue', this.updatePillValue);
+  },
+  destroyed() {
+    eventHub.$off('updatePillValue', this.updatePillValue);
   },
   methods: {
     togglePointerEvents() {
       this.canClickPinButton = this.isMouseIn;
     },
+    updatePillValue({ value, itemId }) {
+      if (this.item.id === itemId) {
+        this.pillCount = value;
+      }
+    },
   },
 };
 </script>
@@ -249,7 +258,7 @@ export default {
             'hide-on-focus-or-hover--target transition-opacity-on-hover--target': isPinnable,
           }"
         >
-          {{ pillData }}
+          {{ pillCount }}
         </gl-badge>
       </span>
     </component>
diff --git a/app/assets/javascripts/super_sidebar/event_hub.js b/app/assets/javascripts/super_sidebar/event_hub.js
new file mode 100644
index 00000000000..e31806ad199
--- /dev/null
+++ b/app/assets/javascripts/super_sidebar/event_hub.js
@@ -0,0 +1,3 @@
+import createEventHub from '~/helpers/event_hub_factory';
+
+export default createEventHub();
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/user_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/user_token.vue
index c294c23abfc..4601287b417 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/user_token.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/user_token.vue
@@ -4,6 +4,8 @@ import { compact } from 'lodash';
 import { createAlert } from '~/alert';
 import { __ } from '~/locale';
 
+import { WORKSPACE_GROUP, WORKSPACE_PROJECT } from '~/issues/constants';
+import usersAutocompleteQuery from '~/graphql_shared/queries/users_autocomplete.query.graphql';
 import { OPTIONS_NONE_ANY } from '../constants';
 
 import BaseToken from './base_token.vue';
@@ -41,6 +43,12 @@ export default {
     preloadedUsers() {
       return this.config.preloadedUsers || [];
     },
+    namespace() {
+      return this.config.isProject ? WORKSPACE_PROJECT : WORKSPACE_GROUP;
+    },
+    fetchUsersQuery() {
+      return this.config.fetchUsers ? this.config.fetchUsers : this.fetchUsersBySearchTerm;
+    },
   },
   methods: {
     getActiveUser(users, data) {
@@ -49,11 +57,19 @@ export default {
     getAvatarUrl(user) {
       return user.avatarUrl || user.avatar_url;
     },
+    fetchUsersBySearchTerm(search) {
+      return this.$apollo
+        .query({
+          query: usersAutocompleteQuery,
+          variables: { fullPath: this.config.fullPath, search, isProject: this.config.isProject },
+        })
+        .then(({ data }) => data[this.namespace]?.autocompleteUsers);
+    },
     fetchUsers(searchTerm) {
       this.loading = true;
       const fetchPromise = this.config.fetchPath
         ? this.config.fetchUsers(this.config.fetchPath, searchTerm)
-        : this.config.fetchUsers(searchTerm);
+        : this.fetchUsersQuery(searchTerm);
 
       fetchPromise
         .then((res) => {
diff --git a/app/assets/javascripts/vue_shared/components/form/input_copy_toggle_visibility.vue b/app/assets/javascripts/vue_shared/components/form/input_copy_toggle_visibility.vue
index ebc6b2cd740..fb618a37cbc 100644
--- a/app/assets/javascripts/vue_shared/components/form/input_copy_toggle_visibility.vue
+++ b/app/assets/javascripts/vue_shared/components/form/input_copy_toggle_visibility.vue
@@ -156,7 +156,7 @@ export default {
       <gl-form-input
         ref="input"
         :readonly="readonly"
-        :size="size"
+        :width="size"
         class="gl-font-monospace! gl-cursor-default!"
         v-bind="formInputGroupProps"
         :value="value"