This is an automated email from the ASF dual-hosted git repository.
tiagobento pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-kie-tools.git
The following commit(s) were added to refs/heads/main by this push:
new 30505c36047 kie-tools-issues#2567:
sonataflow-management-console-webapp topbar restyle (#2566)
30505c36047 is described below
commit 30505c36047dd72f729b315d2a00371c646d8f3c
Author: Fabrizio Antonangeli <[email protected]>
AuthorDate: Mon Sep 9 16:24:53 2024 +0200
kie-tools-issues#2567: sonataflow-management-console-webapp topbar restyle
(#2566)
---
.../common/components/PageToolbar/PageToolbar.tsx | 2 +-
.../package.json | 1 +
.../ManagementConsole/ManagementConsole.tsx | 25 ++-----
.../src/components/pages/BasePage.tsx | 78 ++++++++++++++++++++++
.../src/components/styles.css | 10 +++
.../src/index.html | 2 +-
...taflowManagementConsoleLogo.svg => favicon.svg} | 0
.../webpack.config.ts | 1 +
pnpm-lock.yaml | 3 +
9 files changed, 99 insertions(+), 23 deletions(-)
diff --git
a/packages/runtime-tools-components/src/common/components/PageToolbar/PageToolbar.tsx
b/packages/runtime-tools-components/src/common/components/PageToolbar/PageToolbar.tsx
index 1b60f64470b..48411dfb8e5 100755
---
a/packages/runtime-tools-components/src/common/components/PageToolbar/PageToolbar.tsx
+++
b/packages/runtime-tools-components/src/common/components/PageToolbar/PageToolbar.tsx
@@ -95,7 +95,7 @@ const PageToolbar: React.FunctionComponent<OUIAProps> = ({
ouiaId, ouiaSafe }) =
<React.Fragment>
<AboutModalBox isOpenProp={modalToggle}
handleModalToggleProp={handleAboutModalToggle} />
<Toolbar {...componentOuiaProps(ouiaId, "page-toolbar", ouiaSafe)}>
- <ToolbarGroup>
+ <ToolbarGroup alignment={{ default: "alignRight" }}>
<ToolbarItem className={css(accessibleStyles.screenReader,
accessibleStyles.visibleOnMd)}>
<Dropdown
isPlain
diff --git a/packages/sonataflow-management-console-webapp/package.json
b/packages/sonataflow-management-console-webapp/package.json
index 981efbee3a7..3704940a7a2 100644
--- a/packages/sonataflow-management-console-webapp/package.json
+++ b/packages/sonataflow-management-console-webapp/package.json
@@ -42,6 +42,7 @@
"@kie-tools/serverless-workflow-text-editor": "workspace:*",
"@patternfly/patternfly": "^4.224.2",
"@patternfly/react-core": "^4.276.6",
+ "@patternfly/react-icons": "^4.93.6",
"apollo-cache-inmemory": "1.6.6",
"apollo-client": "2.6.10",
"apollo-link-context": "^1.0.20",
diff --git
a/packages/sonataflow-management-console-webapp/src/components/console/ManagementConsole/ManagementConsole.tsx
b/packages/sonataflow-management-console-webapp/src/components/console/ManagementConsole/ManagementConsole.tsx
index 956f1ca73e1..41372cffaa7 100644
---
a/packages/sonataflow-management-console-webapp/src/components/console/ManagementConsole/ManagementConsole.tsx
+++
b/packages/sonataflow-management-console-webapp/src/components/console/ManagementConsole/ManagementConsole.tsx
@@ -25,15 +25,13 @@ import {
KogitoAppContextProvider,
UserContext,
} from "@kie-tools/runtime-tools-components/dist/contexts/KogitoAppContext";
-import { PageLayout } from
"@kie-tools/runtime-tools-components/dist/components/PageLayout";
import { WorkflowListContextProviderWithApolloClient } from
"@kie-tools/runtime-tools-swf-webapp-components/dist/WorkflowList";
import { WorkflowDefinitionListContextProviderWithApolloClient } from
"@kie-tools/runtime-tools-swf-webapp-components/dist/WorkflowDefinitionList";
import { WorkflowFormContextProvider } from
"@kie-tools/runtime-tools-swf-webapp-components/dist/WorkflowForm";
import { WorkflowDetailsContextProviderWithApolloClient } from
"@kie-tools/runtime-tools-swf-webapp-components/dist/WorkflowDetails";
import { CloudEventFormContextProvider } from
"@kie-tools/runtime-tools-swf-webapp-components/dist/CloudEventForm";
-import ManagementConsoleNav from
"../ManagementConsoleNav/ManagementConsoleNav";
-import managementConsoleLogo from
"../../../static/sonataflowManagementConsoleLogo.svg";
import { GlobalAlertsContextProvider } from
"../../../alerts/GlobalAlertsContext";
+import { BasePage } from "../../pages/BasePage";
interface IOwnProps {
apolloClient: ApolloClient<any>;
@@ -42,24 +40,9 @@ interface IOwnProps {
}
const ManagementConsole: React.FC<IOwnProps> = ({ apolloClient, userContext,
children }) => {
- const renderPage = useCallback(
- (routeProps) => {
- return (
- <PageLayout
- BrandSrc={managementConsoleLogo}
- pageNavOpen={true}
- BrandAltText={"SonataFlow Management Console Logo"}
- BrandClick={() => routeProps.history.push("/")}
- withHeader={true}
- PageNav={<ManagementConsoleNav
pathname={routeProps.location.pathname} />}
- ouiaId="management-console"
- >
- {children}
- </PageLayout>
- );
- },
- [children]
- );
+ const renderPage = useCallback(() => {
+ return <BasePage>{children}</BasePage>;
+ }, [children]);
return (
<ApolloProvider client={apolloClient}>
diff --git
a/packages/sonataflow-management-console-webapp/src/components/pages/BasePage.tsx
b/packages/sonataflow-management-console-webapp/src/components/pages/BasePage.tsx
new file mode 100644
index 00000000000..88453a225d7
--- /dev/null
+++
b/packages/sonataflow-management-console-webapp/src/components/pages/BasePage.tsx
@@ -0,0 +1,78 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import * as React from "react";
+import { Brand } from "@patternfly/react-core/dist/js/components/Brand";
+import {
+ Masthead,
+ MastheadBrand,
+ MastheadContent,
+ MastheadMain,
+ MastheadToggle,
+} from "@patternfly/react-core/dist/js/components/Masthead";
+import { Page, PageToggleButton } from
"@patternfly/react-core/dist/js/components/Page";
+import { PageSidebar } from
"@patternfly/react-core/dist/js/components/Page/PageSidebar";
+import { Text, TextContent, TextVariants } from
"@patternfly/react-core/dist/js/components/Text";
+import { BarsIcon } from "@patternfly/react-icons/dist/js/icons";
+import PageToolbar from
"@kie-tools/runtime-tools-components/dist/components/PageToolbar/PageToolbar";
+import { useMemo } from "react";
+import { useHistory } from "react-router";
+import { routes } from "../../navigation/Routes";
+import { ManagementConsoleNav } from "../console";
+
+export function BasePage(props: { children?: React.ReactNode }) {
+ const history = useHistory();
+
+ const masthead = useMemo(
+ () => (
+ <Masthead aria-label={"Page header"} className="app--masthead">
+ <MastheadToggle>
+ <PageToggleButton variant="plain" aria-label="Global navigation">
+ <BarsIcon />
+ </PageToggleButton>
+ </MastheadToggle>
+ <MastheadMain>
+ <MastheadBrand
+ onClick={() => history.push({ pathname: routes.home.path({}) })}
+ style={{ textDecoration: "none" }}
+ >
+ <Brand className="sonataflow-management-console-common--brand"
src="favicon.svg" alt="Kie logo"></Brand>
+ <TextContent className="brand-name">
+ <Text component={TextVariants.h1}>SonataFlow Management
Console</Text>
+ </TextContent>
+ </MastheadBrand>
+ </MastheadMain>
+ <MastheadContent>
+ <PageToolbar />
+ </MastheadContent>
+ </Masthead>
+ ),
+ []
+ );
+
+ return (
+ <Page
+ sidebar={<PageSidebar nav={<ManagementConsoleNav
pathname={history.location.pathname} />} theme="dark" />}
+ header={masthead}
+ isManagedSidebar
+ >
+ {props.children}
+ </Page>
+ );
+}
diff --git
a/packages/sonataflow-management-console-webapp/src/components/styles.css
b/packages/sonataflow-management-console-webapp/src/components/styles.css
index aa2fb0be83e..fbc86ba2c33 100644
--- a/packages/sonataflow-management-console-webapp/src/components/styles.css
+++ b/packages/sonataflow-management-console-webapp/src/components/styles.css
@@ -16,6 +16,16 @@
* specific language governing permissions and limitations
* under the License.
*/
+.sonataflow-management-console-common--brand {
+ vertical-align: top;
+ height: 28.6px;
+}
+
+.brand-name {
+ color: #fff;
+ padding: 0 var(--pf-global--spacer--sm) 0 var(--pf-global--spacer--sm);
+}
+
.kogito-management-console__card-size {
height: 100%;
position: relative;
diff --git a/packages/sonataflow-management-console-webapp/src/index.html
b/packages/sonataflow-management-console-webapp/src/index.html
index e5399705478..d81b588c5fe 100644
--- a/packages/sonataflow-management-console-webapp/src/index.html
+++ b/packages/sonataflow-management-console-webapp/src/index.html
@@ -25,7 +25,7 @@
<title>SonataFlow Management Console</title>
<meta id="appName" name="application-name" content="Patternfly Seed" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <link rel="icon" href="/favicon.ico" type="image/ico" />
+ <link rel="shortcut icon" type="image/x-icon" href="favicon.svg" />
</head>
<body class="pf-m-redhat-font">
<noscript>Enabling JavaScript is required to run this app.</noscript>
diff --git
a/packages/sonataflow-management-console-webapp/src/static/sonataflowManagementConsoleLogo.svg
b/packages/sonataflow-management-console-webapp/src/static/favicon.svg
similarity index 100%
rename from
packages/sonataflow-management-console-webapp/src/static/sonataflowManagementConsoleLogo.svg
rename to packages/sonataflow-management-console-webapp/src/static/favicon.svg
diff --git a/packages/sonataflow-management-console-webapp/webpack.config.ts
b/packages/sonataflow-management-console-webapp/webpack.config.ts
index 64b6a69f93c..915d98d9708 100644
--- a/packages/sonataflow-management-console-webapp/webpack.config.ts
+++ b/packages/sonataflow-management-console-webapp/webpack.config.ts
@@ -55,6 +55,7 @@ export default async (env: any, argv: any) => {
new CopyPlugin({
patterns: [
{ from: "./resources", to: "./resources" },
+ { from: "./src/static/favicon.svg", to: "./favicon.svg" },
{
from:
"./resources/serverless-workflow-combined-editor-envelope.html",
to: "./serverless-workflow-combined-editor-envelope.html",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 34bb97c7a6a..aea70d28694 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10925,6 +10925,9 @@ importers:
'@patternfly/react-core':
specifier: ^4.276.6
version: 4.276.6([email protected]([email protected]))([email protected])
+ '@patternfly/react-icons':
+ specifier: ^4.93.6
+ version: 4.93.6([email protected]([email protected]))([email protected])
apollo-cache-inmemory:
specifier: 1.6.6
version: 1.6.6([email protected])
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
