Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[React@18 QA] UX (User Experience view) #211063

Closed
6 tasks done
maryam-saeidi opened this issue Feb 13, 2025 · 2 comments · Fixed by #212272
Closed
6 tasks done

[React@18 QA] UX (User Experience view) #211063

maryam-saeidi opened this issue Feb 13, 2025 · 2 comments · Fixed by #212272
Assignees
Labels
Team:obs-ux-management Observability Management User Experience Team

Comments

@maryam-saeidi
Copy link
Member

Meta issue: #210001

🦅 Summary

This ticket is about testing the UX (User Experience view), including adding a small test plan + data generation guide for this process in the related plugin. This seems to be related to RUM data. @fkanout might know more about how to generate data for this view.

Acceptance criteria

  • Test React@18 for UX (User Experience view)
  • Add a small test plan + data generation guide to the ux plugin

How to test

Testing can be done locally by using the PR (#209337) or from main with REACT_18=true ENV flag:

REACT_18=true yarn bootstrap
REACT_18=true yarn start

You can also use cloud or serverless deployment from that PR.

Tip

  • Locally you can tell that you're running React@18 by the following message in the console: Kibana is built with and running [email protected], muting legacy root warning.
  • When deployed and when having React Dev Tools extension you can check the version with __REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.get(1).version in console

What to look for

Tip

Look for blank screens, error splash screens, unresponsive pages, new errors in the console, unpredictable UI behavior (like laggy text inputs that skip letters when typing fast). You can also review the list of addressed runtime issues discovered by functional tests in the section below

Runtime issues discovered by functional tests

The ID scheme that is produced by new useId hook returns IDs that look like :S1:, but : is not a valid character for CSS identifiers, so code like breaks:

const id = useId();
document.querySelector(id); // fails with `SyntaxError: ':id:' is not a valid selector.`
- useEffect(() => fetch(), []); // fails with an error, likely blank screen
+ useEffect(() => {
+ fetch()
+ }, []);

This pattern for controlled inputs breaks when running in legacy mode where it worked fine with React@17

useEffect(() => {
    if (inputRef.current) {
      inputRef.current.value = value;
    }
  }, [value]);

Consider situation like this. This is a controlled input but the value is updated async. With React@18 we noticed that the lag could become worse as we were seeing some new flaky tests because of this where input skips letter:

export function App() {
  const [value, setValue] = useState("");

  return (
      <input
        type="text"
        value={value}
        onChange={(e) => {
          const value = e.currentTarget.value;
          setTimeout(() => {
            setValue(value);
          }, 0);
        }}
      />
  );
}

In this case a state reducer was not pure as it threw an error when executed the first time (and not at later times). React@17 executed that reducer twice so error didn't propagate to the UI, wheres in React@18 that behavior has changed and we saw that error on UI. More details in the PR.

useEffect deps updates caused infinite loop but for some reason it stabilized with React@17, but not with React@18

@maryam-saeidi maryam-saeidi added the Team:obs-ux-management Observability Management User Experience Team label Feb 13, 2025
@elasticmachine
Copy link
Contributor

Pinging @elastic/obs-ux-management-team (Team:obs-ux-management)

@dominiqueclarke dominiqueclarke self-assigned this Feb 20, 2025
@dominiqueclarke
Copy link
Contributor

Smoke testing LGTM.

Tested with REACT_18=true

Version reported is 18.2.0

https://www.loom.com/share/7a0fd7a6d2ea4f8ebffb2a5f4c5044a5?sid=295d49f7-119d-4fb7-b5f3-776e0b84ce18

No new errors in console

JoseLuisGJ pushed a commit to JoseLuisGJ/kibana that referenced this issue Feb 27, 2025
## Summary

Resolves elastic#211063

Adds a small manual test plan for the UX app.

The UX app is quite small and straightforward so the test plan is pretty
basic.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Team:obs-ux-management Observability Management User Experience Team
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants