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

* feat: add remote object integration databases list card Closes #4549 * fix: fixes after rebase
2024-03-27 18:59:40 +01:00
parent 6637ae586f
commit c3cc0f651c
13 changed files with 235 additions and 88 deletions
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsListCard.tsx
@ -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}`)
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx
@ -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))
+      }
+    />
+  );
+};
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsSection.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsSection.tsx
@ -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>
-);
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsListCard.tsx
@ -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}`)
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListCard.tsx
@ -1,19 +1,14 @@
 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 { SettingsListSkeletonCard } from '@/settings/components/SettingsListSkeletonCard';
 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';
+import { SettingsListItemCardContent } from './SettingsListItemCardContent';

 const StyledFooter = styled(CardFooter)`
  align-items: center;
@ -41,58 +36,54 @@ const StyledButton = styled.button`
  }
 `;

-type SettingsAccountsListCardItem = {
-  handle: string;
-  id: string;
-};
-
-type SettingsAccountsListCardProps<T extends SettingsAccountsListCardItem> = {
-  items: T[];
+type SettingsListCardProps<ListItem extends { id: string }> = {
+  items: ListItem[];
+  getItemLabel: (item: ListItem) => string;
  hasFooter?: boolean;
  isLoading?: boolean;
-  onRowClick?: (item: T) => void;
-  RowIcon?: IconComponent;
-  RowRightComponent: ComponentType<{ item: T }>;
+  onRowClick?: (item: ListItem) => void;
+  RowIcon: IconComponent;
+  RowRightComponent: ComponentType<{ item: ListItem }>;
+  footerButtonLabel?: string;
+  onFooterButtonClick?: () => void;
 };

-export const SettingsAccountsListCard = <
-  T extends SettingsAccountsListCardItem,
+export const SettingsListCard = <
+  ListItem extends { id: string } = {
+    id: string;
+  },
 >({
  items,
+  getItemLabel,
  hasFooter,
  isLoading,
  onRowClick,
-  RowIcon = IconGoogle,
+  RowIcon,
  RowRightComponent,
-}: SettingsAccountsListCardProps<T>) => {
+  onFooterButtonClick,
+  footerButtonLabel,
+}: SettingsListCardProps<ListItem>) => {
  const theme = useTheme();
-  const navigate = useNavigate();

-  if (isLoading === true) return <SettingsAccountsListSkeletonCard />;
-
-  if (!items.length) return <SettingsAccountsListEmptyStateCard />;
+  if (isLoading === true) return <SettingsListSkeletonCard />;

  return (
    <Card>
      {items.map((item, index) => (
-        <SettingsAccountRow
+        <SettingsListItemCardContent
          key={item.id}
          LeftIcon={RowIcon}
-          account={item}
+          label={getItemLabel(item)}
          rightComponent={<RowRightComponent item={item} />}
          divider={index < items.length - 1}
          onClick={() => onRowClick?.(item)}
        />
      ))}
      {hasFooter && (
-        <StyledFooter>
-          <StyledButton
-            onClick={() =>
-              navigate(getSettingsPagePath(SettingsPath.NewAccount))
-            }
-          >
+        <StyledFooter divider={!!items.length}>
+          <StyledButton onClick={onFooterButtonClick}>
            <IconPlus size={theme.icon.size.md} />
-            Add account
+            {footerButtonLabel}
          </StyledButton>
        </StyledFooter>
      )}
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRow.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRow.tsx
@ -2,7 +2,6 @@ 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';

@ -21,27 +20,27 @@ const StyledAccountHandle = styled.span`
  flex: 1 0 auto;
 `;

-type SettingsAccountRowProps = {
-  account: Pick<ConnectedAccount, 'handle'>;
+type SettingsListItemCardContentProps = {
+  label: string;
  divider?: boolean;
  LeftIcon: IconComponent;
  onClick?: () => void;
  rightComponent: ReactNode;
 };

-export const SettingsAccountRow = ({
-  account,
+export const SettingsListItemCardContent = ({
+  label,
  divider,
  LeftIcon,
  onClick,
  rightComponent,
-}: SettingsAccountRowProps) => {
+}: SettingsListItemCardContentProps) => {
  const theme = useTheme();

  return (
    <StyledRow onClick={onClick} divider={divider}>
      <LeftIcon size={theme.icon.size.md} />
-      <StyledAccountHandle>{account.handle}</StyledAccountHandle>
+      <StyledAccountHandle>{label}</StyledAccountHandle>
      {rightComponent}
    </StyledRow>
  );
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListSkeletonCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListSkeletonCard.tsx
@ -7,4 +7,4 @@ const StyledCard = styled(Card)`
  height: 40px;
 `;

-export { StyledCard as SettingsAccountsListSkeletonCard };
+export { StyledCard as SettingsListSkeletonCard };
--- a/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationDatabasesListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationDatabasesListCard.tsx
@ -0,0 +1,73 @@
+import { useNavigate } from 'react-router-dom';
+import styled from '@emotion/styled';
+
+import { SettingsListCard } from '@/settings/components/SettingsListCard';
+import { IconChevronRight } from '@/ui/display/icon';
+import { Status } from '@/ui/display/status/components/Status';
+import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
+
+type SettingsIntegrationDatabasesListCardProps = {
+  integrationLogoUrl: string;
+  databases: {
+    id: string;
+    key: string;
+    name: string;
+    tables: {
+      name: string;
+    }[];
+  }[];
+};
+
+const StyledIntegrationLogoContainer = styled.div`
+  align-items: center;
+  display: flex;
+  height: ${({ theme }) => theme.spacing(4)};
+  justify-content: center;
+  width: ${({ theme }) => theme.spacing(4)};
+`;
+
+const StyledIntegrationLogo = styled.img`
+  height: 100%;
+`;
+
+const StyledRowRightContainer = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+export const SettingsIntegrationDatabasesListCard = ({
+  integrationLogoUrl,
+  databases,
+}: SettingsIntegrationDatabasesListCardProps) => {
+  const navigate = useNavigate();
+
+  return (
+    <SettingsListCard
+      items={databases}
+      RowIcon={() => (
+        <StyledIntegrationLogoContainer>
+          <StyledIntegrationLogo alt="" src={integrationLogoUrl} />
+        </StyledIntegrationLogoContainer>
+      )}
+      RowRightComponent={({ item: database }) => (
+        <StyledRowRightContainer>
+          <Status
+            color="green"
+            text={
+              database.tables.length === 1
+                ? `1 tracked table`
+                : `${database.tables.length} tracked tables`
+            }
+          />
+          <LightIconButton Icon={IconChevronRight} accent="tertiary" />
+        </StyledRowRightContainer>
+      )}
+      onRowClick={(database) => navigate(`./${database.key}`)}
+      getItemLabel={(database) => database.name}
+      hasFooter
+      footerButtonLabel="Add connection"
+      onFooterButtonClick={() => navigate('./new')}
+    />
+  );
+};
--- a/packages/twenty-front/src/modules/ui/layout/card/components/CardFooter.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/card/components/CardFooter.tsx
@ -1,8 +1,10 @@
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';

-const StyledCardFooter = styled.div`
+const StyledCardFooter = styled.div<{ divider?: boolean }>`
  background-color: ${({ theme }) => theme.background.primary};
-  border-top: 1px solid ${({ theme }) => theme.border.color.medium};
+  border-top: ${({ divider = true, theme }) =>
+    divider ? css`1px solid ${theme.border.color.medium}` : 0};
  font-size: ${({ theme }) => theme.font.size.sm};
  padding: ${({ theme }) => theme.spacing(2, 4)};
 `;
