Add latest changes from gitlab-org/gitlab@master

Author: GitLab Bot

.eslintrc.yml

@@ -244,3 +244,11 @@ overrides:
       - 'ee/app/assets/javascripts/projects/settings/repository/branch_rules/graphql/queries/branch_rules.query.graphql'
     rules:
       '@graphql-eslint/require-id-when-available': off
+  - files:
+      - '{,spec/}tooling/**/*'
+    rules:
+      'no-undef': off
+      'import/no-commonjs': off
+      'import/no-extraneous-dependencies': off
+      'no-restricted-syntax': off
+      '@gitlab/require-i18n-strings': off

.rubocop_todo/rspec/context_wording.yml

@@ -2078,7 +2078,6 @@ RSpec/ContextWording:
     - 'spec/models/packages/dependency_spec.rb'
     - 'spec/models/packages/package_file_spec.rb'
     - 'spec/models/packages/package_spec.rb'
-    - 'spec/models/pages_domain_spec.rb'
     - 'spec/models/personal_access_token_spec.rb'
     - 'spec/models/plan_limits_spec.rb'
     - 'spec/models/preloaders/labels_preloader_spec.rb'

.rubocop_todo/rspec/named_subject.yml

@@ -2648,7 +2648,6 @@ RSpec/NamedSubject:
     - 'spec/models/packages/package_file_spec.rb'
     - 'spec/models/packages/package_spec.rb'
     - 'spec/models/packages/rpm/repository_file_spec.rb'
-    - 'spec/models/pages_domain_spec.rb'
     - 'spec/models/personal_access_token_spec.rb'
     - 'spec/models/plan_limits_spec.rb'
     - 'spec/models/project_authorization_spec.rb'

.rubocop_todo/rspec/return_from_stub.yml

@@ -143,7 +143,6 @@ RSpec/ReturnFromStub:
     - 'spec/models/internal_id_spec.rb'
     - 'spec/models/issue_spec.rb'
     - 'spec/models/merge_request_spec.rb'
-    - 'spec/models/pages_domain_spec.rb'
     - 'spec/models/project_spec.rb'
     - 'spec/models/project_statistics_spec.rb'
     - 'spec/models/snippet_statistics_spec.rb'

.stylelintrc

@@ -1,18 +1,32 @@
 {
-   "extends": ["@gitlab/stylelint-config"],
-   "ignoreFiles": [
-     "app/assets/stylesheets/pages/emojis.scss",
-     "app/assets/stylesheets/startup/startup-*.scss",
-     "ee/app/assets/stylesheets/startup/startup-*.scss",
-     "app/assets/stylesheets/highlight/themes/*.scss",
-     "app/assets/stylesheets/lazy_bundles/cropper.css"
-   ],
-   "overrides": [
+  "extends": ["@gitlab/stylelint-config"],
+  "plugins": ["./tooling/stylelint/gitlab_no_gl_class.plugin.js"],
+  "rules": {
+    "gitlab/no-gl-class": true
+  },
+  "ignoreFiles": [
+    "app/assets/stylesheets/pages/emojis.scss",
+    "app/assets/stylesheets/startup/startup-*.scss",
+    "ee/app/assets/stylesheets/startup/startup-*.scss",
+    "app/assets/stylesheets/highlight/themes/*.scss",
+    "app/assets/stylesheets/lazy_bundles/cropper.css"
+  ],
+  "overrides": [
     {
       "files": ["app/assets/stylesheets/mailers/mailer.scss"],
       "rules": {
         "color-hex-length": "long"
       }
+    },
+    {
+      "files": [
+        "app/assets/stylesheets/framework/**/*.scss",
+        "app/assets/stylesheets/themes/dark_mode_overrides.scss",
+        "app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss"
+      ],
+      "rules": {
+        "gitlab/no-gl-class": null
+      }
     }
-   ]
+  ]
 }

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

@@ -5,32 +5,50 @@ import produce from 'immer';
 import Draggable from 'vuedraggable';
 import BoardAddNewColumn from 'ee_else_ce/boards/components/board_add_new_column.vue';
 import BoardAddNewColumnTrigger from '~/boards/components/board_add_new_column_trigger.vue';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import WorkItemDrawer from '~/work_items/components/work_item_drawer.vue';
 import { s__ } from '~/locale';
 import { defaultSortableOptions, DRAG_DELAY } from '~/sortable/constants';
+import { mapWorkItemWidgetsToIssueFields } from '~/issues/list/utils';
 import {
   DraggableItemTypes,
   flashAnimationDuration,
   listsQuery,
   updateListQueries,
   ListType,
+  listIssuablesQueries,
+  DEFAULT_BOARD_LIST_ITEMS_SIZE,
 } from 'ee_else_ce/boards/constants';
 import { calculateNewPosition } from 'ee_else_ce/boards/boards_util';
 import { setError } from '../graphql/cache_updates';
 import BoardColumn from './board_column.vue';
