Add latest changes from gitlab-org/gitlab@master

Author: GitLab Bot

app/assets/javascripts/graphql_shared/issuable_client.js

@@ -80,6 +80,15 @@ export const config = {
           },
         },
       },
+      WorkItemWidgetHierarchy: {
+        fields: {
+          // If we add any key args, the children field becomes children({"first":10}) and
+          // kills any possibility to handle it on the widget level without hardcoding a string.
+          children: {
+            keyArgs: false,
+          },
+        },
+      },
       WorkItem: {
         fields: {
           // widgets policy because otherwise the subscriptions invalidate the cache

app/assets/javascripts/issues/show/components/description.vue

@@ -336,8 +336,7 @@ export default {
           update: (cache, { data: { workItemCreate } }) =>
             addHierarchyChild({
               cache,
-              fullPath: this.fullPath,
-              iid: this.issueIid,
+              id: convertToGraphQLId(TYPENAME_WORK_ITEM, this.issueId),
               workItem: workItemCreate.workItem,
             }),
         });
@@ -371,8 +370,7 @@ export default {
           update: (cache) =>
             removeHierarchyChild({
               cache,
-              fullPath: this.fullPath,
-              iid: this.issueIid,
+              id: convertToGraphQLId(TYPENAME_WORK_ITEM, this.issueId),
               workItem: { id },
             }),
         });

app/assets/javascripts/projects/components/project_delete_button.vue

@@ -1,5 +1,4 @@
 <script>
