Add support for viewing and creating objectives within an objective in a hierarchy tree

What does this MR do and why?

This MR adds ability to view children Objectives and Key Results within an Objective created under a project, it also allows for creating or adding an existing objective from the hierarchy tree view.

Limitations

The tree view currently doesn't support creating or adding Key Result, it will be added once #381833 (closed) & #385084 (closed) are addressed.

Screenshots or screen recordings

Tree View Empty State	Tree View with Objectives

Objective with Indirect Children	Objective with NO Indirect Children

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

1. Open rails console by running bin/rails console within GDK directory.
2. Enable the feature flag :hierarchy_db_restrictions on a project; Feature.enable(:hierarchy_db_restrictions, Project.find_by_full_path('gitlab-org/gitlab-test')).
3. Enable the feature flag :okrs_mvc on the same project; Feature.enable(:okrs_mvc, Project.find_by_full_path('gitlab-org/gitlab-test')).
4. Visit issues list page for the project by navigating to http://gdk.test:3000/gitlab-org/gitlab-test/-/issues.
5. Create an objective by clicking on dropdown button next to New issue and selecting New objective from the dropdown.
6. Once objective is created, click on it to visit its Work Item page, you should be able to see Tree View below the description.
7. Use Add dropdown button create/add objectives.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

Related Issues

#381872 (closed)

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

 <script>