+import BoardDrawerWrapper from './board_drawer_wrapper.vue';
 
 export default {
   draggableItemTypes: DraggableItemTypes,
   components: {
     BoardAddNewColumn,
     BoardAddNewColumnTrigger,
     BoardColumn,
+    BoardDrawerWrapper,
     BoardContentSidebar: () => import('~/boards/components/board_content_sidebar.vue'),
     EpicBoardContentSidebar: () =>
       import('ee_component/boards/components/epic_board_content_sidebar.vue'),
     EpicsSwimlanes: () => import('ee_component/boards/components/epics_swimlanes.vue'),
     GlAlert,
+    WorkItemDrawer,
   },
-  inject: ['boardType', 'canAdminList', 'isIssueBoard', 'isEpicBoard', 'disabled', 'issuableType'],
+  mixins: [glFeatureFlagsMixin()],
+  inject: [
+    'boardType',
+    'canAdminList',
+    'isIssueBoard',
+    'isEpicBoard',
+    'disabled',
+    'issuableType',
+    'isGroupBoard',
+    'fullPath',
+  ],
   props: {
     boardId: {
       type: String,
@@ -108,6 +126,9 @@ export default {
       const closedList = this.boardListsToUse.find((list) => list.listType === ListType.closed);
       return closedList?.id || '';
     },
+    issuesDrawerEnabled() {
+      return this.glFeatures.issuesListDrawer;
+    },
   },
   methods: {
     afterFormEnters() {
@@ -193,6 +214,24 @@ export default {
         });
       }
     },
+    updateBoardCard(workItem, activeCard) {
+      const { cache } = this.$apollo.provider.clients.defaultClient;
+
+      const variables = {
+        id: activeCard.listId,
+        filters: this.filterParams,
+        fullPath: this.fullPath,
+        boardId: this.boardId,
+        isGroup: this.isGroupBoard,
+        isProject: !this.isGroupBoard,
+        first: DEFAULT_BOARD_LIST_ITEMS_SIZE,
+      };
+
+      cache.updateQuery(
+        { query: listIssuablesQueries[this.issuableType].query, variables },
+        (boardList) => mapWorkItemWidgetsToIssueFields(boardList, workItem, true),
+      );
+    },
   },
 };
 </script>
@@ -283,9 +322,34 @@ export default {
         />
       </div>
     </epics-swimlanes>
+    <board-drawer-wrapper
+      v-if="issuesDrawerEnabled"
+      :backlog-list-id="backlogListId"
+      :closed-list-id="closedListId"
+    >
+      <template
+        #default="{
+          activeIssuable,
+          onDrawerClosed,
+          onAttributeUpdated,
+          onIssuableDeleted,
+          onStateUpdated,
+        }"
+      >
+        <work-item-drawer
+          :open="Boolean(activeIssuable && activeIssuable.iid)"
+          :active-item="activeIssuable"
+          @close="onDrawerClosed"
+          @work-item-updated="updateBoardCard($event, activeIssuable)"
+          @workItemDeleted="onIssuableDeleted(activeIssuable)"
+          @attributesUpdated="onAttributeUpdated"
+          @workItemStateUpdated="onStateUpdated"
+        />
+      </template>
+    </board-drawer-wrapper>
 
     <board-content-sidebar
-      v-if="isIssueBoard"
+      v-if="isIssueBoard && !issuesDrawerEnabled"
       :backlog-list-id="backlogListId"
       :closed-list-id="closedListId"
       data-testid="issue-boards-sidebar"

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

