feat: Feedview can expand major sections too

csaf-poc · Nov 9, 2023 · 4870bfb · 4870bfb
1 parent 3b2259e
commit 4870bfb
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 9 deletions.
diff --git a/src/lib/ExpandAll.svelte b/src/lib/ExpandAll.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <input id="expandall" bind:checked type="checkbox" />
-<label for="expandall" class="expandall">Expand all sections</label>
+<label for="expandall" class="expandall">Expand sections</label>
 
 <style>
   .expandall {

diff --git a/src/lib/feedview/FeedView.svelte b/src/lib/feedview/FeedView.svelte
@@ -14,9 +14,29 @@
   import Feed from "./feed/Feed.svelte";
   import Loader from "./Loader.svelte";
   import Overview from "./feed/Overview.svelte";
+  import ExpandAll from "$lib/ExpandAll.svelte";
+  let expand: boolean;
+  $: if (expand) {
+    if ($appStore.providerMetadata) {
+      appStore.setFeedGeneralSectionOpen();
+      appStore.setFeedPublicPGPSectionOpen();
+      appStore.setFeedDistributionOpen();
+    }
+    appStore.setFeedSectionOpen();
+  } else {
+    if (expand !== undefined && $appStore.providerMetadata) {
+      appStore.setFeedGeneralSectionClosed();
+      appStore.setFeedPublicPGPSectionClosed();
+      appStore.setFeedDistributionClosed();
+    }
+    if (expand !== undefined) appStore.setFeedSectionClosed();
+  }
 </script>
 
 <Loader />
+{#if $appStore.providerMetadata}
+  <ExpandAll bind:checked={expand} />
+{/if}
 <Overview />
 {#if $appStore.currentFeed}
   <Collapsible

diff --git a/src/lib/feedview/feed/Overview.svelte b/src/lib/feedview/feed/Overview.svelte
@@ -17,15 +17,19 @@
 </script>
 
 {#if $appStore.providerMetadata}
-  <Collapsible header="General information" level="2" open={true}>
+  <Collapsible header="General information" level="2" open={$appStore.ui.isFeedGeneralSectionOpen}>
     <GeneralInformation />
   </Collapsible>
-  <Collapsible header="Public OpenPGP keys" level="2">
+  <Collapsible
+    header="Public OpenPGP keys"
+    level="2"
+    open={$appStore.ui.isFeedPublicPGPSectionOpen}
+  >
     {#each $appStore.providerMetadata["public_openpgp_keys"] as key}
       <KeyValue keys={["fingerprint", "url"]} values={[key.fingerprint, key.url]} />
     {/each}
   </Collapsible>
-  <Collapsible header="Distributions" level="2" open={true}>
+  <Collapsible header="Distributions" level="2" open={$appStore.ui.isFeedDistributionOpen}>
     <Distributions />
   </Collapsible>
 {/if}
diff --git a/src/lib/feedview/feed/distributions/Distribution.svelte b/src/lib/feedview/feed/distributions/Distribution.svelte
@@ -27,11 +27,13 @@
     <div class="entry">
       <table>
         <tbody>
-          <tr
-            ><td class="key">Summary</td><td class="value"
-              ><span class="header">{feed.summary}</span></td
-            ></tr
-          >
+          {#if feed.summary}
+            <tr
+              ><td class="key">Summary</td><td class="value"
+                ><span class="header">{feed.summary}</span></td
+              ></tr
+            >
+          {/if}
           <tr
             ><td class="key">TLP-Label</td><td class="value"
               ><span

diff --git a/src/lib/store.ts b/src/lib/store.ts
@@ -20,6 +20,9 @@ type AppStore = {
     feedErrorMsg: string;
     feedLoading: boolean;
     singleErrorMsg: string;
+    isFeedDistributionOpen: boolean;
+    isFeedGeneralSectionOpen: boolean;
+    isFeedPublicPGPSectionOpen: boolean;
     isGeneralSectionVisible: boolean;
     isRevisionHistoryVisible: boolean;
     isVulnerabilitiesOverviewVisible: boolean;
@@ -52,6 +55,9 @@ const generateInitialState = (): AppStore => {
       feedErrorMsg: "",
       feedLoading: false,
       singleErrorMsg: "",
+      isFeedDistributionOpen: true,
+      isFeedGeneralSectionOpen: true,
+      isFeedPublicPGPSectionOpen: false,
       isGeneralSectionVisible: true,
       isRevisionHistoryVisible: false,
       isVulnerabilitiesOverviewVisible: false,
@@ -179,6 +185,42 @@ function createStore() {
         return settings;
       });
     },
+    setFeedDistributionOpen: () => {
+      update((settings) => {
+        settings.ui.isFeedDistributionOpen = true;
+        return settings;
+      });
+    },
+    setFeedDistributionClosed: () => {
+      update((settings) => {
+        settings.ui.isFeedDistributionOpen = false;
+        return settings;
+      });
+    },
+    setFeedGeneralSectionOpen: () => {
+      update((settings) => {
+        settings.ui.isFeedGeneralSectionOpen = true;
+        return settings;
+      });
+    },
+    setFeedGeneralSectionClosed: () => {
+      update((settings) => {
+        settings.ui.isFeedGeneralSectionOpen = false;
+        return settings;
+      });
+    },
+    setFeedPublicPGPSectionOpen: () => {
+      update((settings) => {
+        settings.ui.isFeedPublicPGPSectionOpen = true;
+        return settings;
+      });
+    },
+    setFeedPublicPGPSectionClosed: () => {
+      update((settings) => {
+        settings.ui.isFeedPublicPGPSectionOpen = false;
+        return settings;
+      });
+    },
     setGeneralSectionVisible: () => {
       update((settings) => {
         settings.ui.isGeneralSectionVisible = true;