refactor(console): collaborator can see tenant domain settings in readonly mode (#5652)

packages/console/src/containers/ConsoleContent/index.tsx

@@ -231,9 +231,7 @@ function ConsoleContent() {
                 {isDevFeaturesEnabled && (
                   <Route path={`${TenantSettingsTabs.Members}/*`} element={<TenantMembers />} />
                 )}
-                {canManageTenant && (
-                  <Route path={TenantSettingsTabs.Domains} element={<TenantDomainSettings />} />
-                )}
+                <Route path={TenantSettingsTabs.Domains} element={<TenantDomainSettings />} />
                 {!isDevTenant && canManageTenant && (
                   <>
                     <Route path={TenantSettingsTabs.Subscription} element={<Subscription />} />

packages/console/src/pages/TenantSettings/TenantDomainSettings/AddDomainForm/index.tsx

@@ -16,10 +16,11 @@ type FormData = {
 
 type Props = {
   className?: string;
+  isReadonly?: boolean;
   onSubmitCustomDomain: (data: FormData) => Promise<void>;
 };
 
-function AddDomainForm({ className, onSubmitCustomDomain }: Props) {
+function AddDomainForm({ className, isReadonly, onSubmitCustomDomain }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const {
     register,
@@ -46,6 +47,7 @@ function AddDomainForm({ className, onSubmitCustomDomain }: Props) {
         className={styles.textInput}
         placeholder={t('domain.custom.custom_domain_placeholder')}
         error={errors.domain?.message}
+        readOnly={isReadonly}
         onKeyDown={onKeyDownHandler({ Enter: onSubmit })}
         {...register('domain', {
           required: true,
@@ -60,7 +62,7 @@ function AddDomainForm({ className, onSubmitCustomDomain }: Props) {
         type="primary"
         title="domain.custom.add_domain"
         isLoading={isSubmitting}
-        disabled={domainInput.length === 0}
+        disabled={domainInput.length === 0 || isReadonly}
         onClick={onSubmit}
       />
     </div>

packages/console/src/pages/TenantSettings/TenantDomainSettings/CustomDomain/CustomDomainHeader/index.tsx

@@ -18,6 +18,7 @@ type Props = {
   customDomain: CustomDomain;
   hasExtraTipsOnDelete?: boolean;
   hasOpenExternalLink?: boolean;
+  isReadonly?: boolean;
   onDeleteCustomDomain: () => Promise<void>;
 };
 
@@ -25,6 +26,7 @@ function CustomDomainHeader({
   customDomain: { domain, status },
   hasExtraTipsOnDelete,
   hasOpenExternalLink,
+  isReadonly,
   onDeleteCustomDomain,
 }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
@@ -72,15 +74,17 @@ function CustomDomainHeader({
       <Spacer />
       <CopyToClipboard value={domain} variant="icon" />
       {hasOpenExternalLink && <OpenExternalLink link={`https://${domain}`} />}
-      <ActionMenu
-        icon={<More className={styles.icon} />}
-        iconSize="small"
-        title={<DynamicT forKey="general.more_options" />}
-      >
-        <ActionMenuItem icon={<Delete />} type="danger" onClick={handleDelete}>
-          <DynamicT forKey="general.delete" />
-        </ActionMenuItem>
-      </ActionMenu>
+      {!isReadonly && (
+        <ActionMenu
+          icon={<More className={styles.icon} />}
+          iconSize="small"
+          title={<DynamicT forKey="general.more_options" />}
+        >
+          <ActionMenuItem icon={<Delete />} type="danger" onClick={handleDelete}>
+            <DynamicT forKey="general.delete" />
+          </ActionMenuItem>
+        </ActionMenu>
+      )}
     </div>
   );
 }

packages/console/src/pages/TenantSettings/TenantDomainSettings/CustomDomain/index.tsx

@@ -10,6 +10,7 @@ type Props = {
   customDomain: CustomDomainType;
   hasExtraTipsOnDelete?: boolean;
   hasOpenExternalLink?: boolean;
+  isReadonly?: boolean;
   onDeleteCustomDomain: () => Promise<void>;
 };
 
@@ -18,6 +19,7 @@ function CustomDomain({
   customDomain,
   hasExtraTipsOnDelete,
   hasOpenExternalLink,
+  isReadonly,
   onDeleteCustomDomain,
 }: Props) {
   return (
@@ -26,6 +28,7 @@ function CustomDomain({
         customDomain={customDomain}
         hasExtraTipsOnDelete={hasExtraTipsOnDelete}
         hasOpenExternalLink={hasOpenExternalLink}
+        isReadonly={isReadonly}
         onDeleteCustomDomain={onDeleteCustomDomain}
       />
       {customDomain.status !== DomainStatus.Active && (

packages/console/src/pages/TenantSettings/TenantDomainSettings/index.tsx

@@ -7,6 +7,7 @@ import PageMeta from '@/components/PageMeta';
 import FormField from '@/ds-components/FormField';
 import TextLink from '@/ds-components/TextLink';
 import useApi from '@/hooks/use-api';
+import useCurrentTenantScopes from '@/hooks/use-current-tenant-scopes';
 import useCustomDomain from '@/hooks/use-custom-domain';
 import useDocumentationUrl from '@/hooks/use-documentation-url';
 
@@ -22,6 +23,7 @@ function TenantDomainSettings() {
   const { data: customDomain, isLoading: isLoadingCustomDomain, mutate } = useCustomDomain(true);
   const { getDocumentationUrl } = useDocumentationUrl();
   const api = useApi();
+  const { canManageTenant } = useCurrentTenantScopes();
 
   if (isLoadingCustomDomain) {
     return <Skeleton />;
@@ -42,6 +44,7 @@ function TenantDomainSettings() {
           {customDomain ? (
             <CustomDomain
               hasExtraTipsOnDelete
+              isReadonly={!canManageTenant}
               customDomain={customDomain}
               onDeleteCustomDomain={async () => {
                 await api.delete(`api/domains/${customDomain.id}`);
@@ -50,6 +53,7 @@ function TenantDomainSettings() {
             />
           ) : (
             <AddDomainForm
+              isReadonly={!canManageTenant}
               onSubmitCustomDomain={async (json) => {
                 const createdDomain = await api.post('api/domains', { json }).json<Domain>();
                 mutate(createdDomain);

packages/console/src/pages/TenantSettings/index.tsx

@@ -26,11 +26,9 @@ function TenantSettings() {
         <TabNavItem href={`/tenant-settings/${TenantSettingsTabs.Settings}`}>
           <DynamicT forKey="tenants.tabs.settings" />
         </TabNavItem>
-        {canManageTenant && (
-          <TabNavItem href={`/tenant-settings/${TenantSettingsTabs.Domains}`}>
-            <DynamicT forKey="tenants.tabs.domains" />
-          </TabNavItem>
-        )}
+        <TabNavItem href={`/tenant-settings/${TenantSettingsTabs.Domains}`}>
+          <DynamicT forKey="tenants.tabs.domains" />
+        </TabNavItem>
         {isDevFeaturesEnabled && (
           <TabNavItem href={`/tenant-settings/${TenantSettingsTabs.Members}`}>
             <DynamicT forKey="tenants.tabs.members" />