chore: Dependency updates

This issue is intended to track & discuss any and all issues related to old dependencies:

### Issues tracking dependency work

#### Core dependency updates needed (priority)

- [x] #1840
- [x] https://github.com/ipfs/ipld-explorer-components/issues/329
- [x] PR is out for this: https://github.com/ipfs/ipld-explorer-components/pull/330
- [x] #2045
- [x] #2046
- [x] #2047
- [x] #2048

#### Other work
- [x] #1924
- [x] #1969
- [x] #1981
- [x] #1982
- [ ] #1987
- [x] #1988
- [x] #2015
- [ ] #2036

#### Nice to have but not required
- [x] #2020

### Items blocked by outdated deps in one way or another
- [x] #1838
- [x] #1940
- [x] #1975
- [x] #1923
- [x] #2033
- [x] https://github.com/ipfs/ipld-explorer-components/issues/342

### Issues blocking dependency updates
- [ ] https://github.com/tableflip/react-dropdown/issues/8

---

## Investigating dependencies

`npm outdated --all > npm-outdated.raw.log` gives us this: [npm-outdated.raw.log](https://github.com/ipfs/ipfs-webui/files/9058176/npm-outdated.raw.log)

Then we want to remove duplicates, because npm outdated doesn't do that for us for some reason (`echo "$(head -n 1 npm-outdated.raw.log && tail -n +2 npm-outdated.raw.log | sort | uniq -d)" > npm-outdated.uniq.log`): [npm-outdated.uniq.log](https://github.com/ipfs/ipfs-webui/files/9058183/npm-outdated.uniq.log)
cat npm-outdated.raw.log | awk '{print $6}' | sort | uniq -c | sort > most-impactful-dependencies.log

To see which dependencies are mentioned the most in the depended by column, we can run `cat npm-outdated.uniq.log | awk '{print $6}' | sort | uniq -c | sort > most-impactful-dependencies.log` to get: [most-impactful-dependencies.log](https://github.com/ipfs/ipfs-webui/files/9058191/most-impactful-dependencies.log)

and then to get the top 10 most impactful dependency updates, `tail -n 10 most-impactful-dependencies.log`:
```
8 ipfs-http-client
9 @babel/core
9 @storybook/theming
9 css-loader
10 jest-cli
11 ipfs-core-utils
11 ipfs-utils
11 react-dev-utils
15 @storybook/components
51 @babel/preset-env
```

So which of those versions do we 'want'?

```
> tail -n 10 most-impactful-dependencies.log | awk '{print $2}' | xargs -n1 -I% sh -c 'cat npm-outdated.uniq.log | grep "^%"'
@babel/core 7.15.5 7.18.6 7.18.6 node_modules/@babel/core @babel/helper-compilation-targets
@babel/core 7.15.5 7.18.6 7.18.6 node_modules/@babel/core @babel/helper-create-class-features-plugin
@babel/core 7.15.5 7.18.6 7.18.6 node_modules/@babel/core @babel/plugin-proposal-class-properties
@babel/core 7.15.5 7.18.6 7.18.6 node_modules/@babel/core @babel/plugin-proposal-dynamic-import
@babel/core 7.15.5 7.18.6 7.18.6 node_modules/@babel/core @babel/plugin-proposal-export-namespace-from
@babel/core 7.15.5 7.18.6 7.18.6 node_modules/@babel/core @babel/plugin-proposal-logical-assignment-operators
@babel/core 7.15.5 7.18.6 7.18.6 node_modules/@babel/core @babel/plugin-proposal-nullish-coalescing-operator
@babel/core 7.15.5 7.18.6 7.18.6 node_modules/@babel/core @babel/plugin-proposal-numeric-separator
@babel/core 7.15.5 7.18.6 7.18.6 node_modules/@babel/core @babel/plugin-proposal-optional-chaining
@babel/core 7.15.5 7.18.6 7.18.6 node_modules/@babel/core @babel/plugin-proposal-private-methods
@babel/core 7.15.5 7.18.6 7.18.6 node_modules/@babel/core @babel/plugin-syntax-flow
@babel/core 7.15.5 7.18.6 7.18.6 node_modules/@babel/core @babel/plugin-syntax-typescript
@babel/core 7.15.5 7.18.6 7.18.6 node_modules/@babel/core @babel/plugin-transform-flow-strip-types
@babel/core 7.15.5 7.18.6 7.18.6 node_modules/@babel/core @babel/plugin-transform-modules-commonjs
@babel/core 7.15.5 7.18.6 7.18.6 node_modules/@babel/core @babel/plugin-transform-typescript
@babel/core 7.15.5 7.18.6 7.18.6 node_modules/@babel/core @babel/preset-typescript
@babel/core 7.15.5 7.18.6 7.18.6 node_modules/@babel/core @jest/transform
@babel/core 7.15.5 7.18.6 7.18.6 node_modules/@babel/core @svgr/plugin-jsx
@babel/core 7.15.5 7.18.6 7.18.6 node_modules/@babel/core istanbul-lib-instrument
@babel/core 7.15.5 7.18.6 7.18.6 node_modules/@babel/core jest-snapshot
@storybook/theming 5.3.21 5.3.21 6.5.9 node_modules/@storybook/theming @storybook/components
ipfs-core-utils 0.10.5 0.10.5 0.15.1 node_modules/ipfs-core-utils ipfs-http-client
@babel/preset-env 7.12.11 7.18.6 7.18.6 node_modules/@babel/preset-env @svgr/webpack
```

And why are they there? `tail -n 10 most-impactful-dependencies.log | awk '{print $2}' | xargs -n1 -I% sh -c 'npm explain %' > explain.txt`: [explain.txt](https://github.com/ipfs/ipfs-webui/files/9058228/explain.txt)

That's super hard to understand, so let's aggregate again... `cat explain.txt | grep 'from the root project' | awk '{$1=$1};1' | sort | uniq -c | sort`:

```
1 dev @babel/core@"^7.15.5" from the root project
1 dev @storybook/addon-links@"^5.3.19" from the root project
1 dev @storybook/addons@"^5.3.19" from the root project
1 ipld-explorer-components@"^2.4.1" from the root project
2 dev @svgr/cli@"^5.4.0" from the root project
4 ipfs-http-client@"49.0.2" from the root project
5 dev @storybook/addon-a11y@"^5.3.19" from the root project
6 dev @storybook/addon-actions@"^5.3.19" from the root project
6 dev @storybook/addon-knobs@"^5.3.19" from the root project
29 dev @playwright/test@"^1.12.1" from the root project
106 dev ipfs@"0.58.3" from the root project
117 dev ipfsd-ctl@"^7.2.0" from the root project
190 dev jest@"^26.6.3" from the root project
213 dev @storybook/react@"^5.3.19" from the root project
301 dev jest-playwright-preset@"^1.7.0" from the root project
754 react-scripts@"^4.0.3" from the root project
```

### Breakdown of the above:

1. List all outdated npm modules
2. find the outdated modules that are mentioned the most
3. find and count the npm modules that depend on the most-mentioned out-of-date modules.
* These are the "most impactful dependencies"
4. get npm to tell us why these most impactful dependencies are in our repo.
5. filter through step4 above to tell us which module we actually depend on is at fault for all the above
6. find the most-mentioned module from step5 that we depend on
* The module with the most entries should be the first target for our upgrade plan.

### So what does this mean?

Using react-scripts as an example: there are 754 listings of react-scripts being the ROOT CAUSE. `react-scripts` is the package we depend on, that is listed in the npm-explain output, when trying to determine why out-of-date modules are listed in our dependency graph.

### Why did you do all this?

I attempted to upgrade some (see https://github.com/ipfs/ipfs-webui/compare/main...SgtPooki:ipfs-webui:fix/node-14-windows) to resolve the build errors showing at https://github.com/SgtPooki/ipfs-webui/actions/runs/2605014389, (see #1961) and was consistently blocked by npm because of semver conflicts of wanted packages. In order to move forward.. since there is no npm-dependency-graph-resolver upgrade tool, I figured I would need all of this data.