Merge branch 'donskov/v2' into aslobodian/v2-fix-certificate-import-d…

…ialog

package.json

@@ -46,6 +46,7 @@
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
     "react-dropzone": "^14.2.3",
+    "react-error-boundary": "^4.0.13",
     "react-i18next": "^14.1.1",
     "react-use": "^17.5.0"
   },

src/app.tsx

@@ -6,8 +6,8 @@ import { CertificatesList } from "./components/certificates-list";
 import { CertificatesSidebar } from "./components/certificates-sidebar";
 import { CertificatesProvidersList } from "./components/certificates-providers-list";
 import { CertificatesTopbar } from "./components/certificates-topbar";
-import { CertificateDeleteDialog } from "./components/certificate-delete-dialog";
 import { CertificateViewerDialog } from "./components/certificate-viewer-dialog";
+import { useCertificateDeleteDialog } from "./dialogs/certificate-delete-dialog";
 import { useCertificateImportDialog } from "./dialogs/certificate-import-dialog";
 import { useCertificateCreateDialog } from "./dialogs/certificate-create-dialog";
 
@@ -20,17 +20,18 @@ export function App() {
     providers,
     currentProviderId,
     certificates,
-    currentCertificatDelete,
     currentCertificateViewerValue,
     handleProviderChange,
     handleCertificatesSearch,
-    handleCertificateDeleteDialogOpen,
-    handleCertificateDeleteDialogClose,
-    handleCertificateDelete,
     handleCertificateViewerOpen,
     handleCertificateViewerClose,
   } = useApp();
 
+  const {
+    open: handleCertificateDeleteDialogOpen,
+    dialog: certificateDeleteDialog,
+  } = useCertificateDeleteDialog();
+
   const {
     open: handleCertificateImportDialogOpen,
     dialog: certificateImportDialog,
@@ -70,15 +71,6 @@ export function App() {
           onViewDetails={handleCertificateViewerOpen}
         />
       ) : null}
-      {currentCertificatDelete?.id ? (
-        <CertificateDeleteDialog
-          certificateId={currentCertificatDelete.id}
-          certificateName={currentCertificatDelete.name}
-          loading={currentCertificatDelete?.loading}
-          onDialogClose={handleCertificateDeleteDialogClose}
-          onDeleteClick={handleCertificateDelete}
-        />
-      ) : null}
 
       <FetchingStatusOwerlay fetching={fetching} challenge={challenge} />
       {currentCertificateViewerValue ? (
@@ -87,6 +79,7 @@ export function App() {
           onClose={handleCertificateViewerClose}
         />
       ) : null}
+      {certificateDeleteDialog()}
       {certificateImportDialog()}
       {certificateCreateDialog()}
     </>

src/components/app-fallback/AppFallback.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AppFallback } from "./AppFallback";
+import { fn } from "@storybook/test";
+
+const meta: Meta<typeof AppFallback> = {
+  title: "Components/AppFallback",
+  component: AppFallback,
+};
+
+export default meta;
+type Story = StoryObj<typeof AppFallback>;
+
+export const Default: Story = {
+  args: {
+    resetErrorBoundary: fn(),
+  },
+};

src/components/app-fallback/AppFallback.tsx

@@ -0,0 +1,40 @@
+import { useTranslation } from "react-i18next";
+import { FallbackProps } from "react-error-boundary";
+import { Button, Typography } from "@peculiar/react-components";
+
+import ErrorIcon from "../../icons/error-big.svg?react";
+
+import styles from "./styles/index.module.scss";
+
+export const AppFallback = (props: FallbackProps) => {
+  const { resetErrorBoundary } = props;
+  const { t } = useTranslation();
+
+  return (
+    <div className={styles.box}>
+      <div className={styles.content}>
+        <div className={styles.icon_wrapper}>
+          <ErrorIcon />
+        </div>
+        <Typography variant="h5" color="black">
+          {t("app-error.message")}
+        </Typography>
+        <Typography variant="b2" color="gray-9">
+          {t("app-error.description")}
+        </Typography>
+        <div className={styles.buttons_group}>
+          <Button component="a" href="/" variant="outlined">
+            {t("app-error.button.home-page")}
+          </Button>
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={resetErrorBoundary}
+          >
+            {t("app-error.button.try-again")}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};

src/components/app-fallback/index.ts

@@ -0,0 +1 @@
+export * from "./AppFallback";

src/components/app-fallback/styles/index.module.scss

@@ -0,0 +1,31 @@
+.box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  z-index: 1000;
+  background-color: var(--pv-color-gray-2);
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--pv-size-base-2);
+    text-align: center;
+    align-items: center;
+
+    .icon_wrapper {
+      font-size: 0;
+      padding-bottom: var(--pv-size-base-2);
+    }
+
+    .buttons_group {
+      padding-top: var(--pv-size-base-4);
+      display: flex;
+      gap: var(--pv-size-base-2);
+    }
+  }
+}

