explorer: Add developer setting to enable customUrl param (#13697)

explorer/src/components/ClusterModal.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ChangeEvent } from "react";
 import { Link, useHistory, useLocation } from "react-router-dom";
 import { useDebounceCallback } from "@react-hook/debounce";
 import { Location } from "history";
@@ -20,6 +20,15 @@ import { useQuery } from "utils/url";
 export function ClusterModal() {
   const [show, setShow] = useClusterModal();
   const onClose = () => setShow(false);
+  const enableCustomUrl = localStorage.getItem("enableCustomUrl") !== null;
+  const onToggleCustomUrlFeature = (e: ChangeEvent<HTMLInputElement>) => {
+    if (e.target.checked) {
+      localStorage.setItem("enableCustomUrl", "");
+    } else {
+      localStorage.removeItem("enableCustomUrl");
+    }
+  };
+
   return (
     <>
       <div
@@ -34,8 +43,31 @@ export function ClusterModal() {
               </span>
 
               <h2 className="text-center mb-4 mt-4">Choose a Cluster</h2>
-
               <ClusterToggle />
+
+              <hr />
+
+              <h2 className="text-center mb-4 mt-4">Developer Settings</h2>
+              <div className="d-flex justify-content-between">
+                <span className="mr-3">Enable custom url param</span>
+                <div className="custom-control custom-switch d-inline">
+                  <input
+                    type="checkbox"
+                    defaultChecked={enableCustomUrl}
+                    className="custom-control-input"
+                    id="cardToggle"
+                    onChange={onToggleCustomUrlFeature}
+                  />
+                  <label
+                    className="custom-control-label"
+                    htmlFor="cardToggle"
+                  ></label>
+                </div>
+              </div>
+              <p className="text-muted font-size-sm mt-3">
+                Enable this setting to easily connect to a custom cluster via
+                the "customUrl" url param.
+              </p>
             </div>
           </div>
         </div>
@@ -59,7 +91,10 @@ function CustomClusterInput({ activeSuffix, active }: InputProps) {
     active ? `${prefix}-${activeSuffix}` : "";
 
   const clusterLocation = (location: Location) => {
-    if (customUrl.length > 0) query.set("cluster", "custom");
+    if (customUrl.length > 0) {
+      query.set("cluster", "custom");
+      query.set("customUrl", customUrl);
+    }
     return {
       ...location,
       search: query.toString(),
@@ -70,6 +105,7 @@ function CustomClusterInput({ activeSuffix, active }: InputProps) {
     updateCustomUrl(url);
     if (url.length > 0) {
       query.set("cluster", "custom");
+      query.set("customUrl", url);
       history.push({ ...location, search: query.toString() });
     }
   }, 500);

explorer/src/providers/cluster.tsx

@@ -134,22 +134,34 @@ export function ClusterProvider({ children }: ClusterProviderProps) {
   const [showModal, setShowModal] = React.useState(false);
   const query = useQuery();
   const cluster = parseQuery(query);
+  const enableCustomUrl = localStorage.getItem("enableCustomUrl") !== null;
+  const customUrl = enableCustomUrl
+    ? query.get("customUrl") || ""
+    : state.customUrl;
   const history = useHistory();
   const location = useLocation();
 
+  // Remove customUrl param if dev setting is disabled
+  React.useEffect(() => {
+    if (!enableCustomUrl) {
+      query.delete("customUrl");
+      history.push({ ...location, search: query.toString() });
+    }
+  }, [enableCustomUrl]); // eslint-disable-line react-hooks/exhaustive-deps
+
   // Reconnect to cluster when params change
   React.useEffect(() => {
     if (cluster === Cluster.Custom) {
       // Remove cluster param if custom url has not been set
-      if (state.customUrl.length === 0) {
+      if (customUrl.length === 0) {
         query.delete("cluster");
         history.push({ ...location, search: query.toString() });
         return;
       }
     }
 
-    updateCluster(dispatch, cluster, state.customUrl);
-  }, [cluster, state.customUrl]); // eslint-disable-line react-hooks/exhaustive-deps
+    updateCluster(dispatch, cluster, customUrl);
+  }, [cluster, customUrl]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <StateContext.Provider value={state}>

explorer/src/utils/url.ts

@@ -7,24 +7,24 @@ export function useQuery() {
 
 export const clusterPath = (pathname: string) => {
   return (location: Location) => ({
-    ...pickCluster(location),
+    ...pickClusterParams(location),
     pathname,
   });
 };
 
-export function pickCluster(location: Location): Location {
-  const cluster = new URLSearchParams(location.search).get("cluster");
+export function pickClusterParams(location: Location): Location {
+  const urlParams = new URLSearchParams(location.search);
+  const cluster = urlParams.get("cluster");
+  const customUrl = urlParams.get("customUrl");
 
-  let search = "";
-  if (cluster) {
-    const params = new URLSearchParams();
-    params.set("cluster", cluster);
-    search = params.toString();
-  }
+  // Pick the params we care about
+  const newParams = new URLSearchParams();
+  if (cluster) newParams.set("cluster", cluster);
+  if (customUrl) newParams.set("customUrl", customUrl);
 
   return {
     ...location,
-    search,
+    search: newParams.toString(),
   };
 }