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 67ce3c75682c34a844daace8247802248c3b5be2 Author: Fabrizio Antonangeli <[email protected]> AuthorDate: Thu May 18 18:18:49 2023 +0200 KOGITO-8972: Refactor UX Minor fixes (#1648) Co-authored-by: Guilherme Caponetto <[email protected]> --- .../serverless-logic-web-tools/src/PageTitle.tsx | 26 ++++ .../src/editor/EditorPage.tsx | 3 +- .../src/editor/NewFileDropdownMenu.tsx | 63 ++++++--- .../sample/{Showcase.tsx => SamplesCatalog.tsx} | 53 +++++++- .../src/home/sample/sampleApi.ts | 1 + .../src/homepage/overView/ImportFromUrlCard.tsx | 5 +- .../src/homepage/overView/NewModelCard.tsx | 43 ++++-- .../homepage/overView/NewServerlessModelCard.tsx | 69 ---------- .../src/homepage/overView/Overview.tsx | 26 ++-- .../src/homepage/recentModels/RecentModels.tsx | 9 +- .../recentModels/workspaceFiles/WorkspaceFiles.tsx | 3 + .../src/homepage/routes/HomePageRoutes.tsx | 4 +- .../KieSandboxExtendedServicesModal.tsx | 2 +- .../src/navigation/Routes.ts | 13 +- .../dropdown/OpenshiftDeploymentsDropdown.tsx | 9 +- .../ApplicationServicesIntegrationQuickStart.ts | 150 +-------------------- .../src/settings/SettingsContext.tsx | 1 + .../KieSandboxExtendedServicesSettings.tsx | 20 ++- .../featurePreview/FeaturePreviewSettings.tsx | 14 +- .../src/settings/github/GitHubSettings.tsx | 11 +- .../src/settings/openshift/OpenShiftSettings.tsx | 18 ++- .../serviceAccount/ServiceAccountSettings.tsx | 23 ++-- .../serviceRegistry/ServiceRegistrySettings.tsx | 22 ++- .../src/workspace/components/ImportFromUrlForm.tsx | 12 +- 24 files changed, 288 insertions(+), 312 deletions(-) diff --git a/packages/serverless-logic-web-tools/src/PageTitle.tsx b/packages/serverless-logic-web-tools/src/PageTitle.tsx new file mode 100644 index 0000000000..00b6337e28 --- /dev/null +++ b/packages/serverless-logic-web-tools/src/PageTitle.tsx @@ -0,0 +1,26 @@ +/* + * Copyright 2023 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 { APP_NAME } from "./AppConstants"; + +/** + * + * Sets the title of the page by concatenating the given title sections and append the application name. + * @param titleSections An array of strings representing the sections of the title in the order of [parent, children] + * @returns + */ +export function setPageTitle(titleSections: string[]): void { + document.title = [APP_NAME, ...titleSections].reverse().join(" | "); +} diff --git a/packages/serverless-logic-web-tools/src/editor/EditorPage.tsx b/packages/serverless-logic-web-tools/src/editor/EditorPage.tsx index b0e9dc58f2..4fe16df52c 100644 --- a/packages/serverless-logic-web-tools/src/editor/EditorPage.tsx +++ b/packages/serverless-logic-web-tools/src/editor/EditorPage.tsx @@ -42,6 +42,7 @@ import { EditorToolbar } from "./EditorToolbar"; import { APP_NAME } from "../AppConstants"; import { WebToolsEmbeddedEditor, WebToolsEmbeddedEditorRef } from "./WebToolsEmbeddedEditor"; import { useEditorNotifications } from "./hooks/useEditorNotifications"; +import { setPageTitle } from "../PageTitle"; export interface Props { workspaceId: string; @@ -73,7 +74,7 @@ export function EditorPage(props: Props) { }); useEffect(() => { - document.title = `${APP_NAME} :: ${props.fileRelativePath}`; + setPageTitle([props.fileRelativePath]); }, [props.fileRelativePath]); // keep the page in sync with the name of `workspaceFilePromise`, even if changes diff --git a/packages/serverless-logic-web-tools/src/editor/NewFileDropdownMenu.tsx b/packages/serverless-logic-web-tools/src/editor/NewFileDropdownMenu.tsx index 8f12de447f..5996576438 100644 --- a/packages/serverless-logic-web-tools/src/editor/NewFileDropdownMenu.tsx +++ b/packages/serverless-logic-web-tools/src/editor/NewFileDropdownMenu.tsx @@ -18,7 +18,6 @@ import * as React from "react"; import { useCallback, useEffect, useRef, useState } from "react"; import { useWorkspaces, WorkspaceFile } from "@kie-tools-core/workspaces-git-fs/dist/context/WorkspacesContext"; import { FileLabel } from "../workspace/components/FileLabel"; -import { Flex, FlexItem } from "@patternfly/react-core/dist/js/layouts/Flex"; import { Divider } from "@patternfly/react-core/dist/js/components/Divider"; import { DrilldownMenu, @@ -39,6 +38,7 @@ import { FileTypes } from "@kie-tools-core/workspaces-git-fs/dist/constants/Exte import { decoder } from "@kie-tools-core/workspaces-git-fs/dist/encoderdecoder/EncoderDecoder"; import { extractExtension } from "@kie-tools-core/workspaces-git-fs/dist/relativePath/WorkspaceFileRelativePathParser"; import { UrlType } from "../workspace/hooks/ImportableUrlHooks"; +import { ValidatedOptions } from "@patternfly/react-core/dist/js"; const ROOT_MENU_ID = "addFileRootMenu"; @@ -54,6 +54,8 @@ export function NewFileDropdownMenu(props: { const [drilldownPath, setDrilldownPath] = useState<string[]>([]); const [menuHeights, setMenuHeights] = useState<{ [key: string]: number }>({}); const [activeMenu, setActiveMenu] = useState(ROOT_MENU_ID); + const [url, setUrl] = useState(""); + const [isUrlValid, setIsUrlValid] = useState(ValidatedOptions.default); const drillIn = useCallback((_event, fromMenuId, toMenuId, pathId) => { setMenuDrilledIn((prev) => [...prev, fromMenuId]); @@ -206,7 +208,32 @@ export function NewFileDropdownMenu(props: { [workspaces, props, successfullyUploadedAlert] ); - const [url, setUrl] = useState(""); + const NewJsonYamlDrilldownMenuItem = useCallback( + (args: { prefixId: string; description: string; fileTypes: { json: FileTypes; yaml: FileTypes } }) => ( + <MenuItem + itemId={`${args.prefixId}ItemId`} + description={args.description} + direction={"down"} + drilldownMenu={ + <DrilldownMenu id={`${args.prefixId}File`}> + <MenuItem direction="up">Back</MenuItem> + <Divider /> + <MenuItem onClick={() => addEmptyFile(args.fileTypes.json)} itemId={`${args.prefixId}Json`}> + JSON + </MenuItem> + <MenuItem onClick={() => addEmptyFile(args.fileTypes.yaml)} itemId={`${args.prefixId}Yaml`}> + YAML + </MenuItem> + </DrilldownMenu> + } + > + <b> + <FileLabel style={{ marginBottom: "4px" }} extension={args.fileTypes.json} /> + </b> + </MenuItem> + ), + [addEmptyFile] + ); return ( <Menu @@ -222,28 +249,20 @@ export function NewFileDropdownMenu(props: { > <MenuContent menuHeight={`${menuHeights[activeMenu]}px`}> <MenuList style={{ padding: 0 }}> - <MenuItem - itemId={"newSwfItemId"} - onClick={() => addEmptyFile(FileTypes.SW_JSON)} - description="Serverless Workflow files are used to define orchestration logic for services." - > - <b> - <FileLabel style={{ marginBottom: "4px" }} extension={FileTypes.SW_JSON} /> - </b> - </MenuItem> - <MenuItem - itemId={"newSdItemId"} - onClick={() => addEmptyFile(FileTypes.YARD_YAML)} - description="Serverless Decision files are used to define decision logic for services." - > - <b> - <FileLabel style={{ marginBottom: "4px" }} extension={FileTypes.YARD_YAML} /> - </b> - </MenuItem> + <NewJsonYamlDrilldownMenuItem + prefixId="newSwf" + description="Define orchestration logic for services." + fileTypes={{ json: FileTypes.SW_JSON, yaml: FileTypes.SW_YAML }} + /> + <NewJsonYamlDrilldownMenuItem + prefixId="newSd" + description="Define decision logic for services." + fileTypes={{ json: FileTypes.YARD_JSON, yaml: FileTypes.YARD_YAML }} + /> <MenuItem itemId={"newDashboardItemId"} onClick={() => addEmptyFile(FileTypes.DASH_YAML)} - description="Dashboard files are used to define data visualization from data extracted from applications." + description="Define data visualization from data extracted from applications." > <b> <FileLabel style={{ marginBottom: "4px" }} extension={FileTypes.DASH_YAML} /> @@ -267,6 +286,7 @@ export function NewFileDropdownMenu(props: { setUrl(url); setImportingError(undefined); }} + onValidate={setIsUrlValid} onSubmit={() => importFromUrl(url)} /> </MenuInput> @@ -275,6 +295,7 @@ export function NewFileDropdownMenu(props: { variant={url.length > 0 ? ButtonVariant.primary : ButtonVariant.secondary} isLoading={isImporting} onClick={() => importFromUrl(url)} + isDisabled={isUrlValid !== ValidatedOptions.success} > Import </Button> diff --git a/packages/serverless-logic-web-tools/src/home/sample/Showcase.tsx b/packages/serverless-logic-web-tools/src/home/sample/SamplesCatalog.tsx similarity index 84% rename from packages/serverless-logic-web-tools/src/home/sample/Showcase.tsx rename to packages/serverless-logic-web-tools/src/home/sample/SamplesCatalog.tsx index 52303c80b2..cac108bc89 100644 --- a/packages/serverless-logic-web-tools/src/home/sample/Showcase.tsx +++ b/packages/serverless-logic-web-tools/src/home/sample/SamplesCatalog.tsx @@ -31,13 +31,20 @@ import { Gallery } from "@patternfly/react-core/dist/js/layouts/Gallery"; import { CubesIcon } from "@patternfly/react-icons/dist/js/icons/cubes-icon"; import * as React from "react"; import { useCallback, useEffect, useMemo, useState } from "react"; +import { useHistory, useLocation } from "react-router"; +import { QueryParams } from "../../navigation/Routes"; +import { setPageTitle } from "../../PageTitle"; +import { useQueryParam } from "../../queryParams/QueryParamsContext"; import { FileLabel } from "../../workspace/components/FileLabel"; import { useSampleDispatch } from "./hooks/SampleContext"; -import { Sample, SampleCategory, SampleCoversHashtable } from "./sampleApi"; +import { Sample, SampleCategories, SampleCategory, SampleCoversHashtable } from "./sampleApi"; import { SampleCard } from "./SampleCard"; import { SampleCardSkeleton } from "./SampleCardSkeleton"; import { SamplesLoadError } from "./SamplesLoadError"; +type SearchParams = { searchValue: string; category?: SampleCategory }; + +const PAGE_TITLE = "Samples Catalog"; const SAMPLE_PRIORITY: Record<SampleCategory, number> = { ["serverless-workflow"]: 1, ["dashbuilder"]: 2, @@ -61,16 +68,20 @@ export const SAMPLE_CARDS_PER_PAGE_OPTIONS: PerPageOptions[] = [ }, ]; -export function Showcase() { +export function SamplesCatalog() { const sampleDispatch = useSampleDispatch(); const [loading, setLoading] = useState<boolean>(true); const [samples, setSamples] = useState<Sample[]>([]); const [sampleCovers, setSampleCovers] = useState<SampleCoversHashtable>({}); const [sampleLoadingError, setSampleLoadingError] = useState(""); const [searchFilter, setSearchFilter] = useState(""); - const [categoryFilter, setCategoryFilter] = useState<SampleCategory | undefined>(); + const [searchParams, setSearchParams] = useState<SearchParams>({ searchValue: "", category: undefined }); const [page, setPage] = React.useState(1); const [isCategoryFilterDropdownOpen, setCategoryFilterDropdownOpen] = useState(false); + const history = useHistory(); + const location = useLocation(); + + const categoryFilter = useQueryParam(QueryParams.SAMPLES_CATEGORY) as SampleCategory; const visibleSamples = useMemo( () => samples.slice((page - 1) * CARDS_PER_PAGE, page * CARDS_PER_PAGE), @@ -94,18 +105,42 @@ export function Showcase() { return ALL_CATEGORIES_LABEL; }, [categoryFilter]); + const setCategoryFilter = useCallback( + (category?: SampleCategory) => { + const searchParams = new URLSearchParams(location.search); + if (category) { + searchParams.set(QueryParams.SAMPLES_CATEGORY, category); + } else { + searchParams.delete(QueryParams.SAMPLES_CATEGORY); + } + const newSearchString = searchParams.toString(); + history.push({ search: newSearchString }); + }, + [history, location] + ); + const onSearch = useCallback( - async (args: { searchValue: string; category?: SampleCategory }) => { - if (args.searchValue === searchFilter && args.category === categoryFilter) { + async (args: SearchParams) => { + if (args.searchValue === searchParams.searchValue && args.category === searchParams.category) { return; } setSearchFilter(args.searchValue); setCategoryFilter(args.category); + setSearchParams(args); setSamples(await sampleDispatch.getSamples({ searchFilter: args.searchValue, categoryFilter: args.category })); }, - [categoryFilter, sampleDispatch, searchFilter] + [sampleDispatch, setCategoryFilter, searchParams] ); + useEffect(() => { + if (categoryFilter && !SampleCategories.includes(categoryFilter)) { + setCategoryFilter(undefined); + return; + } + + onSearch({ searchValue: searchFilter, category: categoryFilter }); + }, [categoryFilter, onSearch, searchFilter, setCategoryFilter]); + useEffect(() => { sampleDispatch .getSamples({}) @@ -153,11 +188,15 @@ export function Showcase() { setPage(v); }, []); + useEffect(() => { + setPageTitle([PAGE_TITLE]); + }, []); + return ( <Page> <PageSection variant={"light"}> <TextContent> - <Text component={TextVariants.h1}>Samples Catalog</Text> + <Text component={TextVariants.h1}>{PAGE_TITLE}</Text> <Text component={TextVariants.p}>Try one of our samples to start defining your model.</Text> </TextContent> <Toolbar style={{ paddingBottom: "0" }}> diff --git a/packages/serverless-logic-web-tools/src/home/sample/sampleApi.ts b/packages/serverless-logic-web-tools/src/home/sample/sampleApi.ts index 7a8efb27ba..8a0ebd7f80 100644 --- a/packages/serverless-logic-web-tools/src/home/sample/sampleApi.ts +++ b/packages/serverless-logic-web-tools/src/home/sample/sampleApi.ts @@ -38,6 +38,7 @@ interface GitHubRepoInfo { type GitHubFileInfo = GitHubRepoInfo & { path: string }; export type SampleCategory = "serverless-workflow" | "serverless-decision" | "dashbuilder"; +export const SampleCategories: SampleCategory[] = ["serverless-workflow", "serverless-decision", "dashbuilder"]; const SUPPORTING_FILES_FOLDER = join(".github", "supporting-files"); 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 6379023cda..bca84cafbd 100644 --- a/packages/serverless-logic-web-tools/src/homepage/overView/ImportFromUrlCard.tsx +++ b/packages/serverless-logic-web-tools/src/homepage/overView/ImportFromUrlCard.tsx @@ -25,12 +25,14 @@ 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 { useEditorEnvelopeLocator } from "../../envelopeLocator/EditorEnvelopeLocatorContext"; +import { ValidatedOptions } from "@patternfly/react-core/dist/js/helpers"; export function ImportFromUrlCard() { const routes = useRoutes(); const history = useHistory(); const editorEnvelopeLocator = useEditorEnvelopeLocator(); const [url, setUrl] = useState(""); + const [isUrlValid, setIsUrlValid] = useState(ValidatedOptions.default); const importFromUrl = useCallback(() => { history.push({ @@ -67,12 +69,13 @@ export function ImportFromUrlCard() { <Text component={TextVariants.p}>Import a GitHub Repository, a GitHub Gist, or any other file URL.</Text> </TextContent> <br /> - <ImportFromUrlForm url={url} onChange={setUrl} onSubmit={importFromUrl} /> + <ImportFromUrlForm url={url} onChange={setUrl} onSubmit={importFromUrl} onValidate={setIsUrlValid} /> </CardBody> <CardFooter> <Button variant={url.length > 0 ? ButtonVariant.primary : ButtonVariant.secondary} onClick={importFromUrl} + isDisabled={isUrlValid !== ValidatedOptions.success} ouiaId="import-from-url-button" > {buttonLabel} 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 81fd7da2c3..a9ac11041a 100644 --- a/packages/serverless-logic-web-tools/src/homepage/overView/NewModelCard.tsx +++ b/packages/serverless-logic-web-tools/src/homepage/overView/NewModelCard.tsx @@ -17,6 +17,7 @@ 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"; @@ -24,14 +25,24 @@ 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 }) { +export function NewModelCard(props: { + title: string; + jsonExtension?: SupportedFileExtensions; + yamlExtension?: SupportedFileExtensions; + description: string; +}) { const routes = useRoutes(); + const { jsonExtension, yamlExtension } = props; + + if (!jsonExtension && !yamlExtension) { + throw new Error("At least one of jsonExtension or yamlExtension must be provided."); + } return ( <GridItem sm={12} md={4}> - <Card isFullHeight={true} isPlain={true} isCompact> + <Card isFullHeight={true} isPlain={true} isCompact={true}> <CardTitle> - <FileLabel style={{ fontSize: "0.6em" }} extension={props.extension} /> + <FileLabel style={{ fontSize: "0.6em" }} extension={(jsonExtension || yamlExtension)!} /> </CardTitle> <CardBody> <TextContent> @@ -39,11 +50,27 @@ export function NewModelCard(props: { title: string; extension: SupportedFileExt </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> + <TextContent> + <Text component={TextVariants.p}> + <b>New {props.title}</b> + </Text> + </TextContent> + <Flex> + {jsonExtension && ( + <Link to={{ pathname: routes.newModel.path({ extension: jsonExtension }) }}> + <Button variant={ButtonVariant.secondary} ouiaId={`new-${jsonExtension}-button`} isSmall> + JSON + </Button> + </Link> + )} + {yamlExtension && ( + <Link to={{ pathname: routes.newModel.path({ extension: yamlExtension }) }}> + <Button variant={ButtonVariant.secondary} ouiaId={`new-${yamlExtension}-button`} isSmall> + YAML + </Button> + </Link> + )} + </Flex> </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 deleted file mode 100644 index a7141523cf..0000000000 --- a/packages/serverless-logic-web-tools/src/homepage/overView/NewServerlessModelCard.tsx +++ /dev/null @@ -1,69 +0,0 @@ -/* - * 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 { 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 { FileLabel } from "../../workspace/components/FileLabel"; - -export function NewServerlessModelCard(props: { - title: string; - jsonExtension: SupportedFileExtensions; - yamlExtension: SupportedFileExtensions; - description: string; -}) { - const routes = useRoutes(); - - return ( - <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> - <Link to={{ pathname: routes.newModel.path({ extension: props.yamlExtension }) }}> - <Button variant={ButtonVariant.secondary} ouiaId={`new-${props.yamlExtension}-button`}> - YAML - </Button> - </Link> - </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 ac72570919..62f2bc857e 100644 --- a/packages/serverless-logic-web-tools/src/homepage/overView/Overview.tsx +++ b/packages/serverless-logic-web-tools/src/homepage/overView/Overview.tsx @@ -20,7 +20,7 @@ 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 { NewServerlessModelCard } from "./NewServerlessModelCard"; +import { NewModelCard } from "./NewModelCard"; import { Button, ButtonVariant, Card, CardBody } from "@patternfly/react-core/dist/js"; import { ImportFromUrlCard } from "./ImportFromUrlCard"; import { UploadCard } from "./UploadCard"; @@ -28,8 +28,7 @@ import { useRoutes } from "../../navigation/Hooks"; import { useHistory } from "react-router"; import { useQueryParam, useQueryParams } from "../../queryParams/QueryParamsContext"; import { QueryParams } from "../../navigation/Routes"; -import { useCallback, useContext, useMemo } from "react"; -import { NewModelCard } from "./NewModelCard"; +import { useEffect, useCallback, useContext, useMemo } from "react"; 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"; @@ -37,6 +36,9 @@ 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"; import { SERVERLESS_LOGIC_WEBTOOLS_DOCUMENTATION_URL } from "../../AppConstants"; +import { setPageTitle } from "../../PageTitle"; + +const PAGE_TITLE = "Overview"; export function Overview(props: { isNavOpen: boolean }) { const routes = useRoutes(); @@ -73,6 +75,10 @@ export function Overview(props: { isNavOpen: boolean }) { [closeExpandedWorkspace, history, routes, expandedWorkspaceId] ); + useEffect(() => { + setPageTitle([PAGE_TITLE]); + }, []); + return ( <> <PageSection @@ -129,24 +135,22 @@ export function Overview(props: { isNavOpen: boolean }) { </CardHeader> <CardBody> <Grid> - <NewServerlessModelCard + <NewModelCard title={"Workflow"} jsonExtension={FileTypes.SW_JSON} yamlExtension={FileTypes.SW_YAML} - description={"Serverless Workflow files are used to define orchestration logic for services."} + description={"Define orchestration logic for services."} /> - <NewServerlessModelCard + <NewModelCard title={"Decision"} jsonExtension={FileTypes.YARD_JSON} yamlExtension={FileTypes.YARD_YAML} - description={"Serverless Decision files are used to define decision logic for services."} + description={"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." - } + yamlExtension={FileTypes.DASH_YML} + description={"Define data visualization from data extracted from applications."} /> </Grid> </CardBody> diff --git a/packages/serverless-logic-web-tools/src/homepage/recentModels/RecentModels.tsx b/packages/serverless-logic-web-tools/src/homepage/recentModels/RecentModels.tsx index c184cce16c..c7f3120d85 100644 --- a/packages/serverless-logic-web-tools/src/homepage/recentModels/RecentModels.tsx +++ b/packages/serverless-logic-web-tools/src/homepage/recentModels/RecentModels.tsx @@ -30,11 +30,14 @@ import * as React from "react"; import { useCallback, useEffect, useMemo, useState } from "react"; import { Alerts, AlertsController, useAlert } from "../../alerts/Alerts"; import { splitFiles } from "../../extension"; +import { setPageTitle } from "../../PageTitle"; import { ConfirmDeleteModal } from "../../table/ConfirmDeleteModal"; import { defaultPerPageOptions, TablePagination } from "../../table/TablePagination"; import { TableToolbar } from "../../table/TableToolbar"; import { WorkspacesTable } from "./WorkspacesTable"; +const PAGE_TITLE = "Recent models"; + export function RecentModels() { const workspaceDescriptorsPromise = useWorkspaceDescriptorsPromise(); const [selectedWorkspaceIds, setSelectedWorkspaceIds] = useState<WorkspaceDescriptor["workspaceId"][]>([]); @@ -170,6 +173,10 @@ export function RecentModels() { .catch(() => setDeleteModalFetchError(true)); }, [getWorkspaceName, selectedWorkspaceIds, isWsFolder]); + useEffect(() => { + setPageTitle([PAGE_TITLE]); + }, []); + return ( <PromiseStateWrapper promise={workspaceDescriptorsPromise} @@ -183,7 +190,7 @@ export function RecentModels() { <Page> <PageSection variant={"light"}> <TextContent> - <Text component={TextVariants.h1}>Recent models</Text> + <Text component={TextVariants.h1}>{PAGE_TITLE}</Text> <Text component={TextVariants.p}> Use your recent models from GitHub Repository, a GitHub Gist or saved in your browser. </Text> diff --git a/packages/serverless-logic-web-tools/src/homepage/recentModels/workspaceFiles/WorkspaceFiles.tsx b/packages/serverless-logic-web-tools/src/homepage/recentModels/workspaceFiles/WorkspaceFiles.tsx index e97d8b00be..9829c9dd3f 100644 --- a/packages/serverless-logic-web-tools/src/homepage/recentModels/workspaceFiles/WorkspaceFiles.tsx +++ b/packages/serverless-logic-web-tools/src/homepage/recentModels/workspaceFiles/WorkspaceFiles.tsx @@ -36,6 +36,7 @@ import { Alerts, AlertsController, useAlert } from "../../../alerts/Alerts"; import { NewFileDropdownMenu } from "../../../editor/NewFileDropdownMenu"; import { splitFiles } from "../../../extension"; import { routes } from "../../../navigation/Routes"; +import { setPageTitle } from "../../../PageTitle"; import { ConfirmDeleteModal } from "../../../table/ConfirmDeleteModal"; import { defaultPerPageOptions, TablePagination } from "../../../table/TablePagination"; import { TableToolbar } from "../../../table/TableToolbar"; @@ -163,6 +164,8 @@ export function WorkspaceFiles(props: Props) { const filesCount = files.length; const allFilesCount = workspace.files.length; + setPageTitle([workspace.descriptor.name]); + return ( <> <Alerts ref={alertsRef} width={"500px"} /> 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 78aae5a70f..b6d61bb6e5 100644 --- a/packages/serverless-logic-web-tools/src/homepage/routes/HomePageRoutes.tsx +++ b/packages/serverless-logic-web-tools/src/homepage/routes/HomePageRoutes.tsx @@ -26,7 +26,7 @@ import { NewWorkspaceFromUrlPage } from "../../workspace/components/NewWorkspace import { NewWorkspaceWithEmptyFilePage } from "../../workspace/components/NewWorkspaceWithEmptyFilePage"; import { EditorPage } from "../../editor/EditorPage"; import { NoMatchPage } from "../../navigation/NoMatchPage"; -import { Showcase } from "../../home/sample/Showcase"; +import { SamplesCatalog } from "../../home/sample/SamplesCatalog"; import { WorkspaceFiles } from "../recentModels/workspaceFiles/WorkspaceFiles"; export function HomePageRoutes(props: { isNavOpen: boolean }) { @@ -69,7 +69,7 @@ export function HomePageRoutes(props: { isNavOpen: boolean }) { {({ match }) => <WorkspaceFiles workspaceId={match!.params.workspaceId!} />} </Route> <Route path={routes.sampleCatalog.path({})}> - <Showcase /> + <SamplesCatalog /> </Route> <Route component={NoMatchPage} /> </Switch> diff --git a/packages/serverless-logic-web-tools/src/kieSandboxExtendedServices/KieSandboxExtendedServicesModal.tsx b/packages/serverless-logic-web-tools/src/kieSandboxExtendedServices/KieSandboxExtendedServicesModal.tsx index 2c28e56473..a2ec0287ec 100644 --- a/packages/serverless-logic-web-tools/src/kieSandboxExtendedServices/KieSandboxExtendedServicesModal.tsx +++ b/packages/serverless-logic-web-tools/src/kieSandboxExtendedServices/KieSandboxExtendedServicesModal.tsx @@ -801,7 +801,7 @@ function KieSandboxExtendedServicesWizardFooter(props: WizardImperativeControlPr if (status === KieSandboxExtendedServicesStatus.STOPPED) { wizardContext.goToStepByName(props.steps[1].name); } - }, [status, props.setModalPage]); + }, [status, props.setModalPage, props.steps, wizardContext]); return ( <WizardFooter> diff --git a/packages/serverless-logic-web-tools/src/navigation/Routes.ts b/packages/serverless-logic-web-tools/src/navigation/Routes.ts index 9230e52175..e2e485fdf4 100644 --- a/packages/serverless-logic-web-tools/src/navigation/Routes.ts +++ b/packages/serverless-logic-web-tools/src/navigation/Routes.ts @@ -25,6 +25,7 @@ export enum QueryParams { REMOVE_REMOTE = "removeRemote", RENAME_WORKSPACE = "renameWorkspace", SAMPLE_ID = "sampleId", + SAMPLES_CATEGORY = "category", } export enum PathParams { @@ -136,17 +137,17 @@ export const routes = { pathParams: PathParams.WORKSPACE_ID; }>(({ workspaceId }) => `/${workspaceId}/files`), - recentModels: new Route<{}>(() => `/RecentModels`), - sampleCatalog: new Route<{}>(() => `/SampleCatalog`), + recentModels: new Route<{}>(() => `/recent-models`), + sampleCatalog: new Route<{}>(() => `/sample-catalog`), settings: { home: new Route<{}>(() => SETTINGS_ROUTE), github: new Route<{}>(() => `${SETTINGS_ROUTE}/github`), openshift: new Route<{}>(() => `${SETTINGS_ROUTE}/openshift`), - kie_sandbox_extended_services: new Route<{}>(() => `${SETTINGS_ROUTE}/kie_sandbox_extended_services`), - service_account: new Route<{}>(() => `${SETTINGS_ROUTE}/serviceAccount`), - service_registry: new Route<{}>(() => `${SETTINGS_ROUTE}/serviceRegistry`), - feature_preview: new Route<{}>(() => `${SETTINGS_ROUTE}/featurePreview`), + kie_sandbox_extended_services: new Route<{}>(() => `${SETTINGS_ROUTE}/kie-sandbox-extended-services`), + service_account: new Route<{}>(() => `${SETTINGS_ROUTE}/service-account`), + service_registry: new Route<{}>(() => `${SETTINGS_ROUTE}/service-registry`), + feature_preview: new Route<{}>(() => `${SETTINGS_ROUTE}/feature-preview`), }, static: { diff --git a/packages/serverless-logic-web-tools/src/openshift/dropdown/OpenshiftDeploymentsDropdown.tsx b/packages/serverless-logic-web-tools/src/openshift/dropdown/OpenshiftDeploymentsDropdown.tsx index 6a4c26392b..ae3746a328 100644 --- a/packages/serverless-logic-web-tools/src/openshift/dropdown/OpenshiftDeploymentsDropdown.tsx +++ b/packages/serverless-logic-web-tools/src/openshift/dropdown/OpenshiftDeploymentsDropdown.tsx @@ -95,6 +95,13 @@ export function OpenshiftDeploymentsDropdown() { } }, [openshift.deployments, isConnected, openOpenShiftSettings, settings.openshift.config.namespace]); + const onDeploymensDropdownToggle = useCallback(() => { + if (!isConnected) { + history.push(routes.settings.openshift.path({})); + } + openshift.setDeploymentsDropdownOpen((dropdownOpen) => isConnected && !dropdownOpen); + }, [history, isConnected, openshift]); + return ( <> <Tooltip @@ -110,7 +117,7 @@ export function OpenshiftDeploymentsDropdown() { toggle={ <ResponsiveDropdownToggle toggleIndicator={null} - onToggle={() => openshift.setDeploymentsDropdownOpen((dropdownOpen) => isConnected && !dropdownOpen)} + onToggle={onDeploymensDropdownToggle} className={"kie-tools--masthead-hoverable-dark"} > <OpenshiftIcon color={!isConnected ? "gray" : undefined} /> diff --git a/packages/serverless-logic-web-tools/src/quickstarts-data/ApplicationServicesIntegrationQuickStart.ts b/packages/serverless-logic-web-tools/src/quickstarts-data/ApplicationServicesIntegrationQuickStart.ts index 38e0974f29..15dd250ce9 100644 --- a/packages/serverless-logic-web-tools/src/quickstarts-data/ApplicationServicesIntegrationQuickStart.ts +++ b/packages/serverless-logic-web-tools/src/quickstarts-data/ApplicationServicesIntegrationQuickStart.ts @@ -27,7 +27,7 @@ export const ApplicationServicesIntegrationQuickStart: QuickStart = { durationMinutes: 30, prerequisites: ["You have access to the Red Hat OpenShift Application and Data Services console."], description: "", - introduction: ` Some of the features in Serverless Logic Web Tools require integration with Red Hat OpenShift Application and Data Services. Consider uploading OpenAPI specifications to a service registry and deploying Serverless Workflow that requires Apache Kafka as examples of integration with Red Hat OpenShift Application and Data Services. + introduction: ` Some of the features in Serverless Logic Web Tools require integration with Red Hat OpenShift Application and Data Services. Consider uploading OpenAPI specifications to a service registry and deploying Serverless Workflow as examples of integration with Red Hat OpenShift Application and Data Services. This document describes how you can configure the required settings to complete the integration with Red Hat OpenShift Application and Data Services. `, @@ -268,154 +268,6 @@ If you find an issue or any misleading information, please feel free to report i </div> </div>`, }, - { - title: "Creating Streams for Apache Kafka in Red Hat OpenShift application and Data Services", - description: `<div class="sectionbody"> - <div class="paragraph"> - <p>You can create or use a Kafka instance from Red Hat OpenShift Application and Data Services console and add the instance to the Serverless Logic Web Tools.</p> - </div> - <div class="ulist"> - <div class="title"> - <em> - <strong>Prerequisites</strong> - </em> - </div> - <ul> - <li> - <p>You have access to the Red Hat OpenShift Application and Data Services console.</p> - </li> - <li> - <p>You have created a service account.</p> - <div class="paragraph"> - <p>For information about creating a service account, see <a href="https://kiegroup.github.io/kogito-docs/serverlessworkflow/latest/tooling/serverless-logic-web-tools/serverless-logic-web-tools-redhat-application-services-integration.html#proc-create-service-account-serverless-logic-web-tools";>Creating a service account in Red Hat OpenShift application and Data Services</a>. </p> - </div> - </li> - </ul> - </div> - <div class="olist arabic"> - <div class="title"> - <em> - <strong>Procedure</strong> - </em> - </div> - <ol class="arabic"> - <li> - <p>To create an Apache Kafka instance in Red Hat Openshift Application and Data Services console, perform the following steps:</p> - <div class="openblock"> - <div class="content"> - <div class="admonitionblock note"> - <table> - <tbody> - <tr> - <td class="icon"> </td> - <td class="content"> - <div class="paragraph"> - <p> - <strong>NOTE <br> - </strong>You can skip this step if you already have an Apache Kafka instance. - </p> - </div> - </td> - </tr> - </tbody> - </table> - </div> - <div class="olist loweralpha"> - <ol class="loweralpha" type="a"> - <li> - <p>Go to <a href="https://console.redhat.com/application-services/streams/kafkas";>Streams for Apache Kafka | Red Hat OpenShift Application and Data Services</a>. </p> - </li> - <li> - <p>Click <strong>Create Kafka instance</strong>. </p> - </li> - <li> - <p>In the <strong>Create a Kafka instance</strong> window, enter the name for a Kafka instance. </p> - <div class="paragraph"> - <p>You can also fill the other fields or leave those fields with default values.</p> - </div> - </li> - <li> - <p>Click <strong>Create instance</strong>. </p> - </li> - <li> - <p>Reload the <strong>Kafka instances</strong> page for the list of instances to reflect the instance you created. </p> - </li> - <li> - <p>Once the status of the Kafka instance you created is updated as <strong>Ready</strong>, click on the instance. </p> - </li> - <li> - <p>Go to the <strong>Topics</strong> tab and create a new topic. </p> - </li> - <li> - <p>Go to the <strong>Access</strong> tab, click <strong>Manage Access</strong>, and select <strong>All Accounts</strong> or the service account you created. </p> - </li> - <li> - <p>Add the following permissions:</p> - <div class="ulist"> - <ul> - <li> - <p> - <em>Consumer group is " * " | Allow All | All Accounts</em>; - </p> - </li> - <li> - <p> - <em>Topic is " * " | Allow All | All Accounts</em>; - </p> - </li> - </ul> - </div> - </li> - <li> - <p>Click on the menu on the top-right corner of the screen.</p> - </li> - <li> - <p>Click <strong>Connection</strong>. </p> - </li> - <li> - <p>Copy the value of <strong>Bootstrap server</strong>. </p> - </li> - </ol> - </div> - </div> - </div> - </li> - <li> - <p>If you already have a Kafka instance, find the value of <strong>Bootstrap server</strong> of your Kafka instance. </p> - </li> - <li> - <p>In the Serverless Logic Web Tools web application, click on the <strong>Cog wheel</strong> (⚙️) on the top-right corner and go to the <strong>Streams for Apache Kafka</strong> tab. </p> - </li> - <li> - <p>Enter the value of <strong>Bootstrap server</strong>. </p> - </li> - <li> - <p>Enter the name of topic you created in the <strong>Topic</strong> field and click <strong>Apply</strong>. </p> - <div class="paragraph"> - <p>The content in the <strong>Streams for Apache Kafka</strong> tab updates and displays <strong>Your Streams for Apache Kafka information is set</strong> message. </p> - </div> - </li> - </ol> - </div> - <div class="admonitionblock note"> - <table> - <tbody> - <tr> - <td class="icon"> </td> - <td class="content"> - <div class="paragraph"> - <p> - <strong>NOTE <br> - </strong>The procedures in this document make the integration easy for you. However, you can also create specific service accounts, topics, and consumer groups. - </p> - </div> - </td> - </tr> - </tbody> - </table> - </div> - </div>`, - }, ], }, }; diff --git a/packages/serverless-logic-web-tools/src/settings/SettingsContext.tsx b/packages/serverless-logic-web-tools/src/settings/SettingsContext.tsx index d626bc2d06..10a8856bba 100644 --- a/packages/serverless-logic-web-tools/src/settings/SettingsContext.tsx +++ b/packages/serverless-logic-web-tools/src/settings/SettingsContext.tsx @@ -112,6 +112,7 @@ export interface SettingsDispatchContextType { }; } +export const SETTINGS_PAGE_SECTION_TITLE = "Settings"; export const SettingsContext = React.createContext<SettingsContextType>({} as any); export const SettingsDispatchContext = React.createContext<SettingsDispatchContextType>({} as any); diff --git a/packages/serverless-logic-web-tools/src/settings/extendedServices/KieSandboxExtendedServicesSettings.tsx b/packages/serverless-logic-web-tools/src/settings/extendedServices/KieSandboxExtendedServicesSettings.tsx index 529d9428fa..a57b209a12 100644 --- a/packages/serverless-logic-web-tools/src/settings/extendedServices/KieSandboxExtendedServicesSettings.tsx +++ b/packages/serverless-logic-web-tools/src/settings/extendedServices/KieSandboxExtendedServicesSettings.tsx @@ -14,12 +14,14 @@ * limitations under the License. */ -import { Modal, ModalVariant } from "@patternfly/react-core/dist/js/components/Modal"; +import React from "react"; +import { QuickStartContext, QuickStartContextValues } from "@patternfly/quickstarts"; import { Alert } from "@patternfly/react-core/dist/js/components/Alert"; import { Button, ButtonVariant } from "@patternfly/react-core/dist/js/components/Button"; import { EmptyState, EmptyStateBody, EmptyStateIcon } from "@patternfly/react-core/dist/js/components/EmptyState"; import { ActionGroup, Form, FormAlert, FormGroup } from "@patternfly/react-core/dist/js/components/Form"; import { InputGroup, InputGroupText } from "@patternfly/react-core/dist/js/components/InputGroup"; +import { Modal, ModalVariant } from "@patternfly/react-core/dist/js/components/Modal"; import { Page, PageSection } from "@patternfly/react-core/dist/js/components/Page"; import { Popover } from "@patternfly/react-core/dist/js/components/Popover"; import { Text, TextContent, TextVariants } from "@patternfly/react-core/dist/js/components/Text"; @@ -28,15 +30,17 @@ import { AddCircleOIcon } from "@patternfly/react-icons/dist/js/icons/add-circle import { CheckCircleIcon } from "@patternfly/react-icons/dist/js/icons/check-circle-icon"; import HelpIcon from "@patternfly/react-icons/dist/js/icons/help-icon"; import { TimesIcon } from "@patternfly/react-icons/dist/js/icons/times-icon"; -import * as React from "react"; -import { useCallback, useMemo, useState, useContext } from "react"; +import { useCallback, useContext, useEffect, useMemo, useState } from "react"; +import { SETTINGS_PAGE_SECTION_TITLE } from "../SettingsContext"; import { useKieSandboxExtendedServices } from "../../kieSandboxExtendedServices/KieSandboxExtendedServicesContext"; import { KieSandboxExtendedServicesStatus } from "../../kieSandboxExtendedServices/KieSandboxExtendedServicesStatus"; -import { ExtendedServicesConfig, useSettings, useSettingsDispatch } from "../../settings/SettingsContext"; -import { QuickStartContext, QuickStartContextValues } from "@patternfly/quickstarts"; +import { setPageTitle } from "../../PageTitle"; import { QuickStartIds } from "../../quickstarts-data"; +import { ExtendedServicesConfig, useSettings, useSettingsDispatch } from "../../settings/SettingsContext"; import { SettingsPageProps } from "../types"; +const PAGE_TITLE = "KIE Sandbox Extended Services"; + export function KieSandboxExtendedServicesSettings(props: SettingsPageProps) { const settings = useSettings(); const settingsDispatch = useSettingsDispatch(); @@ -76,11 +80,15 @@ export function KieSandboxExtendedServicesSettings(props: SettingsPageProps) { setIsModalOpen((prevIsModalOpen) => !prevIsModalOpen); }, []); + useEffect(() => { + setPageTitle([SETTINGS_PAGE_SECTION_TITLE, PAGE_TITLE]); + }, []); + return ( <Page> <PageSection variant={"light"} isWidthLimited> <TextContent> - <Text component={TextVariants.h1}>KIE Sandbox Extended Services</Text> + <Text component={TextVariants.h1}>{PAGE_TITLE}</Text> <Text component={TextVariants.p}> Data you provide here is necessary for proxying Serverless Logic Web Tools requests to OpenShift, thus making it possible to deploy models. diff --git a/packages/serverless-logic-web-tools/src/settings/featurePreview/FeaturePreviewSettings.tsx b/packages/serverless-logic-web-tools/src/settings/featurePreview/FeaturePreviewSettings.tsx index 3f16408eb9..e73ce07652 100644 --- a/packages/serverless-logic-web-tools/src/settings/featurePreview/FeaturePreviewSettings.tsx +++ b/packages/serverless-logic-web-tools/src/settings/featurePreview/FeaturePreviewSettings.tsx @@ -14,15 +14,19 @@ * limitations under the License. */ -import * as React from "react"; +import React from "react"; +import { Checkbox } from "@patternfly/react-core/dist/js/components/Checkbox"; import { Form } from "@patternfly/react-core/dist/js/components/Form"; import { Page, PageSection } from "@patternfly/react-core/dist/js/components/Page"; import { Text, TextContent, TextVariants } from "@patternfly/react-core/dist/js/components/Text"; import { useCallback, useEffect, useState } from "react"; +import { SETTINGS_PAGE_SECTION_TITLE } from "../SettingsContext"; +import { setPageTitle } from "../../PageTitle"; import { useSettings, useSettingsDispatch } from "../SettingsContext"; -import { Checkbox } from "@patternfly/react-core/dist/js/components/Checkbox"; import { saveConfigCookie } from "./FeaturePreviewConfig"; +const PAGE_TITLE = "Feature Preview"; + export function FeaturePreviewSettings() { const settings = useSettings(); const settingsDispatch = useSettingsDispatch(); @@ -42,11 +46,15 @@ export function FeaturePreviewSettings() { [config] ); + useEffect(() => { + setPageTitle([SETTINGS_PAGE_SECTION_TITLE, PAGE_TITLE]); + }, []); + return ( <Page> <PageSection variant={"light"} isWidthLimited> <TextContent> - <Text component={TextVariants.h1}>Feature Preview</Text> + <Text component={TextVariants.h1}>{PAGE_TITLE}</Text> <Text component={TextVariants.p}> Data you provide here is necessary for configuring the preview of features that are not fully supported yet. <br /> All information is locally stored in your browser and never shared with anyone. diff --git a/packages/serverless-logic-web-tools/src/settings/github/GitHubSettings.tsx b/packages/serverless-logic-web-tools/src/settings/github/GitHubSettings.tsx index 15cf7ffac7..17ac0dc172 100644 --- a/packages/serverless-logic-web-tools/src/settings/github/GitHubSettings.tsx +++ b/packages/serverless-logic-web-tools/src/settings/github/GitHubSettings.tsx @@ -30,12 +30,15 @@ import { ExclamationTriangleIcon } from "@patternfly/react-icons/dist/js/icons/e import { ExternalLinkAltIcon } from "@patternfly/react-icons/dist/js/icons/external-link-alt-icon"; import { GithubIcon } from "@patternfly/react-icons/dist/js/icons/github-icon"; import * as React from "react"; -import { useCallback, useContext, useMemo, useRef, useState } from "react"; +import { useEffect, useCallback, useContext, useMemo, useRef, useState } from "react"; import { makeCookieName } from "../../cookies"; import { QuickStartIds } from "../../quickstarts-data"; import { AuthStatus, useSettings, useSettingsDispatch } from "../../settings/SettingsContext"; import { SettingsPageProps } from "../types"; +import { setPageTitle } from "../../PageTitle"; +import { SETTINGS_PAGE_SECTION_TITLE } from "../SettingsContext"; +const PAGE_TITLE = "GitHub"; export const GITHUB_OAUTH_TOKEN_SIZE = 40; export const GITHUB_TOKENS_URL = "https://github.com/settings/tokens";; export const GITHUB_TOKENS_HOW_TO_URL = @@ -97,11 +100,15 @@ export function GitHubSettings(props: SettingsPageProps) { setPotentialGitHubToken(undefined); }, [settingsDispatch.github.authService]); + useEffect(() => { + setPageTitle([SETTINGS_PAGE_SECTION_TITLE, PAGE_TITLE]); + }, []); + return ( <Page> <PageSection variant={"light"}> <TextContent> - <Text component={TextVariants.h1}>GitHub</Text> + <Text component={TextVariants.h1}>{PAGE_TITLE}</Text> <Text component={TextVariants.p}> Data you provide here is necessary for creating repositories containing models you design, and syncing changes with GitHub. diff --git a/packages/serverless-logic-web-tools/src/settings/openshift/OpenShiftSettings.tsx b/packages/serverless-logic-web-tools/src/settings/openshift/OpenShiftSettings.tsx index 7402abd0dd..70e28a0b6e 100644 --- a/packages/serverless-logic-web-tools/src/settings/openshift/OpenShiftSettings.tsx +++ b/packages/serverless-logic-web-tools/src/settings/openshift/OpenShiftSettings.tsx @@ -14,27 +14,31 @@ * limitations under the License. */ -import { Modal, ModalVariant } from "@patternfly/react-core/dist/js/components/Modal"; +import React from "react"; +import { KubernetesConnection } from "@kie-tools-core/kubernetes-bridge/dist/service"; import { Alert } from "@patternfly/react-core/dist/js/components/Alert"; import { Button, ButtonVariant } from "@patternfly/react-core/dist/js/components/Button"; import { EmptyState, EmptyStateBody, EmptyStateIcon } from "@patternfly/react-core/dist/js/components/EmptyState"; +import { Modal, ModalVariant } from "@patternfly/react-core/dist/js/components/Modal"; import { Page, PageSection } from "@patternfly/react-core/dist/js/components/Page"; import { Text, TextContent, TextVariants } from "@patternfly/react-core/dist/js/components/Text"; import { AddCircleOIcon } from "@patternfly/react-icons/dist/js/icons/add-circle-o-icon"; import { CheckCircleIcon } from "@patternfly/react-icons/dist/js/icons/check-circle-icon"; -import * as React from "react"; -import { useCallback, useState } from "react"; +import { useCallback, useEffect, useState } from "react"; import { Link } from "react-router-dom"; +import { SETTINGS_PAGE_SECTION_TITLE } from "../SettingsContext"; import { useKieSandboxExtendedServices } from "../../kieSandboxExtendedServices/KieSandboxExtendedServicesContext"; import { KieSandboxExtendedServicesStatus } from "../../kieSandboxExtendedServices/KieSandboxExtendedServicesStatus"; import { routes } from "../../navigation/Routes"; import { OpenShiftInstanceStatus } from "../../openshift/OpenShiftInstanceStatus"; +import { setPageTitle } from "../../PageTitle"; import { obfuscate } from "../github/GitHubSettings"; import { useSettings, useSettingsDispatch } from "../SettingsContext"; import { SettingsPageProps } from "../types"; import { saveConfigCookie } from "./OpenShiftSettingsConfig"; import { OpenShiftSettingsSimpleConfig } from "./OpenShiftSettingsSimpleConfig"; -import { KubernetesConnection } from "@kie-tools-core/kubernetes-bridge/dist/service"; + +const PAGE_TITLE = "OpenShift"; export function OpenShiftSettings(props: SettingsPageProps) { const settings = useSettings(); @@ -57,11 +61,15 @@ export function OpenShiftSettings(props: SettingsPageProps) { saveConfigCookie(newConfig); }, [settings.openshift.config, settingsDispatch.openshift]); + useEffect(() => { + setPageTitle([SETTINGS_PAGE_SECTION_TITLE, PAGE_TITLE]); + }, []); + return ( <Page> <PageSection variant={"light"} isWidthLimited> <TextContent> - <Text component={TextVariants.h1}>OpenShift</Text> + <Text component={TextVariants.h1}>{PAGE_TITLE}</Text> <Text component={TextVariants.p}> Data you provide here is necessary for deploying models you design to your OpenShift instance. <br /> diff --git a/packages/serverless-logic-web-tools/src/settings/serviceAccount/ServiceAccountSettings.tsx b/packages/serverless-logic-web-tools/src/settings/serviceAccount/ServiceAccountSettings.tsx index 93060e14dc..59d29acf47 100644 --- a/packages/serverless-logic-web-tools/src/settings/serviceAccount/ServiceAccountSettings.tsx +++ b/packages/serverless-logic-web-tools/src/settings/serviceAccount/ServiceAccountSettings.tsx @@ -14,12 +14,14 @@ * limitations under the License. */ -import { Modal, ModalVariant } from "@patternfly/react-core/dist/js/components/Modal"; +import React from "react"; +import { QuickStartContext, QuickStartContextValues } from "@patternfly/quickstarts"; import { Alert } from "@patternfly/react-core/dist/js/components/Alert"; import { Button, ButtonVariant } from "@patternfly/react-core/dist/js/components/Button"; import { EmptyState, EmptyStateBody, EmptyStateIcon } from "@patternfly/react-core/dist/js/components/EmptyState"; import { ActionGroup, Form, FormAlert, FormGroup } from "@patternfly/react-core/dist/js/components/Form"; import { InputGroup, InputGroupText } from "@patternfly/react-core/dist/js/components/InputGroup"; +import { Modal, ModalVariant } from "@patternfly/react-core/dist/js/components/Modal"; import { Page, PageSection } from "@patternfly/react-core/dist/js/components/Page"; import { Popover } from "@patternfly/react-core/dist/js/components/Popover"; import { Text, TextContent, TextVariants } from "@patternfly/react-core/dist/js/components/Text"; @@ -28,17 +30,19 @@ import { AddCircleOIcon } from "@patternfly/react-icons/dist/js/icons/add-circle import { CheckCircleIcon } from "@patternfly/react-icons/dist/js/icons/check-circle-icon"; import HelpIcon from "@patternfly/react-icons/dist/js/icons/help-icon"; import { TimesIcon } from "@patternfly/react-icons/dist/js/icons/times-icon"; -import * as React from "react"; -import { useCallback, useMemo, useState, useContext } from "react"; +import { useCallback, useContext, useEffect, useMemo, useState } from "react"; import { Link } from "react-router-dom"; +import { SETTINGS_PAGE_SECTION_TITLE } from "../SettingsContext"; import { useKieSandboxExtendedServices } from "../../kieSandboxExtendedServices/KieSandboxExtendedServicesContext"; import { KieSandboxExtendedServicesStatus } from "../../kieSandboxExtendedServices/KieSandboxExtendedServicesStatus"; import { routes } from "../../navigation/Routes"; +import { setPageTitle } from "../../PageTitle"; +import { QuickStartIds } from "../../quickstarts-data"; import { useSettings, useSettingsDispatch } from "../SettingsContext"; import { SettingsPageProps } from "../types"; import { EMPTY_CONFIG, isServiceAccountConfigValid, resetConfigCookie, saveConfigCookie } from "./ServiceAccountConfig"; -import { QuickStartContext, QuickStartContextValues } from "@patternfly/quickstarts"; -import { QuickStartIds } from "../../quickstarts-data"; + +const PAGE_TITLE = "Service Account"; export function ServiceAccountSettings(props: SettingsPageProps) { const settings = useSettings(); @@ -95,11 +99,15 @@ export function ServiceAccountSettings(props: SettingsPageProps) { saveConfigCookie(config); }, [config, settingsDispatch.serviceAccount]); + useEffect(() => { + setPageTitle([SETTINGS_PAGE_SECTION_TITLE, PAGE_TITLE]); + }, []); + return ( <Page> <PageSection variant={"light"} isWidthLimited> <TextContent> - <Text component={TextVariants.h1}>Service Account</Text> + <Text component={TextVariants.h1}>{PAGE_TITLE}</Text> <Text component={TextVariants.p}> Data you provide here is necessary for uploading Open API specs associated with models you design to your Service Registry instance. All information is locally stored in your browser and never shared with anyone. @@ -123,8 +131,7 @@ export function ServiceAccountSettings(props: SettingsPageProps) { isInline > KIE Sandbox Extended Services is necessary for uploading Open API specs associated with models you design - to your Service Registry instance and also connecting deployments with your Streams for Apache Kafka - instance. + to your Service Registry instance. </Alert> <br /> </> diff --git a/packages/serverless-logic-web-tools/src/settings/serviceRegistry/ServiceRegistrySettings.tsx b/packages/serverless-logic-web-tools/src/settings/serviceRegistry/ServiceRegistrySettings.tsx index a196d80931..f23e6909c8 100644 --- a/packages/serverless-logic-web-tools/src/settings/serviceRegistry/ServiceRegistrySettings.tsx +++ b/packages/serverless-logic-web-tools/src/settings/serviceRegistry/ServiceRegistrySettings.tsx @@ -14,12 +14,14 @@ * limitations under the License. */ -import { Modal, ModalVariant } from "@patternfly/react-core/dist/js/components/Modal"; +import React from "react"; +import { QuickStartContext, QuickStartContextValues } from "@patternfly/quickstarts"; import { Alert } from "@patternfly/react-core/dist/js/components/Alert"; import { Button, ButtonVariant } from "@patternfly/react-core/dist/js/components/Button"; import { EmptyState, EmptyStateBody, EmptyStateIcon } from "@patternfly/react-core/dist/js/components/EmptyState"; import { ActionGroup, Form, FormAlert, FormGroup } from "@patternfly/react-core/dist/js/components/Form"; import { InputGroup, InputGroupText } from "@patternfly/react-core/dist/js/components/InputGroup"; +import { Modal, ModalVariant } from "@patternfly/react-core/dist/js/components/Modal"; import { Page, PageSection } from "@patternfly/react-core/dist/js/components/Page"; import { Popover } from "@patternfly/react-core/dist/js/components/Popover"; import { Text, TextContent, TextVariants } from "@patternfly/react-core/dist/js/components/Text"; @@ -28,22 +30,24 @@ import { AddCircleOIcon } from "@patternfly/react-icons/dist/js/icons/add-circle import { CheckCircleIcon } from "@patternfly/react-icons/dist/js/icons/check-circle-icon"; import HelpIcon from "@patternfly/react-icons/dist/js/icons/help-icon"; import { TimesIcon } from "@patternfly/react-icons/dist/js/icons/times-icon"; -import * as React from "react"; -import { useCallback, useMemo, useState, useContext } from "react"; +import { useCallback, useContext, useEffect, useMemo, useState } from "react"; import { Link } from "react-router-dom"; +import { SETTINGS_PAGE_SECTION_TITLE } from "../SettingsContext"; import { useKieSandboxExtendedServices } from "../../kieSandboxExtendedServices/KieSandboxExtendedServicesContext"; import { KieSandboxExtendedServicesStatus } from "../../kieSandboxExtendedServices/KieSandboxExtendedServicesStatus"; import { routes } from "../../navigation/Routes"; +import { setPageTitle } from "../../PageTitle"; +import { QuickStartIds } from "../../quickstarts-data"; import { useSettings, useSettingsDispatch } from "../SettingsContext"; +import { SettingsPageProps } from "../types"; import { EMPTY_CONFIG, isServiceRegistryConfigValid, resetConfigCookie, saveConfigCookie, } from "./ServiceRegistryConfig"; -import { QuickStartContext, QuickStartContextValues } from "@patternfly/quickstarts"; -import { QuickStartIds } from "../../quickstarts-data"; -import { SettingsPageProps } from "../types"; + +const PAGE_TITLE = "Service Registry"; export function ServiceRegistrySettings(props: SettingsPageProps) { const settings = useSettings(); @@ -94,11 +98,15 @@ export function ServiceRegistrySettings(props: SettingsPageProps) { saveConfigCookie(config); }, [config, settingsDispatch.serviceRegistry]); + useEffect(() => { + setPageTitle([SETTINGS_PAGE_SECTION_TITLE, PAGE_TITLE]); + }, []); + return ( <Page> <PageSection variant={"light"} isWidthLimited> <TextContent> - <Text component={TextVariants.h1}>Service Registry</Text> + <Text component={TextVariants.h1}>{PAGE_TITLE}</Text> <Text component={TextVariants.p}> Data you provide here is necessary for uploading specs associated with models you design to your Service Registry instance. All information is locally stored in your browser and never shared with anyone. diff --git a/packages/serverless-logic-web-tools/src/workspace/components/ImportFromUrlForm.tsx b/packages/serverless-logic-web-tools/src/workspace/components/ImportFromUrlForm.tsx index 611d3eb4b1..61e2aa8409 100644 --- a/packages/serverless-logic-web-tools/src/workspace/components/ImportFromUrlForm.tsx +++ b/packages/serverless-logic-web-tools/src/workspace/components/ImportFromUrlForm.tsx @@ -19,19 +19,21 @@ import { CheckCircleIcon } from "@patternfly/react-icons/dist/js/icons/check-cir import { ExclamationCircleIcon } from "@patternfly/react-icons/dist/js/icons/exclamation-circle-icon"; import { TextInput } from "@patternfly/react-core/dist/js/components/TextInput"; import * as React from "react"; -import { FormEvent, useCallback, useMemo } from "react"; +import { useEffect, FormEvent, useCallback, useMemo } from "react"; import { ValidatedOptions } from "@patternfly/react-core/dist/js/helpers/constants"; import { useEditorEnvelopeLocator } from "../../envelopeLocator/EditorEnvelopeLocatorContext"; import { UrlType, useImportableUrl } from "../hooks/ImportableUrlHooks"; export function ImportFromUrlForm(props: { - url?: string; + allowedTypes?: UrlType[]; importingError?: string; onChange: (url: string) => void; onSubmit: () => void; + onValidate?: (isValid: ValidatedOptions) => void; + url?: string; urlInputRef?: React.RefObject<HTMLInputElement>; - allowedTypes?: UrlType[]; }) { + const { onValidate } = props; const editorEnvelopeLocator = useEditorEnvelopeLocator(); const importableUrl = useImportableUrl({ isFileSupported: (path: string) => editorEnvelopeLocator.hasMappingFor(path), @@ -77,6 +79,10 @@ export function ImportFromUrlForm(props: { return ""; }, [importableUrl.error, props.importingError]); + useEffect(() => { + onValidate?.(validatedOption); + }, [validatedOption, onValidate]); + return ( <Form onSubmit={onSubmit}> <FormGroup --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
