From f1670f0cf42c86409927e157d71206ba43cf13d5 Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Sat, 21 Oct 2023 14:07:18 +0200 Subject: [PATCH] Feat/metadata datatable types (#2175) * Handled new url v2 type * Fixed refetch queries * wip * Ok delete but views bug * Fix lint --------- Co-authored-by: Charles Bochet --- front/src/App.tsx | 2 +- front/src/AppNavbar.tsx | 7 +- front/src/generated-metadata/gql.ts | 22 ++- front/src/generated-metadata/graphql.ts | 37 ++-- front/src/index.tsx | 2 - .../components/FetchMetadataEffect.tsx | 110 ------------ .../components/MetadataObjectNavItems.tsx | 55 ++++-- .../components/ObjectDataTableEffect.tsx | 14 +- .../metadata/components/ObjectTable.tsx | 8 +- .../metadata/components/ObjectTablePage.tsx} | 33 +++- .../src/modules/metadata/graphql/mutations.ts | 71 ++++++++ .../hooks/useCreateNewTempCustomObject.ts | 160 ++++++++++++++++++ .../hooks/useCreateOneMetadataField.ts | 14 +- .../hooks/useCreateOneMetadataObject.ts | 8 +- .../metadata/hooks/useCreateOneObject.ts | 29 ++-- .../hooks/useDeleteOneMetadataField.ts | 39 +++++ .../hooks/useDeleteOneMetadataObject.ts | 39 +++++ .../metadata/hooks/useDeleteOneObject.ts | 40 +++++ .../hooks/useFindManyMetadataObjects.ts | 33 ++-- .../metadata/hooks/useFindManyObjects.ts | 17 +- .../hooks/useFindOneMetadataObject.ts | 63 ++++++- .../metadata/hooks/useMetadataObject.ts | 18 ++ .../hooks/useMetadataObjectInContext.ts | 27 +++ .../metadata/hooks/useMetadataTableViews.ts | 81 +++++++++ .../hooks/useSeedCustomObjectsTemp.ts | 36 +--- .../hooks/useUpdateOneMetadataField.ts | 41 +---- .../hooks/useUpdateOneMetadataObject.ts | 36 +--- .../metadata/scopes/MetadataObjectScope.tsx | 24 +++ .../MetadataObjectScopeInternalContext.ts | 9 + .../metadata/states/metadataObjectsState.ts | 3 + .../formatMetadataFieldAsColumnDefinition.ts | 34 ++++ .../utils/generateDeleteOneObjectMutation.ts | 22 +++ .../generateFindManyCustomObjectsQuery.ts | 21 ++- .../ui/data/field/components/FieldDisplay.tsx | 4 + .../ui/data/field/components/FieldInput.tsx | 10 ++ .../ui/data/field/hooks/usePersistField.ts | 14 +- .../display/components/URLV2FieldDisplay.tsx | 8 + .../components/URLDisplayV2.tsx | 73 ++++++++ .../field/meta-types/hooks/useURLV2Field.ts | 43 +++++ .../input/components/URLV2FieldInput.tsx | 89 ++++++++++ .../ui/data/field/types/FieldMetadata.ts | 7 + .../modules/ui/data/field/types/FieldType.ts | 1 + .../field/types/guards/assertFieldMetadata.ts | 3 + .../data/field/types/guards/isFieldURLV2.ts | 6 + .../field/types/guards/isFieldURLV2Value.ts | 13 ++ .../modules/views/hooks/useTableViewFields.ts | 8 +- .../src/modules/views/hooks/useTableViews.ts | 8 +- front/src/modules/views/hooks/useViews.ts | 2 +- .../field-metadata/dtos/update-field.input.ts | 13 +- .../dtos/update-object.input.ts | 18 +- 50 files changed, 1125 insertions(+), 350 deletions(-) delete mode 100644 front/src/modules/metadata/components/FetchMetadataEffect.tsx rename front/src/{pages/companies/ObjectsTable.tsx => modules/metadata/components/ObjectTablePage.tsx} (65%) create mode 100644 front/src/modules/metadata/hooks/useCreateNewTempCustomObject.ts create mode 100644 front/src/modules/metadata/hooks/useDeleteOneMetadataField.ts create mode 100644 front/src/modules/metadata/hooks/useDeleteOneMetadataObject.ts create mode 100644 front/src/modules/metadata/hooks/useDeleteOneObject.ts create mode 100644 front/src/modules/metadata/hooks/useMetadataObject.ts create mode 100644 front/src/modules/metadata/hooks/useMetadataObjectInContext.ts create mode 100644 front/src/modules/metadata/hooks/useMetadataTableViews.ts create mode 100644 front/src/modules/metadata/scopes/MetadataObjectScope.tsx create mode 100644 front/src/modules/metadata/scopes/scope-internal-context/MetadataObjectScopeInternalContext.ts create mode 100644 front/src/modules/metadata/utils/formatMetadataFieldAsColumnDefinition.ts create mode 100644 front/src/modules/metadata/utils/generateDeleteOneObjectMutation.ts create mode 100644 front/src/modules/ui/data/field/meta-types/display/components/URLV2FieldDisplay.tsx create mode 100644 front/src/modules/ui/data/field/meta-types/display/content-display/components/URLDisplayV2.tsx create mode 100644 front/src/modules/ui/data/field/meta-types/hooks/useURLV2Field.ts create mode 100644 front/src/modules/ui/data/field/meta-types/input/components/URLV2FieldInput.tsx create mode 100644 front/src/modules/ui/data/field/types/guards/isFieldURLV2.ts create mode 100644 front/src/modules/ui/data/field/types/guards/isFieldURLV2Value.ts diff --git a/front/src/App.tsx b/front/src/App.tsx index 1e184234d..205dea85d 100644 --- a/front/src/App.tsx +++ b/front/src/App.tsx @@ -28,7 +28,7 @@ import { SettingsWorkspaceMembers } from '~/pages/settings/SettingsWorkspaceMemb import { Tasks } from '~/pages/tasks/Tasks'; import { getPageTitleFromPath } from '~/utils/title-utils'; -import { ObjectTablePage } from './pages/companies/ObjectsTable'; +import { ObjectTablePage } from './modules/metadata/components/ObjectTablePage'; import { SettingsObjectNewFieldStep1 } from './pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1'; import { SettingsObjectNewFieldStep2 } from './pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2'; import { SettingsApis } from './pages/settings/SettingsApis'; diff --git a/front/src/AppNavbar.tsx b/front/src/AppNavbar.tsx index 1b9e3818d..d49de53e5 100644 --- a/front/src/AppNavbar.tsx +++ b/front/src/AppNavbar.tsx @@ -19,6 +19,7 @@ import MainNavbar from '@/ui/navigation/navbar/components/MainNavbar'; import NavItem from '@/ui/navigation/navbar/components/NavItem'; import NavTitle from '@/ui/navigation/navbar/components/NavTitle'; +import { useGetClientConfigQuery } from './generated/graphql'; import { measureTotalFrameLoad } from './utils/measureTotalFrameLoad'; export const AppNavbar = () => { @@ -30,6 +31,10 @@ export const AppNavbar = () => { const isInSubMenu = useIsSubMenuNavbarDisplayed(); const { currentUserDueTaskCount } = useCurrentUserTaskCount(); + const { data } = useGetClientConfigQuery(); + + const isFlexibleBackendEnabled = data?.clientConfig?.flexibleBackendEnabled; + return ( <> {!isInSubMenu ? ( @@ -90,7 +95,7 @@ export const AppNavbar = () => { Icon={IconTargetArrow} active={currentPath === '/opportunities'} /> - + {isFlexibleBackendEnabled && } ) : ( diff --git a/front/src/generated-metadata/gql.ts b/front/src/generated-metadata/gql.ts index f62496527..ba1c733da 100644 --- a/front/src/generated-metadata/gql.ts +++ b/front/src/generated-metadata/gql.ts @@ -13,10 +13,12 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/ * Therefore it is highly recommended to use the babel or swc plugin for production. */ const documents = { - "\n mutation CreateOneMetadataObject($input: CreateOneObjectInput!) {\n createOneObject(input: $input) {\n id\n }\n }\n": types.CreateOneMetadataObjectDocument, + "\n mutation CreateOneMetadataObject($input: CreateOneObjectInput!) {\n createOneObject(input: $input) {\n id\n dataSourceId\n nameSingular\n namePlural\n labelSingular\n labelPlural\n description\n icon\n isCustom\n isActive\n createdAt\n updatedAt\n }\n }\n": types.CreateOneMetadataObjectDocument, "\n mutation CreateOneMetadataField($input: CreateOneFieldInput!) {\n createOneField(input: $input) {\n id\n type\n name\n label\n description\n icon\n placeholder\n isCustom\n isActive\n isNullable\n createdAt\n updatedAt\n }\n }\n": types.CreateOneMetadataFieldDocument, - "\n mutation UpdateOneMetadataField(\n $idToUpdate: ID!\n $updatePayload: UpdateFieldInput!\n ) {\n updateOneField(input: { id: $idToUpdate, update: $updatePayload }) {\n id\n }\n }\n": types.UpdateOneMetadataFieldDocument, - "\n mutation UpdateOneMetadataObject(\n $idToUpdate: ID!\n $updatePayload: UpdateObjectInput!\n ) {\n updateOneObject(input: { id: $idToUpdate, update: $updatePayload }) {\n id\n }\n }\n": types.UpdateOneMetadataObjectDocument, + "\n mutation UpdateOneMetadataField(\n $idToUpdate: ID!\n $updatePayload: UpdateFieldInput!\n ) {\n updateOneField(input: { id: $idToUpdate, update: $updatePayload }) {\n id\n type\n name\n label\n description\n icon\n placeholder\n isCustom\n isActive\n isNullable\n createdAt\n updatedAt\n }\n }\n": types.UpdateOneMetadataFieldDocument, + "\n mutation UpdateOneMetadataObject(\n $idToUpdate: ID!\n $updatePayload: UpdateObjectInput!\n ) {\n updateOneObject(input: { id: $idToUpdate, update: $updatePayload }) {\n id\n dataSourceId\n nameSingular\n namePlural\n labelSingular\n labelPlural\n description\n icon\n isCustom\n isActive\n createdAt\n updatedAt\n }\n }\n": types.UpdateOneMetadataObjectDocument, + "\n mutation DeleteOneMetadataObject($idToDelete: ID!) {\n deleteOneObject(input: { id: $idToDelete }) {\n id\n dataSourceId\n nameSingular\n namePlural\n labelSingular\n labelPlural\n description\n icon\n isCustom\n isActive\n createdAt\n updatedAt\n }\n }\n": types.DeleteOneMetadataObjectDocument, + "\n mutation DeleteOneMetadataField($idToDelete: ID!) {\n deleteOneField(input: { id: $idToDelete }) {\n id\n type\n name\n label\n description\n icon\n placeholder\n isCustom\n isActive\n isNullable\n createdAt\n updatedAt\n }\n }\n": types.DeleteOneMetadataFieldDocument, "\n query MetadataObjects {\n objects {\n edges {\n node {\n id\n dataSourceId\n nameSingular\n namePlural\n labelSingular\n labelPlural\n description\n icon\n isCustom\n isActive\n createdAt\n updatedAt\n fields {\n edges {\n node {\n id\n type\n name\n label\n description\n icon\n placeholder\n isCustom\n isActive\n isNullable\n createdAt\n updatedAt\n }\n }\n pageInfo {\n hasNextPage\n hasPreviousPage\n startCursor\n endCursor\n }\n totalCount\n }\n }\n }\n pageInfo {\n hasNextPage\n hasPreviousPage\n startCursor\n endCursor\n }\n totalCount\n }\n }\n": types.MetadataObjectsDocument, }; @@ -37,7 +39,7 @@ export function graphql(source: string): unknown; /** * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ -export function graphql(source: "\n mutation CreateOneMetadataObject($input: CreateOneObjectInput!) {\n createOneObject(input: $input) {\n id\n }\n }\n"): (typeof documents)["\n mutation CreateOneMetadataObject($input: CreateOneObjectInput!) {\n createOneObject(input: $input) {\n id\n }\n }\n"]; +export function graphql(source: "\n mutation CreateOneMetadataObject($input: CreateOneObjectInput!) {\n createOneObject(input: $input) {\n id\n dataSourceId\n nameSingular\n namePlural\n labelSingular\n labelPlural\n description\n icon\n isCustom\n isActive\n createdAt\n updatedAt\n }\n }\n"): (typeof documents)["\n mutation CreateOneMetadataObject($input: CreateOneObjectInput!) {\n createOneObject(input: $input) {\n id\n dataSourceId\n nameSingular\n namePlural\n labelSingular\n labelPlural\n description\n icon\n isCustom\n isActive\n createdAt\n updatedAt\n }\n }\n"]; /** * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ @@ -45,11 +47,19 @@ export function graphql(source: "\n mutation CreateOneMetadataField($input: Cre /** * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ -export function graphql(source: "\n mutation UpdateOneMetadataField(\n $idToUpdate: ID!\n $updatePayload: UpdateFieldInput!\n ) {\n updateOneField(input: { id: $idToUpdate, update: $updatePayload }) {\n id\n }\n }\n"): (typeof documents)["\n mutation UpdateOneMetadataField(\n $idToUpdate: ID!\n $updatePayload: UpdateFieldInput!\n ) {\n updateOneField(input: { id: $idToUpdate, update: $updatePayload }) {\n id\n }\n }\n"]; +export function graphql(source: "\n mutation UpdateOneMetadataField(\n $idToUpdate: ID!\n $updatePayload: UpdateFieldInput!\n ) {\n updateOneField(input: { id: $idToUpdate, update: $updatePayload }) {\n id\n type\n name\n label\n description\n icon\n placeholder\n isCustom\n isActive\n isNullable\n createdAt\n updatedAt\n }\n }\n"): (typeof documents)["\n mutation UpdateOneMetadataField(\n $idToUpdate: ID!\n $updatePayload: UpdateFieldInput!\n ) {\n updateOneField(input: { id: $idToUpdate, update: $updatePayload }) {\n id\n type\n name\n label\n description\n icon\n placeholder\n isCustom\n isActive\n isNullable\n createdAt\n updatedAt\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 mutation UpdateOneMetadataObject(\n $idToUpdate: ID!\n $updatePayload: UpdateObjectInput!\n ) {\n updateOneObject(input: { id: $idToUpdate, update: $updatePayload }) {\n id\n }\n }\n"): (typeof documents)["\n mutation UpdateOneMetadataObject(\n $idToUpdate: ID!\n $updatePayload: UpdateObjectInput!\n ) {\n updateOneObject(input: { id: $idToUpdate, update: $updatePayload }) {\n id\n }\n }\n"]; +export function graphql(source: "\n mutation UpdateOneMetadataObject(\n $idToUpdate: ID!\n $updatePayload: UpdateObjectInput!\n ) {\n updateOneObject(input: { id: $idToUpdate, update: $updatePayload }) {\n id\n dataSourceId\n nameSingular\n namePlural\n labelSingular\n labelPlural\n description\n icon\n isCustom\n isActive\n createdAt\n updatedAt\n }\n }\n"): (typeof documents)["\n mutation UpdateOneMetadataObject(\n $idToUpdate: ID!\n $updatePayload: UpdateObjectInput!\n ) {\n updateOneObject(input: { id: $idToUpdate, update: $updatePayload }) {\n id\n dataSourceId\n nameSingular\n namePlural\n labelSingular\n labelPlural\n description\n icon\n isCustom\n isActive\n createdAt\n updatedAt\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 mutation DeleteOneMetadataObject($idToDelete: ID!) {\n deleteOneObject(input: { id: $idToDelete }) {\n id\n dataSourceId\n nameSingular\n namePlural\n labelSingular\n labelPlural\n description\n icon\n isCustom\n isActive\n createdAt\n updatedAt\n }\n }\n"): (typeof documents)["\n mutation DeleteOneMetadataObject($idToDelete: ID!) {\n deleteOneObject(input: { id: $idToDelete }) {\n id\n dataSourceId\n nameSingular\n namePlural\n labelSingular\n labelPlural\n description\n icon\n isCustom\n isActive\n createdAt\n updatedAt\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 mutation DeleteOneMetadataField($idToDelete: ID!) {\n deleteOneField(input: { id: $idToDelete }) {\n id\n type\n name\n label\n description\n icon\n placeholder\n isCustom\n isActive\n isNullable\n createdAt\n updatedAt\n }\n }\n"): (typeof documents)["\n mutation DeleteOneMetadataField($idToDelete: ID!) {\n deleteOneField(input: { id: $idToDelete }) {\n id\n type\n name\n label\n description\n icon\n placeholder\n isCustom\n isActive\n isNullable\n createdAt\n updatedAt\n }\n }\n"]; /** * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ diff --git a/front/src/generated-metadata/graphql.ts b/front/src/generated-metadata/graphql.ts index 03c4c53fb..794d888c7 100644 --- a/front/src/generated-metadata/graphql.ts +++ b/front/src/generated-metadata/graphql.ts @@ -635,18 +635,15 @@ export type UpdateFieldInput = { description?: InputMaybe; icon?: InputMaybe; isActive?: InputMaybe; - label: Scalars['String']['input']; - name: Scalars['String']['input']; + label?: InputMaybe; }; export type UpdateObjectInput = { description?: InputMaybe; icon?: InputMaybe; isActive?: InputMaybe; - labelPlural: Scalars['String']['input']; - labelSingular: Scalars['String']['input']; - namePlural: Scalars['String']['input']; - nameSingular: Scalars['String']['input']; + labelPlural?: InputMaybe; + labelSingular?: InputMaybe; }; export type UpdateOneFieldInput = { @@ -868,7 +865,7 @@ export type CreateOneMetadataObjectMutationVariables = Exact<{ }>; -export type CreateOneMetadataObjectMutation = { __typename?: 'Mutation', createOneObject: { __typename?: 'object', id: string } }; +export type CreateOneMetadataObjectMutation = { __typename?: 'Mutation', createOneObject: { __typename?: 'object', id: string, dataSourceId: string, nameSingular: string, namePlural: string, labelSingular: string, labelPlural: string, description?: string | null, icon?: string | null, isCustom: boolean, isActive: boolean, createdAt: any, updatedAt: any } }; export type CreateOneMetadataFieldMutationVariables = Exact<{ input: CreateOneFieldInput; @@ -883,7 +880,7 @@ export type UpdateOneMetadataFieldMutationVariables = Exact<{ }>; -export type UpdateOneMetadataFieldMutation = { __typename?: 'Mutation', updateOneField: { __typename?: 'field', id: string } }; +export type UpdateOneMetadataFieldMutation = { __typename?: 'Mutation', updateOneField: { __typename?: 'field', id: string, type: string, name: string, label: string, description?: string | null, icon?: string | null, placeholder?: string | null, isCustom: boolean, isActive: boolean, isNullable: boolean, createdAt: any, updatedAt: any } }; export type UpdateOneMetadataObjectMutationVariables = Exact<{ idToUpdate: Scalars['ID']['input']; @@ -891,7 +888,21 @@ export type UpdateOneMetadataObjectMutationVariables = Exact<{ }>; -export type UpdateOneMetadataObjectMutation = { __typename?: 'Mutation', updateOneObject: { __typename?: 'object', id: string } }; +export type UpdateOneMetadataObjectMutation = { __typename?: 'Mutation', updateOneObject: { __typename?: 'object', id: string, dataSourceId: string, nameSingular: string, namePlural: string, labelSingular: string, labelPlural: string, description?: string | null, icon?: string | null, isCustom: boolean, isActive: boolean, createdAt: any, updatedAt: any } }; + +export type DeleteOneMetadataObjectMutationVariables = Exact<{ + idToDelete: Scalars['ID']['input']; +}>; + + +export type DeleteOneMetadataObjectMutation = { __typename?: 'Mutation', deleteOneObject: { __typename?: 'ObjectDeleteResponse', id?: string | null, dataSourceId?: string | null, nameSingular?: string | null, namePlural?: string | null, labelSingular?: string | null, labelPlural?: string | null, description?: string | null, icon?: string | null, isCustom?: boolean | null, isActive?: boolean | null, createdAt?: any | null, updatedAt?: any | null } }; + +export type DeleteOneMetadataFieldMutationVariables = Exact<{ + idToDelete: Scalars['ID']['input']; +}>; + + +export type DeleteOneMetadataFieldMutation = { __typename?: 'Mutation', deleteOneField: { __typename?: 'FieldDeleteResponse', id?: string | null, type?: string | null, name?: string | null, label?: string | null, description?: string | null, icon?: string | null, placeholder?: string | null, isCustom?: boolean | null, isActive?: boolean | null, isNullable?: boolean | null, createdAt?: any | null, updatedAt?: any | null } }; export type MetadataObjectsQueryVariables = Exact<{ [key: string]: never; }>; @@ -899,8 +910,10 @@ export type MetadataObjectsQueryVariables = Exact<{ [key: string]: never; }>; export type MetadataObjectsQuery = { __typename?: 'Query', objects: { __typename?: 'ObjectConnection', totalCount: number, edges: Array<{ __typename?: 'objectEdge', node: { __typename?: 'object', id: string, dataSourceId: string, nameSingular: string, namePlural: string, labelSingular: string, labelPlural: string, description?: string | null, icon?: string | null, isCustom: boolean, isActive: boolean, createdAt: any, updatedAt: any, fields: { __typename?: 'ObjectFieldsConnection', totalCount: number, edges: Array<{ __typename?: 'fieldEdge', node: { __typename?: 'field', id: string, type: string, name: string, label: string, description?: string | null, icon?: string | null, placeholder?: string | null, isCustom: boolean, isActive: boolean, isNullable: boolean, createdAt: any, updatedAt: any } }>, pageInfo: { __typename?: 'PageInfo', hasNextPage?: boolean | null, hasPreviousPage?: boolean | null, startCursor?: any | null, endCursor?: any | null } } } }>, pageInfo: { __typename?: 'PageInfo', hasNextPage?: boolean | null, hasPreviousPage?: boolean | null, startCursor?: any | null, endCursor?: any | null } } }; -export const CreateOneMetadataObjectDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"CreateOneMetadataObject"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"CreateOneObjectInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"createOneObject"},"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; +export const CreateOneMetadataObjectDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"CreateOneMetadataObject"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"CreateOneObjectInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"createOneObject"},"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"}},{"kind":"Field","name":{"kind":"Name","value":"dataSourceId"}},{"kind":"Field","name":{"kind":"Name","value":"nameSingular"}},{"kind":"Field","name":{"kind":"Name","value":"namePlural"}},{"kind":"Field","name":{"kind":"Name","value":"labelSingular"}},{"kind":"Field","name":{"kind":"Name","value":"labelPlural"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"icon"}},{"kind":"Field","name":{"kind":"Name","value":"isCustom"}},{"kind":"Field","name":{"kind":"Name","value":"isActive"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}}]}}]}}]} as unknown as DocumentNode; export const CreateOneMetadataFieldDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"CreateOneMetadataField"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"CreateOneFieldInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"createOneField"},"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"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"icon"}},{"kind":"Field","name":{"kind":"Name","value":"placeholder"}},{"kind":"Field","name":{"kind":"Name","value":"isCustom"}},{"kind":"Field","name":{"kind":"Name","value":"isActive"}},{"kind":"Field","name":{"kind":"Name","value":"isNullable"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}}]}}]}}]} as unknown as DocumentNode; -export const UpdateOneMetadataFieldDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateOneMetadataField"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"idToUpdate"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"updatePayload"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"UpdateFieldInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"updateOneField"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"idToUpdate"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"update"},"value":{"kind":"Variable","name":{"kind":"Name","value":"updatePayload"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode; -export const UpdateOneMetadataObjectDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateOneMetadataObject"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"idToUpdate"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"updatePayload"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"UpdateObjectInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"updateOneObject"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"idToUpdate"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"update"},"value":{"kind":"Variable","name":{"kind":"Name","value":"updatePayload"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode; +export const UpdateOneMetadataFieldDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateOneMetadataField"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"idToUpdate"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"updatePayload"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"UpdateFieldInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"updateOneField"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"idToUpdate"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"update"},"value":{"kind":"Variable","name":{"kind":"Name","value":"updatePayload"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"icon"}},{"kind":"Field","name":{"kind":"Name","value":"placeholder"}},{"kind":"Field","name":{"kind":"Name","value":"isCustom"}},{"kind":"Field","name":{"kind":"Name","value":"isActive"}},{"kind":"Field","name":{"kind":"Name","value":"isNullable"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}}]}}]}}]} as unknown as DocumentNode; +export const UpdateOneMetadataObjectDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateOneMetadataObject"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"idToUpdate"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"updatePayload"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"UpdateObjectInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"updateOneObject"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"idToUpdate"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"update"},"value":{"kind":"Variable","name":{"kind":"Name","value":"updatePayload"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"dataSourceId"}},{"kind":"Field","name":{"kind":"Name","value":"nameSingular"}},{"kind":"Field","name":{"kind":"Name","value":"namePlural"}},{"kind":"Field","name":{"kind":"Name","value":"labelSingular"}},{"kind":"Field","name":{"kind":"Name","value":"labelPlural"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"icon"}},{"kind":"Field","name":{"kind":"Name","value":"isCustom"}},{"kind":"Field","name":{"kind":"Name","value":"isActive"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}}]}}]}}]} as unknown as DocumentNode; +export const DeleteOneMetadataObjectDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"DeleteOneMetadataObject"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"idToDelete"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"deleteOneObject"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"idToDelete"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"dataSourceId"}},{"kind":"Field","name":{"kind":"Name","value":"nameSingular"}},{"kind":"Field","name":{"kind":"Name","value":"namePlural"}},{"kind":"Field","name":{"kind":"Name","value":"labelSingular"}},{"kind":"Field","name":{"kind":"Name","value":"labelPlural"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"icon"}},{"kind":"Field","name":{"kind":"Name","value":"isCustom"}},{"kind":"Field","name":{"kind":"Name","value":"isActive"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}}]}}]}}]} as unknown as DocumentNode; +export const DeleteOneMetadataFieldDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"DeleteOneMetadataField"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"idToDelete"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"deleteOneField"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"idToDelete"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"icon"}},{"kind":"Field","name":{"kind":"Name","value":"placeholder"}},{"kind":"Field","name":{"kind":"Name","value":"isCustom"}},{"kind":"Field","name":{"kind":"Name","value":"isActive"}},{"kind":"Field","name":{"kind":"Name","value":"isNullable"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}}]}}]}}]} as unknown as DocumentNode; export const MetadataObjectsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"MetadataObjects"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"objects"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"edges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"node"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"dataSourceId"}},{"kind":"Field","name":{"kind":"Name","value":"nameSingular"}},{"kind":"Field","name":{"kind":"Name","value":"namePlural"}},{"kind":"Field","name":{"kind":"Name","value":"labelSingular"}},{"kind":"Field","name":{"kind":"Name","value":"labelPlural"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"icon"}},{"kind":"Field","name":{"kind":"Name","value":"isCustom"}},{"kind":"Field","name":{"kind":"Name","value":"isActive"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"fields"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"edges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"node"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"icon"}},{"kind":"Field","name":{"kind":"Name","value":"placeholder"}},{"kind":"Field","name":{"kind":"Name","value":"isCustom"}},{"kind":"Field","name":{"kind":"Name","value":"isActive"}},{"kind":"Field","name":{"kind":"Name","value":"isNullable"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"pageInfo"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"hasNextPage"}},{"kind":"Field","name":{"kind":"Name","value":"hasPreviousPage"}},{"kind":"Field","name":{"kind":"Name","value":"startCursor"}},{"kind":"Field","name":{"kind":"Name","value":"endCursor"}}]}},{"kind":"Field","name":{"kind":"Name","value":"totalCount"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"pageInfo"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"hasNextPage"}},{"kind":"Field","name":{"kind":"Name","value":"hasPreviousPage"}},{"kind":"Field","name":{"kind":"Name","value":"startCursor"}},{"kind":"Field","name":{"kind":"Name","value":"endCursor"}}]}},{"kind":"Field","name":{"kind":"Name","value":"totalCount"}}]}}]}}]} as unknown as DocumentNode; \ No newline at end of file diff --git a/front/src/index.tsx b/front/src/index.tsx index d6a735372..2a58dabae 100644 --- a/front/src/index.tsx +++ b/front/src/index.tsx @@ -17,7 +17,6 @@ import '@emotion/react'; import { PageChangeEffect } from './effect-components/PageChangeEffect'; import { ApolloMetadataClientProvider } from './modules/metadata/components/ApolloMetadataClientProvider'; -import { FetchMetadataEffect } from './modules/metadata/components/FetchMetadataEffect'; import { App } from './App'; import './index.css'; @@ -36,7 +35,6 @@ root.render( - diff --git a/front/src/modules/metadata/components/FetchMetadataEffect.tsx b/front/src/modules/metadata/components/FetchMetadataEffect.tsx deleted file mode 100644 index 029950405..000000000 --- a/front/src/modules/metadata/components/FetchMetadataEffect.tsx +++ /dev/null @@ -1,110 +0,0 @@ -import { useEffect, useState } from 'react'; -import { useRecoilState } from 'recoil'; - -import { isFlexibleBackendEnabledState } from '@/client-config/states/isFlexibleBackendEnabledState'; -import { MetadataObjectsQuery } from '~/generated-metadata/graphql'; - -import { FIND_MANY_METADATA_OBJECTS } from '../graphql/queries'; -import { useApolloMetadataClient } from '../hooks/useApolloMetadataClient'; -import { useCreateOneObject } from '../hooks/useCreateOneObject'; -import { useFindManyObjects } from '../hooks/useFindManyObjects'; -import { useSeedCustomObjectsTemp } from '../hooks/useSeedCustomObjectsTemp'; -import { metadataObjectsState } from '../states/metadataObjectsState'; -import { MetadataObject } from '../types/MetadataObject'; - -export const FetchMetadataEffect = () => { - const [metadataObjects, setMetadataObjects] = - useRecoilState(metadataObjectsState); - const [isFlexibleBackendEnabled] = useRecoilState( - isFlexibleBackendEnabledState, - ); - const apolloMetadataClient = useApolloMetadataClient(); - - const seedCustomObjectsTemp = useSeedCustomObjectsTemp(); - - const { createOneObject } = useCreateOneObject({ - objectNamePlural: 'suppliers', - }); - - const { objects: suppliers, loading } = useFindManyObjects({ - objectNamePlural: 'suppliers', - }); - - const [created, setCreated] = useState(false); - - useEffect(() => { - if (!created && !loading && suppliers.length === 0 && createOneObject) { - createOneObject({ - name: 'Supplier 1', - city: 'City 1', - }); - - createOneObject({ - name: 'Supplier 2', - city: 'City 2', - }); - - createOneObject({ - name: 'Supplier 3', - city: 'City 3', - }); - - setCreated(true); - } - }, [suppliers, createOneObject, loading, created]); - - useEffect(() => { - if (!isFlexibleBackendEnabled) return; - - (async () => { - if (apolloMetadataClient && metadataObjects.length === 0) { - const objects = await apolloMetadataClient.query({ - query: FIND_MANY_METADATA_OBJECTS, - }); - - if ( - objects.data.objects.edges.length > 0 && - metadataObjects.length === 0 - ) { - const formattedObjects: MetadataObject[] = - objects.data.objects.edges.map((object) => ({ - ...object.node, - fields: object.node.fields.edges.map((field) => field.node), - })); - setMetadataObjects(formattedObjects); - } else if ( - objects.data.objects.edges.length === 0 && - metadataObjects.length === 0 - ) { - try { - await seedCustomObjectsTemp(); - - const objects = - await apolloMetadataClient.query({ - query: FIND_MANY_METADATA_OBJECTS, - }); - - const formattedObjects: MetadataObject[] = - objects.data.objects.edges.map((object) => ({ - ...object.node, - fields: object.node.fields.edges.map((field) => field.node), - })); - - setMetadataObjects(formattedObjects); - } catch (error) { - // eslint-disable-next-line no-console - console.log(error); - } - } - } - })(); - }, [ - isFlexibleBackendEnabled, - metadataObjects, - setMetadataObjects, - apolloMetadataClient, - seedCustomObjectsTemp, - ]); - - return <>; -}; diff --git a/front/src/modules/metadata/components/MetadataObjectNavItems.tsx b/front/src/modules/metadata/components/MetadataObjectNavItems.tsx index 18dcb4c61..179fcfe85 100644 --- a/front/src/modules/metadata/components/MetadataObjectNavItems.tsx +++ b/front/src/modules/metadata/components/MetadataObjectNavItems.tsx @@ -1,29 +1,58 @@ +import { useNavigate } from 'react-router-dom'; + +import { IconArchive } from '@/ui/display/icon'; import { IconBuildingSkyscraper } from '@/ui/display/icon'; +import { Button } from '@/ui/input/button/components/Button'; +import { IconButton } from '@/ui/input/button/components/IconButton'; import NavItem from '@/ui/navigation/navbar/components/NavItem'; -import { useGetClientConfigQuery } from '~/generated/graphql'; import { capitalize } from '~/utils/string/capitalize'; +import { useCreateNewTempsCustomObject } from '../hooks/useCreateNewTempCustomObject'; +import { useDeleteOneMetadataObject } from '../hooks/useDeleteOneMetadataObject'; import { useFindManyMetadataObjects } from '../hooks/useFindManyMetadataObjects'; export const MetadataObjectNavItems = () => { - const { data } = useGetClientConfigQuery(); - const { metadataObjects } = useFindManyMetadataObjects(); - const isFlexibleBackendEnabled = data?.clientConfig?.flexibleBackendEnabled; + // eslint-disable-next-line no-console + console.log({ + metadataObjects, + }); - if (!isFlexibleBackendEnabled) return <>; + const createNewTempCustomObject = useCreateNewTempsCustomObject(); + + const { deleteOneMetadataObject } = useDeleteOneMetadataObject(); + + const navigate = useNavigate(); return ( <> - {metadataObjects.map((metadataObject) => ( - - ))} +