@evenicanpm/admin-integrate 1.3.0 → 1.6.0

package/documents/Endpoint/list.ts

@@ -20,3 +20,11 @@ const GET_DATA_DESCRIPTIONS = gql`
     }
   }
 `;
+
+const CHECK_UNIQUE_IDENTIFIER = gql`
+  query CheckUniqueIdentifier($uniqueIdentifier: String) {
+    checkUniqueIdentifier(uniqueIdentifier: $uniqueIdentifier) {
+      isUnique
+    }
+  }
+`;

package/documents/Process/get-process-details.ts

@@ -1,5 +1,4 @@
 import { gql } from "graphql-request";
-import { PROCESS_FRAGMENT_TASKS } from "./fragments";
 
 const _GET_PROCESS_BY_ID = gql`
   query GetProcessById($id: ID!) {

package/documents/ProcessConfig/fragments.ts

@@ -50,7 +50,7 @@ export const ENDPOINT_EXPORT_FRAGMENT = gql`
     StagingTableSchema
     StagingTableName
     Metadata
-    Subscriptions {
+    Queues {
       EndpointSubscriptionId
       EndpointQueueId
       TargetEndpoint

package/documents/ProcessExport/read.ts

@@ -0,0 +1,108 @@
+import { gql } from "graphql-request";
+
+const GET_CONFIGURATION_EXPORT = gql`
+  query ConfigurationExport($processId: ID, $includeIds: Boolean, $useSourceEndpoint: Boolean) {
+  configurationExport(processId: $processId, includeIds: $includeIds, useSourceEndpoint: $useSourceEndpoint) {
+    DepotGroups {
+      DepotGroupId
+      DepotGroup
+    }
+    Depots {
+      DepotId
+      Depot
+      DepotGroup
+    }
+    Entities {
+      EntityId
+      Entity
+      Name
+      EntityType
+      SourceEntityName
+      ExtendedFields
+      EntitySchema
+      EnableParse
+      EntityFields {
+        EntityFieldId
+        EntityField
+        FieldType
+        Length
+        Sort
+        IsKey
+        IsRequired
+        IsEditable
+        Path
+      }
+    }
+    Endpoints {
+      EndpointId
+      Endpoint
+      Name
+      Depot
+      EndpointType
+      Entity
+      StagingTableSchema
+      StagingTableName
+      Metadata
+      Queues {
+        EndpointSubscriptionId
+        EndpointQueueId
+        TargetEndpoint
+        SourceEndpoint
+        Transformations {
+          TransformationType
+          JSLT
+          Params
+          Sort
+          Enabled
+        }
+      }
+      TemplateConfig
+      ProcessTemplateId
+    }
+    Processes {
+      ProcessId
+      Process
+      Name
+      OrchestratorInstanceId
+      MaxConcurrentExecutions
+      AllowParallelProcessExecution
+      AllowParallelTaskExecution
+      MaxRetryAttempts
+      ProcessScheduleGroup {
+        ProcessScheduleGroupId
+        IsDisabled
+        ProcessScheduleGroup
+        Name
+        ProcessScheduleId
+        ProcessSchedule
+        SchedulePeriod
+        Sort
+        IsMonday
+        IsTuesday
+        IsWednesday
+        IsThursday
+        IsFriday
+        IsSaturday
+        IsSunday
+        StartDate
+        EndDate
+      }
+      ProcessIcon
+      IsTriggered
+      ProcessTasks {
+        ProcessTaskId
+        ProcessTask
+        Name
+        Endpoint
+        ProcessTaskType
+        OrchestrationType
+        PreExecutionProcedure
+        PostExecutionProcedure
+        Sort
+        Params
+        ParallelProcessingGroup
+      }
+    }
+  }
+}
+`;

package/documents/ProcessTask/fragments.ts

@@ -241,7 +241,10 @@ export const PROCESS_TASK_FRAGMENT_XL = gql`
               inputType
               defaultValue
               validationRegex
-              options
+              options {
+                id
+                label
+              }
               sort
               isRequired
             }

package/documents/ProcessTemplate/fragments.ts

@@ -18,6 +18,7 @@ export const PROCESS_TEMPLATE_FRAGMENT = gql`
         fieldName
         inputType
         isRequired
+        isEditableAfterCreate
         sort
         placeholder
         helpText
@@ -25,6 +26,7 @@ export const PROCESS_TEMPLATE_FRAGMENT = gql`
         queryName
         created
         modified
+        defaultValue
         schemas {
           id
           fieldKey
@@ -32,7 +34,10 @@ export const PROCESS_TEMPLATE_FRAGMENT = gql`
           inputType
           defaultValue
           validationRegex
-          options
+          options {
+            id
+            label
+          }
           sort
           isRequired
         }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@evenicanpm/admin-integrate",
-	"version": "1.3.0",
+	"version": "1.6.0",
 	"description": "e4Integrate Admin Panel",
 	"type": "module",
 	"scripts": {
@@ -20,5 +20,5 @@
 		"elkjs": "^0.10.0",
 		"lodash": "^4.17.21"
 	},
-	"gitHead": "074f33378006dfc21ceb49456806a18dbb6e91ad"
+	"gitHead": "9b18fe6294cc0e57332ec8703825a609ac7b73b2"
 }

