Fixed the delete last token from API token table list

[vinay033]

Signed-off-by: vinay033 vsharma@chef.io

🔩 Description: What code changed, and why?

user cannot delete the last token in the table. The last option in the control menu is cut off. This is not a problem on any of the other auth pages since they all only have one control menu option.

I have added CSS changes to fix this issue.

⛓️ Related Resources

fixes #2798

👍 Definition of Done

I have added mat-select-panel CSS to fix for last element of table list.

👟 How to Build and Test the Change

STEP 1
inside the hab studio

[default:/src:0]# build components/automate-ui-devproxy/
[default:/src:0]# start_automate_ui_background
[default:/src:0]# start_all_services

STEP 2
open new window
go to automate UI path

$ cd components/automate-ui
and run the command 

npm run serve:hab

✅ Checklist

• I have read the CONTRIBUTING document.
• Tests added/updated?
• Docs added/updated?
• All commits have been signed-off for the Developer Certification of Origin.

📷 Screenshots

1. old behavior
   
2. after fix
   

[susanev]

@vinay033 only looking at the screenshots, could you push the menu up a bit more, so you can still see the 3-dot button? like when it displays below, but instead above.

[vinay033]

@vinay033 only looking at the screenshots, could you push the menu up a bit more, so you can still see the 3-dot button? like when it displays below, but instead above.

@susanev if we add changes to push menu up then it will be applying for both cases(when the menu opens down and when the menu opens in up for the last element) and the default position is changed for down.

1. up
   
2. down
   

[susanev]

all right, imma post in the ui team and see if any of them have ideas. ideally, it would reflect symmetrically over the 3-dot button.

[vinay033]

all right, imma post in the ui team and see if any of them have ideas. ideally, it would reflect symmetrically over the 3-dot button.

we can alternate show like this.

[SEAjamieD]

@susanev - i'm having a quick look at this - is the idea that when the control menu goes up, the list should be reversed as well?

[susanev]

@SEAjamieD no no, that doesnt need to change, only its position on the screen. i dont want it hiding the 3-dot button.

[SEAjamieD]

@susanev This is gonna take some wrestling with Material to figure out. Material naturally changes direction by default when it gets close to the bottom of the screen, but because I overwrote a bunch of the styles to fit our designs, it can't fire the way it's designed.

After desktop is done, i'll keep looking. @tarablack01 maybe has some ideas?

[susanev]

not a ton of urgency, other than we may want to close this pr and try again later.

[tarablack01]

@vinay033 What you can do is change the popover position if the item is last or lower in the list. So that you can have a popover position of above and below. Typically material does this automatically but as @SEAjamieD is may have been overwritten, if so we could also look into reestablishing the functionality. Ping me if you need assistance. 🙂

[SEAjamieD]

This is great @vinay033! This restores the initial functionality of the button so that it works the way material intended. Once UX has a say here, can you move this into styles.scss and replace the styling that is currently under chef-control-menu? This should be used globally.

This exposed a second problem, which I never noticed before that @susanev will need to answer. So, it appears the reason why Material, by default, has the dropdown display over the button, is because the button has no functionality when the menu is open.

To see what I mean, click on the control button to open the menu. Then, while the menu is open, click on the button again to close it. Nothing happens. It appears default functionality is "click outside to close". Update suggestions?

This also may be happening because we're sort of hacking it to work the way we want. This is definitely one of the components I'd like us to rebuild ourselves. Its not hugely complicated and its used a lot.

[SEAjamieD]

I think this is great @vinay033 - I left you a comment, requesting that you move these styles to the styles.scss file so that they are global!

There's another comment in there for UX so i'll wait to hear from them until approving. Thank you!

[vinay033]

I think this is great @vinay033 - I left you a comment, requesting that you move these styles to the styles.scss file so that they are global!

There's another comment in there for UX so i'll wait to hear from them until approving. Thank you!

These changes do not work globally because I have tested after putting this to style.scss file,
it is working fine with the token list but other places it looks like below

[susanev]

thank you for fixing this!!

[susanev]

just noticed that we seem to have lost toggle functionality on that 3-dot button. anyone know whats up with that?

[susanev]

oh lol, apologies for not scrolling up to see jamies comments. id like to either (1) get toggle working (2) display over the button as jamie described. either is okay with me.

[susanev]

@vinay033 im still not seeing the toggle fixed in this?

[vinay033]

@vinay033 im still not seeing the toggle fixed in this?

@susanev toggle is working, what issue you are facing with a toggle so I can explain to you.

[susanev]

@vinay033 oh i dont mean the toggle item in the dropdown. i mean the 3-dot button. previously if you pressed the 3-dot menu it would open, but if you pressed it again it would close. right now, you can press it to open but pressing it to close does not close it. happy to zoom to demo anytime.

[vinay033]

@vinay033 oh i dont mean the toggle item in the dropdown. i mean the 3-dot button. previously if you pressed the 3-dot menu it would open, but if you pressed it again it would close. right now, you can press it to open but pressing it to close does not close it. happy to zoom to demo anytime.

Ok, I will check it again and get back to you. :)

[vinay033]

@vinay033 oh i dont mean the toggle item in the dropdown. i mean the 3-dot button. previously if you pressed the 3-dot menu it would open, but if you pressed it again it would close. right now, you can press it to open but pressing it to close does not close it. happy to zoom to demo anytime.

@susanev I have fixed the toggle issue, please check it.

[tarablack01]

Toggles 😊

This shouldn't be in global css file