src/components/app-providers/AppProviders.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 import { ThemeProvider, ToastProvider } from "@peculiar/react-components";
+import { ErrorBoundary } from "react-error-boundary";
+import { AppFallback } from "../app-fallback";
 import { theme } from "../../config/theme";
 
 export const AppProviders: React.FunctionComponent<{
@@ -8,7 +10,9 @@ export const AppProviders: React.FunctionComponent<{
   const { children } = props;
   return (
     <ThemeProvider theme={theme}>
-      <ToastProvider maxToasts={4}>{children}</ToastProvider>
+      <ErrorBoundary FallbackComponent={AppFallback}>
+        <ToastProvider maxToasts={4}>{children}</ToastProvider>
+      </ErrorBoundary>
     </ThemeProvider>
   );
 };

src/components/certificate-create-by-custom/CertificateCreateByCustom.tsx

@@ -97,19 +97,6 @@ export const CertificateCreateByCustom: React.FunctionComponent<
       onChange={(event) => setIsFormValid(event.currentTarget.checkValidity())}
     >
       <Card className={styles.card}>
-        <div className={styles.general_box}>
-          <Typography variant="s2" color="black">
-            {t("certificates.general.title")}
-          </Typography>
-          <div className={styles.general_fields}>
-            <TextField
-              label={t("certificates.general.friendly-name")}
-              disabled
-            />
-            <TextField label={t("certificates.general.description")} disabled />
-          </div>
-        </div>
-        <div className={styles.divider}></div>
         <div className={styles.subject_box}>
           <Typography variant="s2" color="black">
             {t("certificates.subject.title")}

src/components/certificate-create-by-custom/styles/index.module.scss

@@ -19,18 +19,6 @@
     }
   }
 
-  .general_box {
-    display: flex;
-    flex-direction: column;
-    gap: var(--pv-size-base-2);
-
-    .general_fields {
-      display: flex;
-      flex-direction: column;
-      gap: var(--pv-size-base-2);
-    }
-  }
-
   .divider {
     height: 1px;
     background-color: var(--pv-color-gray-4);

src/components/certificate-name/CertificateName.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CertificateName } from "./CertificateName";
+
+const meta: Meta<typeof CertificateName> = {
+  title: "Components/CertificateName",
+  component: CertificateName,
+};
+
+export default meta;
+type Story = StoryObj<typeof CertificateName>;
+
+export const Default: Story = {
+  args: {
+    name: "Certificate name",
+  },
+};

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

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CertificateSerialNumber } from "./CertificateSerialNumber";
+
+const meta: Meta<typeof CertificateSerialNumber> = {
+  title: "Components/CertificateSerialNumber",
+  component: CertificateSerialNumber,
+};
+
+export default meta;
+type Story = StoryObj<typeof CertificateSerialNumber>;
+
+export const Default: Story = {
+  args: {
+    value: "nd84ifbhsl85ncfm975nn",
+  },
+};

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

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CertificateTypeLabel } from "./CertificateTypeLabel";
+
+const meta: Meta<typeof CertificateTypeLabel> = {
+  title: "Components/CertificateTypeLabel",
+  component: CertificateTypeLabel,
+};
+
+export default meta;
+type Story = StoryObj<typeof CertificateTypeLabel>;
+
+export const Default: Story = {
+  args: {
+    type: "x509",
+  },
+};

