Add CSR support to certificates list

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@peculiar/fortify-tools",
   "homepage": "https://tools.fortifyapp.com",
-  "version": "2.0.15",
+  "version": "2.0.16",
   "author": "PeculiarVentures Team",
   "license": "MIT",
   "private": true,
@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "@peculiar/certificates-viewer-react": "^4.3.2",
-    "@peculiar/fortify-client-core": "^4.1.0",
+    "@peculiar/fortify-client-core": "^4.1.1",
     "@peculiar/react-components": "^1.1.2",
     "@peculiar/x509": "^1.12.3",
     "clsx": "^2.1.1",

src/app.test.tsx

@@ -49,6 +49,18 @@ describe("<App />", () => {
     },
   ];
 
+  const certificateRequestsMock = [
+    {
+      id: "1",
+      providerID: "provider1",
+      subject: {
+        CN: ["Certificate request test 1"],
+      },
+      raw: new ArrayBuffer(1),
+      type: "request",
+    },
+  ];
+
   const mockFortifyAPIInstance: Partial<FortifyAPI> = {
     challenge: vi.fn().mockResolvedValue(""),
     login: vi.fn(),
@@ -65,11 +77,19 @@ describe("<App />", () => {
       logout: vi.fn(),
     }),
     getCertificatesByProviderId: vi.fn().mockResolvedValue(certificatesMock),
+    getCertificateRequestsByProviderId: vi.fn().mockResolvedValue([]),
   };
 
-  it("Should render, show providers & certificates", async () => {
+  const mockFortifyAPIInstanceWithCertificateRequests = {
+    ...mockFortifyAPIInstance,
+    getCertificateRequestsByProviderId: vi
+      .fn()
+      .mockResolvedValue(certificateRequestsMock),
+  } as unknown as FortifyAPI;
+
+  it("Should render, show providers & certificates & certificate requests", async () => {
     vi.mocked(FortifyAPI).mockImplementation(
-      () => mockFortifyAPIInstance as FortifyAPI
+      () => mockFortifyAPIInstanceWithCertificateRequests
     );
 
     render(<App />);
@@ -79,6 +99,9 @@ describe("<App />", () => {
       expect(screen.getByText(/Provider 2/)).toBeInTheDocument();
       expect(screen.getByText(/Certificate test 1/)).toBeInTheDocument();
       expect(screen.getByText(/Certificate test 2/)).toBeInTheDocument();
+      expect(
+        screen.getByText(/Certificate request test 1/)
+      ).toBeInTheDocument();
     });
   });
 
@@ -143,6 +166,30 @@ describe("<App />", () => {
     });
   });
 
