Fix trust center audist documents files tabs permissions handling

Signed-off-by: Émile Ré <nemile.re@gmail.com>

apps/console/src/pages/organizations/trustCenter/TrustCenterAuditsTab.tsx

@@ -3,21 +3,11 @@ import { useTranslate } from "@probo/i18n";
 import { useOutletContext } from "react-router";
 import { TrustCenterAuditsCard } from "/components/trustCenter/TrustCenterAuditsCard";
 import { useTrustCenterAuditUpdate } from "/hooks/graph/TrustCenterAuditGraph";
-import type { TrustCenterAuditsCardFragment$key } from "/__generated__/core/TrustCenterAuditsCardFragment.graphql";
-
-type ContextType = {
-  organization: {
-    audits?: {
-      edges: Array<{
-        node: TrustCenterAuditsCardFragment$key;
-      }>;
-    };
-  };
-};
+import type { TrustCenterGraphQuery$data } from "/__generated__/core/TrustCenterGraphQuery.graphql";
 
 export default function TrustCenterAuditsTab() {
   const { __ } = useTranslate();
-  const { organization } = useOutletContext<ContextType>();
+  const { organization } = useOutletContext<TrustCenterGraphQuery$data>();
   const [updateAuditVisibility, isUpdatingAudits] = useTrustCenterAuditUpdate();
 
   const audits = (organization.audits?.edges ?? []).map((edge) => edge.node);
@@ -38,6 +28,7 @@ export default function TrustCenterAuditsTab() {
         params={{}}
         disabled={isUpdatingAudits}
         onChangeVisibility={updateAuditVisibility}
+        canUpdate={!!organization.trustCenter?.canUpdate}
       />
     </div>
   );

apps/console/src/pages/organizations/trustCenter/TrustCenterDocumentsTab.tsx

@@ -3,21 +3,11 @@ import { useTranslate } from "@probo/i18n";
 import { useOutletContext } from "react-router";
 import { TrustCenterDocumentsCard } from "/components/trustCenter/TrustCenterDocumentsCard";
 import { useUpdateDocumentVisibilityMutation } from "/hooks/graph/TrustCenterDocumentGraph";
-import type { TrustCenterDocumentsCardFragment$key } from "/__generated__/core/TrustCenterDocumentsCardFragment.graphql";
-
-type ContextType = {
-  organization: {
-    documents?: {
-      edges: Array<{
-        node: TrustCenterDocumentsCardFragment$key;
-      }>;
-    };
-  };
-};
+import type { TrustCenterGraphQuery$data } from "/__generated__/core/TrustCenterGraphQuery.graphql";
 
 export default function TrustCenterDocumentsTab() {
   const { __ } = useTranslate();
-  const { organization } = useOutletContext<ContextType>();
+  const { organization } = useOutletContext<TrustCenterGraphQuery$data>();
   const [updateDocumentVisibility, isUpdatingDocuments] =
     useUpdateDocumentVisibilityMutation();
 
@@ -40,6 +30,7 @@ export default function TrustCenterDocumentsTab() {
         params={{}}
         disabled={isUpdatingDocuments}
         onChangeVisibility={updateDocumentVisibility}
+        canUpdate={!!organization.trustCenter?.canUpdate}
       />
     </div>
   );

apps/console/src/pages/organizations/trustCenter/TrustCenterFilesTab.tsx

@@ -13,7 +13,7 @@ import {
 } from "@probo/ui";
 import { useTranslate } from "@probo/i18n";
 import { useOutletContext } from "react-router";
-import { useState, useCallback, use } from "react";
+import { useState, useCallback } from "react";
 import z from "zod";
 import { getTrustCenterVisibilityOptions } from "@probo/helpers";
 import {
@@ -23,20 +23,7 @@ import {
 } from "/hooks/graph/TrustCenterFileGraph";
 import { useFormWithSchema } from "/hooks/useFormWithSchema";
 import { TrustCenterFilesCard } from "/components/trustCenter/TrustCenterFilesCard";
-import type { TrustCenterFilesCardFragment$key } from "/__generated__/core/TrustCenterFilesCardFragment.graphql";
-import { PermissionsContext } from "/providers/PermissionsContext";
-
-type ContextType = {
-  organization: {
-    id: string;
-    trustCenterFiles?: {
-      __id?: string;
-      edges: Array<{
-        node: TrustCenterFilesCardFragment$key;
-      }>;
-    };
-  };
-};
+import type { TrustCenterGraphQuery$data } from "/__generated__/core/TrustCenterGraphQuery.graphql";
 
 const acceptedFileTypes = {
   "application/csv": [".csv"],
@@ -75,8 +62,7 @@ const acceptedFileTypes = {
 
 export default function TrustCenterFilesTab() {
   const { __ } = useTranslate();
-  const { organization } = useOutletContext<ContextType>();
-  const { isAuthorized } = use(PermissionsContext);
+  const { organization } = useOutletContext<TrustCenterGraphQuery$data>();
   const createSchema = z.object({
     name: z.string().min(1, __("Name is required")),
     category: z.string().min(1, __("Category is required")),
@@ -258,7 +244,7 @@ export default function TrustCenterFilesTab() {
             {__("Upload and manage files for your trust center")}
           </p>
         </div>
-        {isAuthorized("Organization", "createTrustCenterFile") && (
+        {organization.canCreateTrustCenterFile && (
           <Button
             icon={IconPlusLarge}
             onClick={() => createDialogRef.current?.open()}
@@ -279,6 +265,7 @@ export default function TrustCenterFilesTab() {
         onChangeVisibility={handleChangeVisibility}
         onEdit={handleEdit}
         onDelete={handleDeleteClick}
+        canUpdate={!!organization.trustCenter?.canUpdate}
       />
 
       <Dialog ref={createDialogRef} title={__("Add File")}>

apps/console/src/pages/organizations/trustCenter/TrustCenterOverviewTab.tsx

@@ -15,19 +15,13 @@ import {
   useDeleteTrustCenterNDAMutation,
 } from "/hooks/graph/TrustCenterGraph";
 import type { TrustCenterGraphQuery$data } from "/__generated__/core/TrustCenterGraphQuery.graphql";
-import { use, useState } from "react";
+import { useState } from "react";
 import { SlackConnections } from "../../../components/organizations/SlackConnection";
-import { PermissionsContext } from "/providers/PermissionsContext";
-
-type ContextType = {
-  organization: TrustCenterGraphQuery$data["organization"];
-};
 
 export default function TrustCenterOverviewTab() {
   const { __ } = useTranslate();
   const { toast } = useToast();
-  const { organization } = useOutletContext<ContextType>();
-  const { isAuthorized } = use(PermissionsContext);
+  const { organization } = useOutletContext<TrustCenterGraphQuery$data>();
 
   const [updateTrustCenter, isUpdating] = useUpdateTrustCenterMutation();
   const [uploadNDA, isUploadingNDA] = useUploadTrustCenterNDAMutation();
@@ -36,7 +30,7 @@ export default function TrustCenterOverviewTab() {
     organization.trustCenter?.active || false,
   );
 
-  const canUpdateTrustCenter = isAuthorized("TrustCenter", "updateTrustCenter");
+  const canUpdateTrustCenter = organization.trustCenter?.canUpdate;
 
   const handleToggleActive = async (active: boolean) => {
     if (!organization.trustCenter?.id) {
@@ -189,89 +183,91 @@ export default function TrustCenterOverviewTab() {
           )}
         </Card>
       </div>
-
-      <div className="space-y-4">
-        <div className="flex items-center justify-between">
-          <h2 className="text-base font-medium">
-            {__("Non-Disclosure Agreement")}
-          </h2>
-          {(isUploadingNDA || isDeletingNDA) && <Spinner />}
-        </div>
-        <Card padded className="space-y-4">
-          <div className="space-y-2">
-            {!organization.trustCenter?.ndaFileName ? (
-              <p className="text-sm text-txt-tertiary">
-                {__(
-                  "Upload a Non-Disclosure Agreement that visitors must accept before accessing your trust center",
-                )}
-              </p>
-            ) : (
-              <></>
-            )}
-            {organization.trustCenter?.ndaFileName ? (
-              <div className="space-y-3">
-                <div className="flex items-center justify-between">
-                  <div className="space-y-1">
-                    <div className="flex items-center gap-2">
-                      <p className="text-sm font-medium">
-                        {organization.trustCenter.ndaFileName ||
-                          __("Non-Disclosure Agreement")}
+      {organization.trustCenter?.canGetNDA && (
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <h2 className="text-base font-medium">
+              {__("Non-Disclosure Agreement")}
+            </h2>
+            {(isUploadingNDA || isDeletingNDA) && <Spinner />}
+          </div>
+          <Card padded className="space-y-4">
+            <div className="space-y-2">
+              {!organization.trustCenter?.ndaFileName &&
+              organization.trustCenter.canUploadNDA ? (
+                <p className="text-sm text-txt-tertiary">
+                  {__(
+                    "Upload a Non-Disclosure Agreement that visitors must accept before accessing your trust center",
+                  )}
+                </p>
+              ) : (
+                <></>
+              )}
+              {organization.trustCenter?.ndaFileName ? (
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <div className="space-y-1">
+                      <div className="flex items-center gap-2">
+                        <p className="text-sm font-medium">
+                          {organization.trustCenter.ndaFileName ||
+                            __("Non-Disclosure Agreement")}
+                        </p>
+                      </div>
+                      <p className="text-xs text-txt-tertiary">
+                        {__(
+                          "Visitors will need to accept this NDA before accessing your trust center",
+                        )}
                       </p>
                     </div>
-                    <p className="text-xs text-txt-tertiary">
-                      {__(
-                        "Visitors will need to accept this NDA before accessing your trust center",
-                      )}
-                    </p>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <Button
-                      type="button"
-                      variant="secondary"
-                      onClick={() => {
-                        if (organization.trustCenter?.ndaFileUrl) {
-                          window.open(
-                            organization.trustCenter.ndaFileUrl,
-                            "_blank",
-                          );
-                        }
-                      }}
-                    >
-                      {__("Download PDF")}
-                    </Button>
-                    {canUpdateTrustCenter && (
+                    <div className="flex items-center gap-2">
                       <Button
-                        variant="quaternary"
-                        icon={IconTrashCan}
-                        onClick={handleNDADelete}
-                        disabled={isDeletingNDA}
-                      />
-                    )}
+                        type="button"
+                        variant="secondary"
+                        onClick={() => {
+                          if (organization.trustCenter?.ndaFileUrl) {
+                            window.open(
+                              organization.trustCenter.ndaFileUrl,
+                              "_blank",
+                            );
+                          }
+                        }}
+                      >
+                        {__("Download PDF")}
+                      </Button>
+                      {organization.trustCenter?.canDeleteNDA && (
+                        <Button
+                          variant="quaternary"
+                          icon={IconTrashCan}
+                          onClick={handleNDADelete}
+                          disabled={isDeletingNDA}
+                        />
+                      )}
+                    </div>
                   </div>
                 </div>
-              </div>
-            ) : (
-              <>
-                {canUpdateTrustCenter ? (
-                  <Dropzone
-                    description={__("Upload PDF files up to 10MB")}
-                    isUploading={isUploadingNDA}
-                    onDrop={handleNDAUpload}
-                    accept={{
-                      "application/pdf": [".pdf"],
-                    }}
-                    maxSize={10}
-                  />
-                ) : (
-                  <p className="text-sm text-txt-tertiary">
-                    {__("No NDA file uploaded")}
-                  </p>
-                )}
-              </>
-            )}
-          </div>
-        </Card>
-      </div>
+              ) : (
+                <>
+                  {canUpdateTrustCenter ? (
+                    <Dropzone
+                      description={__("Upload PDF files up to 10MB")}
+                      isUploading={isUploadingNDA}
+                      onDrop={handleNDAUpload}
+                      accept={{
+                        "application/pdf": [".pdf"],
+                      }}
+                      maxSize={10}
+                    />
+                  ) : (
+                    <p className="text-sm text-txt-tertiary">
+                      {__("No NDA file uploaded")}
+                    </p>
+                  )}
+                </>
+              )}
+            </div>
+          </Card>
+        </div>
+      )}
 
       <div className="space-y-4">
         <h2 className="text-base font-medium">{__("Integrations")}</h2>