[FE] Update remote table schema + refactor Tables list (#5548)

Closes #5062.

Refactoring tables list to avoid rendering all toggles on each sync or
schema update while using fresh data:
- introducing id for RemoteTables in apollo cache
- manually updating the cache for the record that was updated after a
sync or schema update instead of fetching all tables again
This commit is contained in:
Marie 2024-05-23 17:00:24 +02:00 committed by GitHub
parent 0d6fe7b2b4
commit fe5b558477
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 222 additions and 57 deletions

View File

@ -18,6 +18,7 @@ const documents = {
"\n \n mutation createServer($input: CreateRemoteServerInput!) {\n createOneRemoteServer(input: $input) {\n ...RemoteServerFields\n }\n }\n": types.CreateServerDocument,
"\n mutation deleteServer($input: RemoteServerIdInput!) {\n deleteOneRemoteServer(input: $input) {\n id\n }\n }\n": types.DeleteServerDocument,
"\n \n mutation syncRemoteTable($input: RemoteTableInput!) {\n syncRemoteTable(input: $input) {\n ...RemoteTableFields\n }\n }\n": types.SyncRemoteTableDocument,
"\n \n mutation syncRemoteTableSchemaChanges($input: RemoteTableInput!) {\n syncRemoteTableSchemaChanges(input: $input) {\n ...RemoteTableFields\n }\n }\n": types.SyncRemoteTableSchemaChangesDocument,
"\n \n mutation unsyncRemoteTable($input: RemoteTableInput!) {\n unsyncRemoteTable(input: $input) {\n ...RemoteTableFields\n }\n }\n": types.UnsyncRemoteTableDocument,
"\n \n mutation updateServer($input: UpdateRemoteServerInput!) {\n updateOneRemoteServer(input: $input) {\n ...RemoteServerFields\n }\n }\n": types.UpdateServerDocument,
"\n \n query GetManyDatabaseConnections($input: RemoteServerTypeInput!) {\n findManyRemoteServersByType(input: $input) {\n ...RemoteServerFields\n }\n }\n": types.GetManyDatabaseConnectionsDocument,
@ -68,6 +69,10 @@ export function graphql(source: "\n mutation deleteServer($input: RemoteServerI
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n \n mutation syncRemoteTable($input: RemoteTableInput!) {\n syncRemoteTable(input: $input) {\n ...RemoteTableFields\n }\n }\n"): (typeof documents)["\n \n mutation syncRemoteTable($input: RemoteTableInput!) {\n syncRemoteTable(input: $input) {\n ...RemoteTableFields\n }\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n \n mutation syncRemoteTableSchemaChanges($input: RemoteTableInput!) {\n syncRemoteTableSchemaChanges(input: $input) {\n ...RemoteTableFields\n }\n }\n"): (typeof documents)["\n \n mutation syncRemoteTableSchemaChanges($input: RemoteTableInput!) {\n syncRemoteTableSchemaChanges(input: $input) {\n ...RemoteTableFields\n }\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/

View File

@ -368,6 +368,7 @@ export type LoginToken = {
export type Mutation = {
__typename?: 'Mutation';
activateWorkspace: Workspace;
addUserToWorkspace: User;
authorizeApp: AuthorizeApp;
challenge: LoginToken;
checkoutSession: SessionEntity;
@ -391,6 +392,7 @@ export type Mutation = {
renewToken: AuthTokens;
signUp: LoginToken;
syncRemoteTable: RemoteTable;
syncRemoteTableSchemaChanges: RemoteTable;
track: Analytics;
unsyncRemoteTable: RemoteTable;
updateBillingSubscription: UpdateBillingEntity;
@ -412,6 +414,11 @@ export type MutationActivateWorkspaceArgs = {
};
export type MutationAddUserToWorkspaceArgs = {
inviteHash: Scalars['String']['input'];
};
export type MutationAuthorizeAppArgs = {
clientId: Scalars['String']['input'];
codeChallenge?: InputMaybe<Scalars['String']['input']>;
@ -523,6 +530,11 @@ export type MutationSyncRemoteTableArgs = {
};
export type MutationSyncRemoteTableSchemaChangesArgs = {
input: RemoteTableInput;
};
export type MutationTrackArgs = {
data: Scalars['JSON']['input'];
type: Scalars['String']['input'];
@ -1284,6 +1296,13 @@ export type SyncRemoteTableMutationVariables = Exact<{
export type SyncRemoteTableMutation = { __typename?: 'Mutation', syncRemoteTable: { __typename?: 'RemoteTable', id?: any | null, name: string, schema?: string | null, status: RemoteTableStatus, schemaPendingUpdates?: Array<DistantTableUpdate> | null } };
export type SyncRemoteTableSchemaChangesMutationVariables = Exact<{
input: RemoteTableInput;
}>;
export type SyncRemoteTableSchemaChangesMutation = { __typename?: 'Mutation', syncRemoteTableSchemaChanges: { __typename?: 'RemoteTable', id?: any | null, name: string, schema?: string | null, status: RemoteTableStatus, schemaPendingUpdates?: Array<DistantTableUpdate> | null } };
export type UnsyncRemoteTableMutationVariables = Exact<{
input: RemoteTableInput;
}>;
@ -1390,6 +1409,7 @@ export const RemoteTableFieldsFragmentDoc = {"kind":"Document","definitions":[{"
export const CreateServerDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"createServer"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"CreateRemoteServerInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"createOneRemoteServer"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"RemoteServerFields"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"RemoteServerFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"RemoteServer"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"foreignDataWrapperId"}},{"kind":"Field","name":{"kind":"Name","value":"foreignDataWrapperOptions"}},{"kind":"Field","name":{"kind":"Name","value":"foreignDataWrapperType"}},{"kind":"Field","name":{"kind":"Name","value":"userMappingOptions"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"user"}}]}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"schema"}}]}}]} as unknown as DocumentNode<CreateServerMutation, CreateServerMutationVariables>;
export const DeleteServerDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"deleteServer"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"RemoteServerIdInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"deleteOneRemoteServer"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode<DeleteServerMutation, DeleteServerMutationVariables>;
export const SyncRemoteTableDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"syncRemoteTable"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"RemoteTableInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"syncRemoteTable"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"RemoteTableFields"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"RemoteTableFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"RemoteTable"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"schema"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"schemaPendingUpdates"}}]}}]} as unknown as DocumentNode<SyncRemoteTableMutation, SyncRemoteTableMutationVariables>;
export const SyncRemoteTableSchemaChangesDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"syncRemoteTableSchemaChanges"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"RemoteTableInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"syncRemoteTableSchemaChanges"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"RemoteTableFields"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"RemoteTableFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"RemoteTable"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"schema"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"schemaPendingUpdates"}}]}}]} as unknown as DocumentNode<SyncRemoteTableSchemaChangesMutation, SyncRemoteTableSchemaChangesMutationVariables>;
export const UnsyncRemoteTableDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"unsyncRemoteTable"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"RemoteTableInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"unsyncRemoteTable"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"RemoteTableFields"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"RemoteTableFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"RemoteTable"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"schema"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"schemaPendingUpdates"}}]}}]} as unknown as DocumentNode<UnsyncRemoteTableMutation, UnsyncRemoteTableMutationVariables>;
export const UpdateServerDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"updateServer"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"UpdateRemoteServerInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"updateOneRemoteServer"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"RemoteServerFields"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"RemoteServerFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"RemoteServer"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"foreignDataWrapperId"}},{"kind":"Field","name":{"kind":"Name","value":"foreignDataWrapperOptions"}},{"kind":"Field","name":{"kind":"Name","value":"foreignDataWrapperType"}},{"kind":"Field","name":{"kind":"Name","value":"userMappingOptions"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"user"}}]}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"schema"}}]}}]} as unknown as DocumentNode<UpdateServerMutation, UpdateServerMutationVariables>;
export const GetManyDatabaseConnectionsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetManyDatabaseConnections"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"RemoteServerTypeInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"findManyRemoteServersByType"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"RemoteServerFields"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"RemoteServerFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"RemoteServer"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"foreignDataWrapperId"}},{"kind":"Field","name":{"kind":"Name","value":"foreignDataWrapperOptions"}},{"kind":"Field","name":{"kind":"Name","value":"foreignDataWrapperType"}},{"kind":"Field","name":{"kind":"Name","value":"userMappingOptions"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"user"}}]}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"schema"}}]}}]} as unknown as DocumentNode<GetManyDatabaseConnectionsQuery, GetManyDatabaseConnectionsQueryVariables>;

