From 410b8f6f34a75a2457b1d79877d3e438767e391a Mon Sep 17 00:00:00 2001
From: Volha Mardvilka <mardvilka@google.com>
Date: Tue, 31 Dec 2024 11:09:33 +0000
Subject: [PATCH] 385715473: (feat) add TLS callout to certificates tab

---
 .../certificates-table.component.html         |  9 ++++++-
 .../certificates-table.component.scss         | 25 +++++++++++++++++++
 .../certificates-table.component.ts           |  4 +++
 3 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/modules/ui/src/app/pages/certificates/components/certificates-table/certificates-table.component.html b/modules/ui/src/app/pages/certificates/components/certificates-table/certificates-table.component.html
index 9ee3d9440..c2bb9bb5a 100644
--- a/modules/ui/src/app/pages/certificates/components/certificates-table/certificates-table.component.html
+++ b/modules/ui/src/app/pages/certificates/components/certificates-table/certificates-table.component.html
@@ -89,7 +89,14 @@
     <tr *matHeaderRowDef="displayedColumns(); sticky: true" mat-header-row></tr>
 
     <tr class="mat-row" *matNoDataRow>
-      <td class="mat-cell" [attr.colspan]="displayedColumns().length">
+      <td
+        class="mat-cell empty-data-cell"
+        [attr.colspan]="displayedColumns().length">
+        <div class="callout-container">
+          <app-callout [type]="CalloutType.Info">
+            CA certificates must be uploaded to complete TLS testing
+          </app-callout>
+        </div>
         <div class="results-content-filter-empty">
           <ng-container
             *ngTemplateOutlet="
diff --git a/modules/ui/src/app/pages/certificates/components/certificates-table/certificates-table.component.scss b/modules/ui/src/app/pages/certificates/components/certificates-table/certificates-table.component.scss
index 052dda110..8572cb36f 100644
--- a/modules/ui/src/app/pages/certificates/components/certificates-table/certificates-table.component.scss
+++ b/modules/ui/src/app/pages/certificates/components/certificates-table/certificates-table.component.scss
@@ -96,3 +96,28 @@
 .certificates-content-empty {
   height: calc(100vh - 344px);
 }
+
+.empty-data-cell {
+  position: relative;
+}
+
+.callout-container {
+  display: flex;
+  position: absolute;
+  top: 0;
+  width: 100%;
+
+  ::ng-deep .callout-container {
+    margin: 6px 0;
+    padding: 14px 16px;
+  }
+
+  ::ng-deep .callout-context {
+    font-family: variables.$font-text;
+    letter-spacing: 0;
+  }
+}
+
+.results-content-filter-empty {
+  margin-top: 60px;
+}
diff --git a/modules/ui/src/app/pages/certificates/components/certificates-table/certificates-table.component.ts b/modules/ui/src/app/pages/certificates/components/certificates-table/certificates-table.component.ts
index 639f1ba6b..a03a49135 100644
--- a/modules/ui/src/app/pages/certificates/components/certificates-table/certificates-table.component.ts
+++ b/modules/ui/src/app/pages/certificates/components/certificates-table/certificates-table.component.ts
@@ -4,6 +4,8 @@ import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { CommonModule } from '@angular/common';
+import { CalloutType } from '../../../../model/callout-type';
+import { CalloutComponent } from '../../../../components/callout/callout.component';
 import { EmptyMessageComponent } from '../../../../components/empty-message/empty-message.component';
 
 @Component({
@@ -13,6 +15,7 @@ import { EmptyMessageComponent } from '../../../../components/empty-message/empt
     MatTableModule,
     MatButtonModule,
     CommonModule,
+    CalloutComponent,
     EmptyMessageComponent,
   ],
   templateUrl: './certificates-table.component.html',
@@ -20,6 +23,7 @@ import { EmptyMessageComponent } from '../../../../components/empty-message/empt
 })
 export class CertificatesTableComponent {
   dataSource = input.required<MatTableDataSource<Certificate>>();
+  readonly CalloutType = CalloutType;
   selectedCertificate = input<string>();
   dataLoaded = input<boolean>(false);
   displayedColumns = input<string[]>([]);