diff --git a/packages/twenty-front/src/modules/app/components/SettingsRoutes.tsx b/packages/twenty-front/src/modules/app/components/SettingsRoutes.tsx index 0e72485df..5b36573bc 100644 --- a/packages/twenty-front/src/modules/app/components/SettingsRoutes.tsx +++ b/packages/twenty-front/src/modules/app/components/SettingsRoutes.tsx @@ -274,14 +274,6 @@ const SettingsAdmin = lazy(() => })), ); -const SettingsAdminContent = lazy(() => - import('@/settings/admin-panel/components/SettingsAdminContent').then( - (module) => ({ - default: module.SettingsAdminContent, - }), - ), -); - const SettingsAdminIndicatorHealthStatus = lazy(() => import( '~/pages/settings/admin-panel/SettingsAdminIndicatorHealthStatus' @@ -290,6 +282,14 @@ const SettingsAdminIndicatorHealthStatus = lazy(() => })), ); +const SettingsAdminSecondaryEnvVariables = lazy(() => + import( + '~/pages/settings/admin-panel/SettingsAdminSecondaryEnvVariables' + ).then((module) => ({ + default: module.SettingsAdminSecondaryEnvVariables, + })), +); + const SettingsLab = lazy(() => import('~/pages/settings/lab/SettingsLab').then((module) => ({ default: module.SettingsLab, @@ -482,14 +482,14 @@ export const SettingsRoutes = ({ {isAdminPageEnabled && ( <> - } /> + } /> } + path={SettingsPath.AdminPanelIndicatorHealthStatus} + element={} /> } + path={SettingsPath.AdminPanelOtherEnvVariables} + element={} /> )} diff --git a/packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminContent.tsx b/packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminContent.tsx index 8c7b174df..998a9d0a5 100644 --- a/packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminContent.tsx +++ b/packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminContent.tsx @@ -1,9 +1,11 @@ +import { currentUserState } from '@/auth/states/currentUserState'; import { SettingsAdminTabContent } from '@/settings/admin-panel/components/SettingsAdminTabContent'; import { SETTINGS_ADMIN_TABS } from '@/settings/admin-panel/constants/SettingsAdminTabs'; import { SETTINGS_ADMIN_TABS_ID } from '@/settings/admin-panel/constants/SettingsAdminTabsId'; import { TabList } from '@/ui/layout/tab/components/TabList'; import styled from '@emotion/styled'; import { t } from '@lingui/core/macro'; +import { useRecoilValue } from 'recoil'; import { IconHeart, IconSettings2, IconVariable } from 'twenty-ui'; const StyledTabListContainer = styled.div` @@ -15,21 +17,28 @@ const StyledTabListContainer = styled.div` `; export const SettingsAdminContent = () => { + const currentUser = useRecoilValue(currentUserState); + + const canAccessFullAdminPanel = currentUser?.canAccessFullAdminPanel; + const canImpersonate = currentUser?.canImpersonate; const tabs = [ { id: SETTINGS_ADMIN_TABS.GENERAL, title: t`General`, Icon: IconSettings2, + disabled: !canAccessFullAdminPanel && !canImpersonate, }, { id: SETTINGS_ADMIN_TABS.ENV_VARIABLES, title: t`Env Variables`, Icon: IconVariable, + disabled: !canAccessFullAdminPanel, }, { id: SETTINGS_ADMIN_TABS.HEALTH_STATUS, title: t`Health Status`, Icon: IconHeart, + disabled: !canAccessFullAdminPanel, }, ]; diff --git a/packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminEnvVariables.tsx b/packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminEnvVariables.tsx index 2856ce0e0..206e33f39 100644 --- a/packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminEnvVariables.tsx +++ b/packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminEnvVariables.tsx @@ -1,60 +1,35 @@ import { SettingsAdminEnvVariablesTable } from '@/settings/admin-panel/components/SettingsAdminEnvVariablesTable'; import { SettingsAdminTabSkeletonLoader } from '@/settings/admin-panel/components/SettingsAdminTabSkeletonLoader'; +import { SettingsListItemCardContent } from '@/settings/components/SettingsListItemCardContent'; +import { SettingsPath } from '@/types/SettingsPath'; +import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { useState } from 'react'; -import { Button, H1Title, H1TitleFontColor, H2Title, Section } from 'twenty-ui'; +import { t } from '@lingui/core/macro'; + +import { Card, H2Title, IconHeartRateMonitor, Section } from 'twenty-ui'; import { useGetEnvironmentVariablesGroupedQuery } from '~/generated/graphql'; +import { getSettingsPath } from '~/utils/navigation/getSettingsPath'; const StyledGroupContainer = styled.div` margin-bottom: ${({ theme }) => theme.spacing(6)}; `; -const StyledGroupDescription = styled.div` - margin-bottom: ${({ theme }) => theme.spacing(4)}; -`; - -const StyledButtonsRow = styled.div` - display: flex; - flex-wrap: wrap; - gap: ${({ theme }) => theme.spacing(2)}; - margin-bottom: ${({ theme }) => theme.spacing(6)}; -`; - -const StyledShowMoreButton = styled(Button)<{ isSelected?: boolean }>` - ${({ isSelected, theme }) => - isSelected && - ` - background-color: ${theme.background.transparent.light}; - `} +const StyledInfoText = styled.div` + color: ${({ theme }) => theme.font.color.secondary}; `; export const SettingsAdminEnvVariables = () => { + const theme = useTheme(); const { data: environmentVariables, loading: environmentVariablesLoading } = useGetEnvironmentVariablesGroupedQuery({ fetchPolicy: 'network-only', }); - const [selectedGroup, setSelectedGroup] = useState(null); - - const toggleGroupVisibility = (groupName: string) => { - setSelectedGroup(selectedGroup === groupName ? null : groupName); - }; - - const hiddenGroups = - environmentVariables?.getEnvironmentVariablesGrouped.groups.filter( - (group) => group.isHiddenOnLoad, - ) ?? []; - const visibleGroups = environmentVariables?.getEnvironmentVariablesGrouped.groups.filter( (group) => !group.isHiddenOnLoad, ) ?? []; - const selectedGroupData = - environmentVariables?.getEnvironmentVariablesGrouped.groups.find( - (group) => group.name === selectedGroup, - ); - if (environmentVariablesLoading) { return ; } @@ -62,9 +37,11 @@ export const SettingsAdminEnvVariables = () => { return ( <>
- These are only the server values. Ensure your worker environment has the + + {t` These are only the server values. Ensure your worker environment has the same variables and values, this is required for asynchronous tasks like - email sync. + email sync.`} +
{visibleGroups.map((group) => ( @@ -76,42 +53,15 @@ export const SettingsAdminEnvVariables = () => { ))} - {hiddenGroups.length > 0 && ( - <> - - {hiddenGroups.map((group) => ( - toggleGroupVisibility(group.name)} - title={group.name} - variant="secondary" - isSelected={selectedGroup === group.name} - > - {group.name} variables - - ))} - - - {selectedGroupData && ( - - - {selectedGroupData.description !== '' && ( - - {selectedGroupData.description} - - )} - {selectedGroupData.variables.length > 0 && ( - - )} - - )} - - )} + + +
); diff --git a/packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminGeneral.tsx b/packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminGeneral.tsx index 6c422e1ed..f50cfaf90 100644 --- a/packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminGeneral.tsx +++ b/packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminGeneral.tsx @@ -16,7 +16,6 @@ import { useRecoilState, useRecoilValue } from 'recoil'; import { getImageAbsoluteURI, isDefined } from 'twenty-shared'; import { Button, - GithubVersionLink, H1Title, H1TitleFontColor, H2Title, @@ -27,7 +26,7 @@ import { REACT_APP_SERVER_BASE_URL } from '~/config'; import { useUserLookupAdminPanelMutation } from '~/generated/graphql'; import { currentUserState } from '@/auth/states/currentUserState'; -import packageJson from '../../../../../package.json'; +import { SettingsAdminVersionContainer } from '@/settings/admin-panel/components/SettingsAdminVersionContainer'; const StyledContainer = styled.div` align-items: center; @@ -54,11 +53,6 @@ const StyledContentContainer = styled.div` padding: ${({ theme }) => theme.spacing(4)} 0; `; -const StyledErrorMessage = styled.div` - color: ${({ theme }) => theme.color.red}; - margin-top: ${({ theme }) => theme.spacing(2)}; -`; - export const SettingsAdminGeneral = () => { const [userIdentifier, setUserIdentifier] = useState(''); const { enqueueSnackBar } = useSnackBar(); @@ -75,6 +69,8 @@ export const SettingsAdminGeneral = () => { const currentUser = useRecoilValue(currentUserState); + const canAccessFullAdminPanel = currentUser?.canAccessFullAdminPanel; + const canImpersonate = currentUser?.canImpersonate; const canManageFeatureFlags = useRecoilValue(canManageFeatureFlagsState); @@ -130,51 +126,51 @@ export const SettingsAdminGeneral = () => { return ( <> -
- - -
- -
- - - - + -
+ )} + + {canImpersonate && ( +
+ - - {!canImpersonate && ( - - {t`You do not have access to impersonate users.`} - - )} -
+ + + +