From eca3f1a92ce1bf3f29020e8dba683e782808d2d3 Mon Sep 17 00:00:00 2001 From: fantonangeli Date: Sun, 8 Sep 2024 22:50:35 +0200 Subject: [PATCH] topbar restyle --- .../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 +- ...wManagementConsoleLogo.svg => favicon.svg} | 0 .../webpack.config.ts | 1 + pnpm-lock.yaml | 3 + 9 files changed, 99 insertions(+), 23 deletions(-) create mode 100644 packages/sonataflow-management-console-webapp/src/components/pages/BasePage.tsx rename packages/sonataflow-management-console-webapp/src/static/{sonataflowManagementConsoleLogo.svg => favicon.svg} (100%) 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 = ({ ouiaId, ouiaSafe }) = - + ; @@ -42,24 +40,9 @@ interface IOwnProps { } const ManagementConsole: React.FC = ({ apolloClient, userContext, children }) => { - const renderPage = useCallback( - (routeProps) => { - return ( - routeProps.history.push("/")} - withHeader={true} - PageNav={} - ouiaId="management-console" - > - {children} - - ); - }, - [children] - ); + const renderPage = useCallback(() => { + return {children}; + }, [children]); return ( 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( + () => ( + + + + + + + + history.push({ pathname: routes.home.path({}) })} + style={{ textDecoration: "none" }} + > + + + SonataFlow Management Console + + + + + + + + ), + [] + ); + + return ( + } theme="dark" />} + header={masthead} + isManagedSidebar + > + {props.children} + + ); +} 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 @@ SonataFlow Management Console - + 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(react-dom@17.0.2(react@17.0.2))(react@17.0.2) + '@patternfly/react-icons': + specifier: ^4.93.6 + version: 4.93.6(react-dom@17.0.2(react@17.0.2))(react@17.0.2) apollo-cache-inmemory: specifier: 1.6.6 version: 1.6.6(graphql@14.3.1)