src/components/certificates-list/CertificatesList.tsx

@@ -28,7 +28,7 @@ import styles from "./styles/index.module.scss";
 
 interface CertificatesListProps {
   certificates: CertificateProps[];
-  onDelete: (id: string, name: string) => void;
+  onDelete: (certificateId: string, providerId: string, label: string) => void;
   onViewDetails: (certificate: CertificateProps) => void;
 }
 
@@ -67,7 +67,7 @@ export const CertificatesList: React.FunctionComponent<
         </TableHeader>
         <TableBody>
           {certificates.map((certificate) => {
-            const { id, serialNumber, type, label, notAfter, raw } =
+            const { id, providerID, serialNumber, type, label, notAfter, raw } =
               certificate;
             return (
               <TableRow
@@ -129,7 +129,9 @@ export const CertificatesList: React.FunctionComponent<
                     <IconButton
                       tabIndex={0}
                       title={t("certificates.list.action.delete")}
-                      onClick={() => onDelete(id as string, label as string)}
+                      onClick={() =>
+                        onDelete(id as string, providerID, label as string)
+                      }
                       size="small"
                       className={styles.action_icon_button}
                     >

src/components/certificates-sidebar/CertificatesSidebar.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CertificatesSidebar } from "./CertificatesSidebar";
+
+const meta: Meta<typeof CertificatesSidebar> = {
+  title: "Components/CertificatesSidebar",
+  component: CertificatesSidebar,
+};
+
+export default meta;
+type Story = StoryObj<typeof CertificatesSidebar>;
+
+export const Default: Story = {
+  args: {
+    children: "",
+  },
+};

src/components/date/Date.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Date as DateComponent } from "./Date";
+
+const meta: Meta<typeof DateComponent> = {
+  title: "Components/Date",
+  component: DateComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof DateComponent>;
+
+export const Default: Story = {
+  args: {
+    date: new Date(),
+  },
+};

src/dialogs/certificate-delete-dialog/index.ts

@@ -0,0 +1 @@
+export * from "./useCertificateDeleteDialog";

src/dialogs/certificate-delete-dialog/useCertificateDeleteDialog.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { useToast } from "@peculiar/react-components";
+import { useTranslation } from "react-i18next";
+import { useLockBodyScroll } from "react-use";
+import { CertificateDeleteDialog } from "../../components/certificate-delete-dialog";
+
+export function useCertificateDeleteDialog() {
+  const { addToast } = useToast();
+  const { t } = useTranslation();
+
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [currentCertificatDelete, setCurrentCetificateDelete] = React.useState<
+    undefined | { certificateId: string; providerId: string; label: string }
+  >();
+
+  const handleOpen = (
+    certificateId: string,
+    providerId: string,
+    label: string
+  ) => {
+    setCurrentCetificateDelete({
+      certificateId,
+      providerId,
+      label,
+    });
+  };
+
+  const handleClose = () => {
+    setCurrentCetificateDelete(undefined);
+  };
+
+  const handleCertificateDelete = (id: string) => {
+    // TODO: add logic
+    console.log("Delete certificate: ", id, currentCertificatDelete);
+    // temporary behaviour
+    setIsLoading(true);
+    setTimeout(function () {
+      setIsLoading(false);
+      handleClose();
+      addToast({
+        message: t("certificates.dialog.delete.failure-message"),
+        variant: "wrong",
+        disableIcon: true,
+        isClosable: true,
+      });
+    }, 1000);
+  };
+
+  const isOpen = !!currentCertificatDelete?.certificateId;
+
+  useLockBodyScroll(isOpen);
+
+  return {
+    open: handleOpen,
+    dialog: () =>
+      isOpen ? (
+        <CertificateDeleteDialog
+          certificateId={currentCertificatDelete.certificateId}
+          certificateName={currentCertificatDelete.label}
+          loading={isLoading}
+          onDialogClose={handleClose}
+          onDeleteClick={handleCertificateDelete}
+        />
+      ) : null,
+  };
+}