List view data grid questions

[jess-watson]

Hi Paste team! I'm migrating the Segment Journeys list view to Paste and would love feedback on how to handle some scenarios. Here is a Figma link to show what our v1 list view looks like, and here's a link to my explorations using Paste.

Displaying multiple versions of one journey
In Journeys, you can create multiple versions of a single Journey. Each version can have its own status, but we only allow there to be one live version at a time. Today, we display a journey with versions as a row in the list view, and if you click the row, you're able to see all versions.
We could follow the same pattern and just update the components, but to my understanding, disclosures, nesting, and/or tree grids aren't supported in Paste today.
Another option is to only show one row per journey, and only show the status of a live version, or the most recently created version (it looks like Salesforce may do this).

Filtering on a piece of data that's indicated by an avatar
In other parts of Segment, we denote an object's type by using an avatar at the beginning of a list view row. For journeys, we would use an avatar to display the trigger type. I think it would be nice to allow users to filter by the trigger type (for example, I only want to see my event-triggered journeys in this list). Is it okay to filter based on the avatar, or do I need an explicit column called trigger type in order to filter on that information?

Displaying errors
Do you have any recommendations on how to display errors for an object in the list view? In this case, a journey's status could still be live, but something within the journey could have an error that we want to alert the user to.

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

For migrating the Segment Journeys list view to Paste and handling specific scenarios, here are some recommendations based on the provided context:

Displaying multiple versions of one journey
Since disclosures, nesting, and/or tree grids aren't currently supported in Paste, you might consider the alternative option of showing one row per journey and displaying the status of either the live version or the most recently created version. This approach simplifies the UI and aligns with practices seen in other platforms like Salesforce. It also avoids the complexity of unsupported components while still providing essential information at a glance.

Filtering on a piece of data that's indicated by an avatar
For filtering based on the avatar, which denotes an object's type, it's recommended to have an explicit column for the trigger type if you want to enable filtering. While avatars are great for visual representation, having a dedicated column with text allows for clearer filtering options and improves accessibility. This approach ensures that all users, regardless of how they interact with your UI, can effectively use the filtering feature.

Displaying errors
To display errors for an object in the list view, consider using a combination of icons and text to clearly communicate the error state to the user. Icons can quickly draw attention to the fact that there's an issue, while accompanying text can provide more detail about the error. This approach helps maintain clarity and ensures users are well-informed about the status of their journeys. Additionally, leveraging Toast or Alert components from Paste can provide a consistent and accessible way to notify users of errors, especially for critical issues that need immediate attention.

For more detailed guidance and examples of using Paste components, you can refer to the Paste documentation:

• For general component usage: Paste Component Library
• For specific guidance on alerts and notifications: Alerts

Remember, the key to a successful migration and UI update is to maintain clarity, accessibility, and consistency across your application, leveraging the robust set of components and patterns provided by Paste.

I also did a search, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Builder node/step component (updated: 06/10/2024, similarity score: 87%)
• Journeys Canvas UX (updated: 03/13/2023, similarity score: 86%)
• SendGrid -> Paste - Answer (updated: 07/15/2022, similarity score: 85%)

[nkrantz]

Hey @jess-watson!

Nested rows for versions: Data Grid doesn't currently support nested/collapsing rows, but the use case here does make sense. If you decide that it's helpful for users to see all associated versions as individual rows, you can file a dependency for adding that feature to Data Grid.

Filtering by Avatar: The guidance we have is "Ensure that all filter options correspond to data present in the results. Avoid including filters for data that are not visible or accessible within the dataset." So we don't explicitly require the filters to correspond to a table column, but it should be very clear to the user that there's a relationship between the Avatar and the filter if there's no column header. For example, the trigger filter options should display the Avatars along with the trigger type so the user can track the trigger type they're filtering by. Feel free to share a mockup of this flow specifically so that we can provide more feedback.

Errors: Roxana mocked up some options for displaying an error on the journey. If a Tooltip is sufficient, we'd suggest going with the first row - add a Warning or Error icon next to the journey name that triggers a Tooltip with more information. Placing it next to the status (2nd row example), isn't great visually, and can be confusing to have 2 statuses for a given journey. If technically the status is still live, but there's still an error on the journey, it makes more sense to keep the status column as "live". If you want to display more information on the table itself, rather than behind a Tooltip, you could go with the example in row 3.

[jess-watson]

This is great, thank you! I'll revise my designs based on this feedback.