391367079: (feat) [GM3] [Risk profiles] add empty state

modules/ui/src/app/components/empty-message/empty-message.component.html

@@ -22,6 +22,7 @@
   <span class="empty-message-text" [class.one-line]="!message()">
     <span class="empty-message-header">{{ header() }}</span>
     <span class="empty-message-main">{{ message() }}</span>
+    <span class="empty-message-main next-line">{{ messageNext() }}</span>
   </span>
   <ng-content></ng-content>
 </div>

modules/ui/src/app/components/empty-message/empty-message.component.scss

@@ -32,7 +32,7 @@
   grid-template-columns: auto 1fr;
   align-items: end;
   gap: 32px;
-  max-width: 764px;
+  max-width: 886px;
   .empty-message-img {
     grid-row: 1 / 3;
     justify-self: end;
@@ -53,8 +53,8 @@
 
 .empty-message-header {
   font-weight: 400;
-  line-height: 28px;
-  font-size: 22px;
+  line-height: 32px;
+  font-size: 24px;
   color: colors.$on-surface;
 }
 
@@ -63,7 +63,13 @@
   font-weight: 400;
   font-size: 16px;
   line-height: 24px;
-  letter-spacing: 0.1px;
+  letter-spacing: 0px;
   color: colors.$on-surface-variant;
   display: block;
 }
+
+.empty-message-text {
+  .empty-message-main.next-line {
+    padding-top: 0;
+  }
+}

modules/ui/src/app/components/empty-message/empty-message.component.ts

@@ -26,5 +26,6 @@ export class EmptyMessageComponent {
   image = input<string>();
   header = input<string>();
   message = input<string>();
+  messageNext = input<string>();
   isHorizontal = input<boolean>(false);
 }

modules/ui/src/app/components/empty-page/empty-page.component.html

@@ -17,6 +17,7 @@
   [image]="image()"
   [header]="header()"
   [message]="message()"
+  [messageNext]="messageNext()"
   [isHorizontal]="true">
   <ng-content></ng-content>
 </app-empty-message>

modules/ui/src/app/components/empty-page/empty-page.component.ts

@@ -25,4 +25,5 @@ export class EmptyPageComponent {
   image = input<string>();
   header = input<string>();
   message = input<string>();
+  messageNext = input<string>();
 }

modules/ui/src/app/components/list-layout/list-layout.component.scss

@@ -19,6 +19,8 @@
 
 :host {
   position: relative;
+  height: 100%;
+  display: block;
 }
 
 .entity-list app-list-item:has(.selected) {

modules/ui/src/app/model/layout-type.ts

@@ -16,5 +16,5 @@
 
 export enum LayoutType {
   Device = 'Devices',
-  Profile = 'Risk Assessement',
+  Profile = 'Risk Assessment',
 }

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

@@ -50,7 +50,8 @@
     <app-empty-page
       image="/assets/icons/empty-devices.svg"
       header="Nothing to test!"
-      message="To begin testing, you'll need to configure at least one device. Please proceed with the device creation process.">
+      message="To begin testing, you'll need to configure at least one device."
+      messageNext="Please proceed with the device creation process.">
       <ng-container *ngTemplateOutlet="addDeviceButton"></ng-container>
     </app-empty-page>
   </ng-template>

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

@@ -22,8 +22,5 @@
 }
 
 .device-add-button {
-  font-family: variables.$font-text;
-  margin-bottom: 12px;
-  width: fit-content;
-  height: 56px;
+  @include mixins.add-button;
 }

modules/ui/src/app/pages/risk-assessment/risk-assessment.component.html

@@ -14,56 +14,69 @@
 limitations under the License.
 -->
 <ng-container *ngIf="viewModel$ | async as vm">
