kestra icon indicating copy to clipboard operation
kestra copied to clipboard

feat(ui): enhance empty state handling for executions and selection in components

Open sikehish opened this issue 4 months ago • 6 comments

What changes are being made and why?

This PR introduces two main features to improve user experience when interacting with data tables and charts in the application:

  1. Empty State Handling: Added an <el-empty> component to both the Bar and SelectTable components. This component is displayed when there are zero executions or no data available, enhancing the user interface by providing clear feedback to users.

  2. Conditional Rendering: Updated the rendering logic for the bulk select header in the SelectTable component to only show when there is data selected, ensuring a cleaner interface and preventing confusion when no data is available.

These changes enhance usability by clearly communicating to users when there is no data to display, thereby improving the overall experience.


How the changes have been QAed?

To QA the changes, the following flow demonstrates the user experience when there are zero executions or no data:

  1. Navigate to Executions, or Flows.
  2. Ensure that there are no executions(or flows).
  3. Observe that the <el-empty> component is correctly displayed in both the Bar and SelectTable components.
- Navigate to Executions, or Flows.
- If any executions/flows are present, you may delete them.
- Confirm that the empty state message is displayed correctly.

sikehish avatar Oct 20 '24 07:10 sikehish