Try pinning Node v18.12.1 and use openssl legacy flags to fix open-ssl webpack nodejs error cy integration tests run thrown after Meshery UI is started in dev mode

[MarioArriaga92]

Notes for Reviewers

This PR fixes #6864.

Trying this out don't merge yet please.

Signed commits

• Yes, I signed my commits.

[acald-creator]

Please note that I have already done some of the leg work on this PR, which will explain some of the packages that broke in the CI build and local development.

#6747

I added .npmrc with legacy-peer-deps=true in order to get the old packages to stay installed in for the time being. I suggested it to @leecalcote as a short term fix until I finish the code editor portion, and migrate MUI.

Please note that in the midst of migrating to MUI v5, see here on MUI installation page where they are relying on React 17.

https://mui.com/system/styles/basics/

So in my PR, I suggested to upgrade to minimum Next 12. Because when it comes to migrating MUI from v4 to v5, I also suggest using @mui/styles as a temporary package to use until we migrate completely onto MUI v5.

@mui/styles does not work directly on React 18.

https://mui.com/system/styles/basics/

So it is either go all in, and skip @mui/styles or use @mui/styles temporarily so we can gradually move all styles to the newest way of MUI.

To finalize this, we can use .npmrc in order for the packages that rely on a certain version of Next.js and/or React in order to move forward to Next.js 13/React 18.

styled-jsx have changed since the earliest version which we were using @4 which will require some refactor in /pages/_document.js to get styled-jsx working.

[acald-creator]

While making changes to this PR, I ran into this issue.

INFO[2023-01-10T21:35:39-06:00] Updated object: cluster-dns/kube-system of kind: ConfigMap in the database  app=meshery
DEBU[0181] No valid mesh adapter(s) found.               file=events_streamer
DEBU[0186] No valid mesh adapter(s) found.               file=events_streamer
DEBU[0191] No valid mesh adapter(s) found.               file=events_streamer
DEBU[0196] No valid mesh adapter(s) found.               file=events_streamer
DEBU[0201] No valid mesh adapter(s) found.               file=events_streamer
DEBU[0206] No valid mesh adapter(s) found.               file=events_streamer
DEBU[0211] No valid mesh adapter(s) found.               file=events_streamer
DEBU[0216] No valid mesh adapter(s) found.               file=events_streamer
DEBU[0221] No valid mesh adapter(s) found.               file=events_streamer
INFO[2023-01-10T21:36:19-06:00] k3d-k3s-default components for contextID:14b3dd7438b74b84525dd6ff0091ab59 registered  app=meshery
panic: definitions: field not found: a

goroutine 16664 [running]:
github.com/layer5io/meshery/server/models/meshmodel/core.getResolvedManifest({0xc007646000, 0x3f8014})
        /home/phxvlabs-io/go/src/github.com/workspace/meshery/server/models/meshmodel/core/register.go:158 +0x31e
github.com/layer5io/meshery/server/models/meshmodel/core.getCRDsFromManifest({0xc007646000?, 0xc005886000?}, {0xc0005a6000, 0x4f, 0x0?})
        /home/phxvlabs-io/go/src/github.com/workspace/meshery/server/models/meshmodel/core/register.go:165 +0x46
github.com/layer5io/meshery/server/models/meshmodel/core.GetK8sMeshModelComponents({0x40ad560?, 0xc006a88480?}, {0xc000cf5000?, 0x192?, 0x5d?})
        /home/phxvlabs-io/go/src/github.com/workspace/meshery/server/models/meshmodel/core/register.go:119 +0x5eb
github.com/layer5io/meshery/server/handlers.RegisterK8sMeshModelComponents({0x463d4f8?, 0xc000122000?}, {0xc000cf5000?, 0xf?, 0xc0011c2ae0?}, {0xc001d431a0, 0x20}, 0x15?)
        /home/phxvlabs-io/go/src/github.com/workspace/meshery/server/handlers/k8sconfig_handler.go:349 +0x5e
github.com/layer5io/meshery/server/models.(*ComponentsRegistrationHelper).RegisterComponents.func1(0xc001123440?)
        /home/phxvlabs-io/go/src/github.com/workspace/meshery/server/models/k8s_components_registration.go:94 +0x25e
created by github.com/layer5io/meshery/server/models.(*ComponentsRegistrationHelper).RegisterComponents
        /home/phxvlabs-io/go/src/github.com/workspace/meshery/server/models/k8s_components_registration.go:71 +0x58a
exit status 2
make: *** [Makefile:103: server] Error 1

Will need this fixed before I can move forward.

[MarioArriaga92]

@acald-creator here's some warnings, not sure if we can ignore them for now:

warn  - Url '/' defines a query parameter '__nextDefaultLocale' that is missing in exportPathMap
(node:1889) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 client/ listeners added to [EventEmitter]. Use emitter.setMaxListeners() to increase limit
(Use `node --trace-warnings ...` to show where the warning was created)
(node:1889) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 server/ listeners added to [EventEmitter]. Use emitter.setMaxListeners() to increase limit

But now it seems that running the Meshery UI dev server doesn't fail although cypress fails because of some uncaught exception in the frontend (which I've seen before), I'll see if I can fix it by following "cypress handling errors" recipe we've used in the past:

1) Test if UI components are displayed on Index Page
       "after each" hook for "Left Navigation Panel":
     TypeError: The following error originated from your application code, not from Cypress.

  > Cannot set properties of null (setting 'onopen')

When Cypress detects uncaught errors originating from your application it will automatically fail the current test.

This behavior is configurable, and you can choose to turn this off by listening to the `uncaught:exception` event.

[acald-creator]

@acald-creator here's some warnings, not sure if we can ignore them for now:

warn  - Url '/' defines a query parameter '__nextDefaultLocale' that is missing in exportPathMap
(node:1889) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 client/ listeners added to [EventEmitter]. Use emitter.setMaxListeners() to increase limit
(Use `node --trace-warnings ...` to show where the warning was created)
(node:1889) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 server/ listeners added to [EventEmitter]. Use emitter.setMaxListeners() to increase limit

But now it seems that running the Meshery UI dev server doesn't fail although cypress fails because of some uncaught exception in the frontend (which I've seen before), I'll see if I can fix it by following "cypress handling errors" recipe we've used in the past:

1) Test if UI components are displayed on Index Page
       "after each" hook for "Left Navigation Panel":
     TypeError: The following error originated from your application code, not from Cypress.

  > Cannot set properties of null (setting 'onopen')

When Cypress detects uncaught errors originating from your application it will automatically fail the current test.

This behavior is configurable, and you can choose to turn this off by listening to the `uncaught:exception` event.

The first part can be ignored for now. This is something that will needs to be configured in next.config.js but it is just a warning.

The second part refers to when redux and websocket is being called for, and in the process, I believe there is not a timer to check for redux and also websocket until it is actually up. Last I check in the processing of building UI and the server, there is a delay before the server is officially up, where the ui is already looking for the server to be running. Therefore, the error comes up.

[leecalcote]

Good to close this out?

[acald-creator]

We can close this out for now, as we're using Node 18 in GitHub Actions, and I will need to do some research on how to use Cypress to test for changes from Redux/React-Redux.

We are also we webpack version 5, so we should be good for now. We can revisit if issues come up again.