frontend: Add detail drawer mode

[vyncent-t]

Introduce Detail Drawer Mode in Headlamp

For issue #1354

Description

This PR introduces a new 'Detail Drawer' mode to Headlamp, providing users with the option to view details in a side drawer. This enhances the user interface by allowing for a more flexible and efficient way of displaying detailed information without navigating away from the current view.

Features

• Implemented the Detail Drawer mode.
• Added toggle functionality to enable/disable the Detail Drawer view.
• Ensured seamless integration of the side drawer with existing UI components.

Verification

• Verified that the detail information is accurately displayed in the drawer.
• Checked the responsiveness and consistency of the drawer across different screen sizes and orientations.

WIP

Progress

• No longer using placeholder button to open and close drawer
• Solved issue where clicking on a drawer link in a different list view would render pod list view
• Solved issue where drawers were not responsive
• Working drawer mode toggle in general settings, toggle switch 'Details on list view'

Issues

[vyncent-t]

Commit Notes

• Fixes broken switch in settings, used to only turn enable/disable once due to reading from localStorage and not global state
• Fixed detail drawer enabled mode from setting back to default, improved local storage usage fixed it

[vyncent-t]

Note

• fixes the issue where changes made would not run with new UI

[vyncent-t]

note

• fixes translation
• need to fix label *

[vyncent-t]

Work note

Progress

• Pro: When the drawer is on open mode, you can now click the button which will minimize it to the closed mode off to the right
• Pro: Able to see behind drawer with no backdrop

Issues

• Issue: When the drawer is in the Closed Mode, there is no pushing the content to the middle of the screen, it sits on top of the right of the page and not next to it
• Issue: The main content is still unable to be clicked on, which could be good since you can bet focused on clicking links in the main menu?
• Issue: When refreshing the page on the settings view, the drawer mode is set to enabled and open by default, it needs to be taking the state of the last made changes
  • Currently if you turn off the drawer mode it will be turned on automatically when refreshing the settings page
• Issue: The "flat" drawer is not rendering anything inside it
  • it also does not stay on the screen
  • It leaves when you move pages

[vyncent-t]

Work note

Progress

• Pro: When the drawer is on open mode, you can now click the button which will minimize it to the closed mode off to the right
• Pro: Able to see behind drawer with no backdrop

Issues

• Issue: When clicking the enable button the box is not matching the enable
• Issue: When the drawer is in the Closed Mode, there is no pushing the content to the middle of the screen, it sits on top of the right of the page and not next to it
• Issue: The main content is still unable to be clicked on, which could be good since you can bet focused on clicking links in the main menu?
• Issue: When refreshing the page on the settings view, the drawer mode is set to enabled and open by default, it needs to be taking the state of the last made changes
  • Currently if you turn off the drawer mode it will be turned on automatically when refreshing the settings page
• Issue: The "flat" drawer is not rendering anything inside it
  • it also does not stay on the screen (fixed to where it will remain on screen when close allowing to navigate to other pages)
  • It leaves when you move pages (fixed to where it will remain on screen when close allowing to navigate to other pages)

[vyncent-t]

Commit fix pushed

• Issue: When clicking the enable button the box is not matching the enable (FIXED, now when clicking the enable drawer mode on or off the drawer render will match)
• Issue: The main content is still unable to be clicked on, which could be good since you can bet focused on clicking links in the main menu ( FIXED, now able to use main page content when drawer is in mini mode)
• Issue: When refreshing the page on the settings view, the drawer mode is set to enabled and open by default, it needs to be taking the state of the last made changes (FIXED, now when choosing on or off for enable button, when refreshing the page or leaving the page the state is saved and renders on or off)

[vyncent-t]

Solved by creation of working placeholder button

• Issue: When the drawer is in the Closed Mode the top bar content is squished

[vyncent-t]

After a considerable amount of time spent on working in a closed drawer version (a squished column to the right of the screen) I think the better solution would be to use a floating drawer open button which has fixed a number of issues related to the original squished drawer idea

Fixes

• Issue: When the drawer is in the Closed Mode the top bar content is squished (FIXED, created a working placeholder button)
• Issue: When the drawer is in the Closed Mode, there is no pushing the content to the middle of the screen, it sits on top of the right of the page and not next to it (FIXED, created a working placeholder button)
• Issue: The "flat" drawer is not rendering anything inside it (FIXED, created a working placeholder button)
• Issue: When the drawer is in the Closed Mode the top bar content is squished (FIXED, created a working placeholder button)

---

Issues

• Issue: Drawer state is reset when refreshing the page
• Placeholder button now implemented, but not keeping the same shape when on settings page

Pod view

Settings

Solved

Pod

Settings

[vyncent-t]

Solved

• Issue: Placeholder button now implemented, but not keeping the same shape when on settings page

[vyncent-t]

Solved

• Issue: Drawer state is reset when refreshing the page (FIXED, now pulling and setting open status from local storage for drawer mode and open drawer)

[vyncent-t]

ISSUE

• Currently the iframes render within another iframe, need actual content within frame

[illume]

Some meeting notes...

