Updated styling and refactored out the newly organized components

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

@@ -40,40 +40,27 @@
           >
         </div>
       </div>
-      <div id="parameters-container" class="col">
+      <div id="parameters-files-container" class="col">
         <span id="parameters-label">Parameters</span>
-        <app-parameters id="parameters" [capabilityRequest]="capabilityRequest"></app-parameters>
+        <app-parameters
+          id="parameters"
+          class="pt-2"
+          [capabilityRequest]="capabilityRequest"
+        ></app-parameters>
+        <br />
         <span id="files-label">Files</span>
-        <div id="files" *ngIf="currentVersion !== undefined">
-          <div *ngFor="let file of currentVersion.files">
-            {{ file.filename }}
-          </div>
-        </div>
-        <div class="d-flex justify-content-center py-3">
-          <div class="col d-flex justify-content-center align-items-start">
-            <app-create-new-version-form
-              id="create-new-version-form"
-              [capabilityRequest]="capabilityRequest"
-            ></app-create-new-version-form>
-          </div>
-          <div
-            class="col d-flex justify-content-center align-items-start"
-            *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>
+        <app-files
+          id="files"
+          class="pt-2"
+          [capabilityVersion]="currentVersion"
+          *ngIf="currentVersion !== undefined"
+        ></app-files>
+        <br />
+        <app-request-operations
+          id="operations"
+          class="pt-2"
+          [capabilityRequest]="capabilityRequest"
+        ></app-request-operations>
       </div>
     </div>
   </div>

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

-import { Component, Input, OnInit } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
 import { CapabilityRequest } from "../../model/capability-request";
 import { ActivatedRoute } from "@angular/router";
 import { DataRetrieverService } from "../../services/data-retriever.service";
 import { CapabilityExecution } from "../../model/capability-execution";
 import { Capability } from "../../model/capability";
 import { CapabilityRequestService } from "../../services/capability-request.service";
-import { CapabilityLauncherService } from "../../services/capability-launcher.service";
 import { CapabilityVersion } from "../../model/capability-version";
 
 @Component({
@@ -30,16 +29,6 @@ export class CapabilityRequestComponent implements OnInit {
     },
     error: (error) => console.error("Error when retrieving capability request:" + error),
   };
-  // Observer for submitting capability request objects (returns a capability execution)
-  private submitRequestObserver = {
-    next: (submitResponse: CapabilityExecution) => {
-      this.capabilityExecution = submitResponse;
-      window.location.reload();
-    },
-    error: (error) => {
-      console.log(error);
-    },
-  };
   // Observer for capability objects
   private capabilityObserver = {
     next: (capability) => {
@@ -63,7 +52,6 @@ export class CapabilityRequestComponent implements OnInit {
     private route: ActivatedRoute,
     private dataRetriever: DataRetrieverService,
     private capabilityRequestService: CapabilityRequestService,
-    private capabilityLauncherService: CapabilityLauncherService,
   ) {
     const requestID = parseInt(this.route.snapshot.paramMap.get("id"));
     this.capabilityRequestService