Resolve Grid2 TypeScript build break by removing @mui/material/Grid2 subpath dependency

[Copilot]

The Meshery integration workflow failed during DTS generation because TypeScript could not resolve @mui/material/Grid2. This change aligns Grid2 imports with MUI’s stable barrel exports to restore type build compatibility.

• Root-cause alignment

  • Replaced direct @mui/material/Grid2 imports with Grid2 from @mui/material across all affected components.
  • Removed subpath coupling that breaks when Grid2 is not exposed as an importable module path in the current MUI version.

• Base wrapper hardening (src/base/Grid2/Grid2.tsx)

  • Switched wrapper import to Grid2 from @mui/material.
  • Derived props via React.ComponentProps<typeof MuiGrid> instead of importing Grid2Props from a subpath.

• Affected call sites updated

  • src/custom/ResourceDetailFormatters/styles.ts
  • src/custom/TransferModal/TransferList/style.tsx
  • src/custom/Workspaces/WorkspaceCard.tsx
  • src/custom/DashboardWidgets/GettingStartedWidget/GetStartedModal.tsx
  • src/custom/InputSearchField/InputSearchField.tsx
  • src/custom/TeamTable/TeamTable.tsx

Example of the import/type change applied:

import { Grid2 as MuiGrid } from '@mui/material';
import React from 'react';

type MuiGridProps = React.ComponentProps<typeof MuiGrid>;

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[Copilot]

Pull request overview

Fixes TypeScript/DTS build failures caused by importing Grid2 from the @mui/material/Grid2 subpath by switching Grid2 usage to MUI’s barrel exports and updating the internal src/base/Grid2 wrapper typing.

Changes:

• Replaced @mui/material/Grid2 subpath imports with Grid2 from @mui/material in affected custom components.
• Hardened the src/base/Grid2 wrapper to derive props via React.ComponentProps<typeof MuiGrid> instead of importing Grid2Props from a subpath.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
src/base/Grid2/Grid2.tsx	Switches Grid2 wrapper to MUI barrel export and derives props from the component type.
src/custom/Workspaces/WorkspaceCard.tsx	Updates Grid2 import to avoid the @mui/material/Grid2 subpath.
src/custom/TransferModal/TransferList/style.tsx	Updates Grid2 import to avoid the @mui/material/Grid2 subpath.
src/custom/TeamTable/TeamTable.tsx	Updates Grid2 import to avoid the @mui/material/Grid2 subpath.
src/custom/ResourceDetailFormatters/styles.ts	Updates Grid2 import to avoid the @mui/material/Grid2 subpath.
src/custom/InputSearchField/InputSearchField.tsx	Updates Grid2 import to avoid the @mui/material/Grid2 subpath.
src/custom/DashboardWidgets/GettingStartedWidget/GetStartedModal.tsx	Updates Grid2 import to avoid the @mui/material/Grid2 subpath.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

In this file we already import components from ../../base (e.g., Backdrop/CircularProgress). To keep Grid usage consistent with the rest of the codebase and avoid direct coupling to MUI’s export surface, consider importing Grid2 from ../../base instead of @mui/material.

Suggested change

	import { Grid2, useTheme } from '@mui/material';
	import { Backdrop, CircularProgress } from '../../base';
	import { useTheme } from '@mui/material';
	import { Backdrop, CircularProgress, Grid2 } from '../../base';

[Copilot]

This module already pulls UI primitives from ../../../base. For consistency and to reduce direct dependency on MUI exports in custom components, consider using the Grid2 wrapper from ../../../base here as well (keeping styled from @mui/material if needed).

Suggested change

	import { Grid2, styled } from '@mui/material';
	import { Button, Chip, Paper, Typography } from '../../../base';
	import { styled } from '@mui/material';
	import { Button, Chip, Paper, Typography, Grid2 } from '../../../base';

[Copilot]

Most custom components use the Grid2 wrapper exported from ../../base (and src/base/index.tsx re-exports it). Consider switching this Grid2 import to ../../base to keep custom code aligned with the base-component abstraction.

Suggested change

	import { Grid2, TableCell } from '@mui/material';
	import { MUIDataTableColumn } from '@sistent/mui-datatables';
	import { styled, useTheme } from '../../theme';
	import { ErrorBoundary } from '../ErrorBoundary/ErrorBoundary.js';
	import { TableCell } from '@mui/material';
	import { MUIDataTableColumn } from '@sistent/mui-datatables';
	import { styled, useTheme } from '../../theme';
	import { ErrorBoundary } from '../ErrorBoundary/ErrorBoundary.js';
	import { Grid2 } from '../../base';

[Copilot]

This styles module already uses base wrappers for other components (Box/Chip/IconButton/Typography). Consider importing Grid2 from ../../base as well, and keep alpha from @mui/material, to maintain the “base component” abstraction consistently across the codebase.

Suggested change

	import { alpha, Grid2 } from '@mui/material';
	import { Box, Chip, IconButton, Typography } from '../../base';
	import { alpha } from '@mui/material';
	import { Box, Chip, Grid2, IconButton, Typography } from '../../base';

[Copilot]

This component already relies on ../../base for several MUI wrappers (Box/Chip/CircularProgress/TextField/etc.). Consider importing Grid2 from ../../base too, so layout components go through the same wrapper layer as the rest of the UI primitives.

Suggested change

	import { Autocomplete, Grid2 } from '@mui/material';
	import React, { useCallback, useEffect, useState } from 'react';
	import { Box, Chip, CircularProgress, TextField, Tooltip, Typography } from '../../base';
	import { Autocomplete } from '@mui/material';
	import React, { useCallback, useEffect, useState } from 'react';
	import { Box, Chip, CircularProgress, Grid2, TextField, Tooltip, Typography } from '../../base';

[Copilot]

This file already imports several base components from ../../../base. Consider importing Grid2 from ../../../base as well, and keep SwipeableDrawer coming from @mui/material, so Grid2 usage remains consistent with other components that go through the base wrapper layer.

Suggested change

	import { Grid2, SwipeableDrawer } from '@mui/material';
	import { useState } from 'react';
	import {
	import { SwipeableDrawer } from '@mui/material';
	import { useState } from 'react';
	import {
	Grid2,

[leecalcote]

@Rajesh-Nagarajan-11 given that you disagree with the use of Grid2, I'll leave this for you to address.