3 dots menu should be disabled for devices under test

modules/ui/src/app/components/device-item/device-item.component.html

@@ -51,16 +51,27 @@
 <ng-template #basicView let-editable="editable">
   <span class="visually-hidden">{{ device.test_pack }}</span>
   <app-program-type-icon
-    *ngIf="device.test_pack === TestingType.Qualification"
+    *ngIf="
+      device.status !== DeviceStatus.INVALID &&
+      device.test_pack === TestingType.Qualification
+    "
     [type]="ProgramType.Qualification"
     matTooltip="This device will be tested for Qualification."></app-program-type-icon>
   <app-program-type-icon
-    *ngIf="device.test_pack === TestingType.Pilot"
+    *ngIf="
+      device.status !== DeviceStatus.INVALID &&
+      device.test_pack === TestingType.Pilot
+    "
     [type]="ProgramType.Pilot"
     matTooltip="This device will be tested for the Pilot program."></app-program-type-icon>
   <p class="item-manufacturer" *ngIf="!editable">
     <span>{{ device.manufacturer }}</span>
   </p>
+  <mat-icon
+    *ngIf="device.status === DeviceStatus.INVALID"
+    fontSet="material-symbols-outlined">
+    error
+  </mat-icon>
   <div class="item-manufacturer" *ngIf="editable">
     <p class="item-manufacturer-text">{{ device.manufacturer }}</p>
     <mat-icon
@@ -69,9 +80,14 @@
       edit_square</mat-icon
     >
   </div>
-  <div *ngIf="device.status === DeviceStatus.INVALID" class="item-status">
+  <div
+    *ngIf="device.status === DeviceStatus.INVALID"
+    class="item-status item-status-invalid">
     {{ INVALID_DEVICE }}
   </div>
+  <div *ngIf="disabled" class="item-status item-status-under-test">
+    Under test
+  </div>
   <p class="item-name">
     {{ device.model }}
   </p>

modules/ui/src/app/components/device-item/device-item.component.scss

@@ -17,6 +17,7 @@
 @use 'm3-theme' as *;
 @use 'colors';
 @use 'variables';
+@use 'mixins';
 
 $icon-width: 80px;
 $border-radius: 12px;
@@ -81,7 +82,7 @@ $border-radius: 12px;
   width: 100%;
   height: 100%;
   background: inherit;
-  grid-template-columns: auto 1fr 1fr;
+  grid-template-columns: auto auto 1fr;
   grid-template-areas:
     'icon manufacturer status'
     'icon name name';
@@ -90,31 +91,39 @@ $border-radius: 12px;
     cursor: pointer;
 
     .item-manufacturer-icon {
+      position: absolute;
+      right: 0;
       visibility: visible;
       width: 24px;
     }
   }
 
   &:disabled {
-    pointer-events: none;
-    opacity: 0.5;
+    @include mixins.disabled;
   }
 }
 
 .item-status {
-  margin-right: 16px;
   grid-area: status;
-  justify-self: end;
-  align-self: end;
-  font-size: 8px;
+  justify-self: start;
+  align-self: center;
+  font-size: 11px;
+  font-weight: 500;
   line-height: 16px;
   letter-spacing: 0.64px;
   text-transform: uppercase;
   max-width: 100%;
-  border-radius: 2px;
-  background: colors.$red-700;
-  color: colors.$white;
-  padding: 0px 4px;
+  border-radius: 200px;
+  padding: 0 7px;
+  margin-left: -20px;
+  &-under-test {
+    background: colors.$on-secondary-container;
+    color: colors.$on-secondary;
+  }
+  &-invalid {
+    background: colors.$on-error;
+    color: colors.$on-error-container;
+  }
 }
 
 .item-manufacturer {
@@ -128,6 +137,8 @@ $border-radius: 12px;
   font-weight: 500;
   line-height: 24px;
   text-align: start;
+  position: relative;
+  padding-right: variables.$icon-size;
 
   .item-manufacturer-text {
     margin: 0;
@@ -165,10 +176,16 @@ $border-radius: 12px;
   margin: 0;
 }
 
-app-program-type-icon {
+app-program-type-icon,
+mat-icon {
   grid-area: icon;
 }
 
 .device-item-outdated {
   height: 100%;
+  .item-manufacturer,
+  .item-name,
+  mat-icon {
+    color: colors.$on-error-container;
+  }
 }

modules/ui/src/app/components/device-item/device-item.component.spec.ts

@@ -120,6 +120,21 @@ describe('DeviceItemComponent', () => {
         expect(status).toBeTruthy();
         expect(status?.textContent?.trim()).toEqual('Outdated');
       });
+
+      it('should have error icon', () => {
+        const icon = compiled.querySelector('mat-icon')?.textContent?.trim();
+
+        expect(icon).toEqual('error');
+      });
+    });
+
+    it('should have item status as Under test', () => {
+      component.disabled = true;
+      fixture.detectChanges();
+      const status = compiled.querySelector('.item-status');
+
+      expect(status).toBeTruthy();
+      expect(status?.textContent?.trim()).toEqual('Under test');
     });
 
     it('should emit device on click edit button', () => {

modules/ui/src/app/components/device-tests/device-tests.component.scss

@@ -15,6 +15,7 @@
  */
 @use 'colors';
 @use 'variables';
+@use 'mixins';
 
 :host {
   overflow: hidden;
@@ -27,8 +28,7 @@
 }
 
 .disabled {
-  pointer-events: none;
-  opacity: 0.6;
+  @include mixins.disabled;
 }
 
 .device-tests-title {

modules/ui/src/app/components/program-type-icon/program-type-icon.component.ts

@@ -28,8 +28,6 @@ import { MatIcon } from '@angular/material/icon';
     }
     .icon {
       display: flex;
-      width: 16px;
-      height: 16px;
       line-height: 16px;
     }
   `,

modules/ui/src/app/pages/devices/devices.component.html

@@ -67,6 +67,7 @@
     <app-device-item
       *ngIf="entity"
       [ngClass]="{ selected: entity.mac_addr === vm.selectedDevice?.mac_addr }"
+      [class.disabled]="entity?.mac_addr === vm.deviceInProgress?.mac_addr"
       [deviceView]="DeviceView.WithActions"
       [device]="entity"
       [disabled]="entity?.mac_addr === vm.deviceInProgress?.mac_addr"

modules/ui/src/app/pages/devices/devices.component.scss

@@ -14,10 +14,19 @@
  * limitations under the License.
  */
 @use 'variables';
+@use 'mixins';
 
 .device-add-button {
   font-family: variables.$font-text;
   margin-bottom: 12px;
   width: fit-content;
   height: 56px;
 }
+
+app-device-item.disabled + ::ng-deep * {
+  @include mixins.disabled;
+}
+app-device-item.disabled,
+app-device-item.disabled + ::ng-deep * {
+  cursor: not-allowed;
+}

modules/ui/src/theming/mixins.scss

@@ -61,3 +61,8 @@
     z-index: -1;
   }
 }
+
+@mixin disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}