--- a/packages/twenty-front/src/pages/settings/SettingsBilling.tsx
+++ b/packages/twenty-front/src/pages/settings/SettingsBilling.tsx
@ -6,24 +6,24 @@ import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { useOnboardingStatus } from '@/auth/hooks/useOnboardingStatus.ts';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState.ts';
 import { OnboardingStatus } from '@/auth/utils/getOnboardingStatus.ts';
-import { SettingsBillingCoverImage } from '@/billing/components/SettingsBillingCoverImage.tsx';
+import { SettingsBillingCoverImage } from '@/billing/components/SettingsBillingCoverImage';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
-import { SupportChat } from '@/support/components/SupportChat.tsx';
+import { SupportChat } from '@/support/components/SupportChat';
 import { AppPath } from '@/types/AppPath.ts';
 import { IconCalendarEvent, IconCircleX } from '@/ui/display/icon';
 import { IconCreditCard, IconCurrencyDollar } from '@/ui/display/icon';
-import { Info } from '@/ui/display/info/components/Info.tsx';
-import { H1Title } from '@/ui/display/typography/components/H1Title.tsx';
-import { H2Title } from '@/ui/display/typography/components/H2Title.tsx';
-import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar.ts';
-import { Button } from '@/ui/input/button/components/Button.tsx';
-import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal.tsx';
+import { Info } from '@/ui/display/info/components/Info';
+import { H1Title } from '@/ui/display/typography/components/H1Title';
+import { H2Title } from '@/ui/display/typography/components/H2Title';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { Button } from '@/ui/input/button/components/Button';
+import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
-import { Section } from '@/ui/layout/section/components/Section.tsx';
+import { Section } from '@/ui/layout/section/components/Section';
 import {
  useBillingPortalSessionQuery,
  useUpdateBillingSubscriptionMutation,
-} from '~/generated/graphql.tsx';
+} from '~/generated/graphql';
 import { isDefined } from '~/utils/isDefined';

 const StyledH1Title = styled(H1Title)`
--- a/packages/twenty-front/src/pages/settings/accounts/SettingsAccounts.tsx
+++ b/packages/twenty-front/src/pages/settings/accounts/SettingsAccounts.tsx
@ -4,12 +4,14 @@ import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { SettingsAccountLoader } from '@/settings/accounts/components/SettingsAccountLoader';
-import { SettingsAccountsConnectedAccountsSection } from '@/settings/accounts/components/SettingsAccountsConnectedAccountsSection';
+import { SettingsAccountsConnectedAccountsListCard } from '@/settings/accounts/components/SettingsAccountsConnectedAccountsListCard';
 import { SettingsAccountsEmailsBlocklistSection } from '@/settings/accounts/components/SettingsAccountsEmailsBlocklistSection';
 import { SettingsAccountsSettingsSection } from '@/settings/accounts/components/SettingsAccountsSettingsSection';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 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';

@ -42,7 +44,16 @@ export const SettingsAccounts = () => {
          <SettingsAccountLoader />
        ) : (
          <>
-            <SettingsAccountsConnectedAccountsSection accounts={accounts} />
+            <Section>
+              <H2Title
+                title="Connected accounts"
+                description="Manage your internet accounts."
+              />
+              <SettingsAccountsConnectedAccountsListCard
+                accounts={accounts}
+                loading={loading}
+              />
+            </Section>
            {isBlocklistEnabled && <SettingsAccountsEmailsBlocklistSection />}
            <SettingsAccountsSettingsSection />
          </>
--- a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDetail.tsx
+++ b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDetail.tsx
@ -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>
  );
--- a/packages/twenty-front/src/testing/mock-data/remoteObjectDatabases.ts
+++ b/packages/twenty-front/src/testing/mock-data/remoteObjectDatabases.ts
@ -0,0 +1,20 @@
+export const mockedRemoteObjectIntegrations = [
+  {
+    id: '5b717911-dc75-4876-bf33-dfdc994c88cd',
+    key: 'postgresql',
+    databases: [
+      {
+        id: '67cbfd35-8dd4-4591-b9d4-c1906281a5da',
+        key: 'twenty_postgres',
+        name: 'Twenty_postgres',
+        tables: [{ name: '1' }],
+      },
+      {
+        id: '3740cd85-7a1e-45b5-8b0d-47e1921d01f3',
+        key: 'image_postgres',
+        name: 'Image_postgres',
+        tables: [{ name: '2' }, { name: '3' }],
+      },
+    ],
+  },
+];