-import { GlButton, GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { GlButton, GlIcon, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
 
 import { __ } from '~/locale';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import RichTimestampTooltip from '~/vue_shared/components/rich_timestamp_tooltip.vue';
 
-import { STATE_OPEN } from '../../constants';
+import { STATE_OPEN, WORK_ITEM_TYPE_VALUE_OBJECTIVE, WIDGET_TYPE_HIERARCHY } from '../../constants';
+import getWorkItemTreeQuery from '../../graphql/work_item_tree.query.graphql';
 import WorkItemLinksMenu from './work_item_links_menu.vue';
+import WorkItemTreeChildren from './work_item_tree_children.vue';
 
 export default {
   components: {
     GlButton,
     GlIcon,
+    GlLoadingIcon,
     RichTimestampTooltip,
     WorkItemLinksMenu,
+    WorkItemTreeChildren,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -35,16 +39,29 @@ export default {
       type: Object,
       required: true,
     },
+    workItemType: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      isExpanded: false,
+      children: [],
+      isLoadingChildren: false,
+    };
   },
   computed: {
+    canHaveChildren() {
+      return this.workItemType === WORK_ITEM_TYPE_VALUE_OBJECTIVE;
+    },
     isItemOpen() {
       return this.childItem.state === STATE_OPEN;
     },
-    iconClass() {
-      return this.isItemOpen ? 'gl-text-green-500' : 'gl-text-blue-500';
-    },
     iconName() {
-      return this.isItemOpen ? 'issue-open-m' : 'issue-close';
+      const { iconName } = this.childItem.workItemType;
+      return iconName === 'issue-type-keyresult' ? 'issue-type-key-result' : iconName;
     },
     stateTimestamp() {
       return this.isItemOpen ? this.childItem.createdAt : this.childItem.closedAt;
@@ -55,55 +72,120 @@ export default {
     childPath() {
       return `/${this.projectPath}/-/work_items/${getIdFromGraphQLId(this.childItem.id)}`;
     },
+    hasChildren() {
+      const widgetHierarchy = this.childItem?.widgets?.find(
+        (widget) => widget.type === WIDGET_TYPE_HIERARCHY,
+      );
+      return widgetHierarchy?.hasChildren;
+    },
+    chevronType() {
+      return this.isExpanded ? 'chevron-down' : 'chevron-right';
+    },
+    chevronTooltip() {
+      return this.isExpanded ? __('Collapse') : __('Expand');
+    },
+  },
+  methods: {
+    toggleItem() {
+      this.isExpanded = !this.isExpanded;
+      this.fetchChildren();
+    },
+    async fetchChildren() {
+      this.isLoadingChildren = true;
+      const { data } = await this.$apollo.query({
+        query: getWorkItemTreeQuery,
+        variables: {
+          id: this.childItem.id,
+        },
+      });
+      const widgetHierarchy = data?.workItem?.widgets.find(
+        (widget) => widget.type === WIDGET_TYPE_HIERARCHY,
+      );
+      this.children = widgetHierarchy.children.nodes;
+      this.isLoadingChildren = false;
+    },
   },
 };
 </script>
 
 <template>
-  <div
-    class="gl-relative gl-display-flex gl-overflow-break-word gl-min-w-0 gl-bg-white gl-mb-3 gl-py-3 gl-px-4 gl-border gl-border-gray-100 gl-rounded-base gl-line-height-32"
-    data-testid="links-child"
-  >
-    <div class="gl-overflow-hidden gl-display-flex gl-align-items-center gl-flex-grow-1">
-      <span :id="`stateIcon-${childItem.id}`" class="gl-mr-3" data-testid="item-status-icon">
-        <gl-icon :name="iconName" :class="iconClass" :aria-label="stateTimestampTypeText" />
-      </span>
-      <rich-timestamp-tooltip
-        :target="`stateIcon-${childItem.id}`"
-        :raw-timestamp="stateTimestamp"
-        :timestamp-type-text="stateTimestampTypeText"
-      />
-      <gl-icon
-        v-if="childItem.confidential"
-        v-gl-tooltip.top
-        name="eye-slash"
-        class="gl-mr-2 gl-text-orange-500"
-        data-testid="confidential-icon"
-        :aria-label="__('Confidential')"
-        :title="__('Confidential')"
-      />
+  <div>
+    <div
+      class="gl-display-flex gl-align-items-center gl-mb-3"
+      :class="{ 'gl-ml-5': canHaveChildren && !hasChildren }"
+    >
       <gl-button
-        :href="childPath"
-        category="tertiary"
+        v-if="hasChildren && !isLoadingChildren"
+        v-gl-tooltip.viewport.hover
+        :title="chevronTooltip"
+        :aria-label="chevronTooltip"
+        :class="chevronType"
         variant="link"
-        class="gl-text-truncate gl-max-w-80 gl-text-black-normal!"
-        @click="$emit('click', $event)"
-        @mouseover="$emit('mouseover')"
-        @mouseout="$emit('mouseout')"
+        class="gl-text-gray-900! gl-hover-text-blue-600! gl-hover-bg-gray-50!"
+        data-testid="expand-child"
+        @click="toggleItem"
       >
-        {{ childItem.title }}
+        <gl-icon :name="chevronType" />
       </gl-button>
+      <gl-loading-icon v-if="isLoadingChildren" class="gl-mr-1" size="sm" />
+      <div
+        class="gl-relative gl-display-flex gl-flex-grow-1 gl-overflow-break-word gl-min-w-0 gl-bg-white gl-py-3 gl-px-4 gl-border gl-border-gray-100 gl-rounded-base gl-line-height-32"
+        data-testid="links-child"
+      >
+        <div class="gl-overflow-hidden gl-display-flex gl-align-items-center gl-flex-grow-1">
+          <span :id="`stateIcon-${childItem.id}`" class="gl-mr-3" data-testid="item-status-icon">
+            <gl-icon
+              class="gl-text-secondary"
+              :name="iconName"
+              :aria-label="stateTimestampTypeText"
+            />
+          </span>
+          <rich-timestamp-tooltip
+            :target="`stateIcon-${childItem.id}`"
+            :raw-timestamp="stateTimestamp"
+            :timestamp-type-text="stateTimestampTypeText"
+          />
+          <gl-icon
+            v-if="childItem.confidential"
+            v-gl-tooltip.top
+            name="eye-slash"
+            class="gl-mr-2 gl-text-orange-500"
+            data-testid="confidential-icon"
+            :aria-label="__('Confidential')"
+            :title="__('Confidential')"
+          />
+          <gl-button
+            :href="childPath"
+            category="tertiary"
+            variant="link"
+            class="gl-text-truncate gl-max-w-80 gl-text-black-normal!"
+            @click="$emit('click', $event)"
+            @mouseover="$emit('mouseover')"
+            @mouseout="$emit('mouseout')"
+          >
+            {{ childItem.title }}
+          </gl-button>
+        </div>
+        <div
+          v-if="canUpdate"
+          class="gl-ml-0 gl-sm-ml-auto! gl-display-inline-flex gl-align-items-center"
+        >
+          <work-item-links-menu
+            :work-item-id="childItem.id"
+            :parent-work-item-id="issuableGid"
+            data-testid="links-menu"
+            @removeChild="$emit('remove', childItem.id)"
+          />
+        </div>
+      </div>
     </div>
-    <div
-      v-if="canUpdate"
-      class="gl-ml-0 gl-sm-ml-auto! gl-display-inline-flex gl-align-items-center"
-    >
-      <work-item-links-menu
-        :work-item-id="childItem.id"
-        :parent-work-item-id="issuableGid"
-        data-testid="links-menu"
-        @removeChild="$emit('remove', childItem.id)"
-      />
-    </div>
+    <work-item-tree-children
+      v-if="isExpanded"
+      :project-path="projectPath"
+      :can-update="canUpdate"
+      :work-item-id="issuableGid"
+      :work-item-type="workItemType"
+      :children="children"
+    />
   </div>
 </template>