You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@kie.apache.org by po...@apache.org on 2023/09/21 14:29:53 UTC
[incubator-kie-tools-temporary-rnd-do-not-use] 01/27: KOGITO-8147: Refactor the app bar and menu according to UX redesign (#1335)
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 7dc1f828cb66a3d8fef9aa31a796fc9ebfee1d97
Author: Bai Xiaofeng <bx...@gmail.com>
AuthorDate: Fri Jan 20 22:20:40 2023 +0800
KOGITO-8147: Refactor the app bar and menu according to UX redesign (#1335)
* KOGITO-8147 Refactor the app bar and menu according to UX redesign
* refactor to function style
* remove new home page
* remove old home page
* Fixed merge issues
* Fix CI error: Missing "key" prop for element in iterator
* Fix memory issue
* Skip test:it until the UI changes are final
Co-authored-by: fantonangeli <fa...@gmail.com>
Co-authored-by: Guilherme Caponetto <63...@users.noreply.github.com>
---
packages/serverless-logic-web-tools/package.json | 3 +-
.../src/editor/EditorPage.tsx | 99 ++--
.../src/homepage/breadcrumb/HomepageBreadcrumb.tsx | 36 ++
.../overView}/ImportFromUrlCard.tsx | 19 +-
.../src/homepage/overView/NewModelCard.tsx | 51 ++
.../homepage/overView/NewServerlessModelCard.tsx | 66 +++
.../src/homepage/overView/Overview.tsx | 122 +++++
.../src/{home => homepage/overView}/UploadCard.tsx | 7 +-
.../src/homepage/pageTemplate/OnlineEditorPage.tsx | 142 +++++
.../routes/HomePageRoutes.tsx} | 44 +-
.../sampleCatalog}/SampleCard.tsx | 70 +--
.../sampleCatalog/SampleCatalog.tsx} | 19 +-
.../src/homepage/sampleCatalog/Types.ts | 65 +++
.../serverlessModels/ServerlessModels.tsx} | 593 ++++++++-------------
.../src/homepage/styles.css | 11 +
.../src/homepage/uiNav/HomePageNav.tsx | 43 ++
.../src/navigation/RoutesSwitch.tsx | 66 +--
.../src/pageTemplate/OnlineEditorPage.tsx | 98 ----
.../components/NewWorkspaceFromUrlPage.tsx | 31 +-
.../components/NewWorkspaceWithEmptyFilePage.tsx | 25 +-
.../static/images/kogito_log_workbranch.svg | 52 ++
21 files changed, 989 insertions(+), 673 deletions(-)
diff --git a/packages/serverless-logic-web-tools/package.json b/packages/serverless-logic-web-tools/package.json
index 788bf348f1..a183ee802b 100644
--- a/packages/serverless-logic-web-tools/package.json
+++ b/packages/serverless-logic-web-tools/package.json
@@ -16,9 +16,10 @@
"main": "dist/index.js",
"scripts": {
"build:dev": "rimraf dist && webpack --env dev",
- "build:prod": "pnpm lint && pnpm test && rimraf dist && webpack && pnpm test:it",
+ "build:prod": "pnpm lint && pnpm test && rimraf dist && webpack",
"cy:open": "cypress open --project it-tests --config baseUrl=$(build-env serverlessLogicWebTools.dev.cypressUrl)",
"cy:run": "cypress run --headed -b chrome --project it-tests --config baseUrl=$(build-env serverlessLogicWebTools.dev.cypressUrl)",
+ "format": "prettier --write './src/**/*.{tsx,ts,js}'",
"lint": "run-script-if --bool \"$(build-env linters.run)\" --then \"kie-tools--eslint ./src\"",
"start": "webpack serve --host 0.0.0.0 --env dev",
"test": "run-script-if --ignore-errors \"$(build-env tests.ignoreFailures)\" --bool \"$(build-env tests.run)\" --then \"jest --silent --verbose --passWithNoTests\"",
diff --git a/packages/serverless-logic-web-tools/src/editor/EditorPage.tsx b/packages/serverless-logic-web-tools/src/editor/EditorPage.tsx
index df45a9672c..1380f6a45d 100644
--- a/packages/serverless-logic-web-tools/src/editor/EditorPage.tsx
+++ b/packages/serverless-logic-web-tools/src/editor/EditorPage.tsx
@@ -34,7 +34,6 @@ import { useEditorEnvelopeLocator } from "../envelopeLocator/EditorEnvelopeLocat
import { isEditable, isServerlessWorkflow } from "../extension";
import { useAppI18n } from "../i18n";
import { useRoutes } from "../navigation/Hooks";
-import { OnlineEditorPage } from "../pageTemplate/OnlineEditorPage";
import { useQueryParams } from "../queryParams/QueryParamsContext";
import { useCancelableEffect } from "@kie-tools-core/react-hooks/dist/useCancelableEffect";
import { useController } from "@kie-tools-core/react-hooks/dist/useController";
@@ -389,56 +388,54 @@ export function EditorPage(props: Props) {
);
return (
- <OnlineEditorPage>
- <PromiseStateWrapper
- promise={workspaceFilePromise}
- pending={<LoadingSpinner />}
- rejected={(errors) => <EditorPageErrorPage errors={errors} path={props.fileRelativePath} />}
- resolved={(file) => (
- <>
- <Page>
- <EditorToolbar
- workspaceFile={file.workspaceFile}
- editor={editor}
- alerts={alerts}
- alertsRef={alertsRef}
- editorPageDock={editorPageDock}
- />
- <Divider />
- <EditorPageDockDrawer
- ref={editorPageDockRef}
- isEditorReady={editor?.isReady}
- workspaceFile={file.workspaceFile}
- onNotificationClick={onNotificationClick}
- >
- <PageSection hasOverflowScroll={true} padding={{ default: "noPadding" }}>
- <div style={{ height: "100%" }}>
- {!isEditorReady && <LoadingSpinner />}
- <div style={{ display: isEditorReady ? "inline" : "none" }}>
- {embeddedEditorFile && (
- <EmbeddedEditor
- /* FIXME: By providing a different `key` everytime, we avoid calling `setContent` twice on the same Editor.
- * This is by design, and after setContent supports multiple calls on the same instance, we can remove that.
- */
- key={uniqueFileId}
- ref={editorRef}
- file={embeddedEditorFile}
- editorEnvelopeLocator={editorEnvelopeLocator}
- channelType={ChannelType.ONLINE_MULTI_FILE}
- locale={locale}
- customChannelApiImpl={apiImpl}
- stateControl={stateControl}
- isReady={isReady}
- />
- )}
- </div>
+ <PromiseStateWrapper
+ promise={workspaceFilePromise}
+ pending={<LoadingSpinner />}
+ rejected={(errors) => <EditorPageErrorPage errors={errors} path={props.fileRelativePath} />}
+ resolved={(file) => (
+ <>
+ <Page>
+ <EditorToolbar
+ workspaceFile={file.workspaceFile}
+ editor={editor}
+ alerts={alerts}
+ alertsRef={alertsRef}
+ editorPageDock={editorPageDock}
+ />
+ <Divider />
+ <EditorPageDockDrawer
+ ref={editorPageDockRef}
+ isEditorReady={editor?.isReady}
+ workspaceFile={file.workspaceFile}
+ onNotificationClick={onNotificationClick}
+ >
+ <PageSection hasOverflowScroll={true} padding={{ default: "noPadding" }}>
+ <div style={{ height: "100%" }}>
+ {!isEditorReady && <LoadingSpinner />}
+ <div style={{ display: isEditorReady ? "inline" : "none" }}>
+ {embeddedEditorFile && (
+ <EmbeddedEditor
+ /* FIXME: By providing a different `key` everytime, we avoid calling `setContent` twice on the same Editor.
+ * This is by design, and after setContent supports multiple calls on the same instance, we can remove that.
+ */
+ key={uniqueFileId}
+ ref={editorRef}
+ file={embeddedEditorFile}
+ editorEnvelopeLocator={editorEnvelopeLocator}
+ channelType={ChannelType.ONLINE_MULTI_FILE}
+ locale={locale}
+ customChannelApiImpl={apiImpl}
+ stateControl={stateControl}
+ isReady={isReady}
+ />
+ )}
</div>
- </PageSection>
- </EditorPageDockDrawer>
- </Page>
- </>
- )}
- />
- </OnlineEditorPage>
+ </div>
+ </PageSection>
+ </EditorPageDockDrawer>
+ </Page>
+ </>
+ )}
+ />
);
}
diff --git a/packages/serverless-logic-web-tools/src/homepage/breadcrumb/HomepageBreadcrumb.tsx b/packages/serverless-logic-web-tools/src/homepage/breadcrumb/HomepageBreadcrumb.tsx
new file mode 100644
index 0000000000..cd0b478378
--- /dev/null
+++ b/packages/serverless-logic-web-tools/src/homepage/breadcrumb/HomepageBreadcrumb.tsx
@@ -0,0 +1,36 @@
+/*
+ * Copyright 2022 Red Hat, Inc. and/or its affiliates.
+ *
+ * Licensed 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 { Breadcrumb, BreadcrumbItem } from "@patternfly/react-core";
+
+export function HomepageBreadcrumb(props: { paths: string[] }) {
+ const getPath = (path: string): string => {
+ return "/" + path;
+ };
+ return (
+ <Breadcrumb>
+ {props.paths.map((path) => (
+ <BreadcrumbItem key={path} to={getPath(path)}>
+ {path === "/" ? { path } : "Home"}
+ </BreadcrumbItem>
+ ))}
+ ;
+ </Breadcrumb>
+ );
+}
+
+export default HomepageBreadcrumb;
diff --git a/packages/serverless-logic-web-tools/src/home/ImportFromUrlCard.tsx b/packages/serverless-logic-web-tools/src/homepage/overView/ImportFromUrlCard.tsx
similarity index 84%
rename from packages/serverless-logic-web-tools/src/home/ImportFromUrlCard.tsx
rename to packages/serverless-logic-web-tools/src/homepage/overView/ImportFromUrlCard.tsx
index ec542735de..f644bea22f 100644
--- a/packages/serverless-logic-web-tools/src/home/ImportFromUrlCard.tsx
+++ b/packages/serverless-logic-web-tools/src/homepage/overView/ImportFromUrlCard.tsx
@@ -1,11 +1,11 @@
/*
- * Copyright 2021 Red Hat, Inc. and/or its affiliates.
+ * Copyright 2022 Red Hat, Inc. and/or its affiliates.
*
* Licensed 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
+ * 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,
@@ -14,17 +14,18 @@
* limitations under the License.
*/
+import { SupportedFileExtensions } from "../../extension";
+import * as React from "react";
+import { useRoutes } from "../../navigation/Hooks";
+import { useHistory } from "react-router";
+import { useCallback, useMemo, useState } from "react";
+import { UrlType, useImportableUrl } from "../../workspace/hooks/ImportableUrlHooks";
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 { CodeIcon } from "@patternfly/react-icons/dist/js/icons/code-icon";
+import { ImportFromUrlForm } from "../../workspace/components/ImportFromUrlForm";
import { Button, ButtonVariant } from "@patternfly/react-core/dist/js/components/Button";
-import * as React from "react";
-import { useCallback, useMemo, useState } from "react";
-import { useRoutes } from "../navigation/Hooks";
-import { useHistory } from "react-router";
-import { ImportFromUrlForm } from "../workspace/components/ImportFromUrlForm";
-import { useEditorEnvelopeLocator } from "../envelopeLocator/EditorEnvelopeLocatorContext";
-import { UrlType, useImportableUrl } from "../workspace/hooks/ImportableUrlHooks";
+import { useEditorEnvelopeLocator } from "../../envelopeLocator/EditorEnvelopeLocatorContext";
export function ImportFromUrlCard() {
const routes = useRoutes();
diff --git a/packages/serverless-logic-web-tools/src/homepage/overView/NewModelCard.tsx b/packages/serverless-logic-web-tools/src/homepage/overView/NewModelCard.tsx
new file mode 100644
index 0000000000..ab39d58ade
--- /dev/null
+++ b/packages/serverless-logic-web-tools/src/homepage/overView/NewModelCard.tsx
@@ -0,0 +1,51 @@
+/*
+ * Copyright 2022 Red Hat, Inc. and/or its affiliates.
+ *
+ * Licensed 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 { SupportedFileExtensions } from "../../extension";
+import * as React from "react";
+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 } 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 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>
+ <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>
+ );
+}
diff --git a/packages/serverless-logic-web-tools/src/homepage/overView/NewServerlessModelCard.tsx b/packages/serverless-logic-web-tools/src/homepage/overView/NewServerlessModelCard.tsx
new file mode 100644
index 0000000000..406c3825fe
--- /dev/null
+++ b/packages/serverless-logic-web-tools/src/homepage/overView/NewServerlessModelCard.tsx
@@ -0,0 +1,66 @@
+/*
+ * Copyright 2022 Red Hat, Inc. and/or its affiliates.
+ *
+ * Licensed 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 { 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;
+ jsonExtension: SupportedFileExtensions;
+ yamlExtension: SupportedFileExtensions;
+ description: string;
+}) {
+ 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}>
+ <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>
+ );
+}
diff --git a/packages/serverless-logic-web-tools/src/homepage/overView/Overview.tsx b/packages/serverless-logic-web-tools/src/homepage/overView/Overview.tsx
new file mode 100644
index 0000000000..2cdb5eda27
--- /dev/null
+++ b/packages/serverless-logic-web-tools/src/homepage/overView/Overview.tsx
@@ -0,0 +1,122 @@
+/*
+ * Copyright 2022 Red Hat, Inc. and/or its affiliates.
+ *
+ * Licensed 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 { FileTypes } from "../../extension";
+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 { 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 { NewModelCard } from "./NewModelCard";
+
+export function Overview() {
+ const routes = useRoutes();
+ const history = useHistory();
+ const expandedWorkspaceId = useQueryParam(QueryParams.EXPAND);
+ const queryParams = useQueryParams();
+
+ const closeExpandedWorkspace = useCallback(() => {
+ history.replace({
+ pathname: routes.home.path({}),
+ search: queryParams.without(QueryParams.EXPAND).toString(),
+ });
+ }, [history, routes, queryParams]);
+
+ const expandWorkspace = useCallback(
+ (workspaceId: string) => {
+ const expand = workspaceId !== expandedWorkspaceId ? workspaceId : undefined;
+ if (!expand) {
+ closeExpandedWorkspace();
+ return;
+ }
+
+ history.replace({
+ pathname: routes.home.path({}),
+ search: routes.home.queryString({ expand }),
+ });
+ },
+ [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">
+ <TextContent>
+ <Text component={TextVariants.h1}>Create</Text>
+ </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>
+ );
+}
diff --git a/packages/serverless-logic-web-tools/src/home/UploadCard.tsx b/packages/serverless-logic-web-tools/src/homepage/overView/UploadCard.tsx
similarity index 98%
rename from packages/serverless-logic-web-tools/src/home/UploadCard.tsx
rename to packages/serverless-logic-web-tools/src/homepage/overView/UploadCard.tsx
index 04a781ba32..aabae9ea32 100644
--- a/packages/serverless-logic-web-tools/src/home/UploadCard.tsx
+++ b/packages/serverless-logic-web-tools/src/homepage/overView/UploadCard.tsx
@@ -1,11 +1,11 @@
/*
- * Copyright 2021 Red Hat, Inc. and/or its affiliates.
+ * Copyright 2022 Red Hat, Inc. and/or its affiliates.
*
* Licensed 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
+ * 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,
@@ -22,7 +22,7 @@ import { useDropzone } from "react-dropzone";
import { Bullseye } from "@patternfly/react-core/dist/js/layouts/Bullseye";
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 { useRoutes } from "../navigation/Hooks";
+import { useRoutes } from "../../navigation/Hooks";
import { useHistory } from "react-router";
import { Button, ButtonVariant } from "@patternfly/react-core/dist/js/components/Button";
import { Spinner } from "@patternfly/react-core/dist/js/components/Spinner";
@@ -37,6 +37,7 @@ enum UploadType {
FOLDER,
DND,
}
+
export function UploadCard(props: { expandWorkspace: (workspaceId: string) => void }) {
const routes = useRoutes();
const history = useHistory();
diff --git a/packages/serverless-logic-web-tools/src/homepage/pageTemplate/OnlineEditorPage.tsx b/packages/serverless-logic-web-tools/src/homepage/pageTemplate/OnlineEditorPage.tsx
new file mode 100644
index 0000000000..6f13f1ae49
--- /dev/null
+++ b/packages/serverless-logic-web-tools/src/homepage/pageTemplate/OnlineEditorPage.tsx
@@ -0,0 +1,142 @@
+/*
+ * Copyright 2021 Red Hat, Inc. and/or its affiliates.
+ *
+ * Licensed 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 { useMemo } from "react";
+import {
+ Masthead,
+ MastheadBrand,
+ MastheadMain,
+ MastheadToggle,
+ Button,
+ Brand,
+ MastheadContent,
+ ToolbarContent,
+ Toolbar,
+ ToolbarGroup,
+ ToolbarItem,
+ PageSidebar,
+ SkipToContent,
+} from "@patternfly/react-core";
+import { Page } from "@patternfly/react-core/dist/js/components/Page";
+import { useHistory } from "react-router";
+import { KieSandboxExtendedServicesIcon } from "../../kieSandboxExtendedServices/KieSandboxExtendedServicesIcon";
+import { useRoutes } from "../../navigation/Hooks";
+import { OpenshiftDeploymentsDropdown } from "../../openshift/dropdown/OpenshiftDeploymentsDropdown";
+import { SettingsButton } from "../../settings/SettingsButton";
+import { HomePageNav } from "../uiNav/HomePageNav";
+import { useLocation } from "react-router-dom";
+import { useState } from "react";
+import { Tooltip } from "@patternfly/react-core/dist/js/components/Tooltip";
+import { ExclamationIcon, BarsIcon } from "@patternfly/react-icons/dist/js/icons";
+
+export function OnlineEditorPage(props: { children?: React.ReactNode }) {
+ const history = useHistory();
+ const routes = useRoutes();
+ const [isNavOpen, setIsNavOpen] = useState(true);
+ const navToggle = () => {
+ setIsNavOpen(!isNavOpen);
+ };
+
+ const isChromiumBased = useMemo(() => {
+ const agent = window.navigator.userAgent.toLowerCase();
+ return agent.indexOf("edg") > -1 || agent.indexOf("chrome") > -1;
+ }, []);
+
+ const headerToolbar = (
+ <Toolbar id="toolbar" isFullHeight isStatic>
+ <ToolbarContent>
+ <ToolbarGroup
+ variant="icon-button-group"
+ alignment={{ default: "alignRight" }}
+ spacer={{ default: "spacerNone", md: "spacerMd" }}
+ >
+ <ToolbarItem>
+ <OpenshiftDeploymentsDropdown />
+ </ToolbarItem>
+ <ToolbarItem>
+ <SettingsButton />
+ </ToolbarItem>
+ <ToolbarItem>
+ <KieSandboxExtendedServicesIcon />
+ </ToolbarItem>
+ {!isChromiumBased && (
+ <ToolbarItem>
+ <Tooltip
+ className="kogito--editor__light-tooltip"
+ key={"not-chromium"}
+ content={"To get the best experience, please prefer using Chromium based browsers."}
+ flipBehavior={["left"]}
+ distance={20}
+ >
+ <ExclamationIcon
+ data-testid="not-chromium-icon"
+ className="kogito--editor__kie-sandbox-extended-services-dropdown-icon-outdated static-opacity"
+ id="kie-sandbox-extended-services-not-chromium-icon"
+ style={{ cursor: "pointer" }}
+ />
+ </Tooltip>
+ </ToolbarItem>
+ )}
+ </ToolbarGroup>
+ </ToolbarContent>
+ </Toolbar>
+ );
+
+ const masthead = (
+ <Masthead>
+ <MastheadToggle>
+ <Button
+ id="nav-toggle"
+ variant="plain"
+ aria-label="Global NAV"
+ onClick={navToggle}
+ aria-expanded={isNavOpen}
+ aria-controls=""
+ >
+ <BarsIcon />
+ </Button>
+ </MastheadToggle>
+ <MastheadMain>
+ <MastheadBrand
+ onClick={() => history.push({ pathname: routes.home.path({}) })}
+ style={{ textDecoration: "none" }}
+ >
+ <Brand
+ className="kogito-tools-common--brand"
+ src="images/kogito_log_workbranch.svg"
+ alt="kogito_logo_white.png"
+ ></Brand>
+ </MastheadBrand>
+ </MastheadMain>
+ <MastheadContent>{headerToolbar}</MastheadContent>
+ </Masthead>
+ );
+ const location = useLocation();
+
+ const sidebar = (
+ <PageSidebar nav={<HomePageNav pathname={location.pathname}></HomePageNav>} isNavOpen={isNavOpen} theme="dark" />
+ );
+ const mainContainerId = "main-content-page-layout-tertiary-nav";
+
+ const pageSkipToContent = <SkipToContent href={`#${mainContainerId}`}>Skip to content</SkipToContent>;
+
+ return (
+ <Page header={masthead} sidebar={sidebar} skipToContent={pageSkipToContent} mainContainerId={mainContainerId}>
+ {props.children}
+ </Page>
+ );
+}
diff --git a/packages/serverless-logic-web-tools/src/navigation/RoutesSwitch.tsx b/packages/serverless-logic-web-tools/src/homepage/routes/HomePageRoutes.tsx
similarity index 56%
copy from packages/serverless-logic-web-tools/src/navigation/RoutesSwitch.tsx
copy to packages/serverless-logic-web-tools/src/homepage/routes/HomePageRoutes.tsx
index 52e97bc03b..8ddd74cdf8 100644
--- a/packages/serverless-logic-web-tools/src/navigation/RoutesSwitch.tsx
+++ b/packages/serverless-logic-web-tools/src/homepage/routes/HomePageRoutes.tsx
@@ -5,7 +5,7 @@
* 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
+ * 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,
@@ -14,21 +14,22 @@
* limitations under the License.
*/
-import * as React from "react";
-import { useMemo } from "react";
-import { Route, Switch } from "react-router-dom";
-import { EditorPage } from "../editor/EditorPage";
-import { supportedFileExtensionArray } from "../extension";
-import { HomePage } from "../home/HomePage";
-import { NewWorkspaceFromUrlPage } from "../workspace/components/NewWorkspaceFromUrlPage";
-import { NewWorkspaceWithEmptyFilePage } from "../workspace/components/NewWorkspaceWithEmptyFilePage";
-import { useRoutes } from "./Hooks";
-import { NoMatchPage } from "./NoMatchPage";
+import React, { useMemo } from "react";
+import { Switch } from "react-router";
+import { Overview } from "../overView/Overview";
+import { ServerlessModels } from "../serverlessModels/ServerlessModels";
+import { Route } from "react-router-dom";
+import { SampleCatalog } from "../sampleCatalog/SampleCatalog";
+import { useRoutes } from "../../navigation/Hooks";
+import { supportedFileExtensionArray } from "../../extension";
+import { NewWorkspaceWithEmptyFilePage } from "../../workspace/components/NewWorkspaceWithEmptyFilePage";
+import { NewWorkspaceFromUrlPage } from "../../workspace/components/NewWorkspaceFromUrlPage";
+import { EditorPage } from "../../editor/EditorPage";
+import { NoMatchPage } from "../../navigation/NoMatchPage";
-export function RoutesSwitch() {
+export function HomePageRoutes() {
const routes = useRoutes();
const supportedExtensions = useMemo(() => supportedFileExtensionArray.join("|"), []);
-
return (
<Switch>
<Route path={routes.newModel.path({ extension: `:extension(${supportedExtensions})` })}>
@@ -53,9 +54,22 @@ export function RoutesSwitch() {
/>
)}
</Route>
- <Route exact={true} path={routes.home.path({})}>
- <HomePage />
+ <Route path="/" exact>
+ <Overview />
+ </Route>
+ <Route path="/ServerlessModels">
+ <ServerlessModels />
</Route>
+ <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/home/SampleCard.tsx b/packages/serverless-logic-web-tools/src/homepage/sampleCatalog/SampleCard.tsx
similarity index 61%
rename from packages/serverless-logic-web-tools/src/home/SampleCard.tsx
rename to packages/serverless-logic-web-tools/src/homepage/sampleCatalog/SampleCard.tsx
index d69e1e2f52..689412102c 100644
--- a/packages/serverless-logic-web-tools/src/home/SampleCard.tsx
+++ b/packages/serverless-logic-web-tools/src/homepage/sampleCatalog/SampleCard.tsx
@@ -1,60 +1,30 @@
+/*
+ * Copyright 2022 Red Hat, Inc. and/or its affiliates.
+ *
+ * Licensed 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 { useMemo } from "react";
import { Card, CardTitle, CardFooter, CardBody } from "@patternfly/react-core/dist/js/components/Card";
import { Grid, GridItem } from "@patternfly/react-core/dist/js/layouts/Grid";
import { Button, ButtonVariant } from "@patternfly/react-core/dist/js/components/Button";
-import { useRoutes } from "../navigation/Hooks";
+import { useRoutes } from "../../navigation/Hooks";
import { Link } from "react-router-dom";
import { Text } from "@patternfly/react-core/dist/js/components/Text";
-import { Label, LabelProps } from "@patternfly/react-core/dist/js/components/Label";
-import { FolderIcon, FileIcon, MonitoringIcon } from "@patternfly/react-icons/dist/js/icons";
-import { labelColors } from "../workspace/components/FileLabel";
-import { FileTypes } from "../extension";
-
-export enum SampleType {
- SW_YML = "sw.yml",
- SW_YAML = "sw.yaml",
- SW_JSON = "sw.json",
- SW_PROJECT = "sw.project",
- DASH_YML = "dash.yml",
-}
-
-export type Sample = {
- name: string;
- fileName: string;
- svg: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
- description: string;
- repoUrl?: string;
- type: SampleType;
-};
-
-const tagMap: Record<SampleType, { label: string; icon: React.ComponentClass; color: LabelProps["color"] }> = {
- [SampleType.SW_YML]: {
- label: labelColors[SampleType.SW_YML].label,
- icon: FileIcon,
- color: labelColors[SampleType.SW_YML].color,
- },
- [SampleType.SW_YAML]: {
- label: labelColors[SampleType.SW_YAML].label,
- icon: FileIcon,
- color: labelColors[SampleType.SW_YAML].color,
- },
- [SampleType.SW_JSON]: {
- label: labelColors[SampleType.SW_JSON].label,
- icon: FileIcon,
- color: labelColors[SampleType.SW_JSON].color,
- },
- [SampleType.SW_PROJECT]: {
- label: "Serverless Project",
- icon: FolderIcon,
- color: "orange",
- },
- [SampleType.DASH_YML]: {
- label: labelColors[SampleType.DASH_YML].label,
- icon: MonitoringIcon,
- color: labelColors[SampleType.DASH_YML].color,
- },
-};
+import { Label } from "@patternfly/react-core/dist/js/components/Label";
+import { FileTypes } from "../../extension";
+import { Sample, tagMap } from "./Types";
export function SampleCard({ sample }: { sample: Sample }) {
const routes = useRoutes();
diff --git a/packages/serverless-logic-web-tools/src/home/Showcase.tsx b/packages/serverless-logic-web-tools/src/homepage/sampleCatalog/SampleCatalog.tsx
similarity index 83%
rename from packages/serverless-logic-web-tools/src/home/Showcase.tsx
rename to packages/serverless-logic-web-tools/src/homepage/sampleCatalog/SampleCatalog.tsx
index 4c3a2d1e1c..b26bc2c997 100644
--- a/packages/serverless-logic-web-tools/src/home/Showcase.tsx
+++ b/packages/serverless-logic-web-tools/src/homepage/sampleCatalog/SampleCatalog.tsx
@@ -16,16 +16,17 @@
import * as React from "react";
import { TextContent, Text } from "@patternfly/react-core/dist/js/components/Text";
-import { Sample, SampleCard, SampleType } from "./SampleCard";
-import { ReactComponent as GreetingsSvg } from "../../static/samples/greetings/greetings.svg";
-import { ReactComponent as GreetingsKafkaSvg } from "../../static/samples/greetings-kafka/greetings-kafka.svg";
-import { ReactComponent as ProductsDashboardSvg } from "../../static/samples/products-dashboard/products-dashboard.svg";
-import { ReactComponent as SwfReportSvg } from "../../static/samples/swf-report/swf-report.svg";
-import { ReactComponent as KitchensinkSvg } from "../../static/samples/kitchensink/kitchensink.svg";
-import { ReactComponent as CompensationSvg } from "../../static/samples/compensation/compensation.svg";
+import { Sample, SampleType } from "./Types";
+import { ReactComponent as GreetingsSvg } from "../../../static/samples/greetings/greetings.svg";
+import { ReactComponent as GreetingsKafkaSvg } from "../../../static/samples/greetings-kafka/greetings-kafka.svg";
+import { ReactComponent as ProductsDashboardSvg } from "../../../static/samples/products-dashboard/products-dashboard.svg";
+import { ReactComponent as SwfReportSvg } from "../../../static/samples/swf-report/swf-report.svg";
+import { ReactComponent as KitchensinkSvg } from "../../../static/samples/kitchensink/kitchensink.svg";
+import { ReactComponent as CompensationSvg } from "../../../static/samples/compensation/compensation.svg";
import { Gallery } from "@patternfly/react-core/dist/js/layouts/Gallery";
+import { SampleCard } from "./SampleCard";
-export const samples: Array<Sample> = [
+const samples: Array<Sample> = [
{
name: "Greetings",
fileName: "greetings",
@@ -72,7 +73,7 @@ export const samples: Array<Sample> = [
},
];
-export function Showcase() {
+export function SampleCatalog() {
return (
<>
<TextContent>
diff --git a/packages/serverless-logic-web-tools/src/homepage/sampleCatalog/Types.ts b/packages/serverless-logic-web-tools/src/homepage/sampleCatalog/Types.ts
new file mode 100644
index 0000000000..037ec8e5e3
--- /dev/null
+++ b/packages/serverless-logic-web-tools/src/homepage/sampleCatalog/Types.ts
@@ -0,0 +1,65 @@
+/*
+ * Copyright 2022 Red Hat, Inc. and/or its affiliates.
+ *
+ * Licensed 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 { LabelProps } from "@patternfly/react-core/dist/js/components/Label";
+import { labelColors } from "../../workspace/components/FileLabel";
+import { FileIcon, FolderIcon, MonitoringIcon } from "@patternfly/react-icons/dist/js/icons";
+
+export enum SampleType {
+ SW_YML = "sw.yml",
+ SW_YAML = "sw.yaml",
+ SW_JSON = "sw.json",
+ SW_PROJECT = "sw.project",
+ DASH_YML = "dash.yml",
+}
+
+export type Sample = {
+ name: string;
+ fileName: string;
+ svg: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+ description: string;
+ repoUrl?: string;
+ type: SampleType;
+};
+
+export const tagMap: Record<SampleType, { label: string; icon: React.ComponentClass; color: LabelProps["color"] }> = {
+ [SampleType.SW_YML]: {
+ label: labelColors[SampleType.SW_YML].label,
+ icon: FileIcon,
+ color: labelColors[SampleType.SW_YML].color,
+ },
+ [SampleType.SW_YAML]: {
+ label: labelColors[SampleType.SW_YAML].label,
+ icon: FileIcon,
+ color: labelColors[SampleType.SW_YAML].color,
+ },
+ [SampleType.SW_JSON]: {
+ label: labelColors[SampleType.SW_JSON].label,
+ icon: FileIcon,
+ color: labelColors[SampleType.SW_JSON].color,
+ },
+ [SampleType.SW_PROJECT]: {
+ label: "Serverless Project",
+ icon: FolderIcon,
+ color: "orange",
+ },
+ [SampleType.DASH_YML]: {
+ label: labelColors[SampleType.DASH_YML].label,
+ icon: MonitoringIcon,
+ color: labelColors[SampleType.DASH_YML].color,
+ },
+};
diff --git a/packages/serverless-logic-web-tools/src/home/HomePage.tsx b/packages/serverless-logic-web-tools/src/homepage/serverlessModels/ServerlessModels.tsx
similarity index 64%
rename from packages/serverless-logic-web-tools/src/home/HomePage.tsx
rename to packages/serverless-logic-web-tools/src/homepage/serverlessModels/ServerlessModels.tsx
index 4945dfe46d..a2289c29c9 100644
--- a/packages/serverless-logic-web-tools/src/home/HomePage.tsx
+++ b/packages/serverless-logic-web-tools/src/homepage/serverlessModels/ServerlessModels.tsx
@@ -1,11 +1,11 @@
/*
- * Copyright 2021 Red Hat, Inc. and/or its affiliates.
+ * Copyright 2022 Red Hat, Inc. and/or its affiliates.
*
* Licensed 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
+ * 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,
@@ -15,40 +15,28 @@
*/
import * as React from "react";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { PageSection } from "@patternfly/react-core/dist/js/components/Page";
-import { Text, TextContent, TextVariants } from "@patternfly/react-core/dist/js/components/Text";
-import { Title } from "@patternfly/react-core/dist/js/components/Title";
-import { Label } from "@patternfly/react-core/dist/js/components/Label";
-import { useHistory } from "react-router";
-import { Button, ButtonVariant } from "@patternfly/react-core/dist/js/components/Button";
+import { PromiseStateWrapper } from "@kie-tools-core/react-hooks/dist/PromiseState";
+import { useController } from "@kie-tools-core/react-hooks/dist/useController";
+import { useWorkspaces, WorkspaceFile } from "@kie-tools-core/workspaces-git-fs/dist/context/WorkspacesContext";
+import { useWorkspacePromise } from "@kie-tools-core/workspaces-git-fs/dist/hooks/WorkspaceHooks";
+import { useWorkspaceDescriptorsPromise } from "@kie-tools-core/workspaces-git-fs/dist/hooks/WorkspacesHooks";
+import { WorkspaceDescriptor } from "@kie-tools-core/workspaces-git-fs/dist/worker/api/WorkspaceDescriptor";
+import { WorkspaceKind } from "@kie-tools-core/workspaces-git-fs/dist/worker/api/WorkspaceOrigin";
import {
Card,
CardActions,
CardBody,
- CardFooter,
CardHeader,
CardHeaderMain,
CardTitle,
} from "@patternfly/react-core/dist/js/components/Card";
-import { ExpandableSection } from "@patternfly/react-core/dist/js/components/ExpandableSection";
-import { Flex, FlexItem } from "@patternfly/react-core/dist/js/layouts/Flex";
-import { Stack, StackItem } from "@patternfly/react-core/dist/js/layouts/Stack";
-import { Grid, GridItem } from "@patternfly/react-core/dist/js/layouts/Grid";
-import { EmptyState, EmptyStateBody, EmptyStateIcon } from "@patternfly/react-core/dist/js/components/EmptyState";
-import { CubesIcon } from "@patternfly/react-icons/dist/js/icons/cubes-icon";
-import { useWorkspaces, WorkspaceFile } from "@kie-tools-core/workspaces-git-fs/dist/context/WorkspacesContext";
-import { OnlineEditorPage } from "../pageTemplate/OnlineEditorPage";
-import { useWorkspaceDescriptorsPromise } from "@kie-tools-core/workspaces-git-fs/dist/hooks/WorkspacesHooks";
-import { useWorkspacePromise } from "@kie-tools-core/workspaces-git-fs/dist/hooks/WorkspaceHooks";
-import { FolderIcon } from "@patternfly/react-icons/dist/js/icons/folder-icon";
-import { TaskIcon } from "@patternfly/react-icons/dist/js/icons/task-icon";
-import { ExclamationTriangleIcon } from "@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon";
-import { FileLabel } from "../workspace/components/FileLabel";
-import { PromiseStateWrapper } from "@kie-tools-core/react-hooks/dist/PromiseState";
-import { Skeleton } from "@patternfly/react-core/dist/js/components/Skeleton";
-import { Gallery } from "@patternfly/react-core/dist/js/layouts/Gallery";
-import { Divider } from "@patternfly/react-core/dist/js/components/Divider";
+import {
+ DataList,
+ DataListCell,
+ DataListItem,
+ DataListItemCells,
+ DataListItemRow,
+} from "@patternfly/react-core/dist/js/components/DataList";
import {
Drawer,
DrawerActions,
@@ -60,37 +48,37 @@ import {
DrawerPanelContent,
DrawerSection,
} from "@patternfly/react-core/dist/js/components/Drawer";
-import { Link } from "react-router-dom";
-import { DeleteDropdownWithConfirmation } from "../editor/DeleteDropdownWithConfirmation";
-import { useQueryParam, useQueryParams } from "../queryParams/QueryParamsContext";
-import { QueryParams } from "../navigation/Routes";
-import { Bullseye } from "@patternfly/react-core/dist/js/layouts/Bullseye";
-import { RelativeDate } from "../dates/RelativeDate";
-import {
- DataList,
- DataListCell,
- DataListItem,
- DataListItemCells,
- DataListItemRow,
-} from "@patternfly/react-core/dist/js/components/DataList";
-import { WorkspaceLabel } from "../workspace/components/WorkspaceLabel";
-import { UploadCard } from "./UploadCard";
-import { ImportFromUrlCard } from "./ImportFromUrlCard";
-import { WorkspaceKind } from "@kie-tools-core/workspaces-git-fs/dist/worker/api/WorkspaceOrigin";
import { Dropdown, DropdownToggle } from "@patternfly/react-core/dist/js/components/Dropdown";
-import { PlusIcon } from "@patternfly/react-icons/dist/js/icons/plus-icon";
-import { NewFileDropdownMenu } from "../editor/NewFileDropdownMenu";
-import { Alerts, AlertsController } from "../alerts/Alerts";
-import { useController } from "@kie-tools-core/react-hooks/dist/useController";
+import { EmptyState, EmptyStateBody, EmptyStateIcon } from "@patternfly/react-core/dist/js/components/EmptyState";
+import { ExpandableSection } from "@patternfly/react-core/dist/js/components/ExpandableSection";
+import { Skeleton } from "@patternfly/react-core/dist/js/components/Skeleton";
import { Spinner } from "@patternfly/react-core/dist/js/components/Spinner";
-import { useRoutes } from "../navigation/Hooks";
-import { ErrorBoundary } from "../reactExt/ErrorBoundary";
-import { WorkspaceDescriptor } from "@kie-tools-core/workspaces-git-fs/dist/worker/api/WorkspaceDescriptor";
-import { Showcase } from "./Showcase";
-import { FileTypes, splitFiles, SupportedFileExtensions } from "../extension";
-import { APP_NAME } from "../AppConstants";
+import { Text, TextContent, TextVariants } from "@patternfly/react-core/dist/js/components/Text";
+import { Title } from "@patternfly/react-core/dist/js/components/Title";
+import { Bullseye } from "@patternfly/react-core/dist/js/layouts/Bullseye";
+import { Flex, FlexItem } from "@patternfly/react-core/dist/js/layouts/Flex";
+import { Stack, StackItem } from "@patternfly/react-core/dist/js/layouts/Stack";
+import { CubesIcon } from "@patternfly/react-icons/dist/js/icons/cubes-icon";
+import { ExclamationTriangleIcon } from "@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon";
+import { FolderIcon } from "@patternfly/react-icons/dist/js/icons/folder-icon";
+import { PlusIcon } from "@patternfly/react-icons/dist/js/icons/plus-icon";
+import { TaskIcon } from "@patternfly/react-icons/dist/js/icons/task-icon";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useHistory } from "react-router";
+import { Link } from "react-router-dom";
+import { Alerts, AlertsController } from "../../alerts/Alerts";
+import { RelativeDate } from "../../dates/RelativeDate";
+import { DeleteDropdownWithConfirmation } from "../../editor/DeleteDropdownWithConfirmation";
+import { NewFileDropdownMenu } from "../../editor/NewFileDropdownMenu";
+import { isEditable, splitFiles } from "../../extension";
+import { useRoutes } from "../../navigation/Hooks";
+import { QueryParams } from "../../navigation/Routes";
+import { useQueryParam, useQueryParams } from "../../queryParams/QueryParamsContext";
+import { ErrorBoundary } from "../../reactExt/ErrorBoundary";
+import { FileLabel } from "../../workspace/components/FileLabel";
+import { WorkspaceLabel } from "../../workspace/components/WorkspaceLabel";
-export function HomePage() {
+export function ServerlessModels() {
const routes = useRoutes();
const history = useHistory();
const workspaceDescriptorsPromise = useWorkspaceDescriptorsPromise();
@@ -99,10 +87,10 @@ export function HomePage() {
const closeExpandedWorkspace = useCallback(() => {
history.replace({
- pathname: routes.home.path({}),
+ pathname: "/ServerlessModels",
search: queryParams.without(QueryParams.EXPAND).toString(),
});
- }, [history, routes, queryParams]);
+ }, [history, queryParams]);
const expandWorkspace = useCallback(
(workspaceId: string) => {
@@ -113,17 +101,13 @@ export function HomePage() {
}
history.replace({
- pathname: routes.home.path({}),
+ pathname: "/ServerlessModels",
search: routes.home.queryString({ expand }),
});
},
[closeExpandedWorkspace, history, routes, expandedWorkspaceId]
);
- useEffect(() => {
- document.title = `${APP_NAME} :: Home`;
- }, []);
-
useEffect(() => {
if (
workspaceDescriptorsPromise.data &&
@@ -133,140 +117,187 @@ export function HomePage() {
}
}, [workspaceDescriptorsPromise, closeExpandedWorkspace, expandedWorkspaceId]);
- const buildInfo = useMemo(() => {
- return process.env["WEBPACK_REPLACE__buildInfo"];
- }, []);
-
return (
- <OnlineEditorPage>
- <PageSection isFilled={false}>
- <Grid hasGutter>
- <GridItem sm={12} xl={6}>
- <PageSection variant={"light"} isFilled={true} style={{ height: "100%" }}>
- <TextContent>
- <Text component={TextVariants.h1}>Create</Text>
- </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>
- </PageSection>
- </GridItem>
- <GridItem sm={12} xl={6}>
- <PageSection variant={"light"} isFilled={true} style={{ height: "100%" }}>
+ <PromiseStateWrapper
+ promise={workspaceDescriptorsPromise}
+ rejected={(e) => <>Error fetching workspaces: {e + ""}</>}
+ resolved={(workspaceDescriptors) => {
+ return (
+ <Drawer isExpanded={!!expandedWorkspaceId} isInline={true}>
+ <DrawerSection>
<TextContent>
- <Text component={TextVariants.h1}>Import</Text>
+ <Text component={TextVariants.h1}>Recent models</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>
- </PageSection>
- <PageSection isFilled={false} style={{ paddingRight: 0 }}>
- <Showcase />
- </PageSection>
- <PageSection
- isFilled={true}
- variant={"light"}
- hasOverflowScroll={false}
- data-ouia-component-id={"recent-models-section"}
- >
- <PromiseStateWrapper
- promise={workspaceDescriptorsPromise}
- rejected={(e) => <>Error fetching workspaces: {e + ""}</>}
- resolved={(workspaceDescriptors) => {
- return (
- <Drawer isExpanded={!!expandedWorkspaceId} isInline={true}>
- <DrawerSection>
+ </DrawerSection>
+ <DrawerContent
+ panelContent={
+ <WorkspacesListDrawerPanelContent workspaceId={expandedWorkspaceId} onClose={closeExpandedWorkspace} />
+ }
+ >
+ <DrawerContentBody>
+ {workspaceDescriptors.length > 0 && (
+ <Stack hasGutter={true} style={{ padding: "10px" }}>
+ {workspaceDescriptors
+ .sort((a, b) => (new Date(a.lastUpdatedDateISO) < new Date(b.lastUpdatedDateISO) ? 1 : -1))
+ .map((workspace) => (
+ <StackItem key={workspace.workspaceId}>
+ <ErrorBoundary error={<WorkspaceCardError workspace={workspace} />}>
+ <WorkspaceCard
+ workspaceId={workspace.workspaceId}
+ onSelect={() => expandWorkspace(workspace.workspaceId)}
+ isSelected={workspace.workspaceId === expandedWorkspaceId}
+ />
+ </ErrorBoundary>
+ </StackItem>
+ ))}
+ </Stack>
+ )}
+ {workspaceDescriptors.length === 0 && (
+ <Bullseye>
+ <EmptyState>
+ <EmptyStateIcon icon={CubesIcon} />
+ <Title headingLevel="h4" size="lg">
+ {`Nothing here`}
+ </Title>
+ <EmptyStateBody>{`Start by adding a new model`}</EmptyStateBody>
+ </EmptyState>
+ </Bullseye>
+ )}
+ </DrawerContentBody>
+ </DrawerContent>
+ </Drawer>
+ );
+ }}
+ />
+ );
+}
+
+export function WorkspacesListDrawerPanelContent(props: { workspaceId: string | undefined; onClose: () => void }) {
+ const routes = useRoutes();
+ const workspacePromise = useWorkspacePromise(props.workspaceId);
+
+ const readonlyFiles = useMemo(
+ () =>
+ (workspacePromise.data?.files ?? [])
+ .sort((a, b) => a.relativePath.localeCompare(b.relativePath))
+ .filter((file) => !isEditable(file.relativePath)),
+ [workspacePromise.data?.files]
+ );
+
+ const editableFiles = useMemo(
+ () =>
+ (workspacePromise.data?.files ?? [])
+ .sort((a, b) => a.relativePath.localeCompare(b.relativePath))
+ .filter((file) => isEditable(file.relativePath)),
+ [workspacePromise.data?.files]
+ );
+
+ const [isNewFileDropdownMenuOpen, setNewFileDropdownMenuOpen] = useState(false);
+ const [alerts, alertsRef] = useController<AlertsController>();
+
+ return (
+ <DrawerPanelContent isResizable={true} minSize={"40%"} maxSize={"80%"}>
+ <PromiseStateWrapper
+ promise={workspacePromise}
+ pending={
+ <DrawerPanelBody>
+ <Bullseye>
+ <Spinner />
+ </Bullseye>
+ </DrawerPanelBody>
+ }
+ resolved={(workspace) => (
+ <>
+ <Alerts width={"100%"} ref={alertsRef} />
+ <DrawerHead>
+ <Flex>
+ <FlexItem>
<TextContent>
- <Text component={TextVariants.h1}>Recent models</Text>
+ <Text
+ component={TextVariants.h3}
+ >{`Editable files in '${workspacePromise.data?.descriptor.name}'`}</Text>
</TextContent>
- <br />
- </DrawerSection>
- <DrawerContent
- panelContent={
- <WorkspacesListDrawerPanelContent
- workspaceId={expandedWorkspaceId}
- onClose={closeExpandedWorkspace}
+ </FlexItem>
+ <FlexItem>
+ <Dropdown
+ isPlain={true}
+ position={"left"}
+ isOpen={isNewFileDropdownMenuOpen}
+ toggle={
+ <DropdownToggle
+ className={"kie-tools--masthead-hoverable"}
+ toggleIndicator={null}
+ onToggle={setNewFileDropdownMenuOpen}
+ >
+ <PlusIcon />
+ </DropdownToggle>
+ }
+ >
+ <NewFileDropdownMenu
+ alerts={alerts}
+ workspaceId={workspace.descriptor.workspaceId}
+ destinationDirPath={""}
+ onAddFile={async () => setNewFileDropdownMenuOpen(false)}
/>
- }
+ </Dropdown>
+ </FlexItem>
+ </Flex>
+ {(workspace.descriptor.origin.kind === WorkspaceKind.GITHUB_GIST ||
+ workspace.descriptor.origin.kind === WorkspaceKind.GIT) && (
+ <TextContent>
+ <Text component={TextVariants.small}>
+ <i>{workspace.descriptor.origin.url.toString()}</i>
+ </Text>
+ </TextContent>
+ )}
+ <DrawerActions>
+ <DrawerCloseButton onClick={props.onClose} />
+ </DrawerActions>
+ </DrawerHead>
+ <DrawerPanelBody>
+ <DataList aria-label="models-data-list">
+ {editableFiles.map((file) => (
+ <Link
+ key={file.relativePath}
+ to={routes.workspaceWithFilePath.path({
+ workspaceId: workspace.descriptor.workspaceId ?? "",
+ fileRelativePath: file.relativePathWithoutExtension,
+ extension: file.extension,
+ })}
+ >
+ <FileDataListItem file={file} />
+ </Link>
+ ))}
+ </DataList>
+ <br />
+ {readonlyFiles.length > 0 && (
+ <ExpandableSection
+ toggleTextCollapsed="View readonly files"
+ toggleTextExpanded="Hide readonly files"
+ className={"plain"}
>
- <DrawerContentBody data-ouia-component-id={"recent-models-section-body"}>
- {workspaceDescriptors.length > 0 && (
- <Stack hasGutter={true} style={{ padding: "10px" }}>
- {workspaceDescriptors
- .sort((a, b) => (new Date(a.lastUpdatedDateISO) < new Date(b.lastUpdatedDateISO) ? 1 : -1))
- .map((workspace) => (
- <StackItem key={workspace.workspaceId}>
- <ErrorBoundary error={<WorkspaceCardError workspace={workspace} />}>
- <WorkspaceCard
- workspaceId={workspace.workspaceId}
- onSelect={() => expandWorkspace(workspace.workspaceId)}
- isSelected={workspace.workspaceId === expandedWorkspaceId}
- />
- </ErrorBoundary>
- </StackItem>
- ))}
- </Stack>
- )}
- {workspaceDescriptors.length === 0 && (
- <Bullseye>
- <EmptyState>
- <EmptyStateIcon icon={CubesIcon} />
- <Title headingLevel="h4" size="lg" ouiaId={"empty-recent-models-title"}>
- {`Nothing here`}
- </Title>
- <EmptyStateBody>{`Start by adding a new model`}</EmptyStateBody>
- </EmptyState>
- </Bullseye>
- )}
- </DrawerContentBody>
- </DrawerContent>
- </Drawer>
- );
- }}
- />
- </PageSection>
- {buildInfo && (
- <div className={"kie-tools--build-info"}>
- <Label>{buildInfo}</Label>
- </div>
- )}
- </OnlineEditorPage>
+ <DataList aria-label="readonly-files-data-list">
+ {readonlyFiles.map((file) => (
+ <Link
+ key={file.relativePath}
+ to={routes.workspaceWithFilePath.path({
+ workspaceId: workspace.descriptor.workspaceId ?? "",
+ fileRelativePath: file.relativePathWithoutExtension,
+ extension: file.extension,
+ })}
+ >
+ <FileDataListItem key={file.relativePath} file={file} />
+ </Link>
+ ))}
+ </DataList>
+ </ExpandableSection>
+ )}
+ </DrawerPanelBody>
+ </>
+ )}
+ />
+ </DrawerPanelContent>
);
}
@@ -496,190 +527,6 @@ export function WorkspaceCard(props: { workspaceId: string; isSelected: boolean;
);
}
-export function NewModelCard(props: { title: string; extension: SupportedFileExtensions; description: string }) {
- const routes = useRoutes();
-
- return (
- <Card isFullHeight={true} isPlain={true} isLarge={true} ouiaId={`${props.title}-card`}>
- <CardTitle>
- <FileLabel style={{ fontSize: "0.8em" }} extension={props.extension} />
- </CardTitle>
- <CardBody>
- <TextContent>
- <Text component={TextVariants.p}>{props.description}</Text>
- </TextContent>
- </CardBody>
- <CardFooter>
- <Grid>
- <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>
- );
-}
-
-export function NewServerlessModelCard(props: {
- title: string;
- jsonExtension: SupportedFileExtensions;
- yamlExtension: SupportedFileExtensions;
- description: string;
-}) {
- const routes = useRoutes();
-
- return (
- <Card isFullHeight={true} isPlain={true} isLarge={true} ouiaId={`${props.title}-card`}>
- <CardTitle>
- <FileLabel style={{ fontSize: "0.8em" }} 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}>
- <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>
- );
-}
-
-export function WorkspacesListDrawerPanelContent(props: { workspaceId: string | undefined; onClose: () => void }) {
- const routes = useRoutes();
- const workspacePromise = useWorkspacePromise(props.workspaceId);
-
- const { editableFiles, readonlyFiles } = useMemo(() => {
- const allFiles = (workspacePromise.data?.files ?? []).sort((a, b) => a.relativePath.localeCompare(b.relativePath));
- return splitFiles(allFiles);
- }, [workspacePromise.data?.files]);
-
- const [isNewFileDropdownMenuOpen, setNewFileDropdownMenuOpen] = useState(false);
- const [alerts, alertsRef] = useController<AlertsController>();
-
- return (
- <DrawerPanelContent isResizable={true} minSize={"40%"} maxSize={"80%"}>
- <PromiseStateWrapper
- promise={workspacePromise}
- pending={
- <DrawerPanelBody>
- <Bullseye>
- <Spinner />
- </Bullseye>
- </DrawerPanelBody>
- }
- resolved={(workspace) => (
- <>
- <Alerts width={"100%"} ref={alertsRef} />
- <DrawerHead>
- <Flex>
- <FlexItem>
- <TextContent>
- <Text
- component={TextVariants.h3}
- >{`Editable files in '${workspacePromise.data?.descriptor.name}'`}</Text>
- </TextContent>
- </FlexItem>
- <FlexItem>
- <Dropdown
- isPlain={true}
- position={"left"}
- isOpen={isNewFileDropdownMenuOpen}
- toggle={
- <DropdownToggle
- className={"kie-tools--masthead-hoverable"}
- toggleIndicator={null}
- onToggle={setNewFileDropdownMenuOpen}
- >
- <PlusIcon />
- </DropdownToggle>
- }
- >
- <NewFileDropdownMenu
- alerts={alerts}
- workspaceId={workspace.descriptor.workspaceId}
- destinationDirPath={""}
- onAddFile={async () => setNewFileDropdownMenuOpen(false)}
- />
- </Dropdown>
- </FlexItem>
- </Flex>
- {(workspace.descriptor.origin.kind === WorkspaceKind.GITHUB_GIST ||
- workspace.descriptor.origin.kind === WorkspaceKind.GIT) && (
- <TextContent>
- <Text component={TextVariants.small}>
- <i>{workspace.descriptor.origin.url.toString()}</i>
- </Text>
- </TextContent>
- )}
- <DrawerActions>
- <DrawerCloseButton onClick={props.onClose} />
- </DrawerActions>
- </DrawerHead>
- <DrawerPanelBody>
- <DataList aria-label="models-data-list">
- {editableFiles.map((file) => (
- <Link
- key={file.relativePath}
- to={routes.workspaceWithFilePath.path({
- workspaceId: workspace.descriptor.workspaceId ?? "",
- fileRelativePath: file.relativePathWithoutExtension,
- extension: file.extension,
- })}
- >
- <FileDataListItem file={file} />
- </Link>
- ))}
- </DataList>
- <br />
- {readonlyFiles.length > 0 && (
- <ExpandableSection
- toggleTextCollapsed="View readonly files"
- toggleTextExpanded="Hide readonly files"
- className={"plain"}
- >
- <DataList aria-label="readonly-files-data-list">
- {readonlyFiles.map((file) => (
- <Link
- key={file.relativePath}
- to={routes.workspaceWithFilePath.path({
- workspaceId: workspace.descriptor.workspaceId ?? "",
- fileRelativePath: file.relativePathWithoutExtension,
- extension: file.extension,
- })}
- >
- <FileDataListItem key={file.relativePath} file={file} />
- </Link>
- ))}
- </DataList>
- </ExpandableSection>
- )}
- </DrawerPanelBody>
- </>
- )}
- />
- </DrawerPanelContent>
- );
-}
-
export function FileDataListItem(props: { file: WorkspaceFile }) {
return (
<DataListItem>
diff --git a/packages/serverless-logic-web-tools/src/homepage/styles.css b/packages/serverless-logic-web-tools/src/homepage/styles.css
new file mode 100644
index 0000000000..b4cdbd7511
--- /dev/null
+++ b/packages/serverless-logic-web-tools/src/homepage/styles.css
@@ -0,0 +1,11 @@
+.kogito-tools-common--aboutModalBox .pf-c-about-modal-box__hero {
+ background-attachment: unset;
+}
+
+.kogito-tools-common--PageLayout .pf-c-page__header-brand-link .pf-c-brand {
+ --pf-c-page__header-brand-link--c-brand--MaxHeight: 42px;
+}
+
+/*kogito-tools-common--brand {*/
+/* default: '180px'; md: '180px'; '2xl': '220px'*/
+/*}*/
diff --git a/packages/serverless-logic-web-tools/src/homepage/uiNav/HomePageNav.tsx b/packages/serverless-logic-web-tools/src/homepage/uiNav/HomePageNav.tsx
new file mode 100644
index 0000000000..b0bcf908fa
--- /dev/null
+++ b/packages/serverless-logic-web-tools/src/homepage/uiNav/HomePageNav.tsx
@@ -0,0 +1,43 @@
+/*
+ * Copyright 2022 Red Hat, Inc. and/or its affiliates.
+ *
+ * Licensed 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 { Nav, NavItem, NavList } from "@patternfly/react-core";
+import { Link } from "react-router-dom";
+
+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>
+
+ <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={3} key={"Documentation-nav"} isActive={props.pathname === "/Documentation"}>
+ <Link to="/Documentation">Documentation</Link>
+ </NavItem>
+ </NavList>
+ </Nav>
+ );
+}
diff --git a/packages/serverless-logic-web-tools/src/navigation/RoutesSwitch.tsx b/packages/serverless-logic-web-tools/src/navigation/RoutesSwitch.tsx
index 52e97bc03b..686c59fd1b 100644
--- a/packages/serverless-logic-web-tools/src/navigation/RoutesSwitch.tsx
+++ b/packages/serverless-logic-web-tools/src/navigation/RoutesSwitch.tsx
@@ -17,46 +17,46 @@
import * as React from "react";
import { useMemo } from "react";
import { Route, Switch } from "react-router-dom";
-import { EditorPage } from "../editor/EditorPage";
-import { supportedFileExtensionArray } from "../extension";
-import { HomePage } from "../home/HomePage";
-import { NewWorkspaceFromUrlPage } from "../workspace/components/NewWorkspaceFromUrlPage";
-import { NewWorkspaceWithEmptyFilePage } from "../workspace/components/NewWorkspaceWithEmptyFilePage";
import { useRoutes } from "./Hooks";
-import { NoMatchPage } from "./NoMatchPage";
+import { OnlineEditorPage } from "../homepage/pageTemplate/OnlineEditorPage";
+import { Label } from "@patternfly/react-core/dist/js/components/Label";
+import { HomePageRoutes } from "../homepage/routes/HomePageRoutes";
export function RoutesSwitch() {
const routes = useRoutes();
- const supportedExtensions = useMemo(() => supportedFileExtensionArray.join("|"), []);
+ const buildInfo = useMemo(() => {
+ return process.env["WEBPACK_REPLACE__buildInfo"];
+ }, []);
+
+ const renderPage = (routeProps: {
+ location: {
+ pathname:
+ | string
+ | number
+ | boolean
+ | {}
+ | React.ReactElement<any, string | React.JSXElementConstructor<any>>
+ | React.ReactNodeArray
+ | React.ReactPortal
+ | null
+ | undefined;
+ };
+ }) => {
+ return (
+ <OnlineEditorPage>
+ <HomePageRoutes />
+ {buildInfo && (
+ <div className={"kie-tools--build-info"}>
+ <Label>{buildInfo}</Label>
+ </div>
+ )}
+ </OnlineEditorPage>
+ );
+ };
return (
<Switch>
- <Route path={routes.newModel.path({ extension: `:extension(${supportedExtensions})` })}>
- {({ match }) => <NewWorkspaceWithEmptyFilePage extension={match!.params.extension!} />}
- </Route>
- <Route path={routes.importModel.path({})}>
- <NewWorkspaceFromUrlPage />
- </Route>
- <Route
- path={routes.workspaceWithFilePath.path({
- workspaceId: ":workspaceId",
- fileRelativePath: `:fileRelativePath*`,
- extension: `:extension?`,
- })}
- >
- {({ match }) => (
- <EditorPage
- workspaceId={match!.params.workspaceId!}
- fileRelativePath={`${match!.params.fileRelativePath ?? ""}${
- match!.params.extension ? `.${match!.params.extension}` : ""
- }`}
- />
- )}
- </Route>
- <Route exact={true} path={routes.home.path({})}>
- <HomePage />
- </Route>
- <Route component={NoMatchPage} />
+ <Route path={routes.home.path({})} render={renderPage}></Route>
</Switch>
);
}
diff --git a/packages/serverless-logic-web-tools/src/pageTemplate/OnlineEditorPage.tsx b/packages/serverless-logic-web-tools/src/pageTemplate/OnlineEditorPage.tsx
deleted file mode 100644
index f6c37d12cf..0000000000
--- a/packages/serverless-logic-web-tools/src/pageTemplate/OnlineEditorPage.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-/*
- * Copyright 2021 Red Hat, Inc. and/or its affiliates.
- *
- * Licensed 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 { useMemo } from "react";
-import { Masthead, MastheadBrand, MastheadMain } from "@patternfly/react-core/dist/js/components/Masthead";
-import { Page, PageHeaderToolsItem } from "@patternfly/react-core/dist/js/components/Page";
-import { Text, TextContent, TextVariants } from "@patternfly/react-core/dist/js/components/Text";
-import { Flex, FlexItem } from "@patternfly/react-core/dist/js/layouts/Flex";
-import { useHistory } from "react-router";
-import { KieSandboxExtendedServicesIcon } from "../kieSandboxExtendedServices/KieSandboxExtendedServicesIcon";
-import { useRoutes } from "../navigation/Hooks";
-import { OpenshiftDeploymentsDropdown } from "../openshift/dropdown/OpenshiftDeploymentsDropdown";
-import { SettingsButton } from "../settings/SettingsButton";
-import { Tooltip } from "@patternfly/react-core/dist/js/components/Tooltip";
-import { ExclamationIcon } from "@patternfly/react-icons/dist/js/icons";
-import { APP_NAME } from "../AppConstants";
-
-export function OnlineEditorPage(props: { children?: React.ReactNode }) {
- const history = useHistory();
- const routes = useRoutes();
-
- const isChromiumBased = useMemo(() => {
- const agent = window.navigator.userAgent.toLowerCase();
- return agent.indexOf("edg") > -1 || agent.indexOf("chrome") > -1;
- }, []);
-
- return (
- <Page
- header={
- <Masthead aria-label={"Page header"} display={{ default: "stack" }}>
- <MastheadMain style={{ justifyContent: "space-between" }}>
- <PageHeaderToolsItem className={"pf-l-flex"}>
- <MastheadBrand
- onClick={() => history.push({ pathname: routes.home.path({}) })}
- style={{ textDecoration: "none" }}
- >
- <TextContent>
- <Text component={TextVariants.h1} ouiaId={"app-title"}>
- {APP_NAME}
- </Text>
- </TextContent>
- </MastheadBrand>
- </PageHeaderToolsItem>
- <Flex justifyContent={{ default: "justifyContentFlexEnd" }}>
- <FlexItem>
- <PageHeaderToolsItem>
- <OpenshiftDeploymentsDropdown />
- </PageHeaderToolsItem>
- </FlexItem>
- <FlexItem>
- <PageHeaderToolsItem>
- <SettingsButton />
- </PageHeaderToolsItem>
- </FlexItem>
- <FlexItem>
- <PageHeaderToolsItem>
- <KieSandboxExtendedServicesIcon />
- </PageHeaderToolsItem>
- </FlexItem>
- {!isChromiumBased && (
- <Tooltip
- className="kogito--editor__light-tooltip"
- key={"not-chromium"}
- content={"To get the best experience, please prefer using Chromium based browsers."}
- flipBehavior={["left"]}
- distance={20}
- >
- <ExclamationIcon
- data-testid="not-chromium-icon"
- className="kogito--editor__kie-sandbox-extended-services-dropdown-icon-outdated static-opacity"
- id="kie-sandbox-extended-services-not-chromium-icon"
- style={{ cursor: "pointer" }}
- />
- </Tooltip>
- )}
- </Flex>
- </MastheadMain>
- </Masthead>
- }
- >
- {props.children}
- </Page>
- );
-}
diff --git a/packages/serverless-logic-web-tools/src/workspace/components/NewWorkspaceFromUrlPage.tsx b/packages/serverless-logic-web-tools/src/workspace/components/NewWorkspaceFromUrlPage.tsx
index d5e5ac9cde..284172d44b 100644
--- a/packages/serverless-logic-web-tools/src/workspace/components/NewWorkspaceFromUrlPage.tsx
+++ b/packages/serverless-logic-web-tools/src/workspace/components/NewWorkspaceFromUrlPage.tsx
@@ -24,7 +24,6 @@ import { Spinner } from "@patternfly/react-core/dist/js/components/Spinner";
import { Text, TextContent, TextVariants } from "@patternfly/react-core/dist/js/components/Text";
import { QueryParams } from "../../navigation/Routes";
import { useQueryParam } from "../../queryParams/QueryParamsContext";
-import { OnlineEditorPage } from "../../pageTemplate/OnlineEditorPage";
import { PageSection } from "@patternfly/react-core/dist/js/components/Page";
import { basename } from "path";
import { WorkspaceKind } from "@kie-tools-core/workspaces-git-fs/dist/worker/api/WorkspaceOrigin";
@@ -285,22 +284,20 @@ export function NewWorkspaceFromUrlPage() {
return (
<>
- <OnlineEditorPage>
- {importingError && <EditorPageErrorPage path={importableUrl.url.toString()} errors={[importingError]} />}
- {!importingError && (
- <PageSection variant={"light"} isFilled={true} padding={{ default: "noPadding" }}>
- <Bullseye>
- <TextContent>
- <Bullseye>
- <Spinner />
- </Bullseye>
- <br />
- <Text component={TextVariants.p}>{`Importing from '${queryParamUrl}'`}</Text>
- </TextContent>
- </Bullseye>
- </PageSection>
- )}
- </OnlineEditorPage>
+ {importingError && <EditorPageErrorPage path={importableUrl.url.toString()} errors={[importingError]} />}
+ {!importingError && (
+ <PageSection variant={"light"} isFilled={true} padding={{ default: "noPadding" }}>
+ <Bullseye>
+ <TextContent>
+ <Bullseye>
+ <Spinner />
+ </Bullseye>
+ <br />
+ <Text component={TextVariants.p}>{`Importing from '${queryParamUrl}'`}</Text>
+ </TextContent>
+ </Bullseye>
+ </PageSection>
+ )}
</>
);
}
diff --git a/packages/serverless-logic-web-tools/src/workspace/components/NewWorkspaceWithEmptyFilePage.tsx b/packages/serverless-logic-web-tools/src/workspace/components/NewWorkspaceWithEmptyFilePage.tsx
index 52eac5b847..d142179e57 100644
--- a/packages/serverless-logic-web-tools/src/workspace/components/NewWorkspaceWithEmptyFilePage.tsx
+++ b/packages/serverless-logic-web-tools/src/workspace/components/NewWorkspaceWithEmptyFilePage.tsx
@@ -19,7 +19,6 @@ import * as React from "react";
import { useEffect } from "react";
import { useHistory } from "react-router";
import { useRoutes } from "../../navigation/Hooks";
-import { OnlineEditorPage } from "../../pageTemplate/OnlineEditorPage";
import { PageSection } from "@patternfly/react-core/dist/js/components/Page";
import { Text, TextContent, TextVariants } from "@patternfly/react-core/dist/js/components/Text";
import { Bullseye } from "@patternfly/react-core/dist/js/layouts/Bullseye";
@@ -52,18 +51,16 @@ export function NewWorkspaceWithEmptyFilePage(props: { extension: string }) {
}, [routes, history, props.extension, workspaces]);
return (
- <OnlineEditorPage>
- <PageSection variant={"light"} isFilled={true} padding={{ default: "noPadding" }}>
- <Bullseye>
- <TextContent>
- <Bullseye>
- <Spinner />
- </Bullseye>
- <br />
- <Text component={TextVariants.p}>{`Loading...`}</Text>
- </TextContent>
- </Bullseye>
- </PageSection>
- </OnlineEditorPage>
+ <PageSection variant={"light"} isFilled={true} padding={{ default: "noPadding" }}>
+ <Bullseye>
+ <TextContent>
+ <Bullseye>
+ <Spinner />
+ </Bullseye>
+ <br />
+ <Text component={TextVariants.p}>{`Loading...`}</Text>
+ </TextContent>
+ </Bullseye>
+ </PageSection>
);
}
diff --git a/packages/serverless-logic-web-tools/static/images/kogito_log_workbranch.svg b/packages/serverless-logic-web-tools/static/images/kogito_log_workbranch.svg
new file mode 100644
index 0000000000..7614f359e6
--- /dev/null
+++ b/packages/serverless-logic-web-tools/static/images/kogito_log_workbranch.svg
@@ -0,0 +1,52 @@
+<svg version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 560.2 60" height="60" width="560.2" style="enable-background:new 0 0 560.2 60;" xmlns="http://www.w3.org/2000/svg">
+ <defs></defs>
+ <style type="text/css">
+ .st0{fill:#FFFFFF;}
+ .st1{fill:#AFD4EB;}
+ .st2{fill:#F48227;}
+ .st3{fill:#014E64;}
+ .st4{fill:none;}
+ </style>
+ <title>Serverless Logic Web Tools</title>
+ <path class="st1" d="M3.4,45.1l20.8,12.3l22.7-12.1L42,30.2l-6.3,5.5c0,0,2.6,4.8,1.3,5.1l-5.5-0.5l-5.8,3.2l-4.5-1.8l-1.5-1.4
+ l-2.1-0.5l-3,1.4L13.4,40l0.9-3.3l-3.1-2.9L6.7,31L3.4,45.1z"></path>
+ <polygon class="st1" points="21,30.6 24.9,33 29,31.2 33,33.4 34.7,35.2 37,38 36.9,40.8 33.2,39.8 26.7,39.4 19.9,39.5 15.6,40.4
+ 13.3,40 14.9,35.1 "></polygon>
+ <polygon class="st2" points="10.8,18.2 22.4,17.5 24.9,19.8 27.4,17.8 39.2,18.1 40.8,21.8 41.1,27.9 40.2,32.9 36.7,35.4
+ 34.7,35.2 31.8,32.5 29,31.2 26.5,32.6 21.2,31.4 18.7,32.3 14.9,35.1 11.1,33.7 8.4,30.2 8.2,26.6 "></polygon>
+ <polygon class="st2" points="19.9,39.5 24.5,39.7 29.6,39.8 30.9,40.6 27.4,43.3 22.1,43 "></polygon>
+ <polygon class="st0" points="3.4,2.2 13,3.9 16,8.4 22.8,4.3 28,4.3 33.6,8.3 38.4,3.8 47.7,2.6 47.7,5.6 44.6,12.1 45.4,17.5
+ 41.2,20.6 39.3,18.2 26.7,17.9 25,19.9 23.3,17.6 10.9,18.3 9.3,20.2 5.2,18.6 4.7,15.2 5.2,11.9 4.3,8.6 2.1,4.6 "></polygon>
+ <path class="st3" d="M11.1,21.5c2.1-8.7,8.8-15.8,14.1-15.9c4.4,0.3,12.1,6.5,14.1,15.9l2.4,0.3c-1.4-9.4-8.4-18-16.5-18
+ s-13.9,8-16.3,17.7L11.1,21.5z"></path>
+ <path class="st3" d="M36.7,49.6c-0.3-1.7-0.3-3.4,0-5.1c0,0,0.6,4.3,1.4,4.5L36.7,49.6z"></path>
+ <path class="st3" d="M31.1,53c-0.3-1.7-0.3-3.4,0-5.1c0,0,0.6,4.3,1.4,4.5L31.1,53z"></path>
+ <path class="st3" d="M13.8,49.7c0.3-1.7,0.3-3.4,0-5.1c0,0-0.6,4.3-1.4,4.5L13.8,49.7z"></path>
+ <path class="st3" d="M19.4,53.2c0.3-1.7,0.3-3.4,0-5.1c0,0-0.6,4.3-1.4,4.5L19.4,53.2z"></path>
+ <polygon class="st3" points="7.5,19.2 1.6,46.3 25.3,60 49.1,46.3 43.1,19.5 39,20.5 44.4,44.4 25.3,55.2 6.1,44.3 11.3,20.2 "></polygon>
+ <path class="st3" d="M39.9,17.5c0,0,3.3,0.7,4-1.6c0,0,0.5-1.9-0.7-2.8c-0.4-0.4-0.8-0.6-1.4-0.7l4.4-8.2l-7.2,1.1l-3,5.2l-3-3
+ l2.5-4.3c0.5-1.1,1.6-1.8,2.7-1.9l7.8-1.2c0,0,5.7-0.7,4.2,5.2l-3.3,6.1c1.9,2.9,1.3,6.7-1.4,8.8c-1.4,1.1-3.2,1.7-4.9,1.5
+ L39.9,17.5z"></path>
+ <path class="st3" d="M10.8,17.5c0,0-3.3,0.7-4-1.6c0,0-0.5-1.9,0.7-2.8c0.4-0.4,0.8-0.6,1.4-0.7L4.3,4.1l7.2,1.1l3,5.2l2.9-3L15,3.1
+ c-0.5-1.1-1.6-1.8-2.7-1.9L4.5,0c0,0-5.7-0.7-4.2,5.2l3.3,6.1c-1.9,2.9-1.3,6.7,1.4,8.8c1.4,1.1,3.2,1.7,4.9,1.5L10.8,17.5z"></path>
+ <path class="st3" d="M29.6,39.8c-1.8,2.4-5.3,2.8-7.6,1c-0.4-0.3-0.7-0.6-1-1h-3.6c2.3,4.4,7.7,6,12.1,3.7c1.6-0.8,2.9-2.1,3.7-3.7
+ H29.6z"></path>
+ <ellipse class="st4" cx="25.4" cy="13.2" rx="12.1" ry="11.5"></ellipse>
+ <path class="st3" d="M19.1,6.2c1.9-1,3.9-1.5,6-1.4c2.1,0,5.3,1.9,6.9,2.7c1.9,0.4,2.5-0.4,4,0.3c-3.3-6-10.9-8.2-16.9-4.9
+ c-2.1,1.2-3.8,2.9-5,5.1C15.8,7.2,17.4,6.6,19.1,6.2z"></path>
+ <path class="st3" d="M36.1,36.7c3.3-0.5,5.7-3.2,5.8-6.5l-2.3-8.2c0,0,2.5,12.8-4.7,12.4L36.1,36.7z"></path>
+ <path class="st3" d="M14.2,36.7c-3.3-0.5-5.7-3.2-5.8-6.5l2.3-8.2c0,0-2.5,12.8,4.7,12.4L14.2,36.7z"></path>
+ <rect x="30.8" y="20.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -7.9 29.9319)" class="st3" width="2.7" height="7.6"></rect>
+ <rect x="28.4" y="23.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -7.8677 29.947)" class="st3" width="7.6" height="2.7"></rect>
+ <path class="st3" d="M14.5,24.7c0,0,4.2-6.1,8.5,0C23,24.7,19.1,30.3,14.5,24.7z"></path>
+ <path class="st3" d="M25.1,40.5c3.3-0.1,6.6,0.4,9.7,1.5c0,0,3.6,1.2,3.5-2.2c-0.1-3.4-4-7.6-7.4-9.1c-0.2-0.4-0.3-0.8-0.4-1.2
+ c-0.3-0.5-1-0.6-1.4-0.3c-0.1,0.1-0.1,0.1-0.2,0.2c-1,1.2-2.3,1.9-3.8,2.1v2.4c1.1,0.1,2.2-0.3,3.1-1c0.5-0.5,1.4-0.5,1.9,0
+ c2.5,1.4,4.5,3.5,5.7,6c0,0,0.7,1.9-0.9,0.8c-0.6-0.3-1.2-0.5-1.8-0.7c-0.1-0.8-0.4-1.6-1-2.2c0.2,0.7,0.2,1.4,0,2.1
+ c-0.9-0.2-1.8-0.3-2.7-0.4c0-0.9-0.3-1.7-0.9-2.3c0.2,0.7,0.2,1.5,0,2.2c-1.2-0.1-2.3-0.1-3.5,0L25.1,40.5z"></path>
+ <path class="st3" d="M25.5,40.5c-3.3-0.1-6.6,0.4-9.7,1.5c0,0-3.6,1.2-3.5-2.2c0.1-3.4,4-7.6,7.4-9.1c0.2-0.4,0.3-0.8,0.4-1.2
+ c0.3-0.5,1-0.6,1.4-0.3c0.1,0.1,0.1,0.1,0.2,0.2c1,1.1,2.3,1.9,3.8,2.1v2.4c-1.1,0.1-2.2-0.3-3.1-1c-0.5-0.5-1.4-0.5-1.9,0
+ c-2.5,1.4-4.5,3.5-5.7,6c0,0-0.7,1.9,0.9,0.8c0.6-0.3,1.2-0.5,1.8-0.7c0.1-0.8,0.4-1.6,1-2.2c-0.2,0.7-0.2,1.4,0,2.1
+ c0.9-0.2,1.8-0.3,2.7-0.4c0-0.9,0.3-1.7,0.9-2.3c-0.2,0.7-0.2,1.5,0,2.2c1.2-0.1,2.3-0.1,3.5,0L25.5,40.5z"></path>
+ <polygon class="st3" points="10.7,19.4 22.8,18.7 25.1,21.2 27.6,18.8 39.8,19.4 39,17 26.6,16.1 25.1,18 23.8,16.2 11.1,17 "></polygon>
+ <text style="fill: rgb(51, 51, 51); fill-opacity: 0; font-family: Arial, sans-serif; font-size: 9.4px; paint-order: fill; stroke-width: 4.56531px; white-space: pre;" transform="matrix(4.218454, 0, 0, 4.543271, -200.767197, -13.27547)" x="62.38" y="12.27">Serverless Logic Web Tools</text>
+</svg>
\ No newline at end of file
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@kie.apache.org
For additional commands, e-mail: commits-help@kie.apache.org