Add latest changes from gitlab-org/gitlab@master

5 files changed, 36 insertions, 54 deletions

diff --git a/app/assets/javascripts/notes/components/note_form.vue b/app/assets/javascripts/notes/components/note_form.vue
index 4e816038539..4a6b6d5233f 100644
--- a/app/assets/javascripts/notes/components/note_form.vue
+++ b/app/assets/javascripts/notes/components/note_form.vue
@@ -245,15 +245,16 @@ export default {
   },
   methods: {
     ...mapActions(['toggleResolveNote']),
-    shouldToggleResolved(shouldResolve, beforeSubmitDiscussionState) {
-      const newResolvedStateAfterUpdate =
-        this.shouldBeResolved && this.shouldBeResolved(shouldResolve);
-
-      const shouldToggleState =
-        newResolvedStateAfterUpdate !== undefined &&
-        beforeSubmitDiscussionState !== newResolvedStateAfterUpdate;
-
-      return shouldResolve || shouldToggleState;
+    shouldToggleResolved(beforeSubmitDiscussionState) {
+      return (
+        this.showResolveDiscussionToggle && beforeSubmitDiscussionState !== this.newResolvedState()
+      );
+    },
+    newResolvedState() {
+      return (
+        (this.discussionResolved && !this.isUnresolving) ||
+        (!this.discussionResolved && this.isResolving)
+      );
     },
     editMyLastNote() {
       if (this.updatedNoteBody === '') {
@@ -293,7 +294,7 @@ export default {
       }
       this.updatedNoteBody = '';
     },
-    handleUpdate(shouldResolve) {
+    handleUpdate() {
       const beforeSubmitDiscussionState = this.discussionResolved;
       this.isSubmitting = true;
 
@@ -309,23 +310,13 @@ export default {
         () => {
           this.isSubmitting = false;
 
-          if (this.shouldToggleResolved(shouldResolve, beforeSubmitDiscussionState)) {
+          if (this.shouldToggleResolved(beforeSubmitDiscussionState)) {
             this.resolveHandler(beforeSubmitDiscussionState);
           }
         },
         this.discussionResolved ? !this.isUnresolving : this.isResolving,
       );
     },
-    shouldBeResolved(resolveStatus) {
-      if (this.withBatchComments) {
-        return (
-          (this.discussionResolved && !this.isUnresolving) ||
-          (!this.discussionResolved && this.isResolving)
-        );
-      }
-
-      return resolveStatus;
-    },
     handleAddToReview() {
       // check if draft should resolve thread
       const shouldResolve =
@@ -390,21 +381,22 @@ export default {
         />
       </comment-field-layout>
       <div class="note-form-actions">
+        <p v-if="showResolveDiscussionToggle">
+          <label>
+            <template v-if="discussionResolved">
+              <gl-form-checkbox v-model="isUnresolving" class="js-unresolve-checkbox">
+                {{ __('Unresolve thread') }}
+              </gl-form-checkbox>
+            </template>
+            <template v-else>
+              <gl-form-checkbox v-model="isResolving" class="js-resolve-checkbox">
+                {{ __('Resolve thread') }}
+              </gl-form-checkbox>
+            </template>
+          </label>
+        </p>
+
         <template v-if="showBatchCommentsActions">
-          <p v-if="showResolveDiscussionToggle">
-            <label>
-              <template v-if="discussionResolved">
-                <gl-form-checkbox v-model="isUnresolving" class="js-unresolve-checkbox">
-                  {{ __('Unresolve thread') }}
-                </gl-form-checkbox>
-              </template>
-              <template v-else>
-                <gl-form-checkbox v-model="isResolving" class="js-resolve-checkbox">
-                  {{ __('Resolve thread') }}
-                </gl-form-checkbox>
-              </template>
-            </label>
-          </p>
           <div class="gl-display-flex gl-flex-wrap gl-mb-n3">
             <gl-button
               :disabled="isDisabled"
@@ -451,15 +443,6 @@ export default {
               {{ saveButtonTitle }}
             </gl-button>
             <gl-button
-              v-if="discussion.resolvable"
-              category="secondary"
-              variant="default"
-              class="gl-sm-mr-3 gl-xs-mb-3 js-comment-resolve-button"
-              @click.prevent="handleUpdate(true)"
-            >
-              {{ resolveButtonTitle }}
-            </gl-button>
-            <gl-button
               class="note-edit-cancel js-close-discussion-note-form"
               category="secondary"
               variant="default"
diff --git a/app/assets/javascripts/notes/mixins/resolvable.js b/app/assets/javascripts/notes/mixins/resolvable.js
index 63822a31cd1..814702b724d 100644
--- a/app/assets/javascripts/notes/mixins/resolvable.js
+++ b/app/assets/javascripts/notes/mixins/resolvable.js
@@ -11,14 +11,6 @@ export default {
       return this.note.resolved;
     },
     resolveButtonTitle() {
-      if (this.updatedNoteBody) {
-        if (this.discussionResolved) {
-          return __('Comment & unresolve thread');
-        }
-
-        return __('Comment & resolve thread');
-      }
-
       return this.discussionResolved ? __('Unresolve thread') : __('Resolve thread');
     },
   },
diff --git a/app/assets/javascripts/vue_shared/components/color_picker/color_picker.vue b/app/assets/javascripts/vue_shared/components/color_picker/color_picker.vue
index 78db2bf15b0..149082d036a 100644
--- a/app/assets/javascripts/vue_shared/components/color_picker/color_picker.vue
+++ b/app/assets/javascripts/vue_shared/components/color_picker/color_picker.vue
@@ -110,7 +110,7 @@ export default {
       <gl-form-input-group
         max-length="7"
         type="text"
-        class="gl-align-center gl-rounded-0 gl-rounded-top-right-base gl-rounded-bottom-right-base"
+        class="gl-align-center gl-rounded-0 gl-rounded-top-right-base gl-rounded-bottom-right-base gl-max-w-26"
         :value="value"
         :state="state"
         @input="handleColorChange"
diff --git a/app/assets/javascripts/vue_shared/components/listbox_input/init_listbox_inputs.js b/app/assets/javascripts/vue_shared/components/listbox_input/init_listbox_inputs.js
index b447822b1e0..e098103adde 100644
--- a/app/assets/javascripts/vue_shared/components/listbox_input/init_listbox_inputs.js
+++ b/app/assets/javascripts/vue_shared/components/listbox_input/init_listbox_inputs.js
@@ -6,7 +6,7 @@ export const initListboxInputs = () => {
   const els = [...document.querySelectorAll('.js-listbox-input')];
 
   els.forEach((el, index) => {
-    const { label, description, name, defaultToggleText, value = null } = el.dataset;
+    const { label, description, name, defaultToggleText, value = null, toggleClass } = el.dataset;
     const { id } = el;
     const items = JSON.parse(el.dataset.items);
 
@@ -34,6 +34,7 @@ export const initListboxInputs = () => {
             block: parseBoolean(el.dataset.block),
             fluidWidth: parseBoolean(el.dataset.fluidWidth),
             items,
+            toggleClass,
           },
           attrs: {
             id,
diff --git a/app/assets/javascripts/vue_shared/components/listbox_input/listbox_input.vue b/app/assets/javascripts/vue_shared/components/listbox_input/listbox_input.vue
index 09ecad0713a..d20593d104e 100644
--- a/app/assets/javascripts/vue_shared/components/listbox_input/listbox_input.vue
+++ b/app/assets/javascripts/vue_shared/components/listbox_input/listbox_input.vue
@@ -62,6 +62,11 @@ export default {
       required: false,
       default: GlCollapsibleListbox.props.block.default,
     },
+    toggleClass: {
+      type: [Array, String, Object],
+      required: false,
+      default: null,
+    },
   },
   data() {
     return {
@@ -134,6 +139,7 @@ export default {
     <gl-collapsible-listbox
       :selected="selected"
       :toggle-text="toggleText"
+      :toggle-class="toggleClass"
       :items="filteredItems"
       :searchable="isSearchable"
       :no-results-text="$options.i18n.noResultsText"