admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: add remote object integration databases list card (#4621)

Browse Source 
* feat: add remote object integration databases list card

Closes #4549

* fix: fixes after rebase
This commit is contained in:
Thaïs
2024-03-27 18:59:40 +01:00
committed by GitHub
parent 6637ae586f
commit c3cc0f651c
13 changed files with 235 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDetail.tsx
View File

@ -2,13 +2,19 @@ import { useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { SettingsIntegrationDatabasesListCard } from '@/settings/integrations/components/SettingsIntegrationDatabasesListCard';
import { SettingsIntegrationPreview } from '@/settings/integrations/components/SettingsIntegrationPreview';
import { useSettingsIntegrationCategories } from '@/settings/integrations/hooks/useSettingsIntegrationCategories';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { AppPath } from '@/types/AppPath';
import { SettingsPath } from '@/types/SettingsPath';
import { IconSettings } from '@/ui/display/icon';
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 { mockedRemoteObjectIntegrations } from '~/testing/mock-data/remoteObjectDatabases';
export const SettingsIntegrationDetail = () => {
const { integrationKey = '' } = useParams();
@ -38,18 +44,36 @@ export const SettingsIntegrationDetail = () => {
if (!isIntegrationAvailable) return null;
const databases =
mockedRemoteObjectIntegrations.find(
({ key }) => key === integration.from.key,
)?.databases || [];
return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<SettingsPageContainer>
<Breadcrumb
links={[
{ children: 'Integrations', href: '/settings/integrations' },
{
children: 'Integrations',
href: getSettingsPagePath(SettingsPath.Integrations),
},
{ children: integration.text },
]}
/>
<SettingsIntegrationPreview
integrationLogoUrl={integration.from.image}
/>
<Section>
<H2Title
title={`${integration.text} database`}
description={`Connect or access your ${integration.text} data`}
/>
<SettingsIntegrationDatabasesListCard
integrationLogoUrl={integration.from.image}
databases={databases}
/>
</Section>
</SettingsPageContainer>
</SubMenuTopBarContainer>
);