Multiple bugs with Page sections when Quickstart is open

[christiemolloy]

These two issues were filed in Jira:

• https://issues.redhat.com/browse/MGDSTRM-3015 (fix so there is no x-overflow)
• http://issues.redhat.com/browse/MGDSTRM-3016 (@jgiardino should the table change to mobile early when the quickstart is open?)
• Another issue thats happening is there are two scrollbars in the main section when the Quickstart is open

[christiemolloy]

@jgiardino can you update this issue once you hear from the designers about the plan for quickstarts in the future?

[jgiardino]

Missy has reviewed miscellaneous layout issues and captured them here: https://docs.google.com/presentation/d/1wmaZsjcoZ-Ma2mkUjFz3JVeAByH8oHhPfvijMWMe2NY/edit?usp=sharing

For these issues that were identified, I think it would be good to sync up on what are our options are for handling a responsive behavior. I think there are some good ideas identified here, but I also have a lot of questions about what additional features some of these updates require, and what are our options from an implementation perspective.

For example, the quick start drawer being resizable creates some issues with the responsive behavior that's tied to media queries. One of her recommendations is to set a max and min size of the quick start panel. So that could possibly help, but requires us knowing that a quick start is open. Additionally, @jschuler shared this info during a discussion on this topic:

Ability to resize and get responsive behavior: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver

But also, if we aren't the only consumer of quick starts, do we need to run this change by the other consumers to have a min/max setting?

Another recommendation she has is to reorder columns by priority and drop columns from the table. But that also raises questions about what data should a user have access to about Kafkas they don't own, and also suggests that we might need to add a sort control in our toolbar to allow sorting by the columns that get dropped.

For this issue, I think there are a few key next steps:

• Go ahead and fix the obvious bugs with functionality not be available when the quick start drawer is open (e.g. the table view doesn't fit within the container when a quick start is open)
• Go ahead and fix the responsive layout issues withing the details drawer when contents get cut off
• Create one or more POCs in codesandbox that illustrates how a table view can be made more responsive when multiple drawers are open.
  • I'd like to explore dropping columns before switching entirely to a mobile view, but this needs more discussion and investigation.
  • Part of a POC could let us explore whether we can implement a responsive behavior based on the width of a side drawer.
  • Also, when chatting with Lucia, the direction that PF is going is that drawers should display inline when accompanied by a table/list view. But without any working examples that demonstrate how the table responds with this change, that places a significant burden on our team if we were to immediately adopt this. This is why I think a POC outside our code base to fully explore and share what this is intended to look like when different combinations of drawers are available, lets us get input and guidance on all the questions that are likely to come up (e.g. which columns can we remove, how does sort render if not handled with a column header, etc...)

We did discuss that it isn't likely a user would want to complete a quick start on a mobile device.

[christiemolloy]

I'll go ahead and create the Code Sandbox POC to illustrate this.

[christiemolloy]

@ajaypratap003 do you mind taking on the bugs that Jenn outlined above ?

[christiemolloy]

@jgiardino Started a code sandbox for double drawers: https://codesandbox.io/s/responsive-table-and-drawers-3yibj?file=/src/index.js

[jgiardino]

Here is a codesandbox that @jschuler shared that uses use-resize-observer to detect the size of the content area:
https://codesandbox.io/s/responsive-table-and-drawers-forked-on413?file=/src/components/table.js

Building on this POC, we should detect the size of the container then hide/show columns based on the container size. This This means that if someone resizes the quick start drawer or the window while the drawer is visible, then table columns with hide/show based on what can fit in the available space.

This is the new column order we're proposing:

• Name (always visible)
• owner
• time created
• cloud provider
• region
• status (always visible)

The proposed solution means that at smaller sizes, “region” then “cloud provider” columns are not visible. This also means that only the owner would be able to see this information at smaller sizes, because currently only the owner can access all details in the drawer.