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

feat: create Integrations/IntegrationDetail page (#4574)

Browse Source 
* feat: create Integrations/IntegrationDetail page

Closes #4546

* docs: add Settings/Integrations/Integration Detail page stories

* docs: add Settings/Billing page stories

* refactor: move some Settings components to @/settings

* refactor: move some Settings integrations components to @/settings/integrations
This commit is contained in:
Thaïs
2024-03-25 18:06:46 +01:00
committed by GitHub
parent e126c5c7f3
commit 6ab43c608f
31 changed files with 335 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
packages/twenty-front/src/pages/settings/developers/SettingsDevelopers.tsx
View File

@ -1,23 +1,70 @@
import { useNavigate } from 'react-router-dom';
import styled from '@emotion/styled';
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { IconSettings } from '@/ui/display/icon';
import { SettingsApiKeysTable } from '@/settings/developers/components/SettingsApiKeysTable';
import { SettingsReadDocumentationButton } from '@/settings/developers/components/SettingsReadDocumentationButton';
import { SettingsWebhooksTable } from '@/settings/developers/components/SettingsWebhooksTable';
import { IconPlus, IconSettings } from '@/ui/display/icon';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { Button } from '@/ui/input/button/components/Button';
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 { SettingsDevelopersApiKeys } from '~/pages/settings/developers/api-keys/SettingsDevelopersApiKeys';
import { SettingsDevelopersWebhooks } from '~/pages/settings/developers/webhooks/SettingsDevelopersWebhooks';
import { ReadDocumentationButton } from './components/ReadDocumentationButton';
const StyledButtonContainer = styled.div`
display: flex;
justify-content: flex-end;
padding-top: ${({ theme }) => theme.spacing(2)};
`;
export const SettingsDevelopers = () => {
const navigate = useNavigate();
return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<SettingsPageContainer>
<SettingsHeaderContainer>
<Breadcrumb links={[{ children: 'Developers' }]} />
<ReadDocumentationButton />
<SettingsReadDocumentationButton />
</SettingsHeaderContainer>
<SettingsDevelopersApiKeys />
<SettingsDevelopersWebhooks />
<Section>
<H2Title
title="API keys"
description="Active APIs keys created by you or your team."
/>
<SettingsApiKeysTable />
<StyledButtonContainer>
<Button
Icon={IconPlus}
title="Create API key"
size="small"
variant="secondary"
onClick={() => {
navigate('/settings/developers/api-keys/new');
}}
/>
</StyledButtonContainer>
</Section>
<Section>
<H2Title
title="Webhooks"
description="Establish Webhook endpoints for notifications on asynchronous events."
/>
<SettingsWebhooksTable />
<StyledButtonContainer>
<Button
Icon={IconPlus}
title="Create Webhook"
size="small"
variant="secondary"
onClick={() => {
navigate('/settings/developers/webhooks/new');
}}
/>
</StyledButtonContainer>
</Section>
</SettingsPageContainer>
</SubMenuTopBarContainer>
);