Add latest changes from gitlab-org/gitlab@master

hugorebelo · Aug 28, 2024 · a4fae20 · a4fae20
1 parent 6d2f26c
commit a4fae20
Show file tree

Hide file tree

Showing 51 changed files with 692 additions and 223 deletions.
diff --git a/Gemfile b/Gemfile
@@ -570,9 +570,9 @@ group :test do
   gem 'rspec-parameterized', '~> 1.0', '>= 1.0.2', require: false, feature_category: :tooling
   gem 'os', '~> 1.1', '>= 1.1.4', feature_category: :tooling
 
-  gem 'capybara', '~> 3.40' # rubocop:todo Gemfile/MissingFeatureCategory
-  gem 'capybara-screenshot', '~> 1.0.26' # rubocop:todo Gemfile/MissingFeatureCategory
-  gem 'selenium-webdriver', '~> 4.21', '>= 4.21.1' # rubocop:todo Gemfile/MissingFeatureCategory
+  gem 'capybara', '~> 3.40', feature_category: :test_platform
+  gem 'capybara-screenshot', '~> 1.0.26', feature_category: :test_platform
+  gem 'selenium-webdriver', '~> 4.21', '>= 4.21.1', feature_category: :test_platform
 
   gem 'graphlyte', '~> 1.0.0' # rubocop:todo Gemfile/MissingFeatureCategory
 

