♻️ Use useSettings hook in EventsTabSide instead of prop drilling

Author: mormubis

developer-extension/src/panel/components/panel.tsx

@@ -84,7 +84,6 @@ export function Panel() {
           columns={columns}
           onColumnsChange={setColumns}
           clear={clear}
-          datadogMode={settings.datadogMode}
         />
       </Tabs.Panel>
       <Tabs.Panel value={PanelTabs.Infos} className={classes.tab}>

developer-extension/src/panel/components/tabs/eventsTab/eventsTab.tsx

@@ -16,7 +16,6 @@ interface EventsTabProps {
   columns: EventListColumn[]
   onColumnsChange: (columns: EventListColumn[]) => void
   clear: () => void
-  datadogMode: boolean
 }
 
 export function EventsTab({
@@ -27,19 +26,11 @@ export function EventsTab({
   columns,
   onColumnsChange,
   clear,
-  datadogMode,
 }: EventsTabProps) {
   return (
     <TabBase
       top={<EventsTabTop filters={filters} onFiltersChange={onFiltersChange} clear={clear} />}
-      leftSide={
-        <EventsTabSide
-          filters={filters}
-          onFiltersChange={onFiltersChange}
-          facetRegistry={facetRegistry}
-          datadogMode={datadogMode}
-        />
-      }
+      leftSide={<EventsTabSide filters={filters} onFiltersChange={onFiltersChange} facetRegistry={facetRegistry} />}
     >
       {events.length === 0 || !facetRegistry ? (
         <Center>

developer-extension/src/panel/components/tabs/eventsTab/eventsTabSide.tsx

@@ -1,22 +1,23 @@
 import { Box, Checkbox } from '@mantine/core'
 import React from 'react'
 import type { EventFilters, FacetRegistry } from '../../../hooks/useEvents'
+import { useSettings } from '../../../hooks/useSettings'
 import { FacetList } from './facetList'
 
 export function EventsTabSide({
   facetRegistry,
   filters,
   onFiltersChange,
-  datadogMode,
 }: {
   facetRegistry?: FacetRegistry
   filters: EventFilters
   onFiltersChange: (filters: EventFilters) => void
-  datadogMode: boolean
 }) {
+  const [settings] = useSettings()
+
   return (
     <Box ml="md">
-      {datadogMode && (
+      {settings.datadogMode && (
         <Checkbox
           label={'Show only the latest View\xa0event'}
           checked={!filters.outdatedVersions}