feat: add Select All checkbox for credential workspace sharing

[xxiaoxiong]

Description

Fixes #5639

When managing credential sharing across multiple workspaces, users had to manually check/uncheck each workspace individually. This was tedious and time-consuming, especially when unsharing a credential from all workspaces.

Problem

Current behavior:

• User wants to unshare a credential from all workspaces
• Must scroll through the list and manually uncheck every workspace
• No bulk action available
• Tedious for organizations with many workspaces

User quote from issue:

"In order to unshare a credential from all workspaces it would be helpful to have a one-click option instead of scrolling the list and unchecking every workspace."

Solution

Add a "Select All" checkbox above the workspace list that allows users to:

• ✅ Check all workspaces with one click
• ✅ Uncheck all workspaces with one click
• ✅ Automatically updates when individual checkboxes are toggled

Changes

packages/ui/src/ui-component/dialog/ShareWithWorkspaceDialog.jsx

1. Import MUI components:

-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Box, Stack, OutlinedInput, Typography } from '@mui/material'
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Box, Stack, OutlinedInput, Typography, Checkbox, FormControlLabel } from '@mui/material'

2. Add state and handlers:

const [selectAll, setSelectAll] = useState(false)

// Handle select all / deselect all
const handleSelectAllChange = (event) => {
    const checked = event.target.checked
    setSelectAll(checked)
    setOutputSchema((prevRows) => {
        return prevRows.map((row) => ({
            ...row,
            shared: checked
        }))
    })
}

// Update selectAll state when individual rows change
useEffect(() => {
    if (outputSchema.length > 0) {
        const allSelected = outputSchema.every((row) => row.shared)
        const noneSelected = outputSchema.every((row) => !row.shared)
        setSelectAll(allSelected ? true : noneSelected ? false : false)
    }
}, [outputSchema])

3. Add UI above the grid:

<Stack direction='row' alignItems='center' justifyContent='space-between' sx={{ mb: 1 }}>
    <Typography variant='overline'>Workspaces</Typography>
    <FormControlLabel
        control={<Checkbox checked={selectAll} onChange={handleSelectAllChange} size='small' />}
        label={<Typography variant='body2'>Select All</Typography>}
    />
</Stack>
<Grid columns={columns} rows={outputSchema} onRowUpdate={onRowUpdate} />

Features

1. One-Click Select All

• Check the "Select All" box
• All workspace checkboxes are instantly checked
• Credential will be shared with all workspaces on save

2. One-Click Deselect All

• Uncheck the "Select All" box
• All workspace checkboxes are instantly unchecked
• Credential will be unshared from all workspaces on save

3. Smart Synchronization

• If all workspaces are checked individually → "Select All" automatically checks
• If any workspace is unchecked → "Select All" automatically unchecks
• Keeps UI state consistent with user actions

4. Clean UI Integration

• Positioned in the top-right, next to "Workspaces" label
• Uses MUI's FormControlLabel for consistent styling
• Small checkbox size to avoid visual clutter
• Doesn't interfere with existing grid functionality

UI/UX

Before

┌─────────────────────────────────────┐
│ Share Credential                    │
├─────────────────────────────────────┤
│ Name: My API Key                    │
│                                     │
│ ┌─────────────────────────────────┐ │
│ │ Workspace A        [ ]          │ │
│ │ Workspace B        [ ]          │ │
│ │ Workspace C        [ ]          │ │
│ │ Workspace D        [ ]          │ │
│ │ Workspace E        [ ]          │ │
│ │ ... (scroll to see more)        │ │
│ └─────────────────────────────────┘ │
│                                     │
│           [Cancel]  [Save]          │
└─────────────────────────────────────┘

❌ Must click each checkbox individually

After

┌─────────────────────────────────────┐
│ Share Credential                    │
├─────────────────────────────────────┤
│ Name: My API Key                    │
│                                     │
│ WORKSPACES          [✓] Select All  │ ← NEW!
│ ┌─────────────────────────────────┐ │
│ │ Workspace A        [✓]          │ │
│ │ Workspace B        [✓]          │ │
│ │ Workspace C        [✓]          │ │
│ │ Workspace D        [✓]          │ │
│ │ Workspace E        [✓]          │ │
│ │ ... (all checked!)              │ │
│ └─────────────────────────────────┘ │
│                                     │
│           [Cancel]  [Save]          │
└─────────────────────────────────────┘

