build(admin-query): admin-query table changes

[SuryaNarayanan-Kgs]

No description provided.

[github-actions]

@CodiumAI-Agent /describe

[QodoAI-Agent]

Title

build(admin-query): admin-query table changes

---

PR Type

• Enhancement

---

Description

• Upgrade admin query table rendering with MUI components.

• Revamp layout styling for full width and scrollable panels.

• Reorganize form structure and update field properties.

• Improve table cell padding and responsiveness.

---

Changes walkthrough 📝

	Relevant files
Enhancement	AdminQueryPage.tsx Update admin query table and form layout with MUI.              packages/client/src/pages/settings/AdminQueryPage.tsx Replace semoss/ui Table with MUI Table components. Update layout widths and add new styled components. Reorder form fields and update query input controls. Add padding and styling adjustments for table cells. +80/-73

---

Need help?

Type /help how to ... in the comments thread for any questions about PR-Agent usage.

Check out the documentation for more information.

[github-actions]

@CodiumAI-Agent /review

[QodoAI-Agent]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review UI Refactor The new table rendering code using Material UI components should be carefully inspected to ensure that the intended styling, spacing, and accessibility standards are preserved. if (output.type === 'success') { return <Alert color={'success'}>Successful query!</Alert>; } else if (output.type === 'error') { return <Alert color={'error'}>{output.value}</Alert>; } else if (output.type === 'table') { return ( <Table sx={{ padding: '10px' }}> <TableHead> <TableRow> {output.value.headers.map((header, index) => ( <TableCell key={index} sx={{ padding: '10px' }}> {header} </TableCell> ))} </TableRow> </TableHead> <TableBody> {output.value.values.map((row, index) => ( <TableRow key={index}> {row.map((column, i) => ( <TableCell key={i} sx={{ padding: '10px' }}> {column} </TableCell> ))} </TableRow> ))} </TableBody> </Table> Form Layout Verify that the restructuring with new styled components (Styledform, StyledStack) and changes to form controls for database selection, ROWS, and QUERY maintain responsive design and proper user interaction across viewports. <StyledContainer> <StyledLeft> <Styledform> <StyledStack> <Controller name={'SELECTED_DATABASE'} control={control} rules={{ required: true }} render={({ field }) => { return ( <Select sx={{ minWidth: '200px' }} size="small" label="Database" value={field.value ? field.value : ''} onChange={(e) => field.onChange(e.target.value) } > {DATABASE_OPTIONS.map((option, i) => { return ( <Select.Item value={option} key={i} > {option} </Select.Item> ); })} </Select> ); }} /> <Controller name={'ROWS'} control={control} rules={{ min: 1 }} render={({ field }) => { return ( <TextField size="small" label="Max # Rows to Collect" value={field.value ? field.value : ''} onChange={(e) => field.onChange(e.target.value) } type={'number'} ></TextField> ); }} /> <Button size="small" variant={'contained'} onClick={() => submitQuery()} disabled={!disableButton} > Run </Button> </StyledStack> <Controller name={'QUERY'} control={control} rules={{ required: true }} render={({ field }) => { return ( <TextArea sx={{ width: '100%' }} label="Enter query to run on database" value={field.value ? field.value : ''} onChange={(e) => field.onChange(e.target.value) } minRows={4} maxRows={12} ></TextArea> ); }} /> <StyledRight> {!output.type ? 'Execute a query to display the results here.' : displayQueryOutput()} </StyledRight> </Styledform>

[github-actions]

@CodiumAI-Agent /improve

[QodoAI-Agent]

PR Code Suggestions ✨

Category	Suggestion	Impact
Possible issue	Enforce required validation Ensure that the ROWS field is validated appropriately by adding a required rule if it is mandatory. packages/client/src/pages/settings/AdminQueryPage.tsx [260-277] <Controller name={'ROWS'} control={control} - rules={{ min: 1 }} + rules={{ required: true, min: 1 }} render={({ field }) => { return ( <TextField size="small" label="Max # Rows to Collect" value={field.value ? field.value : ''} onChange={(e) => field.onChange(e.target.value)} type={'number'} ></TextField> ); }} /> Suggestion importance[1-10]: 7 __ Why: Adding the required validation rule for the ROWS controller improves form accuracy and prevents empty submissions, addressing potential issues in data collection.	Medium
General	Validate layout width change Verify that changing the left panel width from 40% to 100% is intentional, as it may affect overall page layout. packages/client/src/pages/settings/AdminQueryPage.tsx [29-33] const StyledLeft = styled('div')(() => ({ display: 'flex', flexDirection: 'column', - width: '100%', + width: '40%', // or the intended width per design })); Suggestion importance[1-10]: 3 __ Why: The suggestion questions the intentional change from 40% to 100% for the left panel width, which is a minor layout concern and does not directly fix a bug.	Low
	Adjust overflow behavior Consider using 'auto' instead of 'scroll' for overflow in the right panel to display scrollbars only when needed. packages/client/src/pages/settings/AdminQueryPage.tsx [35-39] const StyledRight = styled('div')(() => ({ - overflow: 'scroll', - width: '100%', - marginTop: '20px', + overflow: 'auto', + width: '100%', + marginTop: '20px', })); Suggestion importance[1-10]: 3 __ Why: Switching the overflow from 'scroll' to 'auto' is a minor UX enhancement that ensures scrollbars only appear when needed, offering a slight improvement in visual presentation.	Low

[neelneelneel]

Use components from @semoss/ui. Extend those if necessary

[johbaxter]

addressed

[ppatel9703]

@SuryaNarayanan-Kgs Moving forward can we focus on using pre existing components inside of semoss/ui

Addressed comments of pulling from component lib

[github-actions]

@CodiumAI-Agent /update_changelog

[QodoAI-Agent]

Changelog updates: 🔄

2025-03-17 *

Changed

• Updated admin query page layout and table styling.
• Enhanced table component integration for improved performance.

to commit the new content to the CHANGELOG.md file, please type:
'/update_changelog --pr_update_changelog.push_changelog_changes=true'