kie-issues#158: Automatically focus and select file name when creating a new file on KIE Sandbox

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,

packages/online-editor/src/editor/Toolbar/EditorToolbar.tsx

@@ -74,6 +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;
@@ -113,6 +115,7 @@ export function EditorToolbarWithWorkspace(
   const workspaces = useWorkspaces();
   const { i18n } = useOnlineI18n();
   const copyContentTextArea = useRef<HTMLTextAreaElement>(null);
+  const queryParams = useQueryParams();
 
   const { alerts } = useGitIntegration();
 
@@ -339,6 +342,7 @@ export function EditorToolbarWithWorkspace(
                               fileRelativePath: file.relativePathWithoutExtension,
                               extension: file.extension,
                             }),
+                            search: queryParams.with(QueryParams.NEW_FILE, "new").toString(),
                           });
                         }}
                       />

packages/online-editor/src/editor/Toolbar/FileSwitcher.tsx

@@ -83,6 +83,9 @@ 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 { useHistory } from "react-router";
 
 const ROOT_MENU_ID = "rootMenu";
 
@@ -110,6 +113,9 @@ export function FileSwitcher(props: {
   const workspaces = useWorkspaces();
   const workspaceFileNameRef = useRef<HTMLInputElement>(null);
   const [newFileNameValid, setNewFileNameValid] = useState<boolean>(true);
+  const queryParamNewFile = useQueryParam(QueryParams.NEW_FILE);
+  const queryParams = useQueryParams();
+  const history = useHistory();
 
   const resetWorkspaceFileName = useCallback(() => {
     if (workspaceFileNameRef.current) {
@@ -125,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,
@@ -140,7 +149,7 @@ export function FileSwitcher(props: {
 
       setNewFileNameValid(!hasConflictingFileName && !hasForbiddenCharacters);
     },
-    [props.workspaceFile, workspaces]
+    [history, props.workspaceFile, queryParams, workspaces]
   );
 
   const renameWorkspaceFile = useCallback(
@@ -178,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);

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 (
     <OnlineEditorPage>

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}`),

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 } });
         });
       });