Moved request operations (create new version button, submit button) into

separate component; did some restyling

apps/web/src/app/workspaces/components/capability-request/components/request-operations/request-operations.component.html

+<div id="operations-container" class="d-flex justify-content-center align-content-center p-3">
+  <div class="d-flex row">
+    <div class="col-auto d-flex">
+      <app-create-new-version-form
+        id="create-new-version-form"
+        class="d-flex align-self-center"
+        [capabilityRequest]="capabilityRequest"
+      ></app-create-new-version-form>
+    </div>
+    <div class="col-auto d-flex" *ngIf="capabilityRequest.state === 'Created'">
+      <button
+        id="submit-button"
+        type="button"
+        class="btn btn-info"
+        (click)="
+          capabilityLauncherService.submit(capabilityRequest.id).subscribe(submitRequestObserver)
+        "
+      >
+        <span class="fas fa-paper-plane"></span><span class="pl-2">Submit Request</span>
+      </button>
+    </div>
+  </div>
+</div>

apps/web/src/app/workspaces/components/capability-request/components/request-operations/request-operations.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RequestOperationsComponent } from './request-operations.component';
+
+describe('RequestOperationsComponent', () => {
+  let component: RequestOperationsComponent;
+  let fixture: ComponentFixture<RequestOperationsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ RequestOperationsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RequestOperationsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/web/src/app/workspaces/components/capability-request/components/request-operations/request-operations.component.ts

+import { Component, Input, OnInit } from "@angular/core";
+import { CapabilityRequest } from "../../../../model/capability-request";
+import { CapabilityLauncherService } from "../../../../services/capability-launcher.service";
+import { CapabilityExecution } from "../../../../model/capability-execution";
+
+@Component({
+  selector: "app-request-operations",
+  templateUrl: "./request-operations.component.html",
+  styleUrls: ["./request-operations.component.scss"],
+})
+export class RequestOperationsComponent implements OnInit {
+  @Input() capabilityRequest: CapabilityRequest;
+  public capabilityExecution: CapabilityExecution;
+
+  // Observer for submitting capability request objects (returns a capability execution)
+  public submitRequestObserver = {
+    next: (submitResponse: CapabilityExecution) => {
+      this.capabilityExecution = submitResponse;
+      window.location.reload();
+    },
+    error: (error) => {
+      console.log(error);
+    },
+  };
+
+  constructor(public capabilityLauncherService: CapabilityLauncherService) {}
+
+  ngOnInit(): void {}
+}

apps/web/src/app/workspaces/workspaces.module.ts

@@ -7,11 +7,12 @@ import { CapabilityRequestComponent } from "./components/capability-request/capa
 import { RequestHeaderComponent } from "./components/capability-request/components/request-header/request-header.component";
 import { CapabilityDefinitionComponent } from "./components/capability-request/components/capability-definition/capability-definition.component";
 import { ParametersComponent } from "./components/capability-request/components/parameters/parameters.component";
-import { CreateNewVersionFormComponent } from './components/capability-request/components/create-new-version-form/create-new-version-form.component';
+import { CreateNewVersionFormComponent } from "./components/capability-request/components/create-new-version-form/create-new-version-form.component";
 import { StatusBadgeComponent } from "./components/capability-request/components/status-buttons/status-badge.component";
-import { AnalystToolsComponent } from './components/analyst-tools/analyst-tools.component';
-import { ListOfCalibratablesComponent } from './components/list-of-calibratables/list-of-calibratables.component';
-import { FilesComponent } from './components/capability-request/components/files/files.component';
+import { AnalystToolsComponent } from "./components/analyst-tools/analyst-tools.component";
+import { ListOfCalibratablesComponent } from "./components/list-of-calibratables/list-of-calibratables.component";
+import { FilesComponent } from "./components/capability-request/components/files/files.component";
+import { RequestOperationsComponent } from "./components/capability-request/components/request-operations/request-operations.component";
 
 @NgModule({
   declarations: [
@@ -25,6 +26,7 @@ import { FilesComponent } from './components/capability-request/components/files
     AnalystToolsComponent,
     ListOfCalibratablesComponent,
     FilesComponent,
+    RequestOperationsComponent,
   ],
   imports: [CommonModule, WorkspacesRoutingModule, ReactiveFormsModule, FormsModule],
 })