@@ -0,0 +1,134 @@
+<script>
+import { union } from 'lodash';
+import activeBoardItemQuery from 'ee_else_ce/boards/graphql/client/active_board_item.query.graphql';
+import setActiveBoardItemMutation from 'ee_else_ce/boards/graphql/client/set_active_board_item.mutation.graphql';
+import { TYPE_ISSUE } from '~/issues/constants';
+import { ListType } from 'ee_else_ce/boards/constants';
+import { identifyAffectedLists } from '../graphql/cache_updates';
+
+export default {
+  name: 'BoardDrawerWrapper',
+  inject: {
+    issuableType: {
+      default: TYPE_ISSUE,
+    },
+  },
+  props: {
+    backlogListId: {
+      type: String,
+      required: true,
+    },
+    closedListId: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      affectedListTypes: [],
+      updatedAttributeIds: [],
+    };
+  },
+  apollo: {
+    activeBoardItem: {
+      query: activeBoardItemQuery,
+      variables: {
+        isIssue: true,
+      },
+    },
+  },
+  computed: {
+    apolloClient() {
+      return this.$apollo.getClient();
+    },
+  },
+  methods: {
+    async onDrawerClosed() {
+      const item = this.activeBoardItem;
+
+      await this.$apollo.mutate({
+        mutation: setActiveBoardItemMutation,
+        variables: {
+          boardItem: null,
+          listId: null,
+        },
+      });
+
+      if (item.listId !== this.closedListId || this.affectedListTypes.includes(ListType.closed)) {
+        await this.refetchAffectedLists(item);
+      }
+      this.affectedListTypes = [];
+      this.updatedAttributeIds = [];
+    },
+    onAttributeUpdated({ ids, type }) {
+      if (!this.affectedListTypes.includes(type)) {
+        this.affectedListTypes.push(type);
+      }
+      this.updatedAttributeIds = union(this.updatedAttributeIds, ids);
+    },
+    refetchAffectedLists(item) {
+      if (!this.affectedListTypes.length) {
+        return;
+      }
+
+      const affectedLists = identifyAffectedLists({
+        client: this.apolloClient,
+        item,
+        issuableType: TYPE_ISSUE,
+        affectedListTypes: this.affectedListTypes,
+        updatedAttributeIds: this.updatedAttributeIds,
+      });
+
+      if (this.backlogListId && !affectedLists.includes(this.backlogListId)) {
+        affectedLists.push(this.backlogListId);
+      }
+
+      if (this.closedListId && this.affectedListTypes.includes(ListType.closed)) {
+        affectedLists.push(this.closedListId);
+      }
+
+      this.refetchActiveIssuableLists(item);
+
+      this.apolloClient.refetchQueries({
+        updateCache(cache) {
+          affectedLists.forEach((listId) => {
+            cache.evict({
+              id: cache.identify({
+                __typename: 'BoardList',
+                id: listId,
+              }),
+              fieldName: 'issues',
+            });
+            cache.evict({
+              id: cache.identify({
+                __typename: 'BoardList',
+                id: listId,
+              }),
+              fieldName: 'issuesCount',
+            });
+          });
+        },
+      });
+    },
+    refetchActiveIssuableLists(item) {
+      this.apolloClient.refetchQueries({
+        updateCache(cache) {
+          cache.evict({ id: cache.identify(item) });
+        },
+      });
+    },
+    onStateUpdated() {
+      this.affectedListTypes.push(ListType.closed);
+    },
+  },
+  render() {
+    return this.$scopedSlots.default({
+      activeIssuable: this.activeBoardItem,
+      onDrawerClosed: this.onDrawerClosed,
+      onAttributeUpdated: this.onAttributeUpdated,
+      onIssuableDeleted: this.refetchActiveIssuableLists,
+      onStateUpdated: this.onStateUpdated,
+    });
+  },
+};
+</script>

app/assets/javascripts/boards/index.js

@@ -22,7 +22,15 @@ const apolloProvider = new VueApollo({
 });
 
 function mountBoardApp(el) {
-  const { boardId, groupId, fullPath, rootPath, hasScopedLabelsFeature } = el.dataset;
+  const {
+    boardId,
+    groupId,
+    fullPath,
+    rootPath,
+    hasScopedLabelsFeature,
+    wiGroupPath,
+    wiCanAdminLabel,
+  } = el.dataset;
 
   const rawFilterParams = queryToObject(window.location.search, { gatherArrays: true });
 
@@ -43,9 +51,11 @@ function mountBoardApp(el) {
       groupId: Number(groupId),
       rootPath,
       fullPath,
+      groupPath: wiGroupPath,
       initialFilterParams,
       boardBaseUrl: el.dataset.boardBaseUrl,
       boardType,
+      isGroup: boardType === WORKSPACE_GROUP,
       isGroupBoard: boardType === WORKSPACE_GROUP,
       isProjectBoard: boardType === WORKSPACE_PROJECT,
       currentUserId: gon.current_user_id || null,
@@ -60,13 +70,16 @@ function mountBoardApp(el) {
       weights: el.dataset.weights ? JSON.parse(el.dataset.weights) : [],
       isIssueBoard: true,
       isEpicBoard: false,
+      reportAbusePath: el.dataset.wiReportAbusePath,
+      issuesListPath: el.dataset.wiIssuesListPath,
       // Permissions
       canUpdate: parseBoolean(el.dataset.canUpdate),
       canAdminList: parseBoolean(el.dataset.canAdminList),
       canAdminBoard: parseBoolean(el.dataset.canAdminBoard),
       allowLabelCreate: parseBoolean(el.dataset.canUpdate),
       allowLabelEdit: parseBoolean(el.dataset.canUpdate),
       isSignedIn: isLoggedIn(),
+      canAdminLabel: parseBoolean(wiCanAdminLabel),
       // Features
       multipleAssigneesFeatureAvailable: parseBoolean(el.dataset.multipleAssigneesFeatureAvailable),
       epicFeatureAvailable: parseBoolean(el.dataset.epicFeatureAvailable),
@@ -83,6 +96,10 @@ function mountBoardApp(el) {
       scopedIssueBoardFeatureEnabled: parseBoolean(el.dataset.scopedIssueBoardFeatureEnabled),
       allowSubEpics: false,
       hasScopedLabelsFeature: parseBoolean(hasScopedLabelsFeature),
+      hasIterationsFeature: parseBoolean(el.dataset.iterationFeatureAvailable),
+      hasIssueWeightsFeature: parseBoolean(el.dataset.weightFeatureAvailable),
+      hasIssuableHealthStatusFeature: parseBoolean(el.dataset.healthStatusFeatureAvailable),
+      hasSubepicsFeature: parseBoolean(el.dataset.subEpicsFeatureAvailable),
     },
     render: (createComponent) => createComponent(BoardApp),
   });