Fix: Add provider to allowed list (#551)

* ref: convert allowed list hook to context provider

* ref: use allowed list context provider instead of hook and update paths

packages/extension/src/view/devtools/components/cookies/cookiesListing/index.tsx

@@ -30,8 +30,8 @@ import { CookieDetails, CookieTable } from '@ps-analysis-tool/design-system';
 import { useCookieStore } from '../../../stateProviders/syncCookieStore';
 import useCookieListing from './useCookieListing';
 import RowContextMenu from './rowContextMenu';
-import useAllowedList from './useAllowedList';
 import { useSettingsStore } from '../../../stateProviders/syncSettingsStore';
+import { useAllowedList } from '../../../stateProviders/useAllowedList';
 
 interface CookiesListingProps {
   setFilteredCookies: React.Dispatch<CookieTableData[]>;
@@ -47,7 +47,11 @@ const CookiesListing = ({ setFilteredCookies }: CookiesListingProps) => {
   const isUsingCDP = useSettingsStore(({ state }) => state.isUsingCDP);
 
   const { domainsInAllowList, setDomainsInAllowListCallback, isIncognito } =
-    useAllowedList();
+    useAllowedList(({ state, actions }) => ({
+      domainsInAllowList: state.domainsInAllowList,
+      setDomainsInAllowListCallback: actions.setDomainsInAllowListCallback,
+      isIncognito: state.isIncognito,
+    }));
 
   const {
     tableData,

packages/extension/src/view/devtools/components/cookies/cookiesListing/rowContextMenu.tsx

@@ -31,18 +31,18 @@ import type { TableRow } from '@ps-analysis-tool/design-system';
 /**
  * Internal dependencies
  */
-import setParentDomain from './useAllowedList/setParentDomain';
-import onAllowListClick from './useAllowedList/onAllowListClick';
 import reloadCurrentTab from '../../../../../utils/reloadCurrentTab';
-import getDotPrefixedDomain from './useAllowedList/getDotPrefixedDomain';
-import isCookieDomainInAllowList from './useAllowedList/isCookieDomainInAllowList';
+import {
+  setParentDomain,
+  onAllowListClick,
+  getDotPrefixedDomain,
+  isCookieDomainInAllowList,
+} from '../../../stateProviders/useAllowedList/utils';
 
 interface RowContextMenuProps {
   domainsInAllowList: Set<string>;
   isIncognito: boolean;
-  setDomainsInAllowListCallback: React.Dispatch<
-    React.SetStateAction<Set<string>>
-  >;
+  setDomainsInAllowListCallback: (list: Set<string>) => void;
   tabUrl: string;
   removeSelectedRow?: () => void;
 }

packages/extension/src/view/devtools/components/cookies/cookiesListing/useCookieListing/useHighlighting.tsx

@@ -22,7 +22,7 @@ import { getCookieKey, type TabCookies } from '@ps-analysis-tool/common';
 /**
  * Internal dependencies.
  */
-import isCookieDomainInAllowList from '../useAllowedList/isCookieDomainInAllowList';
+import { isCookieDomainInAllowList } from '../../../../stateProviders/useAllowedList/utils';
 
 const useHighlighting = (
   cookies: TabCookies,

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

@@ -31,6 +31,7 @@ import { LibraryDetectionProvider } from '@ps-analysis-tool/library-detection';
 import App from './app';
 import { Provider as ExternalStoreProvider } from './stateProviders/syncCookieStore';
 import { Provider as SettingsStoreProvider } from './stateProviders/syncSettingsStore';
+import { Provider as AllowedListProvider } from './stateProviders/useAllowedList';
 
 const isDarkMode = chrome.devtools.panels.themeName === 'dark';
 document.body.classList.add(isDarkMode ? 'dark' : 'light');
@@ -44,7 +45,9 @@ if (root) {
         <ExternalStoreProvider>
           <TablePersistentSettingsProvider>
             <LibraryDetectionProvider>
-              <App />
+              <AllowedListProvider>
+                <App />
+              </AllowedListProvider>
             </LibraryDetectionProvider>
           </TablePersistentSettingsProvider>
         </ExternalStoreProvider>

packages/extension/src/view/devtools/components/cookies/cookiesListing/useAllowedList/index.tsx → packages/extension/src/view/devtools/stateProviders/useAllowedList/index.tsx

@@ -17,17 +17,47 @@
 /**
  * External dependencies.
  */
-import { useEffect, useRef, useState } from 'react';
+import React, {
+  useEffect,
+  useRef,
+  useState,
+  type PropsWithChildren,
+} from 'react';
+import { noop } from '@ps-analysis-tool/common';
+import { createContext } from 'use-context-selector';
 
 /**
  * Internal dependencies.
  */
-import { getCurrentTab } from '../../../../../../utils/getCurrentTabId';
-import { useCookieStore } from '../../../../stateProviders/syncCookieStore';
-import setDomainsInAllowList from './setDomainsInAllowList';
-import getDotPrefixedDomain from './getDotPrefixedDomain';
+import { getCurrentTab } from '../../../../utils/getCurrentTabId';
+import { useCookieStore } from '../syncCookieStore';
+import setDomainsInAllowList from './utils/setDomainsInAllowList';
+import getDotPrefixedDomain from './utils/getDotPrefixedDomain';
+import useContextSelector from '../../../../utils/useContextSelector';
+
+export interface AllowedListContext {
+  state: {
+    domainsInAllowList: Set<string>;
+    isIncognito: boolean;
+  };
+  actions: {
+    setDomainsInAllowListCallback: (list: Set<string>) => void;
+  };
+}
+
+const initialState: AllowedListContext = {
+  state: {
+    domainsInAllowList: new Set(),
+    isIncognito: false,
+  },
+  actions: {
+    setDomainsInAllowListCallback: noop,
+  },
+};
+
+export const Context = createContext<AllowedListContext>(initialState);
 
-const useAllowedList = () => {
+export const Provider = ({ children }: PropsWithChildren) => {
   const { tabUrl, cookies } = useCookieStore(({ state }) => ({
     tabUrl: state.tabUrl,
     cookies: state.tabCookies,
@@ -96,11 +126,36 @@ const useAllowedList = () => {
     })();
   }, [cookies, tabUrl]);
 
-  return {
-    domainsInAllowList,
-    setDomainsInAllowListCallback,
-    isIncognito: isIncognito.current,
-  };
+  return (
+    <Context.Provider
+      value={{
+        state: {
+          domainsInAllowList,
+          isIncognito: isIncognito.current,
+        },
+        actions: {
+          setDomainsInAllowListCallback,
+        },
+      }}
+    >
+      {children}
+    </Context.Provider>
+  );
 };
 
-export default useAllowedList;
+export function useAllowedList(): AllowedListContext;
+export function useAllowedList<T>(
+  selector: (state: AllowedListContext) => T
+): T;
+
+/**
+ * Allowed list hook.
+ * @param selector Selector function to partially select state.
+ * @returns selected part of the state
+ */
+export function useAllowedList<T>(
+  selector: (state: AllowedListContext) => T | AllowedListContext = (state) =>
+    state
+) {
+  return useContextSelector(Context, selector);
+}

packages/extension/src/view/devtools/stateProviders/useAllowedList/utils/index.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2023 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 { default as getDotPrefixedDomain } from './getDotPrefixedDomain';
+export { default as isCookieDomainInAllowList } from './isCookieDomainInAllowList';
+export { default as onAllowListClick } from './onAllowListClick';
+export { default as removeFromAllowList } from './removeFromAllowList';
+export { default as setDomainsInAllowList } from './setDomainsInAllowList';
+export { default as setParentDomain } from './setParentDomain';

packages/extension/src/view/devtools/components/cookies/cookiesListing/useAllowedList/onAllowListClick.ts → packages/extension/src/view/devtools/stateProviders/useAllowedList/utils/onAllowListClick.ts

@@ -17,7 +17,7 @@
 /**
  * Internal dependencies.
  */
-import { ChromeStorage } from '../../../../../../store';
+import { ChromeStorage } from '../../../../../store';
 import removeFromAllowList from './removeFromAllowList';
 
 const onAllowListClick = async (

packages/extension/src/view/devtools/components/cookies/cookiesListing/useAllowedList/removeFromAllowList.ts → packages/extension/src/view/devtools/stateProviders/useAllowedList/utils/removeFromAllowList.ts

@@ -17,10 +17,7 @@
 /**
  * Internal dependencies.
  */
-import {
-  ChromeStorage,
-  type AllowedDomainObject,
-} from '../../../../../../store';
+import { ChromeStorage, type AllowedDomainObject } from '../../../../../store';
 
 /**
  * Remove object from allow list.

packages/extension/src/view/devtools/components/cookies/cookiesListing/useAllowedList/setParentDomain.ts → packages/extension/src/view/devtools/stateProviders/useAllowedList/utils/setParentDomain.ts

@@ -16,7 +16,7 @@
 /**
  * Internal dependencies.
  */
-import { ChromeStorage } from '../../../../../../store';
+import { ChromeStorage } from '../../../../../store';
 
 const setParentDomain = async (
   domain: string,