feature[TW26298]: Create current action dropdown and create action button

Change-Id: I5eb57d0fb93708f72c12c34d2d95773766c26607

30 files changed, 548 insertions, 280 deletions

diff --git a/web/apps/osee/src/app/ci-dashboard/lib/components/ci-dashboard-controls/ci-dashboard-controls.component.html b/web/apps/osee/src/app/ci-dashboard/lib/components/ci-dashboard-controls/ci-dashboard-controls.component.html
index d85afa17787..333aab8b258 100644
--- a/web/apps/osee/src/app/ci-dashboard/lib/components/ci-dashboard-controls/ci-dashboard-controls.component.html
+++ b/web/apps/osee/src/app/ci-dashboard/lib/components/ci-dashboard-controls/ci-dashboard-controls.component.html
@@ -31,7 +31,7 @@
 	</div>
 	@if (actionButton) {
 		<div class="tw-min-w-[210px]">
-			<osee-action-dropdown></osee-action-dropdown>
+			<osee-current-action-drop-down />
 		</div>
 	}
 </div>
diff --git a/web/apps/osee/src/app/ci-dashboard/lib/components/ci-dashboard-controls/ci-dashboard-controls.component.ts b/web/apps/osee/src/app/ci-dashboard/lib/components/ci-dashboard-controls/ci-dashboard-controls.component.ts
index 9cdc0895176..dfd1478798f 100644
--- a/web/apps/osee/src/app/ci-dashboard/lib/components/ci-dashboard-controls/ci-dashboard-controls.component.ts
+++ b/web/apps/osee/src/app/ci-dashboard/lib/components/ci-dashboard-controls/ci-dashboard-controls.component.ts
@@ -14,7 +14,7 @@ import { Component, Input, OnInit, computed } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { ActivatedRoute } from '@angular/router';
 import {
-	ActionDropDownComponent,
+	CurrentActionDropDownComponent,
 	BranchPickerComponent,
 } from '@osee/shared/components';
 import { CiDashboardUiService } from '../../services/ci-dashboard-ui.service';
@@ -26,7 +26,7 @@ import { SetDropdownComponent } from './set-dropdown/set-dropdown.component';
 	imports: [
 		BranchPickerComponent,
 		SetDropdownComponent,
-		ActionDropDownComponent,
+		CurrentActionDropDownComponent,
 	],
 	templateUrl: './ci-dashboard-controls.component.html',
 })
diff --git a/web/apps/osee/src/app/grid-commander/parameter-types/parameterBranch/parameter-branch.component.html b/web/apps/osee/src/app/grid-commander/parameter-types/parameterBranch/parameter-branch.component.html
index 1697f1ed496..ec2749a96cb 100644
--- a/web/apps/osee/src/app/grid-commander/parameter-types/parameterBranch/parameter-branch.component.html
+++ b/web/apps/osee/src/app/grid-commander/parameter-types/parameterBranch/parameter-branch.component.html
@@ -13,6 +13,6 @@
 <ng-container>
 	<div>
 		<osee-branch-picker></osee-branch-picker>
-		<osee-action-dropdown></osee-action-dropdown>
+		<osee-current-action-drop-down />
 	</div>
 </ng-container>
diff --git a/web/apps/osee/src/app/grid-commander/parameter-types/parameterBranch/parameter-branch.component.spec.ts b/web/apps/osee/src/app/grid-commander/parameter-types/parameterBranch/parameter-branch.component.spec.ts
index e38dd0caf99..c417b4e9748 100644
--- a/web/apps/osee/src/app/grid-commander/parameter-types/parameterBranch/parameter-branch.component.spec.ts
+++ b/web/apps/osee/src/app/grid-commander/parameter-types/parameterBranch/parameter-branch.component.spec.ts
@@ -13,14 +13,14 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import {
-	ActionDropDownComponent,
 	BranchPickerComponent,
+	CurrentActionDropDownComponent,
 } from '@osee/shared/components';
 
 import { ParameterBranchComponent } from './parameter-branch.component';
 import {
-	ActionDropdownStub,
 	BranchPickerStub,
+	CurrentActionDropdownMockComponent,
 } from '@osee/shared/components/testing';
 import { ParameterDataService } from '../../services/data-services/selected-command-data/parameter-data/parameter-data.service';
 import { parameterDataServiceMock } from '../../services/data-services/selected-command-data/parameter-data/parameter-data.service.mock';
