Do not merge: test PR

packages/runtime-tools-components/config/declare.d.ts

@@ -0,0 +1,9 @@
+declare module "*.svg" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.png" {
+  const content1: string;
+  export default content1;
+}

packages/runtime-tools-components/package.json

@@ -26,47 +26,44 @@
   },
   "dependencies": {
     "@kie-tools-core/editor": "workspace:*",
-    "@kie-tools-core/envelope": "workspace:*",
-    "@kie-tools-core/envelope-bus": "workspace:*",
-    "@kie-tools-core/i18n": "workspace:*",
-    "@kie-tools-core/monaco-editor": "workspace:*",
-    "@kie-tools-core/notifications": "workspace:*",
     "@kie-tools-core/operating-system": "workspace:*",
     "@kie-tools-core/patternfly-base": "workspace:*",
-    "@kie-tools/i18n-common-dictionary": "workspace:*",
     "@kie-tools/json-yaml-language-service": "workspace:*",
     "@kie-tools/runtime-tools-gateway-api": "workspace:*",
     "@kie-tools/uniforms-patternfly": "workspace:*",
     "@patternfly/react-core": "^4.276.6",
     "@patternfly/react-icons": "^4.93.6",
+    "@patternfly/react-styles": "^4.92.6",
     "@patternfly/react-table": "^4.112.39",
     "ajv": "^6.12.6",
     "copyfiles": "^2.4.1",
+    "history": "^4.9.0",
     "lodash": "^4.17.21",
     "monaco-editor": "^0.39.0",
     "react": "^17.0.2",
     "react-datetime-picker": "^3.5.0",
     "react-dom": "^17.0.2",
     "react-moment": "0.9.7",
+    "react-router": "^5.2.1",
+    "react-router-dom": "^5.2.1",
     "uniforms": "^3.10.2",
     "uniforms-bridge-json-schema": "^3.10.2",
     "uuid": "^8.3.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.0",
-    "@babel/preset-env": "^7.16.0",
-    "@babel/preset-react": "^7.16.0",
-    "@kie-tools-core/webpack-base": "workspace:*",
     "@kie-tools/eslint": "workspace:*",
     "@kie-tools/root-env": "workspace:*",
     "@kie-tools/tsconfig": "workspace:*",
     "@testing-library/jest-dom": "^5.16.1",
+    "@types/history": "^4.7.3",
     "@types/jest": "^26.0.23",
     "@types/jest-when": "^2.7.4",
     "@types/lodash": "^4.14.168",
     "@types/react": "^17.0.6",
     "@types/react-datetime-picker": "^3.4.1",
     "@types/react-dom": "^17.0.5",
+    "@types/react-router": "^5.1.14",
+    "@types/react-router-dom": "^5.1.7",
     "@types/testing-library__jest-dom": "^5.9.1",
     "@types/uuid": "^8.3.0",
     "jest": "^26.6.3",

packages/runtime-tools-components/src/common/components/PageLayout/PageLayout.tsx

@@ -0,0 +1,81 @@
+/*
+ * 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 { Page, PageSidebar } from "@patternfly/react-core/dist/js/components/Page";
+import React, { useEffect, useState } from "react";
+import { componentOuiaProps, ouiaAttribute, OUIAProps } from "../../ouiaTools";
+import "../styles.css";
+
+interface IOwnProps {
+  children: React.ReactNode;
+  BrandSrc?: string;
+  PageNav: React.ReactNode;
+  pageNavOpen?: boolean;
+  BrandAltText?: string;
+  BrandClick?: () => void;
+}
+
+const PageLayout: React.FC<IOwnProps & OUIAProps> = ({
+  children,
+  BrandSrc,
+  PageNav,
+  pageNavOpen,
+  BrandAltText,
+  BrandClick,
+  ouiaId,
+  ouiaSafe,
+}) => {
+  const pageId = "main-content-page-layout-default-nav";
+
+  const [isNavOpen, setIsNavOpen] = useState(pageNavOpen != undefined ? pageNavOpen : true);
+  const onNavToggle = () => {
+    setIsNavOpen(!isNavOpen);
+  };
+
+  useEffect(() => {
+    if (document.getElementById(pageId)) {
+      document.getElementById(pageId)?.setAttribute("data-ouia-main", "true");
+    }
+  });
+
+  const Sidebar = (
+    <PageSidebar
+      nav={PageNav}
+      isNavOpen={isNavOpen}
+      theme="dark"
+      {...ouiaAttribute("data-ouia-navigation", "true")}
+      data-testid="page-sidebar"
+    />
+  );
+
+  return (
+    <React.Fragment>
+      <Page
+        mainContainerId={pageId}
+        sidebar={Sidebar}
+        className="kogito-consoles-common--PageLayout"
+        {...componentOuiaProps(ouiaId, "page", ouiaSafe)}
+      >
+        {children}
+      </Page>
+    </React.Fragment>
+  );
+};
+
+export default PageLayout;

packages/runtime-tools-components/src/common/components/PageLayout/index.ts

@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+
+export { default as PageLayout } from "./PageLayout";

packages/runtime-tools-components/src/common/components/PageSectionHeader/PageSectionHeader.tsx

@@ -0,0 +1,65 @@
+/*
+ * 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 React from "react";
+import { Link } from "react-router-dom";
+import { PageSection } from "@patternfly/react-core/dist/js/components/Page";
+import { Breadcrumb, BreadcrumbItem } from "@patternfly/react-core/dist/js/components/Breadcrumb";
+import { PageTitle } from "../PageTitle";
+import { componentOuiaProps, OUIAProps } from "../../ouiaTools";
+import * as H from "history";
+
+type pathType = Pick<H.Location, "pathname" | "state">;
+interface PageSectionHeaderProps {
+  titleText: string;
+  breadcrumbText?: string[];
+  breadcrumbPath?: Array<pathType | string>;
+}
+export const PageSectionHeader: React.FC<PageSectionHeaderProps & OUIAProps> = ({
+  titleText,
+  breadcrumbText,
+  breadcrumbPath,
+  ouiaId,
+  ouiaSafe,
+}) => {
+  const renderBreadcrumb = (): JSX.Element[] => {
+    const items: JSX.Element[] = [];
+    breadcrumbText?.forEach((text, index) => {
+      if (index === breadcrumbText.length - 1) {
+        items.push(
+          <BreadcrumbItem key={index} isActive>
+            {text}
+          </BreadcrumbItem>
+        );
+      } else {
+        items.push(
+          <BreadcrumbItem key={index}>
+            <Link to={breadcrumbPath![index]}>{text}</Link>
+          </BreadcrumbItem>
+        );
+      }
+    });
+    return items;
+  };
+  return (
+    <PageSection variant="light" {...componentOuiaProps(ouiaId, "page-section-header", ouiaSafe)}>
+      {breadcrumbText && breadcrumbPath && <Breadcrumb>{renderBreadcrumb()}</Breadcrumb>}
+      <PageTitle title={titleText} />
+    </PageSection>
+  );
+};

packages/runtime-tools-components/src/common/components/PageSectionHeader/index.ts

@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+
+export * from "./PageSectionHeader";

packages/runtime-tools-components/src/common/components/PageTitle/PageTitle.tsx

@@ -0,0 +1,41 @@
+/*
+ * 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 React from "react";
+import { Flex, FlexItem } from "@patternfly/react-core/dist/js/layouts/Flex";
+import { Title } from "@patternfly/react-core/dist/js/components/Title";
+import { componentOuiaProps, OUIAProps } from "../../ouiaTools";
+
+export interface IOwnProps {
+  title: any;
+  extra?: JSX.Element;
+}
+
+export const PageTitle: React.FC<IOwnProps & OUIAProps> = ({ title, extra, ouiaId, ouiaSafe }) => {
+  return (
+    <Flex {...componentOuiaProps(ouiaId, "page-title", ouiaSafe)}>
+      <FlexItem spacer={{ default: "spacerSm" }}>
+        <Title headingLevel="h1" size="4xl">
+          {title}
+        </Title>
+      </FlexItem>
+      {extra ? <FlexItem spacer={{ default: "spacerSm" }}>{extra}</FlexItem> : null}
+    </Flex>
+  );
+};

packages/runtime-tools-components/src/common/components/PageTitle/index.ts

@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+
+export * from "./PageTitle";

packages/runtime-tools-components/src/common/components/styles.css

@@ -36,3 +36,10 @@
   height: 350px;
   padding: 5px;
 }
+.kogito-consoles-common--aboutModalBox .pf-c-about-modal-box__hero {
+  background-attachment: unset;
+}
+
+.kogito-consoles-common--PageLayout .pf-c-page__header-brand-link .pf-c-brand {
+  --pf-c-page__header-brand-link--c-brand--MaxHeight: 42px;
+}

packages/runtime-tools-components/src/common/contexts/BrandContext/BrandContext.ts

@@ -0,0 +1,29 @@
+/*
+ * 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 React, { useContext } from "react";
+
+export interface Brand {
+  imageSrc: string;
+  altText: string;
+}
+
+export const BrandContext = React.createContext<Brand>({} as Brand);
+
+export const useBrandContext = (): Brand => useContext<Brand>(BrandContext);

packages/runtime-tools-components/tsconfig.json

@@ -8,5 +8,5 @@
     "target": "es6",
     "moduleResolution": "node"
   },
-  "include": ["src"]
+  "include": ["src", "./config/declare.d.ts"]
 }