feat(DataTableToolbar): add reusable toolbar component for Meshery UI migration

[Uday9909]

Description

Adds a reusable DataTableToolbar component to replace Meshery UI's ToolWrapper. This is a pure presentational layout shell that provisions named slots for toolbar actions.

Component API

Prop	Slot Location	Description
primaryActions	Left section	Action buttons (Add, Create, Import)
secondaryActions	Left section	Secondary actions (Export, bulk delete)
filter	Right section	UniversalFilter component
search	Right section	SearchBar component
columnVisibility	Right section	Column visibility control
viewSwitch	Right section	Grid/table view toggle
sx	Root	Custom styles for migration

Key Decisions

• Uses Sistent theme tokens exclusively — no hardcoded px/rem values
• Responsive via theme.breakpoints.down('sm') — no useMediaQuery, no window.innerWidth
• Flexible minHeight — replaces ToolWrapper's fixed 4rem height
• Accepts sx prop — allows consumer overrides without per-page CSS
• Slots are optional — renders empty sections when unused

Fixes

• Addresses responsiveness issues from fix(ui): fix search bar placeholder text truncation across pages meshery/meshery#18965 (search bar truncation, window.innerWidth usage)
• Removes need for hardcoded width overrides and data-testid selectors

Files Changed

src/custom/DataTableToolbar/
├── DataTableToolbar.tsx      # Main component
├── DataTableToolbar.types.ts # TypeScript interfaces
└── index.tsx                 # Barrel export
src/__testing__/DataTableToolbar.test.tsx  # 9 tests
src/custom/index.tsx                       # Export registration

Verification

• TypeScript: zero errors in component files
• ESLint: clean
• Prettier: formatted
• Tests: 9/9 passed (312/312 full suite)
• Build: CJS + ESM + DTS all succeed

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[gemini-code-assist]

Code Review

This pull request introduces the DataTableToolbar component, along with its corresponding TypeScript types and unit tests. The feedback highlights a few improvement opportunities: removing an ineffective zIndex property from the toolbar root styled component, adding responsive wrapping to the Section component to prevent horizontal overflow on mobile screens, and strengthening the unit test assertion for custom sx styles to verify they are actually applied.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

On mobile screens (down('sm')), the toolbar items inside Section (such as multiple action buttons or search/filter inputs) can overflow horizontally because Section does not wrap. Adding responsive wrapping to Section ensures a better mobile layout.

const Section = styled(Box)(({ theme }) => ({
  display: 'flex',
  alignItems: 'center',
  gap: theme.spacing(1),

  [theme.breakpoints.down('sm')]: {
    flexWrap: 'wrap',
    width: '100%'
  }
}));

[Uday9909]

@KhushamBansal ready for PR review!

[KhushamBansal]

@Uday9909 Have you tested this locally? If yes, please attach screen recording to the PR description.