BED-5112: use prettier to organize imports

[benwaples]

Description

Adds a plugin to prettier that sorts, combines and removes unused imports using the organizeImports feature of the TS language server.

Motivation and Context

This PR addresses: BED-5112

Organized imports helps devs parse where code is coming from. This is particularly helpful as we replace MUI with DoodleUI and many of the components will have similar, if not the same, names to help migrate to the new component library.

Additionally, this plugin will remove unused imports, so one less thing to review for.

The npm documentation is very helpful, feel free to give it a review!

How Has This Been Tested?

confirmed that prettier will automatically update imports.

Screenshots (optional):

n/a

Types of changes

• Chore (a change that does not modify the application functionality)

Checklist:

• I have met the contributing prerequisites
  • Assigned myself to this PR
  • Added the appropriate labels
  • Associated an issue: Issues and Pull Requests README #672
  • Read the Contributing guide: https://github.com/SpecterOps/BloodHound/wiki/Contributing
• I have ensured that related documentation is up-to-date
  • Open API docs
  • Code comments (GoDocs / JSDocs)
• I have followed proper test practices
  • Added/updated tests to cover my changes
  • All new and existing tests passed

[mistahj67]

LGTM, tested locally did in fact organize my imports automagically 🪄

[urangel]

🚀

[elikmiller]

I like the idea but I am seeing one issue.

After updating my dependencies and running yarn format in cmd/ui, packages/javascript/js-client-library and packages/javascript/bh-shared/ui I am no longer able to build the UI project and the following error appears.

src/main.tsx:33:16 - error TS2664: Invalid module name in augmentation, module '@mui/styles/defaultTheme' cannot be found.

33 declare module '@mui/styles/defaultTheme' {
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~


Found 1 error in src/main.tsx:33

[elikmiller]

Please see my above comment!

[benwaples]

@elikmiller thats sus! Ill check it out. Thanks!

[benwaples]

@elikmiller found the problem! But its super weird. Its not directly related to this prettier plugin, but a side-effect from formatting the imports.

In cmd/ui/src/App.test.tsx, Importing bh-shared-ui before the src/App component caused this error. Im not entirely sure why yet, but the fix is to essentially organize the App files under an App directory such as:

src/
  App/
    App.tsx
    App.test.tsx
    index.ts
  main.ts // imports App

[elikmiller]

@benwaples It looks like if we delete this module declaration in cmd/ui/src/main.tsx it also works.

I don't exactly remember why we needed this declaration in the first place, might have been a missed cleanup when we moved from MUI 4 to 5.

- declare module '@mui/styles/defaultTheme' {
-     interface DefaultTheme extends Theme {}
- }

[benwaples]

@elikmiller from what I can tell it was part of the migration from 4 -> 5 so I was hesitant to delete it. Sounds like their reasoning for the augmentation is if we use makeStyles or withStyles (which we do), but deleting the augmentation doesnt cause TS or build errors...

If TS and the build is happy, Im happy to remove. Are you still comfortable with that?

[elikmiller]

@benwaples Yes and it looks like we can remove it from bh-shared-ui too. I'd suggest those changes as well as checking in all the files after running yarn format in each project (which I know will be a huge change)

[benwaples]

@elikmiller discussed offline, but to summarize, we are keeping the module augmentation in bh-shared-ui and believe there was a collision in module scope when loading the bh-shared-ui package before having the chance to define the augmentation in bhce.

[benwaples]

@elikmiller came across more import ordering errors in cmd/ui/src/setupTests.tsx, packages/javascript/bh-shared-ui/src/test-utils.jsx, and packages/javascript/bh-shared-ui/src/setupTests.tsx. It appears, that the formatting is removing unused variables that are imported purposefully for either mocked or scoping reasons.