Disable local storage in emebd (#7382)

Author: AdityaHegde

web-admin/src/features/embeds/ExploreEmbed.svelte

@@ -1,3 +1,7 @@
+<script context="module">
+  export let EmbedStorageNamespacePrefix = "__rill_embed";
+</script>
+
 <script lang="ts">
   import { Dashboard } from "@rilldata/web-common/features/dashboards";
   import DashboardThemeProvider from "@rilldata/web-common/features/dashboards/DashboardThemeProvider.svelte";
@@ -38,7 +42,11 @@
   {:else if data}
     {#key exploreName}
       <StateManagersProvider {exploreName} {metricsViewName}>
-        <DashboardStateManager {exploreName}>
+        <DashboardStateManager
+          {exploreName}
+          storageNamespacePrefix={EmbedStorageNamespacePrefix}
+          disableMostRecentDashboardState
+        >
           <DashboardThemeProvider>
             <Dashboard {exploreName} {metricsViewName} isEmbedded />
           </DashboardThemeProvider>

web-admin/src/routes/-/embed/+page.svelte

@@ -4,9 +4,12 @@
   import ContentContainer from "@rilldata/web-admin/components/layout/ContentContainer.svelte";
   import DashboardsTable from "@rilldata/web-admin/features/dashboards/listing/DashboardsTable.svelte";
   import CanvasEmbed from "@rilldata/web-admin/features/embeds/CanvasEmbed.svelte";
-  import ExploreEmbed from "@rilldata/web-admin/features/embeds/ExploreEmbed.svelte";
+  import ExploreEmbed, {
+    EmbedStorageNamespacePrefix,
+  } from "@rilldata/web-admin/features/embeds/ExploreEmbed.svelte";
   import TopNavigationBarEmbed from "@rilldata/web-admin/features/embeds/TopNavigationBarEmbed.svelte";
   import UnsupportedKind from "@rilldata/web-admin/features/embeds/UnsupportedKind.svelte";
+  import { clearExploreSessionStore } from "@rilldata/web-common/features/dashboards/state-managers/loaders/explore-web-view-store";
   import { ResourceKind } from "@rilldata/web-common/features/entity-management/resource-selectors";
   import { featureFlags } from "@rilldata/web-common/features/feature-flags";
   import type { V1ResourceName } from "@rilldata/web-common/runtime-client";
@@ -27,6 +30,7 @@
   // Manage active resource
   let activeResource: V1ResourceName | null = null;
   $: if (resourceName && resourceType) {
+    cleanSessionStorageForResource(resourceType, resourceName);
     activeResource = {
       name: resourceName,
       kind: resourceType,
@@ -39,6 +43,18 @@
     // TODO: move to a route based approach to avoid this issues.
   }
 
+  const resourcesSeen = new Set<string>();
+  // Clean session storage for dashboards that are navigated to for the 1st time.
+  // This way once the page is loaded, the dashboard state is persisted.
+  // But the moment the user moves away to another page within the parent page, then it will be cleared next time the user comes back to the dashboard.
+  function cleanSessionStorageForResource(type: string, name: string) {
+    if (type !== ResourceKind.Explore.toString()) return;
+
+    if (resourcesSeen.has(name)) return;
+    clearExploreSessionStore(name, EmbedStorageNamespacePrefix);
+    resourcesSeen.add(name);
+  }
+
   function handleSelectResource(event: CustomEvent<V1ResourceName>) {
     const newUrl = new URL($page.url);
     newUrl.search = `resource=${event.detail.name}&type=${event.detail.kind}`;

web-common/src/features/dashboards/state-managers/loaders/DashboardStateDataLoader.ts

@@ -58,7 +58,10 @@ export class DashboardStateDataLoader {
     instanceId: string,
     private readonly exploreName: string,
     private readonly storageNamespacePrefix: string | undefined,
-    private readonly bookmarkOrTokenExploreState?: CompoundQueryResult<Partial<ExploreState> | null>,
+    private readonly bookmarkOrTokenExploreState:
+      | CompoundQueryResult<Partial<ExploreState> | null>
+      | undefined,
+    public readonly disableMostRecentDashboardState: boolean,
   ) {
     this.validSpecQuery = useExploreValidSpec(instanceId, exploreName);
     this.fullTimeRangeQuery = this.useFullTimeRangeQuery(
@@ -334,7 +337,9 @@ export class DashboardStateDataLoader {
       exploreStateFromSessionStorage ??
         (urlSearchParams.size > 0 ? partialExploreStateFromUrl : null),
       // Next priority is the most recent state user had visited. This is a small subset of the full state.
-      shouldSkipOtherSources ? null : mostRecentPartialExploreState,
+      shouldSkipOtherSources || this.disableMostRecentDashboardState
+        ? null
+        : mostRecentPartialExploreState,
       // Next priority is one of the other source defined.
       // For cloud dashboard it would be home bookmark if present.
       // For shared url it would be the saved state in token

web-common/src/features/dashboards/state-managers/loaders/DashboardStateManager.svelte

@@ -17,6 +17,7 @@
   export let bookmarkOrTokenExploreState:
     | CompoundQueryResult<Partial<ExploreState> | null>
     | undefined = undefined;
+  export let disableMostRecentDashboardState: boolean = false;
 
   $: ({ instanceId } = $runtime);
   $: exploreSpecQuery = useExploreValidSpec(instanceId, exploreName);
@@ -29,6 +30,7 @@
     exploreName,
     storageNamespacePrefix,
     bookmarkOrTokenExploreState,
+    disableMostRecentDashboardState,
   );
 
   let stateSync: DashboardStateSync | undefined;

web-common/src/features/dashboards/state-managers/loaders/DashboardStateSync.ts

@@ -122,12 +122,14 @@ export class DashboardStateSync {
       exploreSpec,
       timeControlsState,
     );
-    // Update "most recent explore state" with the initial state
-    saveMostRecentPartialExploreState(
-      this.exploreName,
-      this.extraPrefix,
-      initExploreState,
-    );
+    if (!this.dataLoader.disableMostRecentDashboardState) {
+      // Update "most recent explore state" with the initial state
+      saveMostRecentPartialExploreState(
+        this.exploreName,
+        this.extraPrefix,
+        initExploreState,
+      );
+    }
 
     // If the current url same as the new url then there is no need to do anything
     if (redirectUrl.search === pageState.url.search) {
@@ -208,12 +210,14 @@ export class DashboardStateSync {
       exploreSpec,
       timeControlsState,
     );
-    // Update "most recent explore state" with updated state from url
-    saveMostRecentPartialExploreState(
-      this.exploreName,
-      this.extraPrefix,
-      updatedExploreState,
-    );
+    if (!this.dataLoader.disableMostRecentDashboardState) {
+      // Update "most recent explore state" with updated state from url
+      saveMostRecentPartialExploreState(
+        this.exploreName,
+        this.extraPrefix,
+        updatedExploreState,
+      );
+    }
 
     this.updating = false;
     // If the url doesn't need to be changed further then we can skip the goto
@@ -271,13 +275,15 @@ export class DashboardStateSync {
       exploreSpec,
       timeControlsState,
     );
-    // Update "most recent explore state" with updated state.
-    // Since we do not update the state per action we do it here as blanket update.
-    saveMostRecentPartialExploreState(
-      this.exploreName,
-      this.extraPrefix,
-      exploreState,
-    );
+    if (!this.dataLoader.disableMostRecentDashboardState) {
+      // Update "most recent explore state" with updated state.
+      // Since we do not update the state per action we do it here as blanket update.
+      saveMostRecentPartialExploreState(
+        this.exploreName,
+        this.extraPrefix,
+        exploreState,
+      );
+    }
 
     this.updating = false;
     // If the state didnt result in a new url then skip goto.