Internal change

src/devtools/mobileharness/fe/v6/angular/app/core/services/mock_data/hosts/overview_13.ts

@@ -0,0 +1,108 @@
+import {DeviceSummary, HostOverview} from '../../../models/host_overview';
+import {MockHostScenario} from '../models';
+
+import {createDefaultUiStatus} from './ui_status_utils';
+
+const overview: HostOverview = {
+  hostName: 'decommission-test-host.prod.example.com',
+  ip: '192.168.13.113',
+  os: 'gLinux',
+  labTypeDisplayNames: ['Satellite Lab'],
+  labServer: {
+    connectivity: {
+      state: 'RUNNING',
+      title: 'Running',
+      tooltip:
+        'Host is running and connected. OmniLab is receiving heartbeats.',
+    },
+    activity: {
+      state: 'STARTED',
+      title: 'Started',
+      tooltip:
+        'The Lab Server process was started by the release system, and OmniLab is receiving heartbeats.',
+    },
+    version: 'R126.0.0',
+    passThroughFlags: '',
+  },
+  daemonServer: {
+    status: {
+      state: 'RUNNING',
+      title: 'Running',
+      tooltip: 'The Daemon Server is running.',
+    },
+    version: '24.09.01',
+  },
+  properties: {},
+};
+
+const deviceSummaries: DeviceSummary[] = [
+  {
+    id: 'MISSING-DEV-1',
+    healthState: {
+      health: 'OUT_OF_SERVICE_NEEDS_FIXING',
+      title: 'Out of Service (Needs Fixing)',
+      tooltip: 'Device is missing.',
+    },
+    types: [{type: 'AndroidRealDevice', isAbnormal: false}],
+    deviceStatus: {isCritical: true, status: 'MISSING'},
+    label: 'old-device-1',
+    requiredDims: 'pool:missing',
+    model: 'Pixel 6',
+    version: '13',
+  },
+  {
+    id: 'MISSING-DEV-2',
+    healthState: {
+      health: 'OUT_OF_SERVICE_NEEDS_FIXING',
+      title: 'Out of Service (Needs Fixing)',
+      tooltip: 'Device is missing.',
+    },
+    types: [{type: 'AndroidRealDevice', isAbnormal: false}],
+    deviceStatus: {isCritical: true, status: 'MISSING'},
+    label: 'old-device-2',
+    requiredDims: 'pool:missing',
+    model: 'Pixel 6 Pro',
+    version: '13',
+  },
+  {
+    id: 'MISSING-DEV-3',
+    healthState: {
+      health: 'OUT_OF_SERVICE_NEEDS_FIXING',
+      title: 'Out of Service (Needs Fixing)',
+      tooltip: 'Device is missing.',
+    },
+    types: [{type: 'AndroidRealDevice', isAbnormal: false}],
+    deviceStatus: {isCritical: true, status: 'MISSING'},
+    label: 'old-device-3',
+    requiredDims: 'pool:missing',
+    model: 'Pixel 7',
+    version: '14',
+  },
+  {
+    id: 'ACTIVE-DEV-4',
+    healthState: {
+      health: 'IN_SERVICE_IDLE',
+      title: 'In Service (Idle)',
+      tooltip: 'Device is healthy and ready for tasks.',
+    },
+    types: [{type: 'AndroidRealDevice', isAbnormal: false}],
+    deviceStatus: {isCritical: false, status: 'IDLE'},
+    label: 'active-device',
+    requiredDims: 'pool:active',
+    model: 'Pixel 8',
+    version: '14',
+  },
+];
+
+/** Mock host overview data. */
+export const OVERVIEW_13: MockHostScenario = {
+  hostName: 'decommission-test-host.prod.example.com',
+  scenarioName: 'Overview 13: Decommission Devices',
+  overview,
+  deviceSummaries,
+  hostConfigResult: {
+    hostConfig: undefined,
+    uiStatus: createDefaultUiStatus(),
+  },
+  defaultDeviceConfig: null,
+};

src/devtools/mobileharness/fe/v6/angular/app/core/services/mock_data/index.ts

