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

changed milestone to %17.7

added Category:Team Planning devopsplan groupproject management missed:16.10 missed:16.8 missed:16.9 sectiondev typefeature workflowsolution validation labels

assigned to @deepika.guliani

added pipelinetier-1 label

mentioned in issue #427975 (closed)

added frontend label

	9 Warnings
	This merge request is quite big (1907 lines changed), please consider splitting it into multiple merge requests.
	ffbad81b: Commits that change 30 or more lines across at least 3 files should describe these changes in the commit body. For more information, take a look at our Commit message guidelines.
	ef6864f1: Commits that change 30 or more lines across at least 3 files should describe these changes in the commit body. For more information, take a look at our Commit message guidelines.
	711b2f3d: Commits that change 30 or more lines across at least 3 files should describe these changes in the commit body. For more information, take a look at our Commit message guidelines.
	e36be451: Commits that change 30 or more lines across at least 3 files should describe these changes in the commit body. For more information, take a look at our Commit message guidelines.
	f03b965e: Commits that change 30 or more lines across at least 3 files should describe these changes in the commit body. For more information, take a look at our Commit message guidelines.
	85adc3da: Commits that change 30 or more lines across at least 3 files should describe these changes in the commit body. For more information, take a look at our Commit message guidelines.
	This merge request changed files with disabled eslint rules. Please consider fixing them.
	This merge request contains lines with testid selectors. Please ensure `e2e:test-on-omnibus` job is run.

Disabled eslint rules

The following files have disabled eslint rules. Please consider fixing them:

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

Run the following command for more details

node_modules/.bin/eslint --report-unused-disable-directives --no-inline-config \
  'app/assets/javascripts/work_items/components/work_item_development/work_item_create_branch_merge_request_modal.vue'

`testid` selectors

The following changed lines in this MR contain testid selectors:

`app/assets/javascripts/work_items/components/work_item_development/work_item_create_branch_merge_request_split_button.vue`

+            'data-testid': 'create-mr-dropdown-button',
+            'data-testid': 'create-branch-dropdown-button',
+      <gl-disclosure-dropdown placement="bottom-end" data-testid="create-options-dropdown">

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

+                'data-testid': 'create-mr-dropdown-button',
+                'data-testid': 'create-branch-dropdown-button',
-        data-testid="dev-widget-label"
+      data-testid="work-item-development"
-        data-testid="add-item"
-        <gl-button category="secondary" size="small" data-testid="create-mr-button">{{
-        <gl-button category="tertiary" size="small" data-testid="create-branch-button">{{
+          data-testid="create-options-dropdown"

`app/assets/javascripts/work_items/components/work_item_development/work_item_development_branch_item.vue`

+      data-testid="work-item-branch-actions-dropdown"
+        data-testid="branch-copy-name"

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

+      data-testid="work-item-mr-actions-dropdown"
+        data-testid="mr-copy-branch-name"
+        data-testid="mr-copy-reference"

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

-                  data-testid="design-upload-button"
+                    data-testid="design-upload-button"

If the e2e:test-on-omnibus job in the qa stage has run automatically, please ensure the tests are passing. If the job has not run, please start the manual:e2e-test-pipeline-generate job in the prepare stage and ensure the tests in follow-up:e2e:test-on-omnibus-ee pipeline are passing.

For the list of known failures please refer to the latest pipeline triage issue.

If your changes are under a feature flag, please check our Testing with feature flags documentation for instructions.

Reviewer roulette

Category	Reviewer	Maintainer
frontend	`@rhardarson` (UTC+1, 4.5 hours behind author)	`@ealcantara` (UTC+1, 4.5 hours behind author)

Please refer to documentation page for guidance on how you can benefit from the Reviewer Roulette, or use the GitLab Review Workload Dashboard to find other available reviewers.

If needed, you can retry the danger-review job that generated this comment.

Generated by Danger

Bundle size analysis [beta]

This compares changes in bundle size for entry points between the commits cbdf39a8 and e35a3f97

Special assets

Entrypoint / Name	Size before	Size after	Diff	Diff in percent
average	4.5 MB	4.5 MB	-	0.0 %
mainChunk	3.37 MB	3.37 MB	-	0.0 %

Please look at the full report for more details

MR Responsive alignment

When the widget is at smaller sizes, the content between the title and button should reflow to the row below. In the design only the milestone is hidden (this is also true in legacy related MRs and is lower importance than other info).

In talking to Nick B he mentioned there is similar work happening with child/linked items to use container queries for sizing, though I'm not sure on the status of that work. We could change that later, and just use media queries for now, but with the drawer view the container sizing will be much more relevant.

@deepika.guliani Excellent work so far Thanks a ton for working through these changes so quickly.

With ~~one~~ two exceptions (added a note about split button) I've left comments inline as most are pretty small alignment/styling adjustments. I've generally tried to capture these for all relevant items (MRs vs branches) but if I missed any, assume the intent is for each to use the same general alignment/styling wherever there is comparable data.

requested changes

Create MR CTAs

I don't think we need the top menu CTA now that there's an action in the body, though I'm open to this if you think it's useful
The action buttons that include "Create MR" split button should always be justified when side by side with the emojis

Now (task)	Intended	With design

The dropdown from the split button always opens to the right, though it seems like it should open to the left so it's directly below the button.
The "Create MR" button should be essentially grouped with "Add design", with 0.5rem gap between them, so that when they reflow they reflow as a row.

Now	Suggested

added 245 commits

3ce245f4...e86ce3cc - 243 commits from branch master
a7f70a1a - Move work item dev widget to main body and add create entity
30a1ebc8 - Apply UX feedback

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

What does this MR do and why?

References

MR acceptance checklist

Screenshots or screen recordings

How to set up and validate locally

Merge request reports

Activity

Disabled eslint rules

testid selectors

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

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

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

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

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