Fix shared component screenshot update (#31568)

* build: fix shared component screenshot update

The yarn command `test:storybook:update` was running twice
`playwright-sceenshots`. However this script is using ryuk to delete
remaining containers/etc and ryuk does the cleanup after 50sec of idle.
So on the script second call, ryuk container was still running and the
script failed.

This PR introduces a shell script to install the dependencies and to run
the tests in the same playrwright-screenshots call.

* Update packages/shared-components/scripts/storybook-screenshot-update.sh

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

* Update packages/shared-components/scripts/storybook-screenshot-update.sh

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

* doc: fix duplicated documentation after github commit

---------

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

packages/shared-components/package.json

@@ -43,7 +43,7 @@
         "lint:types": "tsc --noEmit --jsx react",
         "test:storybook": "test-storybook --url http://localhost:6007/",
         "test:storybook:ci": "concurrently -k -s first -n \"SB,TEST\" \"yarn storybook --no-open\" \"wait-on tcp:6007 && yarn test-storybook --url http://localhost:6007/ --ci --maxWorkers=2\"",
-        "test:storybook:update": "playwright-screenshots --entrypoint yarn --with-node-modules && playwright-screenshots --entrypoint /work/node_modules/.bin/test-storybook --with-node-modules --url http://host.docker.internal:6007/ --updateSnapshot"
+        "test:storybook:update": "playwright-screenshots --entrypoint /work/scripts/storybook-screenshot-update.sh --with-node-modules"
     },
     "resolutions": {
         "playwright": "1.57.0"

packages/shared-components/scripts/storybook-screenshot-update.sh

@@ -0,0 +1,32 @@
+#!/bin/bash
+#
+# Update storybook screenshots
+#
+# This script should be used as the entrypoint parameter of the `playwright-screenshots` script. It
+# installs the yarn dependencies, and then runs `test-storybook` to update the storybook screenshots.
+#
+# It expects to find a storybook instance running at :6007 on the host machine. It also requires that
+# `playwright-screenshots` is given the `--with-node-modules` parameter.
+#
+# Example:
+#
+#        test-storybook --url http://localhost:6007/
+#        playwright-screenshots --entrypoint /work/scripts/storybook-screenshot-update.sh --with-node-modules
+#
+#
+# Note: even though this script is small, it is important because the alternative is running
+# `playwright-screenshots` twice in quick succession (once to do `yarn install`, a second to do the
+# actual updates): and that fails, because running `playwright-screenshots` without actually starting
+# Testcontainers leaves a ryuk container hanging around for up to 60s, which will block the second
+# invocation.
+
+set -e
+
+# First install dependencies. We have to do this within the playwright container rather than the host,
+# because we have which must be built for the right architecture (and some environments use a VM
+# to run docker containers, meaning that things inside a container use a different architecture than
+# those on the host).
+yarn
+
+# Now run the screenshot update
+/work/node_modules/.bin/test-storybook --url http://host.docker.internal:6007/ --updateSnapshot