From cbd1294968975c787617eff9ce3288095032c71f Mon Sep 17 00:00:00 2001
From: Sophie Stadler <sophie.stadler@mongodb.com>
Date: Tue, 28 Nov 2023 16:56:23 -0500
Subject: [PATCH] Add empty state

---
 cypress/integration/preferences/public_key_management.ts      | 4 ++--
 .../preferencesTabs/publicKeysTab/PublicKeysTable.tsx         | 2 ++
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/cypress/integration/preferences/public_key_management.ts b/cypress/integration/preferences/public_key_management.ts
index 45848547f4..d473619086 100644
--- a/cypress/integration/preferences/public_key_management.ts
+++ b/cypress/integration/preferences/public_key_management.ts
@@ -16,12 +16,12 @@ describe("Public Key Management Page", () => {
       cy.dataCy("table-key-name").first().should("not.contain", keyName1);
       cy.dataCy("table-key-name").first().contains(keyName2);
     });
-    it('Displays "No keys saved. Add a new key to populate the list." when no keys are available', () => {
+    it("Displays empty message", () => {
       cy.dataCy("delete-btn").first().click();
       cy.contains("button", "Yes").click();
       cy.dataCy("delete-btn").first().click();
       cy.contains("button", "Yes").click();
-      cy.contains("No keys saved. Add a new key to populate the list.");
+      cy.contains("No keys saved.");
     });
   });
 
diff --git a/src/pages/preferences/preferencesTabs/publicKeysTab/PublicKeysTable.tsx b/src/pages/preferences/preferencesTabs/publicKeysTab/PublicKeysTable.tsx
index db7653fb2e..bbd4cefcfb 100644
--- a/src/pages/preferences/preferencesTabs/publicKeysTab/PublicKeysTable.tsx
+++ b/src/pages/preferences/preferencesTabs/publicKeysTab/PublicKeysTable.tsx
@@ -8,6 +8,7 @@ import { usePreferencesAnalytics } from "analytics";
 import Popconfirm from "components/Popconfirm";
 import { WordBreak } from "components/styles";
 import { BaseTable } from "components/Table/BaseTable";
+import { TablePlaceholder } from "components/Table/TablePlaceholder";
 import { size } from "constants/tokens";
 import { useToastContext } from "context/toast";
 import {
@@ -118,6 +119,7 @@ export const PublicKeysTable: React.FC<PublicKeysTableProps> = ({
   return (
     <BaseTable
       data-cy="hosts-table"
+      emptyComponent={<TablePlaceholder glyph="Key" message="No keys saved." />}
       loading={loadingMyPublicKeys}
       shouldAlternateRowColor
       table={table}