WS-561: Capability definition UI simplification

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

@@ -4,8 +4,11 @@
   </header>
   <div id="definition-parameters-and-versions" class="container-fluid">
     <div class="row">
-      <div id="capability-definition-container" class="col">
-        <span id="capability-label">Capability</span>
+      <div id="capability-definition-container" class="col-5">
+        <span id="capability-label"
+          >Capability:
+          <strong class="pl-1">{{ capabilityRequest.capability_name.toUpperCase() }}</strong></span
+        >
         <app-capability-definition
           *ngIf="capability !== undefined"
           id="capability-definition"
@@ -40,7 +43,7 @@
           >
         </div>
       </div>
-      <div id="parameters-files-container" class="col">
+      <div id="parameters-files-container" class="col-7">
         <span id="parameters-label">Parameters</span>
         <app-parameters
           id="parameters"

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

-<div id="definition-container">
-  <h5 id="capability-name">{{ capability.name }}</h5>
+<div id="definition-container" class="container-fluid rounded-top rounded-3 py-2">
+  <!--  <h5 id="capability-name"><strong>{{ capability.name.toUpperCase() }}</strong></h5>-->
 
   <div id="step-sequence">
-    <div class="container-fluid">
-      <div
-        class="row bg-primary rounded rounded-lg mb-1 text-white py-2 align-items-center"
-        *ngFor="let step of capabilityStepList"
+    <div
+      class="capability-step row rounded rounded-lg my-2 mx-1 py-2 align-items-center"
+      *ngFor="let step of capabilityStepList"
+    >
+      <span class="col text-left px-3"
+        >{{ step[0].toUpperCase() }}
+        <strong class="pl-2" *ngIf="step[1] !== undefined">{{
+          step[1].toUpperCase()
+        }}</strong></span
       >
-        <div class="col">{{ step[0].toUpperCase() }} {{ step[1] }}</div>
-        <div class="col-auto">
-          <span class="fas fa-play-circle fa-2x"></span>
-        </div>
-      </div>
     </div>
   </div>
 </div>

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

 @import "src/variables";
 
+.capability-step {
+  background-color: $parameters-pill-color;
+}
+
 #definition-container {
   background-color: white;
-  border-radius: 10px;
-  border-top: 4px $container-shadow-color solid;
 
-  padding: 0.25rem 0.5rem;
+  //padding: 0.25rem 0.5rem;
 }

apps/web/src/app/workspaces/components/capability-request/components/status-buttons/status-badge.component.html → apps/web/src/app/workspaces/components/capability-request/components/status-badges/status-badge.component.html

@@ -2,35 +2,23 @@
   id="request-status-badge-complete"
   class="badge badge-pill badge-success py-2"
   *ngIf="capabilityRequest.state === 'Complete'"
-  ><span class="fas fa-check"></span
-  ><span id="request-status-badge-txt-complete" class="pl-2">{{
-    capabilityRequest.state.toUpperCase()
-  }}</span>
+  ><span id="request-status-badge-txt-complete">{{ capabilityRequest.state.toUpperCase() }}</span>
 </span>
 <span
   id="request-status-badge-running"
   class="badge badge-pill badge-primary py-2"
   *ngIf="capabilityRequest.state === 'Submitted'"
-  ><span class="fas fa-play"></span
-  ><span id="request-status-badge-txt-running" class="pl-2">{{
-    capabilityRequest.state.toUpperCase()
-  }}</span>
+  ><span id="request-status-badge-txt-running">{{ capabilityRequest.state.toUpperCase() }}</span>
 </span>
 <span
   id="request-status-badge-ready"
   class="badge badge-pill badge-secondary py-2"
   *ngIf="capabilityRequest.state === 'Created'"
-  ><span class="fas fa-dot-circle"></span
-  ><span id="request-status-badge-txt-ready" class="pl-2">{{
-    capabilityRequest.state.toUpperCase()
-  }}</span>
+  ><span id="request-status-badge-txt-ready">{{ capabilityRequest.state.toUpperCase() }}</span>
 </span>
 <span
   id="request-status-badge-failed"
   class="badge badge-pill badge-danger py-2"
   *ngIf="capabilityRequest.state === 'Failed'"
-  ><span class="fas fa-times"></span
-  ><span id="request-status-badge-txt-failed" class="pl-2">{{
-    capabilityRequest.state.toUpperCase()
-  }}</span>
+  ><span id="request-status-badge-txt-failed">{{ capabilityRequest.state.toUpperCase() }}</span>
 </span>

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

@@ -9,7 +9,7 @@ import { RequestHeaderComponent } from "./components/capability-request/componen
 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 { StatusBadgeComponent } from "./components/capability-request/components/status-buttons/status-badge.component";
+import { StatusBadgeComponent } from "./components/capability-request/components/status-badges/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";