From 09aede9f40ddc587f34106220eca174eb4effde3 Mon Sep 17 00:00:00 2001 From: Kennedy Bowers Date: Thu, 25 May 2023 12:53:26 +0200 Subject: [PATCH 1/7] kie-issues#158 Automatically focus and select file name when creating a new file on KIE Sandbox --- packages/online-editor/src/editor/Toolbar/FileSwitcher.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/online-editor/src/editor/Toolbar/FileSwitcher.tsx b/packages/online-editor/src/editor/Toolbar/FileSwitcher.tsx index eee495cb4b3..e3bb19b45cc 100644 --- a/packages/online-editor/src/editor/Toolbar/FileSwitcher.tsx +++ b/packages/online-editor/src/editor/Toolbar/FileSwitcher.tsx @@ -194,6 +194,12 @@ export function FileSwitcher(props: { setMenuHeights({}); }, [props.workspace, filesMenuMode, activeMenu]); + useEffect(() => { + if (workspaceFileNameRef.current !== null && props.workspaceFile.nameWithoutExtension.includes("Untitled")) { + workspaceFileNameRef.current.select(); + } + }, [props.workspaceFile.nameWithoutExtension, workspaceFileNameRef]); + useEffect(() => { if (isFilesDropdownOpen) { return; From fbc83daf3416f9c771e8612bea9a5a0782cfbb78 Mon Sep 17 00:00:00 2001 From: Kennedy Bowers Date: Tue, 6 Jun 2023 09:41:05 +0200 Subject: [PATCH 2/7] Added Logic to select file name when coming from home page --- .../src/editor/Toolbar/FileSwitcher.tsx | 14 ++++++++++++-- .../src/editor/Toolbar/NewFileDropdownMenu.tsx | 15 +++++++++++++-- .../NewWorkspaceWithEmptyFilePage.tsx | 6 +++++- packages/online-editor/src/navigation/Routes.ts | 5 +++++ 4 files changed, 35 insertions(+), 5 deletions(-) diff --git a/packages/online-editor/src/editor/Toolbar/FileSwitcher.tsx b/packages/online-editor/src/editor/Toolbar/FileSwitcher.tsx index e3bb19b45cc..ae3ada1ad01 100644 --- a/packages/online-editor/src/editor/Toolbar/FileSwitcher.tsx +++ b/packages/online-editor/src/editor/Toolbar/FileSwitcher.tsx @@ -83,6 +83,10 @@ import { Checkbox } from "@patternfly/react-core/dist/js/components/Checkbox"; import { SearchInput } from "@patternfly/react-core/dist/js/components/SearchInput"; import { switchExpression } from "../../switchExpression/switchExpression"; import { GitStatusProps } from "../../workspace/components/GitStatusIndicatorActions"; +import { useQueryParam, useQueryParams } from "../../queryParams/QueryParamsContext"; +import { QueryParams } from "../../navigation/Routes"; +import { NewFileDropdownMenu } from "./NewFileDropdownMenu"; +import { useHistory } from "react-router"; const ROOT_MENU_ID = "rootMenu"; @@ -110,6 +114,9 @@ export function FileSwitcher(props: { const workspaces = useWorkspaces(); const workspaceFileNameRef = useRef(null); const [newFileNameValid, setNewFileNameValid] = useState(true); + const queryParamNewFile = useQueryParam(QueryParams.NEW_FILE); + const queryParams = useQueryParams(); + const history = useHistory(); const resetWorkspaceFileName = useCallback(() => { if (workspaceFileNameRef.current) { @@ -195,10 +202,13 @@ export function FileSwitcher(props: { }, [props.workspace, filesMenuMode, activeMenu]); useEffect(() => { - if (workspaceFileNameRef.current !== null && props.workspaceFile.nameWithoutExtension.includes("Untitled")) { + if (workspaceFileNameRef.current !== null && queryParamNewFile) { workspaceFileNameRef.current.select(); + history.replace({ + search: queryParams.without(QueryParams.NEW_FILE).toString(), + }); } - }, [props.workspaceFile.nameWithoutExtension, workspaceFileNameRef]); + }, [history, queryParamNewFile, queryParams, workspaceFileNameRef]); useEffect(() => { if (isFilesDropdownOpen) { diff --git a/packages/online-editor/src/editor/Toolbar/NewFileDropdownMenu.tsx b/packages/online-editor/src/editor/Toolbar/NewFileDropdownMenu.tsx index 459c194e068..03aa9baf8b9 100644 --- a/packages/online-editor/src/editor/Toolbar/NewFileDropdownMenu.tsx +++ b/packages/online-editor/src/editor/Toolbar/NewFileDropdownMenu.tsx @@ -51,6 +51,10 @@ import { useBitbucketClient } from "../../bitbucket/Hooks"; import { isEditable } from "../../envelopeLocator/EditorEnvelopeLocatorFactory"; import { useEditorsConfig } from "../../envelopeLocator/hooks/EditorEnvelopeLocatorContext"; import { useEnv } from "../../env/hooks/EnvContext"; +import { useQueryParams } from "../../queryParams/QueryParamsContext"; +import { QueryParams } from "../../navigation/Routes"; +import { useHistory, generatePath } from "react-router"; +import { BrowserRouter as Router, Link, useLocation, Route } from "react-router-dom"; const ROOT_MENU_ID = "addFileRootMenu"; @@ -62,11 +66,17 @@ export function NewFileDropdownMenu(props: { const { env } = useEnv(); const uploadFileInputRef = useRef(null); const editorsConfig = useEditorsConfig(); - const [menuDrilledIn, setMenuDrilledIn] = useState([]); const [drilldownPath, setDrilldownPath] = useState([]); const [menuHeights, setMenuHeights] = useState<{ [key: string]: number }>({}); const [activeMenu, setActiveMenu] = useState(ROOT_MENU_ID); + const queryParams = useQueryParams(); + const history = useHistory(); + function useQuery() { + const { search } = useLocation(); + + return React.useMemo(() => new URLSearchParams(search), [search]); + } const drillIn = useCallback((_event, fromMenuId, toMenuId, pathId) => { setMenuDrilledIn((prev) => [...prev, fromMenuId]); @@ -88,6 +98,7 @@ export function NewFileDropdownMenu(props: { return prev; }); }, []); + const [url, setUrl] = useState(""); const workspaces = useWorkspaces(); const routes = useRoutes(); @@ -103,6 +114,7 @@ export function NewFileDropdownMenu(props: { }); await props.onAddFile(file); }, + [props, workspaces] ); @@ -187,7 +199,6 @@ export function NewFileDropdownMenu(props: { [workspaces, props, gitConfig, env.KIE_SANDBOX_APP_NAME, successfullyUploadedAlert, editorEnvelopeLocator] ); - const [url, setUrl] = useState(""); const [authSessionId, setAuthSessionId] = useState(props.workspaceDescriptor.gitAuthSessionId); const importableUrl = useImportableUrl( diff --git a/packages/online-editor/src/importFromUrl/NewWorkspaceWithEmptyFilePage.tsx b/packages/online-editor/src/importFromUrl/NewWorkspaceWithEmptyFilePage.tsx index 5eb95555cdc..f91d08a24f4 100644 --- a/packages/online-editor/src/importFromUrl/NewWorkspaceWithEmptyFilePage.tsx +++ b/packages/online-editor/src/importFromUrl/NewWorkspaceWithEmptyFilePage.tsx @@ -25,11 +25,14 @@ import { Text, TextContent, TextVariants } from "@patternfly/react-core/dist/js/ import { Bullseye } from "@patternfly/react-core/dist/js/layouts/Bullseye"; import { Spinner } from "@patternfly/react-core/dist/js/components/Spinner"; import { AUTH_SESSION_NONE } from "../authSessions/AuthSessionApi"; +import { useQueryParams } from "../queryParams/QueryParamsContext"; +import { QueryParams } from "../navigation/Routes"; export function NewWorkspaceWithEmptyFilePage(props: { extension: string }) { const workspaces = useWorkspaces(); const history = useHistory(); const routes = useRoutes(); + const queryParams = useQueryParams(); useEffect(() => { workspaces @@ -51,9 +54,10 @@ export function NewWorkspaceWithEmptyFilePage(props: { extension: string }) { fileRelativePath: file.relativePathWithoutExtension, extension: file.extension, }), + search: queryParams.with(QueryParams.NEW_FILE, "new").toString(), }); }); - }, [routes, history, props.extension, workspaces]); + }, [routes, history, props.extension, workspaces, queryParams]); return ( diff --git a/packages/online-editor/src/navigation/Routes.ts b/packages/online-editor/src/navigation/Routes.ts index be2c210749c..b377ad440fe 100644 --- a/packages/online-editor/src/navigation/Routes.ts +++ b/packages/online-editor/src/navigation/Routes.ts @@ -23,6 +23,7 @@ export enum QueryParams { EXPAND = "expand", AUTH_SESSION_ID = "authSessionId", CONFIRM = "confirm", + NEW_FILE = "newFile", } export enum PathParams { @@ -135,6 +136,10 @@ export const routes = { queryParams: QueryParams.URL | QueryParams.BRANCH | QueryParams.AUTH_SESSION_ID | QueryParams.CONFIRM; }>(() => `/import`), + newFile: new Route<{ + queryParams: QueryParams.NEW_FILE; + }>(() => `/new`), + workspaceWithFilePath: new Route<{ pathParams: PathParams.WORKSPACE_ID | PathParams.FILE_RELATIVE_PATH | PathParams.EXTENSION; }>(({ workspaceId, fileRelativePath, extension }) => `/${workspaceId}/file/${fileRelativePath}.${extension}`), From 496c05f321347fe037c7de82252ea6126b0c25ed Mon Sep 17 00:00:00 2001 From: Kennedy Bowers Date: Wed, 7 Jun 2023 14:53:13 +0200 Subject: [PATCH 3/7] adding queryparam when adding new file from new file dropdown menu --- packages/online-editor/src/editor/Toolbar/EditorToolbar.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/online-editor/src/editor/Toolbar/EditorToolbar.tsx b/packages/online-editor/src/editor/Toolbar/EditorToolbar.tsx index bb24bd0a2f7..001dbb3790e 100644 --- a/packages/online-editor/src/editor/Toolbar/EditorToolbar.tsx +++ b/packages/online-editor/src/editor/Toolbar/EditorToolbar.tsx @@ -74,7 +74,8 @@ import { SyncDropdownMenu } from "./SyncDropdownMenu"; import { AcceleratorsDropdown } from "./Accelerators/AcceleratorsDropdown"; import { listDeletedFiles } from "../../workspace/components/WorkspaceStatusIndicator"; import { PromiseState } from "@kie-tools-core/react-hooks/dist/PromiseState"; - +import { useQueryParams } from "../../queryParams/QueryParamsContext"; +import { QueryParams } from "../../navigation/Routes"; export interface Props { editor: EmbeddedEditorRef | undefined; workspaceFile: WorkspaceFile; @@ -113,6 +114,7 @@ export function EditorToolbarWithWorkspace( const workspaces = useWorkspaces(); const { i18n } = useOnlineI18n(); const copyContentTextArea = useRef(null); + const queryParams = useQueryParams(); const { alerts } = useGitIntegration(); @@ -339,6 +341,7 @@ export function EditorToolbarWithWorkspace( fileRelativePath: file.relativePathWithoutExtension, extension: file.extension, }), + search: queryParams.with(QueryParams.NEW_FILE, "new").toString(), }); }} /> From b713a6373ad3adda44cd85b2fcecbfa3947ec127 Mon Sep 17 00:00:00 2001 From: Kennedy Bowers Date: Wed, 7 Jun 2023 14:54:44 +0200 Subject: [PATCH 4/7] undoing changes from newfiledropdown --- .../src/editor/Toolbar/NewFileDropdownMenu.tsx | 15 ++------------- 1 file changed, 2 insertions(+), 13 deletions(-) diff --git a/packages/online-editor/src/editor/Toolbar/NewFileDropdownMenu.tsx b/packages/online-editor/src/editor/Toolbar/NewFileDropdownMenu.tsx index 03aa9baf8b9..459c194e068 100644 --- a/packages/online-editor/src/editor/Toolbar/NewFileDropdownMenu.tsx +++ b/packages/online-editor/src/editor/Toolbar/NewFileDropdownMenu.tsx @@ -51,10 +51,6 @@ import { useBitbucketClient } from "../../bitbucket/Hooks"; import { isEditable } from "../../envelopeLocator/EditorEnvelopeLocatorFactory"; import { useEditorsConfig } from "../../envelopeLocator/hooks/EditorEnvelopeLocatorContext"; import { useEnv } from "../../env/hooks/EnvContext"; -import { useQueryParams } from "../../queryParams/QueryParamsContext"; -import { QueryParams } from "../../navigation/Routes"; -import { useHistory, generatePath } from "react-router"; -import { BrowserRouter as Router, Link, useLocation, Route } from "react-router-dom"; const ROOT_MENU_ID = "addFileRootMenu"; @@ -66,17 +62,11 @@ export function NewFileDropdownMenu(props: { const { env } = useEnv(); const uploadFileInputRef = useRef(null); const editorsConfig = useEditorsConfig(); + const [menuDrilledIn, setMenuDrilledIn] = useState([]); const [drilldownPath, setDrilldownPath] = useState([]); const [menuHeights, setMenuHeights] = useState<{ [key: string]: number }>({}); const [activeMenu, setActiveMenu] = useState(ROOT_MENU_ID); - const queryParams = useQueryParams(); - const history = useHistory(); - function useQuery() { - const { search } = useLocation(); - - return React.useMemo(() => new URLSearchParams(search), [search]); - } const drillIn = useCallback((_event, fromMenuId, toMenuId, pathId) => { setMenuDrilledIn((prev) => [...prev, fromMenuId]); @@ -98,7 +88,6 @@ export function NewFileDropdownMenu(props: { return prev; }); }, []); - const [url, setUrl] = useState(""); const workspaces = useWorkspaces(); const routes = useRoutes(); @@ -114,7 +103,6 @@ export function NewFileDropdownMenu(props: { }); await props.onAddFile(file); }, - [props, workspaces] ); @@ -199,6 +187,7 @@ export function NewFileDropdownMenu(props: { [workspaces, props, gitConfig, env.KIE_SANDBOX_APP_NAME, successfullyUploadedAlert, editorEnvelopeLocator] ); + const [url, setUrl] = useState(""); const [authSessionId, setAuthSessionId] = useState(props.workspaceDescriptor.gitAuthSessionId); const importableUrl = useImportableUrl( From 5a0085b634c4824b63d758f5d5b1bc85fc015c28 Mon Sep 17 00:00:00 2001 From: Kennedy Bowers Date: Wed, 7 Jun 2023 16:50:56 +0200 Subject: [PATCH 5/7] simplifying code --- .../src/editor/Toolbar/FileSwitcher.tsx | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/packages/online-editor/src/editor/Toolbar/FileSwitcher.tsx b/packages/online-editor/src/editor/Toolbar/FileSwitcher.tsx index ae3ada1ad01..fe04e458284 100644 --- a/packages/online-editor/src/editor/Toolbar/FileSwitcher.tsx +++ b/packages/online-editor/src/editor/Toolbar/FileSwitcher.tsx @@ -85,7 +85,6 @@ import { switchExpression } from "../../switchExpression/switchExpression"; import { GitStatusProps } from "../../workspace/components/GitStatusIndicatorActions"; import { useQueryParam, useQueryParams } from "../../queryParams/QueryParamsContext"; import { QueryParams } from "../../navigation/Routes"; -import { NewFileDropdownMenu } from "./NewFileDropdownMenu"; import { useHistory } from "react-router"; const ROOT_MENU_ID = "rootMenu"; @@ -201,14 +200,11 @@ export function FileSwitcher(props: { setMenuHeights({}); }, [props.workspace, filesMenuMode, activeMenu]); - useEffect(() => { - if (workspaceFileNameRef.current !== null && queryParamNewFile) { - workspaceFileNameRef.current.select(); - history.replace({ - search: queryParams.without(QueryParams.NEW_FILE).toString(), - }); - } - }, [history, queryParamNewFile, queryParams, workspaceFileNameRef]); + // useEffect(() => { + // if (workspaceFileNameRef.current !== null && queryParamNewFile) { + // workspaceFileNameRef.current.select(); + // } + // }, [history, queryParamNewFile, queryParams, workspaceFileNameRef]); useEffect(() => { if (isFilesDropdownOpen) { From bfaf066d64f1d58051ff8a6512d4a6e25c5696f6 Mon Sep 17 00:00:00 2001 From: Kennedy Bowers Date: Fri, 9 Jun 2023 14:30:47 +0200 Subject: [PATCH 6/7] deploying solution and adding comments --- packages/online-editor/src/editor/EditorPage.tsx | 4 ++++ .../src/editor/Toolbar/EditorToolbar.tsx | 5 +++++ .../src/editor/Toolbar/FileSwitcher.tsx | 15 +++++++-------- .../src/hooks/WorkspaceFileHooks.tsx | 5 +++++ 4 files changed, 21 insertions(+), 8 deletions(-) diff --git a/packages/online-editor/src/editor/EditorPage.tsx b/packages/online-editor/src/editor/EditorPage.tsx index 05745d8bafd..e3dff3ba891 100644 --- a/packages/online-editor/src/editor/EditorPage.tsx +++ b/packages/online-editor/src/editor/EditorPage.tsx @@ -113,6 +113,10 @@ export function EditorPage(props: Props) { return; } + //If my queryparam is in the URL when the add new file in the new file dropdown is clicked on + //Then - the workspaceFilePromise will have the correct data and move on to the new file. + //Else - the workspaceFilePromise will have the 'current' data and stay on the current page and add the queryparams. + history.replace({ pathname: routes.workspaceWithFilePath.path({ workspaceId: workspaceFilePromise.data.workspaceFile.workspaceId, diff --git a/packages/online-editor/src/editor/Toolbar/EditorToolbar.tsx b/packages/online-editor/src/editor/Toolbar/EditorToolbar.tsx index 001dbb3790e..0076aca04b9 100644 --- a/packages/online-editor/src/editor/Toolbar/EditorToolbar.tsx +++ b/packages/online-editor/src/editor/Toolbar/EditorToolbar.tsx @@ -320,6 +320,11 @@ export function EditorToolbarWithWorkspace( onToggle={() => setNewFileDropdownMenuOpen((prev) => !prev)} isPrimary={true} toggleIndicator={CaretDownIcon} + onClick={() => + history.push({ + search: queryParams.with(QueryParams.NEW_FILE, "new").toString(), + }) + } >   New file diff --git a/packages/online-editor/src/editor/Toolbar/FileSwitcher.tsx b/packages/online-editor/src/editor/Toolbar/FileSwitcher.tsx index fe04e458284..080abf86834 100644 --- a/packages/online-editor/src/editor/Toolbar/FileSwitcher.tsx +++ b/packages/online-editor/src/editor/Toolbar/FileSwitcher.tsx @@ -131,6 +131,9 @@ export function FileSwitcher(props: { setNewFileNameValid(true); return; } + history.replace({ + search: queryParams.without(QueryParams.NEW_FILE).toString(), + }); const newRelativePath = join( props.workspaceFile.relativeDirPath, @@ -146,7 +149,7 @@ export function FileSwitcher(props: { setNewFileNameValid(!hasConflictingFileName && !hasForbiddenCharacters); }, - [props.workspaceFile, workspaces] + [history, props.workspaceFile, queryParams, workspaces] ); const renameWorkspaceFile = useCallback( @@ -184,7 +187,9 @@ export function FileSwitcher(props: { }, [newFileNameValid, resetWorkspaceFileName] ); - + if (workspaceFileNameRef.current && queryParamNewFile) { + workspaceFileNameRef.current.select(); + } useEffect(resetWorkspaceFileName, [resetWorkspaceFileName]); const [isFilesDropdownOpen, setFilesDropdownOpen] = useState(false); const [isPopoverVisible, setPopoverVisible] = useState(false); @@ -200,12 +205,6 @@ export function FileSwitcher(props: { setMenuHeights({}); }, [props.workspace, filesMenuMode, activeMenu]); - // useEffect(() => { - // if (workspaceFileNameRef.current !== null && queryParamNewFile) { - // workspaceFileNameRef.current.select(); - // } - // }, [history, queryParamNewFile, queryParams, workspaceFileNameRef]); - useEffect(() => { if (isFilesDropdownOpen) { return; diff --git a/packages/workspaces-git-fs/src/hooks/WorkspaceFileHooks.tsx b/packages/workspaces-git-fs/src/hooks/WorkspaceFileHooks.tsx index 9a97c3e7ddf..1f45ecba543 100644 --- a/packages/workspaces-git-fs/src/hooks/WorkspaceFileHooks.tsx +++ b/packages/workspaces-git-fs/src/hooks/WorkspaceFileHooks.tsx @@ -46,6 +46,11 @@ export function useWorkspaceFilePromise(workspaceId: string | undefined, relativ return; } + //If my queryparam is in the URL when the add new file in the new file dropdown is clicked on + //Then - the workspaceId and relativePath will have the correct values for the new file and be set below. + //Else - the workspaceId and relativePath will have the correct values for the new file but be cancelled before it reaches the setWorkspaceFilePromise. + // Upon getting canceled it reverts to the workspaceId and relativePath of the current page and sets them to the current ones below. + setWorkspaceFilePromise({ data: { workspaceFile, uniqueId } }); }); }); From 9c50f8a5f2cdd96af92184f1d8c1e007fa04f33b Mon Sep 17 00:00:00 2001 From: Kennedy Bowers Date: Fri, 9 Jun 2023 14:35:49 +0200 Subject: [PATCH 7/7] removing unneeded code --- packages/online-editor/src/editor/Toolbar/EditorToolbar.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/online-editor/src/editor/Toolbar/EditorToolbar.tsx b/packages/online-editor/src/editor/Toolbar/EditorToolbar.tsx index 0076aca04b9..87f36f5935b 100644 --- a/packages/online-editor/src/editor/Toolbar/EditorToolbar.tsx +++ b/packages/online-editor/src/editor/Toolbar/EditorToolbar.tsx @@ -76,6 +76,7 @@ import { listDeletedFiles } from "../../workspace/components/WorkspaceStatusIndi import { PromiseState } from "@kie-tools-core/react-hooks/dist/PromiseState"; import { useQueryParams } from "../../queryParams/QueryParamsContext"; import { QueryParams } from "../../navigation/Routes"; + export interface Props { editor: EmbeddedEditorRef | undefined; workspaceFile: WorkspaceFile; @@ -320,11 +321,6 @@ export function EditorToolbarWithWorkspace( onToggle={() => setNewFileDropdownMenuOpen((prev) => !prev)} isPrimary={true} toggleIndicator={CaretDownIcon} - onClick={() => - history.push({ - search: queryParams.with(QueryParams.NEW_FILE, "new").toString(), - }) - } >   New file