[feat][Remote objects] Edit a connection (for pg) (#5210)

## Context
#4774 

## How was it tested
Locally

## In further PRs
- Update connection status upon page change
- Adapt Info banner to dark mode
- placeholders for form

packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDatabase.tsx

@@ -4,8 +4,8 @@ import { IconSettings } from 'twenty-ui';
 
 import { useGetDatabaseConnections } from '@/databases/hooks/useGetDatabaseConnections';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
-import { SettingsIntegrationDatabaseConnectionsListCard } from '@/settings/integrations/components/SettingsIntegrationDatabaseConnectionsListCard';
 import { SettingsIntegrationPreview } from '@/settings/integrations/components/SettingsIntegrationPreview';
+import { SettingsIntegrationDatabaseConnectionsListCard } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionsListCard';
 import { useSettingsIntegrationCategories } from '@/settings/integrations/hooks/useSettingsIntegrationCategories';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { AppPath } from '@/types/AppPath';

packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDatabaseConnection.tsx

@@ -1,124 +0,0 @@
-import { useEffect } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
-import { IconSettings } from 'twenty-ui';
-
-import { useDeleteOneDatabaseConnection } from '@/databases/hooks/useDeleteOneDatabaseConnection';
-import { useGetDatabaseConnection } from '@/databases/hooks/useGetDatabaseConnection';
-import { useGetDatabaseConnectionTables } from '@/databases/hooks/useGetDatabaseConnectionTables';
-import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
-import { SettingsIntegrationDatabaseTablesListCard } from '@/settings/integrations/components/SettingsIntegrationDatabaseTablesListCard';
-import { useSettingsIntegrationCategories } from '@/settings/integrations/hooks/useSettingsIntegrationCategories';
-import { getConnectionDbName } from '@/settings/integrations/utils/getConnectionDbName';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
-import { AppPath } from '@/types/AppPath';
-import { SettingsPath } from '@/types/SettingsPath';
-import { H2Title } from '@/ui/display/typography/components/H2Title';
-import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
-import { Section } from '@/ui/layout/section/components/Section';
-import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
-import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
-import { SettingsIntegrationDatabaseConnectionSummaryCard } from '~/pages/settings/integrations/SettingsIntegrationDatabaseConnectionSummaryCard';
-
-export const SettingsIntegrationDatabaseConnection = () => {
-  const { databaseKey = '', connectionId = '' } = useParams();
-  const navigate = useNavigate();
-
-  const [integrationCategoryAll] = useSettingsIntegrationCategories();
-  const integration = integrationCategoryAll.integrations.find(
-    ({ from: { key } }) => key === databaseKey,
-  );
-
-  const isAirtableIntegrationEnabled = useIsFeatureEnabled(
-    'IS_AIRTABLE_INTEGRATION_ENABLED',
-  );
-  const isPostgresqlIntegrationEnabled = useIsFeatureEnabled(
-    'IS_POSTGRESQL_INTEGRATION_ENABLED',
-  );
-  const isIntegrationAvailable =
-    !!integration &&
-    ((databaseKey === 'airtable' && isAirtableIntegrationEnabled) ||
-      (databaseKey === 'postgresql' && isPostgresqlIntegrationEnabled));
-
-  const { connection, loading } = useGetDatabaseConnection({
-    databaseKey,
-    connectionId,
-    skip: !isIntegrationAvailable,
-  });
-
-  const { deleteOneDatabaseConnection } = useDeleteOneDatabaseConnection();
-
-  const deleteConnection = async () => {
-    if (!connection) return;
-
-    await deleteOneDatabaseConnection({ id: connection.id });
-
-    navigate(`${settingsIntegrationsPagePath}/${databaseKey}`);
-  };
-
-  useEffect(() => {
-    if (!isIntegrationAvailable || (!loading && !connection)) {
-      navigate(AppPath.NotFound);
-    }
-  }, [
-    integration,
-    databaseKey,
-    navigate,
-    isIntegrationAvailable,
-    connection,
-    loading,
-  ]);
-
-  const { tables } = useGetDatabaseConnectionTables({
-    connectionId,
-    skip: !isIntegrationAvailable || !connection,
-  });
-
-  if (!isIntegrationAvailable || !connection) return null;
-
-  const settingsIntegrationsPagePath = getSettingsPagePath(
-    SettingsPath.Integrations,
-  );
-
-  const connectionName = getConnectionDbName({ integration, connection });
-
-  return (
-    <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
-      <SettingsPageContainer>
-        <Breadcrumb
-          links={[
-            {
-              children: 'Integrations',
-              href: settingsIntegrationsPagePath,
-            },
-            {
-              children: integration.text,
-              href: `${settingsIntegrationsPagePath}/${databaseKey}`,
-            },
-            { children: connectionName },
-          ]}
-        />
-        <Section>
-          <H2Title title="About" description="About this remote object" />
-          <SettingsIntegrationDatabaseConnectionSummaryCard
-            databaseLogoUrl={integration.from.image}
-            connectionId={connectionId}
-            connectionName={connectionName}
-            onRemove={deleteConnection}
-          />
-        </Section>
-        <Section>
-          <H2Title
-            title="Tables"
-            description="Select the tables that should be tracked"
-          />
-          {!!tables.length && (
-            <SettingsIntegrationDatabaseTablesListCard
-              connectionId={connectionId}
-              tables={tables}
-            />
-          )}
-        </Section>
-      </SettingsPageContainer>
-    </SubMenuTopBarContainer>
-  );
-};

packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDatabaseConnectionSummaryCard.tsx

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
-import { IconDotsVertical, IconTrash } from 'twenty-ui';
+import { IconDotsVertical, IconPencil, IconTrash } from 'twenty-ui';
 
 import { SettingsSummaryCard } from '@/settings/components/SettingsSummaryCard';
-import { SettingsIntegrationDatabaseConnectionSyncStatus } from '@/settings/integrations/components/SettingsIntegrationDatabaseConnectionSyncStatus';
+import { SettingsIntegrationDatabaseConnectionSyncStatus } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSyncStatus';
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
@@ -14,6 +14,7 @@ type SettingsIntegrationDatabaseConnectionSummaryCardProps = {
   connectionId: string;
   connectionName: string;
   onRemove: () => void;
+  onEdit: () => void;
 };
 
 const StyledDatabaseLogoContainer = styled.div`
@@ -33,6 +34,7 @@ export const SettingsIntegrationDatabaseConnectionSummaryCard = ({
   connectionId,
   connectionName,
   onRemove,
+  onEdit,
 }: SettingsIntegrationDatabaseConnectionSummaryCardProps) => {
   const dropdownId =
     'settings-integration-database-connection-summary-card-dropdown';
@@ -66,6 +68,11 @@ export const SettingsIntegrationDatabaseConnectionSummaryCard = ({
                     text="Remove"
                     onClick={onRemove}
                   />
+                  <MenuItem
+                    LeftIcon={IconPencil}
+                    text="Edit"
+                    onClick={onEdit}
+                  />
                 </DropdownMenuItemsContainer>
               </DropdownMenu>
             }

packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationEditDatabaseConnection.tsx

@@ -0,0 +1,17 @@
+import { IconSettings } from 'twenty-ui';
+
+import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
+import { SettingsIntegrationEditDatabaseConnectionContainer } from '@/settings/integrations/database-connection/components/SettingsIntegrationEditDatabaseConnectionContainer';
+import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
+
+export const SettingsIntegrationEditDatabaseConnection = () => {
+  return (
+    <>
+      <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
+        <SettingsPageContainer>
+          <SettingsIntegrationEditDatabaseConnectionContainer />
+        </SettingsPageContainer>
+      </SubMenuTopBarContainer>
+    </>
+  );
+};

packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationNewDatabaseConnection.tsx

@@ -13,7 +13,7 @@ import { SettingsPageContainer } from '@/settings/components/SettingsPageContain
 import {
   SettingsIntegrationPostgreSQLConnectionForm,
   settingsIntegrationPostgreSQLConnectionFormSchema,
-} from '@/settings/integrations/components/SettingsIntegrationDatabaseConnectionForm';
+} from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionForm';
 import { useSettingsIntegrationCategories } from '@/settings/integrations/hooks/useSettingsIntegrationCategories';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { AppPath } from '@/types/AppPath';
@@ -116,10 +116,12 @@ export const SettingsIntegrationNewDatabaseConnection = () => {
   };
 
   return (
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    <FormProvider {...formConfig}>
-      <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
-        <SettingsPageContainer>
+    <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
+      <SettingsPageContainer>
+        <FormProvider
+          // eslint-disable-next-line react/jsx-props-no-spreading
+          {...formConfig}
+        >
           <SettingsHeaderContainer>
             <Breadcrumb
               links={[
@@ -151,8 +153,8 @@ export const SettingsIntegrationNewDatabaseConnection = () => {
               <SettingsIntegrationPostgreSQLConnectionForm />
             </Section>
           ) : null}
-        </SettingsPageContainer>
-      </SubMenuTopBarContainer>
-    </FormProvider>
+        </FormProvider>
+      </SettingsPageContainer>
+    </SubMenuTopBarContainer>
   );
 };

packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationShowDatabaseConnection.tsx

@@ -0,0 +1,15 @@
+import { IconSettings } from 'twenty-ui';
+
+import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
+import { SettingsIntegrationDatabaseConnectionShowContainer } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionShowContainer';
+import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
+
+export const SettingsIntegrationShowDatabaseConnection = () => {
+  return (
+    <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
+      <SettingsPageContainer>
+        <SettingsIntegrationDatabaseConnectionShowContainer />
+      </SettingsPageContainer>
+    </SubMenuTopBarContainer>
+  );
+};

packages/twenty-front/src/pages/settings/integrations/__stories__/SettingsIntegrationEditDatabaseConnection.stories.tsx

@@ -0,0 +1,40 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
+
+import { SettingsIntegrationEditDatabaseConnection } from '~/pages/settings/integrations/SettingsIntegrationEditDatabaseConnection';
+import {
+  PageDecorator,
+  PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+import { sleep } from '~/testing/sleep';
+
+const meta: Meta<PageDecoratorArgs> = {
+  title:
+    'Pages/Settings/Integrations/SettingsIntegrationEditDatabaseConnection',
+  component: SettingsIntegrationEditDatabaseConnection,
+  decorators: [PageDecorator],
+  args: {
+    routePath: '/settings/integrations/:databaseKey/edit',
+    routeParams: {
+      ':databaseKey': 'postgresql',
+      ':connectionId': '67cbfd35-8dd4-4591-b9d4-c1906281a5da',
+    },
+  },
+  parameters: {
+    msw: graphqlMocks,
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof SettingsIntegrationEditDatabaseConnection>;
+
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    sleep(100);
+
+    await canvas.findByText('Edit PostgreSQL Connection');
+  },
+};

packages/twenty-front/src/pages/settings/integrations/__stories__/SettingsIntegrationShowDatabaseConnection.stories.tsx

@@ -3,7 +3,7 @@ import { within } from '@storybook/test';
 
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
-import { SettingsIntegrationDatabaseConnection } from '~/pages/settings/integrations/SettingsIntegrationDatabaseConnection';
+import { SettingsIntegrationShowDatabaseConnection } from '~/pages/settings/integrations/SettingsIntegrationShowDatabaseConnection';
 import {
   PageDecorator,
   PageDecoratorArgs,
@@ -12,8 +12,9 @@ import { graphqlMocks } from '~/testing/graphqlMocks';
 import { sleep } from '~/testing/sleep';
 
 const meta: Meta<PageDecoratorArgs> = {
-  title: 'Pages/Settings/Integrations/SettingsIntegrationDatabaseConnection',
-  component: SettingsIntegrationDatabaseConnection,
+  title:
+    'Pages/Settings/Integrations/SettingsIntegrationShowDatabaseConnection',
+  component: SettingsIntegrationShowDatabaseConnection,
   decorators: [PageDecorator],
   args: {
     routePath: getSettingsPagePath(SettingsPath.IntegrationDatabaseConnection),
@@ -29,7 +30,7 @@ const meta: Meta<PageDecoratorArgs> = {
 
 export default meta;
 
-export type Story = StoryObj<typeof SettingsIntegrationDatabaseConnection>;
+export type Story = StoryObj<typeof SettingsIntegrationShowDatabaseConnection>;
 
 export const Default: Story = {
   play: async ({ canvasElement }) => {