+  it("Should open view certificate request details dialog", async () => {
+    vi.mocked(FortifyAPI).mockImplementation(
+      () => mockFortifyAPIInstanceWithCertificateRequests as FortifyAPI
+    );
+
+    render(<App />);
+
+    await waitFor(() => {
+      expect(
+        screen.getByText(/Certificate request test 1/)
+      ).toBeInTheDocument();
+    });
+
+    await userEvent.click(
+      screen.getAllByRole("button", { name: /View details/ })[0]
+    );
+
+    await waitFor(() => {
+      expect(
+        screen.getByText(/“Certificate request test 1” details/)
+      ).toBeInTheDocument();
+    });
+  });
+
   it("Should open import certificate dialog", async () => {
     vi.mocked(FortifyAPI).mockImplementation(
       () => mockFortifyAPIInstance as FortifyAPI

src/components/certificate-serial-number/CertificateSerialNumber.test.tsx

@@ -23,7 +23,7 @@ describe("<CertificateSerialNumber />", () => {
   });
 
   it("Shouldn't render if no value", () => {
-    const { container } = render(<CertificateSerialNumber />);
-    expect(container.firstChild).toBeNull();
+    render(<CertificateSerialNumber />);
+    expect(screen.getByText(/-/)).toBeInTheDocument();
   });
 });

src/components/certificate-serial-number/CertificateSerialNumber.tsx

@@ -15,7 +15,15 @@ export const CertificateSerialNumber: React.FunctionComponent<
 > = (props) => {
   const { className, value } = props;
   if (!value) {
-    return null;
+    return (
+      <Typography
+        className={clsx(className, styles.certificate_serial_number)}
+        variant="b2"
+        color="black"
+      >
+        -
+      </Typography>
+    );
   }
 
   return (

src/components/certificate-type-label/CertificateTypeLabel.tsx

@@ -1,14 +1,18 @@
 import React, { ComponentProps } from "react";
-import { ICertificate } from "@peculiar/fortify-client-core";
+import {
+  ICertificate,
+  ICertificateRequest,
+} from "@peculiar/fortify-client-core";
 import { useTranslation } from "react-i18next";
 import clsx from "clsx";
 import { Typography } from "@peculiar/react-components";
 import CertificateIcon from "../../icons/certificate-30.svg?react";
 import CertificateWithKeyIcon from "../../icons/certificate-with-key-30.svg?react";
+import CertificateRequestIcon from "../../icons/certificate-request-30.svg?react";
 import styles from "./styles/index.module.scss";
 
 interface CertificateTypeLabelProps {
-  type: ICertificate["type"];
+  type: ICertificate["type"] | ICertificateRequest["type"];
   withPrivatKey: boolean;
   className?: ComponentProps<"div">["className"];
 }
@@ -19,9 +23,9 @@ export const CertificateTypeLabel: React.FunctionComponent<
   const { type, className, withPrivatKey } = props;
   const { t } = useTranslation();
 
-  return (
-    <div className={clsx(className, styles.certificate_type_label)}>
-      {type === "x509" ? (
+  const renderType = () => {
+    if (type === "x509") {
+      return (
         <>
           <span className={styles.icon_wrapper}>
             {withPrivatKey ? <CertificateWithKeyIcon /> : <CertificateIcon />}
@@ -46,11 +50,38 @@ export const CertificateTypeLabel: React.FunctionComponent<
             ) : undefined}
           </span>
         </>
-      ) : (
-        <Typography variant="s2" color="black">
-          {type}
-        </Typography>
-      )}
+      );
+    }
+
+    if (type === "request") {
+      return (
+        <>
+          <span className={styles.icon_wrapper}>
+            <CertificateRequestIcon />
+          </span>
+          <span>
+            <Typography
+              variant="s2"
+              color="black"
+              className={styles.label_part}
+            >
+              {t("certificates.list.cell.certificate-request")}
+            </Typography>
+          </span>
+        </>
+      );
+    }
+
+    return (
+      <Typography variant="s2" color="black">
+        {type}
+      </Typography>
+    );
+  };
+
+  return (
+    <div className={clsx(className, styles.certificate_type_label)}>
+      {renderType()}
     </div>
   );
 };

src/components/certificates-list/CertificatesList.tsx

@@ -239,7 +239,11 @@ export const CertificatesList: React.FunctionComponent<
                         title={t("certificates.list.action.copy")}
                         value={
                           raw.byteLength
-                            ? () => certificateRawToPem(raw, type)
+                            ? () =>
+                                certificateRawToPem(
+                                  raw,
+                                  type === "x509" ? "x509" : "csr"
+                                )
                             : ""
                         }
                         className={styles.action_icon_button}
@@ -249,7 +253,11 @@ export const CertificatesList: React.FunctionComponent<
                         title={t("certificates.list.action.download")}
                         onClick={() =>
                           raw.byteLength &&
-                          downloadCertificate(certificateName, raw, type)
+                          downloadCertificate(
+                            certificateName,
+                            raw,
+                            type === "x509" ? "x509" : "csr"
+                          )
                         }
                         size="small"
                         className={styles.action_icon_button}

src/components/date/Date.test.tsx

@@ -17,7 +17,7 @@ describe("<Date />", () => {
   });
 
   it("Shouldn't render if no date", () => {
-    const { container } = render(<Date />);
-    expect(container.firstChild).toBeNull();
+    render(<Date />);
+    expect(screen.getByText(/-/)).toBeInTheDocument();
   });
 });

src/components/date/Date.tsx

@@ -12,20 +12,19 @@ export const Date: React.FunctionComponent<DateProps> = (props) => {
   const { date, className } = props;
   const { i18n } = useTranslation();
 
-  if (!date) {
-    return null;
-  }
   return (
     <Typography
       className={clsx(className, styles.date)}
       variant="b2"
       color="black"
     >
-      {date.toLocaleDateString(i18n.resolvedLanguage, {
-        day: "numeric",
-        month: "short",
-        year: "numeric",
-      })}
+      {date
+        ? date.toLocaleDateString(i18n.resolvedLanguage, {
+            day: "numeric",
+            month: "short",
+            year: "numeric",
+          })
+        : "-"}
     </Typography>
   );
 };

src/hooks/app/useApp.test.tsx

@@ -47,6 +47,7 @@ describe("useApp", () => {
       logout: vi.fn(),
     }),
     getCertificatesByProviderId: vi.fn().mockResolvedValue(certificatesMock),
