With #330401 (closed) we now have an Overview tab in DevOps Adoption but there are a couple of issues with how the table is being displayed.
Problems to solve
The "Add sub-group to table" selector is displayed in the Overview tab even though there is no table on that page.
If I can't see the list of groups in the Overview tab, I can't easily see which groups are being considered in the adoption progress bar.
The "Add sub-group to table" selector is displayed in each of the Dev, Sec, and Ops tabs. Adding a sub group to the table in one tab adds it to the table in all tabs. This might not be intuitive with the current design.
Proposal
Include a table in the Overview page so that users can easily see which groups are being considered for the progress bar data
The table on the Overview page looks like
The table has the delete icon in each row
Requirements
The "Add or remove subgroup" selector works to add or remove groups from the table in the Overview tab.
When subgroups are added or removed from the Overview tab, they are also added/removed from the Dev, Sec, and Ops tabs
This page may contain information related to upcoming products, features and functionality.
It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes.
Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.
@npost would you mind taking a look at the current state of DevOps Adoption in production and see if there is anything else from a UX perspective that we need to change?
The lack of a table on the overview page whilst still having the Add sub-group dropdown would definitely confuse people (this issue should sort that though)
As for the adoption table... The gauge progress bars aren't a component yet, so we can just use the smaller progress bars in the table for now.
@ljlane Thanks for the ping. I do have some immediate thoughts on this that I'd like to share below:
Include a table in the Overview page so that users can easily see which groups are being considered for the progress bar data
I'm not sure if we currently display all available data or if there is a limit for groups (on backend or fronted). @blabuschagne Can you help answer this? If there is a limit for the number of groups being displayed per tab, we should think about removing or increasing this limit at least for the overview page as users would only see a handful of groups no the Overview page. Also, pagination might become a necessary thing to do at this point.
Only allow adding groups to the table from the Overview page (remove the "Add sub group to table" selector from the Dev, Sec, and Ops pages). This way the Overview page becomes the SSoT for adding groups
I'm not sure if this would lead to even more confusion Personally, I see tabs working this way: Everything that's being displayed below a tab, i.e., in the tab pane, belongs to the scope of the selected tab only. Everything above the tabs is considered global scope and applies to all tab scopes. With moving the Add group dropdown now into the tab pane of the Overview tab, it suggests that this will add groups only for this particular tab. Thoughts?
I'm not sure if we currently display all available data or if there is a limit for groups (on backend or fronted). @blabuschagne Can you help answer this? If there is a limit for the number of groups being displayed per tab, we should think about removing or increasing this limit at least for the overview page as users would only see a handful of groups no the Overview page. Also, pagination might become a necessary thing to do at this point.
There are no limits
Only allow adding groups to the table from the Overview page (remove the "Add sub group to table" selector from the Dev, Sec, and Ops pages). This way the Overview page becomes the SSoT for adding groups.
This could work, but perhaps a wording change could help with some clarification too. If we only had the dropdown on the overview page, the overview page could act as the configuration area for the feature. The Add group to table text could be changed to something like Configure groups and the delete option could be removed from the tables. This would however require us to first have multiselect implemented in order to add + remove groups from the dropdown...
@npost might have a much better idea than this though
but the MVC is just a boolean value under Dev, Sec, Ops instead of a percentage for now. No DevOps Score column and no DORA4 metrics for now. The boolean values can use the same colors as the progress bars.
We already calculate the Dev, Sec, Ops values on the frontend for the combination of enabled groups for the overview progress bars, so this logic could be reused to calculate the values for individual groups too, it would be fractionally more complicated than calculating a boolean value, but still doable for the MVC
Only allow adding groups to the table from the Overview page (remove the "Add sub group to table" selector from the Dev, Sec, and Ops pages). This way the Overview page becomes the SSoT for adding groups.
@blabuschagne@ljlane - We could allow this functionality for dev, sec, ops too but the added group persists across all tabs.
Everything that's being displayed below a tab, i.e., in the tab pane, belongs to the scope of the selected tab only. Everything above the tabs is considered global scope and applies to all tab scopes. With moving the Add group dropdown now into the tab pane of the Overview tab, it suggests that this will add groups only for this particular tab.
@wortschi I agree with your thoughts on positioning relative to the tab. Adding sub groups applies to everything on the Overview page and each of the other tabs. If a group is added, the data for that group then gets added to the progress bar section, the trend over time graph, and the group comparison table in all tabs. I was thinking we could keep it at the same level as the tabs, the way it is today. Does that work? Or are you saying you want it even higher on the page?
I like @blabuschagne's idea that the Overview page becomes the configuration page. Then the other tabs can be used specifically for drilling down into more detail.
the delete option could be removed from the tables
We could remove the delete option from the tables in the Dev, Sec, Ops tabs but keep it in the table on the Overview page. What do you think?
We could allow this functionality for dev, sec, ops too but the added group persists across all tabs
@npost The add group functionality does currently persist across all tabs. Where I found that a bit confusing is I added a group while in the Dev tab but it wasn't obvious to me if that would just add it for the Dev view, or if it would add it for all views (all tabs) so I had to navigate to the other tabs to see that it was added everywhere. I think just adding groups in Overview would eliminate that uncertainty. So, add a group in Overview but the group then appears in the table across all tabs. What do you think about that, and @blabuschagne's idea for the Overview page to be the configuration page? When we add more configuration options, like selecting which features to include in the table, that could all be managed from the Overview page.
We already calculate the Dev, Sec, Ops values on the frontend for the combination of enabled groups for the overview progress bars, so this logic could be reused
Looking at @npost's design with the progress bars, this is much nicer than a boolean dot. @npost - we were avoiding percentages for now because of the issue with the percentage dropping as we add more features to the table. Do you think the progress bar would look okay with x/x for now instead of the percentage shown in your design?
@blabuschagne would sorting be easy? Sorting by the length of the progress bar essentially.
@npost@blabuschagne Can we support clicking on the progress bar in the table takes the user to the corresponding tab with the group in focus? For example, click Sub Group C's progress bar in the Dev column takes the user to the Dev tab with Sub Group C in focus (scroll the table to that group and maybe show the row highlighted). It would be a nice drilldown feature if possible. Thinking about this for a future iteration after the MVC.
I was thinking we could keep it at the same level as the tabs, the way it is today. Does that work? Or are you saying you want it even higher on the page?
I like @blabuschagne's idea that the Overview page becomes the configuration page. Then the other tabs can be used specifically for drilling down into more detail.
Yeah that works. So here's what I understood we want to change for the tabs:
Keep the Add dropdown on the overview tab (same position as it is now)
Remove the dropdown from the remaining tabs (Dev/Sec/Ops)
@blabuschagne@wortschi I updated the Proposal based on our discussion. To keep the scope of this issue smaller, I've excluded the SSoT functionality for now so we can do an MVC of adding the table to the Overview tab. Sound okay?