Add empty state

evergreen-ci · Nov 28, 2023 · cbd1294 · cbd1294
1 parent 7a0478e
commit cbd1294
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git 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
@@ -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}