Add public trust center documents

Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>
2025-10-02 16:02:57 +02:00
parent ba91e46cf7
commit 8504830c4b
39 changed files with 890 additions and 599 deletions
--- a/apps/console/src/components/trustCenter/TrustCenterAuditsCard.tsx
+++ b/apps/console/src/components/trustCenter/TrustCenterAuditsCard.tsx
@@ -9,14 +9,14 @@ import {
  Tbody,
  Th,
  IconChevronDown,
-  IconCheckmark1,
-  IconCrossLargeX,
  Badge,
+  Field,
+  Option,
 } from "@probo/ui";
 import { useTranslate } from "@probo/i18n";
 import { useFragment } from "react-relay";
-import { useMemo, useState } from "react";
-import { sprintf, getAuditStateVariant, getAuditStateLabel, formatDate } from "@probo/helpers";
+import { useMemo, useState, useCallback, useEffect } from "react";
+import { sprintf, getAuditStateVariant, getAuditStateLabel, formatDate, getTrustCenterVisibilityOptions } from "@probo/helpers";
 import { useOrganizationId } from "/hooks/useOrganizationId";
 import clsx from "clsx";
 import type { TrustCenterAuditsCardFragment$key } from "./__generated__/TrustCenterAuditsCardFragment.graphql";
@@ -31,7 +31,7 @@ const trustCenterAuditFragment = graphql`
    validFrom
    validUntil
    state
-    showOnTrustCenter
+    trustCenterVisibility
    createdAt
  }
 `;
@@ -40,7 +40,7 @@ type Mutation<Params> = (p: {
  variables: {
    input: {
      id: string;
-      showOnTrustCenter: boolean;
+      trustCenterVisibility: "NONE" | "PRIVATE" | "PUBLIC";
    } & Params;
  };
 }) => void;
@@ -49,7 +49,7 @@ type Props<Params> = {
  audits: TrustCenterAuditsCardFragment$key[];
  params: Params;
  disabled?: boolean;
-  onToggleVisibility: Mutation<Params>;
+  onChangeVisibility: Mutation<Params>;
  variant?: "card" | "table";
 };

