Add new permissions handling for custom domain page

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

apps/console/src/pages/organizations/settings/DomainSettingsPage.tsx

@@ -5,6 +5,8 @@ import { useTranslate } from "@probo/i18n";
 import { DomainCard } from "./_components/DomainCard";
 import { NewDomainDialog } from "./_components/NewDomainDialog";
 import { Button, Card, IconPlusLarge } from "@probo/ui";
+import { PermissionsContext } from "/providers/NewPermissionsContext";
+import { use } from "react";
 
 export const domainSettingsPageQuery = graphql`
   query DomainSettingsPageQuery($organizationId: ID!) {
@@ -27,6 +29,7 @@ export function DomainSettingsPage(props: {
   const { queryRef } = props;
 
   const { __ } = useTranslate();
+  const { canCreateCustomDomain } = use(PermissionsContext);
 
   const { organization } = usePreloadedQuery<DomainSettingsPageQuery>(
     domainSettingsPageQuery,
@@ -53,11 +56,11 @@ export function DomainSettingsPage(props: {
               )}
             </p>
             <div className="flex justify-center">
-              {/* {isAuthorized("Organization", "createCustomDomain") && ( */}
-              <NewDomainDialog>
-                <Button icon={IconPlusLarge}>{__("Add Domain")}</Button>
-              </NewDomainDialog>
-              {/* )} */}
+              {canCreateCustomDomain && (
+                <NewDomainDialog>
+                  <Button icon={IconPlusLarge}>{__("Add Domain")}</Button>
+                </NewDomainDialog>
+              )}
             </div>
           </div>
         </Card>

apps/console/src/pages/organizations/settings/DomainSettingsPageLoader.tsx

@@ -7,6 +7,10 @@ import {
 import { useQueryLoader } from "react-relay";
 import { CoreRelayProvider } from "/providers/CoreRelayProvider";
 import type { DomainSettingsPageQuery } from "/__generated__/core/DomainSettingsPageQuery.graphql";
+import { PermissionsProviderLoader } from "/providers/NewPermissionsProvider";
+import { IAMRelayProvider } from "/providers/IAMRelayProvider";
+import { domainSettingsPagePermissionsQuery } from "./domainSettingsPage.iam";
+import type { domainSettingsPage_permissionsQuery } from "/__generated__/iam/domainSettingsPage_permissionsQuery.graphql";
 
 function DomainSettingsPageLoader() {
   const organizationId = useOrganizationId();
@@ -29,10 +33,16 @@ function DomainSettingsPageLoader() {
 
 export default function () {
   return (
-    <CoreRelayProvider>
-      <Suspense>
-        <DomainSettingsPageLoader />
-      </Suspense>
-    </CoreRelayProvider>
+    <IAMRelayProvider>
+      <PermissionsProviderLoader<domainSettingsPage_permissionsQuery>
+        query={domainSettingsPagePermissionsQuery}
+      >
+        <CoreRelayProvider>
+          <Suspense>
+            <DomainSettingsPageLoader />
+          </Suspense>
+        </CoreRelayProvider>
+      </PermissionsProviderLoader>
+    </IAMRelayProvider>
   );
 }

apps/console/src/pages/organizations/settings/_components/DomainCard.tsx

@@ -9,6 +9,8 @@ import { graphql } from "relay-runtime";
 import { useFragment } from "react-relay";
 import type { DomainCardFragment$key } from "/__generated__/core/DomainCardFragment.graphql";
 import { DeleteDomainDialog } from "./DeleteDomainDialog";
+import { use } from "react";
+import { PermissionsContext } from "/providers/NewPermissionsContext";
 
 const fragment = graphql`
   fragment DomainCardFragment on CustomDomain {
@@ -22,6 +24,7 @@ export function DomainCard(props: { fKey: DomainCardFragment$key }) {
   const { fKey } = props;
 
   const { __ } = useTranslate();
+  const { canDeleteCustomDomain } = use(PermissionsContext);
 
   const domain = useFragment<DomainCardFragment$key>(fragment, fKey);
 
@@ -50,11 +53,11 @@ export function DomainCard(props: { fKey: DomainCardFragment$key }) {
               <Button variant="secondary">{__("View Details")}</Button>
             </DomainDialog>
 
-            {/* {permissions.canDeleteCustomDomain && ( */}
-            <DeleteDomainDialog domain={domain.domain}>
-              <Button variant="danger">{__("Delete")}</Button>
-            </DeleteDomainDialog>
-            {/* )} */}
+            {canDeleteCustomDomain && (
+              <DeleteDomainDialog domain={domain.domain}>
+                <Button variant="danger">{__("Delete")}</Button>
+              </DeleteDomainDialog>
+            )}
           </div>
         </div>
       </div>

apps/console/src/pages/organizations/settings/domainSettingsPage.iam.ts

@@ -0,0 +1,16 @@
+import { graphql } from "relay-runtime";
+
+export const domainSettingsPagePermissionsQuery = graphql`
+  query domainSettingsPage_permissionsQuery($organizationId: ID!) {
+    viewer @required(action: THROW) {
+      canCreateCustomDomain: permission(
+        action: "core:custom-domain:create"
+        id: $organizationId
+      )
+      canDeleteCustomDomain: permission(
+        action: "core:custom-domain:delete"
+        id: $organizationId
+      )
+    }
+  }
+`;