Merge branch 'feat-20221012-environment' into 'staging'

Feat 20221012 environment

See merge request !187

src/components/BusinessComponents/ProductSelect/index.tsx

@@ -11,6 +11,7 @@ interface IProductSelectProps {
 	setProductId: any;
 	okText?: string;
 	onConfirm?: any;
+	title?: any;
 }
 
 const ProductSelect = (props: IProductSelectProps) => {
@@ -21,6 +22,7 @@ const ProductSelect = (props: IProductSelectProps) => {
 		okText = "下一步",
 		setOpen,
 		onConfirm,
+		title,
 	} = props;
 	const { productListStore } = useStores();
 
@@ -43,7 +45,7 @@ const ProductSelect = (props: IProductSelectProps) => {
 	return (
 		<MyDialog
 			open={open}
-			title="选择产品"
+			title={title || "选择产品"}
 			okText={okText}
 			onClose={() => setOpen(false)}
 			onConfirm={() => handleConfirm()}

src/components/CommonComponents/VirtuallyTable/index.module.scss

+.VTHeader {
+	font-size: 12px;
+	line-height: 20px;
+	color: rgba(138, 144, 153, 1);
+	padding: 12px 16px;
+	white-space: nowrap;
+	font-weight: 400;
+	box-sizing: border-box;
+}
+.VTHeaderRow {
+	background-color: rgba(247, 248, 250, 1);
+	box-sizing: border-box;
+}
+.VTRow {
+	background-color: #fff;
+	box-sizing: border-box;
+	&:hover {
+		background-color: rgba(245, 246, 247, 1);
+	}
+}
+.VTRowColumn {
+	text-align: left;
+	box-sizing: border-box;
+	font-size: 14px;
+	line-height: 22px;
+	color: rgba(30, 38, 51, 1);
+	padding: 16px;
+	border-bottom: 1px solid rgba(240, 242, 245, 1);
+}

src/components/CommonComponents/VirtuallyTable/index.tsx

+import React from "react";
+import { useCallback, useEffect, useState, useRef, useMemo } from "react";
+import { Column, Table, AutoSizer } from "react-virtualized";
+import style from "./index.module.scss";
+import "react-virtualized/styles.css"; // only needs to be imported once
+import MyCircularProgress from "@/components/mui/MyCircularProgress";
+
+type Order = "ASC" | "DESC"; // 升序为asc，降序为desc。
+
+export type sortState = {
+	field: string | null | undefined | ""; // 根据哪个属性来排序
+	order: Order | null | undefined | "";
+};
+
+interface IVirtuallyTableProps {
+	rows: Array<any>; // 表格数据
+	headCells: Array<any>; // 表头配置
+	tableKey?: string; // 表格数据的key
+	loading?: boolean; // 是否正在加载数据
+	hasCheckbox?: boolean; // 是否有复选框
+	selectItems?: Array<any>; // 选中的项
+	setSelectItems?: any; // 设置选中的项
+	// fixedHead?: boolean; // 是否是固定表头
+	noDataText?: string; // 无数据提示文案
+	// hasTableFooter?: boolean; // 是否有分页组件
+	// page?: number; // 当前页
+	// pageChange?: any; // 页码改变
+	// count?: number; // 总页数
+	// totalElements?: number; // 数据总量 不止是列表渲染的长度
+	sortState?: sortState; // 排序状态
+	setSortState?: any; // 设置排序状态
+	// paginationType?: "simple" | "complex"; // 分页组件的类型   simple简洁式  complex复杂、带每页数量切换、总数等
+	// rowsPerPage?: number; // 每页多少条数据
+	// handleChangeRowsPerPage?: any; // 每页多少条数据变化
+	nodataText?: any; // 无数据文案
+	handleRow?: any; // 点击一行
+	activeId?: string; // 选中的一行的id
+	disableFn?: any; // 禁用时根据disableFn来判断是否禁用
+}
+
+const VirtuallyTable = (props: IVirtuallyTableProps) => {
+	const {
+		rows,
+		headCells,
+		tableKey = "id",
+		loading = false,
+		hasCheckbox = false,
+		selectItems = [],
+		setSelectItems,
+		sortState,
+		setSortState,
+		nodataText,
+		handleRow,
+		activeId,
+		disableFn,
+	} = props;
+
+	const virtuallyTableBoxRef: any = useRef(null);
+	const virtuallyTableRef: any = useRef(null);
+
+	const [width, setWidth] = useState(0);
+	const [height, setHeight] = useState(0);
+
+	const getTableWidthHeight = () => {
+		setWidth(virtuallyTableBoxRef?.current?.offsetWidth || 1000);
+		setHeight(virtuallyTableBoxRef?.current?.offsetHeight || 300);
+	};
+
+	useEffect(() => {
+		getTableWidthHeight();
+	}, []);
+
+	window.onresize = () => {
+		getTableWidthHeight();
+	};
+
+	return (
+		<div
+			ref={virtuallyTableBoxRef}
+			style={{ width: "100%", height: "100%", position: "relative" }}
+		>
+			<MyCircularProgress loading={loading} />
+			{width && height && (
+				<Table
+					ref={virtuallyTableRef}
+					width={width}
+					height={height}
+					headerHeight={59}
+					rowHeight={54}
+					rowCount={rows.length}
+					rowGetter={({ index }: any) => rows[index]}
+					headerClassName={style.VTHeader}
+					rowClassName={({ index }: any) => {
+						if (index < 0) {
+							return style.VTHeaderRow;
+						} else {
+							return style.VTRow;
+						}
+					}}
+				>
+					{headCells.map((headCell) => {
+						console.log(headCell.cellRenderer);
+						return (
+							<Column
+								key={headCell.id}
+								label={headCell.label}
+								dataKey={headCell.id}
+								width={headCell.width}
+								flexGrow={headCell.flexGrow || 0}
+								cellRenderer={
+									headCell.cellRenderer
+										? headCell.cellRenderer
+										: (data: any) => {
+												return data.cellData;
+										  }
+								}
+								className={style.VTRowColumn}
+							/>
+						);
+					})}
+				</Table>
+			)}
+		</div>
+	);
+};
+
+export default VirtuallyTable;

src/components/mui/MyDialog.tsx

@@ -133,7 +133,7 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
 					) : null}
 					{showConfirm ? (
 						<MyButton
-							text={okText || "确定"}
+							text={okText || "确认"}
 							onClick={onConfirm}
 							variant="contained"
 							color={okColor}

src/components/mui/MySelect.tsx

@@ -182,10 +182,14 @@ export default function MySelect(props: IProps) {
 				styleOverrides: {
 					root: {
 						boxShadow: "0px 3px 10px 0px rgba(0,24,57,0.14)",
+						"&.MuiPopover-paper": {
+							maxHeight: "300px",
+						},
 					},
 				},
 			},
 
+			// .css-kdgfg8-MuiPaper-root-MuiMenu-paper-MuiPaper-root-MuiPopover-paper
 			// MuiFormControl: {
 			// 	styleOverrides: {
 			// 		root: {

src/components/mui/MyTabs/index.module.css

@@ -6,8 +6,9 @@
 	color: #1e2633;
 	line-height: 48px;
 }
-.titleBox::after {
-	content: "|";
-	padding: 0 24px;
-	color: #dde1e6;
+.titleBoxLine {
+	width: 1px;
+	height: 20px;
+	background-color: rgba(221, 225, 230, 1);
+	margin: 0 24px;
 }

src/components/mui/MyTabs/index.tsx

@@ -80,6 +80,9 @@ const theme = createTheme({
 				indicator: {
 					backgroundColor: "#1370FF",
 				},
+				flexContainer: {
+					alignItems: "center",
+				},
 			},
 		},
 		MuiButtonBase: {
@@ -191,6 +194,7 @@ const Tabs = (props: IProps) => {
 								{title}
 							</span>
 						) : null}
+						{title ? <div className={styles.titleBoxLine}></div> : null}
 						{tabList
 							?.filter((item) => !item.hide)
 							.map((item, key) => {

src/views/CustomOperator/components/SaveOperator/index.tsx

@@ -15,6 +15,7 @@ interface IProps {
 	setSaveFormDialog: (val: boolean) => void;
 	operatorList: ITask[];
 	setShowCustomOperator: any;
+	productId?: string;
 }
 const SaveOperator = (props: IProps) => {
 	const {
@@ -22,10 +23,11 @@ const SaveOperator = (props: IProps) => {
 		setSaveFormDialog,
 		operatorList,
 		setShowCustomOperator,
+		productId: propsProductId
 	} = props;
 	const { currentProjectStore } = useStores();
 	const Message = useMessage();
-	const productId = toJS(currentProjectStore.currentProductInfo.id);
+	const productId = propsProductId || toJS(currentProjectStore.currentProductInfo.id);
 	const [title, setTitle] = useState("");
 	const [version, setVersion] = useState("1.0.0");
 	const [description, setDescription] = useState("");
@@ -165,7 +167,7 @@ const SaveOperator = (props: IProps) => {
 					helperText={versionHelper.helperText}
 					style={{ marginBottom: "20px" }}
 				></MyInput>
-				<div style={{ position: "relative" }}>
+				<div style={{ position: "relative", paddingBottom: "20px" }}>
 					<MyInput
 						value={description}
 						id="desc"

src/views/CustomOperator/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-10-24 17:32:00
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-10-24 19:42:23
+ * @LastEditTime: 2022-11-03 11:54:52
  * @FilePath: /bkunyun/src/views/CustomOperator/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -61,6 +61,7 @@ const CustomOperator = observer((props: IProps) => {
 						setSaveFormDialog={setSaveFormDialog}
 						operatorList={operatorList}
 						setShowCustomOperator={setShowCustomOperator}
+						productId={productId}
 					></SaveOperator>
 				</div>
 				<div className={styles.coContent} id="customOperatorFlow">

src/views/Project/ProjectWorkbench/workbenchTemplate/components/AddTemplate/index.tsx

@@ -234,7 +234,7 @@ const AddTemplate = (props: IAddTemplateProps) => {
 								setTitle(e.target.value);
 							}}
 							onKeyUp={handleKeyWordChangeKeyUp}
-							placeholder="输入关键词搜索"
+							placeholder="输入关键词按回车搜索"
 							size="small"
 							sx={{ width: 340, height: 32 }}
 							endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}

src/views/Project/components/AddProject/index.tsx

@@ -208,7 +208,7 @@ const AddProject = observer((props: IAddProjectProps) => {
 							</MenuItem>
 						))}
 				</MyInput>
-				<div style={{ position: "relative" }}>
+				<div style={{ position: "relative", paddingBottom: "20px" }}>
 					<MyInput
 						value={desc}
 						error={descCheck.error}

src/views/Project/components/Flow/index.tsx

@@ -270,14 +270,14 @@ const Flow = (props: IProps) => {
 				return a - b;
 			});
 			let width = 176,
-				height = 66;
+				height = 12;
 			if (positionXArr?.length) {
 				const val = positionXArr[positionXArr.length - 1] + 144;
 				width = val > 176 ? val : width;
 			}
 			if (positionYArr?.length) {
 				const val = positionYArr[positionYArr.length - 1] + 74;
-				height = val > 66 ? val : height;
+				height = val > 12 ? val : height;
 			}
 			return {
 				width,

src/views/ResourceCenter/UserResources/UserResourcesEnvironment/AddEnvironment/index.tsx

@@ -545,6 +545,7 @@ const AddEnvironment = (props: IAddEnvironmentProps) => {
 					<MyButton
 						text="开始构建"
 						onClick={() => handleSubmit()}
+						isLoadingButton={true}
 						loading={loading}
 					></MyButton>
 				</div>

src/views/ResourceCenter/UserResources/UserResourcesEnvironment/index.tsx

@@ -128,7 +128,7 @@ const UserResourcesEnvironment = () => {
 	};
 
 	const renderCreatedTime = (item: any) => {
-		return moment(new Date(item.createdTime)).format("yyyy-MM-DD hh:mm:ss");
+		return moment(new Date(item.createdTime)).format("yyyy-MM-DD HH:mm:ss");
 	};
 
 	const handleDelete = (item: any) => {

src/views/ResourceCenter/UserResources/UserResourcesTemplate/TemplateItem/index.module.scss

@@ -39,6 +39,10 @@
 			color: rgba(30, 38, 51, 1);
 			margin-left: 8px;
 			font-weight: 550;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			display: inline-block;
 		}
 	}
 	.templateDesc {

src/views/ResourceCenter/UserResources/UserResourcesTemplate/TemplateItem/index.tsx

@@ -34,13 +34,15 @@ const TemplateItem = (props: ITemplateItemPorps) => {
 					</>
 				)}
 				<div className={style.templateTopLine}></div>
-				<div className={style.templateTopItem}>{templateInfo.version}</div>
+				<div className={style.templateTopItem}>v{templateInfo.version}</div>
 				<div className={style.templateTopLine}></div>
 				<div className={style.templateTopItem}>{templateInfo.updatedTime}</div>
 			</div>
 			<div className={style.templateTitleBox}>
 				<img src={templateIcon} alt="" />
-				<div className={style.templateTitle}>{templateInfo.title}</div>
+				<div className={style.templateTitle} title={templateInfo.title}>
+					{templateInfo.title}
+				</div>
 			</div>
 			<div className={style.templateDesc}>{templateInfo.description}</div>
 			{footer && footer()}

src/views/ResourceCenter/UserResources/UserResourcesTemplate/index.tsx

@@ -108,7 +108,6 @@ const UserResourcesTemplate = observer(() => {
 	const deleteConfirm = () => {
 		deleteWorkflowspecFn({ id: templateId });
 	};
-
 	return (
 		<div className={style.template}>
 			<div className={style.top}>
@@ -164,6 +163,8 @@ const UserResourcesTemplate = observer(() => {
 					setOpen={setShowProductSelect}
 					productId={productId}
 					setProductId={setProductId}
+					title="新建自定义模板"
+					okText="确定"
 					onConfirm={() => {
 						setTemplateId("");
 						setShowAddTemplate(true);
@@ -178,7 +179,10 @@ const UserResourcesTemplate = observer(() => {
 					isText={true}
 					title="提示"
 				>
-					确定要删除这个模板吗？
+					<div style={{ width: "388px" }}>
+						确认删除该模板吗？删除后，使用该模板创建的工作流任务将无法查看详情，
+						项目中已添加的该模板也将一并删除！
+					</div>
 				</MyDialog>
 			)}
 			{showDetail && (

src/views/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/index.module.css

@@ -36,7 +36,6 @@
 	display: flex;
 	position: relative;
 	width: 100%;
-	/* overflow: hidden; */
 	border-radius: 4px;
 	margin-bottom: 20px;
 	height: 562px;
@@ -66,6 +65,7 @@
 	flex-direction: column;
 	border-top-right-radius: 4px;
 	border-bottom-right-radius: 4px;
+	width: calc(100% - 368px);
 }
 .codeTitle {
 	background-color: #353942;

src/views/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-10-18 16:12:55
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-11-02 13:51:50
+ * @LastEditTime: 2022-11-04 15:07:53
  * @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -548,7 +548,6 @@ const AddOperator = observer((props: IAddOperator) => {
 									}}
 									onBlur={paramsConfigBlur}
 									height={parametersError ? "486px" : "518px"}
-									width="600"
 									style={{ flex: 1 }}
 								/>
 								{parametersError ? (
@@ -672,6 +671,7 @@ const AddOperator = observer((props: IAddOperator) => {
 									tasks={operatorList}
 									setTasks={setOperatorList}
 									type="edit"
+									defaultPosition={[300, 100]}
 									// onFlowNodeClick={handleNodeClick}
 									flowNodeDraggable={true}
 									ListenState={!inputActive}

src/views/ResourceCenter/UserResources/WorkflowOperator/components/OperatorDetails/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-10-17 14:35:11
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-11-01 10:59:40
+ * @LastEditTime: 2022-11-04 15:09:09
  * @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -106,14 +106,7 @@ const OperatorDetails = observer(() => {
 		onSuccess: (res: any) => {
 			if (res.message === "success") {
 				/** 设置详情数据 */
-				const newData = res.data.map((item: any) => {
-					/** 初始化批算子偏移量 */
-					if (item.type === "BATCH") {
-						item.position = { x: 100, y: 100 };
-					}
-					return item;
-				});
-				setDetailData(newData);
+				setDetailData(res.data);
 				const filterData = res?.data?.filter((item: any) => {
 					return item.type === "BATCH";
 				});
@@ -226,7 +219,7 @@ const OperatorDetails = observer(() => {
 			) : null}
 			{contentType === "flowChart" && !envId ? (
 				<div className={styles.contentBox}>
-					<Flow tasks={detailData} showControls={false} />
+					<Flow tasks={detailData} showControls={false} defaultPosition={[100, 100]}/>
 				</div>
 			) : null}
 			{contentType === "parameterList" || type === "FLOW" ? (

src/views/ResourceCenter/UserResources/WorkflowOperator/index.tsx

@@ -76,7 +76,7 @@ const WorkflowOperator = observer(() => {
 	}, [searchParams.productId, searchParams.type]);
 
 	return (
-		<>
+		<div>
 			<div className={styles.indexBox}>
 				<div className={styles.headerBox}>
 					<div>
@@ -163,7 +163,7 @@ const WorkflowOperator = observer(() => {
 					pageType={pageType}
 				/>
 			)}
-		</>
+		</div>
 	);
 });
 

src/views/WorkFlowEdit/components/SaveCustomTemplate/index.tsx

@@ -105,7 +105,7 @@ const SaveCustomTemplate = (props: IProps) => {
 				helperText: "必须输入模板名称",
 			});
 			return false;
-		} else if (title.length > 50) {
+		} else if (title.length > 15) {
 			setTitleHelper({
 				error: true,
 				helperText: "格式不正确，必须在15字符以内，仅限大小写字母、数字、中文",
@@ -239,7 +239,7 @@ const SaveCustomTemplate = (props: IProps) => {
 					helperText={versionHelper.helperText}
 					style={{ marginBottom: "20px" }}
 				></MyInput>
-				<div style={{ position: "relative" }}>
+				<div style={{ position: "relative", paddingBottom: "20px" }}>
 					<MyInput
 						value={description}
 						id="desc"

src/views/WorkFlowEdit/index.tsx

@@ -61,7 +61,8 @@ const WorkFlowEdit = observer((props: IProps) => {
 	const [saveFormDialog, setSaveFormDialog] = useState(false); // 保存弹窗显示与否控制
 	const [title, setTitle] = useState(""); // 自定义模板名称
 	const [version, setVersion] = useState("1.0.0"); // 自定义模板版本
-	const [oldversion, setOldersion] = useState(""); // 编辑是自定义模板的老版本
+	const [oldversion, setOldersion] = useState(""); // 编辑时自定义模板的老版本
+	const [selfAddingEewVersion, setSelfAddingEewVersion] = useState("1.0.0"); // 编辑时自增新版本
 	const [description, setDescription] = useState(""); // 自定义模板描述
 	const [creator, setCreator] = useState(""); // 自定义模板创建人
 	const [operatingArea, setOperatingArea] = useState<"form" | "flow">("form"); // 当前操作区域
@@ -138,6 +139,7 @@ const WorkFlowEdit = observer((props: IProps) => {
 						}
 					}
 					setVersion(arr.join("."));
+					setSelfAddingEewVersion(arr.join("."));
 					setCreator(res.data.creator);
 					setDescription(res.data.description);
 				}
@@ -215,6 +217,7 @@ const WorkFlowEdit = observer((props: IProps) => {
 		if (!tasksIsCheck) {
 			Message.error("工作流校验未通过，请检查！");
 		} else {
+			setVersion(selfAddingEewVersion);
 			setSaveFormDialog(true);
 		}
 	};

src/views/demo/VirtuallyListDemo/index.tsx

 import VirtuallyList from "@/components/CommonComponents/VirtuallyList";
+import VirtuallyTable from "@/components/CommonComponents/VirtuallyTable";
+import MyButton from "@/components/mui/MyButton";
 
 const VirtuallyListDemo = () => {
 	let listData: Array<any> = [];
@@ -16,10 +18,6 @@ const VirtuallyListDemo = () => {
 		parent,
 		style,
 	}: any) => {
-		// const name = listData[index].name;
-
-		// // const content = isScrolling ? "..." : <div>{name}</div>;
-		// const content = <div>{name}</div>;
 		return (
 			<div key={key} style={style}>
 				<div
@@ -40,32 +38,90 @@ const VirtuallyListDemo = () => {
 			</div>
 		);
 	};
+
+	const rows = [
+		{
+			a: "啊手动阀建行卡实际付款啦即使对方卢卡库上的飞机啊离开解放了；拉萨的飞机拉萨酱豆腐啊肌肤抵抗力就",
+			b: "werewrw",
+			c: "asdfasf",
+			d: "asdfasdf",
+			e: "asd4534",
+			id: "1",
+		},
+	];
+	for (let i = 0; i < 10000; i++) {
+		rows.push({
+			a: "xcgh",
+			b: "sdf",
+			c: "sdfg",
+			d: "sdfg",
+			e: "wertwe",
+			id: "12" + i,
+		});
+	}
+	const buttonHeadCells = [
+		{
+			id: "a",
+			label: "属性a",
+			width: 150,
+		},
+		{
+			id: "b",
+			label: "属性b",
+			width: 150,
+		},
+		{
+			id: "c",
+			label: "属性c",
+			width: 150,
+			// flexGrow: 2,
+		},
+		{
+			id: "d",
+			label: "属性d",
+			width: 200,
+			flexGrow: 2,
+		},
+		{
+			id: "caozuo",
+			label: "操作",
+			width: 150,
+			cellRenderer: (data: any) => {
+				return (
+					<MyButton
+						text="删除"
+						onClick={() => {
+							// handleDelete(row.id);
+						}}
+					></MyButton>
+				);
+			},
+		},
+	];
+
 	return (
 		<div>
 			<div>
-				<VirtuallyList list={listData} renderRow={renderRow}></VirtuallyList>;
+				{/* <VirtuallyList list={listData} renderRow={renderRow}></VirtuallyList>; */}
 			</div>
-			<div style={{ width: "300px", height: "300px", overflow: "auto" }}>
-				{listData.map((item, index) => {
-					return (
-						<div
-							key={index}
-							style={{
-								display: "flex",
-								justifyContent: "space-between",
-								alignItems: "center",
-							}}
-						>
-							<div>{listData[index].name}</div>
-							<div>{listData[index].name}</div>
-							<div>{listData[index].name}</div>
-							<div>{listData[index].name}</div>
-							<div>{listData[index].name}</div>
-							<div>{listData[index].name}</div>
-							<div>{listData[index].name}</div>
-						</div>
-					);
-				})}
+			<div style={{ height: "600px" }}>
+				<VirtuallyTable
+					// rows={rows}
+					rows={rows.map((row) => {
+						return {
+							...row,
+							// caozuo: (
+							// 	<MyButton
+							// 		text="删除"
+							// 		onClick={() => {
+							// 			// handleDelete(row.id);
+							// 		}}
+							// 	></MyButton>
+							// ),
+						};
+					})}
+					headCells={buttonHeadCells}
+				/>
 			</div>
 		</div>
 	);