kie-tools-issues#2567: sonataflow-management-console-webapp topbar re…

…style (#2566)

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

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",

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}>

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>
+  );
+}

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;

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>

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",