Fix: Get rid of subgroups in admin/env-variables (#10105)
closes https://github.com/twentyhq/core-team-issues/issues/379 --------- Co-authored-by: Félix Malfait <felix@twenty.com>
This commit is contained in:
nitin
@ -400,29 +400,7 @@ export type EnvironmentVariable = {
|
||||
};
|
||||
|
||||
export enum EnvironmentVariablesGroup {
|
||||
Authentication = 'Authentication',
|
||||
Email = 'Email',
|
||||
Logging = 'Logging',
|
||||
Other = 'Other',
|
||||
ServerConfig = 'ServerConfig',
|
||||
Workspace = 'Workspace'
|
||||
}
|
||||
|
||||
export type EnvironmentVariablesGroupData = {
|
||||
__typename?: 'EnvironmentVariablesGroupData';
|
||||
description: Scalars['String'];
|
||||
isHiddenOnLoad: Scalars['Boolean'];
|
||||
name: EnvironmentVariablesGroup;
|
||||
subgroups: Array<EnvironmentVariablesSubgroupData>;
|
||||
variables: Array<EnvironmentVariable>;
|
||||
};
|
||||
|
||||
export type EnvironmentVariablesOutput = {
|
||||
__typename?: 'EnvironmentVariablesOutput';
|
||||
groups: Array<EnvironmentVariablesGroupData>;
|
||||
};
|
||||
|
||||
export enum EnvironmentVariablesSubGroup {
|
||||
AuthenticationTokensDuration = 'AuthenticationTokensDuration',
|
||||
BillingConfig = 'BillingConfig',
|
||||
CaptchaConfig = 'CaptchaConfig',
|
||||
CloudflareConfig = 'CloudflareConfig',
|
||||
@ -430,10 +408,12 @@ export enum EnvironmentVariablesSubGroup {
|
||||
ExceptionHandler = 'ExceptionHandler',
|
||||
GoogleAuth = 'GoogleAuth',
|
||||
LLM = 'LLM',
|
||||
Logging = 'Logging',
|
||||
MicrosoftAuth = 'MicrosoftAuth',
|
||||
PasswordAuth = 'PasswordAuth',
|
||||
Other = 'Other',
|
||||
RateLimiting = 'RateLimiting',
|
||||
SSL = 'SSL',
|
||||
ServerConfig = 'ServerConfig',
|
||||
ServerlessConfig = 'ServerlessConfig',
|
||||
StorageConfig = 'StorageConfig',
|
||||
SupportChatConfig = 'SupportChatConfig',
|
||||
@ -441,13 +421,19 @@ export enum EnvironmentVariablesSubGroup {
|
||||
TokensDuration = 'TokensDuration'
|
||||
}
|
||||
|
||||
export type EnvironmentVariablesSubgroupData = {
|
||||
__typename?: 'EnvironmentVariablesSubgroupData';
|
||||
export type EnvironmentVariablesGroupData = {
|
||||
__typename?: 'EnvironmentVariablesGroupData';
|
||||
description: Scalars['String'];
|
||||
name: EnvironmentVariablesSubGroup;
|
||||
isHiddenOnLoad: Scalars['Boolean'];
|
||||
name: EnvironmentVariablesGroup;
|
||||
variables: Array<EnvironmentVariable>;
|
||||
};
|
||||
|
||||
export type EnvironmentVariablesOutput = {
|
||||
__typename?: 'EnvironmentVariablesOutput';
|
||||
groups: Array<EnvironmentVariablesGroupData>;
|
||||
};
|
||||
|
||||
export type ExecuteServerlessFunctionInput = {
|
||||
/** Id of the serverless function to execute */
|
||||
id: Scalars['UUID'];
|
||||
@ -2248,7 +2234,7 @@ export type UserLookupAdminPanelMutation = { __typename?: 'Mutation', userLookup
|
||||
export type GetEnvironmentVariablesGroupedQueryVariables = Exact<{ [key: string]: never; }>;
|
||||
|
||||
|
||||
export type GetEnvironmentVariablesGroupedQuery = { __typename?: 'Query', getEnvironmentVariablesGrouped: { __typename?: 'EnvironmentVariablesOutput', groups: Array<{ __typename?: 'EnvironmentVariablesGroupData', name: EnvironmentVariablesGroup, description: string, isHiddenOnLoad: boolean, variables: Array<{ __typename?: 'EnvironmentVariable', name: string, description: string, value: string, sensitive: boolean }>, subgroups: Array<{ __typename?: 'EnvironmentVariablesSubgroupData', name: EnvironmentVariablesSubGroup, description: string, variables: Array<{ __typename?: 'EnvironmentVariable', name: string, description: string, value: string, sensitive: boolean }> }> }> } };
|
||||
export type GetEnvironmentVariablesGroupedQuery = { __typename?: 'Query', getEnvironmentVariablesGrouped: { __typename?: 'EnvironmentVariablesOutput', groups: Array<{ __typename?: 'EnvironmentVariablesGroupData', name: EnvironmentVariablesGroup, description: string, isHiddenOnLoad: boolean, variables: Array<{ __typename?: 'EnvironmentVariable', name: string, description: string, value: string, sensitive: boolean }> }> } };
|
||||
|
||||
export type UpdateLabPublicFeatureFlagMutationVariables = Exact<{
|
||||
input: UpdateLabPublicFeatureFlagInput;
|
||||
@ -3907,16 +3893,6 @@ export const GetEnvironmentVariablesGroupedDocument = gql`
|
||||
value
|
||||
sensitive
|
||||
}
|
||||
subgroups {
|
||||
name
|
||||
description
|
||||
variables {
|
||||
name
|
||||
description
|
||||
value
|
||||
sensitive
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,14 +8,6 @@ const StyledGroupContainer = styled.div`
|
||||
margin-bottom: ${({ theme }) => theme.spacing(6)};
|
||||
`;
|
||||
|
||||
const StyledSubGroupContainer = styled.div`
|
||||
margin-top: ${({ theme }) => theme.spacing(4)};
|
||||
background-color: ${({ theme }) => theme.background.secondary};
|
||||
border-radius: ${({ theme }) => theme.border.radius.sm};
|
||||
border: 1px solid ${({ theme }) => theme.border.color.medium};
|
||||
padding: ${({ theme }) => theme.spacing(4)};
|
||||
`;
|
||||
|
||||
const StyledGroupVariablesContainer = styled.div`
|
||||
background-color: ${({ theme }) => theme.background.secondary};
|
||||
border-radius: ${({ theme }) => theme.border.radius.sm};
|
||||
@ -25,20 +17,24 @@ const StyledGroupVariablesContainer = styled.div`
|
||||
padding-right: ${({ theme }) => theme.spacing(4)};
|
||||
`;
|
||||
|
||||
const StyledSubGroupTitle = styled.div`
|
||||
color: ${({ theme }) => theme.font.color.secondary};
|
||||
font-size: ${({ theme }) => theme.font.size.md};
|
||||
font-weight: ${({ theme }) => theme.font.weight.medium};
|
||||
margin-bottom: ${({ theme }) => theme.spacing(2)};
|
||||
`;
|
||||
|
||||
const StyledSubGroupDescription = styled.div``;
|
||||
|
||||
const StyledGroupDescription = styled.div`
|
||||
margin-bottom: ${({ theme }) => theme.spacing(4)};
|
||||
`;
|
||||
|
||||
const StyledShowMoreButton = styled(Button)``;
|
||||
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};
|
||||
`}
|
||||
`;
|
||||
|
||||
export const SettingsAdminEnvVariables = () => {
|
||||
const { data: environmentVariables } = useGetEnvironmentVariablesGroupedQuery(
|
||||
@ -47,66 +43,80 @@ export const SettingsAdminEnvVariables = () => {
|
||||
},
|
||||
);
|
||||
|
||||
const [showHiddenGroups, setShowHiddenGroups] = useState<
|
||||
Record<string, boolean>
|
||||
>({});
|
||||
const [selectedGroup, setSelectedGroup] = useState<string | null>(null);
|
||||
|
||||
const toggleGroupVisibility = (groupName: string) => {
|
||||
setShowHiddenGroups((prev) => ({
|
||||
...prev,
|
||||
[groupName]: !prev[groupName],
|
||||
}));
|
||||
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,
|
||||
);
|
||||
|
||||
return (
|
||||
<Section>
|
||||
{environmentVariables?.getEnvironmentVariablesGrouped.groups.map(
|
||||
(group) => {
|
||||
const isHidden =
|
||||
group.isHiddenOnLoad && !showHiddenGroups[group.name];
|
||||
if (isHidden === true) {
|
||||
return (
|
||||
{visibleGroups.map((group) => (
|
||||
<StyledGroupContainer key={group.name}>
|
||||
<H1Title title={group.name} fontColor={H1TitleFontColor.Primary} />
|
||||
{group.description !== '' && (
|
||||
<StyledGroupDescription>{group.description}</StyledGroupDescription>
|
||||
)}
|
||||
{group.variables.length > 0 && (
|
||||
<StyledGroupVariablesContainer>
|
||||
<SettingsAdminEnvVariablesTable variables={group.variables} />
|
||||
</StyledGroupVariablesContainer>
|
||||
)}
|
||||
</StyledGroupContainer>
|
||||
))}
|
||||
|
||||
{hiddenGroups.length > 0 && (
|
||||
<>
|
||||
<StyledButtonsRow>
|
||||
{hiddenGroups.map((group) => (
|
||||
<StyledShowMoreButton
|
||||
key={group.name}
|
||||
onClick={() => toggleGroupVisibility(group.name)}
|
||||
title={
|
||||
showHiddenGroups[group.name] ? 'Show Less' : 'Show More...'
|
||||
}
|
||||
></StyledShowMoreButton>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<StyledGroupContainer key={group.name}>
|
||||
<H1Title
|
||||
title={group.name}
|
||||
variant="secondary"
|
||||
isSelected={selectedGroup === group.name}
|
||||
>
|
||||
{group.name} variables
|
||||
</StyledShowMoreButton>
|
||||
))}
|
||||
</StyledButtonsRow>
|
||||
|
||||
{selectedGroupData && (
|
||||
<StyledGroupContainer>
|
||||
<H1Title
|
||||
title={selectedGroupData.name}
|
||||
fontColor={H1TitleFontColor.Primary}
|
||||
/>
|
||||
{group.description !== '' && (
|
||||
{selectedGroupData.description !== '' && (
|
||||
<StyledGroupDescription>
|
||||
{group.description}
|
||||
{selectedGroupData.description}
|
||||
</StyledGroupDescription>
|
||||
)}
|
||||
{group.variables.length > 0 && (
|
||||
{selectedGroupData.variables.length > 0 && (
|
||||
<StyledGroupVariablesContainer>
|
||||
<SettingsAdminEnvVariablesTable variables={group.variables} />
|
||||
<SettingsAdminEnvVariablesTable
|
||||
variables={selectedGroupData.variables}
|
||||
/>
|
||||
</StyledGroupVariablesContainer>
|
||||
)}
|
||||
{group.subgroups.map((subgroup) => (
|
||||
<StyledSubGroupContainer key={subgroup.name}>
|
||||
<StyledSubGroupTitle>{subgroup.name}</StyledSubGroupTitle>
|
||||
{subgroup.description !== '' && (
|
||||
<StyledSubGroupDescription>
|
||||
{subgroup.description}
|
||||
</StyledSubGroupDescription>
|
||||
)}
|
||||
<SettingsAdminEnvVariablesTable
|
||||
variables={subgroup.variables}
|
||||
/>
|
||||
</StyledSubGroupContainer>
|
||||
))}
|
||||
</StyledGroupContainer>
|
||||
);
|
||||
},
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Section>
|
||||
);
|
||||
|
||||
@ -13,16 +13,6 @@ export const GET_ENVIRONMENT_VARIABLES_GROUPED = gql`
|
||||
value
|
||||
sensitive
|
||||
}
|
||||
subgroups {
|
||||
name
|
||||
description
|
||||
variables {
|
||||
name
|
||||
description
|
||||
value
|
||||
sensitive
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user