View File

@ -30,7 +30,13 @@ export const useApolloFactory = (options: Partial<Options<any>> = {}) => {
const apolloClient = useMemo(() => {
apolloRef.current = new ApolloFactory({
uri: `${REACT_APP_SERVER_BASE_URL}/graphql`,
cache: new InMemoryCache(),
cache: new InMemoryCache({
typePolicies: {
RemoteTable: {
keyFields: ['name'],
},
},
}),
headers: {
...(currentWorkspace?.currentCacheVersion && {
'X-Schema-Version': currentWorkspace.currentCacheVersion,

View File

@ -0,0 +1,12 @@
import { gql } from '@apollo/client';
import { REMOTE_TABLE_FRAGMENT } from '@/databases/graphql/fragments/remoteTableFragment';
export const SYNC_REMOTE_TABLE_SCHEMA_CHANGES = gql`
${REMOTE_TABLE_FRAGMENT}
mutation syncRemoteTableSchemaChanges($input: RemoteTableInput!) {
syncRemoteTableSchemaChanges(input: $input) {
...RemoteTableFields
}
}
`;

View File

@ -2,7 +2,7 @@ import { useCallback } from 'react';
import { ApolloClient, useApolloClient, useMutation } from '@apollo/client';
import { SYNC_REMOTE_TABLE } from '@/databases/graphql/mutations/syncRemoteTable';
import { GET_MANY_REMOTE_TABLES } from '@/databases/graphql/queries/findManyRemoteTables';
import { modifyRemoteTableFromCache } from '@/databases/utils/modifyRemoteTableFromCache';
import { useApolloMetadataClient } from '@/object-metadata/hooks/useApolloMetadataClient';
import { useFindManyObjectMetadataItems } from '@/object-metadata/hooks/useFindManyObjectMetadataItems';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
@ -12,6 +12,7 @@ import {
SyncRemoteTableMutation,
SyncRemoteTableMutationVariables,
} from '~/generated-metadata/graphql';
import { isDefined } from '~/utils/isDefined';
export const useSyncRemoteTable = () => {
const apolloMetadataClient = useApolloMetadataClient();
@ -23,7 +24,6 @@ export const useSyncRemoteTable = () => {
const { findManyRecordsQuery: findManyViewsQuery } = useFindManyRecordsQuery({
objectNameSingular: CoreObjectNameSingular.View,
});
const [mutate] = useMutation<
SyncRemoteTableMutation,
SyncRemoteTableMutationVariables
@ -37,20 +37,19 @@ export const useSyncRemoteTable = () => {
variables: {
input,
},
awaitRefetchQueries: true,
refetchQueries: [
{
query: GET_MANY_REMOTE_TABLES,
variables: {
input: {
id: input.remoteServerId,
update: (cache, { data }) => {
if (isDefined(data)) {
modifyRemoteTableFromCache({
cache: cache,
remoteTableName: input.name,
fieldModifiers: {
status: () => data.syncRemoteTable.status,
},
},
},
],
});
}
},
});
// TODO: we should return the tables with the columns and store in cache instead of refetching
await refetchObjectMetadataItems();
await apolloClient.query({
query: findManyViewsQuery,

View File

@ -0,0 +1,53 @@
import { useCallback } from 'react';
import { ApolloClient, useMutation } from '@apollo/client';
import { SYNC_REMOTE_TABLE_SCHEMA_CHANGES } from '@/databases/graphql/mutations/syncRemoteTableSchemaChanges';
import { modifyRemoteTableFromCache } from '@/databases/utils/modifyRemoteTableFromCache';
import { useApolloMetadataClient } from '@/object-metadata/hooks/useApolloMetadataClient';
import {
RemoteTableInput,
SyncRemoteTableSchemaChangesMutation,
SyncRemoteTableSchemaChangesMutationVariables,
} from '~/generated-metadata/graphql';
import { isDefined } from '~/utils/isDefined';
export const useSyncRemoteTableSchemaChanges = () => {
const apolloMetadataClient = useApolloMetadataClient();
const [mutate, mutationInformation] = useMutation<
SyncRemoteTableSchemaChangesMutation,
SyncRemoteTableSchemaChangesMutationVariables
>(SYNC_REMOTE_TABLE_SCHEMA_CHANGES, {
client: apolloMetadataClient ?? ({} as ApolloClient<any>),
});
const syncRemoteTableSchemaChanges = useCallback(
async (input: RemoteTableInput) => {
const remoteTable = await mutate({
variables: {
input,
},
update: (cache, { data }) => {
if (isDefined(data)) {
modifyRemoteTableFromCache({
cache: cache,
remoteTableName: input.name,
fieldModifiers: {
schemaPendingUpdates: () =>
data.syncRemoteTableSchemaChanges.schemaPendingUpdates || [],
},
});
}
},
});
return remoteTable;
},
[mutate],
);
return {
syncRemoteTableSchemaChanges,
isLoading: mutationInformation.loading,
};
};

View File

@ -2,7 +2,7 @@ import { useCallback } from 'react';
import { ApolloClient, useMutation } from '@apollo/client';
import { UNSYNC_REMOTE_TABLE } from '@/databases/graphql/mutations/unsyncRemoteTable';
import { GET_MANY_REMOTE_TABLES } from '@/databases/graphql/queries/findManyRemoteTables';
import { modifyRemoteTableFromCache } from '@/databases/utils/modifyRemoteTableFromCache';
import { useApolloMetadataClient } from '@/object-metadata/hooks/useApolloMetadataClient';
import { useFindManyObjectMetadataItems } from '@/object-metadata/hooks/useFindManyObjectMetadataItems';
import {
@ -10,6 +10,7 @@ import {
UnsyncRemoteTableMutation,
UnsyncRemoteTableMutationVariables,
} from '~/generated-metadata/graphql';
import { isDefined } from '~/utils/isDefined';
export const useUnsyncRemoteTable = () => {
const apolloMetadataClient = useApolloMetadataClient();
@ -29,17 +30,17 @@ export const useUnsyncRemoteTable = () => {
variables: {
input,
},
awaitRefetchQueries: true,
refetchQueries: [
{
query: GET_MANY_REMOTE_TABLES,
variables: {
input: {
id: input.remoteServerId,
update: (cache, { data }) => {
if (isDefined(data)) {
modifyRemoteTableFromCache({
cache: cache,
remoteTableName: input.name,
fieldModifiers: {
status: () => data.unsyncRemoteTable.status,
},
},
},
],
});
}
},
});
await refetchObjectMetadataItems();

View File

@ -0,0 +1,22 @@
import { ApolloCache } from '@apollo/client';
import { Modifiers } from '@apollo/client/cache';
import { RemoteTable } from '~/generated-metadata/graphql';
export const modifyRemoteTableFromCache = ({
cache,
fieldModifiers,
remoteTableName,
}: {
cache: ApolloCache<object>;
fieldModifiers: Modifiers<RemoteTable>;
remoteTableName: string;
}) => {
const remoteTableCacheId = `RemoteTable:{"name":"${remoteTableName}"}`;
cache.modify({
id: remoteTableCacheId,
fields: fieldModifiers,
optimistic: true,
});
};

View File

@ -0,0 +1,37 @@
import { FetchResult } from '@apollo/client';
import styled from '@emotion/styled';
import { IconReload } from 'twenty-ui';
import { Button } from '@/ui/input/button/components/Button';
import { SyncRemoteTableSchemaChangesMutation } from '~/generated-metadata/graphql';
const StyledText = styled.h3`
color: ${({ theme }) => theme.font.color.tertiary};
font-size: ${({ theme }) => theme.font.size.md};
font-weight: ${({ theme }) => theme.font.weight.regular};
margin: 0;
`;
type SettingsIntegrationRemoteTableSchemaUpdateProps = {
updatesText: string;
onUpdate: () => Promise<FetchResult<SyncRemoteTableSchemaChangesMutation>>;
};
export const SettingsIntegrationRemoteTableSchemaUpdate = ({
updatesText,
onUpdate,
}: SettingsIntegrationRemoteTableSchemaUpdateProps) => {
return (
<>
{updatesText && <StyledText>{updatesText}</StyledText>}
{updatesText && (
<Button
Icon={IconReload}
title="Update"
size="small"
onClick={onUpdate}
/>
)}
</>
);
};

View File

@ -4,10 +4,12 @@ import { Toggle } from '@/ui/input/components/Toggle';
import { RemoteTableStatus } from '~/generated-metadata/graphql';
export const SettingsIntegrationRemoteTableSyncStatusToggle = ({
table,
tableName,
tableStatus,
onSyncUpdate,
}: {
table: { id: string; name: string; status: RemoteTableStatus };
tableName: string;
tableStatus: RemoteTableStatus;
onSyncUpdate: (value: boolean, tableName: string) => Promise<void>;
}) => {
const [isToggleLoading, setIsToggleLoading] = useState(false);
@ -15,13 +17,13 @@ export const SettingsIntegrationRemoteTableSyncStatusToggle = ({
const onChange = async (newValue: boolean) => {
if (isToggleLoading) return;
setIsToggleLoading(true);
await onSyncUpdate(newValue, table.name);
await onSyncUpdate(newValue, tableName);
setIsToggleLoading(false);
};
return (
<Toggle
value={table.status === RemoteTableStatus.Synced}
value={tableStatus === RemoteTableStatus.Synced}
disabled={isToggleLoading}
onChange={onChange}
/>

View File

@ -1,17 +1,18 @@
import { useCallback, useState } from 'react';
import { useCallback } from 'react';
import styled from '@emotion/styled';
import { z } from 'zod';
import { useSyncRemoteTable } from '@/databases/hooks/useSyncRemoteTable';
import { useSyncRemoteTableSchemaChanges } from '@/databases/hooks/useSyncRemoteTableSchemaChanges';
import { useUnsyncRemoteTable } from '@/databases/hooks/useUnsyncRemoteTable';
import { SettingsListCard } from '@/settings/components/SettingsListCard';
import { SettingsIntegrationRemoteTableSchemaUpdate } from '@/settings/integrations/components/SettingsIntegrationRemoteTableSchemaUpdate';
import { SettingsIntegrationRemoteTableSyncStatusToggle } from '@/settings/integrations/components/SettingsIntegrationRemoteTableSyncStatusToggle';
import {
DistantTableUpdate,
RemoteTable,
RemoteTableStatus,
} from '~/generated-metadata/graphql';
import { isDefined } from '~/utils/isDefined';
export const settingsIntegrationsDatabaseTablesSchema = z.object({
syncedTablesByName: z.record(z.boolean()),
@ -32,13 +33,6 @@ const StyledRowRightContainer = styled.div`
gap: ${({ theme }) => theme.spacing(1)};
`;
const StyledText = styled.h3`
color: ${({ theme }) => theme.font.color.tertiary};
font-size: ${({ theme }) => theme.font.size.md};
font-weight: ${({ theme }) => theme.font.weight.regular};
margin: 0;
`;
const getDistantTableUpdatesText = (
schemaPendingUpdates: DistantTableUpdate[],
) => {
@ -66,24 +60,18 @@ export const SettingsIntegrationDatabaseTablesListCard = ({
}: SettingsIntegrationDatabaseTablesListCardProps) => {
const { syncRemoteTable } = useSyncRemoteTable();
const { unsyncRemoteTable } = useUnsyncRemoteTable();
const { syncRemoteTableSchemaChanges } = useSyncRemoteTableSchemaChanges();
// We need to use a state because the table status update re-render the whole list of toggles
const [items] = useState(
tables.map((table) => ({
...table,
id: table.name,
updatesText: table.schemaPendingUpdates
? getDistantTableUpdatesText(table.schemaPendingUpdates)
: null,
})),
);
const items = tables.map((table) => ({
...table,
id: table.name,
updatesText: table.schemaPendingUpdates
? getDistantTableUpdatesText(table.schemaPendingUpdates)
: null,
}));
const onSyncUpdate = useCallback(
async (isSynced: boolean, tableName: string) => {
const table = items.find((table) => table.name === tableName);
if (!isDefined(table)) return;
if (isSynced) {
await syncRemoteTable({
remoteServerId: connectionId,
@ -96,7 +84,16 @@ export const SettingsIntegrationDatabaseTablesListCard = ({
});
}
},
[items, syncRemoteTable, connectionId, unsyncRemoteTable],
[syncRemoteTable, connectionId, unsyncRemoteTable],
);
const onSyncSchemaUpdate = useCallback(
async (tableName: string) =>
syncRemoteTableSchemaChanges({
remoteServerId: connectionId,
name: tableName,
}),
[syncRemoteTableSchemaChanges, connectionId],
);
const rowRightComponent = useCallback(
@ -111,14 +108,20 @@ export const SettingsIntegrationDatabaseTablesListCard = ({
};
}) => (
<StyledRowRightContainer>
{item.updatesText && <StyledText>{item.updatesText}</StyledText>}
{item.updatesText && (
<SettingsIntegrationRemoteTableSchemaUpdate
updatesText={item.updatesText}
onUpdate={() => onSyncSchemaUpdate(item.name)}
/>
)}
<SettingsIntegrationRemoteTableSyncStatusToggle
table={item}
tableName={item.name}
tableStatus={item.status}
onSyncUpdate={onSyncUpdate}
/>
</StyledRowRightContainer>
),
[onSyncUpdate],
[onSyncSchemaUpdate, onSyncUpdate],
);
return (
<SettingsListCard

View File

@ -303,7 +303,11 @@ export class RemoteTableService {
if (isEmpty(distantTableColumns)) {
await this.unsyncOne(workspaceId, remoteTable, remoteServer);
return {};
return {
name: remoteTable.localTableName,
status: RemoteTableStatus.NOT_SYNCED,
schemaPendingUpdates: [],
};
}
const foreignTableColumns = await fetchTableColumns(

View File

@ -127,6 +127,7 @@ export {
IconRelationManyToMany,
IconRelationOneToMany,
IconRelationOneToOne,
IconReload,
IconRepeat,
IconRocket,
IconSearch,