ref(✂️): enable knip in CI (#92010)

This PR:
- gets violations for `yarn run knip` to zero.
- enables `knip` in CI.

Sorry for this being a larger PR, but I fear that by the time I’ve
broken it down and all the individuals get merged, there will be now
things that need removal.

It should be the last one, as `knip` is then a mandatory CI check 🎉 

Note: The `knip --prod` run is not yet enabled, as I’m waiting for some
replay specific feedback about 3 more things that need to be removed.
This is going to be a small follow-up.

Author: TkDodo

.github/workflows/frontend.yml

@@ -107,6 +107,44 @@ jobs:
         id: eslint
         run: yarn run lint:js
 
+  knip:
+    if: needs.files-changed.outputs.frontend_all == 'true'
+    needs: files-changed
+    name: knip
+    runs-on: ubuntu-24.04
+    steps:
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+
+      - uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4
+        id: setup-node
+        with:
+          node-version-file: '.volta.json'
+
+      - name: node_modules cache
+        uses: actions/cache@v4.2.0
+        id: nodemodulescache
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-node-modules-${{ hashFiles('yarn.lock', 'api-docs/yarn.lock', '.volta.json') }}
+
+      - name: Install Javascript Dependencies
+        if: steps.nodemodulescache.outputs.cache-hit != 'true'
+        run: yarn install --frozen-lockfile
+
+      # Setup custom eslint matcher, see https://github.com/actions/setup-node/issues/97
+      - name: setup matchers
+        run: |
+          echo "::remove-matcher owner=masters::"
+          echo "::add-matcher::.github/eslint-stylish.json"
+
+      - name: knip
+        id: knip
+        run: yarn run knip
+
+      - name: knip-prod
+        id: knip-prod
+        run: yarn run knip:prod
+
   frontend-jest-tests:
     if: needs.files-changed.outputs.testable_rules_changed == 'true' || needs.files-changed.outputs.testable_modified == 'true'
     needs: [files-changed]
@@ -184,7 +222,7 @@ jobs:
   # It symbolizes that all required Frontend checks have succesfully passed (Or skipped)
   # This check is the only required Github check
   frontend-required-check:
-    needs: [files-changed, frontend-jest-tests, typescript, eslint]
+    needs: [files-changed, frontend-jest-tests, typescript, eslint, knip]
     name: Frontend
     # This is necessary since a failed/skipped dependent job would cause this job to be skipped
     if: always()

knip.config.ts

@@ -1,3 +1,4 @@
+import {compile} from '@mdx-js/mdx';
 import type {KnipConfig} from 'knip';
 
 const productionEntryPoints = [
@@ -34,6 +35,8 @@ const storyBookEntryPoints = [
   'static/app/stories/storyBook.tsx',
   // custom webpack loaders for stories
   'static/app/stories/*loader.ts',
+  // we have some stories in mdx format
+  'static/app/**/*.mdx',
 ];
 
 const config: KnipConfig = {
@@ -45,6 +48,7 @@ const config: KnipConfig = {
   storybook: true,
   project: [
     'static/**/*.{js,mjs,ts,tsx}!',
+    'static/app/**/*.mdx',
     'tests/js/**/*.{js,mjs,ts,tsx}',
     // exclude this directory because it's how you set up mocks in jest (https://jestjs.io/docs/manual-mocks)
     '!static/{app,gsApp}/**/__mocks__/**',
@@ -54,8 +58,19 @@ const config: KnipConfig = {
     '!static/**/*{t,T}estUtils*.{js,mjs,ts,tsx}!',
     // helper files for stories - it's fine that they are only used in tests
     '!static/app/**/__stories__/*.{js,mjs,ts,tsx}!',
-    '!static/app/{components,views}/stories/*.{js,mjs,ts,tsx}!',
+    '!static/app/stories/*.{js,mjs,ts,tsx}!',
   ],
+  compilers: {
+    mdx: async text => {
+      const result = await compile(text, {
+        providerImportSource: '@mdx-js/react',
+        jsx: true,
+        outputFormat: 'program',
+      });
+
+      return String(result);
+    },
+  },
   rules: {
     binaries: 'off',
     dependencies: 'off',

package.json

@@ -182,6 +182,7 @@
     "@eslint/eslintrc": "^3.3.0",
     "@eslint/js": "^9.22.0",
     "@mdx-js/loader": "^3.1.0",
+    "@mdx-js/mdx": "^3.1.0",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.16",
     "@sentry/jest-environment": "6.0.0",
     "@sentry/profiling-node": "9.16.1",
@@ -217,7 +218,7 @@
     "jest-environment-jsdom": "29.7.0",
     "jest-fail-on-console": "3.3.0",
     "jest-junit": "16.0.0",
-    "knip": "^5.55.1",
+    "knip": "^5.57.0",
     "postcss-styled-syntax": "0.7.0",
     "react-refresh": "0.16.0",
     "stylelint": "16.10.0",

static/app/actionCreators/guides.tsx

@@ -46,10 +46,6 @@ export function setForceHide(forceHide: boolean) {
   GuideStore.setForceHide(forceHide);
 }
 
-export function toStep(step: number) {
-  GuideStore.toStep(step);
-}
-
 export function closeGuide(dismissed?: boolean) {
   GuideStore.closeGuide(dismissed);
 }
@@ -89,7 +85,7 @@ export function recordFinish(guide: string, orgId: string | null) {
   });
 }
 
-export function recordDismiss(guide: string, step: number, orgId: string | null) {
+function recordDismiss(guide: string, step: number, orgId: string | null) {
   if (!isDemoModeActive()) {
     api.requestPromise('/assistant/', {
       method: 'PUT',

static/app/api.tsx

@@ -217,6 +217,7 @@ function buildRequestUrl(baseUrl: string, path: string, options: RequestOptions)
 /**
  * Check if the API response says project has been renamed.  If so, redirect
  * user to new project slug
+ * @public used in __mocks__/api.tsx with jest.requireActual
  */
 // TODO(ts): refine this type later
 export function hasProjectBeenRenamed(response: ResponseMeta) {

static/app/components/charts/treeCoverageSunburstChart.tsx

@@ -52,7 +52,7 @@ function bfsFilter(root: ProcessedTreeCoverageSunburstData, maxDepth: number) {
  *   children: <recursive structure>[] | undefined - only dir nodes should have the children field;
  * }
  */
-export interface TreeCoverageSunburstData {
+interface TreeCoverageSunburstData {
   children: TreeCoverageSunburstData[];
   coverage: number;
   fullPath: string;

static/app/components/events/autofix/types.ts

@@ -176,7 +176,7 @@ type AutofixRelevantCodeFile = {
   repo_name: string;
 };
 
-export type AutofixRelevantCodeFileWithUrl = AutofixRelevantCodeFile & {
+type AutofixRelevantCodeFileWithUrl = AutofixRelevantCodeFile & {
   url?: string;
 };
 

static/app/components/issues/compactIssue.tsx

@@ -167,7 +167,7 @@ export function SpanSearchQueryBuilder(props: SpanSearchQueryBuilderProps) {
   return <IndexedSpanSearchQueryBuilder {...props} />;
 }
 
-export function IndexedSpanSearchQueryBuilder({
+function IndexedSpanSearchQueryBuilder({
   initialQuery,
   searchSource,
   datetime,
@@ -189,7 +189,7 @@ export function IndexedSpanSearchQueryBuilder({
   return <SearchQueryBuilder {...searchQueryBuilderProps} />;
 }
 
-export function EapSpanSearchQueryBuilder({
+function EapSpanSearchQueryBuilder({
   initialQuery,
   searchSource,
   datetime,