mujibishola opened a new pull request, #32265:
URL: https://github.com/apache/superset/pull/32265
**SUMMARY**
This is a custom Table plugin.It provides an interface for users to add,
edit, and delete custom actions that can be applied to table headers. Key
features include:
- **Action Management:**
Users can add new actions, edit existing ones, or remove them. Each action
consists of properties such as a unique key, label, visibility condition, and
an optional action URL (if not publishing an event).
- **Dual Editing Modes:**
The component supports two modes for managing actions:
- A **Simple** mode that uses form fields (via Ant Design's Form
component) for a user-friendly interface.
- An **Advanced** mode that allows direct editing of the actions' JSON
configuration in a text area.
- **UI Rendering:**
Actions are rendered as cards. Each card displays a header (showing the
action key and control buttons for editing or deleting) and a body with
additional details (using icons with tooltips to indicate the action
properties).
- **Styling Adjustments:**
The card header styling has been adjusted to match the card body’s height
by using the same padding, ensuring a consistent look across the UI.
- **Validation:**
The component includes validation rules to ensure that action keys and
labels are unique.
- **State Management and Communication:**
It manages its internal state with React hooks, and communicates changes
back to the parent component via the `onChange` callback.
**TESTING INSTRUCTIONS**
1. **Component Rendering & Initial State:**
- Open a view or sandbox where the `Control Panel` component is rendered.
- Verify that if no actions are present initially, an informational alert
("No split table header actions added yet.") is displayed.
- Ensure the “Add New Action” button is visible.
2. **Adding a New Action (Simple Mode):**
- Click the “Add New Action” button.
- In the modal that appears, verify that the “Simple” tab is active by
default.
- Fill out the form fields:
- **Key:** Enter a unique key (e.g., "action1").
- **Label:** Enter a corresponding label (e.g., "Action 1").
- **Bound to Selection:** Toggle the checkbox as needed.
- **Visibility Condition:** Select one of the provided options (e.g.,
"Selected" or "All").
- **Publish Event:** Test toggling this checkbox. Verify that when
unchecked, the “Action URL” field appears and is required; when checked, the
“Action URL” field is hidden.
- Click the “Add Action” button.
- Confirm that the new action appears as a card on the modal page, and
that the card header displays the action key with consistent header and body
padding.
3. **Editing an Existing Action:**
- In the modal, click the edit button (pencil icon) on an action card.
- Verify that the modal pre-populates the form with the selected action’s
details.
- Update one or more fields and click “Save Changes.”
- Confirm that the action card is updated accordingly with the new
information.
4. **Removing an Action:**
- Click the delete button (trash icon) on an action card.
- Confirm that the action is removed from the list.
- Verify that the total count of actions decreases.
5. **Advanced Mode (JSON Editing):**
- In the modal, switch to the “Advanced” tab.
- Verify that the text area is populated with the JSON representation of
the actions. If editing a single action, it should show that action’s JSON;
otherwise, it should display the full actions array.
- Make an edit in the JSON (e.g., modify a label) and click “Save JSON.”
- Switch back to the “Simple” tab and confirm that the changes are
reflected in the card view.
6. **Validation Checks:**
- Try to add or edit an action using a key or label that duplicates an
existing one.
- Verify that appropriate validation error messages are displayed (e.g.,
“Action key must be unique”).
- Ensure that the form prevents submission until errors are resolved.
7. **UI Consistency & Styling:**
- Inspect the rendered card for each action.
- Confirm that the card header uses the same padding as the card body
(both should have 4px padding), ensuring that the header height matches the
body height.
- Check that all icons and tooltips display correctly with consistent
font sizes and spacing.
8. **Modal Behavior:**
- Verify that the modal can be opened and closed properly.
- Ensure that the form resets when the modal is closed.
- Confirm that switching between the “Simple” and “Advanced” tabs updates
the JSON text accordingly.
9. **Overall Functionality:**
- Confirm that all interactions (adding, editing, removing actions)
trigger the `onChange` callback with the correct JSON string representation of
the actions.
- Test the component in both read-only mode and with editing enabled to
ensure the appropriate buttons and inputs are displayed or hidden.
**ADDITIONAL INFORMATION**
- [ ] Has associated issue:
- [ ] Required feature flags:
- [x] Changes UI
- [ ] Includes DB Migration (follow approval process in
[[SIP-59](https://github.com/apache/superset/issues/13351)](https://github.com/apache/superset/issues/13351))
- [ ] Migration is atomic, supports rollback & is backwards-compatible
- [ ] Confirm DB migration upgrade and downgrade tested
- [ ] Runtime estimates and downtime expectations provided
- [ x] Introduces new feature or API
- [ ] Removes existing feature or API
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