• We need to get the design considered more I think
  • What should the text be in the settings
    • Details on side of list view
    • Details at same time as list
    • View in details side draw
    • Details on list view <---- chose this one for now
  • Does this setting need an extra info tooltip for a longer description of what it is?
    • Decide later.
  • What text should be for the drawer button name?
    • No open drawer button.
  • Should there be a button to leave the drawer open at all? Maybe it should be always open, with no option to toggle it (except in settings).
    • no there should not be a button
  • What would a mobile view look like?
    • The drawer doesn't make sense in mobile mode, so we disable it in mobile view.
  • Should it squish the table, or be an overlay?
    • The issue asks for a Drawer, so will do a Drawer.
      • One issue with this is that all the table data can't be seen when the drawer is opened
      • For a large screen, it would probably be better if the table data can all be seen
  • Should the open drawer button be like the sidebar?
    • No, just like a mui drawer with a backdrop
• Persistence of the drawer
  • We will keep it so the drawer is not persistent. When the view changes, the drawer won't be there.
• iframes
  • We won't do iframes, because it's a bit hacky. It loads the whole page without a way to disable sidebars/top bars and other parts. The UX is more difficult with iframes.
• We need a URL for the view with the drawer open. So if someone copies the URL to someone else they would have the same view.
  • this URL scheme doesn't work because the component will reload and navigate
    • /c/minikube/pods
    • /c/minikube/pods/kube-system/coredns-xkjxckvjxkcjv
    • /c/minikube/pods/kube-system/coredns-xkjxckvjxkcjv/drawer <- this one would show the list and the pod details at the same time.
  • we want to not reload the page, so use query params?
    • /c/minikube/pods?name=coredns-xkjxckvjxkcjv&namespace=kube-system

---

experiments in drawer-details2 branch
See frontend/src/components/pod/Details.tsx to take the name and namespace from query params or params. So if there are query params it uses those. This should allow using the Details component inside the List component.

The next step is to change the Link inside frontend/src/components/common/Link.tsx to when drawer setting is turned on to produce links like /c/minikube/pods?name=coredns-xkjxckvjxkcjv&namespace=kube-system instead of /c/minikube/pods/kube-system/coredns-xkjxckvjxkcjv

Add a method to get the searchParams for a resource in headlamp/frontend/src/lib/k8s/cluster.ts something like:

    getListPlusDetails() {
      // return a link like this: /c/minikube/pods?name=coredns-xkjxckvjxkcjv&namespace=kube-system
      // returns listRoute + ?name=&namespace=
    }

[vyncent-t]

Dev note:
This push adds working functionality between the state of isDetailDrawerEnabled and the kind of list link that will render on the pod details view

• The idea is to change the links based on if the isDetailDrawerEnabled is set to on or off
  • If the isDetailDrawerEnabled is set to on, we pass it as a param (drawerEnabled?) to the Link component, which will then render the route with the '/drawer' added to the url
  • the toggle setting option for Details on list view can be used to turn on and off this link render
    
  • placeholder route has been created in the router PodDrawer
    

To test:

• navigate to the general settings and toggle the Details on list view button on/off
• in a different window navigate to the pods list view
• hover mouse over each link to read if the link contains /drawer at the end (present if set to on, normal link if set to off, both will direct you to the same place)

[vyncent-t]

Changes

• Changed the git commit style to include changes made
• URL now responds to clicking on and off of a link
  • the pod list url should be normal when no drawer is open and should display related link when drawer is open

[vyncent-t]

Feedback notes

• The drawer should have no backdrop and allow users to click on contents of the page behind the drawer

  • This can be done by use of the "persistent" field rather than the default temporary
  • The page view should NOT be squished to fit both the drawer and the main content, the drawer should be appearing and disappearing from the right

• The drawer should be persistent as a sperate component and not tied to the list render

  • This means users should be able to view a pod details drawer, click to a new resource but still allow the pod details drawer to exist

• When the screen is small the drawer should render in from the bottom

• The drawer should feature a Close button

• The drawer should be able to render different views within the drawer while not redirecting pages

[vyncent-t]

last push fixes drawer open close on pods with no need for button

[vyncent-t]

Feedback notes

WIP

• The drawer should be able to render different views within the drawer while not redirecting pages

To do

• When the screen is small the drawer should render in from the bottom

Solved

(SOLVED using persistent)

• The drawer should have no backdrop and allow users to click on contents of the page behind the drawer
  • This can be done by use of the "persistent" field rather than the default temporary
  • The page view should NOT be squished to fit both the drawer and the main content, the drawer should be appearing and disappearing from the right

---

(SOLVED: detached list view from being the parent of the drawer, list view now provides link information, you must include the drawerEnabled prop and reformat the name column if you wish to use drawer mode for that link

• The drawer should be persistent as a sperate component and not tied to the list render
• This means users should be able to view a pod details drawer, click to a new resource but still allow the pod details drawer to exist

---

(SOLVED: now features close button)

• The drawer should feature a Close button

[vyncent-t]

Demo video

detailsdrawerdemo.mp4

[vyncent-t]

not sure if I had the same changes as the video made a push just to update

[vyncent-t]

last push

• fix logic for drawerEnabled being in PureLink
• clicking drawer links now updates the page URL with no navigation

[vyncent-t]

last push

• solves errors in storybook tests that needed the missing providers for redux

[vyncent-t]

last push:

I think this fixes the typescript error for kubeObject & void return

setting the slice state for the current resource to be just the json part of the kubeObject being set (we were extracting just the json part anyway to render in the drawer from the selectedResource state (DetailsDrawer.tsx line 9)

DetailsDrawer

Link