diff --git a/app/assets/javascripts/batch_comments/components/draft_note.vue b/app/assets/javascripts/batch_comments/components/draft_note.vue
@@ -86,7 +86,7 @@ export default {
     :note="draft"
     :line="line"
     :discussion-root="true"
-    class="draft-note-component draft-note !gl-mb-0"
+    class="draft-note !gl-mb-0"
     @handleEdit="handleEditing"
     @cancelForm="handleNotEditing"
     @updateSuccess="handleNotEditing"
@@ -110,7 +110,7 @@ export default {
       <div
         v-if="draftCommands"
         v-safe-html:[$options.safeHtmlConfig]="draftCommands"
-        class="referenced-commands draft-note-commands"
+        class="draft-note-referenced-commands gl-mb-2 gl-ml-3 gl-text-sm gl-text-subtle"
       ></div>
     </template>
   </noteable-note>

diff --git a/app/assets/javascripts/design_management/components/design_notes/toggle_replies_widget.vue b/app/assets/javascripts/design_management/components/design_notes/toggle_replies_widget.vue
@@ -32,8 +32,8 @@ export default {
         ? n__('%d reply', '%d replies', this.replies.length)
         : __('Collapse replies');
     },
-    toggleTextColor() {
-      return this.collapsed ? 'gl-text-blue-500' : 'gl-text-gray-900';
+    toggleIconColor() {
+      return this.collapsed ? '!gl-text-primary' : '!gl-text-blue-600';
     },
     authors() {
       return [...new Set(this.replies.map((item) => item.author))];
@@ -44,20 +44,24 @@ export default {
       }
       return '';
     },
+    ariaState() {
+      return String(!this.collapsed);
+    },
   },
 };
 </script>
 
 <template>
   <li
-    class="toggle-comments gl-flex gl-min-h-8 gl-items-center gl-rounded-bl-base gl-rounded-br-base gl-bg-gray-10 gl-p-3"
-    :class="{ expanded: !collapsed }"
+    class="toggle-comments gl-flex gl-min-h-8 gl-items-center gl-rounded-b-base gl-bg-subtle gl-p-3"
+    :aria-expanded="ariaState"
     data-testid="toggle-comments-wrapper"
   >
     <gl-button
       category="tertiary"
       data-testid="toggle-replies-button"
       class="gl-my-2 gl-mr-3 !gl-p-0"
+      :class="toggleIconColor"
       :icon="iconName"
       @click="$emit('toggle')"
     />
@@ -85,7 +89,7 @@ export default {
       class="toggle-comments-button"
       @click="$emit('toggle')"
     >
-      <span :class="toggleTextColor">{{ toggleText }}</span>
+      <span>{{ toggleText }}</span>
     </gl-button>
   </li>
 </template>
diff --git a/app/assets/javascripts/ide/components/merge_requests/list.vue b/app/assets/javascripts/ide/components/merge_requests/list.vue
@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
-import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlIcon, GlButton } from '@gitlab/ui';
 import { debounce } from 'lodash';
 // eslint-disable-next-line no-restricted-imports
 import { mapActions, mapState } from 'vuex';
@@ -19,6 +19,7 @@ export default {
     Item,
     GlIcon,
     GlLoadingIcon,
+    GlButton,
   },
   data() {
     return {
@@ -101,16 +102,9 @@ export default {
         <ul class="mb-0 gl-w-full">
           <template v-if="showSearchTypes">
             <li v-for="searchType in $options.searchTypes" :key="searchType.type">
-              <button
-                type="button"
-                class="btn-link gl-button gl-flex gl-items-center"
-                @click.stop="setSearchType(searchType)"
-              >
-                <span class="ide-search-list-current-icon gl-mr-3 gl-flex">
-                  <gl-icon :size="16" name="search" />
-                </span>
-                <span>{{ searchType.label }}</span>
-              </button>
+              <gl-button variant="link" icon="search" @click="setSearchType(searchType)">
+                {{ searchType.label }}
+              </gl-button>
             </li>
           </template>
           <template v-else-if="hasMergeRequests">

diff --git a/app/assets/javascripts/merge_requests/list/components/merge_requests_list_app.vue b/app/assets/javascripts/merge_requests/list/components/merge_requests_list_app.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlFilteredSearchToken, GlButton } from '@gitlab/ui';
+import { GlFilteredSearchToken, GlButton, GlLink, GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { isEmpty } from 'lodash';
 import { createAlert } from '~/alert';
 import Api from '~/api';
@@ -82,11 +82,16 @@ export default {
   mergeRequestListTabs,
   components: {
     GlButton,
+    GlLink,
+    GlIcon,
     IssuableList,
     CiIcon,
     MergeRequestStatistics,
     MergeRequestMoreActionsDropdown,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   inject: [
     'autocompleteAwardEmojisPath',
     'fullPath',
@@ -483,7 +488,16 @@ export default {
       this.sortKey = deriveSortKey({ sort, state });
       this.state = state || STATUS_OPEN;
     },
+    isMergeRequestBroken(mergeRequest) {
+      return (
+        mergeRequest.commitCount === 0 ||
+        !mergeRequest.sourceBranchExists ||
+        !mergeRequest.targetBranchExists ||
+        mergeRequest.conflicts
+      );
+    },
   },
+  STATUS_OPEN,
 };
 </script>
 
@@ -533,6 +547,15 @@ export default {
 
     <template #status="{ issuable = {} }">
       {{ getStatus(issuable) }}
+      <gl-link
+        v-if="issuable.state === $options.STATUS_OPEN && isMergeRequestBroken(issuable)"
+        v-gl-tooltip
+        :href="issuable.webUrl"
+        :title="__('Cannot be merged automatically')"
+        data-testid="merge-request-cannot-merge"
+      >
+        <gl-icon name="warning-solid" class="gl-text-gray-900" />
+      </gl-link>
     </template>
 
     <template #statistics="{ issuable = {} }">

diff --git a/app/assets/javascripts/merge_requests/list/queries/merge_request.fragment.graphql b/app/assets/javascripts/merge_requests/list/queries/merge_request.fragment.graphql
@@ -43,4 +43,8 @@ fragment MergeRequestFragment on MergeRequest {
       detailsPath
     }
   }
+  conflicts
+  commitCount
+  sourceBranchExists
+  targetBranchExists
 }
diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue
@@ -178,7 +178,7 @@ export default {
     },
     discussionHolderClass() {
       return {
-        'is-replying !gl-pt-0': this.isReplying,
+        'is-replying': this.isReplying,
         'internal-note': this.isDiscussionInternal,
         '!gl-pt-0': !this.discussion.diff_discussion && this.isReplying,
       };
@@ -341,7 +341,7 @@ export default {
                 <li
                   v-else-if="canShowReplyActions && showReplies"
                   data-testid="reply-wrapper"
-                  class="discussion-reply-holder clearfix !gl-border-t-0 !gl-pb-5"
+                  class="discussion-reply-holder clearfix gl-bg-subtle"
                   :class="discussionHolderClass"
                 >
                   <discussion-actions

diff --git a/app/assets/javascripts/notes/components/toggle_replies_widget.vue b/app/assets/javascripts/notes/components/toggle_replies_widget.vue
@@ -38,17 +38,15 @@ export default {
 
       return uniqBy(authors, 'username');
     },
-    liClasses() {
-      return this.collapsed
-        ? 'gl-text-gray-500 !gl-rounded-bl-base !gl-rounded-br-base'
-        : 'gl-border-b';
-    },
     buttonIcon() {
       return this.collapsed ? 'chevron-right' : 'chevron-down';
     },
     buttonLabel() {
       return this.collapsed ? this.$options.i18n.expandReplies : this.$options.i18n.collapseReplies;
     },
+    ariaState() {
+      return String(!this.collapsed);
+    },
   },
   methods: {
     toggle() {
@@ -61,12 +59,14 @@ export default {
 
 <template>
   <li
-    :class="liClasses"
-    class="toggle-replies-widget gl-border !gl-flex gl-flex-wrap gl-items-center gl-bg-gray-10 gl-px-5 gl-py-3"
+    :class="{ '!gl-rounded-b-base gl-text-subtle': collapsed }"
+    class="toggle-replies-widget gl-border-r gl-border-l !gl-flex gl-flex-wrap gl-items-center gl-bg-subtle gl-px-5 gl-py-3"
+    :aria-expanded="ariaState"
   >
     <gl-button
       ref="toggle"
       class="gl-my-2 gl-mr-3 !gl-p-0"
+      :class="{ '!gl-text-blue-600': !collapsed }"
       category="tertiary"
       :icon="buttonIcon"
       :aria-label="buttonLabel"
@@ -112,7 +112,7 @@ export default {
     </template>
     <gl-button
       v-else
-      class="!gl-text-primary !gl-no-underline"
+      class="!gl-no-underline"
       variant="link"
       data-testid="collapse-replies-button"
       @click="toggle"

diff --git a/...avascripts/work_items/components/design_management/design_notes/toggle_replies_widget.vue b/...avascripts/work_items/components/design_management/design_notes/toggle_replies_widget.vue
@@ -44,6 +44,9 @@ export default {
       }
       return '';
     },
+    ariaState() {
+      return String(!this.collapsed);
+    },
   },
 };
 </script>
@@ -52,6 +55,7 @@ export default {
   <li
     class="toggle-comments gl-flex gl-min-h-8 gl-items-center gl-rounded-bl-base gl-rounded-br-base gl-bg-gray-10 gl-p-3"
     :class="{ expanded: !collapsed }"
+    :aria-expanded="ariaState"
     data-testid="toggle-comments-wrapper"
   >
     <gl-button

diff --git a/app/assets/javascripts/work_items/components/notes/work_item_add_note.vue b/app/assets/javascripts/work_items/components/notes/work_item_add_note.vue
@@ -190,9 +190,9 @@ export default {
       return {
         'timeline-entry note-form': this.isNewDiscussion,
         // eslint-disable-next-line @gitlab/require-i18n-strings
-        'note note-wrapper note-comment discussion-reply-holder !gl-border-t-0 clearfix':
+        '!gl-pb-5 note note-wrapper note-comment discussion-reply-holder clearfix':
           !this.isNewDiscussion,
-        '!gl-pt-0 is-replying': this.isEditing,
+        'is-replying': this.isEditing,
         'internal-note': this.isInternalThread,
       };
     },

diff --git a/app/assets/javascripts/work_items/components/notes/work_item_comment_form.vue b/app/assets/javascripts/work_items/components/notes/work_item_comment_form.vue
@@ -280,37 +280,37 @@ export default {
               class="gl-text-blue-500"
             />
           </gl-form-checkbox>
-          <gl-button
-            category="primary"
-            variant="confirm"
-            data-testid="confirm-button"
-            :disabled="!commentText.length"
-            :loading="isSubmitting"
-            @click="submitForm"
-            >{{ commentButtonTextComputed }}
-          </gl-button>
-          <work-item-state-toggle
-            v-if="isNewDiscussion"
-            class="gl-ml-3"
-            :work-item-id="workItemId"
-            :work-item-iid="workItemIid"
-            :work-item-state="workItemState"
-            :work-item-type="workItemType"
-            :full-path="fullPath"
-            :has-comment="Boolean(commentText.length)"
-            can-update
-            @submit-comment="submitForm"
-            @error="$emit('error', $event)"
-          />
-          <gl-button
-            v-else
-            data-testid="cancel-button"
-            category="primary"
-            class="gl-ml-3"
-            :loading="updateInProgress"
-            @click="cancelEditing"
-            >{{ $options.i18n.cancelButtonText }}
-          </gl-button>
+          <div class="gl-flex gl-gap-3">
+            <gl-button
+              category="primary"
+              variant="confirm"
+              data-testid="confirm-button"
+              :disabled="!commentText.length"
+              :loading="isSubmitting"
+              @click="submitForm"
+              >{{ commentButtonTextComputed }}
+            </gl-button>
+            <work-item-state-toggle
+              v-if="isNewDiscussion"
+              :work-item-id="workItemId"
+              :work-item-iid="workItemIid"
+              :work-item-state="workItemState"
+              :work-item-type="workItemType"
+              :full-path="fullPath"
+              :has-comment="Boolean(commentText.length)"
+              can-update
+              @submit-comment="submitForm"
+              @error="$emit('error', $event)"
+            />
+            <gl-button
+              v-else
+              data-testid="cancel-button"
+              category="primary"
+              :loading="updateInProgress"
+              @click="cancelEditing"
+              >{{ $options.i18n.cancelButtonText }}
+            </gl-button>
+          </div>
         </div>
       </form>
     </div>

diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss
@@ -873,6 +873,10 @@ table.code {
     .discussion-reply-holder {
       margin-left: 2.5rem;
 
+      &[aria-expanded="false"] {
+        @apply gl-border-b;
+      }
+
       .reply-author-avatar {
         height: 1.5rem;
       }

diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss
@@ -28,8 +28,7 @@
 .timeline-entry {
   color: $gl-text-color;
 
-  &:not(.note-form).internal-note .timeline-content,
-  &:not(.note-form).draft-note .timeline-content {
+  &:not(.note-form).internal-note .timeline-content {
     background-color: $orange-50 !important;
   }
 

diff --git a/app/assets/stylesheets/highlight/common.scss b/app/assets/stylesheets/highlight/common.scss
@@ -8,10 +8,6 @@
   &.line_content span.idiff {
     background: $idiff;
   }
-
-  &.diff-line-num {
-    border-color: $border;
-  }
 }
 
 @mixin dark-diff-match-line {