4a4e65fe4a
# Introduction closes https://github.com/twentyhq/core-team-issues/issues/591 Same than for `twenty-shared` made in https://github.com/twentyhq/twenty/pull/11083. ## TODO - [x] Manual migrate twenty-website twenty-ui imports ## What's next: - Generate barrel and migration script factorization within own package + tests - Refactoring using preconstruct ? TimeBox - Lint circular dependencies - Lint import from barrel and forbid them ### Preconstruct We need custom rollup plugins addition, but preconstruct does not expose its rollup configuration. It might be possible to handle this using the babel overrides. But was a big tunnel. We could give it a try afterwards ! ( allowing cjs interop and stuff like that ) Stuck to vite lib app Closed related PRs: - https://github.com/twentyhq/twenty/pull/11294 - https://github.com/twentyhq/twenty/pull/11203
77 lines
2.8 KiB
TypeScript
77 lines
2.8 KiB
TypeScript
import { useEffect } from 'react';
|
|
import { useParams } from 'react-router-dom';
|
|
|
|
import { useGetDatabaseConnections } from '@/databases/hooks/useGetDatabaseConnections';
|
|
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
|
|
import { SettingsIntegrationPreview } from '@/settings/integrations/components/SettingsIntegrationPreview';
|
|
import { SettingsIntegrationDatabaseConnectionsListCard } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionsListCard';
|
|
import { useIsSettingsIntegrationEnabled } from '@/settings/integrations/hooks/useIsSettingsIntegrationEnabled';
|
|
import { useSettingsIntegrationCategories } from '@/settings/integrations/hooks/useSettingsIntegrationCategories';
|
|
import { AppPath } from '@/types/AppPath';
|
|
import { SettingsPath } from '@/types/SettingsPath';
|
|
import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
|
|
import { useNavigateApp } from '~/hooks/useNavigateApp';
|
|
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
|
|
import { H2Title } from 'twenty-ui/display';
|
|
import { Section } from 'twenty-ui/layout';
|
|
|
|
export const SettingsIntegrationDatabase = () => {
|
|
const { databaseKey = '' } = useParams();
|
|
const navigateApp = useNavigateApp();
|
|
|
|
const [integrationCategoryAll] = useSettingsIntegrationCategories();
|
|
const integration = integrationCategoryAll.integrations.find(
|
|
({ from: { key } }) => key === databaseKey,
|
|
);
|
|
|
|
const isIntegrationEnabled = useIsSettingsIntegrationEnabled(databaseKey);
|
|
|
|
const isIntegrationAvailable = !!integration && isIntegrationEnabled;
|
|
|
|
useEffect(() => {
|
|
if (!isIntegrationAvailable) {
|
|
navigateApp(AppPath.NotFound);
|
|
}
|
|
}, [integration, databaseKey, navigateApp, isIntegrationAvailable]);
|
|
|
|
const { connections } = useGetDatabaseConnections({
|
|
databaseKey,
|
|
skip: !isIntegrationAvailable,
|
|
});
|
|
|
|
if (!isIntegrationAvailable) return null;
|
|
|
|
return (
|
|
<SubMenuTopBarContainer
|
|
title={integration.text}
|
|
links={[
|
|
{
|
|
children: 'Workspace',
|
|
href: getSettingsPath(SettingsPath.Workspace),
|
|
},
|
|
{
|
|
children: 'Integrations',
|
|
href: getSettingsPath(SettingsPath.Integrations),
|
|
},
|
|
{ children: integration.text },
|
|
]}
|
|
>
|
|
<SettingsPageContainer>
|
|
<SettingsIntegrationPreview
|
|
integrationLogoUrl={integration.from.image}
|
|
/>
|
|
<Section>
|
|
<H2Title
|
|
title={`${integration.text} database`}
|
|
description={`Connect or access your ${integration.text} data`}
|
|
/>
|
|
<SettingsIntegrationDatabaseConnectionsListCard
|
|
integration={integration}
|
|
connections={connections}
|
|
/>
|
|
</Section>
|
|
</SettingsPageContainer>
|
|
</SubMenuTopBarContainer>
|
|
);
|
|
};
|