Support for experimental plan management tab in UI

[hughns]

This PR adds a feature to allow a plan management tab to be added to the My Account screens.

When enabled it looks like this:

It attempts to resize the iframe to match the size of the embedded content. However, in current testing this has a habit of growing over time.

[cloudflare-workers-and-pages]

Deploying matrix-authentication-service-docs with    Cloudflare Pages

Latest commit:	55f559e
Status:	✅  Deploy successful!
Preview URL:	https://de2da643.matrix-authentication-service-docs.pages.dev
Branch Preview URL:	https://hughns-plan-management.matrix-authentication-service-docs.pages.dev

View logs

[sandhose]

Looks alright, a few nitpicks on how things should be on the react side

[sandhose]

Instead of polling, we could use a MutationObserver to recalculate. Plus, to setup the observer with a ref callback, so that we get it as soon as we have the DOM node ready.

We also don't need to track the iframe height as state to avoid re-renders, so we end up with something like

  const calculateHeight = useCallback((iframe: HTMLIFrameElement) => {
    const height =
      iframe.contentWindow?.document.body.parentElement?.scrollHeight;

    if (height) {
      iframe.height = `${height}px`;
    } else {
      iframe.height = "500px";
    }
  }, []);

  const ref: Ref<HTMLIFrameElement> = useCallback(
    (iframe: HTMLIFrameElement) => {
      calculateHeight(iframe);

      if (iframe.contentWindow) {
        const iframeDocument = iframe.contentWindow.document;

        const observer = new MutationObserver((_mutationsList) => {
          calculateHeight(iframe);
        });

        observer.observe(iframeDocument.body, {
          childList: true,
          subtree: true,
          attributes: true,
        });

        return () => observer.disconnect();
      }
    },
    [calculateHeight],
  );

  return (
    <iframe
      title="iframe" // no proper title as this is experimental feature
      ref={ref}
      onLoad={(e) => calculateHeight(e.target as HTMLIFrameElement)}
      src={planManagementIframeUri}
      scrolling="no"
    />
  );

[hughns]

I can't get the observer to fire after set up. I've tried with a ResizeObserver too. Testing on Chrome and Safari. I will try again tomorrow.

[hughns]

I found two problems:

1. The node corresponding to the iframe document body changed, so we weren't always observing the right thing. The fix was to re-observe after the iframe has loaded.
2. Some rendering changes do not correspond to a mutation on the iframe document body DOM. This is fixed by doing an extra calculation after a delay.

I tried using the resize observer again, but it still didn't fire as expected.

[sandhose]

Not convinced that this has to be a URL? Like if we want to have a relative link here, it won't get accepted?

[hughns]

I suppose someone might want to configure it with a relative URL.

Are you thinking that it is just a string that is passed through without validation? Or are you thinking the value is parsed from config relative to http.public_base and then the site config still return a full URL? Or something else entirely?

[sandhose]

I'm indeed thinking of just passing it as as string without validation

[hughns]

I'm indeed thinking of just passing it as as string without validation

I've converted into a String with some additional doc comments in d6dd647

[sandhose]

Grr, I had this not submitted since yesterday

[sandhose]

This looks great, thank you!