Console is only rendered correctly if page is reloaded

[renataogarcia]

When I first logging the console doesn't get updated. If I reload the page with F5 it works. Also, if I login with a different account it will show the previous account and not the actual account.

[WTFender]

@renataogarcia Thanks for the feedback! I think I know what's going on and will try to have a fix out this weekend.

The extension tries to perform a reload of the page (to apply the customizations) during your login. This reload occurs after a slight delay, however, sometimes this delay is not long enough and the reload fails due to network conditions, page load speed, etc.

I'll start with exposing the "reload delay" setting via the extension - I believe increasing this delay may resolve the issue.

[renataogarcia]

@WTFender Thanks for the quick response and making such an useful extension!

You are right! I've cloned it locally and increasing the delay indeed fixed the problem of not applying the console customizations. However, with delays is always a hit or miss... Maybe could use a solution based on Mutation observers which would be more robust?

I've tried this and it worked nicely with the extension:

export function waitForElement<TElement extends Element = HTMLElement>(
  selector: string,
  options: {
    timeout?: number;
    parentNode?: ParentNode;
  } = {},
): Promise<TElement> {
  const { timeout = 3000, parentNode = document } = options;

  return new Promise((resolve, reject) => {
    const element = parentNode.querySelector<TElement>(selector);

    if (element) {
      resolve(element);
      return;
    }

    const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        Array.from(mutation.addedNodes).forEach((addedNode) => {
          if (addedNode.nodeType === Node.ELEMENT_NODE) {
            const targetElement = (addedNode as Element).querySelector<TElement>(selector);

            if (targetElement) {
              observer.disconnect();
              resolve(targetElement);
            }
          }
        });
      });
    });

    observer.observe(document.documentElement, { childList: true, subtree: true });

    setTimeout(() => {
      observer.disconnect();
      reject(new Error(`Timeout: Element not found with selector "${selector}"`));
    }, timeout);
  });
}

and then use it in customizeConsole like:

  const footer = await waitForElement('#awsc-nav-footer-content');
  const footerLbl = await waitForElement('div._awsc-footer__inner__content__center_swu42_106 > span',{parentNode:footer});

Happy to create a PR for this change if you like.

I also noticed that neither increasing the delay or waitForElement fixes the problem of not applying the color and the profile name for the SSO. I'm not sure if I'm setting it up correctly - I give a name and a color in the profiles window. I think it might be something else because it worked once with just these settings, and once it works it becomes sticky (it never changes when you log with another account). Maybe I should open a separate issue for this?

[WTFender]

The mutation is definitely more reliable and makes sense to go that route. It'd be awesome if you want to open a PR, I'll get it reviewed quick.

The SSO issue sounds different, but I don't seem to be able to replicate.

• Are you on the latest version (1.2.2)? Chrome?
• Do you have the Label/Color header & footer settings checked?
• When you're logged in with IAM, is the entire header/footer colored or just the top right?
• Does your SSO role name start with AWSReservedSSO_? (check in the top right menu)

If you've got the extension side-loaded, you can enable this debug flag to potentially see if theres errors thrown on your SSO console.

[WTFender]

Started a branch with the mutation observer. https://github.com/WTFender/aws-sso-extender/tree/fixPageReload

One gotcha is the element IDs and class names are dynamic, but they don't seem to change often. Ex: div._awsc-footer__inner__content__center_swu42_106

[renataogarcia]

@WTFender Thanks for looking into this! I've created the PR with further changes. Can you please have a look when you get a chance?

Created a new issue color/label #20