Add latest changes from gitlab-org/gitlab@master

Author: GitLab Bot

app/assets/javascripts/boards/components/board_card.vue

@@ -40,6 +40,16 @@ export default {
       required: false,
       default: true,
     },
+    columnIndex: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    rowIndex: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
   },
   apollo: {
     // eslint-disable-next-line @gitlab/vue-no-undef-apollo-properties
@@ -85,6 +95,9 @@ export default {
         labels: this.item.labels?.nodes || [],
       };
     },
+    showFocusBackground() {
+      return !this.isActive && !this.multiSelectVisible;
+    },
   },
   methods: {
     toggleIssue(e) {
@@ -100,6 +113,7 @@ export default {
       if (isMultiSelect && gon?.features?.boardMultiSelect) {
         this.toggleBoardItemMultiSelection(this.item);
       } else {
+        e.currentTarget.focus();
         this.toggleItem();
         this.track('click_card', { label: 'right_sidebar' });
       }
@@ -137,6 +151,54 @@ export default {
         },
       });
     },
+    changeFocusInColumn(currentCard, i) {
+      // Building a list using data-col-index instead of just traversing the ul is necessary for swimlanes
+      const columnCards = [
+        ...document.querySelectorAll(
+          `button.board-card-button[data-col-index="${this.columnIndex}"]`,
+        ),
+      ];
+      const currentIndex = columnCards.indexOf(currentCard);
+      if (currentIndex + i < 0 || currentIndex + i > columnCards.length - 1) {
+        return;
+      }
+      columnCards[currentIndex + i].focus();
+    },
+    focusNext(e) {
+      this.changeFocusInColumn(e.target, 1);
+    },
+    focusPrev(e) {
+      this.changeFocusInColumn(e.target, -1);
+    },
+    changeFocusInRow(currentCard, i) {
+      const currentList = currentCard.closest('ul');
+      // Find next in line list/cell with cards. If none, don't move.
+      let listSelector = 'board-list';
+      // Account for swimlanes using different structure. Swimlanes traverse within their lane.
+      if (currentList.classList.contains('board-cell')) {
+        listSelector = `board-cell[data-row-index="${this.rowIndex}"]`;
+      }
+      const lists = [
+        ...document.querySelectorAll(`ul.${listSelector}:not(.list-empty):not(.list-collapsed)`),
+      ];
+      const currentIndex = lists.indexOf(currentList);
+      if (currentIndex + i < 0 || currentIndex + i > lists.length - 1) {
+        return;
+      }
+      // Focus the same index if possible, or last card
+      const targetCards = lists[currentIndex + i].querySelectorAll('button.board-card-button');
+      if (targetCards.length <= this.index) {
+        targetCards[targetCards.length - 1].focus();
+      } else {
+        targetCards[this.index].focus();
+      }
+    },
+    focusLeft(e) {
+      this.changeFocusInRow(e.target, -1);
+    },
+    focusRight(e) {
+      this.changeFocusInRow(e.target, 1);
+    },
   },
 };
 </script>
@@ -147,30 +209,47 @@ export default {
       {
         'multi-select gl-border-blue-200 gl-bg-blue-50': multiSelectVisible,
         'gl-cursor-grab': isDraggable,
+        'is-active !gl-bg-blue-50 hover:!gl-bg-blue-50': isActive,
         'is-disabled': isDisabled,
-        'is-active gl-bg-blue-50 hover:!gl-bg-blue-50': isActive,
         'gl-cursor-not-allowed gl-bg-gray-10': item.isLoading,
-        'gl-border-l-4 gl-pl-4 gl-border-l-solid': itemColor,
       },
     ]"
     :index="index"
     :data-item-id="item.id"
     :data-item-iid="item.iid"
     :data-item-path="item.referencePath"
-    :style="cardStyle"
     data-testid="board-card"
