Installed page - revision view - implement url consistent state logic

dashboard/src/API/releases.ts

@@ -164,7 +164,6 @@ export function useGetReleaseInfoByType(
   options?: UseQueryOptions<string>
 ) {
   const { chart, namespace, tab, revision } = params;
-  console.log({ params });
   return useQuery<string>(
     [tab, namespace, chart, revision, additionalParams],
     () =>

dashboard/src/components/Tabs.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from "react";
-import { useNavigate, useParams, useSearchParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
+import useCustomSearchParams from '../hooks/useCustomSearchParams'
 
 export interface Tab {
   value: string;
@@ -20,10 +21,10 @@ export default function Tabs({
 
   const navigate = useNavigate();
   const {context, namespace, chart, revision} = useParams();
-  const [searchParams, setSearchParams] = useSearchParams();
+  const [searchParams, setSearchParams, addSearchParam] = useCustomSearchParams();
 
   const moveTab = (tab : Tab) => {
-    setSearchParams(`tab=${tab.value}`)
+    addSearchParam('tab', tab.value)
   }
 
   return (

dashboard/src/components/revision/RevisionDetails.tsx

@@ -53,6 +53,7 @@ export default function RevisionDetails({
   refetchRevisions,
 }: RevisionDetailsProps) {
   const [searchParams] = useSearchParams();
+
   const revisionTabs = [
     { value: "resources", label: "Resources", content: <RevisionResource /> },
     { value: "manifests", label: "Manifests", content: <RevisionDiff /> },

dashboard/src/components/revision/RevisionDiff.tsx

@@ -2,6 +2,8 @@ import { ChangeEvent, useMemo, useState, useRef, useEffect } from "react";
 import { Diff2HtmlUI, Diff2HtmlUIConfig } from 'diff2html/lib/ui/js/diff2html-ui-slim.js';
 import { useGetReleaseInfoByType } from "../../API/releases";
 import { useParams, useSearchParams } from "react-router-dom";
+import useCustomSearchParams from '../../hooks/useCustomSearchParams';
+
 import parse from 'html-react-parser';
 
 import hljs from "highlight.js";
@@ -11,47 +13,47 @@ type RevisionDiffProps = {
   includeUserDefineOnly?: boolean;
 };
 
-const TAB_VIEW_VIEW_ONLY = 'view';
-const TAB_VIEW_DIFF_PREV = 'diff-with-previous';
-const TAB_VIEW_DIFF_SPECIFIC = 'diff-with-specific-revision';
+const VIEW_MODE_VIEW_ONLY = 'view';
+const VIEW_MODE_DIFF_PREV = 'diff-with-previous';
+const VIEW_MODE_DIFF_SPECIFIC = 'diff-with-specific-revision';
 
 function RevisionDiff({ includeUserDefineOnly }: RevisionDiffProps) {
-  const [tabView, setTabView] = useState(TAB_VIEW_VIEW_ONLY);
   const [specificVersion, setSpecificVersion] = useState("1");
-  const [searchParams] = useSearchParams();
-  const tab = searchParams.get('tab');
+  const [searchParams, setSearchParams, addSearchParam] = useCustomSearchParams();
+  const {tab, mode: viewMode = VIEW_MODE_VIEW_ONLY} = searchParams;
+
   const diffElement = useRef<HTMLElement>({});
 
   const handleChanged = (e: ChangeEvent<HTMLInputElement>) => {
-    setTabView(e.target.value);
+    addSearchParam('mode', e.target.value);
   };
   const params = useParams();
   const revisionInt = parseInt(params.revision || '', 10)
   const hasMultipleRevisions = revisionInt > 1;
 
   const additionalParams = useMemo(() => {
-      if (tabView === TAB_VIEW_DIFF_PREV && hasMultipleRevisions) {
+      if (viewMode === VIEW_MODE_DIFF_PREV && hasMultipleRevisions) {
         return `&revisionDiff=${revisionInt - 1}`
       }
       const specificRevisionInt = parseInt(specificVersion || '', 10);
-      if (tabView === TAB_VIEW_DIFF_SPECIFIC && hasMultipleRevisions && !Number.isNaN(specificRevisionInt)) {
+      if (viewMode === VIEW_MODE_DIFF_SPECIFIC && hasMultipleRevisions && !Number.isNaN(specificRevisionInt)) {
         return `&revisionDiff=${specificVersion}`
       }
-  }, [tabView, specificVersion, revisionInt, hasMultipleRevisions]);
+  }, [viewMode, specificVersion, revisionInt, hasMultipleRevisions]);
 
   const hasRevisionToDiff = !!additionalParams;
 
   const {data, isLoading, isSuccess: fetchedDataSuccessfully} = useGetReleaseInfoByType({...params, tab}, additionalParams);
 
   const content = useMemo(() => {
-    if (data && !isLoading && (tabView === TAB_VIEW_VIEW_ONLY || !hasRevisionToDiff)) {  
+    if (data && !isLoading && (viewMode === VIEW_MODE_VIEW_ONLY || !hasRevisionToDiff)) {  
       return hljs.highlight(data, { language: "yaml" }).value;
     }
     return '';
-  }, [data, tabView, isLoading]);
+  }, [data, viewMode, isLoading]);
 
   useEffect(() => {
-    if (tabView !== TAB_VIEW_VIEW_ONLY && hasRevisionToDiff && data && !isLoading) {
+    if (viewMode !== VIEW_MODE_VIEW_ONLY && hasRevisionToDiff && data && !isLoading) {
       const configuration : Diff2HtmlUIConfig = {
 
         matching: 'lines',
@@ -64,20 +66,20 @@ function RevisionDiff({ includeUserDefineOnly }: RevisionDiffProps) {
       diff2htmlUi.draw();
       diff2htmlUi.highlightCode();
 
-    } else if (tabView === TAB_VIEW_VIEW_ONLY) {
+    } else if (viewMode === VIEW_MODE_VIEW_ONLY) {
       diffElement.current.innerHTML = '';
 
     } else if (fetchedDataSuccessfully && (!hasRevisionToDiff || !data)) {
       diffElement.current.innerHTML = 'No differences to display';
 
     }
-  }, [tabView, hasRevisionToDiff, data, isLoading, fetchedDataSuccessfully, diffElement]);
+  }, [viewMode, hasRevisionToDiff, data, isLoading, fetchedDataSuccessfully, diffElement]);
   return (
     <div>
       <div className="flex mb-3 p-2 border border-[#DCDDDF] flex-row items-center justify-between w-full bg-white rounded">
         <div className="flex items-center">
           <input
-            checked={tabView === "view"}
+            checked={viewMode === "view"}
             onChange={handleChanged}
             id="view"
             type="radio"
@@ -94,7 +96,7 @@ function RevisionDiff({ includeUserDefineOnly }: RevisionDiffProps) {
         </div>
         <div className="flex items-center">
           <input
-            checked={tabView === "diff-with-previous"}
+            checked={viewMode === "diff-with-previous"}
             onChange={handleChanged}
             id="diff-with-previous"
             type="radio"
@@ -111,7 +113,7 @@ function RevisionDiff({ includeUserDefineOnly }: RevisionDiffProps) {
         </div>
         <div className="flex items-center">
           <input
-            checked={tabView === "diff-with-specific-revision"}
+            checked={viewMode === "diff-with-specific-revision"}
             onChange={handleChanged}
             id="diff-with-specific-revision"
             type="radio"
@@ -152,7 +154,7 @@ function RevisionDiff({ includeUserDefineOnly }: RevisionDiffProps) {
         )}
       </div>
       {isLoading ? <Spinner /> : ''}
-      {tabView  === TAB_VIEW_VIEW_ONLY && content ? (
+      {viewMode  === VIEW_MODE_VIEW_ONLY && content ? (
         <div className="bg-white overflow-x-auto w-full relative">
           <pre className="bg-white rounded p-3">
                 {parse(content)}

dashboard/src/components/revision/RevisionsList.tsx

@@ -1,5 +1,7 @@
 import { BsArrowUpRight } from "react-icons/bs";
 import { useNavigate, useParams } from "react-router-dom";
+import useCustomSearchParams from '../../hooks/useCustomSearchParams'
+
 import { ReleaseRevision } from "../../data/types";
 import { getAge } from "../../timeUtils";
 import StatusLabel from "../common/StatusLabel";
@@ -14,12 +16,15 @@ export default function RevisionsList({
   selectedRevision,
 }: RevisionsListProps) {
   const navigate = useNavigate();
-  const { context, namespace, chart, tab } = useParams();
+  const { context, namespace, chart } = useParams();
+  const [searchParams] = useCustomSearchParams();
+  const {tab, mode} = searchParams;
   const changeRelease = (newRevision: number) => {
     navigate(
-      `/revision/${context}/${namespace}/${chart}/${newRevision}/${
-        tab ? tab : ""
-      }`
+      {
+        pathname: `/revision/${context}/${namespace}/${chart}/${newRevision}`,
+        search: `?${tab ? `tab=${tab}` : ''}${mode ? `&mode=${mode}` : ''}`,
+      }
     );
   };
   return (

dashboard/src/hooks/useCustomSearchParams.ts

@@ -0,0 +1,34 @@
+import { useSearchParams } from "react-router-dom";
+const VIEW_MODE_VIEW_ONLY = 'view';
+const VIEW_MODE_DIFF_PREV = 'diff-with-previous';
+const VIEW_MODE_DIFF_SPECIFIC = 'diff-with-specific-revision';
+
+enum Mode {
+    VIEW_MODE_VIEW_ONLY,
+    VIEW_MODE_DIFF_PREV,
+    VIEW_MODE_DIFF_SPECIFIC,
+}
+enum Tab {
+    'resources', 'manifests', 'values', 'notes'
+}
+type searchParamsTypes = {
+    mode: Mode;
+    tab: Tab;
+}
+
+const useCustomSearchParams = () => {
+    const [search, setSearch] = useSearchParams();
+    const searchAsObject : searchParamsTypes = Object.fromEntries(
+      new URLSearchParams(search)
+    );
+
+    const addSearchParam = (k : string, value : Mode | Tab) => {
+        const copySearchParams = new URLSearchParams(search)
+        copySearchParams.set(k, value);
+        setSearch(copySearchParams);
+    }
+
+    return [searchAsObject, setSearch, addSearchParam];
+  };
+
+  export default useCustomSearchParams;