package/src/api/configuration/queries/configuration-export.query.ts

@@ -0,0 +1,48 @@
+import type { ConfigurationExportQueryVariables } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import {
+	type QueryClient,
+	type UseQueryOptions,
+	useQuery,
+} from "@tanstack/react-query";
+import { queryFn } from "./configuration-export.server";
+
+export const buildConfigurationExportQueryKey = {
+	all: () => ["configurationExport"] as const,
+	byInput: (variables?: ConfigurationExportQueryVariables) => [
+		"configurationExport",
+		variables,
+	],
+};
+
+export const configurationExport = {
+	queryKey: buildConfigurationExportQueryKey.all(),
+
+	prefetch: (
+		queryClient: QueryClient,
+		variables: ConfigurationExportQueryVariables,
+	) =>
+		queryClient.prefetchQuery({
+			queryKey: buildConfigurationExportQueryKey.byInput(variables),
+			queryFn: () => queryFn(variables),
+		}),
+
+	fetchData: async (
+		queryClient: QueryClient,
+		variables: ConfigurationExportQueryVariables,
+	) => {
+		return await queryClient.fetchQuery({
+			queryKey: buildConfigurationExportQueryKey.byInput(variables),
+			queryFn: () => queryFn(variables),
+		});
+	},
+
+	useData: (
+		variables: ConfigurationExportQueryVariables,
+		options?: UseQueryOptions,
+	) =>
+		useQuery({
+			queryKey: buildConfigurationExportQueryKey.byInput(variables),
+			queryFn: () => queryFn(variables),
+			...options,
+		}),
+};

package/src/api/configuration/queries/configuration-export.server.ts

@@ -0,0 +1,9 @@
+"use server";
+import type { ConfigurationExportQueryVariables } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import createGraphqlclient from "@evenicanpm/admin-core/api/sdk/graphqlClient.client";
+
+export const queryFn = async (variables: ConfigurationExportQueryVariables) => {
+	const sdk = await createGraphqlclient();
+	const { data } = await sdk.ConfigurationExport(variables);
+	return data;
+};

package/src/api/configuration/queries/index.ts

@@ -0,0 +1 @@
+export { configurationExport } from "./configuration-export.query";

package/src/api/process/mutations/copy-process.mutation.ts

@@ -1,9 +1,9 @@
 import type { CopyProcessMutationVariables } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
 import { getQueryClient } from "@evenicanpm/admin-core/api/sdk/get-query-client";
-import { buildProcessByIdQueryKey } from "@evenicanpm/admin-integrate/api/process/queries/get-process-by-id.query";
 import { buildProcessScheduleGroupDetailsQueryKey } from "@evenicanpm/admin-integrate/api/scheduler/queries/get-process-schedule-group-details.query";
 import { buildScheduledProcessesQueryKey } from "@evenicanpm/admin-integrate/api/scheduler/queries/get-scheduled-processes.query";
 import { useMutation } from "@tanstack/react-query";
