Add ProviderInfoDialog component

src/components/provider-info-dialog/ProviderInfoDialog.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ProviderInfoDialog } from "./ProviderInfoDialog";
+import type { IProviderInfo } from "@peculiar/fortify-client-core";
+
+const meta: Meta<typeof ProviderInfoDialog> = {
+  title: "Components/ProviderInfoDialog",
+  component: ProviderInfoDialog,
+};
+
+export default meta;
+type Story = StoryObj<typeof ProviderInfoDialog>;
+
+export const Default: Story = {
+  args: {
+    data: {
+      name: "MacOS Crypto",
+      version: 0,
+      isHardware: true,
+      token: {
+        label: "MacOS Crypto",
+        firmwareVersion: {
+          major: 0,
+          minor: 1,
+          version: 0,
+        },
+        flags: 1064,
+        freePrivateMemory: 18446744073709552000,
+        freePublicMemory: 18446744073709552000,
+        hardwareVersion: {
+          major: 0,
+          minor: 1,
+          version: 0,
+        },
+        manufacturerID: "Peculiar Ventures",
+        maxPinLen: 255,
+        maxRwSessionCount: 0,
+        maxSessionCount: 0,
+        minPinLen: 4,
+        model: "MacOS Crypto",
+        rwSessionCount: 0,
+        serialNumber: "1",
+        sessionCount: 0,
+        totalPrivateMemory: 18446744073709552000,
+        totalPublicMemory: 18446744073709552000,
+        version: 0,
+      },
+    } as IProviderInfo,
+  },
+};

src/components/provider-info-dialog/ProviderInfoDialog.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Typography,
+} from "@peculiar/react-components";
+import { useTranslation } from "react-i18next";
+import type { IProviderInfo } from "@peculiar/fortify-client-core";
+
+import styles from "./styles/index.module.scss";
+
+interface ProviderInfoDialogProps {
+  data: IProviderInfo;
+  onDialogClose: () => void;
+}
+
+export const ProviderInfoDialog: React.FunctionComponent<
+  ProviderInfoDialogProps
+> = (props) => {
+  const { onDialogClose, data } = props;
+  const { t } = useTranslation();
+
+  const items = [
+    {
+      label: t("providers.dialog.info.list.token-name"),
+      value: data.token?.label,
+    },
+    {
+      label: t("providers.dialog.info.list.token-category.label"),
+      value: t(
+        `providers.dialog.info.list.token-category.value.${data.isHardware ? "hardware" : "software"}`
+      ),
+    },
+  ];
+
+  const renderInfoItems = () =>
+    items.map(({ label, value }) => (
+      <React.Fragment key={label}>
+        <Typography variant="b2" color="gray-9">
+          {label}
+        </Typography>
+        <Typography variant="b2" color="black">
+          {value}
+        </Typography>
+      </React.Fragment>
+    ));
+
+  return (
+    <Dialog open onClose={onDialogClose} className={styles.dialog}>
+      <>
+        <DialogTitle className={styles.dialog_title}>
+          {t("providers.dialog.info.title", { name: data.name })}
+        </DialogTitle>
+        <DialogContent className={styles.dialog_content}>
+          <div className={styles.dialog_content_list}>{renderInfoItems()}</div>
+        </DialogContent>
+        <DialogActions className={styles.dialog_footer}>
+          <Button variant="outlined" onClick={onDialogClose}>
+            {t("button.cancel")}
+          </Button>
+        </DialogActions>
+      </>
+    </Dialog>
+  );
+};

src/components/provider-info-dialog/index.ts

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

src/components/provider-info-dialog/styles/index.module.scss

@@ -0,0 +1,22 @@
+.dialog {
+  max-width: 879px !important;
+
+  .dialog_title {
+    padding-left: var(--pv-size-base-6);
+    padding-right: var(--pv-size-base-6);
+  }
+
+  .dialog_content {
+    max-height: 525px;
+    .dialog_content_list {
+      padding: var(--pv-size-base) var(--pv-size-base-2) 0 var(--pv-size-base-2);
+      display: grid;
+      grid-template-columns: 35% auto;
+      gap: var(--pv-size-base-4) var(--pv-size-base-8);
+    }
+  }
+
+  .dialog_footer {
+    padding: var(--pv-size-base-6);
+  }
+}

src/i18n/locales/en/main.json

@@ -6,6 +6,21 @@
         "read-only": "Read only"
       },
       "empty-text": "No providers connected"
+    },
+    "dialog": {
+      "info": {
+        "title": "{{name}} information",
+        "list": {
+          "token-name": "Token name:",
+          "token-category": {
+            "label": "Token category",
+            "value": {
+              "hardware": "Hardware",
+              "software": "Software"
+            }
+          }
+        }
+      }
     }
   },
   "certificates": {