Add iteration support for work items

What does this MR do and why?

This MR adds the work items iterations widget, using the UI mockups #367456 (designs)

Screenshots or screen recordings

Screenshots	Screenshots

How to set up and validate locally

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

1. Enable the feature flag

   Feature.enable(:work_items)
   Feature.enable(:work_items_mvc_2)

2. Make sure you are on the ee version of GitLab to check the iteration capability of work items
3. Open any issue without any iteration
4. Create a task from the issue(by click the add button from the tasks section of the issue)
5. Now Open the task in the modal/full view , see that no iteration is associated with the task
6. Now try to manually edit the iteration by choosing from the list when you focus on the input
7. See that the iteration is assigned to the task
8. Try creating the a new task from an issue already having an iteration associated with it
9. check that the task created has the iteration of the parent ( in this case issue )
10. You can also manually edit the iteration even when it is already associated with the task on. creation

MR acceptance checklist

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

• Check for canUpdate of iteration - different text
• mobile version of the view
• Check the /new route version for work_items - created without any parent , no iteration associated

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

@@ -8,6 +8,7 @@ import { TYPE_WORK_ITEM } from '~/graphql_shared/constants';
 import issueConfidentialQuery from '~/sidebar/queries/issue_confidential.query.graphql';
 import { isMetaKey } from '~/lib/utils/common_utils';
 import { setUrlParams, updateHistory } from '~/lib/utils/url_utility';
+import projectIssueIterationQuery from 'ee/sidebar/queries/project_issue_iteration.query.graphql';
 
 import { WIDGET_ICONS, WORK_ITEM_STATUS_TEXT, WIDGET_TYPE_HIERARCHY } from '../../constants';
 import getWorkItemLinksQuery from '../../graphql/work_item_links.query.graphql';
@@ -70,6 +71,18 @@ export default {
         return data.workspace?.issuable;
       },
     },
+    iteration: {
+      query: projectIssueIterationQuery,
+      variables() {
+        return {
+          fullPath: this.projectPath,
+          iid: String(this.iid),
+        };
+      },
+      update(data) {
+        return data.workspace?.issuable;
+      },
+    },
   },
   data() {
     return {
@@ -117,6 +130,9 @@ export default {
     childrenCountLabel() {
       return this.isLoading && this.children.length === 0 ? '...' : this.children.length;
     },
+    issuableIteration() {
+      return this.iteration?.attribute;
+    },
   },
   methods: {
     toggle() {
@@ -305,6 +321,7 @@ export default {
           :issuable-gid="issuableGid"
           :children-ids="childrenIds"
           :parent-confidential="confidential"
+          :issuable-iteration="issuableIteration"
           @cancel="hideAddForm"
           @addWorkItemChild="addChild"
         />