339311887: (feat) display saved risk profile

modules/ui/src/app/mocks/profile.mock.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Profile } from '../model/profile';
+
+export const PROFILE_MOCK: Profile = {
+  name: 'Profile name',
+  sections: [],
+};

modules/ui/src/app/model/profile.ts

@@ -0,0 +1,30 @@
+/**
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+interface ProfileResponse {
+  question: string;
+  type: string;
+  options: string[];
+}
+
+interface ProfileSection {
+  name: string;
+  responses: ProfileResponse[];
+}
+
+export interface Profile {
+  name: string;
+  sections: ProfileSection[];
+}

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

@@ -0,0 +1,30 @@
+<!--
+Copyright 2023 Google LLC
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<div class="profile-item-container">
+  <mat-icon class="profile-item-icon" fontSet="material-symbols-outlined">
+    rule
+  </mat-icon>
+  <p class="profile-item-name">{{ profile.name }}</p>
+  <button class="profile-item-button" mat-icon-button aria-label="Copy profile">
+    <mat-icon fontSet="material-symbols-outlined"> content_copy </mat-icon>
+  </button>
+  <button
+    class="profile-item-button"
+    mat-icon-button
+    aria-label="Delete profile">
+    <mat-icon fontSet="material-symbols-outlined"> delete </mat-icon>
+  </button>
+</div>

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

@@ -0,0 +1,57 @@
+/**
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@import 'src/theming/colors';
+@import 'src/theming/variables';
+
+.profile-item-container {
+  display: grid;
+  grid-template-columns: 24px minmax(160px, 1fr) 24px 24px;
+  gap: 16px;
+  box-sizing: border-box;
+  height: 68px;
+  padding: 12px 0;
+  border-bottom: 1px solid $lighter-grey;
+  align-items: center;
+}
+
+.profile-item-icon {
+  color: $grey-700;
+}
+
+.profile-item-name {
+  margin: 0;
+  font-family: $font-secondary, sans-serif;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 16px;
+  color: $grey-800;
+  height: 24px;
+}
+
+.profile-item-button {
+  padding: 0;
+  height: 24px;
+  width: 24px;
+  border-radius: 4px;
+  color: $grey-700;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  & ::ng-deep .mat-mdc-button-persistent-ripple {
+    border-radius: 4px;
+  }
+}

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

@@ -0,0 +1,47 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProfileItemComponent } from './profile-item.component';
+import { PROFILE_MOCK } from '../../../mocks/profile.mock';
+
+describe('ProfileItemComponent', () => {
+  let component: ProfileItemComponent;
+  let fixture: ComponentFixture<ProfileItemComponent>;
+  let compiled: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProfileItemComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ProfileItemComponent);
+    component = fixture.componentInstance;
+    component.profile = PROFILE_MOCK;
+    compiled = fixture.nativeElement as HTMLElement;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should have profile name', () => {
+    const name = compiled.querySelector('.profile-item-name');
+
+    expect(name?.textContent?.trim()).toEqual('Profile name');
+  });
+});

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

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { Profile } from '../../../model/profile';
+import { MatIcon } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-profile-item',
+  standalone: true,
+  imports: [MatIcon, MatButtonModule, CommonModule],
+  templateUrl: './profile-item.component.html',
+  styleUrl: './profile-item.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ProfileItemComponent {
+  @Input() profile!: Profile;
+}

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

@@ -13,6 +13,28 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
-<mat-toolbar class="risk-assessment-toolbar">
-  <h2 class="title">Risk assessment</h2>
-</mat-toolbar>
+
+<mat-drawer-container
+  class="risk-assessment-container"
+  *ngIf="viewModel$ | async as vm">
+  <mat-drawer-content class="risk-assessment-content">
+    <mat-toolbar class="risk-assessment-toolbar">
+      <h2 class="title">Risk assessment</h2>
+    </mat-toolbar>
+    <div class="main-content"></div>
+  </mat-drawer-content>
+  <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" [profile]="profile">
+      </app-profile-item>
+    </div>
+  </mat-drawer>
+</mat-drawer-container>

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

@@ -15,8 +15,47 @@
  */
 @import 'src/theming/colors';
 
+.risk-assessment-container,
+.risk-assessment-content {
+  height: 100%;
+  background-color: $white;
+}
+
+.risk-assessment-content {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
 .risk-assessment-toolbar {
   height: 74px;
   padding: 24px 0 8px 32px;
   background: $white;
 }
+
+.main-content {
+  padding: 16px 32px;
+}
+
+.profiles-drawer {
+  width: 320px;
+  box-shadow: none;
+  border-left: 1px solid $light-grey;
+}
+
+.profiles-drawer-header {
+  padding: 12px 12px 16px 24px;
+}
+
+.profiles-drawer-header-title {
+  margin: 0;
+  font-size: 22px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 28px;
+  color: $dark-grey;
+}
+
+.profiles-drawer-content {
+  padding: 0 16px;
+}