add user defined (#405)

komodorio · Jun 28, 2023 · 10c9516 · 10c9516
1 parent 5c7aa58
commit 10c9516
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 33 deletions.
diff --git a/dashboard/src/components/Tabs.tsx b/dashboard/src/components/Tabs.tsx
@@ -21,8 +21,8 @@ export default function Tabs({
 
   const navigate = useNavigate();
   const {context, namespace, chart, revision} = useParams();
-  const [searchParams, setSearchParams, addSearchParam] = useCustomSearchParams();
-
+  const {searchParamsObject: searchParams, addSearchParam} = useCustomSearchParams();
+  
   const moveTab = (tab : Tab) => {
     addSearchParam('tab', tab.value)
   }

diff --git a/dashboard/src/components/revision/RevisionDiff.tsx b/dashboard/src/components/revision/RevisionDiff.tsx
@@ -19,28 +19,42 @@ const VIEW_MODE_DIFF_SPECIFIC = 'diff-with-specific-revision';
 
 function RevisionDiff({ includeUserDefineOnly }: RevisionDiffProps) {
   const [specificVersion, setSpecificVersion] = useState("1");
-  const [searchParams, setSearchParams, addSearchParam] = useCustomSearchParams();
-  const {tab, mode: viewMode = VIEW_MODE_VIEW_ONLY} = searchParams;
+  const {searchParamsObject: searchParams, addSearchParam, removeSearchParam} = useCustomSearchParams();
+  const {tab, mode: viewMode = VIEW_MODE_VIEW_ONLY, 'user-defined': userDefinedValue} = searchParams;
 
   const diffElement = useRef<HTMLElement>({});
 
   const handleChanged = (e: ChangeEvent<HTMLInputElement>) => {
     addSearchParam('mode', e.target.value);
   };
+
+  const handleUserDefinedCheckbox = (e: ChangeEvent<HTMLInputElement>) => {
+    if (e.target.checked) {
+      addSearchParam('user-defined', `${e.target.checked}`);
+    } else {
+      removeSearchParam('user-defined')
+    }
+  };
   const params = useParams();
   const revisionInt = parseInt(params.revision || '', 10)
   const hasMultipleRevisions = revisionInt > 1;
 
   const additionalParams = useMemo(() => {
-      if (viewMode === VIEW_MODE_DIFF_PREV && hasMultipleRevisions) {
-        return `&revisionDiff=${revisionInt - 1}`
-      }
-      const specificRevisionInt = parseInt(specificVersion || '', 10);
-      if (viewMode === VIEW_MODE_DIFF_SPECIFIC && hasMultipleRevisions && !Number.isNaN(specificRevisionInt)) {
-        return `&revisionDiff=${specificVersion}`
-      }
-  }, [viewMode, specificVersion, revisionInt, hasMultipleRevisions]);
-
+    let additionalParamStr = ''
+    console.log(userDefinedValue)
+    if (!!userDefinedValue) {
+      additionalParamStr += '&userDefined=true'
+    }
+    if (viewMode === VIEW_MODE_DIFF_PREV && hasMultipleRevisions) {
+      additionalParamStr += `&revisionDiff=${revisionInt - 1}`
+    }
+    const specificRevisionInt = parseInt(specificVersion || '', 10);
+    if (viewMode === VIEW_MODE_DIFF_SPECIFIC && hasMultipleRevisions && !Number.isNaN(specificRevisionInt)) {
+      additionalParamStr += `&revisionDiff=${specificVersion}`
+    }
+    return additionalParamStr;
+  }, [viewMode, userDefinedValue, specificVersion, revisionInt, hasMultipleRevisions]);
+  console.log(additionalParams)
   const hasRevisionToDiff = !!additionalParams;
 
   const {data, isLoading, isSuccess: fetchedDataSuccessfully} = useGetReleaseInfoByType({...params, tab}, additionalParams);
@@ -49,6 +63,9 @@ function RevisionDiff({ includeUserDefineOnly }: RevisionDiffProps) {
     if (data && !isLoading && (viewMode === VIEW_MODE_VIEW_ONLY || !hasRevisionToDiff)) {  
       return hljs.highlight(data, { language: "yaml" }).value;
     }
+    if (fetchedDataSuccessfully && !data && viewMode === VIEW_MODE_VIEW_ONLY) {
+      return "No value to display";
+    }
     return '';
   }, [data, viewMode, isLoading]);
 
@@ -74,6 +91,7 @@ function RevisionDiff({ includeUserDefineOnly }: RevisionDiffProps) {
 
     }
   }, [viewMode, hasRevisionToDiff, data, isLoading, fetchedDataSuccessfully, diffElement]);
+  console.log(userDefinedValue)
   return (
     <div>
       <div className="flex mb-3 p-2 border border-[#DCDDDF] flex-row items-center justify-between w-full bg-white rounded">
@@ -141,7 +159,8 @@ function RevisionDiff({ includeUserDefineOnly }: RevisionDiffProps) {
             <input
               id="user-define-only-checkbox"
               type="checkbox"
-              value=""
+              onChange={handleUserDefinedCheckbox}
+              checked={!!userDefinedValue}
               className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
             />
             <label
@@ -155,8 +174,8 @@ function RevisionDiff({ includeUserDefineOnly }: RevisionDiffProps) {
       </div>
       {isLoading ? <Spinner /> : ''}
       {viewMode  === VIEW_MODE_VIEW_ONLY && content ? (
-        <div className="bg-white overflow-x-auto w-full relative">
-          <pre className="bg-white rounded p-3">
+        <div className="bg-white overflow-x-auto w-full p-3 relative">
+          <pre className="bg-white rounded">
                 {parse(content)}
           </pre>  
         </div>

diff --git a/dashboard/src/components/revision/RevisionsList.tsx b/dashboard/src/components/revision/RevisionsList.tsx
@@ -17,7 +17,7 @@ export default function RevisionsList({
 }: RevisionsListProps) {
   const navigate = useNavigate();
   const { context, namespace, chart } = useParams();
-  const [searchParams] = useCustomSearchParams();
+  const {searchParamsObject: searchParams} = useCustomSearchParams();
   const {tab, mode} = searchParams;
   const changeRelease = (newRevision: number) => {
     navigate(

diff --git a/dashboard/src/hooks/useCustomSearchParams.ts b/dashboard/src/hooks/useCustomSearchParams.ts
@@ -3,32 +3,24 @@ 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(
+    const searchAsObject : object = Object.fromEntries(
       new URLSearchParams(search)
     );
 
-    const addSearchParam = (k : string, value : Mode | Tab) => {
+    const addSearchParam = (k : string, value : string) => {
         const copySearchParams = new URLSearchParams(search)
         copySearchParams.set(k, value);
         setSearch(copySearchParams);
     }
+    const removeSearchParam = (k : string) => {
+        const copySearchParams = new URLSearchParams(search)
+        copySearchParams.delete(k);
+        setSearch(copySearchParams);
+    }
 
-    return [searchAsObject, setSearch, addSearchParam];
+    return {searchParamsObject: searchAsObject, setSearchParams: setSearch, addSearchParam, removeSearchParam};
   };
 
   export default useCustomSearchParams;