Move work item dev widget to main body and create MR and branch

What does this MR do and why?

Move work item dev widget to main body and add create entity

To give more context - since some decisions were made mid-milestone regarding placement of the dev widget , Create MR/branch from a work item (!172232 - closed) was scrapped midway.

Related issues

1. Move work item development widget to main body (#507749 - closed)
2. 🚀 Development Widget: Create MR from Developmen... (#477785 - closed)
3. 🚀 Development Widget: Create branch from dev wi... (#477531 - closed)

This MR covers the following :

header	header
Create Merge request split dropdown with the "add design" button in the main body
Movement of dev widget inside the main body
Add dropdown in the dev widget to create branch and MR
Options dropdown in MR item and branch item

App

References

Please include cross links to any resources that are relevant to this MR. This will give reviewers and future readers helpful context to give an efficient review of the changes introduced.

MR acceptance checklist

• Do not show dev widget when empty
• Do not show create branch/MR when work_items_alpha is off since it also touches "production tasks"
• The new CTA's are behind work_items_alpha
• Show tooltip on truncate MR long name
• Truncate long name of branches
• Make sure the create CTA split button in main body is available only on work items with dev widget (for example not available on epics but only issues and tasks)
• The tooltip in dev widget is available when we have closing merge requests which will autoclose the work item
• The main body create MR is not available when the ability to create branches does not exist
• [ ]

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

How to set up and validate locally

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

1. In rails console enable the FF

   Feature.enable(:work_items_alpha)

2. Create any issue/task with new issue look on , and see that you are not able to see the dev widget in the main body
3. Create a branch with the split button in the main body and see you that can the dev widget with the branch in the main body(real time update not available right now)
4. Create any MR for the issue/task and write "Resolves #id" in the description, come back to the issue and see the MR
5. You can also try linking the issue with any feature flag and see that pop up in the main body

See that there is no regression when the work_items_alpha is off and production tasks

Related to #427975 (closed) Resolves #477785 (closed) Resolves #477531 (closed) Resolves #507749 (closed)

app/assets/javascripts/work_items/components/work_item_development/work_item_development_mr_item.vue

@@ -116,50 +116,54 @@ export default {
 };
 </script>
 <template>
-  <div class="item-contents flex-xl-nowrap gl-flex gl-grow gl-flex-wrap gl-items-center gl-gap-2">
-    <div class="item-title gl-flex gl-min-w-0 gl-gap-3">
-      <gl-icon name="merge-request" :size="16" variant="default" class="gl-shrink-0" />
-      <gl-link
-        v-tooltip-on-truncate
-        :href="itemContent.webUrl"
-        class="gl-truncate gl-font-semibold gl-text-gray-900 hover:gl-text-gray-900 hover:gl-underline"
-      >
-        {{ itemContent.title }}
-      </gl-link>
-    </div>
-    <div class="item-info-area gl-flex gl-shrink-0 gl-grow gl-gap-3">
-      <div class="item-meta gl-flex gl-flex-wrap-reverse gl-gap-3">
-        <div class="item-path-area item-path-id gl-flex gl-flex-wrap gl-items-center gl-gap-3">
-          <span class="gl-font-sm gl-text-subtle"> !{{ itemContent.iid }} </span>
-        </div>
-        <div class="item-attributes-area gl-flex gl-items-center gl-gap-3">
-          <item-milestone
-            v-if="milestone"
-            :milestone="milestone"
-            class="gl-hidden gl-cursor-help gl-text-gray-500 sm:gl-block"
-          />
-          <div
-            class="item-assignees order-md-2 gl-flex gl-shrink-0 gl-items-center gl-gap-2 gl-self-end"
-          >
-            <gl-badge v-if="isMergedOrClosed" :variant="stateBadgeVariant">
-              {{ stateBadgeLabel }}
-            </gl-badge>
-            <ci-icon v-if="detailedStatus" :status="detailedStatus" />
-            <gl-avatars-inline
-              v-if="assignees.length"
-              :avatars="assignees"
-              collapsed
-              :max-visible="2"
-              :avatar-size="16"
-              badge-tooltip-prop="name"
-              :badge-sr-only-text="assigneesCollapsedTooltip"
+  <div class="gl-flex gl-w-full gl-justify-between">
+    <div
+      class="item-contents flex-xl-nowrap gl-flex gl-w-19/20 gl-flex-wrap gl-items-center gl-justify-between gl-gap-2"
+    >
+      <div class="item-title gl-flex gl-min-w-0 gl-gap-3">
+        <gl-icon name="merge-request" :size="16" variant="default" class="gl-shrink-0" />
+        <gl-link
+          v-tooltip-on-truncate
+          :href="itemContent.webUrl"
+          class="gl-truncate gl-font-semibold gl-text-gray-900 hover:gl-text-gray-900 hover:gl-underline"
+        >
+          {{ itemContent.title }}
+        </gl-link>
+      </div>
+      <div class="item-info-area gl-flex gl-shrink-0 gl-grow gl-gap-3">
+        <div class="item-meta gl-flex gl-flex-wrap-reverse gl-gap-3 sm:gl-justify-between">
+          <div class="item-path-area item-path-id gl-flex gl-flex-wrap gl-items-center gl-gap-3">
+            <span class="gl-font-sm gl-text-subtle"> !{{ itemContent.iid }} </span>
+            <item-milestone
+              v-if="milestone"
+              :milestone="milestone"
+              class="gl-hidden gl-cursor-help gl-text-gray-500 sm:gl-block"
+            />
+          </div>
+          <div class="item-attributes-area gl-flex gl-items-center gl-gap-3">
+            <div
+              class="item-assignees order-md-2 gl-flex gl-shrink-0 gl-items-center gl-gap-2 gl-self-end"
             >
-              <template #avatar="{ avatar }">
-                <gl-avatar-link v-gl-tooltip :href="avatar.webUrl" :title="avatar.name">
-                  <gl-avatar :alt="avatar.name" :src="avatar.avatarUrl" :size="16" />
-                </gl-avatar-link>
-              </template>
-            </gl-avatars-inline>
+              <gl-badge v-if="isMergedOrClosed" :variant="stateBadgeVariant">
+                {{ stateBadgeLabel }}
+              </gl-badge>
+              <ci-icon v-if="detailedStatus" :status="detailedStatus" />
+              <gl-avatars-inline
+                v-if="assignees.length"
+                :avatars="assignees"
+                collapsed
+                :max-visible="2"
+                :avatar-size="16"
+                badge-tooltip-prop="name"
+                :badge-sr-only-text="assigneesCollapsedTooltip"
+              >
+                <template #avatar="{ avatar }">
+                  <gl-avatar-link v-gl-tooltip :href="avatar.webUrl" :title="avatar.name">
+                    <gl-avatar :alt="avatar.name" :src="avatar.avatarUrl" :size="16" />
+                  </gl-avatar-link>
+                </template>
+              </gl-avatars-inline>
+            </div>
           </div>
         </div>
       </div>
@@ -169,7 +173,7 @@ export default {
       v-gl-tooltip
       icon="ellipsis_v"
       size="small"
-      class="order-sm-1 -gl-mr-2"
+      class="sm:gl-max-w-11/12 -gl-mr-2 gl-grow-0 sm:gl-block sm:gl-align-top"
       data-testid="work-item-mr-actions-dropdown"
       text-sr-only
       :toggle-text="__('More actions')"