Community XB+SDDS integration testing

Change to testing

@kristen pol - Picking it to test as per the steps.

I want multiple people testing this one so unassigning.

For anyone who wants to test here, just follow the steps and add a comment with your findings.

Thanks!

Adding my findings here, I will keep updating my comment as i encounter new issues.

Issue 1
Drupal\Core\Render\Component\Exception\ComponentNotFoundException: Unable to find component "starshot_demo:starshot-case-study2" in the component repository. [The "starshot_demo:starshot-case-study2" plugin does not exist

On my previous setup i took the latest pull and it seems this component was removed from the codebase and i got hit with this error.

At first a note about the instructions for setting up the test environment in ddev. the nvm and npm steps are running on the host. instead it would be preferable to keep everything within the web container. already tested but i run into a problem executing the command within the correct path, i have to ssh into the container instead. already ran things by @rfay. as soon that is sorted out i will update the docs.

About the test, i not entirely went through rebuilding the entire page. but a list of a few initial observations i've made along the way. would have to revisit to take a closer look when i have more time.

1. Getting to xb/node/1/ i've clicked into the existing components and started removing them stepwise by pressing backspace to get to a clean canvas. after the two column wrapping element was removed i've pressed backspace another time when there was no layer in the sidebar left, and i ran into the following reproducible error:

Getting to Error message
Warning: Trying to access array offset on null in Drupal\experience_builder\Form\ComponentPropsForm->buildForm() (line 63 of modules/contrib/experience_builder/src/Form/ComponentPropsForm.php).
Drupal\experience_builder\Form\ComponentPropsForm->buildForm(Array, Object, Object)
call_user_func_array(Array, Array) (Line: 528)
Drupal\Core\Form\FormBuilder->retrieveForm('component_props_form', Object) (Line: 279)
Drupal\Core\Form\FormBuilder->buildForm(Object, Object) (Line: 73)
Drupal\Core\Controller\FormController->getContentResult(Object, Object)
call_user_func_array(Array, Array) (Line: 123)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->Drupal\Core\EventSubscriber\{closure}() (Line: 593)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 121)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->wrapControllerExecutionInRenderContext(Array, Array) (Line: 97)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->Drupal\Core\EventSubscriber\{closure}() (Line: 183)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 76)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 53)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 28)
Drupal\Core\StackMiddleware\ContentLength->handle(Object, 1, 1) (Line: 32)
Drupal\big_pipe\StackMiddleware\ContentLength->handle(Object, 1, 1) (Line: 106)
Drupal\page_cache\StackMiddleware\PageCache->pass(Object, 1, 1) (Line: 85)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 36)
Drupal\Core\StackMiddleware\AjaxPageState->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\StackedHttpKernel->handle(Object, 1, 1) (Line: 709)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)

the path is then: xb/node/1/component/two-column-uuid

2. the context menu that opens when you control click an element in the left sidebar remains open after the first click if you keep the ctrl button pressed in microsoft edge, but in safari you have to keep the mouse AND the control button pressed otherwise the context menu immediately closes. in safari it is quite the hassle to interact with that context menu because of that detail.

3. adding the first component is easy cuz it is a one column element. but the selection process finding the correct component is troublesome. the default components have often a transparent background (the preview modal has also a low contrast to distinguish and separate it from the background). that way it is hard and in some cases close to impossible to recognize the elements. i am unable to find the "flexible by design" component for example ( until i realized it is chopped together from a head line, four column, and card)

4. the list of components under default components is also hard to skim and process. the cognitive load is rather high. it is mainly based on reading and a proper knowledge of the component label. you as the user have no other direct cue. you have to hover each element to see what it is about and then memorize which label stands for which content. i have a small working memory something like hero is sort familiar and you know what to expect but then you also have the problem of identical labels with different content. and point 3 adds to the problems in point 4.

5. i am unable to see any focus outlines for the controls. when i try to tab after i reloaded the page i am tabbing within the canvas (there i see a few elements with focus outlines) but i dont see anything for the controls when the end of focusable elements in the canvas is reached. i am unable to see any focus outline in the top bar or sidebars. and i am also unsure how i might get to those controls to interact and control them by keyboard?

6. if you are on a blank canvas it feels odd you have to wait until you see the blue horizontal bar before you drop the component. i would have assumed on a blank canvas it would be possible to simply drop the "create ambitious experiences" component onto the blank canvas since it is the first component dropped?

