Refactor code and set current tab

packages/common/src/index.ts

@@ -48,6 +48,7 @@ export { default as getLegendDescription } from './utils/getLegendDescription';
 export { default as extractCookies } from './utils/extractCookies';
 export { default as extractReportData } from './utils/extractReportData';
 export { default as reshapeCookies } from './utils/reshapeCookies';
+export * from './utils/sessionStorage';
 export * from './worker/enums';
 export * from './utils/generateReports';
 export * from './cookies.types';

packages/common/src/utils/sessionStorage.ts

@@ -0,0 +1,91 @@
+/*
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export type SessionData = Record<string, unknown> | undefined;
+
+/**
+ * Updates session storage for the current tab with the given items.
+ * The items are stored under a key format: `{tabId}-{name}-{key}`.
+ * @param {SessionData} items - The session data to be stored.
+ * @param {string} name - A namespace to distinguish different storage sets (e.g., "persistentSetting").
+ * @returns {Promise<SessionData>} - The updated session data.
+ */
+export const updateSessionStorage = async (
+  items: SessionData,
+  name: string
+): Promise<SessionData> => {
+  const tabId = chrome.devtools.inspectedWindow.tabId;
+
+  if (!tabId) {
+    return {};
+  }
+
+  const data = (await chrome.storage.session.get()) || {};
+
+  let updatedData: SessionData = undefined;
+
+  if (items) {
+    // Merge new items with tab-specific keys
+    updatedData = {
+      ...data,
+      ...Object.fromEntries(
+        Object.entries(items).map(([key, value]) => [
+          `${tabId}-${name}-${key}`,
+          value,
+        ])
+      ),
+    };
+
+    await chrome.storage.session.set(updatedData);
+  }
+
+  return updatedData || data;
+};
+
+/**
+ * Retrieves session storage for the current tab, grouping stored data by tab ID.
+ * The function filters data based on the provided name (namespace).
+ * @param {string} name - A namespace to filter session storage keys (e.g., "persistentSetting").
+ * @returns {Promise<Record<string, any>>} - The session data grouped under the current tab ID.
+ */
+export const getSessionStorage = async (
+  name: string
+): Promise<Record<string, any>> => {
+  const data = (await chrome.storage.session.get()) || {};
+
+  const groupedData: Record<string, any> = {};
+
+  Object.entries(data).forEach(([key, value]) => {
+    const match = key.match(new RegExp(`^(\\d+)-${name}-(.+)$`)); // Extract tab ID dynamically
+
+    if (match) {
+      const tabId = match[1]; // Get tab ID
+      const originalKey = match[2]; // Extract the actual key
+
+      if (!groupedData[tabId]) {
+        groupedData[tabId] = {};
+      }
+      groupedData[tabId][originalKey] = value;
+    } else {
+      // Global data (not associated with any tab)
+      groupedData[key] = value;
+    }
+  });
+
+  const tabId = chrome.devtools.inspectedWindow.tabId;
+
+  return groupedData[tabId];
+};

packages/design-system/src/components/tabs/useTabs/provider.tsx

@@ -23,6 +23,7 @@ import React, {
   useMemo,
   useState,
 } from 'react';
+import { getSessionStorage, updateSessionStorage } from '@google-psat/common';
 
 /**
  * Internal dependencies.
@@ -33,13 +34,35 @@ import { TabsContext } from './context';
 export const TabsProvider = ({
   children,
   items,
+  name,
 }: PropsWithChildren<TabsProviderProps>) => {
   const [tabItems, setTabItems] = useState(items);
   const [activeTab, setActiveTab] = useState(0);
   const [storage, _setStorage] = useState<string[]>(
     Array(items.length).fill('')
   );
 
+  useEffect(() => {
+    (async () => {
+      const settings = await getSessionStorage('persistentSettingsTabs');
+
+      if (settings && settings[name]) {
+        setActiveTab(settings[name]);
+      }
+    })();
+  }, [name]);
+
+  useEffect(() => {
+    (async () => {
+      await updateSessionStorage(
+        {
+          [name]: activeTab,
+        },
+        'persistentSettingsTabs'
+      );
+    })();
+  }, [activeTab, name]);
+
   useEffect(() => {
     setTabItems(items);
     _setStorage(Array(items.length).fill(''));

packages/design-system/src/components/tabs/useTabs/types.ts

@@ -16,6 +16,7 @@
 export type TabsProviderProps = {
   children: React.ReactNode;
   items: TabItems;
+  name: string;
 };
 
 export type TabItems = Array<{

packages/extension/src/view/devtools/app.tsx

@@ -23,6 +23,7 @@ import {
   SidebarProvider,
 } from '@google-psat/design-system';
 import { I18n } from '@google-psat/i18n';
+import { getSessionStorage } from '@google-psat/common';
 
 /**
  * Internal dependencies.
@@ -31,7 +32,6 @@ import TABS, { collapsedSidebarData } from './tabs';
 import './app.css';
 import { Layout } from './components';
 import useContextInvalidated from './hooks/useContextInvalidated';
-import { getSessionStorage } from '../../utils/sessionStorage';
 
 const App: React.FC = () => {
   const [sidebarData, setSidebarData] = useState(TABS);

packages/extension/src/view/devtools/components/layout.tsx

@@ -24,7 +24,10 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { type CookieTableData } from '@google-psat/common';
+import {
+  type CookieTableData,
+  updateSessionStorage,
+} from '@google-psat/common';
 import {
   Sidebar,
   useSidebar,
@@ -49,7 +52,6 @@ import {
   useProtectedAudience,
   useSettings,
 } from '../stateProviders';
-import { updateSessionStorage } from '../../../utils/sessionStorage';
 
 interface LayoutProps {
   setSidebarData: React.Dispatch<React.SetStateAction<SidebarItems>>;

packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/explorableExplanation/index.tsx

@@ -256,7 +256,7 @@ const ExplorableExplanation = () => {
   );
 
   return (
-    <TabsProvider items={tabItems}>
+    <TabsProvider items={tabItems} name="explorableExplanation">
       <Panel
         currentSiteData={currentSiteData}
         setCurrentSite={_setCurrentSiteData}

packages/extension/src/view/devtools/components/privateAdvertising/protectedAudience/index.tsx

@@ -99,7 +99,7 @@ const ProtectedAudience = () => {
   );
 
   return (
-    <TabsProvider items={tabItems}>
+    <TabsProvider items={tabItems} name="protectedAudience">
       <Panel />
     </TabsProvider>
   );

packages/extension/src/view/devtools/components/privateAdvertising/topics/explorableExplanation/index.tsx

@@ -74,7 +74,7 @@ const ExplorableExplanation = () => {
   );
 
   return (
-    <TabsProvider items={tabItems}>
+    <TabsProvider items={tabItems} name="topics-ee">
       <Panel
         topicsTableData={topicsTableData}
         setTopicsTableData={setTopicsTableData}

packages/extension/src/view/devtools/components/privateAdvertising/topics/index.tsx

@@ -94,7 +94,7 @@ const Topics = () => {
   );
 
   return (
-    <TabsProvider items={tabItems}>
+    <TabsProvider items={tabItems} name="topics">
       <Panel />
     </TabsProvider>
   );

packages/extension/src/view/devtools/components/siteBoundaries/relatedWebsiteSets/index.tsx

@@ -60,7 +60,7 @@ const RelatedWebsiteSets = () => {
   );
 
   return (
-    <TabsProvider items={tabItems}>
+    <TabsProvider items={tabItems} name="relatedWebsiteSets">
       <Panel />
     </TabsProvider>
   );