+import { buildConfigurationExportQueryKey } from "../../../api/configuration/queries/configuration-export.query";
 import { mutationFn } from "./copy-process.server";
 
 export const buildCopyProcessMutationKey = {
@@ -33,10 +33,7 @@ export const copyProcess = () => {
 					queryKey: buildProcessScheduleGroupDetailsQueryKey.all(),
 				}),
 				queryClient.invalidateQueries({
-					queryKey: buildProcessByIdQueryKey.all(),
-				}),
-				queryClient.invalidateQueries({
-					queryKey: buildProcessByIdQueryKey.allWithTasks(),
+					queryKey: buildConfigurationExportQueryKey.all(),
 				}),
 			]);
 		},

package/src/api/process-config/mutation/process-config-import.mutation.ts

@@ -1,6 +1,7 @@
 import type { ConfigurationImportMutationVariables } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { queryFn } from "./process-config-import.server";
+import { buildConfigurationExportQueryKey } from "../../../api/configuration/queries/configuration-export.query";
 
 export const buildProcessScheduleGroupDetailsQueryKey = {
 	all: () => ["configurationImport"] as const,
@@ -24,6 +25,14 @@ export const processConfigImport = () => {
 			queryClient.invalidateQueries({
 				queryKey: ["getScheduledProcesses"],
 			});
+
+			queryClient.invalidateQueries({
+				queryKey: buildConfigurationExportQueryKey.all(),
+			});
+
+			queryClient.invalidateQueries({
+				queryKey: ["getProcessTaskById"],
+			});
 		},
 
 		onError: (error) => {

package/src/api/process-task/queries/get-process-task-by-id.query.ts

@@ -7,6 +7,7 @@ import {
 import { queryFn } from "./get-process-task-by-id.server";
 
 export const buildProcessTaskByIdQueryKey = {
+	all: () => ["getProcessTaskById"] as const,
 	byInput: (variables?: GetProcessTaskByIdQueryVariables) => [
 		"getProcessTaskById",
 		variables,

package/src/api/scheduler/mutation/create-process-schedule-group-details.mutation.ts

@@ -1,7 +1,7 @@
 import type { CreateProcessScheduleGroupDetailsMutationVariables } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
 import { getQueryClient } from "@evenicanpm/admin-core/api/sdk/get-query-client";
-import { buildProcessByIdQueryKey } from "@evenicanpm/admin-integrate/api/process/queries/get-process-by-id.query";
 import { useMutation } from "@tanstack/react-query";
+import { buildConfigurationExportQueryKey } from "../../../api/configuration/queries/configuration-export.query";
 import { buildProcessScheduleGroupDetailsQueryKey } from "../queries/get-process-schedule-group-details.query";
 import { buildScheduledProcessesQueryKey } from "../queries/get-scheduled-processes.query";
 import { queryFn } from "./create-process-schedule-group-details.server";
@@ -35,7 +35,7 @@ export const createProcessScheduleGroupDetails = () => {
 					queryKey: buildProcessScheduleGroupDetailsQueryKey.all(),
 				}),
 				queryClient.invalidateQueries({
-					queryKey: buildProcessByIdQueryKey.all(),
+					queryKey: buildConfigurationExportQueryKey.all(),
 				}),
 			]);
 		},

package/src/api/scheduler/mutation/update-process-schedule-group-details.mutation.ts

@@ -1,7 +1,7 @@
 import type { UpdateProcessScheduleGroupDetailsMutationVariables } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
 import { getQueryClient } from "@evenicanpm/admin-core/api/sdk/get-query-client";
-import { buildProcessByIdQueryKey } from "@evenicanpm/admin-integrate/api/process/queries/get-process-by-id.query";
 import { useMutation } from "@tanstack/react-query";
+import { buildConfigurationExportQueryKey } from "../../../api/configuration/queries/configuration-export.query";
 import { buildProcessScheduleGroupDetailsQueryKey } from "../queries/get-process-schedule-group-details.query";
 import { buildScheduledProcessesQueryKey } from "../queries/get-scheduled-processes.query";
 import { queryFn } from "./update-process-schedule-group-details.server";
@@ -35,7 +35,7 @@ export const updateProcessScheduleGroupDetails = () => {
 					queryKey: buildProcessScheduleGroupDetailsQueryKey.all(),
 				}),
 				queryClient.invalidateQueries({
-					queryKey: buildProcessByIdQueryKey.all(),
+					queryKey: buildConfigurationExportQueryKey.all(),
 				}),
 			]);
 		},