7. After dropping the "create ambitious experiences" component i see a dotted greyish line (rgb(204,204,204) against the blue component background (rgb(2,156,222)) which has a color contrast of oly 1.9:1, it has to have at least 3:1. within the dotted rectangle i read slot. clicking the dotted rectangle has no effect. the element seems not to have any affordance or possible action. but i just tried, i've dropped a button component within the dotted outline but the button got added after the create ambitious components. i had to redrag it until the blue horizontal line within the dotted outlined showed then the button got moved into the component as a child. as soon as i click the button in the desktop view to get to the settings in the right sidebar the whole canvas disappears with the note drupal.org refused to connect.

but i still see a representation with the blue button label and the blue dotted outline as well as the blue add component button. due to the lack of other options i simply pressed the add component on the desktop view but i was unable to drop another button in. tried then the same on the add component button the mobile view and there i was able to add another and that way the desktop and mobile got updated and visible again (the screenshot shows three since i ran into the same problem another time before i was able to take a screenshot)

8. when i've added a heading next and while entering/updating the content i get flashing content while the content on the canvas is getting updated (see flash.mp4 - the interaction in microsoft edge). that flashing in the side of the eye while the focus is on the content field is troublesome and a trigger - made me nauseas and dizzy.

9. at first i thought there would be an option when adding a section to select between one up to four columns but then i spotted the four column component. but i would have expected to set the columns a section has with the sections button or in the right sidebar not based on the selection of which component is picked. another problem is that the different number of columns components are scattered across the list of components which is ordered alphabetically. and there is the same "slot problem" the "create ambitious experiences" component had, there is no real affordance or cue, and none of the slots is clickable so some setting option is shown in the right sidebar.

10. after the four column layout with the four card i dont know how to add another section. there is no add section button nor i am able to drag a component in. i did a workaround, cloned the one column headline and dragged that duplicated headline underneath the four column, then i was able to add a new components.

Wow! Great testing feedback!!! I haven't read the details but there is a LOT :D

We'll need to make issues for any that should be fixed before Barcelona (we have a week o_O) and perhaps the others get put in a laundry list issue for post-Barcelona.

Fyi, I just tested using MR from 🐛 XBEndpointRenderer & processResponseAssets() do not support `ajaxPageState` ⇒ duplicate CSS/JS loading Needs review ...

It took me a few tries, but I made it through all components except the last one in one go... I had to side step some issues (e.g. dragging certain things, can't upload), but this is SO DEMOABLE if you know what *not* to do :D

https://youtu.be/SAir2OxwMS4

Going through feedback from #6:

• 0. I updated the npm i and npm run build to use ddev and used that today and it seemed to be fine... I removed nvm
• 1. Interesting... I'm not sure I've seen that one (delete the default things all the time) but note this issue: 📌 Update default config to make a fresh install result in an XB UI with an empty canvas Fixed
• 2. This one may be a UX XB bug that needs an issue... would need to check the issue queue
• 3. The preview is being fixed here 🐛 The component preview should have a background: include theme's global asset libraries for component preview Needs work
• 4. Note that this design system is specifically coming out of the Drupal.org redesign work so the OOTB components are tied to to that... there will likely be tweaking of names and what's available before Singapore
• 5. This one may be a UX XB bug that needs an issue... would need to check the issue queue
• 6. This one may be a UX XB thing that needs an issue... would need to check the issue queue
• 7. This one may be a UX/a11y XB bug that needs an issue... would need to check the issue queue
• 7(cont'd) The button link issue is one I've run into several times so I end up changing the button using the Layers so this needs an issue if it doesn't exist yet
• 8. I think this may be the issue for the flashing: 🐛 Remove flickering when preview is being updated Needs review
• 9. We can consider further whether the One/Two/Three/Four Columns make sense as separate components... we can use Grid for that but I'm not sure if that's less obvious for a user... perhaps a Columns one for simple 1/2/3/4/etc and then the Grid for more complex things... still TBD
• 10. Yeah, I struggled with getting the testimonial right below the cards in my video (see above)... so it ended up outside the container... but they are still cleaning up dragging/dropping so we'll see where it's at once that gets clean up a bit
• 11. We are building based on the Drupal.org designs and that's what they have: 📌 [META] Create updated custom components for Starshot Demo Design System Fixed

I don't think I full processed all the feedback from #6 but I'd like Lauri to take a look to see if any of these must be addressed before Barcelona.

Regarding #5

@guptahemant You'll need to remove the old components (ending in number 2 and 3) or start with fresh install of SDDS code.

Otherwise, you've linked to the correct issues.

As I noted in Slack, we should probably include this to the ddev setup step

ddev config --nodejs-version=21

Thanks for adding that 🙏

I followed development guide and then created a page as per design. Few issues/observations I noticed:

1. In the left side bar, when I right click on the components added, a list of options such as Edit , Duplicate, Move and Delete appears. But on moving the mouse, the options disappear and I was unable to select an option using mouse click. However, I can use the options using navigation keys.
2. It took me more than one attempt to drag and place a component in page. Sometimes I drag the component to the place I need it to be displayed, but on releasing mouse, it will not be placed
3. The preview is not clear and this makes it hard to identify which components should be added as per design.

Thanks 🙏 the last one is a known issue (noted in #8). The other two could be added as XB UX issues if they don’t already exist.

Did some cleanup/tweaks in other issues, so did another round of testing just now:

• I'm using this MR branch so I can see props forms when there are images: https://git.drupalcode.org/project/experience_builder/-/merge_requests/306
• I'm using the change to ui/src/services/sections.ts from this issue to see new sections: 📌 Create MR with SDDS Sections so XB demo can use MR patch Needs review
• I also changed most of the XB components to "obsolete", prefixed the remaining with "XB", and disabled Olivero so the Teaser component doesn't show up

This video shows me going through all the components one by one:

https://youtu.be/INyAYZ0uyG0

This video shows me going through the new sections from 📌 Create MR with SDDS Sections so XB demo can use MR patch Needs review :

https://youtu.be/mdX2WVEwvS8