Tree json collapse all (#3684)

# Motivation Add collapse all functionality to json tree view. - [x] Related pr #3692 # Changes - removed unused var `_collapsed` - add collapse all button # Tests ![Screen Recording 2023-11-07 at 09 36 19](https://github.com/dfinity/nns-dapp/assets/98811342/5c75d3e2-559e-4d5e-8b8b-4ae536f017d0) # Todos - [x] Add entry to changelog (if necessary).
dfinity · Nov 8, 2023 · ca96e75 · ca96e75
1 parent d831865
commit ca96e75
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 20 deletions.
diff --git a/CHANGELOG-Nns-Dapp-unreleased.md b/CHANGELOG-Nns-Dapp-unreleased.md
@@ -20,6 +20,7 @@ proposal is successful, the changes it released will be moved from this file to
 * Show the maximum participation of the Neurons' Fund when present.
 * A list of exceptional (not-rendered, zero value) transactions.
 * Add a link to the ICP Dashboard in the project detail page.
+* Add collapse-all functionality to json tree view.
 
 #### Changed
 

diff --git a/frontend/src/lib/components/common/JsonPreview.svelte b/frontend/src/lib/components/common/JsonPreview.svelte
@@ -2,39 +2,54 @@
   import { i18n } from "$lib/stores/i18n";
   import { expandObject, getObjMaxDepth } from "$lib/utils/utils";
   import { isNullish } from "@dfinity/utils";
-  import { IconExpandAll } from "@dfinity/gix-components";
+  import { IconCollapseAll, IconExpandAll } from "@dfinity/gix-components";
   import TreeJson from "$lib/components/common/TreeJson.svelte";
   import RawJson from "$lib/components/common/RawJson.svelte";
   import { fade } from "svelte/transition";
   import { jsonRepresentationModeStore } from "$lib/derived/json-representation.derived";
 
+  const DEFAULT_EXPANDED_LEVEL = 1;
+
   export let json: unknown | undefined = undefined;
 
   let expandedData: unknown;
   $: expandedData = isNullish(json)
     ? json
     : expandObject(json as Record<string, unknown>);
 
-  const DEFAULT_EXPANDED_LEVEL = 1;
-  let expandAll = false;
-  $: expandAll =
-    getObjMaxDepth(expandedData) <= DEFAULT_EXPANDED_LEVEL ? true : expandAll;
-  const toggleExpanded = () => (expandAll = !expandAll);
+  let isExpandedAllVisible = false;
+  $: isExpandedAllVisible =
+    getObjMaxDepth(expandedData) > DEFAULT_EXPANDED_LEVEL;
+
+  let isAllExpanded: boolean | undefined = undefined;
+  const toggleExpanded = () => {
+    isAllExpanded = !isAllExpanded;
+  };
 </script>
 
 <div class="content-cell-island markdown-container">
   {#if $jsonRepresentationModeStore === "tree"}
     <div class="json" data-tid="json-wrapper" in:fade>
-      {#if !expandAll}
-        <button class="ghost expand-all" on:click={toggleExpanded}
-          ><IconExpandAll /><span class="expand-all-label"
-            >{$i18n.core.expand_all}</span
-          ></button
-        >
+      {#if isExpandedAllVisible}
+        <button class="ghost expand-all" on:click={toggleExpanded}>
+          {#if isAllExpanded}
+            <div in:fade>
+              <IconCollapseAll />
+              <span class="expand-all-label">{$i18n.core.collapse_all}</span>
+            </div>
+          {:else}
+            <div in:fade>
+              <IconExpandAll />
+              <span class="expand-all-label">{$i18n.core.expand_all}</span>
+            </div>
+          {/if}
+        </button>
       {/if}
       <TreeJson
         json={expandedData}
-        defaultExpandedLevel={expandAll ? Number.MAX_SAFE_INTEGER : 1}
+        defaultExpandedLevel={isAllExpanded
+          ? Number.MAX_SAFE_INTEGER
+          : DEFAULT_EXPANDED_LEVEL}
       />
     </div>
   {:else}
@@ -53,9 +68,11 @@
     right: var(--padding-0_5x);
     top: var(--padding-0_5x);
 
-    display: flex;
-    align-items: center;
-    gap: var(--padding-0_5x);
+    div {
+      display: flex;
+      align-items: center;
+      gap: var(--padding-0_5x);
+    }
 
     .expand-all-label {
       display: none;

diff --git a/frontend/src/lib/components/common/TreeJson.svelte b/frontend/src/lib/components/common/TreeJson.svelte
@@ -9,7 +9,6 @@
   export let defaultExpandedLevel = Infinity;
   export let _key: string | undefined = undefined;
   export let _level = 0;
-  export let _collapsed: boolean | undefined = undefined;
 
   let keyLabel: string;
   let children: [string, unknown][];
@@ -34,8 +33,7 @@
   }
 
   let collapsed = true;
-  $: collapsed =
-    _collapsed === undefined ? _level >= defaultExpandedLevel : _collapsed;
+  $: collapsed = _level >= defaultExpandedLevel;
 
   let keyIsIndex = false;
   $: keyIsIndex = !isNaN(Number(_key));

diff --git a/frontend/src/lib/i18n/en.json b/frontend/src/lib/i18n/en.json
@@ -31,7 +31,8 @@
     "do_not_close": "Please do not close your browser tab",
     "finish": "Finish",
     "unknown": "Unknown",
-    "expand_all": "Expand All"
+    "expand_all": "Expand All",
+    "collapse_all": "Collapse All"
   },
   "error": {
     "auth_sync": "There was an unexpected issue while syncing the status of your authentication. Try to refresh your browser.",

diff --git a/frontend/src/lib/types/i18n.d.ts b/frontend/src/lib/types/i18n.d.ts
@@ -35,6 +35,7 @@ interface I18nCore {
   finish: string;
   unknown: string;
   expand_all: string;
+  collapse_all: string;
 }
 
 interface I18nError {