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/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<string | null>(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 <SettingsAdminTabSkeletonLoader />;
   }
@@ -62,9 +37,11 @@ export const SettingsAdminEnvVariables = () => {
   return (
     <>
       <Section>
-        These are only the server values. Ensure your worker environment has the
+        <StyledInfoText>
+          {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.`}
+        </StyledInfoText>
       </Section>
       <Section>
         {visibleGroups.map((group) => (
@@ -76,42 +53,15 @@ export const SettingsAdminEnvVariables = () => {
           </StyledGroupContainer>
         ))}
 
-        {hiddenGroups.length > 0 && (
-          <>
-            <StyledButtonsRow>
-              {hiddenGroups.map((group) => (
-                <StyledShowMoreButton
-                  key={group.name}
-                  onClick={() => toggleGroupVisibility(group.name)}
-                  title={group.name}
-                  variant="secondary"
-                  isSelected={selectedGroup === group.name}
-                >
-                  {group.name} variables
-                </StyledShowMoreButton>
-              ))}
-            </StyledButtonsRow>
-
-            {selectedGroupData && (
-              <StyledGroupContainer>
-                <H1Title
-                  title={selectedGroupData.name}
-                  fontColor={H1TitleFontColor.Primary}
-                />
-                {selectedGroupData.description !== '' && (
-                  <StyledGroupDescription>
-                    {selectedGroupData.description}
-                  </StyledGroupDescription>
-                )}
-                {selectedGroupData.variables.length > 0 && (
-                  <SettingsAdminEnvVariablesTable
-                    variables={selectedGroupData.variables}
-                  />
-                )}
-              </StyledGroupContainer>
-            )}
-          </>
-        )}
+        <Card rounded>
+          <SettingsListItemCardContent
+            label={t`Other Variables`}
+            to={getSettingsPath(SettingsPath.AdminPanelOtherEnvVariables)}
+            rightComponent={null}
+            LeftIcon={IconHeartRateMonitor}
+            LeftIconColor={theme.font.color.tertiary}
+          />
+        </Card>
       </Section>
     </>
   );