Merge branch 'master' into resize

Author: vr-varad

src/custom/UniversalFilter.tsx

@@ -26,6 +26,7 @@ export interface UniversalFilterProps {
   handleApplyFilter: () => void;
   showAllOption?: boolean;
   id: string;
+  'data-testid'?: string;
 }
 
 export const FilterHeader = styled('div')(({ theme }) => ({
@@ -44,7 +45,8 @@ function UniversalFilter({
   variant = 'outlined',
   handleApplyFilter,
   showAllOption = true,
-  id
+  id,
+  'data-testid': testId = 'universal-filter'
 }: UniversalFilterProps): JSX.Element {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const [open, setOpen] = React.useState(false);
@@ -77,16 +79,26 @@ function UniversalFilter({
 
   const renderFilterContent = () => (
     <div>
-      <FilterHeader>
+      <FilterHeader data-testid={`${testId}-header`}>
         <h3>Filters: </h3>
       </FilterHeader>
       {Object.keys(filters).map((filterColumn) => {
         const options = filters[filterColumn].options;
         return (
-          <div key={filterColumn} role="presentation">
-            <InputLabel id={filters[filterColumn].name}>{filters[filterColumn].name}</InputLabel>
+          <div
+            key={filterColumn}
+            role="presentation"
+            data-testid={`${testId}-filter-group-${filterColumn}`}
+          >
+            <InputLabel
+              id={filters[filterColumn].name}
+              data-testid={`${testId}-label-${filterColumn}`}
+            >
+              {filters[filterColumn].name}
+            </InputLabel>
             <Select
               defaultValue="All"
+              data-testid={`${testId}-select-${filterColumn}`}
               key={filterColumn}
               value={selectedFilters[filterColumn]}
               variant={variant}
@@ -97,12 +109,23 @@ function UniversalFilter({
                 width: '20rem',
                 marginBottom: '1rem'
               }}
-              inputProps={{ 'aria-label': 'Without label' }}
+              inputProps={{
+                'aria-label': 'Without label',
+                'data-testid': `${testId}-select-${filterColumn}`
+              }}
               displayEmpty
             >
-              {showAllOption && <MenuItem value="All">All</MenuItem>}
+              {showAllOption && (
+                <MenuItem value="All" data-testid={`${testId}-option-all`}>
+                  All
+                </MenuItem>
+              )}
               {options.map((option) => (
-                <MenuItem key={option.value} value={option.value}>
+                <MenuItem
+                  key={option.value}
+                  value={option.value}
+                  data-testid={`${testId}-option-${option.value}`}
+                >
                   {option.label}
                 </MenuItem>
               ))}
@@ -112,7 +135,11 @@ function UniversalFilter({
       })}
 
       <div style={{ display: 'flex', justifyContent: 'center' }}>
-        <Button variant="contained" onClick={handleApplyOnClick}>
+        <Button
+          variant="contained"
+          onClick={handleApplyOnClick}
+          data-testid={`${testId}-apply-btn`}
+        >
           Apply
         </Button>
       </div>
@@ -121,7 +148,7 @@ function UniversalFilter({
 
   return (
     <>
-      <div id={id}>
+      <div id={id} data-testid={testId}>
         <TooltipIcon
           title="Filter"
           onClick={handleClick}

src/theme/theme.ts

@@ -2,22 +2,31 @@ import { Interactiveness, PaletteMode, createTheme } from '@mui/material';
 import { components } from './components';
 import { darkModePalette, lightModePalette } from './palette';
 import { typography } from './typography';
+import _ from 'lodash';
 
 export const drawerWidth = 240;
 
 export const createCustomTheme = (mode: PaletteMode, brandPalette?: Interactiveness) => {
   const basePalette = mode == 'light' ? lightModePalette : darkModePalette;
 
-  const themePalette = {
-    ...basePalette,
+  console.log('Creating theme with mode:', mode, 'and brandPalette:', brandPalette);
+
+  const customBrandedTheme = brandPalette ? {
+    primary: {
+        main: brandPalette.default ,
+        secondary: brandPalette.hover,
+    },
+    secondary: {
+      main: brandPalette.secondary,
+      secondary: brandPalette.secondary,
+    },
     background: {
-      ...(basePalette.background || {}),
-      brand: {
-        ...((basePalette?.background?.brand || {}) as Interactiveness),
-        ...(brandPalette || {})
-      }
+      brand: brandPalette
     }
-  };
+  } : {};
+
+  const themePalette = _.merge({}, basePalette, customBrandedTheme);
+  
 
   return createTheme({
     palette: {