Run type check for all web app packages in CI (#22578)

* Fix incorrect usage of types pacakge

* Make platform packages properly expose their type definitions

* Have Boards, Channels, and Playbooks get types from platform packages properly

* Run type check for all web app packages in CI

* Fix incorrect job name

.github/workflows/channels-ci.yml

@@ -80,7 +80,7 @@ jobs:
           npm run mmjstool -- i18n clean-empty --webapp-dir ./src --mobile-dir /tmp/fake-mobile-dir --check
           npm run mmjstool -- i18n check-empty-src --webapp-dir ./src --mobile-dir /tmp/fake-mobile-dir
           rm -rf tmp
-  check-type:
+  check-types:
     runs-on: ubuntu-22.04
     defaults:
       run:
@@ -109,12 +109,11 @@ jobs:
           make node_modules
           # make channels/e2e/playwright/node_modules
       - name: ci/lint
-        working-directory: webapp/channels
         run: |
           npm run check-types
   tests:
     runs-on: ubuntu-22.04
-    needs: [check-type, check-i18n, check-lint]
+    needs: [check-types, check-i18n, check-lint]
     permissions:
       checks: write
       pull-requests: write

webapp/.gitignore

@@ -2,6 +2,7 @@
 junit.xml
 node_modules
 *.tsbuildinfo
+.rollup.cache
 
 channels/dist
 playbooks/dist

webapp/boards/package.json

@@ -15,7 +15,7 @@
 		"check-style": "stylelint **/*.scss",
 		"check-style:fix": "npm run check-style -- --fix",
 		"check-style:fix:prettier": "prettier --write './src/**/*.scss'",
-		"check-types": "tsc",
+		"check-types": "tsc -b",
 		"check-types:fix": "npm run check-types -- --noEmit --fix",
 		"check": "npm run check-lint && npm run check-style",
 		"fix": "npm run check-lint:fix && npm run check-style:fix",

webapp/boards/tsconfig.json

@@ -18,25 +18,18 @@
         "sourceMap": true,
         "allowJs": true,
         "resolveJsonModule": true,
-        "incremental": false,
         "baseUrl": ".",
         "outDir": "dist",
         "noEmit": true,
         "typeRoots": [ "./src/types", "./node_modules/@types"],
-        "paths": {
+        "composite": true
-            "@mattermost/types/*": ["../platform/packages/types/src/*"],
-            "@mattermost/client": ["../platform/client/src"],
-            "@mattermost/components": ["../platform/components/src"],
-            // "mattermost-redux/*": ["../channels/src/packages/mattermost-redux/src/*"],
-            // "reselect": ["../channels/src/packages/reselect/src"]
-        }
     },
     "include": [
-      "**/*"
+        "./i18n/*.json",
+        "./src/**/*",
     ],
-    "exclude": [
+    "references": [
-        ".git",
+        {"path": "../platform/client"},
-        "!node_modules/@types",
+        {"path": "../platform/types"}
-        "dist",
     ]
 }

webapp/channels/src/components/admin_console/permission_schemes_settings/permission_system_scheme_settings/index.tsx

@@ -4,9 +4,9 @@
 import {connect} from 'react-redux';
 import {ActionCreatorsMapObject, bindActionCreators, Dispatch} from 'redux';
 
-import {GlobalState} from '@mattermost/types/store.js';
+import {GlobalState} from '@mattermost/types/store';
 import {ActionFunc, ActionResult, GenericAction} from 'mattermost-redux/types/actions.js';
-import {Role} from '@mattermost/types/roles.js';
+import {Role} from '@mattermost/types/roles';
 
 import {loadRolesIfNeeded, editRole} from 'mattermost-redux/actions/roles';
 import {getRoles} from 'mattermost-redux/selectors/entities/roles';

webapp/channels/src/components/advanced_create_post/index.ts

@@ -6,13 +6,13 @@ import {ActionCreatorsMapObject, bindActionCreators, Dispatch} from 'redux';
 
 import {GlobalState} from 'types/store/index.js';
 
-import {Post} from '@mattermost/types/posts.js';
+import {Post} from '@mattermost/types/posts';
 
-import {FileInfo} from '@mattermost/types/files.js';
+import {FileInfo} from '@mattermost/types/files';
 
 import {ActionResult, GetStateFunc, DispatchFunc} from 'mattermost-redux/types/actions.js';
 
-import {CommandArgs} from '@mattermost/types/integrations.js';
+import {CommandArgs} from '@mattermost/types/integrations';
 
 import {ModalData} from 'types/actions.js';
 

webapp/channels/src/components/backstage/backstage_controller.tsx

@@ -5,9 +5,9 @@ import React, {ComponentType, useRef} from 'react';
 import {match, Route, Switch} from 'react-router-dom';
 import {createGlobalStyle} from 'styled-components';
 
-import {UserProfile} from '@mattermost/types/users.js';
+import {UserProfile} from '@mattermost/types/users';
 
