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

feat: add Database Connection Summary Card to Settings/Integrations/D… (#4791)

Browse Source 
…atabase/Connection page

Closes #4558

<img width="542" alt="image"
src="https://github.com/twentyhq/twenty/assets/3098428/16d7d8ce-57db-4e48-ba72-a2318a2d34a4">

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Thaïs
2024-04-04 15:56:52 +02:00
committed by GitHub
parent 9d45f7811e
commit f184541293
7 changed files with 141 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectAboutSection.tsx → packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectSummaryCard.tsx
View File

@ -2,20 +2,17 @@ import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconArchive, IconDotsVertical, IconPencil } from 'twenty-ui';
import { SettingsSummaryCard } from '@/settings/components/SettingsSummaryCard';
import { SettingsDataModelIsCustomTag } from '@/settings/data-model/objects/SettingsDataModelIsCustomTag';
import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
import { Card } from '@/ui/layout/card/components/Card';
import { CardContent } from '@/ui/layout/card/components/CardContent';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { Section } from '@/ui/layout/section/components/Section';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
type SettingsAboutSectionProps = {
type SettingsObjectSummaryCardProps = {
iconKey?: string;
isCustom: boolean;
name: string;
@ -23,21 +20,6 @@ type SettingsAboutSectionProps = {
onEdit: () => void;
};
const StyledCardContent = styled(CardContent)`
align-items: center;
display: flex;
gap: ${({ theme }) => theme.spacing(2)};
padding: ${({ theme }) => theme.spacing(2)};
`;
const StyledName = styled.div`
color: ${({ theme }) => theme.font.color.primary};
display: flex;
font-weight: ${({ theme }) => theme.font.weight.medium};
gap: ${({ theme }) => theme.spacing(2)};
margin-right: auto;
`;
const StyledIsCustomTag = styled(SettingsDataModelIsCustomTag)`
box-sizing: border-box;
height: ${({ theme }) => theme.spacing(6)};
@ -45,13 +27,13 @@ const StyledIsCustomTag = styled(SettingsDataModelIsCustomTag)`
const dropdownId = 'settings-object-edit-about-menu-dropdown';
export const SettingsAboutSection = ({
export const SettingsObjectSummaryCard = ({
iconKey = '',
isCustom,
name,
onDeactivate,
onEdit,
}: SettingsAboutSectionProps) => {
}: SettingsObjectSummaryCardProps) => {
const theme = useTheme();
const { getIcon } = useIcons();
const Icon = getIcon(iconKey);
@ -69,14 +51,15 @@ export const SettingsAboutSection = ({
};
return (
<Section>
<H2Title title="About" description="Manage your object" />
<Card>
<StyledCardContent>
<StyledName>
{!!Icon && <Icon size={theme.icon.size.md} />}
{name}
</StyledName>
<SettingsSummaryCard
title={
<>
{!!Icon && <Icon size={theme.icon.size.md} />}
{name}
</>
}
rightComponent={
<>
<StyledIsCustomTag isCustom={isCustom} />
<Dropdown
dropdownId={dropdownId}
@ -103,8 +86,8 @@ export const SettingsAboutSection = ({
scope: dropdownId,
}}
/>
</StyledCardContent>
</Card>
</Section>
</>
}
/>
);
};