Reimplement PageHeader

Implement our own version ofwhe PageHeader component, due to it being
removed from ant design v5.

packages/web_ui/src/components/HostViewPage.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Descriptions, PageHeader, Spin, Tag, Typography } from "antd";
+import { Descriptions, Spin, Tag, Typography } from "antd";
 import { useParams } from "react-router-dom";
 
 import InstanceList from "./InstanceList";
@@ -7,6 +7,7 @@ import LogConsole from "./LogConsole";
 import { useAccount } from "../model/account";
 import { useInstanceList } from "../model/instance";
 import { useHost } from "../model/host";
+import PageHeader from "./PageHeader";
 import PageLayout from "./PageLayout";
 import PluginExtra from "./PluginExtra";
 
@@ -29,19 +30,13 @@ export default function HostViewPage(props) {
 
 	if (host.missing) {
 		return <PageLayout nav={nav}>
-			<PageHeader
-				className="site-page-header"
-				title={hostId}
-			/>
+			<PageHeader title={hostId} />
 			<p>Host with id {hostId} was not found on the controller.</p>
 		</PageLayout>;
 	}
 
 	return <PageLayout nav={nav}>
-		<PageHeader
-			className="site-page-header"
-			title={host.name || hostId}
-		/>
+		<PageHeader title={host.name || hostId} />
 
 		<Descriptions bordered size="small" column={{ xs: 1, sm: 2, xl: 4 }}>
 			<Descriptions.Item label="Name">{host["name"]}</Descriptions.Item>

packages/web_ui/src/components/HostsPage.jsx

@@ -1,12 +1,13 @@
 import React, { useContext, useRef, useState, useEffect } from "react";
 import { useHistory } from "react-router-dom";
-import { Button, Form, InputNumber, Modal, PageHeader, Table, Tag, Typography } from "antd";
+import { Button, Form, InputNumber, Modal, Table, Tag, Typography } from "antd";
 import CopyOutlined from "@ant-design/icons/lib/icons/CopyOutlined";
 
 import { libData } from "@clusterio/lib";
 
 import { useAccount } from "../model/account";
 import ControlContext from "./ControlContext";
+import PageHeader from "./PageHeader";
 import PageLayout from "./PageLayout";
 import PluginExtra from "./PluginExtra";
 import { useHostList } from "../model/host";
@@ -182,7 +183,6 @@ export default function HostsPage() {
 
 	return <PageLayout nav={[{ name: "Hosts" }]}>
 		<PageHeader
-			className="site-page-header"
 			title="Hosts"
 			extra={account.hasPermission("core.host.generate_token") && <GenerateHostTokenButton />}
 		/>

packages/web_ui/src/components/InstanceViewPage.jsx

@@ -1,6 +1,6 @@
 import React, { useContext, useState } from "react";
 import { useHistory, useParams } from "react-router-dom";
-import { Alert, Button, Descriptions, Dropdown, Menu, Modal, PageHeader, Space, Spin, Typography } from "antd";
+import { Alert, Button, Descriptions, Dropdown, Menu, Modal, Space, Spin, Typography } from "antd";
 import DeleteOutlined from "@ant-design/icons/DeleteOutlined";
 import DownOutlined from "@ant-design/icons/DownOutlined";
 
@@ -8,6 +8,7 @@ import { libData } from "@clusterio/lib";
 
 import { useAccount } from "../model/account";
 import ControlContext from "./ControlContext";
+import PageHeader from "./PageHeader";
 import PageLayout from "./PageLayout";
 import PluginExtra from "./PluginExtra";
 import InstanceConfigTree from "./InstanceConfigTree";
@@ -187,7 +188,6 @@ export default function InstanceViewPage(props) {
 
 	return <PageLayout nav={nav}>
 		<PageHeader
-			className="site-page-header"
 			title={instance.name}
 			extra={instanceButtons}
 		/>

packages/web_ui/src/components/InstancesPage.jsx

@@ -1,11 +1,12 @@
 import React, { useContext, useState } from "react";
 import { useHistory } from "react-router-dom";
-import { Button, Form, Input, Modal, PageHeader } from "antd";
+import { Button, Form, Input, Modal } from "antd";
 
 import { libConfig, libData } from "@clusterio/lib";
 
 import { useAccount } from "../model/account";
 import ControlContext from "./ControlContext";
+import PageHeader from "./PageHeader";
 import PageLayout from "./PageLayout";
 import PluginExtra from "./PluginExtra";
 import { useInstanceList } from "../model/instance";
@@ -65,7 +66,6 @@ export default function InstancesPage() {
 
 	return <PageLayout nav={[{ name: "Instances" }]}>
 		<PageHeader
-			className="site-page-header"
 			title="Instances"
 			extra={<>
 				{account.hasPermission("core.instance.create") && <CreateInstanceButton />}

packages/web_ui/src/components/ModPackViewPage.jsx

@@ -1,7 +1,7 @@
 import React, { Fragment, memo, useCallback, useEffect, useContext, useRef, useState } from "react";
 import { useHistory, useParams } from "react-router-dom";
 import {
-	Button, Card, Checkbox, Col, ConfigProvider, Descriptions, Form, Input, PageHeader, Pagination,
+	Button, Card, Checkbox, Col, ConfigProvider, Descriptions, Form, Input, Pagination,
 	Popconfirm, Row, Table, Tag, Typography, Select, Skeleton, Space, Spin, Switch, Modal, Tooltip,
 } from "antd";
 import InfoCircleOutlined from "@ant-design/icons/InfoCircleOutlined";
@@ -20,6 +20,7 @@ import { useModPack } from "../model/mod_pack";
 import { useModList } from "../model/mods";
 import { useClipboard } from "../util/clipboard";
 import notify, { notifyErrorHandler } from "../util/notify";
+import PageHeader from "./PageHeader";
 import PageLayout from "./PageLayout";
 import SectionHeader from "./SectionHeader";
 import ModDetails from "./ModDetails";
@@ -682,27 +683,20 @@ export default function ModPackViewPage() {
 	let nav = [{ name: "Mods", path: "/mods" }, { name: "Mod Packs" }, { name: modPack.name || modPackId }];
 	if (modifiedModPack.loading) {
 		return <PageLayout nav={nav}>
-			<PageHeader
-				className="site-page-header"
-				title={modPackId}
-			/>
+			<PageHeader title={modPackId} />
 			<Spin size="large" />
 		</PageLayout>;
 	}
 
 	if (modifiedModPack.missing) {
 		return <PageLayout nav={nav}>
-			<PageHeader
-				className="site-page-header"
-				title="Mod Pack Not Found"
-			/>
+			<PageHeader title="Mod Pack Not Found" />
 			<p>Mod pack with id {modPackId} was not found on the controller.</p>
 		</PageLayout>;
 	}
 
 	return <PageLayout nav={nav}>
 		<PageHeader
-			className="site-page-header"
 			title={modPack.name}
 			extra={<Space>
 				<ExportButton modPack={modifiedModPack}/>

packages/web_ui/src/components/ModsPage.jsx

@@ -1,6 +1,6 @@
 import React, { Fragment, useState, useContext } from "react";
 import { useHistory } from "react-router-dom";
-import { Button, Form, Input, Modal, PageHeader, Popconfirm, Space, Table, Typography, Upload } from "antd";
+import { Button, Form, Input, Modal, Popconfirm, Space, Table, Typography, Upload } from "antd";
 import ImportOutlined from "@ant-design/icons/ImportOutlined";
 import PlusOutlined from "@ant-design/icons/PlusOutlined";
 import UploadOutlined from "@ant-design/icons/UploadOutlined";
@@ -12,6 +12,7 @@ import { useModList } from "../model/mods";
 import { useModPackList } from "../model/mod_pack";
 import { notifyErrorHandler } from "../util/notify";
 import ControlContext from "./ControlContext";
+import PageHeader from "./PageHeader";
 import PageLayout from "./PageLayout";
 import PluginExtra from "./PluginExtra";
 import SectionHeader from "./SectionHeader";
@@ -184,10 +185,7 @@ export default function ModsPage() {
 	}
 
 	return <PageLayout nav={[{ name: "Mods" }]}>
-		<PageHeader
-			className="site-page-header"
-			title="Mods"
-		/>
+		<PageHeader title="Mods" />
 		<SectionHeader
 			title="Mod Packs"
 			extra={<Space>

packages/web_ui/src/components/PageHeader.jsx

@@ -0,0 +1,8 @@
+import React from "react";
+
+export default function PageHeader(props) {
+	return <div className="page-header">
+		<h2 className="page-header-title">{props.title}</h2>
+		{props.extra && <div className="page-header-extra">{props.extra}</div>}
+	</div>;
+}

packages/web_ui/src/components/RoleViewPage.jsx

@@ -1,12 +1,13 @@
 import React, { useEffect, useContext, useState } from "react";
 import { useHistory, useParams } from "react-router-dom";
-import { Button, Checkbox, Form, Input, PageHeader, Popconfirm, Spin } from "antd";
+import { Button, Checkbox, Form, Input, Popconfirm, Spin } from "antd";
 import DeleteOutlined from "@ant-design/icons/DeleteOutlined";
 
 import { libData, libUsers } from "@clusterio/lib";
 
 import { useAccount } from "../model/account";
 import ControlContext from "./ControlContext";
+import PageHeader from "./PageHeader";
 import PageLayout from "./PageLayout";
 import PluginExtra from "./PluginExtra";
 import { notifyErrorHandler } from "../util/notify";
@@ -53,20 +54,14 @@ export default function RoleViewPage() {
 	let nav = [{ name: "Roles", path: "/roles" }, { name: role["name"] || roleId }];
 	if (role.loading) {
 		return <PageLayout nav={nav}>
-			<PageHeader
-				className="site-page-header"
-				title={roleId}
-			/>
+			<PageHeader title={roleId} />
 			<Spin size="large" />
 		</PageLayout>;
 	}
 
 	if (role.missing) {
 		return <PageLayout nav={nav}>
-			<PageHeader
-				className="site-page-header"
-				title="Role not found"
-			/>
+			<PageHeader title="Role not found" />
 			<p>Role with id {roleId} was not found on the controller.</p>
 		</PageLayout>;
 	}
@@ -101,7 +96,6 @@ export default function RoleViewPage() {
 			}}
 		>
 			<PageHeader
-				className="site-page-header"
 				title={role["name"]}
 				extra={<>
 					{canUpdate && <Button type={edited ? "primary" : "default"} htmlType="submit">Apply</Button>}

packages/web_ui/src/components/RolesPage.jsx

@@ -1,12 +1,13 @@
 import React, { useContext, useEffect, useState } from "react";
 import { useHistory } from "react-router-dom";
-import { Button, Form, Input, Modal, PageHeader, Table } from "antd";
+import { Button, Form, Input, Modal, Table } from "antd";
 
 import { libData } from "@clusterio/lib";
 
 import { useAccount } from "../model/account";
 import ControlContext from "./ControlContext";
 import { notifyErrorHandler } from "../util/notify";
+import PageHeader from "./PageHeader";
 import PageLayout from "./PageLayout";
 import PluginExtra from "./PluginExtra";
 
@@ -73,7 +74,6 @@ export default function RolesPage() {
 
 	return <PageLayout nav={[{ name: "Roles" }]}>
 		<PageHeader
-			className="site-page-header"
 			title="Roles"
 			extra={account.hasPermission("core.role.create") && <CreateRoleButton />}
 		/>

packages/web_ui/src/components/UserViewPage.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useContext, useState } from "react";
 import { useHistory, useParams } from "react-router-dom";
 import {
-	Button, Col, Descriptions, Form, Input, PageHeader, Popconfirm,
+	Button, Col, Descriptions, Form, Input, Popconfirm,
 	Row, Table, Tag, Select, Space, Spin, Switch,
 } from "antd";
 import DeleteOutlined from "@ant-design/icons/DeleteOutlined";
@@ -11,6 +11,7 @@ import { libErrors, libData } from "@clusterio/lib";
 import { useAccount } from "../model/account";
 import { useInstanceList } from "../model/instance";
 import ControlContext from "./ControlContext";
+import PageHeader from "./PageHeader";
 import PageLayout from "./PageLayout";
 import PluginExtra from "./PluginExtra";
 import SectionHeader from "./SectionHeader";
@@ -62,20 +63,14 @@ export default function UserViewPage() {
 	let nav = [{ name: "Users", path: "/users" }, { name: userName }];
 	if (user.loading) {
 		return <PageLayout nav={nav}>
-			<PageHeader
-				className="site-page-header"
-				title={userName}
-			/>
+			<PageHeader title={userName} />
 			<Spin size="large" />
 		</PageLayout>;
 	}
 
 	if (user.missing) {
 		return <PageLayout nav={nav}>
-			<PageHeader
-				className="site-page-header"
-				title="User not found"
-			/>
+			<PageHeader title="User not found" />
 			<p>User with name {userName} was not found on the controller.</p>
 		</PageLayout>;
 	}
@@ -112,7 +107,6 @@ export default function UserViewPage() {
 
 	return <PageLayout nav={nav}>
 		<PageHeader
-			className="site-page-header"
 			title={<Space>
 				{userName}
 				<span>

packages/web_ui/src/components/UsersPage.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useContext, useState } from "react";
 import { useHistory } from "react-router-dom";
-import { Button, Form, Input, Modal, PageHeader, Space, Table, Tag } from "antd";
+import { Button, Form, Input, Modal, Space, Table, Tag } from "antd";
 
 import { libData } from "@clusterio/lib";
 
@@ -8,6 +8,7 @@ import { useAccount } from "../model/account";
 import ControlContext from "./ControlContext";
 import { notifyErrorHandler } from "../util/notify";
 import { formatDuration } from "../util/time_format";
+import PageHeader from "./PageHeader";
 import PageLayout from "./PageLayout";
 import PluginExtra from "./PluginExtra";
 import { formatLastSeen, sortLastSeen, useUserList } from "../model/user";
@@ -73,7 +74,6 @@ export default function UsersPage() {
 
 	return <PageLayout nav={[{ name: "Users" }]}>
 		<PageHeader
-			className="site-page-header"
 			title="Users"
 			extra={account.hasPermission("core.user.create") && <CreateUserButton />}
 		/>

packages/web_ui/src/index.css

@@ -67,29 +67,43 @@ body {
 	padding-right: 64px;
 }
 
-.site-page-header {
+.page-header {
 	padding: 0 0 16px;
 }
 
-.section-header {
+.site-layout-content > h2:first-child {
+	margin-top: 0;
+}
+
+.section-header, .page-header {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
+}
+
+.section-header {
 	margin-top: 16px;
 	margin-bottom: 8px;
 }
 
-.section-header-title {
+.section-header-title, .page-header-title {
 	flex: auto;
 	overflow: hidden;
-	font-weight: bold;
-	font-size: 16px;
-	line-height: 1.5715;
 	white-space: nowrap;
 	text-overflow: ellipsis;
 }
 
-.section-header-extra {
+.section-header-title {
+	font-weight: bold;
+	font-size: 16px;
+	line-height: 1.5715;
+}
+
+.page-header-title {
+	margin: 4px 0;
+}
+
+.section-header-extra, .page-header-extra {
 	margin-left: auto;
 }
 

packages/web_ui/src/index.jsx

@@ -23,6 +23,7 @@ export { default as InstanceStatusTag } from "./components/InstanceStatusTag";
 export { default as StartStopInstanceButton } from "./components/StartStopInstanceButton";
 export { statusColors } from "./components/InstanceStatusTag";
 
+export { default as PageHeader } from "./components/PageHeader";
 export { default as PageLayout } from "./components/PageLayout";
 export { default as SavesList } from "./components/SavesList";
 export { default as SectionHeader } from "./components/SectionHeader";