From 03a7b27633149e27a0bc2f7d78132c6fd9db2721 Mon Sep 17 00:00:00 2001
From: Gabriel Hernandez <ghernandez345@gmail.com>
Date: Fri, 13 Jun 2025 13:00:41 +0100
Subject: [PATCH] update host details cert card (#29827)

Relates to  [#29324](https://github.com/fleetdm/fleet/issues/29324)

updates certificates card UI on the host details and my devices page.
changes some copy and adds a new Keychain column.


![image](https://github.com/user-attachments/assets/3310cd61-4447-499b-8d03-9a987fbcaed7)

- [x] Changes file added for user-visible changes in `changes/`,
`orbit/changes/` or `ee/fleetd-chrome/changes`.
See [Changes
files](https://github.com/fleetdm/fleet/blob/main/docs/Contributing/guides/committing-changes.md#changes-files)
for more information.
- [x] Manual QA for all new/changed functionality
---
 changes/issue-29827-update-ui-for-certs       |  2 ++
 frontend/__mocks__/certificatesMock.ts        |  2 ++
 frontend/interfaces/certificates.ts           |  2 ++
 .../CertificatesTable/CertificatesTable.tsx   |  4 ++--
 .../CertificatesTableConfig.tsx               | 19 +++++++++++++++++++
 5 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 changes/issue-29827-update-ui-for-certs

diff --git a/changes/issue-29827-update-ui-for-certs b/changes/issue-29827-update-ui-for-certs
new file mode 100644
index 0000000000..69322dfe8d
--- /dev/null
+++ b/changes/issue-29827-update-ui-for-certs
@@ -0,0 +1,2 @@
+- update Certificates card on the host details and my device page to show a new
+keychain column
diff --git a/frontend/__mocks__/certificatesMock.ts b/frontend/__mocks__/certificatesMock.ts
index 9e6fa0f722..d472d2fdc8 100644
--- a/frontend/__mocks__/certificatesMock.ts
+++ b/frontend/__mocks__/certificatesMock.ts
@@ -24,6 +24,8 @@ const DEFAULT_HOST_CERTIFICATE_MOCK: IHostCertificate = {
     organizational_unit: "Test Inc.",
     common_name: "Test Biz",
   },
+  source: "system",
+  username: "",
 };
 
 export const createMockHostCertificate = (
diff --git a/frontend/interfaces/certificates.ts b/frontend/interfaces/certificates.ts
index 1c7db728ab..bb34f0f0e1 100644
--- a/frontend/interfaces/certificates.ts
+++ b/frontend/interfaces/certificates.ts
@@ -23,6 +23,8 @@ export interface IHostCertificate {
     organizational_unit: string;
     common_name: string;
   };
+  source: string;
+  username: string;
 }
 
 export const CERTIFICATES_DEFAULT_SORT: IListSort = {
diff --git a/frontend/pages/hosts/details/cards/Certificates/CertificatesTable/CertificatesTable.tsx b/frontend/pages/hosts/details/cards/Certificates/CertificatesTable/CertificatesTable.tsx
index aa01aedf29..80f8c604e6 100644
--- a/frontend/pages/hosts/details/cards/Certificates/CertificatesTable/CertificatesTable.tsx
+++ b/frontend/pages/hosts/details/cards/Certificates/CertificatesTable/CertificatesTable.tsx
@@ -66,8 +66,8 @@ const CertificatesTable = ({
 
   const helpText = showHelpText ? (
     <p>
-      Showing certificates in the system keychain. To get all certificates, you
-      can query the certificates table.{" "}
+      Showing certificates in the system and login (user) keychain. To get all
+      certificates, you can query the certificates table.{" "}
       <CustomLink
         text="Learn more"
         url="https://fleetdm.com/learn-more-about/certificates-query"
diff --git a/frontend/pages/hosts/details/cards/Certificates/CertificatesTable/CertificatesTableConfig.tsx b/frontend/pages/hosts/details/cards/Certificates/CertificatesTable/CertificatesTableConfig.tsx
index 5022d3a565..bb339423bb 100644
--- a/frontend/pages/hosts/details/cards/Certificates/CertificatesTable/CertificatesTableConfig.tsx
+++ b/frontend/pages/hosts/details/cards/Certificates/CertificatesTable/CertificatesTableConfig.tsx
@@ -10,6 +10,8 @@ import TextCell from "components/TableContainer/DataTable/TextCell";
 import ViewAllHostsLink from "components/ViewAllHostsLink";
 import StatusIndicator from "components/StatusIndicator";
 import { IIndicatorValue } from "components/StatusIndicator/StatusIndicator";
+import TooltipTruncatedTextCell from "components/TableContainer/DataTable/TooltipTruncatedTextCell";
+import TooltipWrapper from "components/TooltipWrapper";
 
 type IHostCertificatesTableConfig = Column<IHostCertificate>;
 
@@ -22,6 +24,23 @@ const generateTableConfig = (): IHostCertificatesTableConfig[] => {
       ),
       Cell: (cellProps) => <TextCell value={cellProps.cell.value} />,
     },
+    {
+      accessor: "source",
+      disableSortBy: true,
+      Header: "Keychain",
+      Cell: (cellProps) => {
+        if (cellProps.cell.value === "system") {
+          return <TextCell value="System" />;
+        }
+        return (
+          <TooltipWrapper
+            tipContent={cellProps.cell.row.original.username || "Unknown user"}
+          >
+            User
+          </TooltipWrapper>
+        );
+      },
+    },
     {
       accessor: "not_valid_after",
       Header: (cellProps) => (