package/src/api/templates/queries/template-input-search.query.ts

@@ -1,4 +1,5 @@
 import type {
+	CheckUniqueIdentifierQueryVariables,
 	GetDataDescriptionsQueryVariables,
 	GetSourceEndpointsQueryVariables,
 } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
@@ -18,6 +19,10 @@ export const buildTemplateSearchQueryKey = {
 		"getDataDescriptions",
 		variables,
 	],
+	checkUniqueIdentifier: (variables: CheckUniqueIdentifierQueryVariables) => [
+		"checkUniqueIdentifier",
+		variables,
+	],
 };
 
 export const templateInputSearch = {

package/src/api/templates/queries/template-input-search.server.ts

@@ -1,5 +1,6 @@
 "use server";
 import type {
+	CheckUniqueIdentifierQueryVariables,
 	GetDataDescriptionsQueryVariables,
 	GetSourceEndpointsQueryVariables,
 } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
@@ -10,7 +11,7 @@ import type {
 } from "./types";
 
 export const queryFn = async (
-	variables: TemplateInputSearchQueryVariables,
+	variables: TemplateInputSearchQueryVariables | string,
 	queryKey: TemplateInputSearchQueryKey,
 ) => {
 	const sdk = await createGraphqlclient();
@@ -28,6 +29,12 @@ export const queryFn = async (
 			);
 			return data;
 		}
+		case "checkUniqueIdentifier": {
+			const { data } = await sdk.CheckUniqueIdentifier(
+				variables as CheckUniqueIdentifierQueryVariables,
+			);
+			return data;
+		}
 		default: {
 			throw new Error(`queryKey "${queryKey}" invalid`);
 		}

package/src/api/templates/queries/types.ts

@@ -3,19 +3,24 @@ import type {
 	GetDataDescriptionsQueryVariables,
 	GetSourceEndpointsQuery,
 	GetSourceEndpointsQueryVariables,
+	CheckUniqueIdentifierQuery,
+	CheckUniqueIdentifierQueryVariables,
 } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
 
 export type TemplateInputSearchQueryVariables =
 	| GetSourceEndpointsQueryVariables
-	| GetDataDescriptionsQueryVariables;
+	| GetDataDescriptionsQueryVariables
+	| CheckUniqueIdentifierQueryVariables;
 
 export type TemplateInputSearchQuery =
 	| GetSourceEndpointsQuery
-	| GetDataDescriptionsQuery;
+	| GetDataDescriptionsQuery
+	| CheckUniqueIdentifierQuery;
 
 export type TemplateInputSearchQueryKey =
 	| "getSourceEndpoints"
-	| "getDataDescriptions";
+	| "getDataDescriptions"
+	| "checkUniqueIdentifier";
 
 export const isTemplateInputSearchQueryKey = (
 	qn: string,
@@ -23,6 +28,7 @@ export const isTemplateInputSearchQueryKey = (
 	const keys: TemplateInputSearchQueryKey[] = [
 		"getSourceEndpoints",
 		"getDataDescriptions",
+		"checkUniqueIdentifier",
 	];
 	return keys.includes(qn as TemplateInputSearchQueryKey);
 };

package/src/components/breadcrumbs/breadcrumbs.tsx

@@ -19,7 +19,7 @@ type Props = {
 	breadcrumbs: Crumb[];
 };
 
-export default function IntegrateBreadcrumbs({ breadcrumbs }: Props) {
+export default function IntegrateBreadcrumbs({ breadcrumbs }: Readonly<Props>) {
 	const router = useRouter();
 	const pathname = usePathname();
 

package/src/components/core/date-time-popover.tsx

@@ -15,7 +15,7 @@ interface Props extends PopoverProps {
 export default function DateTimePopover({
 	dateIsoString,
 	...popoverProps
-}: Props) {
+}: Readonly<Props>) {
 	const theme = useTheme();
 	const styles = getStyles(theme);
 

package/src/components/core/drawer-buttons.tsx

@@ -7,7 +7,7 @@ interface Props {
 	children?: React.ReactNode; // e.g. add button, save button, etc.
 }
 
-export default function DrawerButtons(props: Props) {
+export default function DrawerButtons(props: Readonly<Props>) {
 	const theme = useTheme();
 	const styles = getStyles(theme);
 

package/src/components/core/edited-typography.tsx

@@ -5,7 +5,7 @@ interface Props {
 	edited: boolean;
 }
 
-export default function EditedTypography(props: Props) {
+export default function EditedTypography(props: Readonly<Props>) {
 	const t = useTranslations("Integrate.Scheduler");
 
 	return (

package/src/components/core/title-edit.tsx

@@ -20,7 +20,7 @@ interface Props {
 	variant?: TypographyOwnProps["variant"];
 }
 
-export default function TitleEdit(props: Props) {
+export default function TitleEdit(props: Readonly<Props>) {
 	const theme = useTheme();
 	const styles = getStyles(theme);
 
@@ -41,6 +41,8 @@ export default function TitleEdit(props: Props) {
 	};
 
 	const handleConfirm = () => {
+		// NOSONAR - regex replacement requires replace, not replaceAll
+		// replaceAll - Doesn’t properly handle \s+ logic - Misleading Sonar suggestion
 		const trimmed = input.trim().replace(/\s+/g, " ");
 		props.onConfirm(trimmed);
 		setInput(trimmed);
@@ -70,11 +72,7 @@ export default function TitleEdit(props: Props) {
 				justifyContent="flex-start"
 				alignItems="center"
 			>
-				{!editMode ? (
-					<Typography sx={styles.name} variant={props.variant || "h6"}>
-						{props.title}
-					</Typography>
-				) : (
+				{editMode ? (
 					<TextField
 						sx={styles.input}
 						fullWidth={props.fullWidth}
@@ -84,15 +82,15 @@ export default function TitleEdit(props: Props) {
 						onChange={handleChange}
 						onKeyDown={handleKeyDown}
 					/>
+				) : (
+					<Typography sx={styles.name} variant={props.variant || "h6"}>
+						{props.title}
+					</Typography>
 				)}
 			</Box>
 			{!props.readOnly && (
 				<Box display="flex" justifyContent="flex-end" alignItems="center">
-					{!editMode ? (
-						<IconButton onClick={handleClickEdit}>
-							<EditOutlined />
-						</IconButton>
-					) : (
+					{editMode ? (
 						<Stack direction="row" spacing={1}>
 							<OutlinedIconButton color="error" onClick={handleClose}>
 								<Clear />
@@ -105,6 +103,10 @@ export default function TitleEdit(props: Props) {
 								<Check />
 							</OutlinedIconButton>
 						</Stack>
+					) : (
+						<IconButton onClick={handleClickEdit}>
+							<EditOutlined />
+						</IconButton>
 					)}
 				</Box>
 			)}

package/src/components/dashboard-list/dashboard-list.tsx

@@ -95,7 +95,7 @@ const DashboardList: React.FC<Props> = (props: Props) => {
 						<TableBody>
 							{items.map((item, index) => (
 								<DashboardListRow
-									key={index}
+									key={`list-row-${index + 1}`}
 									item={item}
 									heading={props.heading}
 									enableBgColor={props.enableBgColor}

package/src/components/data-table/table-header.tsx

@@ -36,7 +36,7 @@ export default function TableHeader({
 	orderBy,
 	onRequestSort,
 	rowSx,
-}: Props) {
+}: Readonly<Props>) {
 	const theme = useTheme();
 	const styles = getStyles(theme);
 

package/src/components/data-table/table-skeleton.tsx

@@ -16,7 +16,7 @@ interface Props {
 	rowSx?: SxProps;
 }
 
-export default function TableSkeleton(props: Props) {
+export default function TableSkeleton(props: Readonly<Props>) {
 	const rangeArray: number[] = Array.from(
 		{ length: props.perPage },
 		(_, i) => i,

package/src/components/execution-history-drawer/execution-history-drawer.tsx

@@ -123,8 +123,7 @@ const ExecutionHistoryDrawer: React.FC<Props> = (props: Props) => {
 				</IconButton>
 			</Box>
 			{props.drawerOpen &&
-				props?.data?.processExecutionsByProcess?.nodes &&
-				props.data.processExecutionsByProcess.nodes.map((item) => (
+				props?.data?.processExecutionsByProcess?.nodes?.map((item) => (
 					<ExecutionsCard key={item?.id as string} item={item as Item} />
 				))}
 

package/src/components/header/integration-details-header.tsx

@@ -26,6 +26,7 @@ interface Props {
 	setName: React.Dispatch<React.SetStateAction<string>>;
 	onImportClick?: React.MouseEventHandler<HTMLButtonElement>;
 	onScheduleClick?: React.MouseEventHandler<HTMLButtonElement>;
+	onExecutionsClick?: React.MouseEventHandler<HTMLButtonElement>;
 	icon?: string;
 	children?: React.ReactNode; // buttons to go in header, e.g. save, cancel etc.
 	toolbar?: "enabled" | "disabled" | "hidden";
@@ -125,6 +126,9 @@ const IntegrationDetailsHeader: React.FC<Props> = (props: Props) => {
 								<Button
 									startIcon={<PlayArrowOutlined />}
 									disabled={props.toolbar === "disabled"}
+									onClick={(e) => {
+										if (props.onExecutionsClick) props.onExecutionsClick(e);
+									}}
 								>
 									{t("executions")}
 								</Button>

package/src/components/integration-list/list/integration-list-row.tsx

@@ -23,10 +23,10 @@ import {
 import { RedirectType, redirect } from "next/navigation";
 import type React from "react";
 import { useState } from "react";
-import type { integrationItem } from "./integration-list";
+import type { IntegrationItem } from "./integration-list";
 
 interface Props {
-	item: integrationItem;
+	item: IntegrationItem;
 	heading: Head[]; // for alignment
 	sx?: SxProps;
 	handleRedirect?: (id: string) => void;

package/src/components/integration-list/list/integration-list-table.tsx

@@ -2,12 +2,12 @@ import type { ProcessExecutionInput } from "@evenicanpm/admin-core/api/e4/graphq
 import { TableHeader } from "@evenicanpm/admin-integrate/components/data-table";
 import type { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
 import { type SxProps, Table, TableBody, TableContainer } from "@mui/material";
-import type { integrationItem } from "./integration-list";
+import type { IntegrationItem } from "./integration-list";
 import IntegrationListRow from "./integration-list-row";
 
 interface Props {
 	heading: Head[];
-	items: integrationItem[];
+	items: IntegrationItem[];
 	input: ProcessExecutionInput;
 	setInput: (newInput: ProcessExecutionInput) => void;
 	rowSx?: SxProps;
@@ -16,7 +16,7 @@ interface Props {
 	readOnly?: boolean;
 }
 
-export default function IntegrationListTable(props: Props) {
+export default function IntegrationListTable(props: Readonly<Props>) {
 	const handleRequestSort = (property: string) => {
 		const current = props.input.sort;
 		if (property === current) {

package/src/components/integration-list/list/integration-list.tsx

@@ -29,7 +29,7 @@ import { useEffect, useState } from "react";
 import IntegrationListTable from "./integration-list-table";
 
 // Returned from processExecutions query
-export interface integrationItem {
+export interface IntegrationItem {
 	isScheduled: 0 | 1;
 	isTriggered: 0 | 1;
 	id: string;
@@ -58,7 +58,7 @@ const IntegrationList: React.FC<Props> = (props: Props) => {
 	const theme = useTheme();
 	const styles = getStyles(theme);
 
-	const [items, setItems] = useState<integrationItem[]>([]);
+	const [items, setItems] = useState<IntegrationItem[]>([]);
 	const [page, setPage] = useState(
 		(props.input.skip ?? 0) / (props.input.top ?? 10) + 1,
 	);
@@ -104,7 +104,7 @@ const IntegrationList: React.FC<Props> = (props: Props) => {
 
 	useEffect(() => {
 		if (props.data?.processes?.nodes) {
-			setItems(props.data.processes.nodes as integrationItem[]);
+			setItems(props.data.processes.nodes as IntegrationItem[]);
 		}
 	}, [props.data]);