@@ -62,12 +62,12 @@ export function TrustCenterAuditsCard<Params>(props: Props<Params>) {
  const showMoreButton = limit !== null && props.audits.length > limit;
  const variant = props.variant ?? "table";

-  const onToggleVisibility = (auditId: string, showOnTrustCenter: boolean) => {
-    props.onToggleVisibility({
+  const onChangeVisibility = (auditId: string, trustCenterVisibility: "NONE" | "PRIVATE" | "PUBLIC") => {
+    props.onChangeVisibility({
      variables: {
        input: {
          id: auditId,
-          showOnTrustCenter,
+          trustCenterVisibility,
          ...props.params,
        },
      },
@@ -86,7 +86,6 @@ export function TrustCenterAuditsCard<Params>(props: Props<Params>) {
            <Th>{__("Valid Until")}</Th>
            <Th>{__("State")}</Th>
            <Th>{__("Visibility")}</Th>
-            <Th></Th>
          </Tr>
        </Thead>
        <Tbody>
@@ -101,7 +100,7 @@ export function TrustCenterAuditsCard<Params>(props: Props<Params>) {
            <AuditRow
              key={index}
              audit={audit}
-              onToggleVisibility={onToggleVisibility}
+              onChangeVisibility={onChangeVisibility}
              disabled={props.disabled}
            />
          ))}
@@ -123,12 +122,30 @@ export function TrustCenterAuditsCard<Params>(props: Props<Params>) {

 function AuditRow(props: {
  audit: TrustCenterAuditsCardFragment$key;
-  onToggleVisibility: (auditId: string, showOnTrustCenter: boolean) => void;
+  onChangeVisibility: (auditId: string, trustCenterVisibility: "NONE" | "PRIVATE" | "PUBLIC") => void;
  disabled?: boolean;
 }) {
  const audit = useFragment(trustCenterAuditFragment, props.audit);
  const organizationId = useOrganizationId();
  const { __ } = useTranslate();
+  const [optimisticValue, setOptimisticValue] = useState<string | null>(null);
+
+  const handleValueChange = useCallback((value: string | {}) => {
+    const stringValue = typeof value === 'string' ? value : '';
+    const typedValue = stringValue as "NONE" | "PRIVATE" | "PUBLIC";
+    setOptimisticValue(typedValue);
+    props.onChangeVisibility(audit.id, typedValue);
+  }, [audit.id, props.onChangeVisibility]);
+
+  useEffect(() => {
+    if (optimisticValue && audit.trustCenterVisibility === optimisticValue) {
+      setOptimisticValue(null);
+    }
+  }, [audit.trustCenterVisibility, optimisticValue]);
+
+  const currentValue = optimisticValue || audit.trustCenterVisibility;
+
+  const visibilityOptions = getTrustCenterVisibilityOptions(__);

  const validUntilFormatted = audit.validUntil
    ? formatDate(audit.validUntil)
@@ -148,30 +165,24 @@ function AuditRow(props: {
          {getAuditStateLabel(__, audit.state)}
        </Badge>
      </Td>
-      <Td>
-        <div className="flex items-center gap-2">
-          {audit.showOnTrustCenter ? (
-            <>
-              <IconCheckmark1 className="w-4 h-4 text-txt-primary" />
-              <span className="text-txt-primary">{__("Visible")}</span>
-            </>
-          ) : (
-            <>
-              <IconCrossLargeX className="w-4 h-4 text-txt-tertiary" />
-              <span className="text-txt-tertiary">{__("Hidden")}</span>
-            </>
-          )}
-        </div>
-      </Td>
-      <Td noLink width={100} className="text-end">
-        <Button
-          variant="secondary"
-          onClick={() => props.onToggleVisibility(audit.id, !audit.showOnTrustCenter)}
-          icon={audit.showOnTrustCenter ? IconCrossLargeX : IconCheckmark1}
+      <Td noLink width={130} className="pr-0">
+        <Field
+          type="select"
+          value={currentValue}
+          onValueChange={handleValueChange}
          disabled={props.disabled}
+          className="w-[105px]"
        >
-          {audit.showOnTrustCenter ? __("Hide") : __("Show")}
-        </Button>
+          {visibilityOptions.map((option) => (
+            <Option key={option.value} value={option.value}>
+              <div className="flex items-center justify-between w-full">
+                <Badge variant={option.variant}>
+                  {option.label}
+                </Badge>
+              </div>
+            </Option>
+          ))}
+        </Field>
      </Td>
    </Tr>
  );
--- a/apps/console/src/components/trustCenter/TrustCenterDocumentDialog.tsx
+++ b/apps/console/src/components/trustCenter/TrustCenterDocumentDialog.tsx
@@ -1,99 +0,0 @@
-import { useTranslate } from "@probo/i18n";
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  Button,
-  useDialogRef,
-} from "@probo/ui";
-import { type ReactNode } from "react";
-import { useFragment, graphql } from "react-relay";
-import type { TrustCenterDocumentsCardFragment$key } from "./__generated__/TrustCenterDocumentsCardFragment.graphql";
-
-const trustCenterDocumentDialogFragment = graphql`
-  fragment TrustCenterDocumentDialogFragment on Document {
-    id
-    title
-    showOnTrustCenter
-  }
-`;
-
-type Props = {
-  children: ReactNode;
-  documents: (TrustCenterDocumentsCardFragment$key & { id: string })[];
-  onToggleVisibility: (documentId: string, showOnTrustCenter: boolean) => void;
-  disabled?: boolean;
-};
-
-export default function TrustCenterDocumentDialog({
-  children,
-  documents,
-  onToggleVisibility,
-  disabled,
-}: Props) {
-  const { __ } = useTranslate();
-  const dialogRef = useDialogRef();
-
-  return (
-    <>
-      <span onClick={() => !disabled && dialogRef.current?.open()}>
-        {children}
-      </span>
-      <Dialog ref={dialogRef}>
-        <DialogContent>
-          <div className="text-lg font-semibold mb-4">
-            {__("Manage Document Visibility on Trust Center")}
-          </div>
-          <div className="py-4">
-            <p className="text-txt-secondary mb-4">
-              {__("Control which documents are visible on your public trust center.")}
-            </p>
-            <div className="space-y-2 max-h-96 overflow-y-auto">
-              {documents.map((documentKey) => (
-                <DocumentDialogRow
-                  key={documentKey.id}
-                  document={documentKey}
-                  onToggleVisibility={onToggleVisibility}
-                  disabled={disabled}
-                />
-              ))}
-            </div>
-          </div>
-          <DialogFooter>
-            <Button onClick={() => dialogRef.current?.close()}>
-              {__("Close")}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </>
-  );
-}
-
-function DocumentDialogRow({
-  document: documentKey,
-  onToggleVisibility,
-  disabled,
-}: {
-  document: TrustCenterDocumentsCardFragment$key & { id: string };
-  onToggleVisibility: (documentId: string, showOnTrustCenter: boolean) => void;
-  disabled?: boolean;
-}) {
-  const document = useFragment(trustCenterDocumentDialogFragment, documentKey);
-  const { __ } = useTranslate();
-
-  return (
-    <div className="flex items-center justify-between p-3 border border-border-solid rounded">
-      <div className="flex-1">
-        <div className="font-medium">{document.title}</div>
-      </div>
-      <Button
-        variant="secondary"
-        onClick={() => onToggleVisibility(document.id, !document.showOnTrustCenter)}
-        disabled={disabled}
-      >
-        {document.showOnTrustCenter ? __("Hide") : __("Show")}
-      </Button>
-    </div>
-  );
-}
--- a/apps/console/src/components/trustCenter/TrustCenterDocumentsCard.tsx
+++ b/apps/console/src/components/trustCenter/TrustCenterDocumentsCard.tsx
@@ -9,16 +9,17 @@ import {
  Tbody,
  Th,
  IconChevronDown,
-  IconCheckmark1,
-  IconCrossLargeX,
  DocumentVersionBadge,
  DocumentTypeBadge,
+  Field,
+  Option,
+  Badge,
 } from "@probo/ui";
 import { useTranslate } from "@probo/i18n";
 import type { TrustCenterDocumentsCardFragment$key } from "./__generated__/TrustCenterDocumentsCardFragment.graphql";
 import { useFragment } from "react-relay";
-import { useMemo, useState } from "react";
-import { sprintf } from "@probo/helpers";
+import { useMemo, useState, useCallback, useEffect } from "react";
+import { sprintf, getTrustCenterVisibilityOptions } from "@probo/helpers";
 import { useOrganizationId } from "/hooks/useOrganizationId";
 import clsx from "clsx";

@@ -28,7 +29,7 @@ const trustCenterDocumentFragment = graphql`
    title
    createdAt
    documentType
-    showOnTrustCenter
+    trustCenterVisibility
    versions(first: 1) {
      edges {
        node {
@@ -44,7 +45,7 @@ type Mutation<Params> = (p: {
  variables: {
    input: {
      id: string;
-      showOnTrustCenter: boolean;
+      trustCenterVisibility: "NONE" | "PRIVATE" | "PUBLIC";
    } & Params;
  };
 }) => void;
@@ -53,7 +54,7 @@ type Props<Params> = {
  documents: TrustCenterDocumentsCardFragment$key[];
  params: Params;
  disabled?: boolean;
-  onToggleVisibility: Mutation<Params>;
+  onChangeVisibility: Mutation<Params>;
  variant?: "card" | "table";
 };

@@ -66,12 +67,12 @@ export function TrustCenterDocumentsCard<Params>(props: Props<Params>) {
  const showMoreButton = limit !== null && props.documents.length > limit;
  const variant = props.variant ?? "table";

-  const onToggleVisibility = (documentId: string, showOnTrustCenter: boolean) => {
-    props.onToggleVisibility({
+  const onChangeVisibility = (documentId: string, trustCenterVisibility: "NONE" | "PRIVATE" | "PUBLIC") => {
+    props.onChangeVisibility({
      variables: {
        input: {
          id: documentId,
-          showOnTrustCenter,
+          trustCenterVisibility,
          ...props.params,
        },
      },
@@ -89,7 +90,6 @@ export function TrustCenterDocumentsCard<Params>(props: Props<Params>) {
            <Th>{__("Type")}</Th>
            <Th>{__("State")}</Th>
            <Th>{__("Visibility")}</Th>
-            <Th></Th>
          </Tr>
        </Thead>
        <Tbody>
@@ -104,7 +104,7 @@ export function TrustCenterDocumentsCard<Params>(props: Props<Params>) {
            <DocumentRow
              key={index}
              document={document}
-              onToggleVisibility={onToggleVisibility}
+              onChangeVisibility={onChangeVisibility}
              disabled={props.disabled}
            />
          ))}
@@ -127,12 +127,30 @@ export function TrustCenterDocumentsCard<Params>(props: Props<Params>) {

 function DocumentRow(props: {
  document: TrustCenterDocumentsCardFragment$key;
-  onToggleVisibility: (documentId: string, showOnTrustCenter: boolean) => void;
+  onChangeVisibility: (documentId: string, trustCenterVisibility: "NONE" | "PRIVATE" | "PUBLIC") => void;
  disabled?: boolean;
 }) {
  const document = useFragment(trustCenterDocumentFragment, props.document);
  const organizationId = useOrganizationId();
  const { __ } = useTranslate();
+  const [optimisticValue, setOptimisticValue] = useState<string | null>(null);
+
+  const handleValueChange = useCallback((value: string | {}) => {
+    const stringValue = typeof value === 'string' ? value : '';
+    const typedValue = stringValue as "NONE" | "PRIVATE" | "PUBLIC";
+    setOptimisticValue(typedValue);
+    props.onChangeVisibility(document.id, typedValue);
+  }, [document.id, props.onChangeVisibility]);
+
+  useEffect(() => {
+    if (optimisticValue && document.trustCenterVisibility === optimisticValue) {
+      setOptimisticValue(null);
+    }
+  }, [document.trustCenterVisibility, optimisticValue]);
+
+  const currentValue = optimisticValue || document.trustCenterVisibility;
+
+  const visibilityOptions = getTrustCenterVisibilityOptions(__);

  return (
    <Tr to={`/organizations/${organizationId}/documents/${document.id}`}>
@@ -147,30 +165,24 @@ function DocumentRow(props: {
      <Td>
        <DocumentVersionBadge state={document.versions?.edges?.[0]?.node?.status} />
      </Td>
-      <Td>
-        <div className="flex items-center gap-2">
-          {document.showOnTrustCenter ? (
-            <>
-              <IconCheckmark1 className="w-4 h-4 text-txt-primary" />
-              <span className="text-txt-primary">{__("Visible")}</span>
-            </>
-          ) : (
-            <>
-              <IconCrossLargeX className="w-4 h-4 text-txt-tertiary" />
-              <span className="text-txt-tertiary">{__("Hidden")}</span>
-            </>
-          )}
-        </div>
-      </Td>
-      <Td noLink width={100} className="text-end">
-        <Button
-          variant="secondary"
-          onClick={() => props.onToggleVisibility(document.id, !document.showOnTrustCenter)}
-          icon={document.showOnTrustCenter ? IconCrossLargeX : IconCheckmark1}
+      <Td noLink width={130} className="pr-0">
+        <Field
+          type="select"
+          value={currentValue}
+          onValueChange={handleValueChange}
          disabled={props.disabled}
+          className="w-[105px]"
        >
-          {document.showOnTrustCenter ? __("Hide") : __("Show")}
-        </Button>
+          {visibilityOptions.map((option) => (
+            <Option key={option.value} value={option.value}>
+              <div className="flex items-center justify-between w-full">
+                <Badge variant={option.variant}>
+                  {option.label}
+                </Badge>
+              </div>
+            </Option>
+          ))}
+        </Field>
      </Td>
    </Tr>
  );
--- a/apps/console/src/components/trustCenter/TrustCenterVendorsCard.tsx
+++ b/apps/console/src/components/trustCenter/TrustCenterVendorsCard.tsx
@@ -137,19 +137,9 @@ function VendorRow(props: {
        </Badge>
      </Td>
      <Td>
-        <div className="flex items-center gap-2">
-          {vendor.showOnTrustCenter ? (
-            <>
-              <IconCheckmark1 className="w-4 h-4 text-txt-primary" />
-              <span className="text-txt-primary">{__("Visible")}</span>
-            </>
-          ) : (
-            <>
-              <IconCrossLargeX className="w-4 h-4 text-txt-tertiary" />
-              <span className="text-txt-tertiary">{__("Hidden")}</span>
-            </>
-          )}
-        </div>
+        <Badge variant={vendor.showOnTrustCenter ? "success" : "danger"}>
+          {vendor.showOnTrustCenter ? __("Visible") : __("None")}
+        </Badge>
      </Td>
      <Td noLink width={100} className="text-end">
        <Button
--- a/apps/console/src/components/trustCenter/generated/TrustCenterAuditsCardFragment.graphql.ts
+++ b/apps/console/src/components/trustCenter/generated/TrustCenterAuditsCardFragment.graphql.ts
@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<b29f60aeb151f0b4ded9ebb02829b67f>>
+ * @generated SignedSource<<155c0b8eda88507e66eb65e060ded192>>
 * @lightSyntaxTransform
 * @nogrep
 */
@@ -10,6 +10,7 @@

 import { ReaderFragment } from 'relay-runtime';
 export type AuditState = "COMPLETED" | "IN_PROGRESS" | "NOT_STARTED" | "OUTDATED" | "REJECTED";
+export type TrustCenterVisibility = "NONE" | "PRIVATE" | "PUBLIC";
 import { FragmentRefs } from "relay-runtime";
 export type TrustCenterAuditsCardFragment$data = {
  readonly createdAt: any;
@@ -18,8 +19,8 @@ export type TrustCenterAuditsCardFragment$data = {
  };
  readonly id: string;
  readonly name: string | null | undefined;
-  readonly showOnTrustCenter: boolean;
  readonly state: AuditState;
+  readonly trustCenterVisibility: TrustCenterVisibility;
  readonly validFrom: any | null | undefined;
  readonly validUntil: any | null | undefined;
  readonly " $fragmentType": "TrustCenterAuditsCardFragment";
@@ -88,7 +89,7 @@ return {
      "alias": null,
      "args": null,
      "kind": "ScalarField",
-      "name": "showOnTrustCenter",
+      "name": "trustCenterVisibility",
      "storageKey": null
    },
    {
@@ -104,6 +105,6 @@ return {
 };
 })();

-(node as any).hash = "1c5db1ae603a40619342702f790adfeb";
+(node as any).hash = "c0f615fcad79ad39f60b48daacabdbbd";

 export default node;
--- a/apps/console/src/components/trustCenter/generated/TrustCenterDocumentDialogFragment.graphql.ts
+++ b/apps/console/src/components/trustCenter/generated/TrustCenterDocumentDialogFragment.graphql.ts
@@ -1,58 +0,0 @@
-/**
- * @generated SignedSource<<3ff483dcc660e6b45d676db7fc05a30e>>
- * @lightSyntaxTransform
- * @nogrep
- */
-
-/* tslint:disable */
-/* eslint-disable */
-// @ts-nocheck
-
-import { ReaderFragment } from 'relay-runtime';
-import { FragmentRefs } from "relay-runtime";
-export type TrustCenterDocumentDialogFragment$data = {
-  readonly id: string;
-  readonly showOnTrustCenter: boolean;
-  readonly title: string;
-  readonly " $fragmentType": "TrustCenterDocumentDialogFragment";
-};
-export type TrustCenterDocumentDialogFragment$key = {
-  readonly " $data"?: TrustCenterDocumentDialogFragment$data;
-  readonly " $fragmentSpreads": FragmentRefs<"TrustCenterDocumentDialogFragment">;
-};
-
-const node: ReaderFragment = {
-  "argumentDefinitions": [],
-  "kind": "Fragment",
-  "metadata": null,
-  "name": "TrustCenterDocumentDialogFragment",
-  "selections": [
-    {
-      "alias": null,
-      "args": null,
-      "kind": "ScalarField",
-      "name": "id",
-      "storageKey": null
-    },
-    {
-      "alias": null,
-      "args": null,
-      "kind": "ScalarField",
-      "name": "title",
-      "storageKey": null
-    },
-    {
-      "alias": null,
-      "args": null,
-      "kind": "ScalarField",
-      "name": "showOnTrustCenter",
-      "storageKey": null
-    }
-  ],
-  "type": "Document",
-  "abstractKey": null
-};
-
-(node as any).hash = "d886df25fdf197161a91bbc693c9fac8";
-
-export default node;
--- a/apps/console/src/components/trustCenter/generated/TrustCenterDocumentsCardFragment.graphql.ts
+++ b/apps/console/src/components/trustCenter/generated/TrustCenterDocumentsCardFragment.graphql.ts
@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<711a0b67f3e93814ae3297a2578373c6>>
+ * @generated SignedSource<<869852416d522b3851e516a543454edb>>
 * @lightSyntaxTransform
 * @nogrep
 */
@@ -11,13 +11,14 @@
 import { ReaderFragment } from 'relay-runtime';
 export type DocumentStatus = "DRAFT" | "PUBLISHED";
 export type DocumentType = "ISMS" | "OTHER" | "POLICY";
+export type TrustCenterVisibility = "NONE" | "PRIVATE" | "PUBLIC";
 import { FragmentRefs } from "relay-runtime";
 export type TrustCenterDocumentsCardFragment$data = {
  readonly createdAt: any;
  readonly documentType: DocumentType;
  readonly id: string;
-  readonly showOnTrustCenter: boolean;
  readonly title: string;
+  readonly trustCenterVisibility: TrustCenterVisibility;
  readonly versions: {
    readonly edges: ReadonlyArray<{
      readonly node: {
@@ -73,7 +74,7 @@ return {
      "alias": null,
      "args": null,
      "kind": "ScalarField",
-      "name": "showOnTrustCenter",
+      "name": "trustCenterVisibility",
      "storageKey": null
    },
    {
@@ -129,6 +130,6 @@ return {
 };
 })();

-(node as any).hash = "88d5e5e3a2d9f4b730428efcea644f25";
+(node as any).hash = "a90715444be8a289eae6615ce44e244d";

 export default node;