-  <ng-container *ngIf="isOpenProfileForm; else empty">
-    <mat-drawer-container class="risk-assessment-container">
-      <mat-drawer-content class="risk-assessment-content">
-        <mat-toolbar class="risk-assessment-toolbar">
-          <h2 class="title" tabindex="-1">Risk assessment</h2>
-        </mat-toolbar>
-        <div class="main-content">
-          <app-profile-form
-            [selectedProfile]="vm.selectedProfile"
-            [isCopyProfile]="isCopyProfile"
-            [profiles]="vm.profiles"
-            [profileFormat]="vm.profileFormat"
-            (saveProfile)="saveProfileClicked($event, vm.selectedProfile)"
-            (discard)="discard(vm.selectedProfile)"></app-profile-form>
-        </div>
-      </mat-drawer-content>
-    </mat-drawer-container>
-  </ng-container>
-  <mat-drawer
-    mode="side"
-    opened
-    position="end"
-    class="profiles-drawer"
-    *ngIf="vm.profiles.length">
-    <div class="profiles-drawer-header">
-      <h2 class="profiles-drawer-header-title">Saved profiles</h2>
-    </div>
-    <div class="profiles-drawer-content">
-      <app-profile-item
-        *ngFor="let profile of vm.profiles; let i = index; trackBy: trackByName"
-        [profile]="profile"
-        class="profile-item-{{ i }}"
-        [ngClass]="{ selected: profile.name === vm.selectedProfile?.name }"
-        (deleteButtonClicked)="deleteProfile($event, i, vm.selectedProfile)"
-        (profileClicked)="profileClicked($event)"
-        (copyProfileClicked)="copyProfileAndOpenForm($event)">
-      </app-profile-item>
-    </div>
-  </mat-drawer>
+  <app-list-layout
+    [title]="LayoutType.Profile"
+    addEntityText="Create Risk Profile"
+    [emptyContent]="empty">
+  </app-list-layout>
+  <!--  <ng-container *ngIf="isOpenProfileForm; else empty">-->
+  <!--    <mat-drawer-container class="risk-assessment-container">-->
+  <!--      <mat-drawer-content class="risk-assessment-content">-->
+  <!--        <mat-toolbar class="risk-assessment-toolbar">-->
+  <!--          <h2 class="title" tabindex="-1">Risk assessment</h2>-->
+  <!--        </mat-toolbar>-->
+  <!--        <div class="main-content">-->
+  <!--          <app-profile-form-->
+  <!--            [selectedProfile]="vm.selectedProfile"-->
+  <!--            [isCopyProfile]="isCopyProfile"-->
+  <!--            [profiles]="vm.profiles"-->
+  <!--            [profileFormat]="vm.profileFormat"-->
+  <!--            (saveProfile)="saveProfileClicked($event, vm.selectedProfile)"-->
+  <!--            (discard)="discard(vm.selectedProfile)"></app-profile-form>-->
+  <!--        </div>-->
+  <!--      </mat-drawer-content>-->
+  <!--    </mat-drawer-container>-->
+  <!--  </ng-container>-->
+  <!--  <mat-drawer-->
+  <!--    mode="side"-->
+  <!--    opened-->
+  <!--    position="end"-->
+  <!--    class="profiles-drawer"-->
+  <!--    *ngIf="vm.profiles.length">-->
+  <!--    <div class="profiles-drawer-header">-->
+  <!--      <h2 class="profiles-drawer-header-title">Saved profiles</h2>-->
+  <!--    </div>-->
+  <!--    <div class="profiles-drawer-content">-->
+  <!--      <app-profile-item-->
+  <!--        *ngFor="let profile of vm.profiles; let i = index; trackBy: trackByName"-->
+  <!--        [profile]="profile"-->
+  <!--        class="profile-item-{{ i }}"-->
+  <!--        [ngClass]="{ selected: profile.name === vm.selectedProfile?.name }"-->
+  <!--        (deleteButtonClicked)="deleteProfile($event, i, vm.selectedProfile)"-->
+  <!--        (profileClicked)="profileClicked($event)"-->
+  <!--        (copyProfileClicked)="copyProfileAndOpenForm($event)">-->
+  <!--      </app-profile-item>-->
+  <!--    </div>-->
+  <!--  </mat-drawer>-->
 
   <ng-template #empty>
-    <div class="risk-assessment-content-empty">
-      <button
-        (click)="openForm()"
-        aria-label="Add New Risk Assessment"
-        class="risk-assessment-add-button"
-        color="primary"
-        mat-flat-button>
-        New Risk Assessment
-      </button>
-    </div>
+    <app-empty-page
+      image="/assets/icons/empty-profiles.svg"
+      header="Risk assessment!"
+      message="To perform a full review of your device, we request that you complete a brief risk questionnaire. This will help us assess any potential risks associated with the device.">
+      <ng-container *ngTemplateOutlet="addRiskProfileButton"></ng-container>
+    </app-empty-page>
+  </ng-template>
+
+  <ng-template #addRiskProfileButton>
+    <button
+      (click)="openForm()"
+      aria-label="Create Risk Profile"
+      class="risk-assessment-add-button"
+      color="primary"
+      mat-flat-button>
+      <mat-icon>add</mat-icon>
+      Create Risk Profile
+    </button>
   </ng-template>
 </ng-container>

modules/ui/src/app/pages/risk-assessment/risk-assessment.component.scss

@@ -17,19 +17,8 @@
 @use 'variables';
 @use 'mixins';
 
