Add info dialog & login/logout for provider

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@peculiar/fortify-tools",
   "homepage": "https://tools.fortifyapp.com",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "author": "PeculiarVentures Team",
   "license": "MIT",
   "private": true,

src/app.tsx

@@ -12,6 +12,7 @@ import { useSortList } from "./hooks/sort-list";
 import { useSearchList } from "./hooks/search-list";
 import { useCertificateImportDialog } from "./dialogs/certificate-import-dialog";
 import { useCertificateCreateDialog } from "./dialogs/certificate-create-dialog";
+import { useProviderInfoDialog } from "./dialogs/provider-info-dialog";
 
 import styles from "./app.module.scss";
 
@@ -21,13 +22,19 @@ export function App() {
     fetching,
     challenge,
     providers,
-    currentProviderId,
+    currentProvider,
     certificates,
+    isCurrentProviderLogedin,
     handleCertificatesDataReload,
     handleProviderChange,
     handleRetryConection,
+    handleProviderLoginLogout,
+    handleProviderResetAndRefreshList,
   } = useApp();
 
+  const currentProviderId = currentProvider?.id;
+  const isCurrentProviderReadOnly = Boolean(currentProvider?.readOnly);
+
   const {
     searchedText,
     list: searchedCertificate,
@@ -38,6 +45,7 @@ export function App() {
     open: handleCertificateDeleteDialogOpen,
     dialog: certificateDeleteDialog,
   } = useCertificateDeleteDialog({
+    providers,
     fortifyClient,
     onSuccess: (providerId) => {
       handleCertificatesDataReload(providerId);
@@ -78,7 +86,12 @@ export function App() {
   const {
     open: handleCertificateViewerDialogOpen,
     dialog: certificateViewerDialog,
-  } = useCertificateViewerDialog();
+  } = useCertificateViewerDialog({
+    providers,
+  });
+
+  const { open: handleProviderInfoDialogOpen, dialog: providerInfoDialog } =
+    useProviderInfoDialog({ providers });
 
   return (
     <>
@@ -92,13 +105,20 @@ export function App() {
       </CertificatesSidebar>
       <CertificatesTopbar
         searchValue={searchedText}
+        isDisabled={!currentProviderId}
+        isReadOnly={
+          isCurrentProviderReadOnly || fetching.certificates === "rejected"
+        }
         className={styles.top_bar}
         onSearch={handleSearch}
         onImport={handleCertificateImportDialogOpen}
         onCreate={handleCertificateCreateDialogOpen}
-        onReload={() =>
-          currentProviderId && handleCertificatesDataReload(currentProviderId)
+        onReload={handleProviderResetAndRefreshList}
+        onInfo={() =>
+          currentProvider && handleProviderInfoDialogOpen(currentProvider)
         }
+        isLoggedIn={isCurrentProviderLogedin}
+        onLoginLogout={handleProviderLoginLogout}
       ></CertificatesTopbar>
       <CertificatesList
         currentSortName={currentSortName}
@@ -110,16 +130,24 @@ export function App() {
         onViewDetails={handleCertificateViewerDialogOpen}
         loading={!fetching.certificates || fetching.certificates === "pending"}
         highlightedText={searchedText}
+        isLoggedIn={isCurrentProviderLogedin}
+        isReadOnly={isCurrentProviderReadOnly}
       />
       <FetchingStatusOwerlay
         fetching={fetching}
         challenge={challenge}
         onReload={handleRetryConection}
       />
-      {certificateViewerDialog()}
-      {certificateDeleteDialog()}
-      {certificateImportDialog()}
-      {certificateCreateDialog()}
+      {providers.length ? (
+        <>
+          {certificateViewerDialog()}
+          {certificateDeleteDialog()}
+          {certificateImportDialog()}
+          {certificateCreateDialog()}
+          {providerInfoDialog()}
+        </>
+      ) : null}
+
       <div className={styles.certificate_list_corners_backdrop}></div>
     </>
   );

src/components/certificate-delete-dialog/CertificateDeleteDialog.stories.tsx

@@ -4,6 +4,7 @@ import { CertificateDeleteDialog } from "./CertificateDeleteDialog";
 const meta: Meta<typeof CertificateDeleteDialog> = {
   title: "Components/CertificateDeleteDialog",
   component: CertificateDeleteDialog,
+  tags: ["!autodocs"],
 };
 
 export default meta;
@@ -15,11 +16,3 @@ export const Default: Story = {
     certificateId: "12345",
   },
 };
-
-export const Loading: Story = {
-  args: {
-    certificateName: "Certificate Name",
-    certificateId: "12345",
-    loading: true,
-  },
-};

src/components/certificate-delete-dialog/CertificateDeleteDialog.test.tsx

@@ -0,0 +1,39 @@
+import { ComponentProps } from "react";
+import { render, userEvent, screen } from "@testing";
+import { CertificateDeleteDialog } from "./CertificateDeleteDialog";
+
+describe("<CertificateDeleteDialog />", () => {
+  const defaultProps: ComponentProps<typeof CertificateDeleteDialog> = {
+    certificateName: "Certificate Name",
+    certificateId: "1",
+    onDialogClose: vi.fn(),
+    onDeleteClick: vi.fn((data) => data),
+  };
+
+  it("Should render and handle buttons click", async () => {
+    render(<CertificateDeleteDialog {...defaultProps} />);
+
+    expect(
+      screen.getByText(
+        `Are you sure you want to delete “${defaultProps.certificateName}”?`
+      )
+    ).toBeInTheDocument();
+
+    await userEvent.click(screen.getByRole("button", { name: /Cancel/ }));
+
+    expect(defaultProps.onDialogClose).toBeCalledTimes(1);
+
+    await userEvent.click(screen.getByRole("button", { name: /Delete/ }));
+
+    expect(defaultProps.onDeleteClick).toBeCalledTimes(1);
+    expect(defaultProps.onDeleteClick).toBeCalledWith(
+      defaultProps.certificateId
+    );
+  });
+
+  it("Should render loading", () => {
+    render(<CertificateDeleteDialog {...defaultProps} loading={true} />);
+
+    expect(screen.getByText(/Deleting certificate/)).toBeInTheDocument();
+  });
+});

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

@@ -3,30 +3,48 @@ import { ICertificate } 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.svg?react";
+import CertificateIcon from "../../icons/certificate-30.svg?react";
+import CertificateWithKeyIcon from "../../icons/certificate-with-key-30.svg?react";
 import styles from "./styles/index.module.scss";
 
 interface CertificateTypeLabelProps {
   type: ICertificate["type"];
+  withPrivatKey: boolean;
   className?: ComponentProps<"div">["className"];
 }
 
 export const CertificateTypeLabel: React.FunctionComponent<
   CertificateTypeLabelProps
 > = (props) => {
-  const { type, className } = props;
+  const { type, className, withPrivatKey } = props;
   const { t } = useTranslation();
 
   return (
     <div className={clsx(className, styles.certificate_type_label)}>
       {type === "x509" ? (
         <>
           <span className={styles.icon_wrapper}>
-            <CertificateIcon />
+            {withPrivatKey ? <CertificateWithKeyIcon /> : <CertificateIcon />}
+          </span>
+          <span>
+            <Typography
+              variant="s2"
+              color="black"
+              className={styles.label_part}
+            >
+              {t("certificates.list.cell.certificate")}
+            </Typography>
+            {withPrivatKey ? (
+              <Typography
+                variant="b2"
+                color="black"
+                className={styles.label_part}
+              >
+                {" "}
+                {t("certificates.list.cell.with-privat-key")}
+              </Typography>
+            ) : undefined}
           </span>
-          <Typography variant="s2" color="black">
-            {t("certificates.list.cell.certificate")}
-          </Typography>
         </>
       ) : (
         <Typography variant="s2" color="black">

src/components/certificate-type-label/styles/index.module.scss

@@ -2,15 +2,19 @@
   display: flex;
   gap: var(--pv-size-base-2);
   align-items: center;
-  .icon_wrapper {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
+}
+.icon_wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  color: var(--pv-color-gray-9);
 
+  width: var(--pv-size-base-6);
+  svg {
     width: var(--pv-size-base-6);
-    svg {
-      width: var(--pv-size-base-6);
-      height: var(--pv-size-base-6);
-    }
+    height: var(--pv-size-base-6);
   }
 }
+.label_part {
+  display: inline;
+}

src/components/certificate-viewer-dialog/CertificateViewerDialog.test.tsx

@@ -0,0 +1,50 @@
+import { render, userEvent, screen } from "@testing";
+import { CertificateViewerDialog } from "./CertificateViewerDialog";
+import { CertificateProps } from "../../types";
+
+vi.mock("@peculiar/certificates-viewer-react", () => ({
+  PeculiarCertificateViewer: () => "x509 certificate viewer component",
+  PeculiarCsrViewer: () => "CSR certificate viewer component",
+}));
+
+describe("<CertificateViewerDialog />", () => {
+  const certificate = {
+    raw: new ArrayBuffer(0),
+    subjectName: "Certificate name",
+    type: "x509",
+    label: "Certificate name",
+    subject: {
+      commonName: "Certificate name",
+    },
+  } as unknown as CertificateProps;
+
+  it("Should render as x509 and handle close", async () => {
+    const onCloseMock = vi.fn();
+
+    render(
+      <CertificateViewerDialog
+        certificate={certificate}
+        onClose={onCloseMock}
+      />
+    );
+
+    expect(screen.getByText(`“${certificate.label}” details`));
+    expect(screen.getByText(/x509 certificate viewer component/));
+
+    await userEvent.click(screen.getByRole("button", { name: /Cancel/ }));
+
+    expect(onCloseMock).toBeCalledTimes(1);
+  });
+
+  it("Should render as CSR", async () => {
+    render(
+      <CertificateViewerDialog
+        certificate={
+          { ...certificate, type: "csr" } as unknown as CertificateProps
+        }
+        onClose={vi.fn()}
+      />
+    );
+    expect(screen.getByText(/CSR certificate viewer component/));
+  });
+});