✅ One click to select/deselect all!

Testing

Manual Testing

1. Basic select all:

   • Go to Credentials page
   • Click share icon on any credential
   • Click "Select All" checkbox
   • ✅ All workspace checkboxes are checked

2. Basic deselect all:

   • With all workspaces checked
   • Click "Select All" checkbox again
   • ✅ All workspace checkboxes are unchecked

3. Smart sync (all → some):

   • Click "Select All" to check all
   • Manually uncheck one workspace
   • ✅ "Select All" checkbox automatically unchecks

4. Smart sync (some → all):

   • Manually check all workspaces one by one
   • ✅ "Select All" checkbox automatically checks

5. Save functionality:

   • Select some workspaces (mix of checked/unchecked)
   • Click Save
   • ✅ Credential is shared only with checked workspaces
   • ✅ Success message appears

6. Reopen dialog:

   • Close and reopen the share dialog
   • ✅ Previously saved state is preserved
   • ✅ "Select All" reflects current state

Edge Cases

1. No workspaces:

   • User has only one workspace (active workspace is filtered out)
   • ✅ Dialog shows empty grid
   • ✅ "Select All" checkbox is visible but has no effect

2. All already shared:

   • Credential is already shared with all workspaces
   • Open dialog
   • ✅ "Select All" is automatically checked

3. None shared:

   • Credential is not shared with any workspace
   • Open dialog
   • ✅ "Select All" is unchecked

Implementation Details

State Management

• selectAll state tracks the checkbox
• handleSelectAllChange updates all rows when checkbox is toggled
• useEffect syncs selectAll with individual row changes
• Uses outputSchema.every() to determine if all/none are selected

Performance

• No API calls on checkbox toggle (only on Save)
• State updates are batched by React
• Works efficiently with large workspace lists

Accessibility

• Uses MUI's FormControlLabel for proper label association
• Checkbox is keyboard accessible (Tab + Space)
• Screen readers announce "Select All" label

Type of Change

• Bug fix
• New feature (UI/UX improvement)
• Breaking change

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• Feature is simple and focused (30 lines of code)
• Uses existing MUI components (Checkbox, FormControlLabel)
• Smart synchronization with individual checkboxes
• Clean UI integration (top-right positioning)
• No breaking changes
• Addresses the exact problem described in (un)check-all button for credentail sharing #5639

[gemini-code-assist]

Code Review

This pull request introduces a 'Select All' functionality to the ShareWithWorkspaceDialog, allowing users to toggle the shared status of all workspaces simultaneously. The feedback suggests simplifying the logic for determining the select-all state and disabling the checkbox when no workspaces are available to prevent confusing UI interactions.

[gemini-code-assist]

The logic for setting selectAll can be simplified. The current ternary expression allSelected ? true : noneSelected ? false : false is equivalent to just allSelected, as both branches of the inner ternary return false. Additionally, consider implementing the indeterminate state for the checkbox (using the indeterminate prop) to provide better visual feedback when only some workspaces are selected.

Suggested change

	const allSelected = outputSchema.every((row) => row.shared)
	const noneSelected = outputSchema.every((row) => !row.shared)
	setSelectAll(allSelected ? true : noneSelected ? false : false)
	const allSelected = outputSchema.every((row) => row.shared)
	setSelectAll(allSelected)

[gemini-code-assist]

The "Select All" checkbox should be disabled if there are no workspaces available to select (e.g., when the user only has one workspace, which is filtered out from this list). This prevents confusing UI interactions where the checkbox can be toggled despite having no effect.

Suggested change

	control={<Checkbox checked={selectAll} onChange={handleSelectAllChange} size='small' />}
	control={<Checkbox checked={selectAll} onChange={handleSelectAllChange} size='small' disabled={outputSchema.length === 0} />}