@@ -49,6 +49,7 @@ import {OVERVIEW_09} from './hosts/overview_09';
 import {OVERVIEW_10} from './hosts/overview_10';
 import {OVERVIEW_11} from './hosts/overview_11';
 import {OVERVIEW_12} from './hosts/overview_12';
+import {OVERVIEW_13} from './hosts/overview_13';
 import {MockDeviceScenario, MockHostScenario} from './models';
 
 /**
@@ -107,4 +108,5 @@ export const MOCK_HOST_SCENARIOS: MockHostScenario[] = [
   OVERVIEW_10,
   OVERVIEW_11,
   OVERVIEW_12,
+  OVERVIEW_13,
 ];

src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_config/device_empty/device_empty.ng.html

@@ -14,7 +14,7 @@ <h3 class="host-missing-title">Host Configuration Not Found</h3>
         </p>
         <a
           href="/hosts/{{ hostName }}"
-          class="wizard-button wizard-button-primary"
+          class="primary-button"
           target="_blank"
           rel="noopener noreferrer"
         >
@@ -58,7 +58,7 @@ <h3 class="empty-config-title">{{ title }}</h3>
           </mat-form-field>
           <button
             mat-button
-            class="load-button wizard-button wizard-button-primary"
+            class="load-button primary-button"
             (click)="loadAndReviewConfig()"
           >
             Load & Review Configuration
@@ -72,7 +72,7 @@ <h3 class="empty-config-title">{{ title }}</h3>
   }
 
   <ng-template #actionsTemplate>
-    <button mat-button mat-dialog-close class="wizard-button wizard-button-secondary">
+    <button mat-button mat-dialog-close class="cancel-button">
       Cancel
     </button>
   </ng-template>

src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_config/device_empty/device_empty.scss

@@ -1,4 +1,13 @@
 @use '../../../../../shared/styles/configuration' as config;
+@use '../../../../../shared/styles/common';
+
+.primary-button {
+  @include common.shared-button('primary');
+}
+
+.cancel-button {
+  @include common.shared-button('secondary');
+}
 
 .empty-config-grid {
   @media (min-width: 640px) {

src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_config/device_settings/device_settings.ng.html

@@ -59,14 +59,14 @@
       <app-footer [param]="{deviceId: deviceId, hostName: ''}" class="main-footer">
         <ng-container footer-buttons>
           <button
-            class="wizard-button wizard-button-secondary"
+            class="discard-button"
             [disabled]="!isCategoryDirty(activeSection())"
             (click)="discard()"
           >
             Discard Changes
           </button>
           <button
-            class="wizard-button wizard-button-primary"
+            class="save-button"
             [disabled]="!isCategoryDirty(activeSection()) || hasError || saving()"
             (click)="save()"
           >

src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_config/device_settings/device_settings.scss

@@ -1,5 +1,18 @@
 @use '@angular/material' as mat;
 @use '../../../../../shared/styles/configuration' as config;
+@use '../../../../../shared/styles/common';
+
+.discard-button {
+  @include common.shared-button('secondary');
+}
+
+.save-button {
+  @include common.shared-button('primary');
+}
+
+.wizard-button-spinner {
+  margin-right: 0.5rem;
+}
 
 :host {
   @include mat.button-toggle-overrides((

src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_config/device_wizard/device_wizard.ng.html

@@ -53,9 +53,9 @@
       ></app-review-table>
     </main>
     <ng-template #actionsTemplate>
-      <button mat-dialog-close class="wizard-button wizard-button-tertiary"> Cancel </button>
+      <button mat-dialog-close class="cancel-button"> Cancel </button>
       <button
-        class="wizard-button wizard-button-primary"
+        class="apply-button"
         [disabled]="applyChangesDisabled() || verifying()"
         (click)="submit()"
       >

src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_config/device_wizard/device_wizard.scss

@@ -1,5 +1,14 @@
 @use '@angular/material' as mat;
 @use '../../../../../shared/styles/configuration' as config;
+@use '../../../../../shared/styles/common';
+
+.cancel-button {
+  @include common.shared-button('tertiary');
+}
+
+.apply-button {
+  @include common.shared-button('primary');
+}
 
 :host {
   @include mat.stepper-overrides((

src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_config/host_managed/host_managed.ng.html

@@ -35,10 +35,10 @@ <h3 class="host-managed-title">Host Default Configuration</h3>
   </mat-dialog-content>
   <ng-template #actionsTemplate>
     <mat-dialog-actions align="end" class="actions-container">
-      <button mat-button mat-dialog-close class="wizard-button wizard-button-secondary"
+      <button mat-button mat-dialog-close class="close-button"
         >Close</button
       >
-      <a href="/hosts/{{ hostName }}" class="wizard-button wizard-button-primary">Go to Host Configuration</a>
+      <a href="/hosts/{{ hostName }}" class="go-to-host-button">Go to Host Configuration</a>
     </mat-dialog-actions>
   </ng-template>
 </app-dialog>

src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_config/host_managed/host_managed.scss

@@ -1,4 +1,5 @@
 @use '../../../../../shared/styles/configuration' as config;
+@use '../../../../../shared/styles/common';
 
 .host-managed-content {
   font-size: 0.875rem;
@@ -63,9 +64,14 @@
   display: flex;
   gap: 0.75rem;
   align-items: center;
+}
 
-  a {
-    text-decoration: none;
-    font-family: config.$labconsole-font;
-  }
+.close-button {
+  @include common.shared-button('secondary');
+}
+
+.go-to-host-button {
+  @include common.shared-button('primary');
+  text-decoration: none;
+  font-family: config.$labconsole-font;
 }

src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_overview_tab/device_overview_tab.scss

@@ -561,10 +561,6 @@
   font-size: 0.9rem;
 }
 
-
-
-
-
 .mt-6 {
   margin-top: 1.5rem;
 }

src/devtools/mobileharness/fe/v6/angular/app/features/host_detail/components/host_config/host_empty/host_empty.ng.html

@@ -33,7 +33,7 @@ <h3 class="empty-config-title">{{ title }}</h3>
           />
         </mat-form-field>
         <button
-          class="load-button wizard-button wizard-button-primary"
+          class="load-button"
           (click)="loadAndReviewConfig()"
         >
           Load & Review Configuration
@@ -46,7 +46,7 @@ <h3 class="empty-config-title">{{ title }}</h3>
   </mat-dialog-content>
 
   <ng-template #actionsTemplate>
-    <button mat-button mat-dialog-close class="wizard-button wizard-button-tertiary">
+    <button mat-button mat-dialog-close class="cancel-button">
       Cancel
     </button>
   </ng-template>

src/devtools/mobileharness/fe/v6/angular/app/features/host_detail/components/host_config/host_empty/host_empty.scss

@@ -1,7 +1,16 @@
 @use '../../../../../shared/styles/configuration' as config;
+@use '../../../../../shared/styles/common';
+
+.load-button {
+  @include common.shared-button('primary');
+}
+
+.cancel-button {
+  @include common.shared-button('tertiary');
+}
 
 .empty-config-grid {
-   @media (min-width: 640px) {
+  @media (min-width: 640px) {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }

src/devtools/mobileharness/fe/v6/angular/app/features/host_detail/components/host_config/host_wizard/host_wizard.ng.html

@@ -82,9 +82,9 @@ <h4 class="default-wifi-title text-gray-700">Device Wi-Fi</h4>
       ></app-review-table>
     </main>
     <ng-template #actionsTemplate>
-      <button mat-dialog-close class="wizard-button wizard-button-tertiary"> Cancel </button>
+      <button mat-dialog-close class="cancel-button"> Cancel </button>
       <button
-        class="wizard-button wizard-button-primary"
+        class="apply-button"
         [disabled]="applyChangesDisabled() || verifying()"
         (click)="submit()"
       >

src/devtools/mobileharness/fe/v6/angular/app/features/host_detail/components/host_config/host_wizard/host_wizard.scss

@@ -1,4 +1,13 @@
 @use '../../../../../shared/styles/configuration' as config;
+@use '../../../../../shared/styles/common';
+
+.cancel-button {
+  @include common.shared-button('tertiary');
+}
+
+.apply-button {
+  @include common.shared-button('primary');
+}
 
 .default-title,
 .review-title {