+    getCertificateRequestsByProviderId: vi.fn().mockResolvedValue([]),
   };
 
   it("Should initialize, get providers & certificates", async () => {

src/hooks/app/useApp.tsx

@@ -3,6 +3,7 @@ import {
   FortifyAPI,
   IProviderInfo,
   ICertificate,
+  ICertificateRequest,
 } from "@peculiar/fortify-client-core";
 import { useTranslation } from "react-i18next";
 import { useToast } from "@peculiar/react-components";
@@ -21,7 +22,9 @@ export function useApp() {
   >(undefined);
   const [isCurrentProviderLogedin, setIsCurrentProviderLogedin] =
     React.useState(false);
-  const [certificates, setCertificates] = React.useState<ICertificate[]>([]);
+  const [certificates, setCertificates] = React.useState<
+    (ICertificate | ICertificateRequest)[]
+  >([]);
   const [challenge, setChallenge] = React.useState<string | null>(null);
   const [fetching, setFetching] = React.useState<AppFetchingType>({
     connectionDetect: "pending",
@@ -184,9 +187,11 @@ export function useApp() {
     }
 
     try {
-      setCertificates(
-        await fortifyClient.current.getCertificatesByProviderId(id)
-      );
+      const requests =
+        await fortifyClient.current.getCertificateRequestsByProviderId(id);
+      const certificates =
+        await fortifyClient.current.getCertificatesByProviderId(id);
+      setCertificates([...certificates, ...requests]);
       if (providers?.length) {
         setCurrentProvider(providers.find((provider) => provider.id === id));
       }
@@ -219,9 +224,13 @@ export function useApp() {
     setFetchingValue("certificates", "pending");
 
     try {
-      setCertificates(
-        await fortifyClient.current.getCertificatesByProviderId(providerId)
-      );
+      const requests =
+        await fortifyClient.current.getCertificateRequestsByProviderId(
+          providerId
+        );
+      const certificates =
+        await fortifyClient.current.getCertificatesByProviderId(providerId);
+      setCertificates([...certificates, ...requests]);
       setFetchingValue("certificates", "resolved");
     } catch (error) {
       setFetchingValue("certificates", "rejected");

src/hooks/search-list/useSearchList.tsx

@@ -1,8 +1,11 @@
 import { useEffect, useMemo, useState } from "react";
+import { ICertificateRequest } from "@peculiar/fortify-client-core";
 import { getCertificateName } from "../../utils/certificate";
 import { CertificateProps } from "../../types";
 
-export function useSearchList(certificates: CertificateProps[]) {
+export function useSearchList(
+  certificates: (CertificateProps | ICertificateRequest)[]
+) {
   const [searchedText, setSearchedText] = useState(
     new URLSearchParams(window.location.search).get("search") || ""
   );
@@ -37,7 +40,7 @@ export function useSearchList(certificates: CertificateProps[]) {
     () =>
       searchedText
         ? certificates.filter((certificate) =>
-            getCertificateName(certificate)
+            getCertificateName(certificate as CertificateProps)
               ?.toLocaleLowerCase()
               .includes(searchedText.toLocaleLowerCase())
           )

src/i18n/locales/en/main.json

@@ -47,7 +47,8 @@
       },
       "cell": {
         "certificate": "Certificate",
-        "with-privat-key": "(with private key)"
+        "with-privat-key": "(with private key)",
+        "certificate-request": "CSR"
       },
       "action": {
         "view-details": "View details",

yarn.lock

@@ -963,10 +963,10 @@
   resolved "https://registry.yarnpkg.com/@peculiar/color/-/color-0.1.5.tgz#ca90086f79da5a8c1c3e4e219ea627b65e4d3357"
   integrity sha512-nDg5qS9TU8ZTGLuWNZ1iTziAaK2hZytkjuUjIiJRfHWx65u5iyejjNeXkoe0/emAjPnX29FSI59WcwHMPZVsEw==
 
-"@peculiar/fortify-client-core@^4.1.0":
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/@peculiar/fortify-client-core/-/fortify-client-core-4.1.0.tgz#fa7d9d361affd48049838065ed01f27e46d746f2"
-  integrity sha512-a1vu08JFQC+DnV2R4mda+cpKYjTPxSwpbMW483Ay9bjdTism7KlI39V3y5FzQ7jAJpXwifIZhF1g7l55c2oSKg==
+"@peculiar/fortify-client-core@^4.1.1":
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/@peculiar/fortify-client-core/-/fortify-client-core-4.1.1.tgz#f08151245db56deb15351b5f95a75f10a3d60a30"
+  integrity sha512-eKaZhg+MZsxg0GW5spjHIdNtuzN9OICk7ZKXOX1uIEKVtk81mr/VVN2g8Axs/D0BYZqFc7KcJgK/m14EjU8sGQ==
   dependencies:
     "@peculiar/asn1-schema" "^2.3.13"
     "@peculiar/asn1-x509" "^2.3.13"