split the form on /workspaces into three separate forms for each of the different capabilities

apps/web/src/app/workspaces/workspaces.component.html

-<div class="container-fluid py-3">
+<div class="container border border-dark rounded py-3 mt-2">
+  <h4>Null Capability</h4>
+  <div id="button-container" class="d-flex justify-content-center py-2">
+    <div class="d-flex px-2">
+      <button
+        type="button"
+        id="launchNullCapabilityBtn"
+        class="btn btn-secondary btn-lg"
+        (click)="nullButtonOnClick()"
+      >
+        Launch null capability
+      </button>
+    </div>
+  </div>
+</div>
+<div class="container border border-dark rounded py-3 mt-2">
+  <h4>Download or Calibration</h4>
   <div class="row p-3">
     <div class="col-6">
       <div class="md-form">
@@ -40,16 +56,6 @@
     </div>
   </div>
   <div id="button-container" class="d-flex justify-content-center py-2">
-    <div class="d-flex px-2">
-      <button
-        type="button"
-        id="launchNullCapabilityBtn"
-        class="btn btn-secondary btn-lg"
-        (click)="nullButtonOnClick()"
-      >
-        Launch null capability
-      </button>
-    </div>
     <div class="d-flex px-2">
       <button
         type="button"
@@ -72,7 +78,8 @@
     </div>
   </div>
 </div>
-<div class="container-fluid py-3">
+<div class="container border rounded border-dark py-3 my-2">
+  <h4>Standard CMS Imaging</h4>
   <div class="row p-3 mt-4">
     <div class="col-4">
       <div class="md-form">
@@ -96,12 +103,26 @@
         />
       </div>
     </div>
-    <div class="col-3 mb-0 align-self-md-end">
+    <div class="col-3">
+      <div class="md-form">
+        <label for="userEmail" class="">Email Address</label>
+        <input
+          type="text"
+          id="userEmail"
+          [value]="userEmail"
+          (change)="setUserEmail($event.target.value)"
+          class="form-control"
+        />
+      </div>
+    </div>
+  </div>
+  <div id="button-container" class="d-flex justify-content-center py-2">
+    <div class="d-flex px-2">
       <button 
-        class="btn btn-lg btn-info"
+        class="btn btn-lg btn-warning"
         id="cms-imaging-submit"
-        (click)="standardLaunchCapabilityOnClick('std_cms_imaging')">
-        <span class="fas fa-cog"></span><span class="pl-2">Create Standard Imaging Request</span>
+        (click)="LaunchImagingCapabilityOnClick('std_cms_imaging')">
+        Launch standard CMS imaging
       </button>
     </div>
   </div>

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

@@ -40,8 +40,6 @@ export class WorkspacesComponent implements OnInit {
    * OnClick method that creates a capability request a given capability and submits it with the standard parameters:
    * - Product locator
    * - User email
-   * - CMS Path
-   * - SDM ID
    * FIXME: Remove check for calibration once it is implemented
    */
   standardLaunchCapabilityOnClick(capabilityName: string): void {
@@ -49,6 +47,18 @@ export class WorkspacesComponent implements OnInit {
     this.launchCapability(capabilityName, {
       product_locator: this.productLocator,
       user_email: this.userEmail,
+    });
+  }
+
+  /**
+   * OnClick method that creates a capability request for a imaging capability and submits it with the CMS imaging parameters:
+   * - User email
+   * - CMS Path
+   * - SDM ID
+   */
+  LaunchImagingCapabilityOnClick(capabilityName: string): void {
+    this.launchCapability(capabilityName, {
+      user_email: this.userEmail,
       cms_path: this.cmsPath,
       sdmId: this.sdmId,
     });