admin panel fast follows (#10723)

fast follows:
- https://discord.com/channels/1130383047699738754/1346433965451382845
- https://discord.com/channels/1130383047699738754/1346434512757981264
- https://discord.com/channels/1130383047699738754/1346453484911853610

---------

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

packages/twenty-front/src/pages/settings/admin-panel/SettingsAdminSecondaryEnvVariables.tsx

@@ -0,0 +1,61 @@
+import { SettingsAdminEnvVariablesTable } from '@/settings/admin-panel/components/SettingsAdminEnvVariablesTable';
+import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
+import { SettingsSkeletonLoader } from '@/settings/components/SettingsSkeletonLoader';
+import { SettingsPath } from '@/types/SettingsPath';
+import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
+import styled from '@emotion/styled';
+import { t } from '@lingui/core/macro';
+import { H2Title, 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)};
+`;
+
+export const SettingsAdminSecondaryEnvVariables = () => {
+  const { data: environmentVariables, loading: environmentVariablesLoading } =
+    useGetEnvironmentVariablesGroupedQuery({
+      fetchPolicy: 'network-only',
+    });
+
+  const hiddenGroups =
+    environmentVariables?.getEnvironmentVariablesGrouped.groups.filter(
+      (group) => group.isHiddenOnLoad,
+    ) ?? [];
+
+  if (environmentVariablesLoading) {
+    return <SettingsSkeletonLoader />;
+  }
+
+  return (
+    <SubMenuTopBarContainer
+      links={[
+        {
+          children: t`Other`,
+          href: getSettingsPath(SettingsPath.AdminPanel),
+        },
+        {
+          children: t`Admin Panel`,
+          href: getSettingsPath(SettingsPath.AdminPanel),
+        },
+        {
+          children: t`Other Environment Variables`,
+        },
+      ]}
+    >
+      <SettingsPageContainer>
+        <Section>
+          {hiddenGroups.map((group) => (
+            <StyledGroupContainer key={group.name}>
+              <H2Title title={group.name} description={group.description} />
+              {group.variables.length > 0 && (
+                <SettingsAdminEnvVariablesTable variables={group.variables} />
+              )}
+            </StyledGroupContainer>
+          ))}
+        </Section>
+      </SettingsPageContainer>
+    </SubMenuTopBarContainer>
+  );
+};