-    class="board-card gl-border gl-relative gl-mb-3 gl-rounded-base gl-p-4 gl-leading-normal hover:gl-bg-gray-10"
-    @click="toggleIssue($event)"
+    class="board-card gl-border gl-relative gl-mb-3 gl-rounded-base gl-leading-normal hover:gl-bg-gray-10"
   >
-    <board-card-inner
-      :list="list"
-      :item="formattedItem"
-      :update-filters="true"
-      :index="index"
-      :show-work-item-type-icon="showWorkItemTypeIcon"
-      @setFilters="$emit('setFilters', $event)"
+    <button
+      :class="[
+        {
+          'focus:gl-bg-gray-10': showFocusBackground,
+          'gl-border-l-4 gl-pl-4 gl-border-l-solid': itemColor,
+        },
+      ]"
+      :aria-label="item.title"
+      :data-col-index="columnIndex"
+      :data-row-index="rowIndex"
+      :style="cardStyle"
+      data-testid="board-card-button"
+      class="board-card-button btn-transparent gl-block gl-h-full gl-w-full gl-rounded-base gl-p-4 gl-text-left gl-outline-none focus:gl-focus"
+      @click="toggleIssue"
+      @keydown.left.exact.prevent="focusLeft"
+      @keydown.right.exact.prevent="focusRight"
+      @keydown.down.exact.prevent="focusNext"
+      @keydown.up.exact.prevent="focusPrev"
     >
-      <slot></slot>
-    </board-card-inner>
+      <board-card-inner
+        :list="list"
+        :item="formattedItem"
+        :update-filters="true"
+        :index="index"
+        :show-work-item-type-icon="showWorkItemTypeIcon"
+        @setFilters="$emit('setFilters', $event)"
+      >
+        <slot></slot>
+      </board-card-inner>
+    </button>
   </li>
 </template>

app/assets/javascripts/boards/components/board_column.vue

@@ -51,6 +51,10 @@ export default {
       required: false,
       default: false,
     },
