Environment variables in admin panel (read only) - front (#10011)

Frontend for https://github.com/twentyhq/core-team-issues/issues/293

POC - https://github.com/twentyhq/twenty/pull/9903

---------

Co-authored-by: Félix Malfait <felix@twenty.com>
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminEnvVariables.tsx

@@ -0,0 +1,113 @@
+import { SettingsAdminEnvVariablesTable } from '@/settings/admin-panel/components/SettingsAdminEnvVariablesTable';
+import styled from '@emotion/styled';
+import { useState } from 'react';
+import { Button, H1Title, H1TitleFontColor, Section } from 'twenty-ui';
+import { useGetEnvironmentVariablesGroupedQuery } from '~/generated/graphql';
+
+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};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  padding-bottom: ${({ theme }) => theme.spacing(2)};
+  padding-left: ${({ theme }) => theme.spacing(4)};
+  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)``;
+
+export const SettingsAdminEnvVariables = () => {
+  const { data: environmentVariables } = useGetEnvironmentVariablesGroupedQuery(
+    {
+      fetchPolicy: 'network-only',
+    },
+  );
+
+  const [showHiddenGroups, setShowHiddenGroups] = useState<
+    Record<string, boolean>
+  >({});
+
+  const toggleGroupVisibility = (groupName: string) => {
+    setShowHiddenGroups((prev) => ({
+      ...prev,
+      [groupName]: !prev[groupName],
+    }));
+  };
+
+  return (
+    <Section>
+      {environmentVariables?.getEnvironmentVariablesGrouped.groups.map(
+        (group) => {
+          const isHidden =
+            group.isHiddenOnLoad && !showHiddenGroups[group.name];
+          if (isHidden === true) {
+            return (
+              <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}
+                fontColor={H1TitleFontColor.Primary}
+              />
+              {group.description !== '' && (
+                <StyledGroupDescription>
+                  {group.description}
+                </StyledGroupDescription>
+              )}
+              {group.variables.length > 0 && (
+                <StyledGroupVariablesContainer>
+                  <SettingsAdminEnvVariablesTable variables={group.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>
+  );
+};