-:host {
-  overflow: hidden;
-  display: flex;
-}
-
-.risk-assessment-content-empty {
-  @include mixins.content-empty;
-}
-
-:host:has(.profiles-drawer) {
-  .risk-assessment-content-empty {
-    width: calc(100% - #{variables.$profiles-drawer-width});
-  }
+.risk-assessment-add-button {
+  @include mixins.add-button;
 }
 
 .risk-assessment-container,

modules/ui/src/app/pages/risk-assessment/risk-assessment.component.spec.ts

@@ -95,7 +95,7 @@ describe('RiskAssessmentComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  describe('with no data', () => {
+  describe('with no profiles data', () => {
     beforeEach(() => {
       component.viewModel$ = of({
         profiles: [] as Profile[],
@@ -106,7 +106,31 @@ describe('RiskAssessmentComponent', () => {
       fixture.detectChanges();
     });
 
-    it('should have "New Risk Assessment" button', () => {
+    it('should have title', () => {
+      const title = compiled.querySelector('h2.title');
+      const titleContent = title?.innerHTML.trim();
+
+      expect(title).toBeTruthy();
+      expect(titleContent).toContain('Risk Assessment');
+    });
+
+    it('should have empty page with necessary content', () => {
+      const emptyHeader = compiled.querySelector(
+        'app-empty-page .empty-message-header'
+      );
+      const emptyMessage = compiled.querySelector(
+        'app-empty-page .empty-message-main'
+      );
+
+      expect(emptyHeader).toBeTruthy();
+      expect(emptyHeader?.innerHTML).toContain('Risk assessment');
+      expect(emptyMessage).toBeTruthy();
+      expect(emptyMessage?.innerHTML).toContain(
+        'complete a brief risk questionnaire'
+      );
+    });
+
+    it('should have "Create Risk Profile" button', () => {
       const newRiskAssessmentBtn = compiled.querySelector(
         '.risk-assessment-add-button'
       );
@@ -122,21 +146,13 @@ describe('RiskAssessmentComponent', () => {
       newRiskAssessmentBtn.click();
       fixture.detectChanges();
 
-      const toolbarEl = compiled.querySelector('.risk-assessment-toolbar');
       const title = compiled.querySelector('h2.title');
       const titleContent = title?.innerHTML.trim();
-      const profileForm = compiled.querySelectorAll('app-profile-form');
+      // const profileForm = compiled.querySelectorAll('app-profile-form');
 
-      expect(toolbarEl).not.toBeNull();
       expect(title).toBeTruthy();
-      expect(titleContent).toContain('Risk assessment');
-      expect(profileForm).toBeTruthy();
-    });
-
-    it('should not have profiles drawer', () => {
-      const profilesDrawer = compiled.querySelector('.profiles-drawer');
-
-      expect(profilesDrawer).toBeFalsy();
+      expect(titleContent).toContain('Risk Assessment');
+      // expect(profileForm).toBeTruthy();
     });
   });
 
@@ -150,17 +166,12 @@ describe('RiskAssessmentComponent', () => {
       fixture.detectChanges();
     });
 
-    it('should have profiles drawer', () => {
-      const profilesDrawer = compiled.querySelector('.profiles-drawer');
-
-      expect(profilesDrawer).toBeTruthy();
-    });
-
-    it('should have profile items', () => {
-      const profileItems = compiled.querySelectorAll('app-profile-item');
-
-      expect(profileItems.length).toEqual(2);
-    });
+    // TODO: change after profile items are added/updated
+    // it('should have profile items', () => {
+    //   const profileItems = compiled.querySelectorAll('app-profile-item');
+    //
+    //   expect(profileItems.length).toEqual(2);
+    // });
 
     describe('#deleteProfile', () => {
       it('should open delete profile modal', fakeAsync(() => {

modules/ui/src/app/pages/risk-assessment/risk-assessment.component.ts

@@ -42,6 +42,10 @@ import { MatSidenavModule } from '@angular/material/sidenav';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { ProfileFormComponent } from './profile-form/profile-form.component';
+import { MatIconModule } from '@angular/material/icon';
+import { EmptyPageComponent } from '../../components/empty-page/empty-page.component';
+import { ListLayoutComponent } from '../../components/list-layout/list-layout.component';
+import { LayoutType } from '../../model/layout-type';
 
 const matFormFieldDefaultOptions: MatFormFieldDefaultOptions = {
   hideRequiredMarker: true,
@@ -55,9 +59,12 @@ const matFormFieldDefaultOptions: MatFormFieldDefaultOptions = {
     CommonModule,
     MatToolbarModule,
     MatButtonModule,
+    MatIconModule,
     ReactiveFormsModule,
     MatInputModule,
     MatSidenavModule,
+    EmptyPageComponent,
+    ListLayoutComponent,
     ProfileFormComponent,
     ProfileItemComponent,
   ],
@@ -71,6 +78,7 @@ const matFormFieldDefaultOptions: MatFormFieldDefaultOptions = {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RiskAssessmentComponent implements OnInit, OnDestroy {
+  readonly LayoutType = LayoutType;
   private store = inject(RiskAssessmentStore);
   dialog = inject(MatDialog);
   private liveAnnouncer = inject(LiveAnnouncer);