This is an automated email from the ASF dual-hosted git repository. porcelli pushed a commit to branch KOGITO-8015-feature-preview in repository https://gitbox.apache.org/repos/asf/incubator-kie-tools-temporary-rnd-do-not-use.git
commit 888e11c9f61769d6b8b7089da9f9c4fa5b336382 Author: Fabrizio Antonangeli <[email protected]> AuthorDate: Thu Feb 9 10:27:50 2023 +0100 KOGITO-8149: Refactor Home (now Overview) according to UX redesign (#1449) * Add top banner * Add sidebar title * manage Buttons responsiveness * Fix "New Dashboard" button overlap when sidebar is open on breakpoint lg * Refactored import card * Video section * FIX: Overview: visualization issues with sidebar and quickstarts open * Add kie-docs button * Empty commit * -resize logo -add ExternalLinkAltIcon to "document" button -replaced placeholder with real video -fix typo -add reference in application-services.css comment * Uptaded YT video * Removed "/Documentation" route --- .../src/homepage/overView/ImportFromUrlCard.tsx | 3 +- .../src/homepage/overView/NewModelCard.tsx | 40 +-- .../homepage/overView/NewServerlessModelCard.tsx | 51 +-- .../src/homepage/overView/Overview.tsx | 206 ++++++++---- .../src/homepage/overView/UploadCard.tsx | 2 +- .../src/homepage/pageTemplate/OnlineEditorPage.tsx | 14 +- .../src/homepage/routes/HomePageRoutes.tsx | 11 +- .../src/homepage/uiNav/HomePageNav.tsx | 44 ++- packages/serverless-logic-web-tools/src/index.tsx | 1 + .../src/navigation/RoutesSwitch.tsx | 11 +- .../static/images/overview-banner-bg.png | Bin 0 -> 52155 bytes .../static/resources/application-services.css | 350 +++++++++++++++++++++ .../static/resources/style.css | 3 + 13 files changed, 597 insertions(+), 139 deletions(-) diff --git a/packages/serverless-logic-web-tools/src/homepage/overView/ImportFromUrlCard.tsx b/packages/serverless-logic-web-tools/src/homepage/overView/ImportFromUrlCard.tsx index f644bea22f..6379023cda 100644 --- a/packages/serverless-logic-web-tools/src/homepage/overView/ImportFromUrlCard.tsx +++ b/packages/serverless-logic-web-tools/src/homepage/overView/ImportFromUrlCard.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import { SupportedFileExtensions } from "../../extension"; import * as React from "react"; import { useRoutes } from "../../navigation/Hooks"; import { useHistory } from "react-router"; @@ -54,7 +53,7 @@ export function ImportFromUrlCard() { }, [importableUrl]); return ( - <Card isFullHeight={true} isLarge={true} isPlain={true} isSelected={url.length > 0}> + <Card isFullHeight={true} isPlain={true} isSelected={url.length > 0} isCompact> <CardTitle> <TextContent> <Text component={TextVariants.h2}> diff --git a/packages/serverless-logic-web-tools/src/homepage/overView/NewModelCard.tsx b/packages/serverless-logic-web-tools/src/homepage/overView/NewModelCard.tsx index ab39d58ade..81fd7da2c3 100644 --- a/packages/serverless-logic-web-tools/src/homepage/overView/NewModelCard.tsx +++ b/packages/serverless-logic-web-tools/src/homepage/overView/NewModelCard.tsx @@ -14,38 +14,38 @@ * limitations under the License. */ -import { SupportedFileExtensions } from "../../extension"; -import * as React from "react"; -import { useRoutes } from "../../navigation/Hooks"; +import { Button, ButtonVariant } from "@patternfly/react-core/dist/js/components/Button"; import { Card, CardBody, CardFooter, CardTitle } from "@patternfly/react-core/dist/js/components/Card"; -import { FileLabel } from "../../workspace/components/FileLabel"; import { Text, TextContent, TextVariants } from "@patternfly/react-core/dist/js/components/Text"; -import { Grid } from "@patternfly/react-core/dist/js/layouts/Grid"; +import { GridItem } from "@patternfly/react-core/dist/js/layouts/Grid"; +import * as React from "react"; import { Link } from "react-router-dom"; -import { Button, ButtonVariant } from "@patternfly/react-core/dist/js/components/Button"; +import { SupportedFileExtensions } from "../../extension"; +import { useRoutes } from "../../navigation/Hooks"; +import { FileLabel } from "../../workspace/components/FileLabel"; export function NewModelCard(props: { title: string; extension: SupportedFileExtensions; description: string }) { const routes = useRoutes(); return ( - <Card isFullHeight={true} isPlain={true} isLarge={true}> - <CardTitle> - <FileLabel style={{ fontSize: "0.6em" }} extension={props.extension} /> - </CardTitle> - <CardBody> - <TextContent> - <Text component={TextVariants.p}>{props.description}</Text> - </TextContent> - </CardBody> - <CardFooter> - <Grid> + <GridItem sm={12} md={4}> + <Card isFullHeight={true} isPlain={true} isCompact> + <CardTitle> + <FileLabel style={{ fontSize: "0.6em" }} extension={props.extension} /> + </CardTitle> + <CardBody> + <TextContent> + <Text component={TextVariants.p}>{props.description}</Text> + </TextContent> + </CardBody> + <CardFooter> <Link to={{ pathname: routes.newModel.path({ extension: props.extension }) }}> <Button variant={ButtonVariant.secondary} ouiaId={`new-${props.extension}-button`}> New {props.title} </Button> </Link> - </Grid> - </CardFooter> - </Card> + </CardFooter> + </Card> + </GridItem> ); } diff --git a/packages/serverless-logic-web-tools/src/homepage/overView/NewServerlessModelCard.tsx b/packages/serverless-logic-web-tools/src/homepage/overView/NewServerlessModelCard.tsx index 406c3825fe..a7141523cf 100644 --- a/packages/serverless-logic-web-tools/src/homepage/overView/NewServerlessModelCard.tsx +++ b/packages/serverless-logic-web-tools/src/homepage/overView/NewServerlessModelCard.tsx @@ -14,15 +14,16 @@ * limitations under the License. */ +import { Button, ButtonVariant } from "@patternfly/react-core/dist/js/components/Button"; +import { Card, CardBody, CardFooter, CardTitle } from "@patternfly/react-core/dist/js/components/Card"; +import { Text, TextContent, TextVariants } from "@patternfly/react-core/dist/js/components/Text"; +import { Flex } from "@patternfly/react-core/dist/js/layouts/Flex"; +import { GridItem } from "@patternfly/react-core/dist/js/layouts/Grid"; import * as React from "react"; +import { Link } from "react-router-dom"; import { SupportedFileExtensions } from "../../extension"; import { useRoutes } from "../../navigation/Hooks"; -import { Card, CardBody, CardFooter, CardTitle } from "@patternfly/react-core/dist/js/components/Card"; import { FileLabel } from "../../workspace/components/FileLabel"; -import { Text, TextContent, TextVariants } from "@patternfly/react-core/dist/js/components/Text"; -import { Grid, GridItem } from "@patternfly/react-core/dist/js/layouts/Grid"; -import { Link } from "react-router-dom"; -import { Button, ButtonVariant } from "@patternfly/react-core/dist/js/components/Button"; export function NewServerlessModelCard(props: { title: string; @@ -33,34 +34,36 @@ export function NewServerlessModelCard(props: { const routes = useRoutes(); return ( - <Card isFullHeight={true} isPlain={true} isLarge={true}> - <CardTitle> - <FileLabel style={{ fontSize: "0.6em" }} extension={props.jsonExtension} /> - </CardTitle> - <CardBody> - <TextContent> - <Text component={TextVariants.p}>{props.description}</Text> - </TextContent> - </CardBody> - <CardFooter> - <Grid hasGutter> - <GridItem span={12}>New {props.title}</GridItem> - <GridItem span={6}> + <GridItem sm={12} md={4}> + <Card isFullHeight={true} isPlain={true} isCompact={true}> + <CardTitle> + <FileLabel style={{ fontSize: "0.6em" }} extension={props.jsonExtension} /> + </CardTitle> + <CardBody> + <TextContent> + <Text component={TextVariants.p}>{props.description}</Text> + </TextContent> + </CardBody> + <CardFooter> + <TextContent> + <Text component={TextVariants.p}> + <b>New {props.title}</b> + </Text> + </TextContent> + <Flex> <Link to={{ pathname: routes.newModel.path({ extension: props.jsonExtension }) }}> <Button variant={ButtonVariant.secondary} ouiaId={`new-${props.jsonExtension}-button`}> JSON </Button> </Link> - </GridItem> - <GridItem span={6}> <Link to={{ pathname: routes.newModel.path({ extension: props.yamlExtension }) }}> <Button variant={ButtonVariant.secondary} ouiaId={`new-${props.yamlExtension}-button`}> YAML </Button> </Link> - </GridItem> - </Grid> - </CardFooter> - </Card> + </Flex> + </CardFooter> + </Card> + </GridItem> ); } diff --git a/packages/serverless-logic-web-tools/src/homepage/overView/Overview.tsx b/packages/serverless-logic-web-tools/src/homepage/overView/Overview.tsx index 2cdb5eda27..e286bc94c0 100644 --- a/packages/serverless-logic-web-tools/src/homepage/overView/Overview.tsx +++ b/packages/serverless-logic-web-tools/src/homepage/overView/Overview.tsx @@ -20,23 +20,34 @@ import { Grid, GridItem } from "@patternfly/react-core/dist/js/layouts/Grid"; import { Gallery } from "@patternfly/react-core/dist/js/layouts/Gallery"; import { PageSection } from "@patternfly/react-core/dist/js/components/Page"; import { Text, TextContent, TextVariants } from "@patternfly/react-core/dist/js/components/Text"; -import { Divider } from "@patternfly/react-core/dist/js/components/Divider"; import { NewServerlessModelCard } from "./NewServerlessModelCard"; -import { Card } from "@patternfly/react-core"; +import { Button, ButtonVariant, Card, CardBody } from "@patternfly/react-core/dist/js"; import { ImportFromUrlCard } from "./ImportFromUrlCard"; import { UploadCard } from "./UploadCard"; import { useRoutes } from "../../navigation/Hooks"; import { useHistory } from "react-router"; import { useQueryParam, useQueryParams } from "../../queryParams/QueryParamsContext"; import { QueryParams } from "../../navigation/Routes"; -import { useCallback } from "react"; +import { useCallback, useContext, useMemo } from "react"; import { NewModelCard } from "./NewModelCard"; +import { Title } from "@patternfly/react-core/dist/js/components/Title"; +import { Stack, StackItem } from "@patternfly/react-core/dist/js/layouts/Stack"; +import { CardHeader, CardHeaderMain, CardTitle } from "@patternfly/react-core/dist/js/components/Card"; +import { List, ListItem } from "@patternfly/react-core/dist/js/components/List"; +import { QuickStartContext, QuickStartContextValues } from "@patternfly/quickstarts"; +import { ExternalLinkAltIcon } from "@patternfly/react-icons/dist/js/icons"; -export function Overview() { +export function Overview(props: { isNavOpen: boolean }) { const routes = useRoutes(); const history = useHistory(); const expandedWorkspaceId = useQueryParam(QueryParams.EXPAND); const queryParams = useQueryParams(); + const qsContext = useContext<QuickStartContextValues>(QuickStartContext); + + const force12Cols = useMemo( + () => props.isNavOpen && !!qsContext.activeQuickStartID, + [props.isNavOpen, qsContext.activeQuickStartID] + ); const closeExpandedWorkspace = useCallback(() => { history.replace({ @@ -60,63 +71,140 @@ export function Overview() { }, [closeExpandedWorkspace, history, routes, expandedWorkspaceId] ); + return ( - <Grid hasGutter> - <GridItem sm={12} xl={6}> - <PageSection variant={"light"} isFilled={true} style={{ height: "100%" }}> - <Card className="Dev-ui__card-size"> + <> + <PageSection + className="appsrv-marketing--banner" + style={ + { + "--appsrv-marketing--banner--before--BackgroundImage": "url(images/overview-banner-bg.png)", + "--appsrv-marketing--banner--before--BackgroundPositionY": "-99px", + "--appsrv-marketing--banner--before--BackgroundRepeat": "no-repeat", + "--appsrv-marketing--banner--before--BackgroundSize": "478px", + } as React.CSSProperties + } + variant={"light"} + > + <Stack hasGutter> + <Title headingLevel="h1" size="2xl"> + Welcome to Serverless Logic Web Tools + </Title> + <StackItem> + <Text className="appsrv-marketing--banner__tagline pf-u-color-200"> + Add-on service to create and synchronize your Serverless Workflow, Decision files, and Dashbuilder files + </Text> + <Text component={TextVariants.p}> + The Serverless Logic Web Tools is a web application that enables you to create and synchronize your + Serverless Workflow, Decision files, and Dashbuilder files in a single interface. Also, the Serverless + Logic Web Tools application provides the integrations that are needed to deploy and test the Serverless + Workflow models in development mode. + </Text> + </StackItem> + <StackItem> + <Button + target="_blank" + iconPosition="right" + icon={<ExternalLinkAltIcon />} + href="https://kiegroup.github.io/kogito-docs/serverlessworkflow/latest/index.html"; + variant={ButtonVariant.secondary} + component="a" + > + Get Started with Serverless Logic Web Tools + </Button> + </StackItem> + </Stack> + </PageSection> + <PageSection className="appsrv-marketing--page-section--marketing" isWidthLimited> + <Grid hasGutter> + <GridItem xl={12} xl2={force12Cols ? 12 : 6}> + <Card className="Dev-ui__card-size" style={{ height: "100%" }}> + <CardHeader> + <CardHeaderMain> + <CardTitle> + <Title headingLevel="h2">Create</Title> + </CardTitle> + </CardHeaderMain> + </CardHeader> + <CardBody> + <Grid> + <NewServerlessModelCard + title={"Workflow"} + jsonExtension={FileTypes.SW_JSON} + yamlExtension={FileTypes.SW_YAML} + description={"Serverless Workflow files are used to define orchestration logic for services."} + /> + <NewServerlessModelCard + title={"Decision"} + jsonExtension={FileTypes.YARD_JSON} + yamlExtension={FileTypes.YARD_YAML} + description={"Serverless Decision files are used to define decision logic for services."} + /> + <NewModelCard + title={"Dashboard"} + extension={FileTypes.DASH_YAML} + description={ + "Dashboard files are used to define data visualization from data extracted from applications." + } + /> + </Grid> + </CardBody> + </Card> + </GridItem> + <GridItem xl={12} xl2={force12Cols ? 12 : 6}> + <Card className="Dev-ui__card-size" style={{ height: "100%" }}> + <CardHeader> + <CardHeaderMain> + <CardTitle> + <Title headingLevel="h2">Import</Title> + </CardTitle> + </CardHeaderMain> + </CardHeader> + <CardBody> + <Gallery + hasGutter={true} + // 16px is the "Gutter" width. + minWidths={{ sm: "calc(50% - 16px)", default: "100%" }} + style={{ height: "calc(100% - 32px)" }} + > + <ImportFromUrlCard /> + <UploadCard expandWorkspace={expandWorkspace} /> + </Gallery> + </CardBody> + </Card> + </GridItem> + </Grid> + </PageSection> + + <PageSection isWidthLimited className="appsrv-marketing--page-section--marketing" variant="light"> + <Title className="pf-u-mb-lg" size="xl" headingLevel="h3"> + Use Serverless Logic Web Tools + </Title> + <Grid hasGutter> + <GridItem md={7}> + <Card className="appsrv-marketing--video"> + <iframe + width="560" + height="315" + src="https://www.youtube.com/embed/t3ahWJjiGoU"; + title="YouTube video player" + allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" + allowFullScreen + ></iframe> + </Card> + </GridItem> + <GridItem md={5}> <TextContent> - <Text component={TextVariants.h1}>Create</Text> + <Text className="pf-u-color-200 pf-u-ml-md">In this video, you'll learn how to:</Text> + <List className="app-services-ui--icon-list"> + <ListItem>Create a Serverless Workflow, a Dashboard or a Decision.</ListItem> + <ListItem>Import a project into Serveless Logic Web Tools.</ListItem> + <ListItem>Deploy and run your project into an OpenShift instance.</ListItem> + </List> </TextContent> - <br /> - <Divider inset={{ default: "insetXl" }} /> - <Gallery - hasGutter={true} - // 16px is the "Gutter" width. - minWidths={{ sm: "calc(33% - 16px)", default: "100%" }} - style={{ height: "calc(100% - 32px)" }} - > - <NewServerlessModelCard - title={"Workflow"} - jsonExtension={FileTypes.SW_JSON} - yamlExtension={FileTypes.SW_YAML} - description={"Serverless Workflow files are used to define orchestration logic for services."} - /> - <NewServerlessModelCard - title={"Decision"} - jsonExtension={FileTypes.YARD_JSON} - yamlExtension={FileTypes.YARD_YAML} - description={"Serverless Decision files are used to define decision logic for services."} - /> - <NewModelCard - title={"Dashboard"} - extension={FileTypes.DASH_YAML} - description={ - "Dashboard files are used to define data visualization from data extracted from applications." - } - /> - </Gallery> - </Card> - </PageSection> - </GridItem> - <GridItem sm={12} xl={6}> - <PageSection variant={"light"} isFilled={true} style={{ height: "100%" }}> - <TextContent> - <Text component={TextVariants.h1}>Import</Text> - </TextContent> - <br /> - <Divider inset={{ default: "insetXl" }} /> - <Gallery - hasGutter={true} - // 16px is the "Gutter" width. - minWidths={{ sm: "calc(50% - 16px)", default: "100%" }} - style={{ height: "calc(100% - 32px)" }} - > - <ImportFromUrlCard /> - <UploadCard expandWorkspace={expandWorkspace} /> - </Gallery> - </PageSection> - </GridItem> - </Grid> + </GridItem> + </Grid> + </PageSection> + </> ); } diff --git a/packages/serverless-logic-web-tools/src/homepage/overView/UploadCard.tsx b/packages/serverless-logic-web-tools/src/homepage/overView/UploadCard.tsx index aabae9ea32..c63221d06b 100644 --- a/packages/serverless-logic-web-tools/src/homepage/overView/UploadCard.tsx +++ b/packages/serverless-logic-web-tools/src/homepage/overView/UploadCard.tsx @@ -183,7 +183,7 @@ export function UploadCard(props: { expandWorkspace: (workspaceId: string) => vo </div> )} <input id={"upload-field"} {...getInputProps()} /> - <Card isFullHeight={true} isLarge={true} isPlain={true}> + <Card isFullHeight={true} isPlain={true} isCompact={true}> <CardTitle> <TextContent> <Text component={TextVariants.h2}> diff --git a/packages/serverless-logic-web-tools/src/homepage/pageTemplate/OnlineEditorPage.tsx b/packages/serverless-logic-web-tools/src/homepage/pageTemplate/OnlineEditorPage.tsx index a6bf24d405..af763471da 100644 --- a/packages/serverless-logic-web-tools/src/homepage/pageTemplate/OnlineEditorPage.tsx +++ b/packages/serverless-logic-web-tools/src/homepage/pageTemplate/OnlineEditorPage.tsx @@ -49,15 +49,19 @@ import { import { SettingsButton } from "../../settings/SettingsButton"; import { HomePageNav } from "../uiNav/HomePageNav"; -export type OnlineEditorPageProps = { children?: React.ReactNode; pageContainerRef: React.RefObject<HTMLDivElement> }; +export type OnlineEditorPageProps = { + children?: React.ReactNode; + pageContainerRef: React.RefObject<HTMLDivElement>; + isNavOpen: boolean; + setIsNavOpen: (value: boolean) => void; +}; export function OnlineEditorPage(props: OnlineEditorPageProps) { const history = useHistory(); const routes = useRoutes(); - const [isNavOpen, setIsNavOpen] = useState(true); const isRouteInSettingsSection = useRouteMatch(routes.settings.home.path({})); const navToggle = () => { - setIsNavOpen(!isNavOpen); + props.setIsNavOpen(!props.isNavOpen); }; const [activeQuickStartID, setActiveQuickStartID] = useState(""); const [allQuickStartStates, setAllQuickStartStates] = useState({}); @@ -124,7 +128,7 @@ export function OnlineEditorPage(props: OnlineEditorPageProps) { variant="plain" aria-label="Global NAV" onClick={navToggle} - aria-expanded={isNavOpen} + aria-expanded={props.isNavOpen} aria-controls="" > <BarsIcon /> @@ -157,7 +161,7 @@ export function OnlineEditorPage(props: OnlineEditorPageProps) { [location, isRouteInSettingsSection] ); - const sidebar = <PageSidebar nav={pageNav} isNavOpen={isNavOpen} theme="dark" />; + const sidebar = <PageSidebar nav={pageNav} isNavOpen={props.isNavOpen} theme="dark" />; const mainContainerId = "main-content-page-layout-tertiary-nav"; const pageSkipToContent = <SkipToContent href={`#${mainContainerId}`}>Skip to content</SkipToContent>; diff --git a/packages/serverless-logic-web-tools/src/homepage/routes/HomePageRoutes.tsx b/packages/serverless-logic-web-tools/src/homepage/routes/HomePageRoutes.tsx index 8ddd74cdf8..2a2f17cf6e 100644 --- a/packages/serverless-logic-web-tools/src/homepage/routes/HomePageRoutes.tsx +++ b/packages/serverless-logic-web-tools/src/homepage/routes/HomePageRoutes.tsx @@ -27,7 +27,7 @@ import { NewWorkspaceFromUrlPage } from "../../workspace/components/NewWorkspace import { EditorPage } from "../../editor/EditorPage"; import { NoMatchPage } from "../../navigation/NoMatchPage"; -export function HomePageRoutes() { +export function HomePageRoutes(props: { isNavOpen: boolean }) { const routes = useRoutes(); const supportedExtensions = useMemo(() => supportedFileExtensionArray.join("|"), []); return ( @@ -55,7 +55,7 @@ export function HomePageRoutes() { )} </Route> <Route path="/" exact> - <Overview /> + <Overview isNavOpen={props.isNavOpen} /> </Route> <Route path="/ServerlessModels"> <ServerlessModels /> @@ -63,13 +63,6 @@ export function HomePageRoutes() { <Route path="/SampleCatalog"> <SampleCatalog /> </Route> - <Route - path="/Documentation" - component={() => { - window.open("https://kiegroup.github.io/kogito-docs/serverlessworkflow/latest/index.html";); - return null; - }} - /> <Route component={NoMatchPage} /> </Switch> ); diff --git a/packages/serverless-logic-web-tools/src/homepage/uiNav/HomePageNav.tsx b/packages/serverless-logic-web-tools/src/homepage/uiNav/HomePageNav.tsx index b0bcf908fa..29d1ffbab9 100644 --- a/packages/serverless-logic-web-tools/src/homepage/uiNav/HomePageNav.tsx +++ b/packages/serverless-logic-web-tools/src/homepage/uiNav/HomePageNav.tsx @@ -17,27 +17,39 @@ import * as React from "react"; import { Nav, NavItem, NavList } from "@patternfly/react-core"; import { Link } from "react-router-dom"; +import { ExternalLinkAltIcon } from "@patternfly/react-icons/dist/js/icons"; export function HomePageNav(props: { pathname: string }) { return ( - <Nav aria-label="Global NAV" theme="dark"> - <NavList> - <NavItem itemId={0} key={"Overview-nav"} isActive={props.pathname === "/"}> - <Link to="/">Overview</Link> - </NavItem> + <> + <div className="chr-c-app-title">Serverless Logic Web Tools</div> + <Nav aria-label="Global NAV" theme="dark"> + <NavList> + <NavItem itemId={0} key={"Overview-nav"} isActive={props.pathname === "/"}> + <Link to="/">Overview</Link> + </NavItem> - <NavItem itemId={1} key={"Serverless-models-nav"} isActive={props.pathname === "/ServerlessModels"}> - <Link to="/ServerlessModels">Serverless Models</Link> - </NavItem> + <NavItem itemId={1} key={"Serverless-models-nav"} isActive={props.pathname === "/ServerlessModels"}> + <Link to="/ServerlessModels">Serverless Models</Link> + </NavItem> - <NavItem itemId={2} key={"SampleCatalog-nav"} isActive={props.pathname === "/SampleCatalog"}> - <Link to="/SampleCatalog">Sample Catalog</Link> - </NavItem> + <NavItem itemId={2} key={"SampleCatalog-nav"} isActive={props.pathname === "/SampleCatalog"}> + <Link to="/SampleCatalog">Sample Catalog</Link> + </NavItem> - <NavItem itemId={3} key={"Documentation-nav"} isActive={props.pathname === "/Documentation"}> - <Link to="/Documentation">Documentation</Link> - </NavItem> - </NavList> - </Nav> + <NavItem + itemId={3} + key={"Documentation-nav"} + className="chr-c-navigation__additional-links" + isActive={props.pathname === "/Documentation"} + > + <a href="https://kiegroup.github.io/kogito-docs/serverlessworkflow/latest/index.html"; target="_blank"> + Documentation + <ExternalLinkAltIcon /> + </a> + </NavItem> + </NavList> + </Nav> + </> ); } diff --git a/packages/serverless-logic-web-tools/src/index.tsx b/packages/serverless-logic-web-tools/src/index.tsx index d23a1dc5e6..db8f193bdd 100644 --- a/packages/serverless-logic-web-tools/src/index.tsx +++ b/packages/serverless-logic-web-tools/src/index.tsx @@ -20,6 +20,7 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; import { App } from "./App"; import "../static/resources/style.css"; +import "../static/resources/application-services.css"; import * as incompatibleBrowser from "./workspace/startupBlockers/IncompatibleBrowser"; import * as fsChanged from "./workspace/startupBlockers/FsChanged"; diff --git a/packages/serverless-logic-web-tools/src/navigation/RoutesSwitch.tsx b/packages/serverless-logic-web-tools/src/navigation/RoutesSwitch.tsx index ad68babfe9..e4a33a202d 100644 --- a/packages/serverless-logic-web-tools/src/navigation/RoutesSwitch.tsx +++ b/packages/serverless-logic-web-tools/src/navigation/RoutesSwitch.tsx @@ -15,7 +15,7 @@ */ import * as React from "react"; -import { useMemo, useRef } from "react"; +import { useMemo, useRef, useState } from "react"; import { Route, Switch, useRouteMatch } from "react-router-dom"; import { useRoutes } from "./Hooks"; import { OnlineEditorPage } from "../homepage/pageTemplate/OnlineEditorPage"; @@ -30,6 +30,7 @@ export function RoutesSwitch() { return process.env["WEBPACK_REPLACE__buildInfo"]; }, []); const pageContainerRef = useRef<HTMLDivElement>(null); + const [isNavOpen, setIsNavOpen] = useState(true); const renderPage = (routeProps: { location: { @@ -46,8 +47,12 @@ export function RoutesSwitch() { }; }) => { return ( - <OnlineEditorPage pageContainerRef={pageContainerRef}> - {!isRouteInSettingsSection ? <HomePageRoutes /> : <SettingsPageRoutes pageContainerRef={pageContainerRef} />} + <OnlineEditorPage pageContainerRef={pageContainerRef} isNavOpen={isNavOpen} setIsNavOpen={setIsNavOpen}> + {!isRouteInSettingsSection ? ( + <HomePageRoutes isNavOpen={isNavOpen} /> + ) : ( + <SettingsPageRoutes pageContainerRef={pageContainerRef} /> + )} {buildInfo && ( <div className={"kie-tools--build-info"}> <Label>{buildInfo}</Label> diff --git a/packages/serverless-logic-web-tools/static/images/overview-banner-bg.png b/packages/serverless-logic-web-tools/static/images/overview-banner-bg.png new file mode 100644 index 0000000000..9d2ffbc5de Binary files /dev/null and b/packages/serverless-logic-web-tools/static/images/overview-banner-bg.png differ diff --git a/packages/serverless-logic-web-tools/static/resources/application-services.css b/packages/serverless-logic-web-tools/static/resources/application-services.css new file mode 100644 index 0000000000..cb1afe1004 --- /dev/null +++ b/packages/serverless-logic-web-tools/static/resources/application-services.css @@ -0,0 +1,350 @@ +/* original CSS: https://console.redhat.com/beta/apps/application-services/6f315189.css */ + +main.applicationServices { + height: 100%; +} + +.pf-c-page__main-section.appsrv-marketing--banner { + --appsrv-marketing--banner--before--GridTemplateColumns: 1fr; + --appsrv-marketing--banner--ColumnGap: var(--pf-global--spacer--2xl); + --appsrv-marketing--banner__tagline--Color: var(--pf-global--Color--light-300); + --appsrv-marketing--banner--Padding: var(--pf-global--spacer--lg); + --appsrv-marketing--banner--PaddingTop: var(--appsrv-marketing--banner--Padding); + --appsrv-marketing--banner--PaddingRight: var(--appsrv-marketing--banner--Padding); + --appsrv-marketing--banner--PaddingBottom: var(--appsrv-marketing--banner--Padding); + --appsrv-marketing--banner--PaddingLeft: var(--appsrv-marketing--banner--Padding); + --appsrv-marketing--banner--before--Offset--top: calc(var(--appsrv-marketing--banner--PaddingTop) * -1); + --appsrv-marketing--banner--before--Offset--bottom: calc(var(--appsrv-marketing--banner--PaddingBottom) * -1); + --appsrv-marketing--banner--before--Offset--right: calc(var(--appsrv-marketing--banner--PaddingRight) * -1); + --appsrv-marketing--banner--before--Offset--left: calc(var(--appsrv-marketing--banner--PaddingLeft) * -1); + grid-gap: var(--appsrv-marketing--banner--ColumnGap); + display: grid; + grid-template-areas: "content"; + grid-template-columns: var(--appsrv-marketing--banner--before--GridTemplateColumns); + padding: var(--appsrv-marketing--banner--PaddingTop) var(--appsrv-marketing--banner--PaddingRight) + var(--appsrv-marketing--banner--PaddingBottom) var(--appsrv-marketing--banner--PaddingLeft); +} + +@media screen and (min-width: 768px) { + .pf-c-page__main-section.appsrv-marketing--banner { + --appsrv-marketing--banner--Padding: var(--pf-global--spacer--2xl); + --appsrv-marketing--banner--before--Opacity: 0.65; + --appsrv-marketing--banner--before--GridTemplateColumns: 2fr 1fr; + grid-template-areas: "content graphic"; + } +} + +@media screen and (min-width: 992px) { + .pf-c-page__main-section.appsrv-marketing--banner { + --appsrv-marketing--banner--before--GridTemplateColumns: 2fr 1fr; + } +} + +@media screen and (min-width: 1200px) { + .pf-c-page__main-section.appsrv-marketing--banner { + --appsrv-marketing--banner--before--Opacity: 1; + } +} + +.pf-c-page__main-section.appsrv-marketing--banner:before { + background-image: var(--appsrv-marketing--banner--before--BackgroundImage); + background-position-y: var(--appsrv-marketing--banner--before--BackgroundPositionY); + background-repeat: var(--appsrv-marketing--banner--before--BackgroundRepeat); + background-size: var(--appsrv-marketing--banner--before--BackgroundSize); + content: ""; + grid-area: graphic; + margin-bottom: var(--appsrv-marketing--banner--before--Offset--bottom); + margin-right: var(--appsrv-marketing--banner--before--Offset--right); + margin-top: var(--appsrv-marketing--banner--before--Offset--top); + opacity: var(--appsrv-marketing--banner--before--Opacity); +} + +.pf-c-page__main-section.appsrv-marketing--banner[class*="pf-m-dark-"].pf-c-page__main-section + .pf-c-button.pf-m-primary { + background-color: var(--pf-global--palette--blue-400); + color: var(--pf-global--primary-color-100); +} + +.pf-c-page__main-section.appsrv-marketing--banner[class*="pf-m-dark-"].pf-c-page__main-section + .pf-c-button.pf-m-primary:active, +.pf-c-page__main-section.appsrv-marketing--banner[class*="pf-m-dark-"].pf-c-page__main-section + .pf-c-button.pf-m-primary:focus, +.pf-c-page__main-section.appsrv-marketing--banner[class*="pf-m-dark-"].pf-c-page__main-section + .pf-c-button.pf-m-primary:hover { + background-color: var(--pf-global--palette--blue-500); + color: var(--pf-global--primary-color-100); +} + +.appsrv-marketing--banner--text-only { + font-size: var(--pf-global--FontSize--xl); + max-width: 800px; + text-align: center; +} + +.appsrv-marketing--page-section--marketing, +.appsrv-marketing--page-section--video { + --pf-c-page__main-section--PaddingTop: var(--pf-global--spacer--xl); + --pf-c-page__main-section--PaddingRight: var(--pf-global--spacer--lg); + --pf-c-page__main-section--PaddingBottom: var(--pf-global--spacer--xl); + --pf-c-page__main-section--PaddingLeft: var(--pf-global--spacer--lg); +} + +.appsrv-marketing--page-section--marketing .pf-l-grid.pf-m-gutter, +.appsrv-marketing--page-section--video .pf-l-grid.pf-m-gutter { + --pf-l-grid--m-gutter--GridGap: var(--pf-global--spacer--lg); +} + +@media screen and (min-width: pf-global--breakpoint--md) { + .appsrv-marketing--page-section--marketing, + .appsrv-marketing--page-section--video { + --pf-c-page__main-section--PaddingRight: var(--pf-global--spacer--2xl); + --pf-c-page__main-section--PaddingLeft: var(--pf-global--spacer--2xl); + } +} + +.appsrv-marketing--banner__tagline { + color: var(--appsrv-marketing--banner__tagline--Color); + font-size: var(--pf-global--FontSize--lg); + margin-bottom: var(--pf-global--spacer--lg); +} + +.appsrv-marketing--video { + height: 0; + padding-bottom: 56.25% !important; + position: relative; +} + +.appsrv-marketing--video iframe { + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; +} + +.kafka-overview--page-section--marketing { + --pf-c-page__main-section--PaddingTop: 0; + --pf-c-page__main-section--PaddingRight: var(--pf-global--spacer--lg); + --pf-c-page__main-section--PaddingBottom: var(--pf-global--spacer--xl); + --pf-c-page__main-section--PaddingLeft: var(--pf-global--spacer--lg); +} + +.appserv-devpreview { + height: 100%; +} + +.appserv-devpreview__button { + --pf-c-button--m-link--Color: var(--pf-global--Color--dark-100) !important; + text-decoration: underline; +} + +.pf-c-empty-state.pf-m-xl { + --pf-c-empty-state__content--MaxWidth: 624px; +} + +tr.mas--ResponsiveTable__Tr--deleted > td { + color: var(--pf-global--Color--200); +} + +.kafka-ui-form-group--readonly .pf-c-form-control[readonly] { + --pf-c-form-control--readonly--BackgroundColor: transparent; + --pf-c-form-control--readonly--focus--PaddingBottom: 0; + border: none; + padding: 0; +} + +.kafka-ui-form-group--readonly .pf-c-form__group-label { + --pf-c-form__group-label--PaddingBottom: 0; +} + +.mas--CreateKafkaInstance__sidebar .pf-c-content dl { + display: block; +} + +.mas--CreateKafkaInstance__sidebar dt { + font-size: var(--pf-global--FontSize--sm); +} + +.mas--CreateKafkaInstance__creationTimeAlert { + margin-top: var(--pf-global--spacer--md); +} + +.mas--details__drawer--tab-content { + padding-bottom: var(--pf-global--spacer--lg); + padding-top: var(--pf-global--spacer--lg); +} + +.mas-c-status.pf-l-split.pf-m-gutter > :not(:last-child) { + --pf-l-split--m-gutter--MarginRight: var(--pf-global--spacer--sm); +} + +.mas-m-ready { + color: var(--pf-global--success-color--100); +} + +.mas-m-degraded, +.mas-m-ready { + font-size: var(--pf-global--icon--FontSize--md); +} + +.mas-m-degraded { + color: var(--pf-global--warning-color--100); +} + +.mas-m-deleting { + color: var(--pf-global--Color--200); +} + +.mas-KafkaMessageBrowser-Toolbar { + z-index: 999; +} + +.mas-KafkaMessageBrowser-Toolbar .pf-c-toolbar__content-section, +.mas-KafkaMessageBrowser-Toolbar .pf-c-toolbar__group { + align-items: flex-start; +} + +.pf-c-label.mas-m-solid { + --pf-c-label__content--before--BorderColor: transparent; + --pf-c-label--BackgroundColor: var(--pf-global--palette--black-600); + --pf-c-label__content--Color: var(--pf-global--palette--white); + align-items: center; + display: inline-flex; + font-weight: var(--pf-global--FontWeight--bold); + justify-content: center; + min-width: calc( + var(--pf-c-label--FontSize) * var(--pf-global--LineHeight--md) + var(--pf-c-label--PaddingTop) + + var(--pf-c-label--PaddingBottom) + ); +} + +.pf-c-label.mas-m-solid.pf-m-blue { + --pf-c-label--BackgroundColor: var(--pf-global--palette--blue-400); + --pf-c-label__content--Color: var(--pf-global--palette--white); + --pf-c-label__content--before--BorderColor: transparent; +} + +.pf-c-label.mas-m-solid.pf-m-green { + --pf-c-label--BackgroundColor: var(--pf-global--palette--green-500); + --pf-c-label__content--Color: var(--pf-global--palette--white); + --pf-c-label__content--before--BorderColor: transparent; +} + +.pf-c-label.mas-m-solid.pf-m-orange { + --pf-c-label--BackgroundColor: var(--pf-global--palette--orange-400); + --pf-c-label__content--Color: var(--pf-global--palette--white); + --pf-c-label__content--before--BorderColor: transparent; +} + +.appserv-metrics-filterbytopic .pf-c-select__menu-wrapper { + max-width: min(100vw, 300px); +} + +.appserv-metrics-filterbytopic .pf-c-select__menu-item { + word-wrap: normal; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 100%; +} + +#custom-offset-input { + width: 10rem; +} + +.mas--ConsumerGroupResetOffset__formTitle { + padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop); +} + +.mas--ConsumerGroupResetOffset-form-group--readonly .pf-c-form-control[readonly] { + --pf-c-form-control--readonly--BackgroundColor: transparent; + --pf-c-form-control--readonly--focus--PaddingBottom: 0; + border: none; + padding: 0; +} + +.mas--ConsumerGroupResetOffset-form-group--readonly .pf-c-form__group-label { + --pf-c-form__group-label--PaddingBottom: 0; +} + +.consumer-group-drawer__top-label { + margin-bottom: 0 !important; +} + +.consumer-group-drawer__title { + margin-top: 0 !important; +} + +.consumer-group-drawer__drawer-content-body { + display: flex; + flex-direction: column; +} + +.mas--settings__card { + max-width: 55rem; +} + +.pf-u-color-200 { + color: var(--pf-global--Color--200) !important; +} + +.pf-u-mb-lg { + margin-bottom: var(--pf-global--spacer--lg) !important; +} +.pf-u-ml-auto { + margin-left: auto !important; +} + +.pf-u-ml-0 { + margin-left: 0 !important; +} + +.pf-u-ml-xs { + margin-left: var(--pf-global--spacer--xs) !important; +} + +.pf-u-ml-sm { + margin-left: var(--pf-global--spacer--sm) !important; +} + +.pf-u-ml-md { + margin-left: var(--pf-global--spacer--md) !important; +} + +.pf-u-ml-lg { + margin-left: var(--pf-global--spacer--lg) !important; +} + +.pf-u-ml-xl { + margin-left: var(--pf-global--spacer--xl) !important; +} + +.pf-u-ml-2xl { + margin-left: var(--pf-global--spacer--2xl) !important; +} + +.pf-u-ml-3xl { + margin-left: var(--pf-global--spacer--3xl) !important; +} + +.pf-u-ml-4xl { + margin-left: var(--pf-global--spacer--4xl) !important; +} +.pf-u-color-100 { + color: var(--pf-global--Color--100) !important; +} + +.pf-u-color-200 { + color: var(--pf-global--Color--200) !important; +} + +.pf-u-color-300 { + color: var(--pf-global--Color--300) !important; +} + +.pf-u-color-400 { + color: var(--pf-global--Color--400) !important; +} +.chr-c-navigation__additional-links svg { + margin-left: var(--pf-global--spacer--sm); +} diff --git a/packages/serverless-logic-web-tools/static/resources/style.css b/packages/serverless-logic-web-tools/static/resources/style.css index a75c5b5755..f25e834600 100644 --- a/packages/serverless-logic-web-tools/static/resources/style.css +++ b/packages/serverless-logic-web-tools/static/resources/style.css @@ -600,6 +600,9 @@ section.kie-tools--settings-tab { #editor-page-masthead-files-dropdown-toggle { padding-left: 0; } +.kogito-tools-common--brand { + height: 28.6px; +} .pf-c-expandable-section.plain .pf-c-expandable-section__toggle { color: black; --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
