fix: issue with getStarted modal

Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>

Author: amitamrutiya

src/custom/DashboardWidgets/GettingStartedWidget/ActionButtonCard.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { Box, Button, Card, CardActions, CardContent, Typography } from '../../../base';
-import { styled, useTheme } from '../../../theme';
+import { styled } from '../../../theme';
 import { PrecentageLabel, SliderDiv } from '../styles';
 
 interface ActionButtonCardProps {
@@ -102,7 +102,6 @@ const ActionButtonCard = ({
   playgroundCardBackgroundImgSrc
 }: ActionButtonCardProps) => {
   const completed = completedSteps ? completedSteps.length : 0;
-  const theme = useTheme();
 
   const completedPercentage = (): number => {
     return Math.round((100 / totalSteps) * completed);
@@ -140,7 +139,7 @@ const ActionButtonCard = ({
                   aria-label="Default"
                   valueLabelDisplay="auto"
                 />
-                <PrecentageLabel size="small" completedPercentage={percentage} theme={theme}>
+                <PrecentageLabel size="small" completedPercentage={percentage}>
                   {`${percentage}%`}
                 </PrecentageLabel>
               </ProgressWrapper>
@@ -186,7 +185,7 @@ const ActionButtonCard = ({
                 aria-label="Default"
                 valueLabelDisplay="auto"
               />
-              <PrecentageLabel size="small" completedPercentage={percentage} theme={theme}>
+              <PrecentageLabel size="small" completedPercentage={percentage}>
                 {`${percentage}%`}
               </PrecentageLabel>
             </ProgressWrapper>

src/custom/DashboardWidgets/GettingStartedWidget/GetStartedModal.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Grid2, SwipeableDrawer, Theme } from '@mui/material';
+import { Grid2, SwipeableDrawer } from '@mui/material';
 import { useState } from 'react';
 import {
   Backdrop,
@@ -117,7 +117,6 @@ const CheckboxLabel = styled('div')(() => ({
 
 interface CheckFieldProps {
   isVisit?: boolean;
-  theme?: Theme;
 }
 
 const CheckField = styled('div')<CheckFieldProps>(({ theme, isVisit }) => ({
@@ -247,7 +246,6 @@ const GetStartedModal: React.FC<GetStartedModalProps> = ({
             <PrecentageLabel
               size="medium"
               completedPercentage={percentage}
-              theme={theme}
             >{`${completedPercentage()}%`}</PrecentageLabel>
           </DialogContent>
           <Grid2 sx={{ overflowY: 'auto', backgroundColor: theme.palette.background.surfaces }}>

src/custom/DashboardWidgets/GettingStartedWidget/InviteUserModal.tsx

@@ -2,7 +2,6 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 
-import { Theme } from '@mui/material';
 import { useEffect, useState } from 'react';
 import {
   Box,
@@ -138,7 +137,7 @@ export default function UserInviteModal({
     }
   }, [currentOrgId, providerRolesData, organizationRolesData]);
 
-  function getSelectStyle(ele: string, arr: string[], theme: Theme) {
+  function getSelectStyle(ele: string, arr: string[]) {
     return {
       fontWeight:
         arr.indexOf(ele) === -1
@@ -333,7 +332,7 @@ export default function UserInviteModal({
                   )}
                 >
                   {availableOrgRoles.map((name) => (
-                    <MenuItem key={name} value={name} style={getSelectStyle(name, roles, theme)}>
+                    <MenuItem key={name} value={name} style={getSelectStyle(name, roles)}>
                       {name}
                     </MenuItem>
                   ))}
@@ -360,7 +359,7 @@ export default function UserInviteModal({
                     )}
                   >
                     {availableProviderRoles.map((name) => (
-                      <MenuItem key={name} value={name} style={getSelectStyle(name, roles, theme)}>
+                      <MenuItem key={name} value={name} style={getSelectStyle(name, roles)}>
                         {name}
                       </MenuItem>
                     ))}

src/custom/DashboardWidgets/styles.tsx

@@ -1,4 +1,4 @@
-import { Slider, Theme } from '@mui/material';
+import { Slider } from '@mui/material';
 import { styled } from '../../theme';
 
 export const SliderDiv = styled(Slider)(({ theme, size }) => ({
@@ -22,7 +22,6 @@ export const SliderDiv = styled(Slider)(({ theme, size }) => ({
 interface PrecentageLabelProps {
   size: 'small' | 'medium' | 'large';
   completedPercentage: number;
-  theme: Theme;
 }
 
 export const PrecentageLabel = styled('div')<PrecentageLabelProps>(

src/custom/Workspaces/WorkspaceViewsTable.tsx

@@ -10,6 +10,7 @@ import { NameDiv } from '../CatalogDesignTable/style';
 import { RESOURCE_TYPES } from '../CatalogDetail/types';
 import { CustomColumnVisibilityControl } from '../CustomColumnVisibilityControl';
 import { CustomTooltip } from '../CustomTooltip';
+import { ErrorBoundary } from '../ErrorBoundary';
 import { ConditionalTooltip } from '../Helpers/CondtionalTooltip';
 import { useWindowDimensions } from '../Helpers/Dimension';
 import {
@@ -330,7 +331,7 @@ const WorkspaceViewsTable: React.FC<ViewsTableProps> = ({
   const [tableCols, updateCols] = useState(columns);
 
   return (
-    <>
+    <ErrorBoundary>
       <TableHeader style={{ padding: '1rem' }}>
         <Box
           style={{
@@ -398,7 +399,7 @@ const WorkspaceViewsTable: React.FC<ViewsTableProps> = ({
         isAssignAllowed={isAssignAllowed}
         isRemoveAllowed={isRemoveAllowed}
       />
-    </>
+    </ErrorBoundary>
   );
 };