On bus screen placeholder app

[robbie-sundstrom]

Asana task: [add-on] "hello world" version of on-bus screens

Description

• Tests added?

[digitalcora]

I noticed this isn't working as intended (the blue placeholder doesn't show up, only a blank white screen), and I think it's because this is conflating the layout name with the widget that's being placed in a slot of the layout. To try and break it down:

• The Placeholder widget on the backend has a widget_type/1 of :placeholder. Normally, that would then appear in this mapping: placeholder: Placeholder. The widget type string is mapped to a React component, and the rest of the widget's serialized fields are passed as props to that component.
• So, why doesn't this error? Because on the frontend, layouts are also mapped to components, and on this screen type we have a layout named body defined. When a layout is rendered on the frontend, the matching component receives each of the slot names as a prop, with the value being all the fields of the widget that was chosen for that slot (including the type field, so it can be passed straight into the generic Widget component).
• Putting it all together: The body layout is selected (it's the only layout), and the placeholder widget is chosen to go in the slot named placeholder (the only place it can go). body on the frontend is mapped to the component Placeholder. So this does the equivalent of <Placeholder placeholder={{type: "placeholder", color: "blue", ...}} /> Then Placeholder has no prop named placeholder, so that's silently ignored and it doesn't render with any particular color.

In conclusion, even the most minimal possible layout requires two React components: One for the layout itself (which will receive as props a mapping of slot-name to widget-fields), and one for an actual widget that will be placed in the layout. You can see an example of one of these "layout-components" in normal_body.tsx in most screen types.

[robbie-sundstrom]

Thanks for breaking this down, this explanation brought it all together for me and I got it working again! Had been trying to debug why the Widget for placeholder was not receiving the correct props.

[digitalcora]

Looks good! Had a couple non-blocking nitpicks. Let's merge that screens-config-lib PR, then update this one with the proper hash.