BREAKING: HA 2023.4 no longer uses app-drawer-layout

[Mariusthvdb]

breaking all custom cards that use this functionality

please see #beta in Discord.

app-drawer-layout was replaced by mwc-drawer
link to Discord: https://discord.com/channels/330944238910963714/427516175237382144/1090920193947074642

I did test the fix that is mentioned, to replace

querySelector("app-drawer-layout partial-panel-resolver")

with

querySelector("app-drawer-layout partial-panel-resolver, mwc-drawer partial-panel-resolver")

but can only replace

app-drawer-layout in the .js file with mwc-drawer and that does Not fix the card

[elchininet]

Hi @Mariusthvdb,
In HA 2023.4 not only app-drawer-layout has changed. There are multiple changes there so it cannot be fixed by just changing that selector.
I‘ll let this issue open until a version that supports HA 2023.4 is released.
Regards

[Mariusthvdb]

Please do, Bram also announced new changes are to be expected.

Don't know which, maybe Kiosk mode devs can connect with Bram cs.

[elchininet]

Hi @Mariusthvdb,
This pull request contains the necessary changes to make it compatible. I‘ll keep it updated if something changes in the development of the new HA version.
Regards

[Mariusthvdb]

amazing, thank you very much, please release! or maybe let us download to test?

[elchininet]

Hi @Mariusthvdb,
@NemesisRE should be back soon and he will take care of the releases, for now you can do this to test it:

• Clone the repo: git clone https://github.com/NemesisRE/kiosk-mode.git
• Enter in the folder cd kiosk-mode
• Checkout the branch git checkout prepare_for_ha_2023.4
• Run yarn yarn install
• Build the plugin yarn build
• Copy the JavaScript file in dist/kiosk-mode.js
• Uninstall the current plugin from HACS
• Install the compiled file manually

Note: If you don‘t know or cannot compile the code you can get a compiled version of the code here.

Take into account that branch has all the changes contained in #25 #26 and #28

Regards

[gateriderz]

@elchininet ,

I compiled the new kiosk-mode.js from the branch, removed the old one and replaced with the new one:

kios_mode not working and I get the following errors in the log:

https://***/hacsfiles/kiosk-mode/kiosk-mode.js:1:5302 Uncaught TypeError: Cannot read properties of null (reading 'querySelector')
https://***/hacsfiles/kiosk-mode/kiosk-mode.js:1:5206 Uncaught TypeError: Cannot read properties of null (reading 'shadowRoot')

Thanks

[elchininet]

Hi @gateriderz,
In which version of HA are you testing?
Also if there is a longer stack trace it will be helpful.
I will take a look at it later on this afternoon.
Regards

[gateriderz]

Hi @elchininet,
Thanks for your quick reply.
I run Home Assistant 2023.4.0b2

This is the only trace I have under my logs:

2023-03-31 08:30:20.393 ERROR (MainThread) [frontend.js.latest.202303300] https://***/hacsfiles/kiosk-mode/kiosk-mode.js?hacstag=497319128178:1:5302 Uncaught TypeError: Cannot read properties of null (reading 'querySelector')
2023-03-31 08:30:20.425 ERROR (MainThread) [frontend.js.latest.202303300] https://***/hacsfiles/kiosk-mode/kiosk-mode.js?hacstag=497319128178:1:5302 Uncaught TypeError: Cannot read properties of null (reading 'querySelector')

[elchininet]

Thanks @gateriderz,
I thought that the error was in the current version. The branch is prepared for 2023.4.0b1, during the development of the new version I‘ll be modifying it until the final 2023.4 is released. I‘ll check the changes in 2023.4.0b2 and I‘ll apply them to the branch.
Regards

[elchininet]

Hi @gateriderz,
I cannot reproduce it in 2023.4.0b2. Please verify that you have the correct version.
Go to the Chrome dev tools, Network tab, filter the resources by kiosk and select kiosk-mode.js. Then search in the code for APP_TOOLBAR, make sure that you get t.APP_TOOLBAR = "app-toolbar, .toolbar".
Let me know if that is the case and I‘ll try to debug further what is happening.
Regards

[nelsonamen]

Can you deploy a beta?

[Mariusthvdb]

Things to consider:

Menu swipe in from the left is removed from the app.
Hence the hamburger menu is the only way to reach the menu.

It might be a good idea to notify users about that.
Also, it would be awesome if somehow the swipe could be found a way back in Kiosk mode ;/)

Don't know if at all possible ...

[elchininet]

n you deploy a beta?

Hi @nelsonamen, the releases will be done when the owner of the repo is back. For now you can try it with the explanation that I gave above.
Regards

[elchininet]

Things to consider:

Menu swipe in from the left is removed from the app. Hence the hamburger menu is the only way to reach the menu.

It might be a good idea to notify users about that. Also, it would be awesome if somehow the swipe could be found a way back in Kiosk mode ;/)

Don't know if at all possible ...

Yes, that would require a change on the README with an statement about what occurs if one hides the sidebar.
About enabling the swipe from the plugin, that would require more than simple CSS classes, but depending on the final structure of the elements it could be achievable.