Feature: Implement generic sidebar for extension (#306)

* Move data processing to utils

* Move cookie reshaping to utils

* Add sidebar hook and component

* Add sidebar data

* Use sidebar component and component

* Update import

* Move sidebar folder

* Select first sidebar item by default

* Implement new sidebar in site report component

* Move sidebar child out and UI changes

* Put FrameUrls into useMemo

* Change max width for sidebars and css changes

* UI changes

* Update icons

* Change message box text

* Update unknown frame(s)

* Update icons

* Setup input textbox and use in cookie top bar

* Move sidebar to design-system

* Change sidebar data to obj from arr

* Add keyboard navigation and move functions to utils

* Don't allow autofocus on intial render

* Restructure table directory

* Add filtering and search hooks in table

* Add Chips and filter sidebar and modified props

* Add Top bar view

* Update folder names

* Update condition when no keys provided

* Move extractCookies into separate file

* Update Input -> TextInput

* Add test cases

* Add filters for dashboard, update filter logic flow and ui change

* Update filters comparator and static values

* Update key in filters data

* Update search keys for dashboard & minor logic + UI change

* Move columns, filerts, searchKeys to cookieListing from tableContainer

* Modify affected cookies table to be reusable

* Retrieve cookies from store

* Add filters and search to affected cookies table

* Add filters and search to technology table

* Change function param name

* Remoce jest-dom

* Change TextInput -> SearchInput

* Update filter value calculation logic

* fix:attribute cookie of frame about:blank to unknown frames

* Update unknown frame with constant

* Add function to handle data extraction

* Add storage updation mechanism

* Handle persistence with custom hook

* Handle table settings persistence across all hooks

* Export sidebar

* Refactor util and callback

* Add props for table persistence and disabling filtering

* Update findItem uitl search logic

* Update findItem util working

* Create sidebarData and use custom sidebar hook & component

* Keep auto open and text change

* Handle frame selection

* Add title to node

* Add ux for focus change on clicks

* Handle null case for selected frame

* Add inspect button inside cookies sidebar item

* Handle selectedFrame change from frame overlay

* Hide inspect button when tab not analysed

* Handle selected sidebar item persistence

* Update frameUrl prop and persistence key creation

* Handle size change inside Dispatch callback

* Update useTable's internal hooks to set empty values

* Update filters persistence logic

* Reset filter values on options change

* Handle persistence for visibility:

* Handle resizing persistence of columns

* Change saving visibility data's trigerr

* Update resizing logic based on visibility and table changes

* Handle sorting persistence

* Update filters persistence mechanism

* Handle search value on persistence

* Update storage utils for saving and extracting persitent settings of table

* Update useTable for persistence

* Update filter count calculation logic

* Handle sorting of filter values

* Update persistence keys and props for table

* Sort keys and access the object

* Use a commonKey for resizing, visbility, sorting

* Move to landing page on site change

* Remove top padding

* Remove old sidebar, accordion and old test cases

* Use context selector for persistence

* Update saving of column sizing mechanism

* Add dark mode colors

* Flex technology table

* Show filter title even when no filter available

* Handle change of selectedFrame on redirection

* Add logic to handle negative width diff

* Handle sidebar item storage and retrieval

* Updare use tabID for data extraction

* Update left value for extra interface in sidebar title

* Decrease left value

* Update condition with optional chaining

* Make inspect button vertically align

* Handle unnecessary re-render

* minor refactoring

---------

Co-authored-by: ayushnirwal <coding.carrots@gmail.com>

packages/cli-dashboard/src/components/siteMapReport/index.tsx

@@ -97,6 +97,8 @@ const SiteMapReport = ({
     activePanel,
     selectedItemKey,
     sidebarItems,
+    isSidebarFocused,
+    setIsSidebarFocused,
     updateSelectedItemKey,
     onKeyNavigation,
     toggleDropdown,
@@ -199,6 +201,8 @@ const SiteMapReport = ({
         <Sidebar
           selectedItemKey={selectedItemKey}
           sidebarItems={sidebarItems}
+          isSidebarFocused={isSidebarFocused}
+          setIsSidebarFocused={setIsSidebarFocused}
           onKeyNavigation={onKeyNavigation}
           updateSelectedItemKey={updateSelectedItemKey}
           toggleDropdown={toggleDropdown}

packages/cli-dashboard/src/components/siteReport/components/layout.tsx

@@ -66,6 +66,8 @@ const Layout = ({ selectedSite }: LayoutProps) => {
     activePanel,
     selectedItemKey,
     sidebarItems,
+    isSidebarFocused,
+    setIsSidebarFocused,
     updateSelectedItemKey,
     onKeyNavigation,
     toggleDropdown,
@@ -147,6 +149,8 @@ const Layout = ({ selectedSite }: LayoutProps) => {
         <Sidebar
           selectedItemKey={selectedItemKey}
           sidebarItems={sidebarItems}
+          isSidebarFocused={isSidebarFocused}
+          setIsSidebarFocused={setIsSidebarFocused}
           onKeyNavigation={onKeyNavigation}
           updateSelectedItemKey={updateSelectedItemKey}
           toggleDropdown={toggleDropdown}