feat: add remote object integration databases list card (#4621)
* feat: add remote object integration databases list card Closes #4549 * fix: fixes after rebase
This commit is contained in:
Thaïs
@ -7,8 +7,9 @@ import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
|
||||
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
|
||||
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
|
||||
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
|
||||
import { SettingsAccountsListCard } from '@/settings/accounts/components/SettingsAccountsListCard';
|
||||
import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
|
||||
import { SettingsAccountsSynchronizationStatus } from '@/settings/accounts/components/SettingsAccountsSynchronizationStatus';
|
||||
import { SettingsListCard } from '@/settings/components/SettingsListCard';
|
||||
import { IconChevronRight } from '@/ui/display/icon';
|
||||
import { IconGoogleCalendar } from '@/ui/display/icon/components/IconGoogleCalendar';
|
||||
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
|
||||
@ -36,6 +37,7 @@ export const SettingsAccountsCalendarChannelsListCard = () => {
|
||||
const { records: calendarChannels, loading: calendarChannelsLoading } =
|
||||
useFindManyRecords<CalendarChannel>({
|
||||
objectNameSingular: CoreObjectNameSingular.CalendarChannel,
|
||||
skip: !accounts.length,
|
||||
filter: {
|
||||
connectedAccountId: {
|
||||
in: accounts.map((account) => account.id),
|
||||
@ -43,9 +45,14 @@ export const SettingsAccountsCalendarChannelsListCard = () => {
|
||||
},
|
||||
});
|
||||
|
||||
if (!calendarChannels.length) {
|
||||
return <SettingsAccountsListEmptyStateCard />;
|
||||
}
|
||||
|
||||
return (
|
||||
<SettingsAccountsListCard
|
||||
<SettingsListCard
|
||||
items={calendarChannels}
|
||||
getItemLabel={(calendarChannel) => calendarChannel.handle}
|
||||
isLoading={accountsLoading || calendarChannelsLoading}
|
||||
onRowClick={(calendarChannel) =>
|
||||
navigate(`/settings/accounts/calendars/${calendarChannel.id}`)
|
||||
|
||||
@ -0,0 +1,41 @@
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
|
||||
import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
|
||||
import { SettingsAccountsRowDropdownMenu } from '@/settings/accounts/components/SettingsAccountsRowDropdownMenu';
|
||||
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
|
||||
import { SettingsPath } from '@/types/SettingsPath';
|
||||
import { IconGoogle } from '@/ui/display/icon/components/IconGoogle';
|
||||
|
||||
import { SettingsListCard } from '../../components/SettingsListCard';
|
||||
|
||||
export const SettingsAccountsConnectedAccountsListCard = ({
|
||||
accounts,
|
||||
loading,
|
||||
}: {
|
||||
accounts: ConnectedAccount[];
|
||||
loading?: boolean;
|
||||
}) => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
if (!accounts.length) {
|
||||
return <SettingsAccountsListEmptyStateCard />;
|
||||
}
|
||||
|
||||
return (
|
||||
<SettingsListCard
|
||||
items={accounts}
|
||||
getItemLabel={(account) => account.handle}
|
||||
isLoading={loading}
|
||||
RowIcon={IconGoogle}
|
||||
RowRightComponent={({ item: account }) => (
|
||||
<SettingsAccountsRowDropdownMenu item={account} />
|
||||
)}
|
||||
hasFooter
|
||||
footerButtonLabel="Add account"
|
||||
onFooterButtonClick={() =>
|
||||
navigate(getSettingsPagePath(SettingsPath.NewAccount))
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@ -1,27 +0,0 @@
|
||||
import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
|
||||
import { SettingsAccountsRowDropdownMenu } from '@/settings/accounts/components/SettingsAccountsRowDropdownMenu';
|
||||
import { H2Title } from '@/ui/display/typography/components/H2Title';
|
||||
import { Section } from '@/ui/layout/section/components/Section';
|
||||
|
||||
import { SettingsAccountsListCard } from './SettingsAccountsListCard';
|
||||
|
||||
export const SettingsAccountsConnectedAccountsSection = ({
|
||||
accounts,
|
||||
loading,
|
||||
}: {
|
||||
accounts: ConnectedAccount[];
|
||||
loading?: boolean;
|
||||
}) => (
|
||||
<Section>
|
||||
<H2Title
|
||||
title="Connected accounts"
|
||||
description="Manage your internet accounts."
|
||||
/>
|
||||
<SettingsAccountsListCard
|
||||
items={accounts}
|
||||
isLoading={loading}
|
||||
RowRightComponent={SettingsAccountsRowDropdownMenu}
|
||||
hasFooter
|
||||
/>
|
||||
</Section>
|
||||
);
|
||||
@ -1,101 +0,0 @@
|
||||
import { ComponentType } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useTheme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
|
||||
import { SettingsAccountsListSkeletonCard } from '@/settings/accounts/components/SettingsAccountsListSkeletonCard';
|
||||
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
|
||||
import { SettingsPath } from '@/types/SettingsPath';
|
||||
import { IconPlus } from '@/ui/display/icon';
|
||||
import { IconGoogle } from '@/ui/display/icon/components/IconGoogle';
|
||||
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
|
||||
import { Card } from '@/ui/layout/card/components/Card';
|
||||
import { CardFooter } from '@/ui/layout/card/components/CardFooter';
|
||||
|
||||
import { SettingsAccountRow } from './SettingsAccountsRow';
|
||||
|
||||
const StyledFooter = styled(CardFooter)`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
padding: ${({ theme }) => theme.spacing(1)};
|
||||
`;
|
||||
|
||||
const StyledButton = styled.button`
|
||||
align-items: center;
|
||||
background: ${({ theme }) => theme.background.primary};
|
||||
border: none;
|
||||
border-radius: ${({ theme }) => theme.border.radius.sm};
|
||||
color: ${({ theme }) => theme.font.color.secondary};
|
||||
gap: ${({ theme }) => theme.spacing(2)};
|
||||
padding: 0 ${({ theme }) => theme.spacing(1)};
|
||||
padding-left: ${({ theme }) => theme.spacing(2)};
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex: 1 0 0;
|
||||
height: ${({ theme }) => theme.spacing(8)};
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
background: ${({ theme }) => theme.background.transparent.light};
|
||||
}
|
||||
`;
|
||||
|
||||
type SettingsAccountsListCardItem = {
|
||||
handle: string;
|
||||
id: string;
|
||||
};
|
||||
|
||||
type SettingsAccountsListCardProps<T extends SettingsAccountsListCardItem> = {
|
||||
items: T[];
|
||||
hasFooter?: boolean;
|
||||
isLoading?: boolean;
|
||||
onRowClick?: (item: T) => void;
|
||||
RowIcon?: IconComponent;
|
||||
RowRightComponent: ComponentType<{ item: T }>;
|
||||
};
|
||||
|
||||
export const SettingsAccountsListCard = <
|
||||
T extends SettingsAccountsListCardItem,
|
||||
>({
|
||||
items,
|
||||
hasFooter,
|
||||
isLoading,
|
||||
onRowClick,
|
||||
RowIcon = IconGoogle,
|
||||
RowRightComponent,
|
||||
}: SettingsAccountsListCardProps<T>) => {
|
||||
const theme = useTheme();
|
||||
const navigate = useNavigate();
|
||||
|
||||
if (isLoading === true) return <SettingsAccountsListSkeletonCard />;
|
||||
|
||||
if (!items.length) return <SettingsAccountsListEmptyStateCard />;
|
||||
|
||||
return (
|
||||
<Card>
|
||||
{items.map((item, index) => (
|
||||
<SettingsAccountRow
|
||||
key={item.id}
|
||||
LeftIcon={RowIcon}
|
||||
account={item}
|
||||
rightComponent={<RowRightComponent item={item} />}
|
||||
divider={index < items.length - 1}
|
||||
onClick={() => onRowClick?.(item)}
|
||||
/>
|
||||
))}
|
||||
{hasFooter && (
|
||||
<StyledFooter>
|
||||
<StyledButton
|
||||
onClick={() =>
|
||||
navigate(getSettingsPagePath(SettingsPath.NewAccount))
|
||||
}
|
||||
>
|
||||
<IconPlus size={theme.icon.size.md} />
|
||||
Add account
|
||||
</StyledButton>
|
||||
</StyledFooter>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
@ -1,10 +0,0 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { Card } from '@/ui/layout/card/components/Card';
|
||||
|
||||
const StyledCard = styled(Card)`
|
||||
background-color: ${({ theme }) => theme.background.secondary};
|
||||
height: 40px;
|
||||
`;
|
||||
|
||||
export { StyledCard as SettingsAccountsListSkeletonCard };
|
||||
@ -8,8 +8,9 @@ import { MessageChannel } from '@/accounts/types/MessageChannel';
|
||||
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
|
||||
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
|
||||
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
|
||||
import { SettingsAccountsListCard } from '@/settings/accounts/components/SettingsAccountsListCard';
|
||||
import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
|
||||
import { SettingsAccountsSynchronizationStatus } from '@/settings/accounts/components/SettingsAccountsSynchronizationStatus';
|
||||
import { SettingsListCard } from '@/settings/components/SettingsListCard';
|
||||
import { IconChevronRight } from '@/ui/display/icon';
|
||||
import { IconGmail } from '@/ui/display/icon/components/IconGmail';
|
||||
|
||||
@ -50,9 +51,14 @@ export const SettingsAccountsMessageChannelsListCard = () => {
|
||||
}),
|
||||
);
|
||||
|
||||
if (!messageChannelsWithSyncedEmails.length) {
|
||||
return <SettingsAccountsListEmptyStateCard />;
|
||||
}
|
||||
|
||||
return (
|
||||
<SettingsAccountsListCard
|
||||
<SettingsListCard
|
||||
items={messageChannelsWithSyncedEmails}
|
||||
getItemLabel={(messageChannel) => messageChannel.handle}
|
||||
isLoading={accountsLoading || messageChannelsLoading}
|
||||
onRowClick={(messageChannel) =>
|
||||
navigate(`/settings/accounts/emails/${messageChannel.id}`)
|
||||
|
||||
@ -1,48 +0,0 @@
|
||||
import { ReactNode } from 'react';
|
||||
import { useTheme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
|
||||
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
|
||||
import { CardContent } from '@/ui/layout/card/components/CardContent';
|
||||
|
||||
const StyledRow = styled(CardContent)`
|
||||
align-items: center;
|
||||
cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};
|
||||
display: flex;
|
||||
font-size: ${({ theme }) => theme.font.size.sm};
|
||||
font-weight: ${({ theme }) => theme.font.weight.medium};
|
||||
gap: ${({ theme }) => theme.spacing(2)};
|
||||
padding: ${({ theme }) => theme.spacing(2)};
|
||||
padding-left: ${({ theme }) => theme.spacing(3)};
|
||||
`;
|
||||
|
||||
const StyledAccountHandle = styled.span`
|
||||
flex: 1 0 auto;
|
||||
`;
|
||||
|
||||
type SettingsAccountRowProps = {
|
||||
account: Pick<ConnectedAccount, 'handle'>;
|
||||
divider?: boolean;
|
||||
LeftIcon: IconComponent;
|
||||
onClick?: () => void;
|
||||
rightComponent: ReactNode;
|
||||
};
|
||||
|
||||
export const SettingsAccountRow = ({
|
||||
account,
|
||||
divider,
|
||||
LeftIcon,
|
||||
onClick,
|
||||
rightComponent,
|
||||
}: SettingsAccountRowProps) => {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<StyledRow onClick={onClick} divider={divider}>
|
||||
<LeftIcon size={theme.icon.size.md} />
|
||||
<StyledAccountHandle>{account.handle}</StyledAccountHandle>
|
||||
{rightComponent}
|
||||
</StyledRow>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user