refactor(ui): flatten directory structures #12539

- remove some unnecessary nesting - a folder for one file just makes things harder to read - and there are no other folders either - rename `index.tsx` to `index.ts` - as it has no JSX, same as the other `index.ts` files in the codebase - rename to `api-docs` from `apiDocs` for consistency with the rest of UI codebase - i.e. kebab-case file and directory names, not camelCase - this isn't a strict JS convention, but is the most commonly used one - (whereas there are conventions for classnames, module names, etc) - use named functions instead of consts assigned to anon functions for better tracing Signed-off-by: Anton Gilgur <agilgur5@gmail.com>

- some components were in the `components/` dir and others were nested - a folder for a single file is unnecessary and makes reading harder - a folder for two files, an SCSS file and the TSX file, is not much better either - they appear right next to each other in editors as they're alphabetized by filename anyway, and the file ending is last - and in some editors/themes, are clearly distinguished by icons as well Signed-off-by: Anton Gilgur <agilgur5@gmail.com>

- after previous flattening, it was one `index.ts` file and then a `components/` directory with everything else - just flatten those into one, simplifying reading with less nesting - also partially sort imports (similar to isort) by putting a newline between external deps and internal deps - TODO: add an `eslint` plugin for this now that we're on `eslint` / off `tslint` Signed-off-by: Anton Gilgur <agilgur5@gmail.com>

- `components/` had one file then a directory with other files - the `event-flow-details/` dir with several closely related files makes sense as an abstraction - but the `components/` dir itself with one file does not and is harder to read - add new line between external and internal imports Signed-off-by: Anton Gilgur <agilgur5@gmail.com>

- for same reasons as previous coommits Signed-off-by: Anton Gilgur <agilgur5@gmail.com>

- I thought the `event-flow-details/` dir might make sense as an abstraction, but then I realized: 1. `id.ts`, for instance, is also used in `event-sources/` and `sensors`, so not exactly abstracted inside then 2. it's the only real component in `event-flow/`, since the container is just a routing wrapper Signed-off-by: Anton Gilgur <agilgur5@gmail.com>

- both have a single component - also rename `index.tsx` to `index.ts` since it has no JSX Signed-off-by: Anton Gilgur <agilgur5@gmail.com>

- `feedback` and `first-time-user` literally had a single file in them, so redundant dirs - `new-version` had only two files in it - interestingly, no `components/` dir here, so this is one example of where the previous directory structure was not internally consistent - there's a few others of those in the UI codebase - rename `version.tsx` to `version.ts` as it has no JSX - rewrite it to a readable function instead of a large one-liner - remove deprecated / non-spec [`substr`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substr) function and replace with `substring` Signed-off-by: Anton Gilgur <agilgur5@gmail.com>

- `plugins-list/` dir had exactly one file in it; redundant dir - `components/` only had 1 real component, `plugin-list`, plus its wrapper routing container - 2 files for a folder not really worth and you had to go 3 folders in to get to the one actual component Signed-off-by: Anton Gilgur <agilgur5@gmail.com>

- same as previous commits - notably `workflows-to-chart-data.ts` isn't a component, it's a util module Signed-off-by: Anton Gilgur <agilgur5@gmail.com>

- mostly same reasons as previous commits - `sensor-details` and `sensor-list` had one file per folder, which is redundant - notably, `utils.ts` is not a component and was used outside of `sensors` too Signed-off-by: Anton Gilgur <agilgur5@gmail.com>

- same as previous commits Signed-off-by: Anton Gilgur <agilgur5@gmail.com>

- same as previous commits - couple redundant folders here with exactly 1 file in them Signed-off-by: Anton Gilgur <agilgur5@gmail.com>

- same as previous commits - waited for a bit before tackling this dir as it has more components than others - but still only around ~10, so not _that_ many Signed-off-by: Anton Gilgur <agilgur5@gmail.com>

- most were in `shared/`, but one was in `components/` (despite not being a component), and another was created in a separate `hooks/` dir - put them all in `shared/` for consistency right now - might be good to put them into `shared/hooks/`, but for now make it consistent at least - also might not be necessary since they do all start with `use-` by convention - fix naming of `use-local-storage` which previously did not use any casing, but should use kebab-case for consistency with the rest of the UI codebase Signed-off-by: Anton Gilgur <agilgur5@gmail.com>

- this provides better tracing in source maps and when debugging etc - got through most of these in previous PRs, but `shared/` still had a bunch Signed-off-by: Anton Gilgur <agilgur5@gmail.com>

- whenever there was a redundant folder around a single component, flatten the directory structure Signed-off-by: Anton Gilgur <agilgur5@gmail.com>

- where there was only 1 or 2 files per folder, flatten them - the rest I need to take a harder look at - and this directory _does_ have too many files in right now - I would _probably_ split this into directories by the WorkflowDetails page and the WorkflowsList page - i.e. the same way it is split visually and in the routing, for intuitivity Signed-off-by: Anton Gilgur <agilgur5@gmail.com>

This reverts commit f881199. Signed-off-by: Anton Gilgur <agilgur5@gmail.com>

- some things my editor seems to have missed, these failed on build, should pass now - mostly SCSS files, probably because TS (which powers VS Code) doesn't recognize those natively (Webpack handles them in the build) Signed-off-by: Anton Gilgur <agilgur5@gmail.com>

Signed-off-by: Anton Gilgur <agilgur5@gmail.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(ui): flatten directory structures #12539

refactor(ui): flatten directory structures #12539

Commits on Feb 20, 2024