@@ -32,10 +32,13 @@ describe('ParameterBranchComponent', () => {
 	beforeEach(async () => {
 		await TestBed.overrideComponent(ParameterBranchComponent, {
 			add: {
-				imports: [BranchPickerStub, ActionDropdownStub],
+				imports: [BranchPickerStub, CurrentActionDropdownMockComponent],
 			},
 			remove: {
-				imports: [BranchPickerComponent, ActionDropDownComponent],
+				imports: [
+					BranchPickerComponent,
+					CurrentActionDropDownComponent,
+				],
 			},
 		}).configureTestingModule({
 			imports: [NoopAnimationsModule, ParameterBranchComponent],
diff --git a/web/apps/osee/src/app/grid-commander/parameter-types/parameterBranch/parameter-branch.component.ts b/web/apps/osee/src/app/grid-commander/parameter-types/parameterBranch/parameter-branch.component.ts
index 5d7f9e5807d..1721979e680 100644
--- a/web/apps/osee/src/app/grid-commander/parameter-types/parameterBranch/parameter-branch.component.ts
+++ b/web/apps/osee/src/app/grid-commander/parameter-types/parameterBranch/parameter-branch.component.ts
@@ -12,7 +12,7 @@
  **********************************************************************/
 import { Component } from '@angular/core';
 import {
-	ActionDropDownComponent,
+	CurrentActionDropDownComponent,
 	BranchPickerComponent,
 } from '@osee/shared/components';
 import { map } from 'rxjs/operators';
@@ -23,7 +23,7 @@ import { ParameterDataService } from '../../services/data-services/selected-comm
 	templateUrl: './parameter-branch.component.html',
 	styles: [],
 	standalone: true,
-	imports: [BranchPickerComponent, ActionDropDownComponent],
+	imports: [BranchPickerComponent, CurrentActionDropDownComponent],
 })
 export class ParameterBranchComponent {
 	parameter$ = this.parameterDataService.parameter$;
diff --git a/web/apps/osee/src/app/ple/artifact-explorer/lib/components/hierarchy/artifact-hierarchy-panel/artifact-hierarchy-panel.component.html b/web/apps/osee/src/app/ple/artifact-explorer/lib/components/hierarchy/artifact-hierarchy-panel/artifact-hierarchy-panel.component.html
index 0735f90171b..d61431c71ec 100644
--- a/web/apps/osee/src/app/ple/artifact-explorer/lib/components/hierarchy/artifact-hierarchy-panel/artifact-hierarchy-panel.component.html
+++ b/web/apps/osee/src/app/ple/artifact-explorer/lib/components/hierarchy/artifact-hierarchy-panel/artifact-hierarchy-panel.component.html
@@ -24,7 +24,7 @@
 		<div class="tw-flex tw-w-full tw-items-center tw-gap-2 tw-pr-2 tw-pt-4">
 			<osee-view-selector />
 			@if (branchId() !== '' && branchId() !== '570') {
-				<osee-action-dropdown />
+				<osee-current-action-drop-down />
 			}
 		</div>
 	</div>
diff --git a/web/apps/osee/src/app/ple/artifact-explorer/lib/components/hierarchy/artifact-hierarchy-panel/artifact-hierarchy-panel.component.spec.ts b/web/apps/osee/src/app/ple/artifact-explorer/lib/components/hierarchy/artifact-hierarchy-panel/artifact-hierarchy-panel.component.spec.ts
index d1d8ca25922..f23467f05ed 100644
--- a/web/apps/osee/src/app/ple/artifact-explorer/lib/components/hierarchy/artifact-hierarchy-panel/artifact-hierarchy-panel.component.spec.ts
+++ b/web/apps/osee/src/app/ple/artifact-explorer/lib/components/hierarchy/artifact-hierarchy-panel/artifact-hierarchy-panel.component.spec.ts
@@ -15,8 +15,8 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ArtifactHierarchyPanelComponent } from './artifact-hierarchy-panel.component';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import {
-	ActionDropdownStub,
 	BranchPickerStub,
+	CurrentActionDropdownMockComponent,
 } from '@osee/shared/components/testing';
 import { ViewSelectorMockComponent } from '@osee/messaging/shared/testing';
 import { ArtifactHierarchyPathService } from '../../../services/artifact-hierarchy-path.service';
@@ -49,7 +49,7 @@ describe('ArtifactHierarchyPanelComponent', () => {
 					ArtifactHeirarchyOptionsMockComponent,
 					MatIconModule,
 					ArtifactSearchComponent,
-					ActionDropdownStub,
+					CurrentActionDropdownMockComponent,
 					BranchPickerStub,
 					ViewSelectorMockComponent,
 					ArtifactSearchMockComponent,
diff --git a/web/apps/osee/src/app/ple/artifact-explorer/lib/components/hierarchy/artifact-hierarchy-panel/artifact-hierarchy-panel.component.ts b/web/apps/osee/src/app/ple/artifact-explorer/lib/components/hierarchy/artifact-hierarchy-panel/artifact-hierarchy-panel.component.ts
index 57dd3f2a3df..590204c5fb8 100644
--- a/web/apps/osee/src/app/ple/artifact-explorer/lib/components/hierarchy/artifact-hierarchy-panel/artifact-hierarchy-panel.component.ts
+++ b/web/apps/osee/src/app/ple/artifact-explorer/lib/components/hierarchy/artifact-hierarchy-panel/artifact-hierarchy-panel.component.ts
@@ -17,7 +17,7 @@ import { toSignal } from '@angular/core/rxjs-interop';
 import { MatIcon } from '@angular/material/icon';
 import { MatTooltip } from '@angular/material/tooltip';
 import {
-	ActionDropDownComponent,
+	CurrentActionDropDownComponent,
 	BranchPickerComponent,
 	ViewSelectorComponent,
 } from '@osee/shared/components';
@@ -40,7 +40,7 @@ import { ArtifactExplorerExpansionPanelComponent } from '../../shared/artifact-e
 		ArtifactHierarchyComponent,
 		ArtifactHierarchyOptionsComponent,
 		ViewSelectorComponent,
-		ActionDropDownComponent,
+		CurrentActionDropDownComponent,
 		ArtifactSearchPanelComponent,
 		ArtifactExplorerExpansionPanelComponent,
 		MatTooltip,
diff --git a/web/apps/osee/src/app/ple/messaging/shared/main-content/messaging-controls/messaging-controls.component.html b/web/apps/osee/src/app/ple/messaging/shared/main-content/messaging-controls/messaging-controls.component.html
index 7d9e0dab78b..cb1fabd0021 100644
--- a/web/apps/osee/src/app/ple/messaging/shared/main-content/messaging-controls/messaging-controls.component.html
+++ b/web/apps/osee/src/app/ple/messaging/shared/main-content/messaging-controls/messaging-controls.component.html
@@ -47,9 +47,9 @@
 					>
 				}
 			}
-			<osee-action-dropdown
+			<osee-current-action-drop-down
 				category="3"
-				workType="MIM"></osee-action-dropdown>
+				workType="MIM" />
 		}
 	</div>
 </div>
diff --git a/web/apps/osee/src/app/ple/messaging/shared/main-content/messaging-controls/messaging-controls.component.ts b/web/apps/osee/src/app/ple/messaging/shared/main-content/messaging-controls/messaging-controls.component.ts
index 95c09ccbee8..d8a7545eec0 100644
--- a/web/apps/osee/src/app/ple/messaging/shared/main-content/messaging-controls/messaging-controls.component.ts
+++ b/web/apps/osee/src/app/ple/messaging/shared/main-content/messaging-controls/messaging-controls.component.ts
@@ -21,7 +21,7 @@ import {
 	PreferencesUIService,
 } from '@osee/messaging/shared/services';
 import {
-	ActionDropDownComponent,
+	CurrentActionDropDownComponent,
 	BranchPickerComponent,
 	UndoButtonBranchComponent,
 	ViewSelectorComponent,
@@ -39,7 +39,7 @@ import { iif, of, switchMap } from 'rxjs';
 		MatAnchor,
 		MatIcon,
 		MatTooltip,
-		ActionDropDownComponent,
+		CurrentActionDropDownComponent,
 		BranchPickerComponent,
 		UndoButtonBranchComponent,
 		ViewSelectorComponent,
diff --git a/web/apps/osee/src/app/shared/components/action-state-button/action-drop-down/action-drop-down.component.html b/web/apps/osee/src/app/shared/components/action-state-button/action-drop-down/action-drop-down.component.html
index 8a93bbf6e7b..4f5bc218362 100644
--- a/web/apps/osee/src/app/shared/components/action-state-button/action-drop-down/action-drop-down.component.html
+++ b/web/apps/osee/src/app/shared/components/action-state-button/action-drop-down/action-drop-down.component.html
@@ -10,25 +10,14 @@
  * Contributors:
  *     Boeing - initial API and implementation
  -->
-@if (
-	(branchInfo | async)?.branchType === '2' &&
-	(branchInfo | async)?.id !== '570'
-) {
-	<button
-		mat-raised-button
-		(click)="addAction()"
-		color="primary">
-		<mat-icon>add</mat-icon>Create Action
-	</button>
-} @else {
-	<button
-		mat-raised-button
-		[matMenuTriggerFor]="stateMenu"
-		class="tw-flex tw-justify-between tw-bg-primary tw-text-background">
-		{{ currentStateName | async
-		}}<mat-icon iconPositionEnd>expand_more</mat-icon>
-	</button>
-}
+<button
+	mat-raised-button
+	[matMenuTriggerFor]="stateMenu"
+	class="tw-flex tw-justify-between tw-bg-primary tw-text-background">
+	{{ currentStateName | async
+	}}<mat-icon iconPositionEnd>expand_more</mat-icon>
+</button>
+
 <mat-menu
 	#stateMenu="matMenu"
 	class="[&>div>div]: tw-max-w-none">
diff --git a/web/apps/osee/src/app/shared/components/action-state-button/action-drop-down/action-drop-down.component.ts b/web/apps/osee/src/app/shared/components/action-state-button/action-drop-down/action-drop-down.component.ts
index 9dc99a020c5..f63123385ad 100644
--- a/web/apps/osee/src/app/shared/components/action-state-button/action-drop-down/action-drop-down.component.ts
+++ b/web/apps/osee/src/app/shared/components/action-state-button/action-drop-down/action-drop-down.component.ts
@@ -11,21 +11,17 @@
  *     Boeing - initial API and implementation
  **********************************************************************/
 import { AsyncPipe, NgClass, NgTemplateOutlet } from '@angular/common';
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatButton, MatIconButton } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
 import { MatIcon } from '@angular/material/icon';
 import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
 import { BranchInfoService, CommitBranchService } from '@osee/shared/services';
-import {
-	CreateAction,
-	teamWorkflowState,
-} from '@osee/shared/types/configuration-management';
+import { teamWorkflowState } from '@osee/shared/types/configuration-management';
 import { iif, of } from 'rxjs';
-import { filter, map, switchMap, take } from 'rxjs/operators';
+import { map, switchMap, take } from 'rxjs/operators';
 import { MergeManagerDialogComponent } from '../../merge-manager-dialog/merge-manager-dialog.component';
-import { CreateActionDialogComponent } from '../create-action-dialog/create-action-dialog.component';
 import { ActionStateButtonService } from '../internal/services/action-state-button.service';
 
 /**
@@ -38,7 +34,6 @@ import { ActionStateButtonService } from '../internal/services/action-state-butt
 	standalone: true,
 	imports: [
 		AsyncPipe,
-		CreateActionDialogComponent,
 		MatButton,
 		MatIcon,
 		MatIconButton,
@@ -49,11 +44,7 @@ import { ActionStateButtonService } from '../internal/services/action-state-butt
 		NgTemplateOutlet,
 	],
 })
-export class ActionDropDownComponent implements OnChanges {
-	@Input() category: string = '0';
-	@Input() workType: string = '';
-	branchInfo = this.actionService.branchState;
-
+export class ActionDropDownComponent {
 	branchTransitionable = this.actionService.branchTransitionable;
 
 	nextStates = this.actionService.nextStates;
@@ -70,24 +61,6 @@ export class ActionDropDownComponent implements OnChanges {
 
 	isApproved = this.actionService.branchApproved.pipe(takeUntilDestroyed());
 
-	doAddAction = this.actionService.addActionInitialStep.pipe(
-		switchMap((thisUser) =>
-			this.dialog
-				.open(CreateActionDialogComponent, {
-					data: new CreateAction(thisUser, this.workType),
-					minWidth: '60%',
-				})
-				.afterClosed()
-				.pipe(
-					take(1),
-					filter((val): val is CreateAction => val !== undefined),
-					switchMap((value) =>
-						this.actionService.doAddAction(value, this.category)
-					)
-				)
-		)
-	);
-
 	doApproveBranch = this.actionService.doApproveBranch;
 
 	doCommitBranch = this.actionService.branchState.pipe(
@@ -131,13 +104,6 @@ export class ActionDropDownComponent implements OnChanges {
 		private commitBranchService: CommitBranchService,
 		private branchService: BranchInfoService
 	) {}
-	ngOnChanges(changes: SimpleChanges): void {
-		this.actionService.category = this.category;
-		this.actionService.workTypeValue = this.workType;
-	}
-	addAction(): void {
-		this.doAddAction.subscribe();
-	}
 	transition(state: teamWorkflowState) {
 		this.actionService.transition(state).subscribe();
 	}
diff --git a/web/apps/osee/src/app/shared/components/action-state-button/action-drop-down/action-drop-down.mock.component.ts b/web/apps/osee/src/app/shared/components/action-state-button/action-drop-down/action-drop-down.mock.component.ts
index e034f41881b..48b208c8209 100644
--- a/web/apps/osee/src/app/shared/components/action-state-button/action-drop-down/action-drop-down.mock.component.ts
+++ b/web/apps/osee/src/app/shared/components/action-state-button/action-drop-down/action-drop-down.mock.component.ts
@@ -10,7 +10,7 @@
  * Contributors:
  *     Boeing - initial API and implementation
  **********************************************************************/
-import { Component, Input } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
 	selector: 'osee-action-dropdown',
@@ -18,7 +18,4 @@ import { Component, Input } from '@angular/core';
 	standalone: true,
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
-export class ActionDropdownStub {
-	@Input() category: string = '';
-	@Input() workType: string = '';
-}
+export class ActionDropdownStub {}
diff --git a/web/apps/osee/src/app/shared/components/action-state-button/current-action-drop-down/current-action-drop-down.component.html b/web/apps/osee/src/app/shared/components/action-state-button/current-action-drop-down/current-action-drop-down.component.html
new file mode 100644
index 00000000000..b46938bb66f
--- /dev/null
+++ b/web/apps/osee/src/app/shared/components/action-state-button/current-action-drop-down/current-action-drop-down.component.html
@@ -0,0 +1,19 @@
+<!--
+ * Copyright (c) 2024 Boeing
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Boeing - initial API and implementation
+ -->
+@if (branchInfo()?.branchType === '2' && branchInfo()?.id !== '570') {
+	<osee-create-action-button
+		[category]="category()"
+		[workType]="workType()" />
+} @else {
+	<osee-action-dropdown />
+}
diff --git a/web/apps/osee/src/app/shared/components/action-state-button/current-action-drop-down/current-action-drop-down.component.mock.ts b/web/apps/osee/src/app/shared/components/action-state-button/current-action-drop-down/current-action-drop-down.component.mock.ts
new file mode 100644
index 00000000000..76f55d72536
--- /dev/null
+++ b/web/apps/osee/src/app/shared/components/action-state-button/current-action-drop-down/current-action-drop-down.component.mock.ts
@@ -0,0 +1,23 @@
+/*********************************************************************
+ * Copyright (c) 2024 Boeing
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Boeing - initial API and implementation
+ **********************************************************************/
+import { Component, input } from '@angular/core';
+
+@Component({
+	selector: 'osee-current-action-drop-down',
+	template: '<div>Dummy</div>',
+	standalone: true,
+})
+export class CurrentActionDropdownMockComponent {
+	category = input('0');
+	workType = input('');
+}
diff --git a/web/apps/osee/src/app/shared/components/action-state-button/current-action-drop-down/current-action-drop-down.component.spec.ts b/web/apps/osee/src/app/shared/components/action-state-button/current-action-drop-down/current-action-drop-down.component.spec.ts
new file mode 100644
index 00000000000..ee725cade0b
--- /dev/null
+++ b/web/apps/osee/src/app/shared/components/action-state-button/current-action-drop-down/current-action-drop-down.component.spec.ts
@@ -0,0 +1,48 @@
+/*********************************************************************
+ * Copyright (c) 2024 Boeing
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Boeing - initial API and implementation
+ **********************************************************************/
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CurrentActionDropDownComponent } from './current-action-drop-down.component';
+import { ActionDropdownStub } from '@osee/shared/components/testing';
+import { ActionStateButtonService } from '../../action-state-button/internal/services/action-state-button.service';
+import { actionStateButtonServiceMock } from '../../action-state-button/internal/services/action-state-button.service.mock';
+
+describe('CurrentActionDropDownComponent', () => {
+	let component: CurrentActionDropDownComponent;
+	let fixture: ComponentFixture<CurrentActionDropDownComponent>;
+
+	beforeEach(async () => {
+		await TestBed.overrideComponent(CurrentActionDropDownComponent, {
+			set: {
+				imports: [ActionDropdownStub],
+			},
+		})
+			.configureTestingModule({
+				imports: [CurrentActionDropDownComponent],
+				providers: [
+					{
+						provide: ActionStateButtonService,
+						useValue: actionStateButtonServiceMock,
+					},
+				],
+			})
+			.compileComponents();
+
+		fixture = TestBed.createComponent(CurrentActionDropDownComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});
diff --git a/web/apps/osee/src/app/shared/components/action-state-button/current-action-drop-down/current-action-drop-down.component.ts b/web/apps/osee/src/app/shared/components/action-state-button/current-action-drop-down/current-action-drop-down.component.ts
new file mode 100644
index 00000000000..4fc521c30c2
--- /dev/null
+++ b/web/apps/osee/src/app/shared/components/action-state-button/current-action-drop-down/current-action-drop-down.component.ts
@@ -0,0 +1,32 @@
+/*********************************************************************
+ * Copyright (c) 2024 Boeing
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Boeing - initial API and implementation
+ **********************************************************************/
+import { Component, inject, input } from '@angular/core';
+import { ActionDropDownComponent } from '../action-drop-down/action-drop-down.component';
+import { ActionStateButtonService } from '../internal/services/action-state-button.service';
+import { CreateActionButtonComponent } from '../../create-action-button/create-action-button.component';
+import { toSignal } from '@angular/core/rxjs-interop';
+
+@Component({
+	selector: 'osee-current-action-drop-down',
+	standalone: true,
+	imports: [ActionDropDownComponent, CreateActionButtonComponent],
+	templateUrl: './current-action-drop-down.component.html',
+})
+export class CurrentActionDropDownComponent {
+	category = input('0');
+	workType = input('');
+
+	actionService = inject(ActionStateButtonService);
+
+	branchInfo = toSignal(this.actionService.branchState);
+}
diff --git a/web/apps/osee/src/app/shared/components/action-state-button/internal/services/action-state-button.service.mock.ts b/web/apps/osee/src/app/shared/components/action-state-button/internal/services/action-state-button.service.mock.ts
index 6f6fda87bdd..ec1b8ed37ad 100644
--- a/web/apps/osee/src/app/shared/components/action-state-button/internal/services/action-state-button.service.mock.ts
+++ b/web/apps/osee/src/app/shared/components/action-state-button/internal/services/action-state-button.service.mock.ts
@@ -12,20 +12,14 @@
  **********************************************************************/
 import { of } from 'rxjs';
 
-import { CreateAction } from '@osee/shared/types/configuration-management';
 import { ActionStateButtonService } from './action-state-button.service';
 import {
 	testBranchActions,
 	testWorkFlow,
 	testBranchInfo,
 	MockNamedId,
-	MockUserResponse,
 	testCommitResponse,
 	testDataTransitionResponse,
-	MockXResultData,
-	testnewActionResponse,
-	testWorkType,
-	testAgilePoints,
 } from '@osee/shared/testing';
 
 export const actionStateButtonServiceMock: Partial<ActionStateButtonService> = {
@@ -36,30 +30,12 @@ export const actionStateButtonServiceMock: Partial<ActionStateButtonService> = {
 	branchApproved: of('true'),
 	teamsLeads: of(MockNamedId),
 	branchTransitionable: of('true'),
-	addActionInitialStep: of(MockUserResponse),
-	getPoints() {
-		return of(testAgilePoints);
-	},
 	commitBranch(body: { committer: string; archive: string }) {
 		return of(testCommitResponse);
 	},
 	doCommitBranch: of(testDataTransitionResponse),
 	doTransition: of(testDataTransitionResponse),
 	doApproveBranch: of(true),
-	doAddAction(value: CreateAction, category: string) {
-		return of(testnewActionResponse);
-	},
-	actionableItems: of([
-		{
-			id: '123',
-			name: 'First ARB',
-		},
-		{
-			id: '456',
-			name: 'Second ARB',
-		},
-	]),
-	workTypes: of([testWorkType]),
 	nextStates: of([]),
 	previousStates: of([]),
 	currentState: of({ state: '', rules: [], committable: false }),
@@ -73,27 +49,12 @@ export const actionStateButtonServiceMockApprove: Partial<ActionStateButtonServi
 		branchApproved: of('true'),
 		teamsLeads: of(MockNamedId),
 		branchTransitionable: of('true'),
-		addActionInitialStep: of(MockUserResponse),
 		commitBranch(body: { committer: string; archive: string }) {
 			return of(testCommitResponse);
 		},
 		doCommitBranch: of(testDataTransitionResponse),
 		doTransition: of(testDataTransitionResponse),
 		doApproveBranch: of(true),
-		doAddAction(value: CreateAction, category: string) {
-			return of(testnewActionResponse);
-		},
-		actionableItems: of([
-			{
-				id: '123',
-				name: 'First ARB',
-			},
-			{
-				id: '456',
-				name: 'Second ARB',
-			},
-		]),
-		workTypes: of([testWorkType]),
 		nextStates: of([]),
 		previousStates: of([]),
 		currentState: of({ state: '', rules: [], committable: false }),
@@ -107,27 +68,12 @@ export const actionStateButtonServiceMockCommit: Partial<ActionStateButtonServic
 		branchApproved: of('true'),
 		teamsLeads: of(MockNamedId),
 		branchTransitionable: of('true'),
-		addActionInitialStep: of(MockUserResponse),
 		commitBranch(body: { committer: string; archive: string }) {
 			return of(testCommitResponse);
 		},
 		doCommitBranch: of(testDataTransitionResponse),
 		doTransition: of(testDataTransitionResponse),
 		doApproveBranch: of(true),
-		doAddAction(value: CreateAction, category: string) {
-			return of(testnewActionResponse);
-		},
-		actionableItems: of([
-			{
-				id: '123',
-				name: 'First ARB',
-			},
-			{
-				id: '456',
-				name: 'Second ARB',
-			},
-		]),
-		workTypes: of([testWorkType]),
 		nextStates: of([]),
 		previousStates: of([]),
 		currentState: of({ state: '', rules: [], committable: false }),
diff --git a/web/apps/osee/src/app/shared/components/action-state-button/internal/services/action-state-button.service.spec.ts b/web/apps/osee/src/app/shared/components/action-state-button/internal/services/action-state-button.service.spec.ts
index 32b2b19ab53..8a203aa390a 100644
--- a/web/apps/osee/src/app/shared/components/action-state-button/internal/services/action-state-button.service.spec.ts
+++ b/web/apps/osee/src/app/shared/components/action-state-button/internal/services/action-state-button.service.spec.ts
@@ -19,8 +19,6 @@ import {
 	CommitBranchService,
 	UiService,
 } from '@osee/shared/services';
-import { CreateAction } from '@osee/shared/types/configuration-management';
-
 import { ActionStateButtonService } from './action-state-button.service';
 import { BranchRoutedUIService } from '../../../internal/services/branch-routed-ui.service';
 import { branchRoutedUiServiceMock } from '../../../internal/services/branch-routed-ui.service.mock';
@@ -28,8 +26,6 @@ import { UserDataAccountService } from '@osee/auth';
 import {
 	actionServiceMock,
 	BranchInfoServiceMock,
-	MockUserResponse,
-	testnewActionResponse,
 	testCommitResponse,
 	testDataTransitionResponse,
 	commitBranchServiceMock,
@@ -78,22 +74,6 @@ describe('ActionStateButtonService', () => {
 		expect(service).toBeTruthy();
 	});
 
-	it('should add an action', () => {
-		scheduler.run(({ expectObservable }) => {
-			expectObservable(
-				service.doAddAction(new CreateAction(MockUserResponse), '3')
-			).toBe('(a|)', { a: testnewActionResponse });
-		});
-	});
-	it('should add an action and create a branch', () => {
-		scheduler.run(({ expectObservable }) => {
-			const create = new CreateAction(MockUserResponse);
-			create.createBranchDefault = true;
-			expectObservable(service.doAddAction(create, '3')).toBe('(a|)', {
-				a: testnewActionResponse,
-			});
-		});
-	});
 	it('should commit a branch', () => {
 		scheduler.run(({ expectObservable }) => {
 			expectObservable(
diff --git a/web/apps/osee/src/app/shared/components/action-state-button/internal/services/action-state-button.service.ts b/web/apps/osee/src/app/shared/components/action-state-button/internal/services/action-state-button.service.ts
index 8e348938941..9b8719e5c0f 100644
--- a/web/apps/osee/src/app/shared/components/action-state-button/internal/services/action-state-button.service.ts
+++ b/web/apps/osee/src/app/shared/components/action-state-button/internal/services/action-state-button.service.ts
@@ -11,101 +11,40 @@
  *     Boeing - initial API and implementation
  **********************************************************************/
 import { Injectable } from '@angular/core';
-import { iif, of, combineLatest, BehaviorSubject } from 'rxjs';
+import { iif, of, combineLatest } from 'rxjs';
 import { switchMap, shareReplay, take, tap, map } from 'rxjs/operators';
 import {
 	ActionService,
-	BranchInfoService,
 	CommitBranchService,
 	CurrentActionService,
 	CurrentBranchInfoService,
 	UiService,
 } from '@osee/shared/services';
-import { BranchCategoryService } from '../../../internal/services/branch-category.service';
 import { UserDataAccountService } from '@osee/auth';
 import { BranchRoutedUIService } from '../../../internal/services/branch-routed-ui.service';
 import {
 	transitionAction,
-	CreateAction,
-	CreateNewAction,
 	teamWorkflowState,
 } from '@osee/shared/types/configuration-management';
 import { MatDialog } from '@angular/material/dialog';
-import { MergeManagerDialogComponent } from '../../../merge-manager-dialog/merge-manager-dialog.component';
 
 @Injectable({
 	providedIn: 'root',
 })
 export class ActionStateButtonService {
-	private _workType = new BehaviorSubject<string>('');
 	constructor(
 		public dialog: MatDialog,
 		private uiService: UiService,
 		private actionService: ActionService,
-		private branchService: BranchInfoService,
 		private currentBranchService: CurrentBranchInfoService,
 		private accountService: UserDataAccountService,
 		private branchedRouter: BranchRoutedUIService,
-		private branchCategoryService: BranchCategoryService,
 		private currentActionService: CurrentActionService,
 		private commitBranchService: CommitBranchService
 	) {}
 
-	set category(category: string) {
-		this.branchCategoryService.category = category;
-	}
-
-	set workTypeValue(workType: string) {
-		this._workType.next(workType);
-	}
-
-	get workType() {
-		return this._workType.asObservable();
-	}
-
 	private _user = this.accountService.user;
 
-	private _actionableItems = this.workType.pipe(
-		switchMap((workType) =>
-			this.actionService.getActionableItems(workType)
-		),
-		shareReplay({ bufferSize: 1, refCount: true })
-	);
-
-	private _workTypes = this.actionService
-		.getWorkTypes()
-		.pipe(shareReplay({ bufferSize: 1, refCount: true }));
-
-	get actionableItems() {
-		return this._actionableItems;
-	}
-
-	get workTypes() {
-		return this._workTypes;
-	}
-
-	getVersions(actionableItem: string) {
-		return this.actionService.getVersions(actionableItem);
-	}
-
-	getChangeTypes(actionableItem: string) {
-		return this.actionService.getChangeTypes(actionableItem);
-	}
-	getPoints() {
-		return this.actionService.getPoints();
-	}
-	getCreateActionFields(actionableItemId: string) {
-		return this.actionService.getCreateActionFields(actionableItemId);
-	}
-	getTeamDef(actionableItemId: string) {
-		return this.actionService.getTeamDef(actionableItemId);
-	}
-	getFeatureGroups(teamDefId: string) {
-		return this.actionService.getFeatureGroups(teamDefId);
-	}
-	getSprints(teamDefId: string) {
-		return this.actionService.getSprints(teamDefId);
-	}
 	private _branchState = this.currentBranchService.currentBranch;
 	private _branchAction = this.currentActionService.branchAction;
 	private _branchWorkflow = this.currentActionService.branchWorkFlow;
@@ -181,10 +120,6 @@ export class ActionStateButtonService {
 		return this._state;
 	}
 
-	private _addActionInitialStep = this._user.pipe(take(1));
-	public get addActionInitialStep() {
-		return this._addActionInitialStep;
-	}
 	public transitionValidate(state: teamWorkflowState) {
 		return combineLatest([this.branchAction, this._user]).pipe(
 			take(1),
@@ -418,40 +353,4 @@ export class ActionStateButtonService {
 	public get doApproveBranch() {
 		return this._doApproveBranch;
 	}
-
-	public doAddAction(value: CreateAction, category: string) {
-		if (typeof value?.description === 'undefined') {
-			return of(); // @todo replace with a false response
-		}
-		if (!value.createBranchDefault) {
-			return this.actionService.createAction(new CreateNewAction(value));
-		}
-		return this.actionService.createBranch(new CreateNewAction(value)).pipe(
-			switchMap((branchResponse) =>
-				iif(
-					() => category !== '0',
-					this.branchService.setBranchCategory(
-						branchResponse.workingBranchId.id,
-						category
-					),
-					of(branchResponse)
-				).pipe(
-					map(() => branchResponse),
-					tap((resp) => {
-						this.uiService.updated = true;
-						if (resp.results.success) {
-							const _branchType =
-								resp.workingBranchId.branchType === '2'
-									? 'baseline'
-									: 'working';
-							this.branchedRouter.position = {
-								type: _branchType,
-								id: resp.workingBranchId.id,
-							};
-						}
-					})
-				)
-			)
-		);
-	}
 }
diff --git a/web/apps/osee/src/app/shared/components/create-action-button/create-action-button.component.spec.ts b/web/apps/osee/src/app/shared/components/create-action-button/create-action-button.component.spec.ts
new file mode 100644
index 00000000000..612ea05a620
--- /dev/null
+++ b/web/apps/osee/src/app/shared/components/create-action-button/create-action-button.component.spec.ts
@@ -0,0 +1,41 @@
+/*********************************************************************
+ * Copyright (c) 2024 Boeing
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Boeing - initial API and implementation
+ **********************************************************************/
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CreateActionButtonComponent } from './create-action-button.component';
+import { CreateActionService } from './internal/services/create-action.service';
+import { createActionServiceMock } from './internal/services/create-action.service.mock';
+
+describe('CreateActionButtonComponent', () => {
+	let component: CreateActionButtonComponent;
+	let fixture: ComponentFixture<CreateActionButtonComponent>;
+
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			imports: [CreateActionButtonComponent],
+			providers: [
+				{
+					provide: CreateActionService,
+					useValue: createActionServiceMock,
+				},
+			],
+		}).compileComponents();
+
+		fixture = TestBed.createComponent(CreateActionButtonComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});
diff --git a/web/apps/osee/src/app/shared/components/create-action-button/create-action-button.component.ts b/web/apps/osee/src/app/shared/components/create-action-button/create-action-button.component.ts
new file mode 100644
index 00000000000..56c376321e9
--- /dev/null
+++ b/web/apps/osee/src/app/shared/components/create-action-button/create-action-button.component.ts
@@ -0,0 +1,66 @@
+/*********************************************************************
+ * Copyright (c) 2024 Boeing
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Boeing - initial API and implementation
+ **********************************************************************/
+import { Component, inject, input } from '@angular/core';
+import { MatButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { filter, switchMap, take } from 'rxjs';
+import { MatDialog } from '@angular/material/dialog';
+import { CreateActionDialogComponent } from './create-action-dialog/create-action-dialog.component';
+import { CreateAction } from '@osee/shared/types/configuration-management';
+import { CreateActionService } from './internal/services/create-action.service';
+
+@Component({
+	selector: 'osee-create-action-button',
+	standalone: true,
+	imports: [MatButton, MatIcon],
+	template: `<button
+		mat-raised-button
+		(click)="addAction()"
+		color="primary">
+		<mat-icon>add</mat-icon>Create Action
+	</button>`,
+})
+export class CreateActionButtonComponent {
+	category = input('0');
+	workType = input('');
+
+	createActionService = inject(CreateActionService);
+	dialog = inject(MatDialog);
+
+	addAction() {
+		this.createActionService.user
+			.pipe(
+				switchMap((thisUser) =>
+					this.dialog
+						.open(CreateActionDialogComponent, {
+							data: new CreateAction(thisUser, this.workType()),
+							minWidth: '60%',
+						})
+						.afterClosed()
+						.pipe(
+							take(1),
+							filter(
+								(val): val is CreateAction => val !== undefined
+							),
+							switchMap((value) =>
+								this.createActionService.createAction(
+									value,
+									this.category()
+								)
+							)
+						)
+				)
+			)
+			.subscribe();
+	}
+}
diff --git a/web/apps/osee/src/app/shared/components/action-state-button/create-action-dialog/create-action-dialog.component.html b/web/apps/osee/src/app/shared/components/create-action-button/create-action-dialog/create-action-dialog.component.html
index 64df7b7b84b..64df7b7b84b 100644
--- a/web/apps/osee/src/app/shared/components/action-state-button/create-action-dialog/create-action-dialog.component.html
+++ b/web/apps/osee/src/app/shared/components/create-action-button/create-action-dialog/create-action-dialog.component.html
diff --git a/web/apps/osee/src/app/shared/components/action-state-button/create-action-dialog/create-action-dialog.component.spec.ts b/web/apps/osee/src/app/shared/components/create-action-button/create-action-dialog/create-action-dialog.component.spec.ts
index e3b5b9addde..d6886e263a1 100644
--- a/web/apps/osee/src/app/shared/components/action-state-button/create-action-dialog/create-action-dialog.component.spec.ts
+++ b/web/apps/osee/src/app/shared/components/create-action-button/create-action-dialog/create-action-dialog.component.spec.ts
@@ -24,12 +24,12 @@ import { MatSelectModule } from '@angular/material/select';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { of } from 'rxjs';
 import { ActionService } from '@osee/shared/services';
-import { ActionStateButtonService } from '../internal/services/action-state-button.service';
-import { actionStateButtonServiceMock } from '../internal/services/action-state-button.service.mock';
-import { ActionUserService } from '../internal/services/action-user.service';
-import { MockActionUserService } from '../internal/services/action-user.service.mock';
+import { ActionUserService } from '../../action-state-button/internal/services/action-user.service';
+import { MockActionUserService } from '../../action-state-button/internal/services/action-user.service.mock';
 
 import { CreateActionDialogComponent } from './create-action-dialog.component';
+import { CreateActionService } from '../internal/services/create-action.service';
+import { createActionServiceMock } from '../internal/services/create-action.service.mock';
 
 describe('CreateActionDialogComponent', () => {
 	let component: CreateActionDialogComponent;
@@ -84,8 +84,8 @@ describe('CreateActionDialogComponent', () => {
 					},
 				},
 				{
-					provide: ActionStateButtonService,
-					useValue: actionStateButtonServiceMock,
+					provide: CreateActionService,
+					useValue: createActionServiceMock,
 				},
 				{
 					provide: ActionService,
diff --git a/web/apps/osee/src/app/shared/components/action-state-button/create-action-dialog/create-action-dialog.component.ts b/web/apps/osee/src/app/shared/components/create-action-button/create-action-dialog/create-action-dialog.component.ts
index 5d2e23afbf7..639e940e175 100644
--- a/web/apps/osee/src/app/shared/components/action-state-button/create-action-dialog/create-action-dialog.component.ts
+++ b/web/apps/osee/src/app/shared/components/create-action-button/create-action-dialog/create-action-dialog.component.ts
@@ -12,7 +12,7 @@
  **********************************************************************/
 import { AsyncPipe } from '@angular/common';
 import { Component, Inject, computed, signal } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
 import {
 	MatAutocomplete,
@@ -48,8 +48,8 @@ import {
 import { BehaviorSubject, combineLatest, of } from 'rxjs';
 import { filter, shareReplay, switchMap, tap } from 'rxjs/operators';
 import { LatestActionDropDownComponent } from '../../latest-action-drop-down/latest-action-drop-down.component';
-import { ActionStateButtonService } from '../internal/services/action-state-button.service';
-import { ActionUserService } from '../internal/services/action-user.service';
+import { ActionUserService } from '../../action-state-button/internal/services/action-user.service';
+import { CreateActionService } from '../internal/services/create-action.service';
 /**
  * Dialog for creating a new action with the correct workType and category.
  */
@@ -85,12 +85,13 @@ export class CreateActionDialogComponent {
 	users = this.userService.usersSorted;
 	actionableItemsFilter = signal('');
 	actionableItems = toSignal(
-		this.actionService.actionableItems.pipe(
+		this.createActionService.actionableItems.pipe(
 			tap((items) => {
 				if (items.length === 1) {
 					this._selectActionableItem(items[0]);
 				}
-			})
+			}),
+			takeUntilDestroyed()
 		)
 	);
 	filteredActionableItems = computed(
@@ -103,7 +104,7 @@ export class CreateActionDialogComponent {
 	);
 	workTypesFilter = signal('');
 	workTypes = toSignal(
-		this.actionService.workTypes.pipe(
+		this.createActionService.workTypes.pipe(
 			tap((types) => {
 				types.forEach((t) => {
 					if (t.name === this.data.defaultWorkType) {
@@ -123,7 +124,7 @@ export class CreateActionDialogComponent {
 					.includes(this.workTypesFilter().toLowerCase())
 			) || []
 	);
-	points = this.actionService.getPoints();
+	points = this.createActionService.getPoints();
 	workType: WorkType = {
 		name: '',
 		humanReadableName: '',
@@ -135,8 +136,8 @@ export class CreateActionDialogComponent {
 		filter((id) => id !== ''),
 		switchMap((id) =>
 			combineLatest([
-				this.actionService.branchState,
-				this.actionService.getVersions(id),
+				this.createActionService.currentBranch,
+				this.createActionService.getVersions(id),
 			]).pipe(
 				tap(([branch, versions]) => {
 					versions.forEach((v) => {
@@ -152,24 +153,26 @@ export class CreateActionDialogComponent {
 	);
 	changeTypes = this.actionableItemId.pipe(
 		filter((id) => id !== ''),
-		switchMap((id) => this.actionService.getChangeTypes(id))
+		switchMap((id) => this.createActionService.getChangeTypes(id))
 	);
 	additionalFields = this.actionableItemId.pipe(
 		filter((id) => id !== ''),
-		switchMap((id) => this.actionService.getCreateActionFields(id))
+		switchMap((id) => this.createActionService.getCreateActionFields(id))
 	);
 	teamDef = this.actionableItemId.pipe(
 		filter((id) => id !== ''),
-		switchMap((id) => this.actionService.getTeamDef(id)),
+		switchMap((id) => this.createActionService.getTeamDef(id)),
 		shareReplay({ bufferSize: 1, refCount: true })
 	);
 	featureGroups = this.teamDef.pipe(
 		filter((t) => t !== undefined && t !== null && t.length > 0),
-		switchMap((teams) => this.actionService.getFeatureGroups(teams[0].id))
+		switchMap((teams) =>
+			this.createActionService.getFeatureGroups(teams[0].id)
+		)
 	);
 	sprints = this.teamDef.pipe(
 		filter((t) => t !== undefined && t !== null && t.length > 0),
-		switchMap((teams) => this.actionService.getSprints(teams[0].id))
+		switchMap((teams) => this.createActionService.getSprints(teams[0].id))
 	);
 	private _priorityKeys = Object.keys(PRIORITIES);
 	private _priorityValues = Object.values(PRIORITIES);
@@ -183,7 +186,7 @@ export class CreateActionDialogComponent {
 	constructor(
 		public dialogRef: MatDialogRef<CreateActionDialogComponent>,
 		@Inject(MAT_DIALOG_DATA) public data: CreateAction,
-		public actionService: ActionStateButtonService,
+		public createActionService: CreateActionService,
 		public userService: ActionUserService
 	) {}
 
@@ -205,7 +208,7 @@ export class CreateActionDialogComponent {
 
 	private _selectWorkType(workType: WorkType) {
 		this.workType = workType;
-		this.actionService.workTypeValue = this.workType.name;
+		this.createActionService.workTypeValue = this.workType.name;
 		this.data.createBranchDefault = this.workType.createBranchDefault;
 		this._selectActionableItem(new actionableItem());
 	}
diff --git a/web/apps/osee/src/app/shared/components/create-action-button/internal/services/create-action.service.mock.ts b/web/apps/osee/src/app/shared/components/create-action-button/internal/services/create-action.service.mock.ts
new file mode 100644
index 00000000000..25350d363b1
--- /dev/null
+++ b/web/apps/osee/src/app/shared/components/create-action-button/internal/services/create-action.service.mock.ts
@@ -0,0 +1,42 @@
+/*********************************************************************
+ * Copyright (c) 2024 Boeing
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Boeing - initial API and implementation
+ **********************************************************************/
+import { of } from 'rxjs';
+import { CreateActionService } from './create-action.service';
+import { CreateAction } from '@osee/shared/types/configuration-management';
+import {
+	MockUserResponse,
+	testnewActionResponse,
+	testWorkType,
+	testAgilePoints,
+} from '@osee/shared/testing';
+
+export const createActionServiceMock: Partial<CreateActionService> = {
+	getPoints() {
+		return of(testAgilePoints);
+	},
+	createAction(value: CreateAction, category: string) {
+		return of(testnewActionResponse);
+	},
+	user: of(MockUserResponse),
+	actionableItems: of([
+		{
+			id: '123',
+			name: 'First ARB',
+		},
+		{
+			id: '456',
+			name: 'Second ARB',
+		},
+	]),
+	workTypes: of([testWorkType]),
+};
diff --git a/web/apps/osee/src/app/shared/components/create-action-button/internal/services/create-action.service.spec.ts b/web/apps/osee/src/app/shared/components/create-action-button/internal/services/create-action.service.spec.ts
new file mode 100644
index 00000000000..bb8e66422ea
--- /dev/null
+++ b/web/apps/osee/src/app/shared/components/create-action-button/internal/services/create-action.service.spec.ts
@@ -0,0 +1,78 @@
+/*********************************************************************
+ * Copyright (c) 2024 Boeing
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Boeing - initial API and implementation
+ **********************************************************************/
+import { TestBed } from '@angular/core/testing';
+import { CreateActionService } from './create-action.service';
+import { TestScheduler } from 'rxjs/testing';
+import { CreateAction } from '@osee/shared/types/configuration-management';
+import {
+	BranchInfoServiceMock,
+	MockUserResponse,
+	actionServiceMock,
+	testnewActionResponse,
+} from '@osee/shared/testing';
+import { ActionService, BranchInfoService } from '@osee/shared/services';
+import { BranchRoutedUIService } from '../../../internal/services/branch-routed-ui.service';
+import { branchRoutedUiServiceMock } from '../../../internal/services/branch-routed-ui.service.mock';
+import { UserDataAccountService } from '@osee/auth';
+import { userDataAccountServiceMock } from '@osee/auth/testing';
+
+describe('CreateActionService', () => {
+	let service: CreateActionService;
+	let scheduler: TestScheduler;
+
+	beforeEach(() => {
+		TestBed.configureTestingModule({
+			providers: [
+				{ provide: ActionService, useValue: actionServiceMock },
+				{ provide: BranchInfoService, useValue: BranchInfoServiceMock },
+				{
+					provide: BranchRoutedUIService,
+					useValue: branchRoutedUiServiceMock,
+				},
+				{
+					provide: UserDataAccountService,
+					useValue: userDataAccountServiceMock,
+				},
+			],
+		});
+		service = TestBed.inject(CreateActionService);
+	});
+
+	beforeEach(
+		() =>
+			(scheduler = new TestScheduler((actual, expected) => {
+				expect(actual).toEqual(expected);
+			}))
+	);
+
+	it('should be created', () => {
+		expect(service).toBeTruthy();
+	});
+
+	it('should add an action', () => {
+		scheduler.run(({ expectObservable }) => {
+			expectObservable(
+				service.createAction(new CreateAction(MockUserResponse), '3')
+			).toBe('(a|)', { a: testnewActionResponse });
+		});
+	});
+	it('should add an action and create a branch', () => {
+		scheduler.run(({ expectObservable }) => {
+			const create = new CreateAction(MockUserResponse);
+			create.createBranchDefault = true;
+			expectObservable(service.createAction(create, '3')).toBe('(a|)', {
+				a: testnewActionResponse,
+			});
+		});
+	});
+});
diff --git a/web/apps/osee/src/app/shared/components/create-action-button/internal/services/create-action.service.ts b/web/apps/osee/src/app/shared/components/create-action-button/internal/services/create-action.service.ts
new file mode 100644
index 00000000000..9f768809e9b
--- /dev/null
+++ b/web/apps/osee/src/app/shared/components/create-action-button/internal/services/create-action.service.ts
@@ -0,0 +1,134 @@
+/*********************************************************************
+ * Copyright (c) 2024 Boeing
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Boeing - initial API and implementation
+ **********************************************************************/
+import { Injectable } from '@angular/core';
+import { UserDataAccountService } from '@osee/auth';
+import {
+	ActionService,
+	BranchInfoService,
+	CurrentBranchInfoService,
+	UiService,
+} from '@osee/shared/services';
+import {
+	CreateAction,
+	CreateNewAction,
+} from '@osee/shared/types/configuration-management';
+import {
+	BehaviorSubject,
+	iif,
+	map,
+	of,
+	shareReplay,
+	switchMap,
+	tap,
+} from 'rxjs';
+import { BranchRoutedUIService } from '../../../internal/services/branch-routed-ui.service';
+
+@Injectable({
+	providedIn: 'root',
+})
+export class CreateActionService {
+	private _workType = new BehaviorSubject<string>('');
+
+	currentBranch = this.currentBranchService.currentBranch;
+
+	workTypes = this.actionService
+		.getWorkTypes()
+		.pipe(shareReplay({ bufferSize: 1, refCount: true }));
+
+	actionableItems = this.workType.pipe(
+		switchMap((workType) =>
+			this.actionService.getActionableItems(workType)
+		),
+		shareReplay({ bufferSize: 1, refCount: true })
+	);
+
+	constructor(
+		private actionService: ActionService,
+		private branchService: BranchInfoService,
+		private uiService: UiService,
+		private branchedRouter: BranchRoutedUIService,
+		private accountService: UserDataAccountService,
+		private currentBranchService: CurrentBranchInfoService
+	) {}
+
+	get user() {
+		return this.accountService.user;
+	}
+
+	get workType() {
+		return this._workType.asObservable();
+	}
+
+	set workTypeValue(workType: string) {
+		this._workType.next(workType);
+	}
+
+	getVersions(actionableItem: string) {
+		return this.actionService.getVersions(actionableItem);
+	}
+
+	getChangeTypes(actionableItem: string) {
+		return this.actionService.getChangeTypes(actionableItem);
+	}
+	getPoints() {
+		return this.actionService.getPoints();
+	}
+	getCreateActionFields(actionableItemId: string) {
+		return this.actionService.getCreateActionFields(actionableItemId);
+	}
+	getTeamDef(actionableItemId: string) {
+		return this.actionService.getTeamDef(actionableItemId);
+	}
+	getFeatureGroups(teamDefId: string) {
+		return this.actionService.getFeatureGroups(teamDefId);
+	}
+	getSprints(teamDefId: string) {
+		return this.actionService.getSprints(teamDefId);
+	}
+
+	public createAction(value: CreateAction, category: string) {
+		if (typeof value?.description === 'undefined') {
+			return of(); // @todo replace with a false response
+		}
+		if (!value.createBranchDefault) {
+			return this.actionService.createAction(new CreateNewAction(value));
+		}
+		return this.actionService.createBranch(new CreateNewAction(value)).pipe(
+			switchMap((branchResponse) =>
+				iif(
+					() => category !== '0',
+					this.branchService.setBranchCategory(
+						branchResponse.workingBranchId.id,
+						category
+					),
+					of(branchResponse)
+				).pipe(
+					map(() => branchResponse),
+					tap((resp) => {
+						this.uiService.updated = true;
+						if (resp.results.success) {
+							const _branchType =
+								resp.workingBranchId.branchType === '2'
+									? 'baseline'
+									: 'working';
+							this.branchedRouter.position = {
+								type: _branchType,
+								id: resp.workingBranchId.id,
+							};
+						}
+					})
+				)
+			)
+		);
+	}
+}
diff --git a/web/apps/osee/src/app/shared/components/public-api.ts b/web/apps/osee/src/app/shared/components/public-api.ts
index 5c0fc057a31..1da65fbf6c3 100644
--- a/web/apps/osee/src/app/shared/components/public-api.ts
+++ b/web/apps/osee/src/app/shared/components/public-api.ts
@@ -13,13 +13,14 @@
 export * from './mat-option-loading/mat-option-loading/mat-option-loading.component';
 export * from './branch-picker/branch-picker/branch-picker.component';
 export * from './action-state-button/action-drop-down/action-drop-down.component';
+export * from './action-state-button/current-action-drop-down/current-action-drop-down.component';
 export * from './branch-undo-button/undo-button-branch/undo-button-branch.component';
+export * from './create-action-button/create-action-button.component';
 export * from './scroll-to-top-button/scroll-to-top-button.component';
 export * from './snackbar-wrapper/snackbar-wrapper.component';
 export * from './two-layer-add-button/two-layer-add-button.component';
 export * from './applicability-selector/applicability-selector.component';
 export * from './view-selector/view-selector.component';
-export * from './action-state-button/internal/services/action-state-button.service'; /* still need to find a good place for this to live */
 export * from './merge-manager-dialog/merge-manager-dialog.component';
 export * from './attributes-editor/attributes-editor.component';
 export * from './markdown-editor/markdown-editor.component';
diff --git a/web/apps/osee/src/app/shared/components/testing/public-api.ts b/web/apps/osee/src/app/shared/components/testing/public-api.ts
index 9d97b1cfa5d..10544c63ad8 100644
--- a/web/apps/osee/src/app/shared/components/testing/public-api.ts
+++ b/web/apps/osee/src/app/shared/components/testing/public-api.ts
@@ -16,3 +16,4 @@ export * from '../branch-picker/branch-picker/branch-picker.mock.component';
 export * from '../branch-undo-button/branch-undo-button.component.mock';
 export * from '../two-layer-add-button/two-layer-add-button.harness';
 export * from '../applicability-selector/testing/applicability-selector.component.mock';
+export * from '../action-state-button/current-action-drop-down/current-action-drop-down.component.mock';