-import {Team} from '@mattermost/types/teams.js';
+import {Team} from '@mattermost/types/teams';
 
 import Bots from 'components/integrations/bots';
 import AddBot from 'components/integrations/bots/add_bot';

webapp/channels/src/components/integrations/add_command/add_command.tsx

@@ -4,8 +4,8 @@
 import React, {useState} from 'react';
 import {useHistory} from 'react-router-dom';
 
-import {Command} from '@mattermost/types/integrations.js';
+import {Command} from '@mattermost/types/integrations';
-import {Team} from '@mattermost/types/teams.js';
+import {Team} from '@mattermost/types/teams';
 
 import {ActionResult} from 'mattermost-redux/types/actions.js';
 

webapp/channels/src/components/integrations/add_oauth_app/add_oauth_app.tsx

@@ -4,8 +4,8 @@
 import React, {useState} from 'react';
 import {useHistory} from 'react-router-dom';
 
-import {OAuthApp} from '@mattermost/types/integrations.js';
+import {OAuthApp} from '@mattermost/types/integrations';
-import {Team} from '@mattermost/types/teams.js';
+import {Team} from '@mattermost/types/teams';
 
 import {ActionResult} from 'mattermost-redux/types/actions.js';
 

webapp/channels/src/components/integrations/integrations.tsx

@@ -4,7 +4,7 @@
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import {Team} from '@mattermost/types/teams.js';
+import {Team} from '@mattermost/types/teams';
 
 import {Permissions} from 'mattermost-redux/constants';
 

webapp/channels/src/components/reset_status_modal/index.ts

@@ -8,9 +8,9 @@ import {GlobalState} from 'types/store/index.js';
 
 import {ActionFunc, GenericAction} from 'mattermost-redux/types/actions.js';
 
-import {UserStatus} from '@mattermost/types/users.js';
+import {UserStatus} from '@mattermost/types/users';
 
-import {PreferenceType} from '@mattermost/types/preferences.js';
+import {PreferenceType} from '@mattermost/types/preferences';
 
 import {savePreferences} from 'mattermost-redux/actions/preferences';
 import {setStatus} from 'mattermost-redux/actions/users';

webapp/channels/src/components/suggestion/channel_mention_provider.tsx

@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import {Channel} from '@mattermost/types/channels.js';
+import {Channel} from '@mattermost/types/channels';
 import {ActionResult} from 'mattermost-redux/types/actions.js';
 
 import {getMyChannels, getMyChannelMemberships} from 'mattermost-redux/selectors/entities/channels';

webapp/channels/src/components/suggestion/search_channel_provider.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {ServerError} from '@mattermost/types/errors.js';
+import {ServerError} from '@mattermost/types/errors';
 import {ActionFunc} from 'mattermost-redux/types/actions.js';
 
 import {isDirectChannel, isGroupChannel, sortChannelsByTypeListAndDisplayName} from 'mattermost-redux/utils/channel_utils';

webapp/channels/tsconfig.json

@@ -22,10 +22,8 @@
     "jsx": "react",
     "baseUrl": "./src",
     "useUnknownInCatchVariables": false,
+    "composite": true,
     "paths": {
-        "@mattermost/client": ["../../platform/client/src"],
-        "@mattermost/components": ["../../platform/components/src"],
-        "@mattermost/types/*": ["../../platform/types/src/*"],
         "mattermost-redux/*": ["packages/mattermost-redux/src/*"],
         "reselect": ["packages/reselect/src"],
         "@mui/styled-engine": ["./node_modules/@mui/styled-engine-sc"],
@@ -35,17 +33,12 @@
     }
   },
   "include": [
-    "./src/**/*"
+    "./src/**/*",
-  ],
+    "./src/**/*.json"
-  "exclude": [
-    "dist",
-    "e2e/cypress",
-    "e2e/playwright",
-    "!node_modules/@types",
-    "coverage"
   ],
   "references": [
     {"path": "../platform/client"},
+    {"path": "../platform/components"},
     {"path": "../platform/types"}
   ]
 }

webapp/platform/client/package.json

@@ -10,7 +10,8 @@
   "files": [
     "lib"
   ],
-  "main": "./lib/index.js",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
   "repository": {
     "type": "git",
     "url": "github:mattermost/mattermost-webapp",

webapp/platform/client/tsconfig.json

@@ -12,12 +12,14 @@
         "jsx": "react",
         "outDir": "./lib",
         "rootDir": "./src",
-        "composite": true,
+        "composite": true
-        "paths": {
-            "@mattermost/types/*": ["../types/lib/*"]
-        }
     },
-    "exclude": ["**/node_modules", "**/lib", "**/*.test.js", "**/*.test.ts"],
+    "include": [
+        "./src/**/*"
+    ],
+    "exclude": [
+        "**/*.test.*"
+    ],
     "references": [
         {"path": "../types"}
     ]

webapp/platform/components/package.json

@@ -2,7 +2,7 @@
   "name": "@mattermost/components",
   "version": "7.4.0",
   "module": "dist/index.esm.js",
