ref: eslint-plugin-boundaries

[TkDodo]

This PR adds the eslint-plugin-boundaries to define boundaries between our apps. In general, there are currently 3 boundaries we want to have:

• sentry: the sentry app, including sentry related code in /tests.
• gsAdmin: the getsentry app, including getsentry related code in /tests.
• gsApp: the admin app

generally, the rules are:

• sentry cannot import from gsAdmin or gsApp
• gsApp can import sentry, but not gsAdmin
• gsAdmin can import everything

Further, we want to extract sentry/app/components/core to their own “boundary”, which means that ideally:

• everyone can import core/components
• core/components can’t import anything from sentry, gsAdmin or gsApp.

As a first proof of concept, we’ve added specific rules for core/components/button to see what it takes to decouple it from the rest.

There are currently 23 violations that would need to be resolved, which is why the rule is set to warning only.

Once we are done with everything, this rule can and likely should replace the boundaries we have set via no-restricted-imports, as the rule is better grouped and more powerful.

[TkDodo]

from and allow are micromatch patterns matched against the type defined in the above settings. I’ve “grouped” all sentry app related things as ”sentry-“ so that we can target them with ”sentry*” here.

So this means: sentry can import from sentry (itself) and from everything core, and since the default is disallow, everything else is forbidden and will yield a warning.

[TkDodo]

note: we can remove core-button once we’ve isolated everything in core. core-button is a separate group now so that we get fewer violations. Since we match with core*, both groups are included.

[natemoo-re]

Looking great! The only feedback I have is that we might want core to allow imports from sentry/stories and sentry-test for the time being?

[JonasBa]

Looking great! The only feedback I have is that we might want core to allow imports from sentry/stories and sentry-test for the time being?

I think we need to scope that to only stories.tsx and .mdx files so that we don't end up with some component actually importing something from storybook 😅

[TkDodo]

Looking great! The only feedback I have is that we might want core to allow imports from sentry/stories and sentry-test for the time being?

I think we need to scope that to only stories.tsx and .mdx files so that we don't end up with some component actually importing something from storybook 😅

yes, good points. I made stories their own “boundary” so if you import from a story file in a production file, you’ll get the lint violation:

I’ll do the same thing for tests, just in case!

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #92031      +/-   ##
==========================================
- Coverage   87.93%   87.62%   -0.31%     
==========================================
  Files       10174    10365     +191     
  Lines      583373   587523    +4150     
  Branches    22596    22594       -2     
==========================================
+ Hits       512966   514838    +1872     
- Misses      69955    72264    +2309     
+ Partials      452      421      -31     

[TkDodo]

test boundaries were a bit harder to set-up, as our tests are all over the place, as are mocks, fixtures and test-utils. I really think we should consolidate this in a follow-up, my idea would be to have all tests and test utils co-located in sub-directories called __tests__:

- my-component
  - __tests__
    - foo.spec.tsx
    - someTestHelper.ts
  - foo.tsx

anyways, with the current setup, we get the following remaining warnings, which I would try to tackle in a follow-up:

getsentry/sentry/static/app/components/core/button/buttonBar.tsx
  5:30  warning  core-button is not allowed to import sentry  boundaries/element-types
  6:21  warning  core-button is not allowed to import sentry  boundaries/element-types

getsentry/sentry/static/app/components/core/button/index.tsx
  5:35  warning  core-button is not allowed to import sentry  boundaries/element-types
  6:36  warning  core-button is not allowed to import sentry  boundaries/element-types
  7:21  warning  core-button is not allowed to import sentry  boundaries/element-types

getsentry/sentry/static/app/components/core/button/linkButton.tsx
  5:35  warning  core-button is not allowed to import sentry  boundaries/element-types
  6:18  warning  core-button is not allowed to import sentry  boundaries/element-types
  7:36  warning  core-button is not allowed to import sentry  boundaries/element-types
  8:21  warning  core-button is not allowed to import sentry  boundaries/element-types

getsentry/sentry/static/app/components/core/button/styles.chonk.tsx
  4:36  warning  core-button is not allowed to import sentry  boundaries/element-types
  5:27  warning  core-button is not allowed to import sentry  boundaries/element-types

getsentry/sentry/static/app/components/core/button/styles.tsx
  4:33  warning  core-button is not allowed to import sentry  boundaries/element-types
  5:21  warning  core-button is not allowed to import sentry  boundaries/element-types

getsentry/sentry/static/app/components/core/button/useButtonFunctionality.tsx
  1:23  warning  core-button is not allowed to import sentry  boundaries/element-types

✖ 14 problems (0 errors, 14 warnings)