-import { __ } from '~/locale';
 import SharedDeleteButton from './shared/delete_button.vue';
 
 export default {
@@ -11,11 +10,6 @@ export default {
       type: String,
       required: true,
     },
-    buttonText: {
-      type: String,
-      required: false,
-      default: __('Delete project'),
-    },
     formPath: {
       type: String,
       required: true,
@@ -47,7 +41,6 @@ export default {
 <template>
   <shared-delete-button
     :confirm-phrase="confirmPhrase"
-    :button-text="buttonText"
     :form-path="formPath"
     :is-fork="isFork"
     :issues-count="issuesCount"

app/assets/javascripts/projects/components/shared/delete_button.vue

@@ -15,11 +15,6 @@ export default {
       type: String,
       required: true,
     },
-    buttonText: {
-      type: String,
-      required: false,
-      default: __('Delete project'),
-    },
     formPath: {
       type: String,
       required: true,
@@ -63,6 +58,9 @@ export default {
       this.isModalVisible = true;
     },
   },
+  i18n: {
+    deleteProject: __('Delete project'),
+  },
 };
 </script>
 
@@ -91,7 +89,7 @@ export default {
       variant="danger"
       data-testid="delete-button"
       @click="onButtonClick"
-      >{{ buttonText }}</gl-button
+      >{{ $options.i18n.deleteProject }}</gl-button
     >
   </gl-form>
 </template>

app/assets/javascripts/projects/project_delete_button.js

@@ -9,7 +9,6 @@ export default (selector = '#js-project-delete-button') => {
 
   const {
     confirmPhrase,
-    buttonText,
     formPath,
     isFork,
     issuesCount,
@@ -25,7 +24,6 @@ export default (selector = '#js-project-delete-button') => {
       return createElement(ProjectDeleteButton, {
         props: {
           confirmPhrase,
-          buttonText,
           formPath,
           isFork: parseBoolean(isFork),
           issuesCount: parseInt(issuesCount, 10),

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

@@ -33,7 +33,7 @@ import updateWorkItemMutation from '../graphql/update_work_item.mutation.graphql
 import groupWorkItemByIidQuery from '../graphql/group_work_item_by_iid.query.graphql';
 import workItemByIidQuery from '../graphql/work_item_by_iid.query.graphql';
 import getAllowedWorkItemChildTypes from '../graphql/work_item_allowed_children.query.graphql';
-import { findHierarchyWidgetChildren, findHierarchyWidgetDefinition } from '../utils';
+import { findHierarchyWidgetDefinition } from '../utils';
 
 import WorkItemTree from './work_item_links/work_item_tree.vue';
 import WorkItemActions from './work_item_actions.vue';
@@ -119,6 +119,7 @@ export default {
       isStickyHeaderShowing: false,
       editMode: false,
       draftData: {},
+      hasChildren: false,
     };
   },
   apollo: {
@@ -282,12 +283,6 @@ export default {
     workItemNotes() {
       return this.isWidgetPresent(WIDGET_TYPE_NOTES);
     },
-    children() {
-      return this.workItem ? findHierarchyWidgetChildren(this.workItem) : [];
-    },
-    hasChildren() {
-      return !isEmpty(this.children);
-    },
     workItemBodyClass() {
       return {
         'gl-pt-5': !this.updateError && !this.isModal,
@@ -672,13 +667,13 @@ export default {
               :parent-work-item-type="workItem.workItemType.name"
               :work-item-id="workItem.id"
               :work-item-iid="workItemIid"
-              :children="children"
               :can-update="canUpdate"
               :can-update-children="canUpdateChildren"
               :confidential="workItem.confidential"
               :allowed-child-types="allowedChildTypes"
               @show-modal="openInModal"
               @addChild="$emit('addChild')"
+              @childrenLoaded="hasChildren = $event"
             />
             <work-item-relationships
               v-if="workItemLinkedItems"

app/assets/javascripts/work_items/components/work_item_links/work_item_children_wrapper.vue

@@ -8,13 +8,14 @@ import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import { s__ } from '~/locale';
 import { defaultSortableOptions, DRAG_DELAY } from '~/sortable/constants';
 
-import { WORK_ITEM_TYPE_VALUE_OBJECTIVE } from '../../constants';
+import { WORK_ITEM_TYPE_VALUE_OBJECTIVE, DEFAULT_PAGE_SIZE_CHILD_ITEMS } from '../../constants';
 import { findHierarchyWidgets } from '../../utils';
 import { addHierarchyChild, removeHierarchyChild } from '../../graphql/cache_utils';
 import reorderWorkItem from '../../graphql/reorder_work_item.mutation.graphql';
 import updateWorkItemMutation from '../../graphql/update_work_item.mutation.graphql';
 import groupWorkItemByIidQuery from '../../graphql/group_work_item_by_iid.query.graphql';
 import workItemByIidQuery from '../../graphql/work_item_by_iid.query.graphql';
+import getWorkItemTreeQuery from '../../graphql/work_item_tree.query.graphql';
 import WorkItemLinkChild from './work_item_link_child.vue';
 
 export default {
@@ -97,9 +98,7 @@ export default {
           update: (cache) =>
             removeHierarchyChild({
               cache,
-              fullPath: this.fullPath,
-              iid: this.workItemIid,
-              isGroup: this.isGroup,
+              id: this.workItemId,
               workItem: child,
             }),
         });
@@ -130,9 +129,7 @@ export default {
           update: (cache) =>
             addHierarchyChild({
               cache,
-              fullPath: this.fullPath,
-              iid: this.workItemIid,
-              isGroup: this.isGroup,
+              id: this.workItemId,
               workItem: child,
             }),
         });
@@ -228,12 +225,12 @@ export default {
           update: (store) => {
             store.updateQuery(
               {
-                query: this.isGroup ? groupWorkItemByIidQuery : workItemByIidQuery,
-                variables: { fullPath: this.fullPath, iid: this.workItemIid },
+                query: getWorkItemTreeQuery,
+                variables: { id: this.workItemId, pageSize: DEFAULT_PAGE_SIZE_CHILD_ITEMS },
               },
               (sourceData) =>
                 produce(sourceData, (draftData) => {
-                  const { widgets } = draftData.workspace.workItem;
+                  const { widgets } = draftData.workItem;
                   const hierarchyWidget = findHierarchyWidgets(widgets);
                   hierarchyWidget.children.nodes = updatedChildren;
                 }),

app/assets/javascripts/work_items/components/work_item_links/work_item_link_child.vue

@@ -11,6 +11,7 @@ import {
   WIDGET_TYPE_HIERARCHY,
   WORK_ITEM_TYPE_VALUE_OBJECTIVE,
   WORK_ITEM_TYPE_VALUE_TASK,
+  DEFAULT_PAGE_SIZE_CHILD_ITEMS,
 } from '../../constants';
 import getWorkItemTreeQuery from '../../graphql/work_item_tree.query.graphql';
 import WorkItemLinkChildContents from '../shared/work_item_link_child_contents.vue';
@@ -138,6 +139,7 @@ export default {
           query: getWorkItemTreeQuery,
           variables: {
             id: this.childItem.id,
+            pageSize: DEFAULT_PAGE_SIZE_CHILD_ITEMS,
           },
         });
         this.children = this.getWidgetByType(data?.workItem, WIDGET_TYPE_HIERARCHY).children.nodes;

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

@@ -22,11 +22,11 @@ import {
   WORK_ITEM_STATUS_TEXT,
   I18N_WORK_ITEM_SHOW_LABELS,
   TASKS_ANCHOR,
+  DEFAULT_PAGE_SIZE_CHILD_ITEMS,
 } from '../../constants';
 import { findHierarchyWidgetChildren } from '../../utils';
 import { removeHierarchyChild } from '../../graphql/cache_utils';
-import groupWorkItemByIidQuery from '../../graphql/group_work_item_by_iid.query.graphql';
-import workItemByIidQuery from '../../graphql/work_item_by_iid.query.graphql';
+import getWorkItemTreeQuery from '../../graphql/work_item_tree.query.graphql';
 import WidgetWrapper from '../widget_wrapper.vue';
 import WorkItemDetailModal from '../work_item_detail_modal.vue';
 import WorkItemLinksForm from './work_item_links_form.vue';
@@ -62,19 +62,19 @@ export default {
   apollo: {
     workItem: {
       query() {
-        return this.isGroup ? groupWorkItemByIidQuery : workItemByIidQuery;
+        return getWorkItemTreeQuery;
       },
       variables() {
         return {
-          fullPath: this.fullPath,
-          iid: this.iid,
+          id: this.issuableGid,
+          pageSize: DEFAULT_PAGE_SIZE_CHILD_ITEMS,
         };
       },
       update(data) {
-        return data.workspace.workItem ?? {};
+        return data.workItem ?? {};
       },
       skip() {
-        return !this.iid;
+        return !this.issuableId;
       },
       error(e) {
         this.error = e.message || this.$options.i18n.fetchError;

app/assets/javascripts/work_items/components/work_item_links/work_item_links_form.vue

@@ -6,7 +6,7 @@ import WorkItemTokenInput from '../shared/work_item_token_input.vue';
 import { addHierarchyChild } from '../../graphql/cache_utils';
 import groupWorkItemTypesQuery from '../../graphql/group_work_item_types.query.graphql';
 import projectWorkItemTypesQuery from '../../graphql/project_work_item_types.query.graphql';
-import updateWorkItemMutation from '../../graphql/update_work_item.mutation.graphql';
+import updateWorkItemHierarchyMutation from '../../graphql/update_work_item_hierarchy.mutation.graphql';
 import createWorkItemMutation from '../../graphql/create_work_item.mutation.graphql';
 import {
   FORM_TYPES,
@@ -271,7 +271,7 @@ export default {
       this.submitInProgress = true;
       this.$apollo
         .mutate({
-          mutation: updateWorkItemMutation,
+          mutation: updateWorkItemHierarchyMutation,
           variables: {
             input: {
               id: this.issuableGid,
@@ -311,9 +311,7 @@ export default {
           update: (cache, { data }) =>
             addHierarchyChild({
               cache,
-              fullPath: this.fullPath,
-              iid: this.workItemIid,
-              isGroup: this.isGroup,
+              id: this.issuableGid,
               workItem: data.workItemCreate.workItem,
             }),
         })

app/assets/javascripts/work_items/components/work_item_links/work_item_tree.vue

@@ -1,5 +1,5 @@
 <script>
-import { GlToggle } from '@gitlab/ui';
+import { GlToggle, GlLoadingIcon } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
 import {
   FORM_TYPES,
@@ -12,7 +12,10 @@ import {
   WORK_ITEM_TYPE_ENUM_EPIC,
   I18N_WORK_ITEM_SHOW_LABELS,
   CHILD_ITEMS_ANCHOR,
+  DEFAULT_PAGE_SIZE_CHILD_ITEMS,
 } from '../../constants';
+import { findHierarchyWidgets } from '../../utils';
+import getWorkItemTreeQuery from '../../graphql/work_item_tree.query.graphql';
 import WidgetWrapper from '../widget_wrapper.vue';
 import WorkItemActionsSplitButton from './work_item_actions_split_button.vue';
 import WorkItemLinksForm from './work_item_links_form.vue';
@@ -31,6 +34,7 @@ export default {
     WorkItemChildrenWrapper,
     WorkItemTreeActions,
     GlToggle,
+    GlLoadingIcon,
   },
   inject: ['hasSubepicsFeature'],
   props: {
@@ -61,11 +65,6 @@ export default {
       required: false,
       default: false,
     },
-    children: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
     canUpdate: {
       type: Boolean,
       required: false,
@@ -92,6 +91,28 @@ export default {
       showLabels: true,
     };
   },
+  apollo: {
+    hierarchyWidget: {
+      query: getWorkItemTreeQuery,
+      variables() {
+        return {
+          id: this.workItemId,
+          pageSize: DEFAULT_PAGE_SIZE_CHILD_ITEMS,
+        };
+      },
+      skip() {
+        return !this.workItemId;
+      },
+      update({ workItem = {} }) {
+        const { children } = findHierarchyWidgets(workItem.widgets);
+        this.$emit('childrenLoaded', Boolean(children?.count));
+        return children || {};
+      },
+      error() {
+        this.error = s__('WorkItems|An error occurred while fetching children');
+      },
+    },
+  },
   computed: {
     childrenIds() {
       return this.children.map((c) => c.id);
@@ -135,6 +156,15 @@ export default {
     canShowActionsMenu() {
       return this.workItemType.toUpperCase() === WORK_ITEM_TYPE_ENUM_EPIC && this.workItemIid;
     },
+    children() {
+      return this.hierarchyWidget?.nodes || [];
+    },
+    isLoadingChildren() {
+      return this.$apollo.queries.hierarchyWidget.loading;
+    },
+    showEmptyMessage() {
+      return !this.isShownAddForm && this.children.length === 0 && !this.isLoadingChildren;
+    },
   },
   methods: {
     genericActionItems(workItem) {
@@ -206,7 +236,7 @@ export default {
     </template>
     <template #body>
       <div class="gl-new-card-content gl-px-0">
-        <div v-if="!isShownAddForm && children.length === 0" data-testid="tree-empty">
+        <div v-if="showEmptyMessage" data-testid="tree-empty">
           <p class="gl-new-card-empty">
             {{ $options.WORK_ITEMS_TREE_TEXT_MAP[workItemType].empty }}
           </p>
@@ -227,6 +257,7 @@ export default {
           @addChild="$emit('addChild')"
         />
         <work-item-children-wrapper
+          v-if="!isLoadingChildren"
           :children="children"
           :can-update="canUpdateChildren"
           :full-path="fullPath"
@@ -237,6 +268,7 @@ export default {
           @error="error = $event"
           @show-modal="showModal"
         />
+        <gl-loading-icon v-else size="md" />
       </div>
     </template>
   </widget-wrapper>