Add latest changes from gitlab-org/gitlab@master

11 files changed, 87 insertions, 170 deletions

diff --git a/app/assets/javascripts/batch_comments/stores/modules/batch_comments/actions.js b/app/assets/javascripts/batch_comments/stores/modules/batch_comments/actions.js
index 4888cbe3dfe..45e7256a734 100644
--- a/app/assets/javascripts/batch_comments/stores/modules/batch_comments/actions.js
+++ b/app/assets/javascripts/batch_comments/stores/modules/batch_comments/actions.js
@@ -24,12 +24,17 @@ export const addDraftToDiscussion = ({ commit }, { endpoint, data }) =>
       });
     });
 
-export const createNewDraft = ({ commit }, { endpoint, data }) =>
+export const createNewDraft = ({ commit, dispatch }, { endpoint, data }) =>
   service
     .createNewDraft(endpoint, data)
     .then((res) => res.data)
     .then((res) => {
       commit(types.ADD_NEW_DRAFT, res);
+
+      if (res.position?.position_type === FILE_DIFF_POSITION_TYPE) {
+        dispatch('diffs/addDraftToFile', { filePath: res.file_path, draft: res }, { root: true });
+      }
+
       return res;
     })
     .catch(() => {
diff --git a/app/assets/javascripts/feature_flags/components/strategies/gitlab_user_list.vue b/app/assets/javascripts/feature_flags/components/strategies/gitlab_user_list.vue
index 9dbffe75f6b..53745d3b021 100644
--- a/app/assets/javascripts/feature_flags/components/strategies/gitlab_user_list.vue
+++ b/app/assets/javascripts/feature_flags/components/strategies/gitlab_user_list.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlDropdown, GlDropdownItem, GlLoadingIcon, GlSearchBoxByType } from '@gitlab/ui';
+import { GlCollapsibleListbox } from '@gitlab/ui';
 import { debounce } from 'lodash';
 import { createNamespacedHelpers } from 'vuex';
 import { s__ } from '~/locale';
@@ -11,10 +11,7 @@ const { fetchUserLists, setFilter } = mapActions(['fetchUserLists', 'setFilter']
 
 export default {
   components: {
-    GlDropdown,
-    GlDropdownItem,
-    GlLoadingIcon,
-    GlSearchBoxByType,
+    GlCollapsibleListbox,
     ParameterFormGroup,
   },
   props: {
@@ -38,24 +35,25 @@ export default {
     dropdownText() {
       return this.strategy?.userList?.name ?? this.$options.translations.defaultDropdownText;
     },
+    listboxItems() {
+      return this.userLists.map((list) => ({
+        value: list.id,
+        text: list.name,
+      }));
+    },
   },
   mounted() {
     fetchUserLists.apply(this);
   },
+
   methods: {
     setFilter: debounce(setFilter, 250),
-    fetchUserLists: debounce(fetchUserLists, 250),
-    onUserListChange(list) {
+    onUserListChange(listId) {
+      const list = this.userLists.find((userList) => userList.id === listId);
       this.$emit('change', {
         userList: list,
       });
     },
-    isSelectedUserList({ id }) {
-      return id === this.userListId;
-    },
-    setFocus() {
-      this.$refs.searchBox.focusInput();
-    },
   },
 };
 </script>
@@ -67,26 +65,16 @@ export default {
     :description="hasUserLists ? $options.translations.rolloutUserListDescription : ''"
   >
     <template #default="{ inputId }">
-      <gl-dropdown :id="inputId" :text="dropdownText" @shown="setFocus">
-        <gl-search-box-by-type
-          ref="searchBox"
-          class="gl-m-3"
-          :value="filter"
-          @input="setFilter"
-          @focus="fetchUserLists"
-          @keyup="fetchUserLists"
-        />
-        <gl-loading-icon v-if="isLoading" size="sm" />
-        <gl-dropdown-item
-          v-for="list in userLists"
-          :key="list.id"
-          :is-checked="isSelectedUserList(list)"
-          is-check-item
-          @click="onUserListChange(list)"
-        >
-          {{ list.name }}
-        </gl-dropdown-item>
-      </gl-dropdown>
+      <gl-collapsible-listbox
+        :id="inputId"
+        :toggle-text="dropdownText"
+        :loading="isLoading"
+        :items="listboxItems"
+        searchable
+        :selected="userListId"
+        @select="onUserListChange"
+        @search="setFilter"
+      />
     </template>
   </parameter-form-group>
 </template>
diff --git a/app/assets/javascripts/super_sidebar/components/brand_logo.vue b/app/assets/javascripts/super_sidebar/components/brand_logo.vue
index 4a2443e6b44..c017fa8afa2 100644
--- a/app/assets/javascripts/super_sidebar/components/brand_logo.vue
+++ b/app/assets/javascripts/super_sidebar/components/brand_logo.vue
@@ -34,7 +34,12 @@ export default {
     data-track-label="gitlab_logo_link"
     data-track-property="nav_core_menu"
   >
-    <img v-if="logoUrl" data-testid="brand-header-custom-logo" :src="logoUrl" class="gl-h-6" />
+    <img
+      v-if="logoUrl"
+      data-testid="brand-header-custom-logo"
+      :src="logoUrl"
+      class="gl-h-6 gl-max-w-full"
+    />
     <span v-else v-safe-html="$options.logo" data-testid="brand-header-default-logo"></span>
   </a>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/actions_button.vue b/app/assets/javascripts/vue_shared/components/actions_button.vue
index 175aef59ae5..c3f3226c46e 100644
--- a/app/assets/javascripts/vue_shared/components/actions_button.vue
+++ b/app/assets/javascripts/vue_shared/components/actions_button.vue
@@ -1,29 +1,25 @@
 <script>
-import { GlDropdown, GlDropdownItem, GlDropdownDivider, GlButton, GlTooltip } from '@gitlab/ui';
+import {
+  GlDisclosureDropdown,
+  GlDisclosureDropdownGroup,
+  GlDisclosureDropdownItem,
+} from '@gitlab/ui';
 
 export default {
   components: {
-    GlDropdown,
-    GlDropdownItem,
-    GlDropdownDivider,
-    GlButton,
-    GlTooltip,
+    GlDisclosureDropdown,
+    GlDisclosureDropdownGroup,
+    GlDisclosureDropdownItem,
   },
   props: {
-    id: {
+    toggleText: {
       type: String,
-      required: false,
-      default: '',
+      required: true,
     },
     actions: {
       type: Array,
       required: true,
     },
-    selectedKey: {
-      type: String,
-      required: false,
-      default: '',
-    },
     category: {
       type: String,
       required: false,
@@ -34,78 +30,40 @@ export default {
       required: false,
       default: 'default',
     },
-    showActionTooltip: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-  },
-  computed: {
-    hasMultipleActions() {
-      return this.actions.length > 1;
-    },
-    selectedAction() {
-      return this.actions.find((x) => x.key === this.selectedKey) || this.actions[0];
-    },
   },
   methods: {
     handleItemClick(action) {
-      this.$emit('select', action.key);
-    },
-    handleClick(action, evt) {
-      this.$emit('actionClicked', { action });
-      return action.handle?.(evt);
+      return action.handle?.();
     },
   },
 };
 </script>
 
 <template>
-  <span>
-    <gl-dropdown
-      v-if="hasMultipleActions"
-      :id="id"
-      :text="selectedAction.text"
-      :split-href="selectedAction.href"
-      :variant="variant"
-      :category="category"
-      split
-      data-qa-selector="action_dropdown"
-      @click="handleClick(selectedAction, $event)"
-    >
-      <template #button-content>
-        <span class="gl-dropdown-button-text" v-bind="selectedAction.attrs">
-          {{ selectedAction.text }}
-        </span>
-      </template>
-      <template v-for="(action, index) in actions">
-        <gl-dropdown-item
-          :key="action.key"
-          is-check-item
-          :is-checked="action.key === selectedAction.key"
-          :secondary-text="action.secondaryText"
-          :data-qa-selector="`${action.key}_menu_item`"
-          :data-testid="`action_${action.key}`"
-          @click="handleItemClick(action)"
-        >
-          <span class="gl-font-weight-bold">{{ action.text }}</span>
-        </gl-dropdown-item>
-        <gl-dropdown-divider v-if="index != actions.length - 1" :key="action.key + '_divider'" />
-      </template>
-    </gl-dropdown>
-    <gl-button
-      v-else-if="selectedAction"
-      :id="id"
-      v-bind="selectedAction.attrs"
-      :variant="variant"
-      :category="category"
-      :href="selectedAction.href"
-      @click="handleClick(selectedAction, $event)"
-    >
-      {{ selectedAction.text }}
-    </gl-button>
-    <gl-tooltip v-if="selectedAction.tooltip && showActionTooltip" :target="id">
-      {{ selectedAction.tooltip }}
-    </gl-tooltip>
-  </span>
+  <gl-disclosure-dropdown
+    :variant="variant"
+    :category="category"
+    :toggle-text="toggleText"
+    data-qa-selector="action_dropdown"
+  >
+    <gl-disclosure-dropdown-group>
+      <gl-disclosure-dropdown-item
+        v-for="action in actions"
+        :key="action.key"
+        v-bind="action.attrs"
+        :item="action"
+        :data-qa-selector="`${action.key}_menu_item`"
+        @action="handleItemClick(action)"
+      >
+        <template #list-item>
+          <div class="gl-display-flex gl-flex-direction-column">
+            <span class="gl-font-weight-bold gl-mb-2">{{ action.text }}</span>
+            <span class="gl-text-gray-700">
+              {{ action.secondaryText }}
+            </span>
+          </div>
+        </template>
+      </gl-disclosure-dropdown-item>
+    </gl-disclosure-dropdown-group>
+  </gl-disclosure-dropdown>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/web_ide_link.vue b/app/assets/javascripts/vue_shared/components/web_ide_link.vue
index 3c08142e2b9..96944877f61 100644
--- a/app/assets/javascripts/vue_shared/components/web_ide_link.vue
+++ b/app/assets/javascripts/vue_shared/components/web_ide_link.vue
@@ -3,9 +3,7 @@ import { GlModal, GlSprintf, GlLink } from '@gitlab/ui';
 import { s__, __ } from '~/locale';
 import { visitUrl } from '~/lib/utils/url_utility';
 import ActionsButton from '~/vue_shared/components/actions_button.vue';
-import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import ConfirmForkModal from '~/vue_shared/components/confirm_fork_modal.vue';
-import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { KEY_EDIT, KEY_WEB_IDE, KEY_GITPOD, KEY_PIPELINE_EDITOR } from './constants';
 
 export const i18n = {
@@ -21,22 +19,18 @@ export const i18n = {
   webIdeTooltip: s__(
     'WebIDE|Quickly and easily edit multiple files in your project. Press . to open',
   ),
+  toggleText: __('Edit'),
 };
 
-export const PREFERRED_EDITOR_KEY = 'gl-web-ide-button-selected';
-export const PREFERRED_EDITOR_RESET_KEY = 'gl-web-ide-button-selected-reset';
-
 export default {
   components: {
     ActionsButton,
-    LocalStorageSync,
     GlModal,
     GlSprintf,
     GlLink,
     ConfirmForkModal,
   },
   i18n,
-  mixins: [glFeatureFlagsMixin()],
   props: {
     isFork: {
       type: Boolean,
@@ -141,7 +135,6 @@ export default {
   },
   data() {
     return {
-      selection: this.showPipelineEditorButton ? KEY_PIPELINE_EDITOR : KEY_WEB_IDE,
       showEnableGitpodModal: false,
       showForkModal: false,
     };
@@ -155,6 +148,9 @@ export default {
         this.gitpodAction,
       ].filter((action) => action);
     },
+    hasActions() {
+      return this.actions.length > 0;
+    },
     editAction() {
       if (!this.showEditButton) {
         return null;
@@ -176,9 +172,8 @@ export default {
 
       return {
         key: KEY_EDIT,
-        text: __('Edit'),
+        text: __('Edit single file'),
         secondaryText: __('Edit this file only.'),
-        tooltip: '',
         attrs: {
           'data-qa-selector': 'edit_button',
           'data-track-action': 'click_consolidated_edit',
@@ -205,7 +200,6 @@ export default {
 
       const handleOptions = this.needsToFork
         ? {
-            href: '#modal-confirm-fork-webide',
             handle: () => {
               if (this.disableForkModal) {
                 this.$emit('edit', 'ide');
@@ -216,9 +210,7 @@ export default {
             },
           }
         : {
-            href: this.webIdeUrl,
-            handle: (evt) => {
-              evt.preventDefault();
+            handle: () => {
               visitUrl(this.webIdeUrl, true);
             },
           };
@@ -227,7 +219,6 @@ export default {
         key: KEY_WEB_IDE,
         text: this.webIdeActionText,
         secondaryText: this.$options.i18n.webIdeText,
-        tooltip: this.$options.i18n.webIdeTooltip,
         attrs: {
           'data-qa-selector': 'web_ide_button',
           'data-track-action': 'click_consolidated_edit_ide',
@@ -258,7 +249,6 @@ export default {
         key: KEY_PIPELINE_EDITOR,
         text: __('Edit in pipeline editor'),
         secondaryText,
-        tooltip: secondaryText,
         attrs: {
           'data-qa-selector': 'pipeline_editor_button',
         },
@@ -283,7 +273,6 @@ export default {
         key: KEY_GITPOD,
         text: this.gitpodActionText,
         secondaryText,
-        tooltip: secondaryText,
         attrs: {
           'data-qa-selector': 'gitpod_button',
         },
@@ -310,52 +299,24 @@ export default {
       };
     },
   },
-  mounted() {
-    this.resetPreferredEditor();
-  },
   methods: {
-    select(key) {
-      this.selection = key;
-    },
     showModal(dataKey) {
       this[dataKey] = true;
     },
-    resetPreferredEditor() {
-      if (!this.glFeatures.vscodeWebIde || this.showEditButton) {
-        return;
-      }
-
-      if (localStorage.getItem(PREFERRED_EDITOR_RESET_KEY) === 'true') {
-        return;
-      }
-
-      localStorage.setItem(PREFERRED_EDITOR_KEY, KEY_WEB_IDE);
-      localStorage.setItem(PREFERRED_EDITOR_RESET_KEY, true);
-
-      this.select(KEY_WEB_IDE);
-    },
   },
   webIdeButtonId: 'web-ide-link',
-  PREFERRED_EDITOR_KEY,
 };
 </script>
 
 <template>
   <div class="gl-sm-ml-3">
     <actions-button
+      v-if="hasActions"
       :id="$options.webIdeButtonId"
       :actions="actions"
-      :selected-key="selection"
+      :toggle-text="$options.i18n.toggleText"
       :variant="isBlob ? 'confirm' : 'default'"
       :category="isBlob ? 'primary' : 'secondary'"
-      show-action-tooltip
-      @select="select"
-    />
-    <local-storage-sync
-      :storage-key="$options.PREFERRED_EDITOR_KEY"
-      :value="selection"
-      as-string
-      @input="select"
     />
     <gl-modal
       v-if="computedShowGitpodButton && !gitpodEnabled"
diff --git a/app/views/admin/application_settings/_account_and_limit.html.haml b/app/views/admin/application_settings/_account_and_limit.html.haml
index df08a1123c7..d29fa9c5b85 100644
--- a/app/views/admin/application_settings/_account_and_limit.html.haml
+++ b/app/views/admin/application_settings/_account_and_limit.html.haml
@@ -9,21 +9,21 @@
       = f.label :default_projects_limit, _('Default projects limit'), class: 'label-bold'
       = f.number_field :default_projects_limit, class: 'form-control gl-form-input', title: _('Maximum number of projects.'), data: { toggle: 'tooltip', container: 'body' }
     .form-group
-      = f.label :max_attachment_size, _('Maximum attachment size (MB)'), class: 'label-bold'
+      = f.label :max_attachment_size, _('Maximum attachment size (MiB)'), class: 'label-bold'
       = f.number_field :max_attachment_size, class: 'form-control gl-form-input', title: _('Maximum size of individual attachments in comments.'), data: { toggle: 'tooltip', container: 'body' }
 
     = render 'admin/application_settings/repository_size_limit_setting_registration_features_cta', form: f
     = render_if_exists 'admin/application_settings/repository_size_limit_setting', form: f
 
     .form-group
-      = f.label :receive_max_input_size, _('Maximum push size (MB)'), class: 'label-light'
+      = f.label :receive_max_input_size, _('Maximum push size (MiB)'), class: 'label-light'
       = f.number_field :receive_max_input_size, class: 'form-control gl-form-input', title: _('Maximum size limit for a single commit.'), data: { toggle: 'tooltip', container: 'body', qa_selector: 'receive_max_input_size_field' }
     .form-group
-      = f.label :max_export_size, _('Maximum export size (MB)'), class: 'label-light'
+      = f.label :max_export_size, _('Maximum export size (MiB)'), class: 'label-light'
       = f.number_field :max_export_size, class: 'form-control gl-form-input', title: _('Maximum size of export files.'), data: { toggle: 'tooltip', container: 'body' }
       %span.form-text.text-muted= _('Set to 0 for no size limit.')
     .form-group
-      = f.label :max_import_size, _('Maximum import size (MB)'), class: 'label-light'
+      = f.label :max_import_size, _('Maximum import size (MiB)'), class: 'label-light'
       = f.number_field :max_import_size, class: 'form-control gl-form-input', title: _('Maximum size of import files.'), data: { toggle: 'tooltip', container: 'body' }
       %span.form-text.text-muted= _('Only effective when remote storage is enabled. Set to 0 for no size limit.')
     .form-group
diff --git a/app/views/admin/application_settings/_diff_limits.html.haml b/app/views/admin/application_settings/_diff_limits.html.haml
index 2e8eb25b1d5..153600f1299 100644
--- a/app/views/admin/application_settings/_diff_limits.html.haml
+++ b/app/views/admin/application_settings/_diff_limits.html.haml
@@ -3,7 +3,7 @@
 
   %fieldset
     .form-group
-      = f.label :diff_max_patch_bytes, _('Maximum diff patch size (Bytes)'), class: 'label-light'
+      = f.label :diff_max_patch_bytes, _('Maximum diff patch size (bytes)'), class: 'label-light'
       = f.number_field :diff_max_patch_bytes, class: 'form-control gl-form-input'
       %span.form-text.text-muted
         = _("Diff files surpassing this limit will be presented as 'too large' and won't be expandable.")
diff --git a/app/views/admin/application_settings/_pages.html.haml b/app/views/admin/application_settings/_pages.html.haml
index 97d9426581e..1eb6b747704 100644
--- a/app/views/admin/application_settings/_pages.html.haml
+++ b/app/views/admin/application_settings/_pages.html.haml
@@ -16,7 +16,7 @@
           s_("AdminSettings|Disable public access to Pages sites"),
           help_text: s_("AdminSettings|Select to disable public access for Pages sites, which requires users to sign in for access to the Pages sites in your instance. %{link_start}Learn more.%{link_end}").html_safe % { link_start: pages_link_start, link_end: '</a>'.html_safe }
     .form-group
-      = f.label :max_pages_size, _('Maximum size of pages (MB)'), class: 'label-bold'
+      = f.label :max_pages_size, _('Maximum size of pages (MiB)'), class: 'label-bold'
       = f.number_field :max_pages_size, class: 'form-control gl-form-input'
       .form-text.text-muted
         - pages_link_url = help_page_path('administration/pages/index', anchor: 'set-maximum-size-of-gitlab-pages-site-in-a-project')
diff --git a/app/views/admin/application_settings/_repository_size_limit_setting_registration_features_cta.html.haml b/app/views/admin/application_settings/_repository_size_limit_setting_registration_features_cta.html.haml
index 8daa5aa8c73..040a22ff2ac 100644
--- a/app/views/admin/application_settings/_repository_size_limit_setting_registration_features_cta.html.haml
+++ b/app/views/admin/application_settings/_repository_size_limit_setting_registration_features_cta.html.haml
@@ -2,7 +2,7 @@
 
 .form-group
   = form.label :disabled_repository_size_limit, class: 'label-bold' do
-    = _('Size limit per repository (MB)')
+    = _('Size limit per repository (MiB)')
   = form.number_field :disabled_repository_size_limit, value: '', class: 'form-control gl-form-input', disabled: true
   %span.form-text.text-muted
     = render 'shared/registration_features_discovery_message'
diff --git a/app/views/shared/_choose_avatar_button.html.haml b/app/views/shared/_choose_avatar_button.html.haml
index e3f2e1aa436..657fef1f74d 100644
--- a/app/views/shared/_choose_avatar_button.html.haml
+++ b/app/views/shared/_choose_avatar_button.html.haml
@@ -1 +1 @@
-= render 'shared/file_picker_button', f: f, field: :avatar, help_text: _("Max file size is 200 KB.")
+= render 'shared/file_picker_button', f: f, field: :avatar, help_text: _("Max file size is 200 KiB.")
diff --git a/app/views/shared/_repository_size_limit_setting_registration_features_cta.html.haml b/app/views/shared/_repository_size_limit_setting_registration_features_cta.html.haml
index 9fe1e3087f6..0d084a99528 100644
--- a/app/views/shared/_repository_size_limit_setting_registration_features_cta.html.haml
+++ b/app/views/shared/_repository_size_limit_setting_registration_features_cta.html.haml
@@ -3,7 +3,7 @@
 .row
   .form-group.col-md-9
     = form.label :disabled_repository_size_limit, class: 'label-bold' do
-      = _('Repository size limit (MB)')
+      = _('Repository size limit (MiB)')
     = form.number_field :disabled_repository_size_limit, value: '', class: 'form-control', disabled: true
     %span.form-text.text-muted
       = render 'shared/registration_features_discovery_message'