Change empty state for Devices page

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

@@ -1,7 +1,27 @@
-<div class="empty-message">
+<!--
+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="empty-message"
+  [ngClass]="isHorizontal() ? 'horizontal' : 'vertical'">
   <div class="empty-message-img">
     <img [src]="image()" alt="empty message image" />
   </div>
-  <span class="empty-message-header">{{ header() }}</span>
-  <span class="empty-message-main">{{ message() }}</span>
+  <span class="empty-message-text">
+    <span class="empty-message-header">{{ header() }}</span>
+    <span class="empty-message-main">{{ message() }}</span>
+  </span>
+  <ng-content></ng-content>
 </div>

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

@@ -1,11 +1,51 @@
+/**
+ * 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.
+ */
 @use 'variables';
 @use 'colors';
 
-.empty-message {
+.empty-message.vertical {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 16px;
+  gap: 12px;
+  text-align: center;
+  .empty-message-main {
+    padding-top: 12px;
+  }
+}
+
+.empty-message.horizontal {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: end;
+  gap: 32px;
+  max-width: 764px;
+  .empty-message-img {
+    grid-row: 1 / 3;
+    width: 288px;
+    height: 199px;
+    justify-self: end;
+  }
+  .empty-message-text {
+    align-self: start;
+    padding-top: 12px;
+  }
+  .empty-message-main {
+    padding-top: 8px;
+  }
 }
 
 .empty-message-header {
@@ -22,6 +62,7 @@
   line-height: 24px;
   letter-spacing: 0.1px;
   color: colors.$on-surface-variant;
+  display: block;
 }
 
 .empty-message-img {

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

@@ -1,3 +1,18 @@
+/**
+ * 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 { EmptyMessageComponent } from './empty-message.component';

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

@@ -1,13 +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.
+ */
 import { Component, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-empty-message',
-  imports: [],
+  imports: [CommonModule],
   templateUrl: './empty-message.component.html',
   styleUrl: './empty-message.component.scss',
 })
 export class EmptyMessageComponent {
   image = input<string>();
   header = input<string>();
   message = input<string>();
+  isHorizontal = input<boolean>(false);
 }

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

@@ -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.
+-->
+<app-empty-message
+  [image]="image()"
+  [header]="header()"
+  [message]="message()"
+  [isHorizontal]="true">
+  <ng-content></ng-content>
+</app-empty-message>

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

@@ -0,0 +1,37 @@
+/**
+ * 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 { EmptyPageComponent } from './empty-page.component';
+
+describe('EmptyPageComponent', () => {
+  let component: EmptyPageComponent;
+  let fixture: ComponentFixture<EmptyPageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [EmptyPageComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(EmptyPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,28 @@
+/**
+ * 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 { Component, input } from '@angular/core';
+import { EmptyMessageComponent } from '../empty-message/empty-message.component';
+
+@Component({
+  selector: 'app-empty-page',
+  imports: [EmptyMessageComponent],
+  templateUrl: './empty-page.component.html',
+})
+export class EmptyPageComponent {
+  image = input<string>();
+  header = input<string>();
+  message = input<string>();
+}

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

@@ -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.
+-->
+<ng-container *ngIf="entities().length > 0; else empty"></ng-container>
+<ng-template #empty>
+  <h2 class="title title-empty">{{ title() }}</h2>
+  <div class="content-empty" *ngIf="emptyContent()">
+    <ng-container *ngTemplateOutlet="emptyContent()!"></ng-container>
+  </div>
+</ng-template>

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

@@ -0,0 +1,35 @@
+/**
+ * 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.
+ */
+@use 'mixins';
+@use 'colors';
+@use 'variables';
+
+.content-empty {
+  @include mixins.content-empty;
+}
+
+.title {
+  color: colors.$on-surface;
+  font-family: variables.$font-primary;
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 40px;
+  &-empty {
+    padding: 24px 0 8px 32px;
+    margin: 0;
+  }
+}

modules/ui/src/app/components/list-layout/list-layout.component.spec.ts

@@ -0,0 +1,37 @@
+/**
+ * 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 { ListLayoutComponent } from './list-layout.component';
+
+describe('ListLayoutComponent', () => {
+  let component: ListLayoutComponent<string>;
+  let fixture: ComponentFixture<ListLayoutComponent<string>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ListLayoutComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ListLayoutComponent<string>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

modules/ui/src/app/components/list-layout/list-layout.component.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.
+ */
+import { Component, input, TemplateRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-list-layout',
+  imports: [CommonModule],
+  templateUrl: './list-layout.component.html',
+  styleUrl: './list-layout.component.scss',
+})
+export class ListLayoutComponent<T> {
+  title = input<string>('');
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  emptyContent = input<TemplateRef<any>>();
+  entities = input<T[]>([]);
+}