chore(ts): refactor types into separate modules

[tthvo]

Welcome to Cryostat! 👋

Before contributing, make sure you have:

• Read the contributing guidelines
• Linked a relevant issue which this PR resolves
• Linked any other relevant issues, PR's, or documentation, if any
• Resolved all conflicts, if any
• Rebased your branch PR on top of the latest upstream main branch
• Attached at least one of the following labels to the PR: [chore, ci, docs, feat, fix, test]
• Signed all commits using a GPG signature

To recreate commits with GPG signature git fetch upstream && git rebase --force --gpg-sign upstream/main

---

Fixes: #941

Description of the change:

Move common types into types.ts to avoid cirular deps. Also, fix some type annotations that eslint might have missed.

Motivation for the change:

See #941

[tthvo]

@andrewazores I just realized this is quite a huge set of changes. Do you think we have time to review for 2.4?

If not, I think we could delay this till next release and use it as a chance to go over web UI functionalities from top to toe?

[tthvo]

Though, rebasing will be painful haha I will try to keep up with other PRs.

[andrewazores]

I would rather try to get this in ASAP since it is so large and rebasing it will only get harder. It may not make it in time for the 2.4 release but that's fine, it can be merged into main after the release window as soon as it is ready as one of the first merges into the next development cycle.

[tthvo]

Suree just some little moving around and lots of tests broken left. Will try to get it done asap.

[tthvo]

Ready now ^^ Most changes are just moving definitions into new files. The following are the conventions:

• .types.ts(x): Define type definitions. This includes types and enums.
• .utils.ts(x): Define utility functions. Also, might contain constants (usually tightly coupled with the utility functions).
• .const.ts: Define constants. These are mostly constants that are purely for UI rendering.
• context.tsx: Define React contexts. Mostly, to resolve circular deps. These can be defined in utils.ts(x).

I tried to move definitions closed to where they are used (colocation?). Quite a huge change but I guess its a good chance to go over the web UI as a whole.

[andrewazores]

Ready now ^^ Most changes are just moving definitions into new files. The following are the conventions:

* `.types.ts(x)`: Define type definitions. This includes types and enums.

* `.utils.ts(x)`: Define utility functions. Also, might contain constants (usually tightly coupled with the utility functions).

* `.const.ts`: Define constants. These are mostly constants that are purely for UI rendering.

* `context.tsx`: Define React contexts. Mostly, to resolve circular deps. These can be defined in `utils.ts(x)`.

I tried to move definitions closed to where they are used (colocation?). Quite a huge change but I guess its a good chance to go over the web UI as a whole.

Document these conventions in README or a CONTRIBUTING doc please :-)

[andrewazores]

/build_test

[github-actions]

Test image available:

CRYOSTAT_IMAGE=ghcr.io/cryostatio/cryostat-web:pr-1107-18d6eeab5cfe28c58ec81fd4cb16156d7cc88b84 sh smoketest.sh

[andrewazores]

Sorry @tthvo ... this needs a big rebase after #1117

[tthvo]

Ah right! I will go over it by this week!

[tthvo]

/build_test

[github-actions]

Test image available:

CRYOSTAT_IMAGE=ghcr.io/cryostatio/cryostat-web:pr-1107-5f69a43d78994f6166806d060cedb3c1aa05ead7 sh smoketest.sh

[tthvo]

Phew, finished rebasing :)) Also, added a small padding for recording option label group.

Before	After

[tthvo]

/build_test

[github-actions]

Test image available:

CRYOSTAT_IMAGE=ghcr.io/cryostatio/cryostat-web:pr-1107-92310953b44826ebed9cd1aeee288c125da1f46e sh smoketest.sh

[andrewazores]

Awesome work, thanks @tthvo

[andrewazores]

I do see one last dependency cycle:

$ yarn run lint
[format] [prettier:check] Checking formatting...
[format] [license:check] No default format specified. Using {"prepend":"/*","append":"*/"} as backup
[format] [license:check] ✔ All files have licenses.
[format] [license:check] Command succeeded
[format] [license:check] yarn run license:check exited with code 0
[format] [prettier:check] All matched files use Prettier code style!
[format] [prettier:check] yarn run prettier:check exited with code 0
[format] yarn run format exited with code 0
[type-check] yarn run type-check exited with code 0
[eslint] 
[eslint] /home/work/workspace/cryostat-web/src/app/Shared/Redux/ReduxStore.tsx
[eslint]   23:1  warning  Dependency cycle detected  import/no-cycle
[eslint] 
[eslint] ✖ 1 problem (0 errors, 1 warning)
[eslint] 
[eslint] yarn run eslint exited with code 0

[tthvo]

Hmm, not seeing it on my end tho. Any idea?

$ yarn lint
[eslint] yarn run eslint exited with code 0
[format] [prettier:check] Checking formatting...
[format] [license:check] No default format specified. Using {"prepend":"/*","append":"*/"} as backup
[format] [license:check] ✔ All files have licenses.
[format] [license:check] Command succeeded
[format] [license:check] yarn run license:check exited with code 0
[format] [prettier:check] All matched files use Prettier code style!
[format] [prettier:check] yarn run prettier:check exited with code 0
[format] yarn run format exited with code 0
[type-check] yarn run type-check exited with code 0

[tthvo]

Just double checked. That should be fixed with import type { RootState } from '../ReduxStore'; within src/app/Shared/Redux/Middlewares/PersistMiddleware.tsx

There is no complaints with github either?

[andrewazores]

Weird. Good enough for me - I'll figure out what's happening on my setup then.