@evenicanpm/admin-integrate 1.2.0 → 1.2.2

package/documents/Process/fragments.ts

@@ -0,0 +1,13 @@
+import { gql } from "graphql-request";
+
+export const PROCESS_FRAGMENT_SM = gql`
+  fragment e4ProcessFragmentSM on Process {
+    name
+    code
+    id
+    modified
+    isScheduled
+    isTriggered
+    processIcon
+  }
+`;

package/documents/Process/list.ts

@@ -0,0 +1,27 @@
+import { gql } from "graphql-request";
+
+import { PROCESS_FRAGMENT_SM } from "./fragments";
+
+const GET_PROCESS = gql`
+  ${PROCESS_FRAGMENT_SM}
+  query GetProcesses($input: ProcessInput) {
+    processes(input: $input) {
+      nodes {
+        ...e4ProcessFragmentSM
+      }
+      pageInfo {
+        resultsReturned
+        currentPage
+        hasNextPage
+        hasPreviousPage
+        skip
+        top
+        sort
+        sortDesc
+        search
+        integrationTags
+      }
+      recordCount
+    }
+  }
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@evenicanpm/admin-integrate",
-	"version": "1.2.0",
+	"version": "1.2.2",
 	"description": "e4Integrate Admin Panel",
 	"type": "module",
 	"scripts": {
@@ -19,5 +19,5 @@
 		"@xyflow/react": "^12.8.4",
 		"elkjs": "^0.10.0"
 	},
-	"gitHead": "6a95e9f84f48a7e1e96bfdf4ee1a766a7d8808b6"
+	"gitHead": "608903e897229fead2b663cd82c019451ed65a45"
 }

package/src/api/Integrations/queries/get-process.query.ts

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

package/src/api/Integrations/queries/get-process.server.ts

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

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

@@ -0,0 +1 @@
+export { getProcesses } from "./get-process.query";

package/src/components/integration-list/index.ts

@@ -0,0 +1,2 @@
+export { default as IntegrationTag } from "./integration-tag";
+export { default as IntegrationStatusIcon } from "./integration-status-icon";

package/src/components/integration-list/integration-filter.ts

@@ -0,0 +1,21 @@
+import {
+	Filters,
+	MultiSelectFilter,
+} from "@evenicanpm/admin-integrate/components/list-filter/list-filter-types";
+
+export interface IntegrationListFilters extends Filters {
+	multiSelectFilter: MultiSelectFilter;
+}
+
+export const integrationListFilters: IntegrationListFilters = {
+	multiSelectFilter: {
+		type: "multiSelect",
+		label: "IntegrationList.tags",
+		value: null,
+		options: [
+			{ id: "Schedule Pending", value: "IntegrationList.scheduledPending" },
+			{ id: "Scheduled", value: "IntegrationList.scheduled" },
+			{ id: "Triggered", value: "IntegrationList.triggered" },
+		],
+	},
+};

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

@@ -0,0 +1,33 @@
+import React from "react";
+
+import { SxProps } from "@mui/material";
+import StorageIcon from "@mui/icons-material/Storage";
+import ElectricBoltIcon from "@mui/icons-material/ElectricBolt";
+import CodeIcon from "@mui/icons-material/Code";
+import TableChartIcon from "@mui/icons-material/TableChart";
+import EmailIcon from "@mui/icons-material/Email";
+import IosShareIcon from "@mui/icons-material/IosShare";
+import QuestionMarkIcon from "@mui/icons-material/QuestionMark";
+import { purple } from "@mui/material/colors";
+
+interface Props {
+	processIcon: string;
+	sx?: SxProps;
+}
+
+const IntegrationStatusIcon: React.FC<Props> = (props: Props) => {
+	const color = purple[500];
+	const statusIconMap = {
+		DB: <StorageIcon color="success" />,
+		Webhook: <ElectricBoltIcon color="error" />,
+		Restful: <CodeIcon color="info" />,
+		Table: <TableChartIcon sx={{ color: color }} />,
+		Email: <EmailIcon color="warning" />,
+		Export: <IosShareIcon color="primary" />,
+		noIcon: <QuestionMarkIcon color="info" />,
+	};
+
+	return statusIconMap[props.processIcon] || statusIconMap["noIcon"];
+};
+
+export default IntegrationStatusIcon;

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

@@ -0,0 +1,77 @@
+import React from "react";
+import { styled } from "@mui/material/styles";
+import { Box, Typography, SxProps } from "@mui/material";
+import { useTranslations } from "next-intl";
+
+const StyledTagBox = styled(Box)(({ theme }) => ({
+	padding: theme.spacing(0, 1.5),
+	border: "solid 1px",
+	borderRadius: 4,
+	alignContent: "center",
+	maxWidth: "fit-content",
+}));
+
+const StyledTag = styled(Typography)(({ theme }) => ({
+	fontWeight: "bold",
+}));
+
+interface Props {
+	process: {
+		isScheduled: number;
+		isTriggered: number;
+	};
+	sx?: SxProps;
+}
+
+const IntegrationTag: React.FC<Props> = ({ process, sx }) => {
+	const t = useTranslations("Integrate.IntegrationList");
+
+	return (
+		<Box display="flex" gap={1} justifyContent="center">
+			{process.isTriggered === 1 && (
+				<StyledTagBox
+					sx={{
+						backgroundColor: "info.100",
+						borderColor: "transparent",
+						...sx,
+					}}
+				>
+					<StyledTag color="info" variant="caption">
+						{t("triggered")}
+					</StyledTag>
+				</StyledTagBox>
+			)}
+
+			{process.isScheduled === 1 && (
+				<StyledTagBox
+					sx={{
+						backgroundColor: "success.100",
+						borderColor: "transparent",
+						...sx,
+					}}
+				>
+					<StyledTag color="success" variant="caption">
+						{t("scheduled")}
+					</StyledTag>
+				</StyledTagBox>
+			)}
+
+			{process.isScheduled === 0 && process.isTriggered === 0 && (
+				<StyledTagBox
+					sx={{
+						backgroundColor: "warning.100",
+						borderColor: "transparent",
+						color: "orange.700",
+						...sx,
+					}}
+				>
+					<StyledTag color="inherit" variant="caption">
+						{t("scheduledPending")}
+					</StyledTag>
+				</StyledTagBox>
+			)}
+		</Box>
+	);
+};
+
+export default IntegrationTag;

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

@@ -306,7 +306,7 @@ const ListFilter = function ListFilter<FilterShape extends Filters>(
 
 										<Button
 											variant="contained"
-											color="primary"
+											color="info"
 											startIcon={<ArrowForwardIos />}
 											disabled={Object.values(filterErrors).some((v) => v)}
 											onClick={handleFilterSet}

package/src/pages/integrations/integration-list/index.ts

@@ -0,0 +1 @@
+export { default } from "./integration-list";

package/src/pages/integrations/integration-list/integration-list-row.tsx

@@ -0,0 +1,147 @@
+import React, { useState } from "react";
+import { redirect, RedirectType } from "next/navigation";
+
+// MUI
+import { Theme, useTheme } from "@mui/material";
+import { Box, Stack, Typography, Popover } from "@mui/material";
+import { RemoveRedEye } from "@mui/icons-material";
+import { SxProps } from "@mui/material";
+
+// Custom components
+import {
+	StyledTableCell,
+	StyledTableRow,
+	StyledIconButton,
+} from "@evenicanpm/admin-integrate/components/data-table/table-row";
+import {
+	IntegrationTag,
+	IntegrationStatusIcon,
+} from "@evenicanpm/admin-integrate/components/integration-list";
+
+// Hooks
+import useTimestamp from "@evenicanpm/admin-integrate/hooks/use-timestamp";
+
+// Types
+import { executionItem } from "./integration-list";
+import { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
+import { TableCellProps } from "@mui/material";
+
+interface Props {
+	item: executionItem;
+	heading: Head[]; // for alignment
+	sx?: SxProps;
+}
+
+const IntegrationListRow: React.FC<Props> = (props: Props) => {
+	const theme = useTheme();
+	const styles = getStyles(theme);
+
+	// e.g. "xx days ago"
+	const time = useTimestamp(props.item.modified);
+	const localTime = new Date(props.item.modified).toString();
+
+	const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+	const open = Boolean(anchorEl);
+
+	const handlePopoverOpen = (event: React.MouseEvent<HTMLElement>) => {
+		setAnchorEl(event.currentTarget);
+	};
+
+	const handlePopoverClose = () => {
+		setAnchorEl(null);
+	};
+
+	const handleRedirect = () => {
+		redirect(
+			`/e4integrate/integration/${props.item.id}?IntegrationId=${props.item.id}`,
+			RedirectType.push,
+		);
+	};
+
+	return (
+		<StyledTableRow sx={props.sx}>
+			<StyledTableCell
+				align={props.heading[0].align as TableCellProps["align"]}
+				width={props.heading[0].width}
+			>
+				<Stack spacing={1} direction="row">
+					<Box display="flex" justifyContent="flex-end" alignItems="center">
+						<IntegrationStatusIcon processIcon={props.item.processIcon} />
+					</Box>
+					<Box display="flex" justifyContent="flex-end" alignItems="center">
+						<Typography>{props.item.name}</Typography>
+					</Box>
+				</Stack>
+			</StyledTableCell>
+			<StyledTableCell
+				align={props.heading[1].align as TableCellProps["align"]}
+				width={props.heading[1].width}
+			>
+				<Typography>{props.item.id}</Typography>
+			</StyledTableCell>
+			<StyledTableCell
+				align={props.heading[1].align as TableCellProps["align"]}
+				width={props.heading[1].width}
+			>
+				<IntegrationTag
+					process={{
+						isScheduled: props.item.isScheduled,
+						isTriggered: props.item.isTriggered,
+					}}
+				/>
+			</StyledTableCell>
+			<StyledTableCell
+				align={props.heading[2].align as TableCellProps["align"]}
+				width={props.heading[2].width}
+				sx={styles.timeCell}
+			>
+				<Typography
+					onMouseEnter={handlePopoverOpen}
+					onMouseLeave={handlePopoverClose}
+				>
+					{time}
+				</Typography>
+				<Popover
+					sx={{ pointerEvents: "none" }}
+					open={open}
+					anchorEl={anchorEl}
+					anchorOrigin={{
+						vertical: "bottom",
+						horizontal: "center",
+					}}
+					transformOrigin={{
+						vertical: "top",
+						horizontal: "center",
+					}}
+					onClose={handlePopoverClose}
+					disableRestoreFocus
+				>
+					<Box sx={styles.popover}>
+						<Typography>{localTime}</Typography>
+					</Box>
+				</Popover>
+			</StyledTableCell>
+			<StyledTableCell
+				align={props.heading[3].align as TableCellProps["align"]}
+				width={props.heading[3].width}
+			>
+				<StyledIconButton onClick={handleRedirect}>
+					<RemoveRedEye />
+				</StyledIconButton>
+			</StyledTableCell>
+		</StyledTableRow>
+	);
+};
+
+const getStyles = (theme: Theme) => {
+	return {
+		timeCell: {
+			cursor: "default",
+		},
+		popover: {
+			padding: theme.spacing(1),
+		},
+	};
+};
+
+export default IntegrationListRow;

package/src/pages/integrations/integration-list/integration-list-table.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+
+// Types
+import { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
+import { Item } from "./integration-list";
+
+// API
+import { ProcessExecutionInput } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+
+// MUI
+import { Theme, useTheme } from "@mui/material";
+import { TableContainer, Table, TableBody } from "@mui/material";
+import { SxProps } from "@mui/material";
+
+// Custom components
+import { TableHeader } from "@evenicanpm/admin-integrate/components/data-table";
+
+// Local components
+import IntegrationListRow from "./integration-list-row";
+
+interface Props {
+	heading: Head[];
+	items: Item[];
+	input: ProcessExecutionInput;
+	setInput: (newInput: ProcessExecutionInput) => void;
+	rowSx?: SxProps;
+}
+
+export default function IntegrationListTable(props: Props) {
+	const theme = useTheme();
+	const styles = getStyles(theme);
+
+	const handleRequestSort = (property: string) => {
+		const current = props.input.sort;
+		if (property === current) {
+			props.setInput({
+				...props.input,
+				sortDesc: !props.input.sortDesc,
+			});
+		} else {
+			props.setInput({
+				...props.input,
+				sort: property,
+				sortDesc: false,
+			});
+		}
+	};
+
+	return (
+		<>
+			<TableContainer>
+				<Table>
+					<TableHeader
+						heading={props.heading}
+						orderBy={props.input.sort}
+						order={props.input.sortDesc ? "desc" : "asc"}
+						onRequestSort={handleRequestSort}
+						rowSx={props.rowSx}
+					/>
+					<TableBody>
+						{props.items.map((item, index) => (
+							<IntegrationListRow
+								key={index}
+								item={item}
+								heading={props.heading}
+								sx={props.rowSx}
+							/>
+						))}
+					</TableBody>
+				</Table>
+			</TableContainer>
+		</>
+	);
+}
+
+const getStyles = (theme: Theme) => {
+	return {};
+};

package/src/pages/integrations/integration-list/integration-list.tsx

@@ -0,0 +1,262 @@
+import React, { useState, useEffect } from "react";
+import { useTranslations } from "next-intl";
+
+// API
+import {
+	GetProcessesQuery,
+	ProcessInput,
+} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import { ProcessExecutionInput } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+
+// MUI
+import { Theme, useTheme } from "@mui/material";
+import {
+	Card,
+	Box,
+	Stack,
+	Typography,
+	Grid2 as Grid,
+	Skeleton,
+} from "@mui/material";
+
+// Custom components
+import { FlexBox } from "@evenicanpm/admin-core/components/flex-box";
+import {
+	TablePagination,
+	TableSkeleton,
+} from "@evenicanpm/admin-integrate/components/data-table";
+import { ListFilter } from "@evenicanpm/admin-integrate/components/list-filter";
+
+// Local components
+import IntegrationListTable from "./integration-list-table";
+
+// Types
+import { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
+import { ListFilterOutput } from "@evenicanpm/admin-integrate/components/list-filter/list-filter-types";
+import {
+	IntegrationListFilters,
+	integrationListFilters,
+} from "@evenicanpm/admin-integrate/components/integration-list/integration-filter";
+import { log } from "console";
+
+// Returned from processExecutions query
+export interface executionItem {
+	isScheduled: 0 | 1;
+	isTriggered: 0 | 1;
+	id: string;
+	name: string;
+	modified: string;
+	processIcon: string;
+}
+
+// Row height in terms of multiples of theme.spacing(1) (e.g. theme.spacing(7.5 & rows per page))
+const rowHeight = 7.5;
+
+interface Props {
+	heading: Head[];
+	data: GetProcessesQuery;
+	loading: boolean;
+	input: ProcessInput;
+	setInput: (newInput: ProcessInput) => void;
+}
+
+const IntegrationList: React.FC<Props> = (props: Props) => {
+	const t = useTranslations("Integrate.IntegrationList");
+
+	const theme = useTheme();
+	const styles = getStyles(theme);
+
+	const [items, setItems] = useState<Item[]>([]);
+	const [fetched, setFetched] = useState<boolean>(false); // prevents "empty list" msg from showing for split second
+	const [page, setPage] = useState(props.input.skip / props.input.top + 1);
+	const [perPage, setPerPage] = useState(props.input.top);
+
+	const handleChangePage = (
+		event: React.ChangeEvent<unknown>,
+		value: number,
+	) => {
+		if (page !== value) {
+			setPage(value);
+			props.setInput({
+				...props.input,
+				skip: props.input.top * (value - 1),
+			});
+			setFetched(false);
+		}
+	};
+
+	const handleSetFilters = (
+		filterUpdate: ListFilterOutput<IntegrationListFilters>,
+	) => {
+		const { itemsPerPage, search, filters } = filterUpdate;
+		console.log("filters", filters?.multiSelectFilter);
+
+		props.setInput({
+			...props.input,
+			top: itemsPerPage,
+			skip: 0,
+			search: search,
+			integrationTags:
+				filters?.multiSelectFilter?.map((f) => `${f.id}`) || null,
+			sortDesc: true,
+		});
+		setFetched(false);
+		setPerPage(itemsPerPage);
+		setPage(1);
+	};
+
+	const handleClearFilters = () => {
+		props.setInput({
+			...props.input,
+			skip: 0,
+			integrationTags: null,
+		});
+		setFetched(false);
+	};
+
+	useEffect(() => {
+		if (props.data) {
+			setItems(props.data.processes.nodes as Item[]);
+			setFetched(true);
+		}
+	}, [props.data]);
+
+	return (
+		<>
+			<Box sx={styles.list}>
+				<ListFilter<IntegrationListFilters>
+					setFilters={handleSetFilters}
+					clearFilters={handleClearFilters}
+					filters={integrationListFilters}
+					config={{
+						pagination: {
+							pageDefault: 10,
+							pageOptions: [10, 20, 50],
+						},
+					}}
+				/>
+			</Box>
+
+			{props.loading && !props.data && (
+				<Card>
+					<TableSkeleton
+						heading={props.heading}
+						perPage={perPage}
+						rowSx={styles.rowSx}
+					/>
+				</Card>
+			)}
+
+			{!props.loading && props.data && fetched && items.length > 0 ? (
+				<Box
+					sx={{
+						minHeight:
+							props.data.processes.pageInfo.resultsReturned < perPage &&
+							page === 1
+								? theme.spacing(
+										rowHeight *
+											(props.data.processes.pageInfo.resultsReturned + 1),
+									)
+								: theme.spacing(rowHeight * (perPage + 1)),
+					}}
+				>
+					<Card>
+						<IntegrationListTable
+							heading={props.heading}
+							items={items}
+							input={props.input}
+							setInput={props.setInput}
+							rowSx={styles.rowSx}
+						/>
+					</Card>
+				</Box>
+			) : null}
+
+			{!props.loading && fetched && items.length === 0 ? (
+				<Card>
+					<FlexBox
+						justifyContent="center"
+						alignItems="center"
+						sx={{
+							minHeight: "335px",
+							marginBottom: theme.spacing(2),
+						}}
+					>
+						<Stack spacing={1} justifyContent="center" alignItems="center">
+							<Typography variant="h6" color="info">
+								{t("ListEmpty.title")}
+							</Typography>
+							<Typography variant="body1">{t("ListEmpty.body")}</Typography>
+						</Stack>
+					</FlexBox>
+				</Card>
+			) : null}
+
+			{!props.loading && props.data && fetched && items.length > 0 ? (
+				<Grid container spacing={1} sx={styles.pagination}>
+					<Grid size={{ xs: 10.5 }}>
+						<FlexBox
+							justifyContent="center"
+							alignItems="center"
+							sx={styles.paginationBox}
+						>
+							<TablePagination
+								page={page}
+								onChange={handleChangePage}
+								count={Math.ceil(
+									props.data.processes.recordCount / props.input.top,
+								)}
+							/>
+						</FlexBox>
+					</Grid>
+					<Grid size={{ xs: 1.5 }}>
+						<FlexBox
+							justifyContent="flex-end"
+							alignItems="center"
+							sx={{ height: "100%" }}
+						>
+							<Typography color="grey">
+								{`${props.data.processes.pageInfo.resultsReturned}  ${t("Pagination.of")} ${props.data.processes.recordCount} ${t("Pagination.items")}`}
+							</Typography>
+						</FlexBox>
+					</Grid>
+				</Grid>
+			) : null}
+		</>
+	);
+};
+
+const getStyles = (theme: Theme) => {
+	return {
+		title: {
+			display: "flex",
+			alignItems: "center",
+			height: "100%",
+		},
+		typography: {
+			fontWeight: "medium",
+		},
+		button: {
+			borderWidth: 2,
+			borderRadius: 1,
+			marginRight: theme.spacing(1),
+		},
+		iconButton: {
+			borderRadius: 1,
+		},
+		pagination: {
+			marginTop: theme.spacing(2),
+		},
+		list: {
+			margin: theme.spacing(2, 0),
+		},
+		paginationBox: {
+			paddingLeft: theme.spacing(15),
+		},
+		rowSx: {
+			height: theme.spacing(rowHeight),
+		},
+	};
+};
+
+export default IntegrationList;

package/src/pages/integrations/integrations.tsx

@@ -1,17 +1,24 @@
-import React from "react";
+import React, { useState } from "react";
 import { useTranslations } from "next-intl";
 
 // MUI
 import { Box } from "@mui/material";
 
+// API
+import { getProcesses } from "@evenicanpm/admin-integrate/api/Integrations/queries";
+import { ProcessInput } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+
 // Custom components
 import {
 	IntegrateBreadcrumbs,
 	Crumb,
 } from "@evenicanpm/admin-integrate/components/breadcrumbs";
+import { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
+import IntegrationList from "./integration-list";
 
 export default function Integrations() {
 	const t = useTranslations("Integrate");
+	const l = useTranslations("Integrate.IntegrationList.ListHeader");
 
 	const breadcrumbs: Crumb[] = [
 		{
@@ -23,9 +30,65 @@ export default function Integrations() {
 		},
 	];
 
+	const heading: Head[] = [
+		{
+			id: "name",
+			label: l("integrationName"),
+			align: "left",
+			width: "30%",
+			sortable: true,
+		},
+		{
+			id: "id",
+			label: l("id"),
+			align: "left",
+			width: "15%",
+		},
+		{
+			id: "isScheduled",
+			label: l("status"),
+			align: "center",
+			width: "30%",
+		},
+		{
+			id: "modified",
+			label: l("lastModified"),
+			align: "center",
+			width: "15%",
+			sortable: true,
+		},
+		{
+			id: "view",
+			label: l("actions"),
+			align: "center",
+			width: "5%",
+		},
+	];
+
+	// TODO: initialize input based on url query params
+	const [input, setInput] = useState<ProcessInput>({
+		skip: 0,
+		sort: "modified",
+		sortDesc: true,
+		top: 10,
+		integrationTags: null,
+		search: null,
+	});
+
+	const { data, isLoading } = getProcesses.useData({
+		input: input,
+	});
+
 	return (
 		<Box>
 			<IntegrateBreadcrumbs breadcrumbs={breadcrumbs} />
+			<IntegrationList
+				heading={heading}
+				data={data}
+				loading={isLoading}
+				input={input}
+				setInput={setInput}
+			/>
 		</Box>
 	);
 }