From b171a23216941901bac7d19e1ed4830f1c8b406d Mon Sep 17 00:00:00 2001 From: nitin <142569587+ehconitin@users.noreply.github.com> Date: Thu, 26 Mar 2026 20:03:07 +0530 Subject: [PATCH] [AI] replace custom styles with MenuItem and SidePanelGroup in AI agent persmissions tab (#19003) closes https://discord.com/channels/1130383047699738754/1486666682553598032 --- .../WorkflowAiAgentPermissionList.tsx | 43 +++-- .../WorkflowAiAgentPermissionsCrudList.tsx | 38 ++--- .../WorkflowAiAgentPermissionsFlagList.tsx | 49 ++---- .../WorkflowAiAgentPermissionsFlagRow.tsx | 56 +++---- .../WorkflowAiAgentPermissionsObjectRow.tsx | 29 +--- .../WorkflowAiAgentPermissionsObjectsList.tsx | 25 ++- ...orkflowAiAgentPermissionsPermissionRow.tsx | 59 +++---- .../WorkflowAiAgentPermissionsStyles.tsx | 85 ---------- .../WorkflowAiAgentPermissionsTab.tsx | 155 +++++++++--------- 9 files changed, 199 insertions(+), 340 deletions(-) delete mode 100644 packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsStyles.tsx diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionList.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionList.tsx index 51219ceec7..f4f3d8901f 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionList.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionList.tsx @@ -1,11 +1,11 @@ import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems'; import { type SettingsRoleObjectPermissionKey } from '@/settings/roles/role-permissions/objects-permissions/constants/SettingsRoleObjectPermissionIconConfig'; +import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup'; import { t } from '@lingui/core/macro'; import { type ObjectPermission } from '~/generated-metadata/graphql'; import { filterBySearchQuery } from '~/utils/filterBySearchQuery'; import { CRUD_PERMISSIONS } from '@/workflow/workflow-steps/workflow-actions/ai-agent-action/constants/WorkflowAiAgentCrudPermissions'; import { WorkflowAiAgentPermissionsPermissionRow } from './WorkflowAiAgentPermissionsPermissionRow'; -import { StyledLabel, StyledList } from './WorkflowAiAgentPermissionsStyles'; const CRUD_PERMISSION_ORDER = CRUD_PERMISSIONS.reduce< Record @@ -94,27 +94,24 @@ export const WorkflowAiAgentPermissionList = ({ } return ( -
- {t`CRUD`} - - {filteredPermissions.map((permission) => ( - - onDeletePermission( - permission.objectMetadataId, - permission.permissionKey, - ) - } - /> - ))} - -
+ + {filteredPermissions.map((permission) => ( + + onDeletePermission( + permission.objectMetadataId, + permission.permissionKey, + ) + } + /> + ))} + ); }; diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsCrudList.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsCrudList.tsx index 7ceb99e92a..07ef980a22 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsCrudList.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsCrudList.tsx @@ -1,8 +1,9 @@ +import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup'; import { type SettingsRoleObjectPermissionKey } from '@/settings/roles/role-permissions/objects-permissions/constants/SettingsRoleObjectPermissionIconConfig'; import { t } from '@lingui/core/macro'; import { type ObjectPermission } from '~/generated-metadata/graphql'; import { WorkflowAiAgentPermissionsPermissionRow } from './WorkflowAiAgentPermissionsPermissionRow'; -import { StyledLabel, StyledList } from './WorkflowAiAgentPermissionsStyles'; + type WorkflowAiAgentPermissionsCrudListProps = { permissions: Array<{ key: SettingsRoleObjectPermissionKey; @@ -25,25 +26,22 @@ export const WorkflowAiAgentPermissionsCrudList = ({ objectMetadataId, }: WorkflowAiAgentPermissionsCrudListProps) => { return ( -
- {t`CRUD`} - - {permissions.map((permission) => { - const isEnabled = Boolean(objectPermissions?.[permission.key]); + + {permissions.map((permission) => { + const isEnabled = Boolean(objectPermissions?.[permission.key]); - return ( - onAddPermission(objectMetadataId, permission.key)} - /> - ); - })} - -
+ return ( + onAddPermission(objectMetadataId, permission.key)} + /> + ); + })} + ); }; diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsFlagList.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsFlagList.tsx index e70c3e2760..1c4d29b46c 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsFlagList.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsFlagList.tsx @@ -1,7 +1,7 @@ +import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup'; import { type SettingsRolePermissionsSettingPermission } from '@/settings/roles/role-permissions/permission-flags/types/SettingsRolePermissionsSettingPermission'; import { type PermissionFlagType } from '~/generated-metadata/graphql'; import { WorkflowAiAgentPermissionsFlagRow } from './WorkflowAiAgentPermissionsFlagRow'; -import { StyledLabel, StyledList } from './WorkflowAiAgentPermissionsStyles'; type WorkflowAiAgentPermissionsFlagListProps = { title: string; @@ -22,40 +22,27 @@ export const WorkflowAiAgentPermissionsFlagList = ({ onAddPermissionFlag, onDeletePermissionFlag, }: WorkflowAiAgentPermissionsFlagListProps) => { - const hasPermissions = permissions.length > 0; - - if (!hasPermissions) { + if (permissions.length === 0) { return null; } return ( -
- {title} - - {permissions.map((permission) => { - const isEnabled = enabledPermissionFlagKeys.includes(permission.key); + + {permissions.map((permission) => { + const isEnabled = enabledPermissionFlagKeys.includes(permission.key); - return ( - onAddPermissionFlag?.(permission.key) - } - onDelete={ - showDeleteButton - ? () => onDeletePermissionFlag?.(permission.key) - : undefined - } - /> - ); - })} - -
+ return ( + onAddPermissionFlag?.(permission.key)} + onDelete={() => onDeletePermissionFlag?.(permission.key)} + /> + ); + })} + ); }; diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsFlagRow.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsFlagRow.tsx index 9f6c9fb680..015f2be674 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsFlagRow.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsFlagRow.tsx @@ -1,15 +1,7 @@ import { type SettingsRolePermissionsSettingPermission } from '@/settings/roles/role-permissions/permission-flags/types/SettingsRolePermissionsSettingPermission'; import { IconTrash } from 'twenty-ui/display'; -import { IconButton } from 'twenty-ui/input'; -import { - StyledDeleteButton, - StyledIconContainer, - StyledRow, - StyledRowLeftContent, - StyledText, -} from './WorkflowAiAgentPermissionsStyles'; -import { ThemeContext } from 'twenty-ui/theme-constants'; -import { useContext } from 'react'; +import { MenuItem } from 'twenty-ui/navigation'; + type WorkflowAiAgentPermissionsFlagRowProps = { permission: SettingsRolePermissionsSettingPermission; isEnabled: boolean; @@ -27,34 +19,30 @@ export const WorkflowAiAgentPermissionsFlagRow = ({ onAdd, onDelete, }: WorkflowAiAgentPermissionsFlagRowProps) => { - const { theme } = useContext(ThemeContext); const isClickable = !readonly && !isEnabled && Boolean(onAdd); const isDisabled = isEnabled && !showDeleteButton; + const showTrashButton = isEnabled && showDeleteButton; + + const iconButtons = showTrashButton + ? [ + { + Icon: IconTrash, + onClick: (event: React.MouseEvent) => { + event.stopPropagation(); + onDelete?.(); + }, + }, + ] + : undefined; return ( - - - - - - {permission.name} - - {isEnabled && showDeleteButton && ( - - { - event.stopPropagation(); - onDelete?.(); - }} - /> - - )} - + disabled={isDisabled} + iconButtons={iconButtons} + /> ); }; diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsObjectRow.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsObjectRow.tsx index 96ab5dc6fd..87a37c122f 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsObjectRow.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsObjectRow.tsx @@ -1,13 +1,6 @@ import { useIcons } from 'twenty-ui/display'; -import { - StyledIconChevronRight, - StyledIconContainer, - StyledRow, - StyledRowLeftContent, - StyledText, -} from './WorkflowAiAgentPermissionsStyles'; -import { ThemeContext } from 'twenty-ui/theme-constants'; -import { useContext } from 'react'; +import { MenuItem } from 'twenty-ui/navigation'; + type WorkflowAiAgentPermissionsObjectRowProps = { objectMetadata: { id: string; @@ -23,22 +16,16 @@ export const WorkflowAiAgentPermissionsObjectRow = ({ onClick, readonly, }: WorkflowAiAgentPermissionsObjectRowProps) => { - const { theme } = useContext(ThemeContext); const { getIcon } = useIcons(); const IconComponent = getIcon(objectMetadata.icon); return ( - - - - - - {objectMetadata.labelPlural} - - - + /> ); }; diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsObjectsList.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsObjectsList.tsx index 8a56b206bc..99221abb83 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsObjectsList.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsObjectsList.tsx @@ -1,6 +1,6 @@ +import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup'; import { t } from '@lingui/core/macro'; import { WorkflowAiAgentPermissionsObjectRow } from './WorkflowAiAgentPermissionsObjectRow'; -import { StyledLabel, StyledList } from './WorkflowAiAgentPermissionsStyles'; type WorkflowAiAgentPermissionsObjectsListProps = { objects: Array<{ @@ -18,18 +18,15 @@ export const WorkflowAiAgentPermissionsObjectsList = ({ readonly, }: WorkflowAiAgentPermissionsObjectsListProps) => { return ( -
- {t`Objects`} - - {objects.map((objectMetadata) => ( - onObjectClick(objectMetadata.id)} - readonly={readonly} - /> - ))} - -
+ + {objects.map((objectMetadata) => ( + onObjectClick(objectMetadata.id)} + readonly={readonly} + /> + ))} + ); }; diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsPermissionRow.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsPermissionRow.tsx index cf21cfdfa0..9102da9c95 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsPermissionRow.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsPermissionRow.tsx @@ -1,14 +1,7 @@ import { PermissionIcon } from '@/settings/roles/role-permissions/objects-permissions/components/PermissionIcon'; import { type SettingsRoleObjectPermissionKey } from '@/settings/roles/role-permissions/objects-permissions/constants/SettingsRoleObjectPermissionIconConfig'; import { IconTrash } from 'twenty-ui/display'; -import { IconButton } from 'twenty-ui/input'; -import { - StyledDeleteButton, - StyledIconContainer, - StyledRow, - StyledRowLeftContent, - StyledText, -} from './WorkflowAiAgentPermissionsStyles'; +import { MenuItem } from 'twenty-ui/navigation'; type WorkflowAiAgentPermissionsPermissionRowProps = { permission: { @@ -34,34 +27,32 @@ export const WorkflowAiAgentPermissionsPermissionRow = ({ }: WorkflowAiAgentPermissionsPermissionRowProps) => { const isClickable = !readonly && !isEnabled; const isDisabled = isEnabled && !showDeleteButton; + const showTrashButton = isEnabled && showDeleteButton; + + const iconButtons = showTrashButton + ? [ + { + Icon: IconTrash, + onClick: (event: React.MouseEvent) => { + event.stopPropagation(); + onDelete?.(); + }, + }, + ] + : undefined; return ( - + } + text={permission.label} onClick={isClickable ? onAdd : undefined} - isDisabled={isDisabled} - > - - - - - {permission.label} - - {isEnabled && showDeleteButton && ( - - { - e.stopPropagation(); - onDelete?.(); - }} - /> - - )} - + disabled={isDisabled} + iconButtons={iconButtons} + /> ); }; diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsStyles.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsStyles.tsx deleted file mode 100644 index e19d9bf2cb..0000000000 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsStyles.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import { styled } from '@linaria/react'; -import React from 'react'; -import { IconChevronRight, Label } from 'twenty-ui/display'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; - -export const StyledText = styled.div` - color: ${themeCssVariables.font.color.secondary}; -`; - -const StyledLabelWrapper = styled.div` - margin: ${themeCssVariables.spacing[3]} ${themeCssVariables.spacing[3]} - ${themeCssVariables.spacing[0]}; -`; - -export const StyledLabel = ({ children }: { children: React.ReactNode }) => ( - - - -); - -export const StyledRow = styled.div<{ isDisabled?: boolean }>` - align-items: center; - border-radius: ${themeCssVariables.spacing[1]}; - box-sizing: border-box; - cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'pointer')}; - display: flex; - justify-content: space-between; - opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)}; - padding: ${themeCssVariables.spacing[1]}; - pointer-events: ${({ isDisabled }) => (isDisabled ? 'none' : 'auto')}; - width: 100%; - - :hover { - background-color: ${({ isDisabled }) => - isDisabled ? 'inherit' : themeCssVariables.background.transparent.light}; - } - - :hover [data-delete-button] { - opacity: 1; - } -`; - -export const StyledDeleteButton = styled.div` - opacity: 0; - transition: opacity ${themeCssVariables.animation.duration.fast}ms; -`; - -export const StyledRowLeftContent = styled.div` - align-items: center; - display: flex; - gap: ${themeCssVariables.spacing[1]}; -`; - -export const StyledList = styled.div` - display: flex; - flex-direction: column; - gap: ${themeCssVariables.spacing[0.5]}; - padding: ${themeCssVariables.spacing[2]}; -`; - -export const StyledIconContainer = styled.div` - align-items: center; - background-color: ${themeCssVariables.background.tertiary}; - border-radius: ${themeCssVariables.spacing[1]}; - color: ${themeCssVariables.font.color.tertiary}; - display: flex; - justify-content: center; - padding: ${themeCssVariables.spacing[1]}; -`; - -const StyledIconChevronRightWrapper = styled.div` - align-items: center; - color: ${themeCssVariables.font.color.tertiary}; - display: inline-flex; -`; - -export const StyledIconChevronRight = ({ - size, - color, - stroke, -}: React.ComponentProps) => ( - - - -); diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsTab.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsTab.tsx index e408df3d02..5aba5c6a89 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsTab.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsTab.tsx @@ -1,20 +1,19 @@ import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems'; import { useActionRolePermissionFlagConfig } from '@/settings/roles/role-permissions/permission-flags/hooks/useActionRolePermissionFlagConfig'; +import { SidePanelSubPageNavigationHeader } from '@/side-panel/pages/common/components/SidePanelSubPageNavigationHeader'; import { TextInput } from '@/ui/input/components/TextInput'; -import { type WorkflowAiAgentAction } from '@/workflow/types/Workflow'; -import { useWorkflowAiAgentPermissionActions } from '@/workflow/workflow-steps/workflow-actions/ai-agent-action/hooks/useWorkflowAiAgentPermissionActions'; import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState'; import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; +import { type WorkflowAiAgentAction } from '@/workflow/types/Workflow'; +import { useWorkflowAiAgentPermissionActions } from '@/workflow/workflow-steps/workflow-actions/ai-agent-action/hooks/useWorkflowAiAgentPermissionActions'; import { workflowAiAgentActionAgentState } from '@/workflow/workflow-steps/workflow-actions/ai-agent-action/states/workflowAiAgentActionAgentState'; import { workflowAiAgentPermissionsIsAddingPermissionState } from '@/workflow/workflow-steps/workflow-actions/ai-agent-action/states/workflowAiAgentPermissionsIsAddingPermissionState'; import { workflowAiAgentPermissionsSelectedObjectIdState } from '@/workflow/workflow-steps/workflow-actions/ai-agent-action/states/workflowAiAgentPermissionsSelectedObjectIdState'; +import { useQuery } from '@apollo/client/react'; import { styled } from '@linaria/react'; import { t } from '@lingui/core/macro'; import { useState } from 'react'; import { isDefined } from 'twenty-shared/utils'; -import { IconChevronLeft } from 'twenty-ui/display'; -import { IconButton } from 'twenty-ui/input'; -import { useQuery } from '@apollo/client/react'; import { type Agent, GetRolesDocument } from '~/generated-metadata/graphql'; import { SidePanelSkeletonLoader } from '~/loading/components/SidePanelSkeletonLoader'; import { filterBySearchQuery } from '~/utils/filterBySearchQuery'; @@ -22,16 +21,22 @@ import { filterBySearchQuery } from '~/utils/filterBySearchQuery'; import { isNonTextWritingKey } from '@/ui/utilities/hotkey/utils/isNonTextWritingKey'; import { WorkflowAiAgentPermissionList } from '@/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionList'; import { CRUD_PERMISSIONS } from '@/workflow/workflow-steps/workflow-actions/ai-agent-action/constants/WorkflowAiAgentCrudPermissions'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; import { WorkflowAiAgentPermissionsCrudList } from './WorkflowAiAgentPermissionsCrudList'; import { WorkflowAiAgentPermissionsFlagList } from './WorkflowAiAgentPermissionsFlagList'; import { WorkflowAiAgentPermissionsObjectsList } from './WorkflowAiAgentPermissionsObjectsList'; import { getFilteredPermissions } from './workflowAiAgentPermissions.utils'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; + const StyledSearchInputContainer = styled.div` + background-color: ${themeCssVariables.background.transparent.lighter}; border-block: 1px solid ${themeCssVariables.border.color.medium}; + box-sizing: border-box; height: 40px; + padding-inline: ${themeCssVariables.spacing[2]}; width: 100%; + & input { + background-color: transparent; border: none; border-radius: 0; height: 40px; @@ -40,24 +45,9 @@ const StyledSearchInputContainer = styled.div` } `; -const StyledBackButtonText = styled.span` - color: ${themeCssVariables.font.color.secondary}; -`; - -const StyledBackButton = styled.button` - align-items: center; - background: none; - border: none; - color: ${themeCssVariables.font.color.secondary}; - cursor: pointer; - display: flex; - gap: ${themeCssVariables.spacing[1]}; - padding: ${themeCssVariables.spacing[3]}; - text-align: left; - width: 100%; - - &:hover { - color: ${themeCssVariables.font.color.primary}; +const StyledBackButtonContainer = styled.div` + & > div { + border-bottom: none; } `; @@ -65,6 +55,10 @@ const StyledContainer = styled.div` width: 100%; `; +const StyledGroupsContainer = styled.div` + padding: ${themeCssVariables.spacing[2]}; +`; + type WorkflowAiAgentPermissionsTabProps = { action: WorkflowAiAgentAction; readonly: boolean; @@ -193,14 +187,17 @@ export const WorkflowAiAgentPermissionsTab = ({ return ( {shouldShowBackButton && ( - - - {t`Add permission`} - + + + )} setSearchQuery(value)} placeholder={t`Type anything...`} @@ -212,58 +209,60 @@ export const WorkflowAiAgentPermissionsTab = ({ /> - {shouldShowCrudList && ( - ({ - key: p.key, - label: p.label(selectedObject.labelPlural), - })), - searchQuery, - getSearchableValues: (permission) => [permission.label], - })} - objectPermissions={objectPermissionForSelected} - readonly={readonly} - onAddPermission={handleAddPermission} - objectMetadataId={selectedObject.id} - /> - )} + + {shouldShowCrudList && ( + ({ + key: p.key, + label: p.label(selectedObject.labelPlural), + })), + searchQuery, + getSearchableValues: (permission) => [permission.label], + })} + objectPermissions={objectPermissionForSelected} + readonly={readonly} + onAddPermission={handleAddPermission} + objectMetadataId={selectedObject.id} + /> + )} - {shouldShowSelectionLists && ( - <> - - - - )} + {shouldShowSelectionLists && ( + <> + + + + )} - {shouldShowExistingPermissions && ( - <> - - - - )} + {shouldShowExistingPermissions && ( + <> + + + + )} + ); };