feat: Open Subtree section if highlighted is active or if it is the o…

…nly section when PT opened
csaf-poc · Nov 28, 2023 · 2e61f41 · 2e61f41
1 parent f5b416d
commit 2e61f41
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 5 deletions.
diff --git a/src/lib/singleview/SingleView.svelte b/src/lib/singleview/SingleView.svelte
@@ -66,12 +66,13 @@
     <Collapsible
       header="Product tree"
       onOpen={() => {
-        appStore.setProductTreeSectionVisible();
+        appStore.setProductTreeOpen();
       }}
       open={$appStore.ui.isProductTreeVisible}
       onClose={() => {
         appStore.setProductTreeSectionInVisible();
         appStore.resetSelectedProduct();
+        appStore.setProductTreeClosed();
       }}
     >
       <ProductTree />

diff --git a/src/lib/singleview/producttree/ProductTree.svelte b/src/lib/singleview/producttree/ProductTree.svelte
@@ -19,26 +19,62 @@
 
 {#if $appStore.doc?.productTree.branches}
   {#each $appStore.doc?.productTree.branches as branch}
-    <Collapsible header="Branches" open={$appStore.ui.isProductTreeVisible}>
+    <Collapsible
+      header="Branches"
+      open={$appStore.ui.isProductTreeVisible ||
+        ($appStore.ui.isProductTreeOpen &&
+          !(
+            $appStore.doc?.productTree.relationships &&
+            $appStore.doc?.productTree.product_groups &&
+            $appStore.doc?.productTree.full_product_names
+          ))}
+    >
       <Branch {branch} />
     </Collapsible>
   {/each}
 {/if}
 
 {#if $appStore.doc?.productTree.relationships}
-  <Collapsible header="Relationships" open={$appStore.ui.isProductTreeVisible}>
+  <Collapsible
+    header="Relationships"
+    open={$appStore.ui.isProductTreeVisible ||
+      ($appStore.ui.isProductTreeOpen &&
+        !(
+          $appStore.doc?.productTree.branches &&
+          $appStore.doc?.productTree.product_groups &&
+          $appStore.doc?.productTree.full_product_names
+        ))}
+  >
     <Relationships relationships={$appStore.doc?.productTree.relationships} />
   </Collapsible>
 {/if}
 
 {#if $appStore.doc?.productTree.product_groups}
-  <Collapsible header="Product groups" open={$appStore.ui.isProductTreeVisible}>
+  <Collapsible
+    header="Product groups"
+    open={$appStore.ui.isProductTreeVisible ||
+      ($appStore.ui.isProductTreeOpen &&
+        !(
+          $appStore.doc?.productTree.branches &&
+          $appStore.doc?.productTree.relationships &&
+          $appStore.doc?.productTree.full_product_names
+        ))}
+  >
     <ProductGroups productGroups={$appStore.doc?.productTree.product_groups} />
   </Collapsible>
 {/if}
 
 {#if $appStore.doc?.productTree.full_product_names}
-  <Collapsible header="Full Product Names" open={$appStore.ui.isProductTreeVisible}>
+  <Collapsible
+    header="Full Product Names"
+    open={$appStore.ui.isProductTreeVisible ||
+      ($appStore.ui.isProductTreeOpen &&
+        !(
+          $appStore.doc?.productTree.branches &&
+          $appStore.doc?.productTree.relationships &&
+          $appStore.doc?.productTree.product_groups
+        ))}
+  >
     <ProductNames productNames={$appStore.doc?.productTree.full_product_names} />
   </Collapsible>
 {/if}
diff --git a/src/lib/store.ts b/src/lib/store.ts
@@ -27,6 +27,7 @@ type AppStore = {
     isRevisionHistoryVisible: boolean;
     isVulnerabilitiesOverviewVisible: boolean;
     isVulnerabilitiesSectionVisible: boolean;
+    isProductTreeOpen: boolean;
     isProductTreeVisible: boolean;
     isFeedSectionOpen: boolean;
     lastFeed: string;
@@ -62,6 +63,7 @@ const generateInitialState = (): AppStore => {
       isRevisionHistoryVisible: false,
       isVulnerabilitiesOverviewVisible: true,
       isVulnerabilitiesSectionVisible: false,
+      isProductTreeOpen: false,
       isProductTreeVisible: false,
       isFeedSectionOpen: false,
       lastFeed: "",
@@ -257,6 +259,18 @@ function createStore() {
         return settings;
       });
     },
+    setProductTreeOpen: () => {
+      update((settings) => {
+        settings.ui.isProductTreeOpen = true;
+        return settings;
+      });
+    },
+    setProductTreeClosed: () => {
+      update((settings) => {
+        settings.ui.isProductTreeOpen = false;
+        return settings;
+      });
+    },
     setProductTreeSectionVisible: () => {
       update((settings) => {
         settings.ui.isProductTreeVisible = true;