+    columnIndex: {
+      type: Number,
+      required: true,
+    },
   },
   data() {
     return {
@@ -126,6 +130,7 @@ export default {
           :list="list"
           :filter-params="filters"
           :show-new-form="showNewForm"
+          :column-index="columnIndex"
           @toggleNewForm="toggleNewForm"
           @setFilters="$emit('setFilters', $event)"
         />

app/assets/javascripts/boards/components/board_content.vue

@@ -266,6 +266,7 @@ export default {
         v-for="(list, index) in boardListsToUse"
         :key="index"
         ref="board"
+        :column-index="index"
         :board-id="boardId"
         :list="list"
         :filters="filterParams"

app/assets/javascripts/boards/components/board_list.vue

@@ -75,6 +75,10 @@ export default {
       required: false,
       default: false,
     },
+    columnIndex: {
+      type: Number,
+      required: true,
+    },
   },
   data() {
     return {
@@ -652,9 +656,11 @@ export default {
         'gl-rounded-bl-base gl-rounded-br-base gl-bg-red-50': boardItemsSizeExceedsMax,
         'gl-overflow-hidden': disableScrollingWhenMutationInProgress,
         'gl-overflow-y-auto': !disableScrollingWhenMutationInProgress,
+        'list-empty': !listItemsCount,
+        'list-collapsed': list.collapsed,
       }"
       :draggable="canMoveIssue ? '.board-card' : false"
-      class="board-list gl-mb-0 gl-h-full gl-w-full gl-list-none gl-overflow-x-hidden gl-p-3 gl-pt-0"
+      class="board-list gl-mb-0 gl-h-full gl-w-full gl-list-none gl-overflow-x-hidden gl-p-3 gl-pt-2"
       data-testid="tree-root-wrapper"
       @start="handleDragOnStart"
       @end="handleDragOnEnd"
@@ -666,6 +672,7 @@ export default {
         :index="index"
         :list="list"
         :item="item"
+        :column-index="columnIndex"
         :data-draggable-item-type="$options.draggableItemTypes.card"
         :show-work-item-type-icon="!isEpicBoard"
         @setFilters="$emit('setFilters', $event)"
@@ -689,11 +696,13 @@ export default {
         v-for="(item, index) in afterCutLine"
         ref="issue"
         :key="item.id"
-        :index="index"
+        :index="index + list.maxIssueCount"
         :list="list"
         :item="item"
+        :column-index="columnIndex"
         :data-draggable-item-type="$options.draggableItemTypes.card"
         :show-work-item-type-icon="!isEpicBoard"
+        :list-items-length="boardListItems.length"
         @setFilters="$emit('setFilters', $event)"
       >
         <board-card-move-to-position

app/assets/javascripts/environments/components/empty_state.vue

@@ -2,13 +2,15 @@
 import emptyEnvironmentsSvgPath from '@gitlab/svgs/dist/illustrations/empty-state/empty-environment-md.svg';
 import { GlButton, GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui';
 import { s__ } from '~/locale';
+import EmptyResult from '~/vue_shared/components/empty_result.vue';
 
 export default {
   components: {
     GlButton,
     GlEmptyState,
     GlLink,
     GlSprintf,
+    EmptyResult,
   },
   inject: ['newEnvironmentPath'],
   props: {
@@ -31,9 +33,7 @@ export default {
     },
   },
   i18n: {
-    searchingTitle: s__('Environments|No results found'),
     title: s__('Environments|Get started with environments'),
-    searchingContent: s__('Environments|Edit your search and try again'),
     content: s__(
       'Environments|Environments are places where code gets deployed, such as staging or production. You can create an environment in the UI or in your .gitlab-ci.yml file. You can also enable review apps, which assist with providing an environment to showcase product changes. %{linkStart}Learn more%{linkEnd} about environments.',
     ),
@@ -44,13 +44,15 @@ export default {
 };
 </script>
 <template>
+  <empty-result v-if="hasTerm" type="search" />
   <gl-empty-state
+    v-else
     class="gl-mx-auto gl-max-w-limited"
-    :title="title"
+    :title="$options.i18n.title"
     :svg-path="$options.emptyEnvironmentsSvgPath"
   >
     <template #description>
-      <gl-sprintf :message="content">
+      <gl-sprintf :message="$options.i18n.content">
         <template #link="{ content: contentToDisplay }">
           <gl-link :href="helpPath">{{ contentToDisplay }}</gl-link>
         </template>

app/assets/javascripts/environments/environment_details/components/kubernetes/kubernetes_logs.vue

@@ -1,6 +1,6 @@
 <script>
 import { GlLoadingIcon, GlAlert, GlEmptyState, GlSprintf, GlIcon } from '@gitlab/ui';
-import EmptyStateSvg from '@gitlab/svgs/dist/illustrations/Dependency-list-empty-state.svg?url';
+import EmptyStateSvg from '@gitlab/svgs/dist/illustrations/status/status-nothing-md.svg';
 import k8sLogsQuery from '~/environments/graphql/queries/k8s_logs.query.graphql';
 import environmentClusterAgentQuery from '~/environments/graphql/queries/environment_cluster_agent.query.graphql';
 import { createK8sAccessConfiguration } from '~/environments/helpers/k8s_integration_helper';

app/assets/javascripts/environments/environment_details/components/kubernetes/kubernetes_overview.vue

@@ -8,7 +8,7 @@ import {
   GlDisclosureDropdownItem,
   GlModalDirective,
 } from '@gitlab/ui';
-import CLUSTER_EMPTY_SVG from '@gitlab/svgs/dist/illustrations/empty-state/empty-state-clusters.svg?url';
+import CLUSTER_EMPTY_SVG from '@gitlab/svgs/dist/illustrations/empty-state/empty-environment-md.svg';
 import { isEmpty } from 'lodash';
 import { s__, __ } from '~/locale';
 import { createAlert } from '~/alert';

app/assets/javascripts/environments/environment_details/empty_state.vue

@@ -1,5 +1,6 @@
 <script>
 import { GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui';
+import EMPTY_SVG from '@gitlab/svgs/dist/illustrations/status/status-nothing-md.svg';
 import { translations, environmentsLearnMorePath, environmentsHelpPagePath } from './constants';
 
 export default {
@@ -11,10 +12,12 @@ export default {
   translations,
   actionButtonUrl: environmentsHelpPagePath,
   learnMoreHelpPath: environmentsLearnMorePath,
+  EMPTY_SVG,
 };
 </script>
 <template>
   <gl-empty-state
+    :svg-path="$options.EMPTY_SVG"
     :title="$options.translations.emptyStateTitle"
     :primary-button-text="$options.translations.emptyStatePrimaryButton"
     :primary-button-link="$options.actionButtonUrl"

app/assets/javascripts/members/components/table/members_table.vue

@@ -2,6 +2,7 @@
 import { GlTable, GlBadge, GlButton } from '@gitlab/ui';
 // eslint-disable-next-line no-restricted-imports
 import { mapState } from 'vuex';
+import EmptyResult from '~/vue_shared/components/empty_result.vue';
 import MembersTableCell from 'ee_else_ce/members/components/table/members_table_cell.vue';
 import {
   canDisableTwoFactor,
@@ -40,6 +41,7 @@ export default {
     GlTable,
     GlBadge,
     GlButton,
+    EmptyResult,
     MemberAvatar,
     CreatedAt,
     MembersTableCell,
@@ -238,15 +240,14 @@ export default {
   <div>
     <user-limit-reached-alert v-if="onAccessRequestTab" />
     <gl-table
+      v-if="members.length > 0"
       v-bind="tableAttrs.table"
       class="members-table"
       data-testid="members-table"
       stacked="lg"
       :fields="filteredAndModifiedFields"
       :items="members"
       primary-key="id"
-      :empty-text="__('No members found')"
-      show-empty
       :tbody-tr-attr="tbodyTrAttr"
     >
       <template #cell(account)="{ item: member }">
@@ -324,6 +325,7 @@ export default {
         <span data-testid="col-actions" class="gl-sr-only">{{ label }}</span>
       </template>
     </gl-table>
+    <empty-result v-else />
     <members-pagination :pagination="pagination" :tab-query-param-value="tabQueryParamValue" />
     <disable-two-factor-modal />
     <remove-group-link-modal />

app/assets/javascripts/work_items/components/work_item_detail.vue

@@ -68,6 +68,10 @@ import WorkItemAbuseModal from './work_item_abuse_modal.vue';
 import DesignWidget from './design_management/design_management_widget.vue';
 import DesignUploadButton from './design_management/upload_button.vue';
 
+const defaultWorkspacePermissions = {
+  createDesign: false,
+};
+
 export default {
   name: 'WorkItemDetail',
   i18n,
@@ -157,9 +161,7 @@ export default {
       filesToBeSaved: [],
       allowedChildTypes: [],
       designUploadError: null,
-      workspacePermissions: {
-        createDesign: false,
-      },
+      workspacePermissions: defaultWorkspacePermissions,
     };
   },
   apollo: {
@@ -247,7 +249,7 @@ export default {
         return this.isGroupWorkItem;
       },
       update(data) {
-        return data.workspace.userPermissions;
+        return data.workspace?.userPermissions ?? defaultWorkspacePermissions;
       },
     },
   },

app/assets/stylesheets/framework/buttons.scss

@@ -174,14 +174,6 @@
   }
 }
 
-.clone-dropdown-btn a {
-  color: $gray-700;
-
-  &:hover {
-    text-decoration: none;
-  }
-}
-
 .btn-inverted {
   &-secondary {
     @include btn-outline($white, $blue-500, $blue-500, $blue-100, $blue-700, $blue-500, $blue-200, $blue-600, $blue-800);