WIP: HACK navigate sections in editor mode

web/src/components/core/ConfigEditor.tsx

@@ -22,9 +22,10 @@
 
 import { _ } from "~/i18n";
 import React, { useState } from "react";
-import { Button, Stack } from "@patternfly/react-core";
+import { Button, Stack, Split } from "@patternfly/react-core";
 import { CodeEditor, Language } from '@patternfly/react-code-editor';
 import { useConfigMutation, useConfig } from '~/queries/config';
+import { Link } from "react-router-dom";
 
 const ConfigEditor = ({ sections }): React.ReactNode => {
   const setConfig = useConfigMutation();
@@ -51,9 +52,12 @@ const ConfigEditor = ({ sections }): React.ReactNode => {
   return (
     <Stack hasGutter>
       <CodeEditor height="65vh" onChange={onChange} language={Language.json} code={configJson} />
-      <Button onClick={updateConfig}>
-        {_("Do it!")}
-      </Button>
+      <Split hasGutter>
+        <Link to={{ path: ".", index: false }}>{_("Cancel")}</Link>
+        <Button onClick={updateConfig}>
+          {_("Save")}
+        </Button>
+      </Split>
     </Stack>
   );
 };

web/src/components/core/Page.tsx

@@ -281,9 +281,9 @@ const Submit = ({ children, ...props }: SubmitActionProps) => {
  */
 const Content = ({ editorSections, children, ...pageSectionProps }: React.PropsWithChildren<PageSectionProps>) => {
   const [searchParams] = useSearchParams();
-  const editorMode = searchParams.get("editorMode");
+  const ui = searchParams.get("ui");
 
-  if (editorMode) return (
+  if (ui && ui.toLowerCase() === "editor") return (
     <PageSection isFilled component="div">
       <ConfigEditor sections={editorSections} />
     </PageSection>

web/src/components/layout/Sidebar.tsx

@@ -21,14 +21,18 @@
  */
 
 import React from "react";
-import { NavLink } from "react-router-dom";
+import { NavLink, useSearchParams, createSearchParams } from "react-router-dom";
 import { Nav, NavItem, NavList, PageSidebar, PageSidebarBody, Stack } from "@patternfly/react-core";
 import { Icon } from "~/components/layout";
 import { ChangeProductLink } from "~/components/core";
 import { rootRoutes } from "~/router";
 import { _ } from "~/i18n";
 
 const MainNavigation = (): React.ReactNode => {
+  const [searchParams] = useSearchParams();
+  const ui = searchParams.get("ui");
+  const propagated = ui ? { ui: searchParams.get("ui") } : {};
+
   const links = rootRoutes().map((r) => {
     if (!r.handle) return null;
 
@@ -41,7 +45,7 @@ const MainNavigation = (): React.ReactNode => {
         key={r.path}
         component={({ className }) => (
           <NavLink
-            to={r.path}
+            to={{ pathname: r.path, search: `${createSearchParams(propagated)}` }}
             className={({ isActive }) => [className, isActive ? "pf-m-current" : ""].join(" ")}
           >
             {iconName && <Icon size="s" name={iconName} />} {name}