-  "types": "dist/index.esm.d.ts",
+  "types": "dist/index.d.ts",
   "styles": "dist/index.esm.css",
   "scripts": {
     "build": "rollup -c",

webapp/platform/components/tsconfig.json

@@ -10,12 +10,9 @@
         "skipLibCheck": true,
         "strictNullChecks": true,
         "isolatedModules": true,
-        "noEmit": true,
         "declaration": true,
         "outDir": "dist",
-        "paths": {
+        "rootDir": "src",
-            "mattermost-redux/*": ["./node_modules/mattermost-redux/src/*"],
+        "composite": true
-            "@mattermost/types/*": ["./node_modules/@mattermost/types/src/*"]
-        }
     }
 }

webapp/platform/types/README.md

@@ -12,21 +12,6 @@ import {UserProfile} from '@mattermost/types/users';
 
 For technologies that don't support that yet, you can add an alias in its package resolution settings to support that.
 
-### TypeScript
-
-In the `tsconfig.json`, you can use `compilerOptions.paths` to add that alias. This also requires a `compilerOptions.baseUrl` if you haven't set that already.
-
-```json
-{
-    "compilerOptions": {
-        "baseUrl": ".",
-        "paths": {
-            "@mattermost/types/*": ["node_modules/@mattermost/types/lib/*"]
-        }
-    }
-}
-```
-
 ### Jest
 
 In your Jest config, you can use the `moduleNameMapper` field to add that alias.

webapp/platform/types/package.json

@@ -13,7 +13,11 @@
   "exports": {
     "./*": "./lib/*.js"
   },
-  "types": "./lib/*.d.ts",
+  "typesVersions": {
+    ">=3.1": {
+      "*": ["./lib/*.d.ts"]
+    }
+  },
   "repository": {
     "type": "git",
     "url": "github:mattermost/mattermost-webapp",

webapp/platform/types/tsconfig.json

@@ -14,5 +14,10 @@
         "rootDir": "./src",
         "composite": true
     },
-    "exclude": ["**/node_modules", "**/lib", "**/*.test.js", "**/*.test.ts"]
+    "include": [
+        "./src/**/*"
+    ],
+    "exclude": [
+        "**/*.test.*"
+    ]
 }

webapp/playbooks/package.json

@@ -127,7 +127,7 @@
     "test": "jest --forceExit --detectOpenHandles --verbose",
     "test:watch": "jest --watch",
     "test-ci": "jest --forceExit --detectOpenHandles --maxWorkers=2",
-    "check-types": "tsc",
+    "check-types": "tsc -b",
     "extract": "formatjs extract 'src/**/*.{ts,tsx}' --out-file i18n/temp.json --id-interpolation-pattern '[sha512:contenthash:base64:6]' && formatjs compile 'i18n/temp.json' --out-file i18n/en.json && rm i18n/temp.json",
     "graphql": "graphql-codegen --config graphql_gen.ts",
     "report-unused-exports": "ts-prune",

webapp/playbooks/src/components/backstage/playbook_runs/playbook_run/add_participant_modal.tsx

@@ -7,7 +7,7 @@ import {Modal} from 'react-bootstrap';
 import styled from 'styled-components';
 import {useDispatch, useSelector} from 'react-redux';
 import {searchProfiles} from 'mattermost-redux/actions/users';
-import {UserProfile} from 'mattermost-webapp/packages/types/src/users';
+import {UserProfile} from '@mattermost/types/users';
 import {LightningBoltOutlineIcon} from '@mattermost/compass-icons/components';
 import {OptionTypeBase, StylesConfig} from 'react-select';
 import {General} from 'mattermost-redux/constants';

webapp/playbooks/src/components/backstage/playbook_runs/playbook_run/rhs_participants.tsx

@@ -7,7 +7,7 @@ import styled from 'styled-components';
 import {AccountPlusOutlineIcon} from '@mattermost/compass-icons/components';
 import {useDispatch, useSelector} from 'react-redux';
 import {getProfilesByIds} from 'mattermost-redux/actions/users';
-import {UserProfile} from 'mattermost-webapp/packages/types/src/users';
+import {UserProfile} from '@mattermost/types/users';
 import {sortByUsername} from 'mattermost-redux/utils/user_utils';
 import {getCurrentUser} from 'mattermost-redux/selectors/entities/users';
 

webapp/playbooks/tsconfig.json

@@ -24,15 +24,13 @@
     "useUnknownInCatchVariables": false,
     "paths": {
       "src": ["src"],
-      "@mattermost/types/*": ["../platform/packages/types/src/*"],
-      "@mattermost/client": ["../platform/client/src"],
-      "@mattermost/components": ["../platform/components/src"],
       "mattermost-redux/*": ["../channels/src/packages/mattermost-redux/src/*"],
       "reselect": ["../channels/src/packages/reselect/src"]
     }
   },
   "include": [
-    "./**/*"
+      "./i18n/*.json",
+      "./src/**/*",
   ],
   "exclude": [
     "dist",