From 8d98eaf3a59548d25ad40d931b14abde72fe1a0d Mon Sep 17 00:00:00 2001 From: Hornwitser Date: Thu, 27 Jul 2023 17:37:27 +0200 Subject: [PATCH] Reimplement PageHeader Implement our own version ofwhe PageHeader component, due to it being removed from ant design v5. --- .../web_ui/src/components/HostViewPage.jsx | 13 +++------ packages/web_ui/src/components/HostsPage.jsx | 4 +-- .../src/components/InstanceViewPage.jsx | 4 +-- .../web_ui/src/components/InstancesPage.jsx | 4 +-- .../web_ui/src/components/ModPackViewPage.jsx | 14 +++------- packages/web_ui/src/components/ModsPage.jsx | 8 ++---- packages/web_ui/src/components/PageHeader.jsx | 8 ++++++ .../web_ui/src/components/RoleViewPage.jsx | 14 +++------- packages/web_ui/src/components/RolesPage.jsx | 4 +-- .../web_ui/src/components/UserViewPage.jsx | 14 +++------- packages/web_ui/src/components/UsersPage.jsx | 4 +-- packages/web_ui/src/index.css | 28 ++++++++++++++----- packages/web_ui/src/index.jsx | 1 + 13 files changed, 59 insertions(+), 61 deletions(-) create mode 100644 packages/web_ui/src/components/PageHeader.jsx diff --git a/packages/web_ui/src/components/HostViewPage.jsx b/packages/web_ui/src/components/HostViewPage.jsx index 51f1db69..7548be88 100644 --- a/packages/web_ui/src/components/HostViewPage.jsx +++ b/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 - +

Host with id {hostId} was not found on the controller.

; } return - + {host["name"]} diff --git a/packages/web_ui/src/components/HostsPage.jsx b/packages/web_ui/src/components/HostsPage.jsx index e58d582a..4163ce54 100644 --- a/packages/web_ui/src/components/HostsPage.jsx +++ b/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 } /> diff --git a/packages/web_ui/src/components/InstanceViewPage.jsx b/packages/web_ui/src/components/InstanceViewPage.jsx index 1c5330df..8ff8ccf0 100644 --- a/packages/web_ui/src/components/InstanceViewPage.jsx +++ b/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 diff --git a/packages/web_ui/src/components/InstancesPage.jsx b/packages/web_ui/src/components/InstancesPage.jsx index 1a33e9d7..72670aca 100644 --- a/packages/web_ui/src/components/InstancesPage.jsx +++ b/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 {account.hasPermission("core.instance.create") && } diff --git a/packages/web_ui/src/components/ModPackViewPage.jsx b/packages/web_ui/src/components/ModPackViewPage.jsx index a9947885..ed2e117c 100644 --- a/packages/web_ui/src/components/ModPackViewPage.jsx +++ b/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 - + ; } if (modifiedModPack.missing) { return - +

Mod pack with id {modPackId} was not found on the controller.

; } return diff --git a/packages/web_ui/src/components/ModsPage.jsx b/packages/web_ui/src/components/ModsPage.jsx index 041168f5..15dd9a49 100644 --- a/packages/web_ui/src/components/ModsPage.jsx +++ b/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 - + diff --git a/packages/web_ui/src/components/PageHeader.jsx b/packages/web_ui/src/components/PageHeader.jsx new file mode 100644 index 00000000..14c42271 --- /dev/null +++ b/packages/web_ui/src/components/PageHeader.jsx @@ -0,0 +1,8 @@ +import React from "react"; + +export default function PageHeader(props) { + return
+

{props.title}

+ {props.extra &&
{props.extra}
} +
; +} diff --git a/packages/web_ui/src/components/RoleViewPage.jsx b/packages/web_ui/src/components/RoleViewPage.jsx index a8f8248c..275fed31 100644 --- a/packages/web_ui/src/components/RoleViewPage.jsx +++ b/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 - + ; } if (role.missing) { return - +

Role with id {roleId} was not found on the controller.

; } @@ -101,7 +96,6 @@ export default function RoleViewPage() { }} > {canUpdate && } diff --git a/packages/web_ui/src/components/RolesPage.jsx b/packages/web_ui/src/components/RolesPage.jsx index e78658bc..0cd509f1 100644 --- a/packages/web_ui/src/components/RolesPage.jsx +++ b/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 } /> diff --git a/packages/web_ui/src/components/UserViewPage.jsx b/packages/web_ui/src/components/UserViewPage.jsx index 76b203f6..e8740b61 100644 --- a/packages/web_ui/src/components/UserViewPage.jsx +++ b/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 - + ; } if (user.missing) { return - +

User with name {userName} was not found on the controller.

; } @@ -112,7 +107,6 @@ export default function UserViewPage() { return {userName} diff --git a/packages/web_ui/src/components/UsersPage.jsx b/packages/web_ui/src/components/UsersPage.jsx index 6475e2c5..cfc72df3 100644 --- a/packages/web_ui/src/components/UsersPage.jsx +++ b/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 } /> diff --git a/packages/web_ui/src/index.css b/packages/web_ui/src/index.css index 267f11bf..12c56d59 100644 --- a/packages/web_ui/src/index.css +++ b/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; } diff --git a/packages/web_ui/src/index.jsx b/packages/web_ui/src/index.jsx index 70bdc2e0..868f907f 100644 --- a/packages/web_ui/src/index.jsx +++ b/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";