From c184d268d5f56b4b90018296233d7d25007e0eb5 Mon Sep 17 00:00:00 2001
From: Anna Henningsen <anna.henningsen@mongodb.com>
Date: Thu, 23 Nov 2023 18:11:59 +0100
Subject: [PATCH] chore(compass-schema-validation): convert to TS and new-style
 plugin COMPASS-7476 (#5154)

---
 package-lock.json                             |  23 +-
 .../components/collection-tab-provider.tsx    |  24 ++
 .../src/components/collection-tab.tsx         |  31 +-
 packages/compass-collection/src/index.ts      |   2 +
 .../src/modules/collection-tab.ts             |  21 +-
 .../compass-collection/src/modules/tabs.ts    |  10 +-
 packages/compass-home/package.json            |   4 +
 .../src/components/workspace-content.tsx      |   8 +-
 .../compass-schema-validation/package.json    |  17 +-
 .../compass-schema-validation.module.less     |   6 -
 .../compass-schema-validation.spec.jsx        |  30 --
 .../compass-schema-validation.spec.tsx        |  31 ++
 ...tion.jsx => compass-schema-validation.tsx} |  44 ++-
 .../{index.js => index.ts}                    |   0
 .../document-preview.module.less              |  48 ---
 .../document-preview.spec.jsx                 |  58 ---
 .../document-preview.spec.tsx                 |  42 +++
 ...ument-preview.jsx => document-preview.tsx} |  21 +-
 .../document-preview/{index.js => index.ts}   |   5 +-
 .../sample-documents/{index.js => index.ts}   |   0
 .../sample-documents.module.less              |  32 --
 ...nts.spec.jsx => sample-documents.spec.tsx} |  15 +-
 ...ple-documents.jsx => sample-documents.tsx} |  14 +-
 .../validation-editor/{index.js => index.ts}  |   0
 ...or.spec.jsx => validation-editor.spec.tsx} |  34 +-
 ...ation-editor.jsx => validation-editor.tsx} | 100 ++---
 .../src/components/validation-selectors.tsx   |  16 +-
 .../validation-states/{index.js => index.ts}  |   0
 .../validation-states.module.less             |   9 -
 ...es.spec.jsx => validation-states.spec.tsx} |  49 +--
 ...ation-states.jsx => validation-states.tsx} |  42 ++-
 .../compass-schema-validation/src/index.js    |  34 --
 .../compass-schema-validation/src/index.ts    |  41 +++
 .../src/modules/data-service.js               |  50 ---
 ...a-service.spec.js => data-service.spec.ts} |  15 +-
 .../src/modules/data-service.ts               |  49 +++
 .../{edit-mode.spec.js => edit-mode.spec.ts}  |   2 +-
 .../modules/{edit-mode.js => edit-mode.ts}    |  29 +-
 .../{fields.spec.js => fields.spec.ts}        |   2 +-
 .../src/modules/{fields.js => fields.ts}      |  44 ++-
 .../src/modules/index.js                      |  92 -----
 .../src/modules/index.ts                      | 124 +++++++
 .../src/modules/is-loaded.js                  |  16 -
 .../{is-loaded.spec.js => is-loaded.spec.ts}  |   2 +-
 .../src/modules/is-loaded.ts                  |  29 ++
 .../src/modules/namespace.js                  |  37 --
 .../{namespace.spec.js => namespace.spec.ts}  |   9 +-
 .../src/modules/namespace.ts                  |  53 +++
 .../src/modules/sample-documents.js           | 217 -----------
 ...ments.spec.js => sample-documents.spec.ts} |  43 +--
 .../src/modules/sample-documents.ts           | 307 ++++++++++++++++
 .../src/modules/server-version.js             |  38 --
 ...version.spec.js => server-version.spec.ts} |   2 +-
 .../src/modules/server-version.ts             |  43 +++
 ...{validation.spec.js => validation.spec.ts} |  28 +-
 .../modules/{validation.js => validation.ts}  | 342 +++++++++++-------
 ...{zero-state.spec.js => zero-state.spec.ts} |   2 +-
 .../modules/{zero-state.js => zero-state.ts}  |  38 +-
 .../compass-schema-validation/src/plugin.jsx  |  29 --
 .../src/plugin.spec.js                        |  17 -
 .../src/stores/index.js                       |   3 -
 .../src/stores/index.ts                       |   1 +
 .../src/stores/store.js                       | 105 ------
 .../stores/{store.spec.js => store.spec.ts}   |  71 ++--
 .../src/stores/store.ts                       | 117 ++++++
 .../src/typings.d.ts                          |   1 +
 66 files changed, 1486 insertions(+), 1282 deletions(-)
 create mode 100644 packages/compass-collection/src/components/collection-tab-provider.tsx
 delete mode 100644 packages/compass-schema-validation/src/components/compass-schema-validation/compass-schema-validation.module.less
 delete mode 100644 packages/compass-schema-validation/src/components/compass-schema-validation/compass-schema-validation.spec.jsx
 create mode 100644 packages/compass-schema-validation/src/components/compass-schema-validation/compass-schema-validation.spec.tsx
 rename packages/compass-schema-validation/src/components/compass-schema-validation/{compass-schema-validation.jsx => compass-schema-validation.tsx} (58%)
 rename packages/compass-schema-validation/src/components/compass-schema-validation/{index.js => index.ts} (100%)
 delete mode 100644 packages/compass-schema-validation/src/components/document-preview/document-preview.module.less
 delete mode 100644 packages/compass-schema-validation/src/components/document-preview/document-preview.spec.jsx
 create mode 100644 packages/compass-schema-validation/src/components/document-preview/document-preview.spec.tsx
 rename packages/compass-schema-validation/src/components/document-preview/{document-preview.jsx => document-preview.tsx} (78%)
 rename packages/compass-schema-validation/src/components/document-preview/{index.js => index.ts} (88%)
 rename packages/compass-schema-validation/src/components/sample-documents/{index.js => index.ts} (100%)
 delete mode 100644 packages/compass-schema-validation/src/components/sample-documents/sample-documents.module.less
 rename packages/compass-schema-validation/src/components/sample-documents/{sample-documents.spec.jsx => sample-documents.spec.tsx} (51%)
 rename packages/compass-schema-validation/src/components/sample-documents/{sample-documents.jsx => sample-documents.tsx} (92%)
 rename packages/compass-schema-validation/src/components/validation-editor/{index.js => index.ts} (100%)
 rename packages/compass-schema-validation/src/components/validation-editor/{validation-editor.spec.jsx => validation-editor.spec.tsx} (79%)
 rename packages/compass-schema-validation/src/components/validation-editor/{validation-editor.jsx => validation-editor.tsx} (78%)
 rename packages/compass-schema-validation/src/components/validation-states/{index.js => index.ts} (100%)
 delete mode 100644 packages/compass-schema-validation/src/components/validation-states/validation-states.module.less
 rename packages/compass-schema-validation/src/components/validation-states/{validation-states.spec.jsx => validation-states.spec.tsx} (88%)
 rename packages/compass-schema-validation/src/components/validation-states/{validation-states.jsx => validation-states.tsx} (83%)
 delete mode 100644 packages/compass-schema-validation/src/index.js
 create mode 100644 packages/compass-schema-validation/src/index.ts
 delete mode 100644 packages/compass-schema-validation/src/modules/data-service.js
 rename packages/compass-schema-validation/src/modules/{data-service.spec.js => data-service.spec.ts} (65%)
 create mode 100644 packages/compass-schema-validation/src/modules/data-service.ts
 rename packages/compass-schema-validation/src/modules/{edit-mode.spec.js => edit-mode.spec.ts} (94%)
 rename packages/compass-schema-validation/src/modules/{edit-mode.js => edit-mode.ts} (50%)
 rename packages/compass-schema-validation/src/modules/{fields.spec.js => fields.spec.ts} (94%)
 rename packages/compass-schema-validation/src/modules/{fields.js => fields.ts} (53%)
 delete mode 100644 packages/compass-schema-validation/src/modules/index.js
 create mode 100644 packages/compass-schema-validation/src/modules/index.ts
 delete mode 100644 packages/compass-schema-validation/src/modules/is-loaded.js
 rename packages/compass-schema-validation/src/modules/{is-loaded.spec.js => is-loaded.spec.ts} (91%)
 create mode 100644 packages/compass-schema-validation/src/modules/is-loaded.ts
 delete mode 100644 packages/compass-schema-validation/src/modules/namespace.js
 rename packages/compass-schema-validation/src/modules/{namespace.spec.js => namespace.spec.ts} (71%)
 create mode 100644 packages/compass-schema-validation/src/modules/namespace.ts
 delete mode 100644 packages/compass-schema-validation/src/modules/sample-documents.js
 rename packages/compass-schema-validation/src/modules/{sample-documents.spec.js => sample-documents.spec.ts} (81%)
 create mode 100644 packages/compass-schema-validation/src/modules/sample-documents.ts
 delete mode 100644 packages/compass-schema-validation/src/modules/server-version.js
 rename packages/compass-schema-validation/src/modules/{server-version.spec.js => server-version.spec.ts} (91%)
 create mode 100644 packages/compass-schema-validation/src/modules/server-version.ts
 rename packages/compass-schema-validation/src/modules/{validation.spec.js => validation.spec.ts} (93%)
 rename packages/compass-schema-validation/src/modules/{validation.js => validation.ts} (51%)
 rename packages/compass-schema-validation/src/modules/{zero-state.spec.js => zero-state.spec.ts} (91%)
 rename packages/compass-schema-validation/src/modules/{zero-state.js => zero-state.ts} (50%)
 delete mode 100644 packages/compass-schema-validation/src/plugin.jsx
 delete mode 100644 packages/compass-schema-validation/src/plugin.spec.js
 delete mode 100644 packages/compass-schema-validation/src/stores/index.js
 create mode 100644 packages/compass-schema-validation/src/stores/index.ts
 delete mode 100644 packages/compass-schema-validation/src/stores/store.js
 rename packages/compass-schema-validation/src/stores/{store.spec.js => store.spec.ts} (86%)
 create mode 100644 packages/compass-schema-validation/src/stores/store.ts
 create mode 100644 packages/compass-schema-validation/src/typings.d.ts

diff --git a/package-lock.json b/package-lock.json
index ee518377cf4..6d0972ee953 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -46335,6 +46335,7 @@
         "@mongodb-js/atlas-service": "^0.10.1",
         "@mongodb-js/compass-aggregations": "^9.20.0",
         "@mongodb-js/compass-app-stores": "^7.6.1",
+        "@mongodb-js/compass-collection": "^4.19.1",
         "@mongodb-js/compass-components": "^1.19.0",
         "@mongodb-js/compass-connections": "^1.20.1",
         "@mongodb-js/compass-database": "^3.19.1",
@@ -46344,6 +46345,7 @@
         "@mongodb-js/compass-instance": "^4.19.1",
         "@mongodb-js/compass-logging": "^1.2.6",
         "@mongodb-js/compass-saved-aggregations-queries": "^1.20.1",
+        "@mongodb-js/compass-schema-validation": "^6.20.0",
         "@mongodb-js/compass-serverstats": "^16.19.1",
         "@mongodb-js/compass-settings": "^0.21.1",
         "@mongodb-js/compass-shell": "^3.19.1",
@@ -46384,6 +46386,7 @@
         "@mongodb-js/atlas-service": "^0.10.1",
         "@mongodb-js/compass-aggregations": "^9.20.0",
         "@mongodb-js/compass-app-stores": "^7.6.1",
+        "@mongodb-js/compass-collection": "^4.19.1",
         "@mongodb-js/compass-components": "^1.19.0",
         "@mongodb-js/compass-connections": "^1.20.1",
         "@mongodb-js/compass-database": "^3.19.1",
@@ -46393,6 +46396,7 @@
         "@mongodb-js/compass-instance": "^4.19.1",
         "@mongodb-js/compass-logging": "^1.2.6",
         "@mongodb-js/compass-saved-aggregations-queries": "^1.20.1",
+        "@mongodb-js/compass-schema-validation": "^6.20.0",
         "@mongodb-js/compass-serverstats": "^16.19.1",
         "@mongodb-js/compass-settings": "^0.21.1",
         "@mongodb-js/compass-shell": "^3.19.1",
@@ -47217,15 +47221,19 @@
       "version": "6.20.0",
       "license": "SSPL",
       "dependencies": {
+        "@mongodb-js/compass-app-stores": "^7.6.1",
         "@mongodb-js/compass-components": "^1.19.0",
         "@mongodb-js/compass-crud": "^13.20.0",
         "@mongodb-js/compass-editor": "^0.18.0",
         "@mongodb-js/compass-logging": "^1.2.6",
         "@mongodb-js/mongodb-redux-common": "^2.0.15",
         "bson": "^6.2.0",
-        "compass-preferences-model": "^2.15.6"
+        "compass-preferences-model": "^2.15.6",
+        "hadron-app-registry": "^9.0.14",
+        "mongodb-data-service": "^22.15.1"
       },
       "devDependencies": {
+        "@mongodb-js/compass-collection": "^4.19.1",
         "@mongodb-js/eslint-config-compass": "^1.0.11",
         "@mongodb-js/mocha-config-compass": "^1.3.2",
         "@mongodb-js/prettier-config-compass": "^1.0.1",
@@ -47236,14 +47244,10 @@
         "electron": "^25.9.5",
         "enzyme": "^3.11.0",
         "eslint": "^7.25.0",
-        "hadron-app": "^5.15.1",
-        "hadron-app-registry": "^9.0.14",
         "hadron-ipc": "^3.2.4",
         "javascript-stringify": "^2.0.1",
-        "less": "^3.11.1",
         "lodash": "^4.17.21",
         "mocha": "^10.2.0",
-        "mongodb-data-service": "^22.15.1",
         "mongodb-instance-model": "^12.15.1",
         "mongodb-ns": "^2.4.0",
         "mongodb-query-parser": "^4.0.0",
@@ -47257,6 +47261,7 @@
         "sinon": "^8.1.1"
       },
       "peerDependencies": {
+        "@mongodb-js/compass-app-stores": "^7.6.1",
         "@mongodb-js/compass-components": "^1.19.0",
         "@mongodb-js/compass-crud": "^13.20.0",
         "@mongodb-js/compass-editor": "^0.18.0",
@@ -47264,6 +47269,8 @@
         "@mongodb-js/mongodb-redux-common": "^2.0.15",
         "bson": "^6.2.0",
         "compass-preferences-model": "^2.15.6",
+        "hadron-app-registry": "^9.0.14",
+        "mongodb-data-service": "^22.15.1",
         "react": "^17.0.2"
       }
     },
@@ -59658,6 +59665,7 @@
         "@mongodb-js/atlas-service": "^0.10.1",
         "@mongodb-js/compass-aggregations": "^9.20.0",
         "@mongodb-js/compass-app-stores": "^7.6.1",
+        "@mongodb-js/compass-collection": "^4.19.1",
         "@mongodb-js/compass-components": "^1.19.0",
         "@mongodb-js/compass-connections": "^1.20.1",
         "@mongodb-js/compass-database": "^3.19.1",
@@ -59667,6 +59675,7 @@
         "@mongodb-js/compass-instance": "^4.19.1",
         "@mongodb-js/compass-logging": "^1.2.6",
         "@mongodb-js/compass-saved-aggregations-queries": "^1.20.1",
+        "@mongodb-js/compass-schema-validation": "^6.20.0",
         "@mongodb-js/compass-serverstats": "^16.19.1",
         "@mongodb-js/compass-settings": "^0.21.1",
         "@mongodb-js/compass-shell": "^3.19.1",
@@ -60277,6 +60286,8 @@
     "@mongodb-js/compass-schema-validation": {
       "version": "file:packages/compass-schema-validation",
       "requires": {
+        "@mongodb-js/compass-app-stores": "^7.6.1",
+        "@mongodb-js/compass-collection": "^4.19.1",
         "@mongodb-js/compass-components": "^1.19.0",
         "@mongodb-js/compass-crud": "^13.20.0",
         "@mongodb-js/compass-editor": "^0.18.0",
@@ -60294,11 +60305,9 @@
         "electron": "^25.9.5",
         "enzyme": "^3.11.0",
         "eslint": "^7.25.0",
-        "hadron-app": "^5.15.1",
         "hadron-app-registry": "^9.0.14",
         "hadron-ipc": "^3.2.4",
         "javascript-stringify": "^2.0.1",
-        "less": "^3.11.1",
         "lodash": "^4.17.21",
         "mocha": "^10.2.0",
         "mongodb-data-service": "^22.15.1",
diff --git a/packages/compass-collection/src/components/collection-tab-provider.tsx b/packages/compass-collection/src/components/collection-tab-provider.tsx
new file mode 100644
index 00000000000..00a657008f1
--- /dev/null
+++ b/packages/compass-collection/src/components/collection-tab-provider.tsx
@@ -0,0 +1,24 @@
+import React, { useContext, useRef } from 'react';
+import type { CollectionTabPluginMetadata } from '../modules/collection-tab';
+
+export interface CollectionTabPlugin {
+  name: string;
+  component: React.ComponentType<CollectionTabPluginMetadata>;
+}
+
+const CollectionTabsContext = React.createContext<CollectionTabPlugin[]>([]);
+
+export const CollectionTabsProvider: React.FunctionComponent<{
+  tabs: CollectionTabPlugin[];
+}> = ({ tabs, children }) => {
+  const tabsRef = useRef(tabs);
+  return (
+    <CollectionTabsContext.Provider value={tabsRef.current}>
+      {children}
+    </CollectionTabsContext.Provider>
+  );
+};
+
+export function useCollectionTabPlugins(): CollectionTabPlugin[] {
+  return useContext(CollectionTabsContext);
+}
diff --git a/packages/compass-collection/src/components/collection-tab.tsx b/packages/compass-collection/src/components/collection-tab.tsx
index c2663e6662f..ada470f2f8d 100644
--- a/packages/compass-collection/src/components/collection-tab.tsx
+++ b/packages/compass-collection/src/components/collection-tab.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
-import type { Store } from 'redux';
 import { connect, Provider } from 'react-redux';
+import type { CollectionTabPluginMetadata } from '../modules/collection-tab';
 import {
   returnToView,
   selectDatabase,
@@ -9,10 +9,13 @@ import {
   selectTab,
   renderScopedModals,
   renderTabs,
+  createCollectionStoreMetadata,
 } from '../modules/collection-tab';
 import { css, ErrorBoundary, TabNavBar } from '@mongodb-js/compass-components';
 import CollectionHeader from './collection-header';
 import { createLoggerAndTelemetry } from '@mongodb-js/compass-logging';
+import type { configureStore } from '../stores/collection-tab';
+import { useCollectionTabPlugins } from './collection-tab-provider';
 
 const { log, mongoLogId, track } = createLoggerAndTelemetry(
   'COMPASS-COLLECTION-TAB-UI'
@@ -58,11 +61,26 @@ const collectionModalContainerStyles = css({
 
 const CollectionTab: React.FunctionComponent<{
   currentTab: string;
+  collectionTabPluginMetadata: CollectionTabPluginMetadata;
   renderScopedModals(): React.ReactElement[];
   renderTabs(): { name: string; component: React.ReactElement }[];
   onTabClick(name: string): void;
-}> = ({ currentTab, renderScopedModals, renderTabs, onTabClick }) => {
-  const tabs = renderTabs();
+}> = ({
+  currentTab,
+  collectionTabPluginMetadata,
+  renderScopedModals,
+  renderTabs,
+  onTabClick,
+}) => {
+  const pluginTabs = useCollectionTabPlugins();
+  const legacyTabs = renderTabs();
+  const tabs = [
+    ...legacyTabs,
+    ...pluginTabs.map(({ name, component: Component }) => ({
+      name,
+      component: <Component {...collectionTabPluginMetadata} />,
+    })),
+  ];
   const activeTabIndex = tabs.findIndex((tab) => tab.name === currentTab);
 
   useEffect(() => {
@@ -121,6 +139,7 @@ const ConnectedCollectionTab = connect(
   (state: CollectionState) => {
     return {
       currentTab: state.currentTab,
+      collectionTabPluginMetadata: createCollectionStoreMetadata(state),
     };
   },
   {
@@ -130,9 +149,9 @@ const ConnectedCollectionTab = connect(
   }
 )(CollectionTab);
 
-const CollectionTabPlugin: React.FunctionComponent<{ store: Store }> = ({
-  store,
-}) => {
+const CollectionTabPlugin: React.FunctionComponent<{
+  store: ReturnType<typeof configureStore>;
+}> = ({ store }) => {
   return (
     <Provider store={store}>
       <ConnectedCollectionTab></ConnectedCollectionTab>
diff --git a/packages/compass-collection/src/index.ts b/packages/compass-collection/src/index.ts
index 5c91054af38..fbd62d7a1cf 100644
--- a/packages/compass-collection/src/index.ts
+++ b/packages/compass-collection/src/index.ts
@@ -33,3 +33,5 @@ function deactivate(appRegistry: AppRegistry): void {
 export default CollectionTabsPlugin;
 export { activate, deactivate };
 export { default as metadata } from '../package.json';
+export type { CollectionTabPluginMetadata } from './modules/collection-tab';
+export { CollectionTabsProvider } from './components/collection-tab-provider';
diff --git a/packages/compass-collection/src/modules/collection-tab.ts b/packages/compass-collection/src/modules/collection-tab.ts
index 1bc6479f008..cbf4a8a734d 100644
--- a/packages/compass-collection/src/modules/collection-tab.ts
+++ b/packages/compass-collection/src/modules/collection-tab.ts
@@ -137,7 +137,6 @@ export const selectTab = (
     localAppRegistry.emit('subtab-changed', tabName);
   };
 };
-
 export const selectDatabase = (): CollectionThunkAction<void> => {
   return (dispatch, getState, { globalAppRegistry }) => {
     const { metadata } = getState();
@@ -164,6 +163,20 @@ export const returnToView = (): CollectionThunkAction<void> => {
   };
 };
 
+export function createCollectionStoreMetadata(state: CollectionState) {
+  return {
+    ...state.metadata,
+    query: state.initialQuery,
+    aggregation: state.initialAggregation,
+    pipelineText: state.initialPipelineText,
+    editViewName: state.editViewName,
+  };
+}
+
+export type CollectionTabPluginMetadata = ReturnType<
+  typeof createCollectionStoreMetadata
+>;
+
 const setupRole = (
   roleName: string
 ): CollectionThunkAction<{ name: string; component: React.ReactElement }[]> => {
@@ -187,7 +200,7 @@ const setupRole = (
       } = role;
 
       const collectionStoreMetadata = {
-        ...getState().metadata,
+        ...createCollectionStoreMetadata(getState()),
         localAppRegistry,
         globalAppRegistry,
         dataProvider: {
@@ -196,10 +209,6 @@ const setupRole = (
           error: null,
           dataProvider: dataService,
         },
-        query: getState().initialQuery,
-        aggregation: getState().initialAggregation,
-        pipelineText: getState().initialPipelineText,
-        editViewName: getState().editViewName,
       };
 
       let actions;
diff --git a/packages/compass-collection/src/modules/tabs.ts b/packages/compass-collection/src/modules/tabs.ts
index a51363db8b6..ffe6d5dde9a 100644
--- a/packages/compass-collection/src/modules/tabs.ts
+++ b/packages/compass-collection/src/modules/tabs.ts
@@ -1,7 +1,7 @@
 import React from 'react';
 import type { AnyAction, Reducer } from 'redux';
 import type { ThunkAction } from 'redux-thunk';
-import AppRegistry from 'hadron-app-registry';
+import AppRegistry, { AppRegistryProvider } from 'hadron-app-registry';
 import { ObjectId } from 'bson';
 import type { CollectionMetadata } from 'mongodb-collection-model';
 import type { DataService } from 'mongodb-data-service';
@@ -213,8 +213,12 @@ const createNewTab = (
       localAppRegistry,
       ...collectionMetadata,
     });
-    const component = React.createElement(collectionTabRole.component, {
-      store,
+    const component = React.createElement(AppRegistryProvider, {
+      localAppRegistry: localAppRegistry,
+      deactivateOnUnmount: false,
+      children: React.createElement(collectionTabRole.component, {
+        store,
+      }),
     });
     const tab: CollectionTab = {
       id: new ObjectId().toHexString(),
diff --git a/packages/compass-home/package.json b/packages/compass-home/package.json
index 8e3d83a5622..85bcee0095c 100644
--- a/packages/compass-home/package.json
+++ b/packages/compass-home/package.json
@@ -37,6 +37,7 @@
     "@mongodb-js/atlas-service": "^0.10.1",
     "@mongodb-js/compass-aggregations": "^9.20.0",
     "@mongodb-js/compass-app-stores": "^7.6.1",
+    "@mongodb-js/compass-collection": "^4.19.1",
     "@mongodb-js/compass-components": "^1.19.0",
     "@mongodb-js/compass-connections": "^1.20.1",
     "@mongodb-js/compass-database": "^3.19.1",
@@ -46,6 +47,7 @@
     "@mongodb-js/compass-instance": "^4.19.1",
     "@mongodb-js/compass-logging": "^1.2.6",
     "@mongodb-js/compass-saved-aggregations-queries": "^1.20.1",
+    "@mongodb-js/compass-schema-validation": "^6.20.0",
     "@mongodb-js/compass-serverstats": "^16.19.1",
     "@mongodb-js/compass-settings": "^0.21.1",
     "@mongodb-js/compass-shell": "^3.19.1",
@@ -61,6 +63,7 @@
     "@mongodb-js/atlas-service": "^0.10.1",
     "@mongodb-js/compass-aggregations": "^9.20.0",
     "@mongodb-js/compass-app-stores": "^7.6.1",
+    "@mongodb-js/compass-collection": "^4.19.1",
     "@mongodb-js/compass-components": "^1.19.0",
     "@mongodb-js/compass-connections": "^1.20.1",
     "@mongodb-js/compass-database": "^3.19.1",
@@ -70,6 +73,7 @@
     "@mongodb-js/compass-instance": "^4.19.1",
     "@mongodb-js/compass-logging": "^1.2.6",
     "@mongodb-js/compass-saved-aggregations-queries": "^1.20.1",
+    "@mongodb-js/compass-schema-validation": "^6.20.0",
     "@mongodb-js/compass-serverstats": "^16.19.1",
     "@mongodb-js/compass-settings": "^0.21.1",
     "@mongodb-js/compass-shell": "^3.19.1",
diff --git a/packages/compass-home/src/components/workspace-content.tsx b/packages/compass-home/src/components/workspace-content.tsx
index 35dcb2e038b..dbb0367b329 100644
--- a/packages/compass-home/src/components/workspace-content.tsx
+++ b/packages/compass-home/src/components/workspace-content.tsx
@@ -11,10 +11,12 @@ import {
   CompassDatabasePlugin,
   DatabaseTabsProvider,
 } from '@mongodb-js/compass-database';
+import { CompassSchemaValidationPlugin } from '@mongodb-js/compass-schema-validation';
 import CompassSavedAggregationsQueriesPlugin from '@mongodb-js/compass-saved-aggregations-queries';
 import { InstanceTab as DatabasesTabPlugin } from '@mongodb-js/compass-databases-collections';
 import { InstanceTab as PerformanceTabPlugin } from '@mongodb-js/compass-serverstats';
 import type Namespace from '../types/namespace';
+import { CollectionTabsProvider } from '@mongodb-js/compass-collection';
 
 const EmptyComponent: React.FunctionComponent = () => null;
 
@@ -27,7 +29,11 @@ const WorkspaceContent: React.FunctionComponent<{ namespace: Namespace }> = ({
     useAppRegistryComponent('Collection.Workspace') ?? EmptyComponent;
 
   if (namespace.collection) {
-    return <Collection></Collection>;
+    return (
+      <CollectionTabsProvider tabs={[CompassSchemaValidationPlugin]}>
+        <Collection />
+      </CollectionTabsProvider>
+    );
   }
 
   if (namespace.database) {
diff --git a/packages/compass-schema-validation/package.json b/packages/compass-schema-validation/package.json
index 50a3ffdb261..3232076d30b 100644
--- a/packages/compass-schema-validation/package.json
+++ b/packages/compass-schema-validation/package.json
@@ -24,14 +24,14 @@
     "dist"
   ],
   "main": "dist/index.js",
-  "compass:main": "src/index.js",
+  "compass:main": "src/index.ts",
   "types": "dist/src/index.d.ts",
   "exports": {
     "browser": "./dist/browser.js",
     "require": "./dist/index.js"
   },
   "compass:exports": {
-    ".": "./src/index.js"
+    ".": "./src/index.ts"
   },
   "scripts": {
     "bootstrap": "npm run postcompile",
@@ -56,6 +56,7 @@
     "reformat": "npm run eslint . -- --fix && npm run prettier -- --write ."
   },
   "peerDependencies": {
+    "@mongodb-js/compass-app-stores": "^7.6.1",
     "@mongodb-js/compass-components": "^1.19.0",
     "@mongodb-js/compass-crud": "^13.20.0",
     "@mongodb-js/compass-editor": "^0.18.0",
@@ -63,9 +64,12 @@
     "@mongodb-js/mongodb-redux-common": "^2.0.15",
     "bson": "^6.2.0",
     "compass-preferences-model": "^2.15.6",
+    "hadron-app-registry": "^9.0.14",
+    "mongodb-data-service": "^22.15.1",
     "react": "^17.0.2"
   },
   "devDependencies": {
+    "@mongodb-js/compass-collection": "^4.19.1",
     "@mongodb-js/eslint-config-compass": "^1.0.11",
     "@mongodb-js/mocha-config-compass": "^1.3.2",
     "@mongodb-js/prettier-config-compass": "^1.0.1",
@@ -76,14 +80,10 @@
     "electron": "^25.9.5",
     "enzyme": "^3.11.0",
     "eslint": "^7.25.0",
-    "hadron-app": "^5.15.1",
-    "hadron-app-registry": "^9.0.14",
     "hadron-ipc": "^3.2.4",
     "javascript-stringify": "^2.0.1",
-    "less": "^3.11.1",
     "lodash": "^4.17.21",
     "mocha": "^10.2.0",
-    "mongodb-data-service": "^22.15.1",
     "mongodb-instance-model": "^12.15.1",
     "mongodb-ns": "^2.4.0",
     "mongodb-query-parser": "^4.0.0",
@@ -97,12 +97,15 @@
     "sinon": "^8.1.1"
   },
   "dependencies": {
+    "@mongodb-js/compass-app-stores": "^7.6.1",
     "@mongodb-js/compass-components": "^1.19.0",
     "@mongodb-js/compass-crud": "^13.20.0",
     "@mongodb-js/compass-editor": "^0.18.0",
     "@mongodb-js/compass-logging": "^1.2.6",
     "@mongodb-js/mongodb-redux-common": "^2.0.15",
     "bson": "^6.2.0",
-    "compass-preferences-model": "^2.15.6"
+    "compass-preferences-model": "^2.15.6",
+    "hadron-app-registry": "^9.0.14",
+    "mongodb-data-service": "^22.15.1"
   }
 }
diff --git a/packages/compass-schema-validation/src/components/compass-schema-validation/compass-schema-validation.module.less b/packages/compass-schema-validation/src/components/compass-schema-validation/compass-schema-validation.module.less
deleted file mode 100644
index 5be432a4fc0..00000000000
--- a/packages/compass-schema-validation/src/components/compass-schema-validation/compass-schema-validation.module.less
+++ /dev/null
@@ -1,6 +0,0 @@
-.root {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  height: 100%;
-}
diff --git a/packages/compass-schema-validation/src/components/compass-schema-validation/compass-schema-validation.spec.jsx b/packages/compass-schema-validation/src/components/compass-schema-validation/compass-schema-validation.spec.jsx
deleted file mode 100644
index 63d44a8c67d..00000000000
--- a/packages/compass-schema-validation/src/components/compass-schema-validation/compass-schema-validation.spec.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import AppRegistry from 'hadron-app-registry';
-import { expect } from 'chai';
-
-import CompassSchemaValidation from '../compass-schema-validation';
-import configureStore from '../../stores';
-import styles from './compass-schema-validation.module.less';
-
-describe('CompassSchemaValidation [Component]', function () {
-  let component;
-  let store;
-  const appRegistry = new AppRegistry();
-
-  beforeEach(function () {
-    store = configureStore({
-      localAppRegistry: appRegistry,
-    });
-    component = mount(<CompassSchemaValidation store={store} />);
-  });
-
-  afterEach(function () {
-    store = null;
-    component = null;
-  });
-
-  it('renders the correct root classname', function () {
-    expect(component.find(`.${styles.root}`)).to.be.present();
-  });
-});
diff --git a/packages/compass-schema-validation/src/components/compass-schema-validation/compass-schema-validation.spec.tsx b/packages/compass-schema-validation/src/components/compass-schema-validation/compass-schema-validation.spec.tsx
new file mode 100644
index 00000000000..d44bb0a99d1
--- /dev/null
+++ b/packages/compass-schema-validation/src/components/compass-schema-validation/compass-schema-validation.spec.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { expect } from 'chai';
+
+import CompassSchemaValidation from '.';
+import { configureStore } from '../../stores/store';
+import { Provider } from 'react-redux';
+
+describe('CompassSchemaValidation [Component]', function () {
+  let component: any;
+  let store: ReturnType<typeof configureStore> | null;
+
+  beforeEach(function () {
+    store = configureStore();
+    component = mount(
+      <Provider store={store}>
+        <CompassSchemaValidation />
+      </Provider>
+    );
+  });
+
+  afterEach(function () {
+    store = null;
+    component = null;
+  });
+
+  it('renders the correct root classname', function () {
+    expect(component.find(`[data-testid="compass-schema-validation"]`)).to
+      .exist;
+  });
+});
diff --git a/packages/compass-schema-validation/src/components/compass-schema-validation/compass-schema-validation.jsx b/packages/compass-schema-validation/src/components/compass-schema-validation/compass-schema-validation.tsx
similarity index 58%
rename from packages/compass-schema-validation/src/components/compass-schema-validation/compass-schema-validation.jsx
rename to packages/compass-schema-validation/src/components/compass-schema-validation/compass-schema-validation.tsx
index 3db3c24a4d3..50af835658f 100644
--- a/packages/compass-schema-validation/src/components/compass-schema-validation/compass-schema-validation.jsx
+++ b/packages/compass-schema-validation/src/components/compass-schema-validation/compass-schema-validation.tsx
@@ -10,25 +10,31 @@ import {
 } from '../../modules/validation';
 import { namespaceChanged } from '../../modules/namespace';
 import { clearSampleDocuments } from '../../modules/sample-documents';
-import { changeZeroState, zeroStateChanged } from '../../modules/zero-state';
+import { changeZeroState } from '../../modules/zero-state';
 import { withPreferences } from 'compass-preferences-model';
+import { css } from '@mongodb-js/compass-components';
+import type { RootState } from '../../modules';
+import type { ValidationStatesProps } from '../validation-states/validation-states';
 
-import styles from './compass-schema-validation.module.less';
+const styles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  flexGrow: 1,
+  height: '100%',
+});
 
 /**
  * The core schema validation component.
  */
-class CompassSchemaValidation extends Component {
+class CompassSchemaValidation extends Component<ValidationStatesProps> {
   static displayName = 'CompassSchemaValidation';
 
   /**
    * Renders the CompassSchemaValidation component.
-   *
-   * @returns {React.Component} The component.
    */
   render() {
     return (
-      <div className={styles.root}>
+      <div className={styles} data-testid="compass-schema-validation">
         <ValidationStates {...this.props} />
       </div>
     );
@@ -42,7 +48,7 @@ class CompassSchemaValidation extends Component {
  *
  * @returns {Object} The mapped properties.
  */
-const mapStateToProps = (state) => ({
+const mapStateToProps = (state: RootState) => ({
   serverVersion: state.serverVersion,
   validation: state.validation,
   fields: state.fields,
@@ -55,17 +61,19 @@ const mapStateToProps = (state) => ({
 /**
  * Connect the redux store to the component (dispatch).
  */
-const MappedCompassSchemaValidation = connect(mapStateToProps, {
-  clearSampleDocuments,
-  validatorChanged,
-  cancelValidation,
-  saveValidation,
-  namespaceChanged,
-  validationActionChanged,
-  validationLevelChanged,
-  zeroStateChanged,
-  changeZeroState,
-})(withPreferences(CompassSchemaValidation, ['readOnly'], React));
+const MappedCompassSchemaValidation: React.FunctionComponent<unknown> = connect(
+  mapStateToProps,
+  {
+    clearSampleDocuments,
+    validatorChanged,
+    cancelValidation,
+    saveValidation,
+    namespaceChanged,
+    validationActionChanged,
+    validationLevelChanged,
+    changeZeroState,
+  }
+)(withPreferences(CompassSchemaValidation, ['readOnly'], React));
 
 export default MappedCompassSchemaValidation;
 export { CompassSchemaValidation };
diff --git a/packages/compass-schema-validation/src/components/compass-schema-validation/index.js b/packages/compass-schema-validation/src/components/compass-schema-validation/index.ts
similarity index 100%
rename from packages/compass-schema-validation/src/components/compass-schema-validation/index.js
rename to packages/compass-schema-validation/src/components/compass-schema-validation/index.ts
diff --git a/packages/compass-schema-validation/src/components/document-preview/document-preview.module.less b/packages/compass-schema-validation/src/components/document-preview/document-preview.module.less
deleted file mode 100644
index 948a6ad47c7..00000000000
--- a/packages/compass-schema-validation/src/components/document-preview/document-preview.module.less
+++ /dev/null
@@ -1,48 +0,0 @@
-@import (reference) 'mongodb-compass/src/app/styles/index.less';
-
-.document-preview {
-  display: flex;
-  align-items: center;
-  overflow: auto;
-  width: 100%;
-  position: relative;
-
-  &-documents {
-    display: flex;
-    align-items: flex-start;
-    margin-top: 15px;
-    width: 100%;
-
-    .no-documents {
-      background-color: @palette__white;
-      border: 1px solid @palette__gray--light-2;
-      border-radius: 4px;
-      box-shadow: 1px 1px 4px fade(@palette__black, 10%);
-      width: 100%;
-      height: 150px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      color: @palette__gray--dark-2;
-      font-style: italic;
-    }
-  }
-
-  &-document-card {
-    flex: none;
-    border: 1px solid @palette__gray--light-2;
-    border-radius: 4px;
-    box-shadow: 1px 1px 4px fade(@palette__black, 10%);
-    width: 100%;
-    height: 150px;
-    overflow: scroll;
-  }
-
-  &-document-card::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-.document-preview::-webkit-scrollbar {
-  display: none;
-}
diff --git a/packages/compass-schema-validation/src/components/document-preview/document-preview.spec.jsx b/packages/compass-schema-validation/src/components/document-preview/document-preview.spec.jsx
deleted file mode 100644
index cf881fdd805..00000000000
--- a/packages/compass-schema-validation/src/components/document-preview/document-preview.spec.jsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React from 'react';
-import { mount, shallow } from 'enzyme';
-import { expect } from 'chai';
-
-import DocumentPreview from '../document-preview';
-import { DOCUMENT_LOADING_STATES } from '../../modules/sample-documents';
-
-describe('DocumentPreview [Component]', function () {
-  context('when document loading state is initial', function () {
-    it('renders a button to load a sample document', function () {
-      const component = mount(
-        <DocumentPreview loadingState={DOCUMENT_LOADING_STATES.INITIAL} />
-      );
-      expect(
-        component.find('[data-testid="load-sample-document"]')
-      ).to.be.present();
-    });
-  });
-
-  context('when document loading state is loading', function () {
-    it('renders a spinner', function () {
-      const component = mount(
-        <DocumentPreview loadingState={DOCUMENT_LOADING_STATES.LOADING} />
-      );
-      expect(
-        component.find('[data-testid="load-sample-spinner"]')
-      ).to.be.present();
-    });
-  });
-
-  context('when document loading state is success', function () {
-    it('renders a document if there is one present', function () {
-      const component = shallow(
-        <DocumentPreview
-          loadingState={DOCUMENT_LOADING_STATES.SUCCESS}
-          document={{}}
-        />
-      );
-      expect(component.find('Document')).to.be.present();
-    });
-
-    it('renders a no preview text when there is no document', function () {
-      const component = mount(
-        <DocumentPreview loadingState={DOCUMENT_LOADING_STATES.SUCCESS} />
-      );
-      expect(component).to.have.text('No Preview Documents');
-    });
-  });
-
-  context('when document loading state is error', function () {
-    it('renders a no preview text', function () {
-      const component = mount(
-        <DocumentPreview loadingState={DOCUMENT_LOADING_STATES.ERROR} />
-      );
-      expect(component).to.have.text('No Preview Documents');
-    });
-  });
-});
diff --git a/packages/compass-schema-validation/src/components/document-preview/document-preview.spec.tsx b/packages/compass-schema-validation/src/components/document-preview/document-preview.spec.tsx
new file mode 100644
index 00000000000..13503779965
--- /dev/null
+++ b/packages/compass-schema-validation/src/components/document-preview/document-preview.spec.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+import { expect } from 'chai';
+
+import DocumentPreview from '.';
+
+describe('DocumentPreview [Component]', function () {
+  context('when document loading state is initial', function () {
+    it('renders a button to load a sample document', function () {
+      const component = mount(<DocumentPreview loadingState="initial" />);
+      expect(component.find('[data-testid="load-sample-document"]')).to.exist;
+    });
+  });
+
+  context('when document loading state is loading', function () {
+    it('renders a spinner', function () {
+      const component = mount(<DocumentPreview loadingState="loading" />);
+      expect(component.find('[data-testid="load-sample-spinner"]')).to.exist;
+    });
+  });
+
+  context('when document loading state is success', function () {
+    it('renders a document if there is one present', function () {
+      const component = shallow(
+        <DocumentPreview loadingState="success" document={{}} />
+      );
+      expect(component.find('Document')).to.exist;
+    });
+
+    it('renders a no preview text when there is no document', function () {
+      const component = mount(<DocumentPreview loadingState="success" />);
+      expect(component).to.have.text('No Preview Documents');
+    });
+  });
+
+  context('when document loading state is error', function () {
+    it('renders a no preview text', function () {
+      const component = mount(<DocumentPreview loadingState="error" />);
+      expect(component).to.have.text('No Preview Documents');
+    });
+  });
+});
diff --git a/packages/compass-schema-validation/src/components/document-preview/document-preview.jsx b/packages/compass-schema-validation/src/components/document-preview/document-preview.tsx
similarity index 78%
rename from packages/compass-schema-validation/src/components/document-preview/document-preview.jsx
rename to packages/compass-schema-validation/src/components/document-preview/document-preview.tsx
index 487e6b82f64..4be36b6fca3 100644
--- a/packages/compass-schema-validation/src/components/document-preview/document-preview.jsx
+++ b/packages/compass-schema-validation/src/components/document-preview/document-preview.tsx
@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 
 import {
   Body,
@@ -12,7 +11,7 @@ import {
 import { Document } from '@mongodb-js/compass-crud';
 
 import { LoadingOverlay } from '../loading-overlay';
-import { DOCUMENT_LOADING_STATES } from '../../modules/sample-documents';
+import type { DOCUMENT_LOADING_STATES } from '../../modules/sample-documents';
 
 const previewStyles = css({
   display: 'flex',
@@ -38,18 +37,18 @@ const noPreviewTextStyles = css({
   width: '100%',
 });
 
+export interface DocumentPreviewProps {
+  document?: Record<string, unknown>;
+  loadingState: DOCUMENT_LOADING_STATES;
+  onLoadSampleClick?: () => void;
+}
+
 /**
  * The document preview component.
  */
-class DocumentPreview extends Component {
+class DocumentPreview extends Component<DocumentPreviewProps> {
   static displayName = 'DocumentPreview';
 
-  static propTypes = {
-    document: PropTypes.object,
-    loadingState: PropTypes.oneOf(Object.values(DOCUMENT_LOADING_STATES)),
-    onLoadSampleClick: PropTypes.func,
-  };
-
   /**
    * Renders the document preview.
    *
@@ -64,7 +63,7 @@ class DocumentPreview extends Component {
         )}
         data-testid="document-preview"
       >
-        {this.props.loadingState === DOCUMENT_LOADING_STATES.INITIAL ? (
+        {this.props.loadingState === 'initial' ? (
           <Body as="div" className={loadSampleStyles}>
             <Button
               data-testid="load-sample-document"
@@ -74,7 +73,7 @@ class DocumentPreview extends Component {
               Load document
             </Button>
           </Body>
-        ) : this.props.loadingState === DOCUMENT_LOADING_STATES.LOADING ? (
+        ) : this.props.loadingState === 'loading' ? (
           <LoadingOverlay />
         ) : this.props.document ? (
           <Document doc={this.props.document} editable={false} />
diff --git a/packages/compass-schema-validation/src/components/document-preview/index.js b/packages/compass-schema-validation/src/components/document-preview/index.ts
similarity index 88%
rename from packages/compass-schema-validation/src/components/document-preview/index.js
rename to packages/compass-schema-validation/src/components/document-preview/index.ts
index 2b728c6ab60..d00b64b3f9b 100644
--- a/packages/compass-schema-validation/src/components/document-preview/index.js
+++ b/packages/compass-schema-validation/src/components/document-preview/index.ts
@@ -5,9 +5,10 @@ import {
 } from '../../modules/sample-documents';
 
 import DocumentPreview from './document-preview';
+import type { RootState } from '../../modules';
 
 const ValidDocumentPreview = connect(
-  (state) => ({
+  (state: RootState) => ({
     document: state.sampleDocuments.validDocument,
     loadingState: state.sampleDocuments.validDocumentState,
   }),
@@ -17,7 +18,7 @@ const ValidDocumentPreview = connect(
 )(DocumentPreview);
 
 const InvalidDocumentPreview = connect(
-  (state) => ({
+  (state: RootState) => ({
     document: state.sampleDocuments.invalidDocument,
     loadingState: state.sampleDocuments.invalidDocumentState,
   }),
diff --git a/packages/compass-schema-validation/src/components/sample-documents/index.js b/packages/compass-schema-validation/src/components/sample-documents/index.ts
similarity index 100%
rename from packages/compass-schema-validation/src/components/sample-documents/index.js
rename to packages/compass-schema-validation/src/components/sample-documents/index.ts
diff --git a/packages/compass-schema-validation/src/components/sample-documents/sample-documents.module.less b/packages/compass-schema-validation/src/components/sample-documents/sample-documents.module.less
deleted file mode 100644
index 43c259f3133..00000000000
--- a/packages/compass-schema-validation/src/components/sample-documents/sample-documents.module.less
+++ /dev/null
@@ -1,32 +0,0 @@
-@import (reference) 'mongodb-compass/src/app/styles/index.less';
-
-.sample-documents {
-  border: 1px solid @palette__gray--light-2;
-  border-radius: 4px;
-  box-shadow: 1px 1px 1px @palette__gray--light-2;
-  overflow: hidden;
-  margin: 16px 0;
-
-  .sample-documents-content {
-    background-color: @palette__white;
-    padding: 2.4rem;
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    position: relative;
-
-    .document-container {
-      width: 49%;
-    }
-
-    .matching-documents {
-      color: @palette__green--dark-1;
-      font-weight: bold;
-    }
-
-    .notmatching-documents {
-      color: @palette__red--light-1;
-      font-weight: bold;
-    }
-  }
-}
diff --git a/packages/compass-schema-validation/src/components/sample-documents/sample-documents.spec.jsx b/packages/compass-schema-validation/src/components/sample-documents/sample-documents.spec.tsx
similarity index 51%
rename from packages/compass-schema-validation/src/components/sample-documents/sample-documents.spec.jsx
rename to packages/compass-schema-validation/src/components/sample-documents/sample-documents.spec.tsx
index a3163bf350c..ca742efb20f 100644
--- a/packages/compass-schema-validation/src/components/sample-documents/sample-documents.spec.jsx
+++ b/packages/compass-schema-validation/src/components/sample-documents/sample-documents.spec.tsx
@@ -1,23 +1,20 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { expect } from 'chai';
-import configureStore from '../../stores';
-import SampleDocuments from '../sample-documents';
+import SampleDocuments from '.';
 import { Provider } from 'react-redux';
+import { configureStore } from '../../stores/store';
 
 describe('SampleDocuments [Component]', function () {
   it('renders a valid and invalid document preview', function () {
+    const store = configureStore();
     const component = mount(
-      <Provider store={configureStore()}>
+      <Provider store={store}>
         <SampleDocuments />
       </Provider>
     );
 
-    expect(
-      component.find('[data-testid="matching-documents"]')
-    ).to.be.present();
-    expect(
-      component.find('[data-testid="notmatching-documents"]')
-    ).to.be.present();
+    expect(component.find('[data-testid="matching-documents"]')).to.exist;
+    expect(component.find('[data-testid="notmatching-documents"]')).to.exist;
   });
 });
diff --git a/packages/compass-schema-validation/src/components/sample-documents/sample-documents.jsx b/packages/compass-schema-validation/src/components/sample-documents/sample-documents.tsx
similarity index 92%
rename from packages/compass-schema-validation/src/components/sample-documents/sample-documents.jsx
rename to packages/compass-schema-validation/src/components/sample-documents/sample-documents.tsx
index e4126dc5610..36d9dfae543 100644
--- a/packages/compass-schema-validation/src/components/sample-documents/sample-documents.jsx
+++ b/packages/compass-schema-validation/src/components/sample-documents/sample-documents.tsx
@@ -66,7 +66,11 @@ const documentHeadingTextStyles = css({
   fontWeight: 'bold',
   color: 'inherit',
 });
-class SampleDocuments extends Component {
+
+export interface SampleDocumentProps {
+  darkMode?: boolean;
+}
+class SampleDocuments extends Component<SampleDocumentProps> {
   static displayName = 'SampleDocuments';
 
   static propTypes = {
@@ -75,8 +79,6 @@ class SampleDocuments extends Component {
 
   /**
    * Render matching documents.
-   *
-   * @returns {React.Component} The component.
    */
   renderMatchingDocuments() {
     return (
@@ -97,8 +99,6 @@ class SampleDocuments extends Component {
 
   /**
    * Render not matching documents.
-   *
-   * @returns {React.Component} The component.
    */
   renderNotMatchingDocuments() {
     return (
@@ -119,8 +119,6 @@ class SampleDocuments extends Component {
 
   /**
    * Render ValidationEditor component.
-   *
-   * @returns {React.Component} The rendered component.
    */
   render() {
     return (
@@ -139,4 +137,4 @@ class SampleDocuments extends Component {
   }
 }
 
-export default withDarkMode(SampleDocuments);
+export default withDarkMode<SampleDocumentProps>(SampleDocuments);
diff --git a/packages/compass-schema-validation/src/components/validation-editor/index.js b/packages/compass-schema-validation/src/components/validation-editor/index.ts
similarity index 100%
rename from packages/compass-schema-validation/src/components/validation-editor/index.js
rename to packages/compass-schema-validation/src/components/validation-editor/index.ts
diff --git a/packages/compass-schema-validation/src/components/validation-editor/validation-editor.spec.jsx b/packages/compass-schema-validation/src/components/validation-editor/validation-editor.spec.tsx
similarity index 79%
rename from packages/compass-schema-validation/src/components/validation-editor/validation-editor.spec.jsx
rename to packages/compass-schema-validation/src/components/validation-editor/validation-editor.spec.tsx
index 95b0622ea3d..7817966553f 100644
--- a/packages/compass-schema-validation/src/components/validation-editor/validation-editor.spec.jsx
+++ b/packages/compass-schema-validation/src/components/validation-editor/validation-editor.spec.tsx
@@ -2,15 +2,13 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { expect } from 'chai';
 import sinon from 'sinon';
-import AppRegistry from 'hadron-app-registry';
-import hadronApp from 'hadron-app';
 
-import ValidationEditor from '../validation-editor';
+import ValidationEditor from '.';
 import { CodemirrorMultilineEditor } from '@mongodb-js/compass-editor';
 
 describe('ValidationEditor [Component]', function () {
   context('when it is an editable mode', function () {
-    let component;
+    let component: ReturnType<typeof mount> | null;
     const setValidatorChangedSpy = sinon.spy();
     const setValidationActionChangedSpy = sinon.spy();
     const setValidationLevelChangedSpy = sinon.spy();
@@ -18,7 +16,7 @@ describe('ValidationEditor [Component]', function () {
     const saveValidationSpy = sinon.spy();
     const clearSampleDocumentsSpy = sinon.spy();
     const serverVersion = '3.6.0';
-    const fields = [];
+    const fields: any[] = [];
     const validation = {
       validator: '',
       validationAction: 'warn',
@@ -26,14 +24,8 @@ describe('ValidationEditor [Component]', function () {
       isChanged: false,
       syntaxError: null,
       error: null,
-    };
+    } as const;
     const isEditable = true;
-    const appRegistry = new AppRegistry();
-
-    before(function () {
-      global.hadronApp = hadronApp;
-      global.hadronApp.appRegistry = appRegistry;
-    });
 
     beforeEach(function () {
       component = mount(
@@ -57,15 +49,15 @@ describe('ValidationEditor [Component]', function () {
     });
 
     it('renders the wrapper div', function () {
-      expect(component.find('ValidationEditor')).to.be.present();
+      expect(component!.find('ValidationEditor')).to.exist;
       expect(
-        component.find(CodemirrorMultilineEditor).props().readOnly
+        component!.find(CodemirrorMultilineEditor).props().readOnly
       ).to.be.equal(false);
     });
   });
 
   context('when it is a not editable mode', function () {
-    let component;
+    let component: ReturnType<typeof mount> | null;
     const setValidatorChangedSpy = sinon.spy();
     const setValidationActionChangedSpy = sinon.spy();
     const setValidationLevelChangedSpy = sinon.spy();
@@ -73,7 +65,7 @@ describe('ValidationEditor [Component]', function () {
     const saveValidationSpy = sinon.spy();
     const clearSampleDocumentsSpy = sinon.spy();
     const serverVersion = '3.6.0';
-    const fields = [];
+    const fields: any[] = [];
     const validation = {
       validator: '',
       validationAction: 'warn',
@@ -81,14 +73,8 @@ describe('ValidationEditor [Component]', function () {
       isChanged: false,
       syntaxError: null,
       error: null,
-    };
+    } as const;
     const isEditable = false;
-    const appRegistry = new AppRegistry();
-
-    before(function () {
-      global.hadronApp = hadronApp;
-      global.hadronApp.appRegistry = appRegistry;
-    });
 
     beforeEach(function () {
       component = mount(
@@ -113,7 +99,7 @@ describe('ValidationEditor [Component]', function () {
 
     it('renders the wrapper div', function () {
       expect(
-        component.find(CodemirrorMultilineEditor).props().readOnly
+        component!.find(CodemirrorMultilineEditor).props().readOnly
       ).to.be.equal(true);
     });
   });
diff --git a/packages/compass-schema-validation/src/components/validation-editor/validation-editor.jsx b/packages/compass-schema-validation/src/components/validation-editor/validation-editor.tsx
similarity index 78%
rename from packages/compass-schema-validation/src/components/validation-editor/validation-editor.jsx
rename to packages/compass-schema-validation/src/components/validation-editor/validation-editor.tsx
index afdf607fc9c..9fb10e88b26 100644
--- a/packages/compass-schema-validation/src/components/validation-editor/validation-editor.jsx
+++ b/packages/compass-schema-validation/src/components/validation-editor/validation-editor.tsx
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { debounce } from 'lodash';
 import { createLoggerAndTelemetry } from '@mongodb-js/compass-logging';
+import type { BannerVariant } from '@mongodb-js/compass-components';
 import {
   css,
   cx,
@@ -18,9 +19,16 @@ import {
   createValidationAutocompleter,
 } from '@mongodb-js/compass-editor';
 
+import type {
+  Validation,
+  ValidationLevel,
+  ValidationServerAction,
+  ValidationState,
+} from '../../modules/validation';
 import { checkValidator } from '../../modules/validation';
 
 import { ActionSelector, LevelSelector } from '../validation-selectors';
+import type { FieldsState } from '../../modules/fields';
 
 const { track } = createLoggerAndTelemetry('COMPASS-SCHEMA-VALIDATION-UI');
 
@@ -58,13 +66,25 @@ const buttonStyles = css({
   marginLeft: spacing[2],
 });
 
+export type ValidationCodeEditorProps = Pick<
+  React.ComponentProps<typeof CodemirrorMultilineEditor>,
+  'onChangeText' | 'readOnly'
+> & {
+  text: string;
+  fields: {
+    name: string;
+    description?: string;
+  }[];
+  serverVersion: string;
+};
+
 const ValidationCodeEditor = ({
   text,
   onChangeText,
   readOnly,
   fields,
   serverVersion,
-}) => {
+}: ValidationCodeEditorProps) => {
   const completer = React.useMemo(() => {
     return createValidationAutocompleter({ fields, serverVersion });
   }, [fields, serverVersion]);
@@ -88,39 +108,42 @@ ValidationCodeEditor.propTypes = {
   serverVersion: PropTypes.string,
 };
 
+export type ValidationEditorProps = {
+  clearSampleDocuments: () => void;
+  validatorChanged: (text: string) => void;
+  validationActionChanged: (action: ValidationServerAction) => void;
+  validationLevelChanged: (level: ValidationLevel) => void;
+  cancelValidation: () => void;
+  saveValidation: (text: Validation) => void;
+  serverVersion: string;
+  fields: FieldsState;
+  validation: Pick<
+    ValidationState,
+    | 'validator'
+    | 'validationAction'
+    | 'validationLevel'
+    | 'isChanged'
+    | 'syntaxError'
+    | 'error'
+  >;
+  isEditable: boolean;
+  darkMode?: boolean;
+};
+
 /**
  * The validation editor component.
  */
-class ValidationEditor extends Component {
+class ValidationEditor extends Component<ValidationEditorProps> {
   static displayName = 'ValidationEditor';
 
-  static propTypes = {
-    clearSampleDocuments: PropTypes.func.isRequired,
-    validatorChanged: PropTypes.func.isRequired,
-    validationActionChanged: PropTypes.func.isRequired,
-    validationLevelChanged: PropTypes.func.isRequired,
-    cancelValidation: PropTypes.func.isRequired,
-    saveValidation: PropTypes.func.isRequired,
-    serverVersion: PropTypes.string,
-    fields: PropTypes.array,
-    validation: PropTypes.shape({
-      validator: PropTypes.string.isRequired,
-      validationAction: PropTypes.string.isRequired,
-      validationLevel: PropTypes.string.isRequired,
-      isChanged: PropTypes.bool.isRequired,
-      syntaxError: PropTypes.object,
-      error: PropTypes.object,
-    }),
-    isEditable: PropTypes.bool.isRequired,
-    darkMode: PropTypes.bool.isRequired,
-  };
+  debounceValidatorChanged: (text: string) => void;
 
   /**
    * Set up the autocompleters once on initialization.
    *
    * @param {Object} props - The properties.
    */
-  constructor(props) {
+  constructor(props: ValidationEditorProps) {
     super(props);
     this.debounceValidatorChanged = debounce((validator) => {
       this.props.clearSampleDocuments();
@@ -140,17 +163,15 @@ class ValidationEditor extends Component {
    *
    * @param {Object} validator - The validator.
    */
-  onValidatorChange(validator) {
+  onValidatorChange(validator: string) {
     this.props.validatorChanged(validator);
     this.validatorChanged();
   }
 
   /**
    * Checks if there is any error.
-   *
-   * @returns {Boolean} True if there is an error.
    */
-  hasErrors() {
+  hasErrors(): boolean {
     return !!(this.props.validation.error || this.props.validation.syntaxError);
   }
 
@@ -158,24 +179,21 @@ class ValidationEditor extends Component {
    * Validator changed.
    */
   validatorChanged() {
-    this.debounceValidatorChanged(
-      this.props.validation.validator,
-      this.hasErrors()
-    );
+    this.debounceValidatorChanged(this.props.validation.validator);
   }
 
-  trackValidator(validator) {
+  trackValidator(validator: string) {
     const checkedValidator = checkValidator(validator);
     const trackEvent = {
-      json_schema: Boolean(checkedValidator.validator.$jsonSchema),
+      json_schema:
+        typeof checkedValidator.validator === 'object' &&
+        !!checkedValidator.validator?.$jsonSchema,
     };
     track('Schema Validation Edited', trackEvent);
   }
 
   /**
    * Render action selector.
-   *
-   * @returns {React.Component} The component.
    */
   renderActionSelector() {
     const { validation, isEditable, validationActionChanged } = this.props;
@@ -192,8 +210,6 @@ class ValidationEditor extends Component {
 
   /**
    * Render level selector.
-   *
-   * @returns {React.Component} The component.
    */
   renderLevelSelector() {
     const { validation, isEditable, validationLevelChanged } = this.props;
@@ -210,8 +226,6 @@ class ValidationEditor extends Component {
 
   /**
    * Render validation message.
-   *
-   * @returns {React.Component} The component.
    */
   renderValidationMessage() {
     if (!this.hasErrors()) {
@@ -219,7 +233,7 @@ class ValidationEditor extends Component {
     }
 
     let message = '';
-    let variant = 'default';
+    let variant: BannerVariant = 'info';
 
     if (this.props.validation.syntaxError) {
       message = this.props.validation.syntaxError.message;
@@ -234,8 +248,6 @@ class ValidationEditor extends Component {
 
   /**
    * Render actions pannel.
-   *
-   * @returns {React.Component} The component.
    */
   renderActionsPanel() {
     if (!(this.props.validation.isChanged && this.props.isEditable)) {
@@ -275,8 +287,6 @@ class ValidationEditor extends Component {
 
   /**
    * Render ValidationEditor component.
-   *
-   * @returns {React.Component} The rendered component.
    */
   render() {
     const { darkMode, isEditable, validation } = this.props;
@@ -313,4 +323,4 @@ class ValidationEditor extends Component {
   }
 }
 
-export default withDarkMode(ValidationEditor);
+export default withDarkMode<ValidationEditorProps>(ValidationEditor);
diff --git a/packages/compass-schema-validation/src/components/validation-selectors.tsx b/packages/compass-schema-validation/src/components/validation-selectors.tsx
index 4d3f9304f73..06ec8d20ff4 100644
--- a/packages/compass-schema-validation/src/components/validation-selectors.tsx
+++ b/packages/compass-schema-validation/src/components/validation-selectors.tsx
@@ -10,6 +10,10 @@ import {
   css,
   spacing,
 } from '@mongodb-js/compass-components';
+import type {
+  ValidationLevel,
+  ValidationServerAction,
+} from '../modules/validation';
 
 const ACTION_HELP_URL =
   'https://www.mongodb.com/docs/manual/reference/command/collMod/#mongodb-collflag-validationAction';
@@ -29,8 +33,8 @@ const selectStyles = css({
 
 type ActionSelectorProps = {
   isEditable: boolean;
-  validationActionChanged: (value: string) => void;
-  validationAction: 'warn' | 'error';
+  validationActionChanged: (value: ValidationServerAction) => void;
+  validationAction: ValidationServerAction;
 };
 
 export function ActionSelector({
@@ -55,7 +59,7 @@ export function ActionSelector({
         data-testid="validation-action-selector"
         aria-labelledby={labelId}
         disabled={!isEditable}
-        onChange={validationActionChanged}
+        onChange={validationActionChanged as (value: string) => void}
         value={validationAction}
         allowDeselect={false}
         className={selectStyles}
@@ -70,8 +74,8 @@ export function ActionSelector({
 
 type LevelSelectorProps = {
   isEditable: boolean;
-  validationLevelChanged: (value: string) => void;
-  validationLevel: 'off' | 'moderate' | 'strict';
+  validationLevelChanged: (value: ValidationLevel) => void;
+  validationLevel: ValidationLevel;
 };
 
 export function LevelSelector({
@@ -96,7 +100,7 @@ export function LevelSelector({
         data-testid="validation-level-selector"
         aria-labelledby={labelId}
         disabled={!isEditable}
-        onChange={validationLevelChanged}
+        onChange={validationLevelChanged as (value: string) => void}
         value={validationLevel}
         allowDeselect={false}
         className={selectStyles}
diff --git a/packages/compass-schema-validation/src/components/validation-states/index.js b/packages/compass-schema-validation/src/components/validation-states/index.ts
similarity index 100%
rename from packages/compass-schema-validation/src/components/validation-states/index.js
rename to packages/compass-schema-validation/src/components/validation-states/index.ts
diff --git a/packages/compass-schema-validation/src/components/validation-states/validation-states.module.less b/packages/compass-schema-validation/src/components/validation-states/validation-states.module.less
deleted file mode 100644
index a8147ea46f0..00000000000
--- a/packages/compass-schema-validation/src/components/validation-states/validation-states.module.less
+++ /dev/null
@@ -1,9 +0,0 @@
-@import (reference) 'mongodb-compass/src/app/styles/index.less';
-
-.validation-states {
-  padding: 16px;
-
-  .content-container {
-    height: 100%;
-  }
-}
diff --git a/packages/compass-schema-validation/src/components/validation-states/validation-states.spec.jsx b/packages/compass-schema-validation/src/components/validation-states/validation-states.spec.tsx
similarity index 88%
rename from packages/compass-schema-validation/src/components/validation-states/validation-states.spec.jsx
rename to packages/compass-schema-validation/src/components/validation-states/validation-states.spec.tsx
index a92c63a6033..c75ad108b3b 100644
--- a/packages/compass-schema-validation/src/components/validation-states/validation-states.spec.jsx
+++ b/packages/compass-schema-validation/src/components/validation-states/validation-states.spec.tsx
@@ -9,19 +9,18 @@ import {
 } from '@mongodb-js/compass-components';
 import { Provider } from 'react-redux';
 
-import ValidationStates from '../validation-states';
+import ValidationStates from '.';
 import ValidationEditor from '../validation-editor';
-
-import styles from './validation-states.module.less';
-import configureStore from '../../stores';
+import { configureStore } from '../../stores/store';
 
 describe('ValidationStates [Component]', function () {
-  let props;
-  let component;
+  let props: any;
+  let component: ReturnType<typeof mount>;
 
-  const mountComponent = (props) => {
+  const mountComponent = (props: any) => {
+    const store = configureStore();
     return mount(
-      <Provider store={configureStore()}>
+      <Provider store={store}>
         <ValidationStates {...props} />
       </Provider>
     );
@@ -75,13 +74,15 @@ describe('ValidationStates [Component]', function () {
     });
 
     it('renders the wrapper div', function () {
-      expect(component.find(`.${styles['validation-states']}`)).to.be.present();
+      expect(
+        component.find(`[data-testid="schema-validation-states"]`)
+      ).to.exist;
     });
 
     it('renders the version banner', function () {
       expect(
         component.find({ ['data-testid']: 'old-server-read-only' })
-      ).to.be.present();
+      ).to.exist;
     });
 
     it('does not render other banners', function () {
@@ -89,7 +90,7 @@ describe('ValidationStates [Component]', function () {
         component.find({
           ['data-testid']: 'collection-validation-warning',
         })
-      ).to.not.be.present();
+      ).to.not.exist;
     });
   });
 
@@ -114,7 +115,7 @@ describe('ValidationStates [Component]', function () {
         component.find({
           ['data-testid']: 'collection-validation-warning',
         })
-      ).to.be.present();
+      ).to.exist;
       expect(
         component
           .find({
@@ -149,7 +150,7 @@ describe('ValidationStates [Component]', function () {
         component.find({
           ['data-testid']: 'collection-validation-warning',
         })
-      ).to.be.present();
+      ).to.exist;
       expect(
         component
           .find({
@@ -163,7 +164,7 @@ describe('ValidationStates [Component]', function () {
     it('does not render other banners', function () {
       expect(
         component.find({ ['data-testid']: 'old-server-read-only' })
-      ).to.be.not.present();
+      ).to.be.not.exist;
     });
   });
 
@@ -184,8 +185,8 @@ describe('ValidationStates [Component]', function () {
     });
 
     it('does not render a warning banner', function () {
-      expect(component.find(Banner)).to.be.not.present();
-      expect(component.find(WarningSummary)).to.be.not.present();
+      expect(component.find(Banner)).to.be.not.exist;
+      expect(component.find(WarningSummary)).to.be.not.exist;
     });
   });
 
@@ -206,8 +207,8 @@ describe('ValidationStates [Component]', function () {
     });
 
     it('does not render a warning banner', function () {
-      expect(component.find(Banner)).to.be.not.present();
-      expect(component.find(WarningSummary)).to.be.not.present();
+      expect(component.find(Banner)).to.be.not.exist;
+      expect(component.find(WarningSummary)).to.be.not.exist;
     });
   });
 
@@ -232,7 +233,7 @@ describe('ValidationStates [Component]', function () {
         component.find({
           ['data-testid']: 'collection-validation-warning',
         })
-      ).to.be.present();
+      ).to.exist;
       expect(
         component
           .find({
@@ -246,7 +247,7 @@ describe('ValidationStates [Component]', function () {
     it('does not render other banners', function () {
       expect(
         component.find({ ['data-testid']: 'old-server-read-only' })
-      ).to.be.not.present();
+      ).to.be.not.exist;
     });
   });
 
@@ -267,7 +268,7 @@ describe('ValidationStates [Component]', function () {
     });
 
     it('does not render the zero state', function () {
-      expect(component.find(EmptyContent)).to.not.be.present();
+      expect(component.find(EmptyContent)).to.not.exist;
     });
   });
 
@@ -288,7 +289,7 @@ describe('ValidationStates [Component]', function () {
     });
 
     it('renders the zero state', function () {
-      expect(component.find(EmptyContent)).to.be.present();
+      expect(component.find(EmptyContent)).to.exist;
     });
   });
 
@@ -309,7 +310,7 @@ describe('ValidationStates [Component]', function () {
     });
 
     it('does not render the content', function () {
-      expect(component.find(ValidationEditor)).to.not.be.present();
+      expect(component.find(ValidationEditor)).to.not.exist;
     });
   });
 
@@ -330,7 +331,7 @@ describe('ValidationStates [Component]', function () {
     });
 
     it('renders the content', function () {
-      expect(component.find(ValidationEditor)).to.be.present();
+      expect(component.find(ValidationEditor)).to.exist;
     });
   });
 });
diff --git a/packages/compass-schema-validation/src/components/validation-states/validation-states.jsx b/packages/compass-schema-validation/src/components/validation-states/validation-states.tsx
similarity index 83%
rename from packages/compass-schema-validation/src/components/validation-states/validation-states.jsx
rename to packages/compass-schema-validation/src/components/validation-states/validation-states.tsx
index 43ea2d5e9f9..78aca4813c0 100644
--- a/packages/compass-schema-validation/src/components/validation-states/validation-states.jsx
+++ b/packages/compass-schema-validation/src/components/validation-states/validation-states.tsx
@@ -8,12 +8,16 @@ import {
   Link,
   WarningSummary,
   WorkspaceContainer,
+  css,
+  spacing,
 } from '@mongodb-js/compass-components';
 import ValidationEditor from '../validation-editor';
 import SampleDocuments from '../sample-documents';
 import { ZeroGraphic } from '../zero-graphic';
+import type { ValidationEditorProps } from '../validation-editor/validation-editor';
 
-import styles from './validation-states.module.less';
+const validationStatesStyles = css({ padding: spacing[3] });
+const contentContainerStyles = css({ height: '100%' });
 
 /**
  * Warnings for the banner.
@@ -39,17 +43,30 @@ const DOC_SCHEMA_VALIDATION =
 const DOC_UPGRADE_REVISION =
   'https://docs.mongodb.com/manual/tutorial/upgrade-revision/';
 
+export interface ValidationStatesProps
+  extends Omit<ValidationEditorProps, 'isEditable'> {
+  isZeroState: boolean;
+  isLoaded: boolean;
+  changeZeroState: (value: boolean) => void;
+  editMode: {
+    collectionTimeSeries?: boolean;
+    collectionReadOnly?: boolean;
+    writeStateStoreReadOnly?: boolean;
+    oldServerReadOnly?: boolean;
+  };
+  readOnly: boolean;
+}
+
 /**
  * The ValidationStates component.
  */
-class ValidationStates extends Component {
+class ValidationStates extends Component<ValidationStatesProps> {
   static displayName = 'ValidationStates';
 
   static propTypes = {
     isZeroState: PropTypes.bool.isRequired,
     isLoaded: PropTypes.bool.isRequired,
     changeZeroState: PropTypes.func.isRequired,
-    zeroStateChanged: PropTypes.func.isRequired,
     editMode: PropTypes.object.isRequired,
     serverVersion: PropTypes.string,
     readOnly: PropTypes.bool,
@@ -88,11 +105,7 @@ class ValidationStates extends Component {
         <Banner variant="warning">
           <div data-testid="old-server-read-only">
             {READ_ONLY_WARNING.oldServerReadOnly}&nbsp;
-            <Link
-              className={styles['upgrade-link']}
-              target="_blank"
-              href={DOC_UPGRADE_REVISION}
-            >
+            <Link target="_blank" href={DOC_UPGRADE_REVISION}>
               upgrade to MongoDB 3.2.
             </Link>
           </div>
@@ -113,8 +126,6 @@ class ValidationStates extends Component {
 
   /**
    * Renders the schema validation zero state.
-   *
-   * @returns {React.Component} The component.
    */
   renderZeroState() {
     if (!this.props.isZeroState) {
@@ -153,8 +164,6 @@ class ValidationStates extends Component {
 
   /**
    * Renders the schema validation content.
-   *
-   * @returns {React.Component} The component.
    */
   renderContent() {
     if (this.props.isZeroState) {
@@ -166,7 +175,7 @@ class ValidationStates extends Component {
     }
 
     return (
-      <div className={styles['content-container']}>
+      <div className={contentContainerStyles}>
         <ValidationEditor {...this.props} isEditable={this.isEditable()} />
         <SampleDocuments />
       </div>
@@ -175,13 +184,14 @@ class ValidationStates extends Component {
 
   /**
    * Renders the ValidationStates component.
-   *
-   * @returns {React.Component} The component.
    */
   render() {
     return (
       <WorkspaceContainer>
-        <div className={styles['validation-states']}>
+        <div
+          className={validationStatesStyles}
+          data-testid="schema-validation-states"
+        >
           {this.renderBanner()}
           {this.renderZeroState()}
           {this.renderContent()}
diff --git a/packages/compass-schema-validation/src/index.js b/packages/compass-schema-validation/src/index.js
deleted file mode 100644
index ad0a72306ac..00000000000
--- a/packages/compass-schema-validation/src/index.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import CompassSchemaValidationPlugin from './plugin';
-import configureStore from './stores';
-
-/**
- * A sample role for the component.
- */
-const ROLE = {
-  name: 'Validation',
-  component: CompassSchemaValidationPlugin,
-  configureStore: configureStore,
-  configureActions: () => {},
-  storeName: 'CompassSchemaValidation.Store',
-  actionName: 'CompassSchemaValidation.Action',
-};
-
-/**
- * Activate all the components in the Compass Json Schema Validation package.
- * @param {Object} appRegistry - The Hadron appRegisrty to activate this plugin with.
- **/
-function activate(appRegistry) {
-  appRegistry.registerRole('Collection.Tab', ROLE);
-}
-
-/**
- * Deactivate all the components in the Compass Json Schema Validation package.
- * @param {Object} appRegistry - The Hadron appRegisrty to deactivate this plugin with.
- **/
-function deactivate(appRegistry) {
-  appRegistry.deregisterRole('Collection.Tab', ROLE);
-}
-
-export default CompassSchemaValidationPlugin;
-export { activate, deactivate, configureStore };
-export { default as metadata } from '../package.json';
diff --git a/packages/compass-schema-validation/src/index.ts b/packages/compass-schema-validation/src/index.ts
new file mode 100644
index 00000000000..910a5db2a02
--- /dev/null
+++ b/packages/compass-schema-validation/src/index.ts
@@ -0,0 +1,41 @@
+import { onActivated } from './stores';
+import CompassSchemaValidation from './components/compass-schema-validation';
+import { registerHadronPlugin } from 'hadron-app-registry';
+import { dataServiceLocator } from 'mongodb-data-service/provider';
+import type { DataService } from 'mongodb-data-service';
+import type { CollectionTabPluginMetadata } from '@mongodb-js/compass-collection';
+import type { MongoDBInstance } from '@mongodb-js/compass-app-stores/provider';
+import { mongoDBInstanceLocator } from '@mongodb-js/compass-app-stores/provider';
+
+function activate() {
+  // no-op
+}
+
+function deactivate() {
+  // no-op
+}
+
+export const CompassSchemaValidationHadronPlugin = registerHadronPlugin<
+  CollectionTabPluginMetadata,
+  {
+    dataService: () => DataService;
+    instance: () => MongoDBInstance;
+  }
+>(
+  {
+    name: 'CompassSchemaValidationPlugin',
+    component: CompassSchemaValidation,
+    activate: onActivated,
+  },
+  {
+    dataService: dataServiceLocator,
+    instance: mongoDBInstanceLocator,
+  }
+);
+export const CompassSchemaValidationPlugin = {
+  name: 'Validation',
+  component: CompassSchemaValidationHadronPlugin,
+};
+
+export { activate, deactivate };
+export { default as metadata } from '../package.json';
diff --git a/packages/compass-schema-validation/src/modules/data-service.js b/packages/compass-schema-validation/src/modules/data-service.js
deleted file mode 100644
index 0575d948c9b..00000000000
--- a/packages/compass-schema-validation/src/modules/data-service.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * The prefix.
- */
-const PREFIX = 'validation/data-service';
-
-/**
- * Data service connected.
- */
-export const DATA_SERVICE_CONNECTED = `${PREFIX}/DATA_SERVICE_CONNECTED`;
-
-/**
- * The initial state.
- */
-export const INITIAL_STATE = {
-  error: null,
-  dataService: null,
-};
-
-/**
- * Reducer function for handling data service connected actions.
- *
- * @param {Object} state - The data service state.
- * @param {Object} action - The action.
- *
- * @returns {String} The new state.
- */
-export default function reducer(state = INITIAL_STATE, action) {
-  if (action.type === DATA_SERVICE_CONNECTED) {
-    return {
-      error: action.error,
-      dataService: action.dataService,
-    };
-  }
-
-  return state;
-}
-
-/**
- * Action creator for data service connected events.
- *
- * @param {Error} error - The connection error.
- * @param {DataService} dataService - The data service.
- *
- * @returns {Object} The data service connected action.
- */
-export const dataServiceConnected = (error, dataService) => ({
-  type: DATA_SERVICE_CONNECTED,
-  error,
-  dataService,
-});
diff --git a/packages/compass-schema-validation/src/modules/data-service.spec.js b/packages/compass-schema-validation/src/modules/data-service.spec.ts
similarity index 65%
rename from packages/compass-schema-validation/src/modules/data-service.spec.js
rename to packages/compass-schema-validation/src/modules/data-service.spec.ts
index e09f8f4586a..dc33ddc6b66 100644
--- a/packages/compass-schema-validation/src/modules/data-service.spec.js
+++ b/packages/compass-schema-validation/src/modules/data-service.spec.ts
@@ -8,9 +8,8 @@ import reducer, {
 describe('data service module', function () {
   describe('#dataServiceConnected', function () {
     it('returns the DATA_SERVICE_CONNECTED action', function () {
-      expect(dataServiceConnected('test', 'ds')).to.deep.equal({
+      expect(dataServiceConnected('ds' as any)).to.deep.equal({
         type: DATA_SERVICE_CONNECTED,
-        error: 'test',
         dataService: 'ds',
       });
     });
@@ -19,21 +18,15 @@ describe('data service module', function () {
   describe('#reducer', function () {
     context('when the action is not data service connected', function () {
       it('returns the default state', function () {
-        expect(reducer(undefined, { type: 'test' })).to.deep.equal({
-          error: null,
-          dataService: null,
-        });
+        expect(reducer(undefined, { type: 'test' } as any)).to.deep.equal(null);
       });
     });
 
     context('when the action is data service connected', function () {
       it('returns the new state', function () {
         expect(
-          reducer(undefined, dataServiceConnected('err', 'ds'))
-        ).to.deep.equal({
-          error: 'err',
-          dataService: 'ds',
-        });
+          reducer(undefined, dataServiceConnected('ds' as any))
+        ).to.deep.equal('ds');
       });
     });
   });
diff --git a/packages/compass-schema-validation/src/modules/data-service.ts b/packages/compass-schema-validation/src/modules/data-service.ts
new file mode 100644
index 00000000000..2d3fc780f93
--- /dev/null
+++ b/packages/compass-schema-validation/src/modules/data-service.ts
@@ -0,0 +1,49 @@
+import type { DataService } from 'mongodb-data-service';
+import type { RootAction } from '.';
+
+/**
+ * The prefix.
+ */
+const PREFIX = 'validation/data-service';
+
+/**
+ * Data service connected.
+ */
+export const DATA_SERVICE_CONNECTED =
+  `${PREFIX}/DATA_SERVICE_CONNECTED` as const;
+interface DataServiceConnectedAction {
+  type: typeof DATA_SERVICE_CONNECTED;
+  dataService: DataService;
+}
+
+export type DataServiceState = DataService | null;
+export type DataServiceAction = DataServiceConnectedAction;
+
+/**
+ * The initial state.
+ */
+export const INITIAL_STATE: DataServiceState = null;
+
+/**
+ * Reducer function for handling data service connected actions.
+ */
+export default function reducer(
+  state: DataServiceState = INITIAL_STATE,
+  action: RootAction
+): DataServiceState {
+  if (action.type === DATA_SERVICE_CONNECTED) {
+    return action.dataService;
+  }
+
+  return state;
+}
+
+/**
+ * Action creator for data service connected events.
+ */
+export const dataServiceConnected = (
+  dataService: DataService
+): DataServiceConnectedAction => ({
+  type: DATA_SERVICE_CONNECTED,
+  dataService,
+});
diff --git a/packages/compass-schema-validation/src/modules/edit-mode.spec.js b/packages/compass-schema-validation/src/modules/edit-mode.spec.ts
similarity index 94%
rename from packages/compass-schema-validation/src/modules/edit-mode.spec.js
rename to packages/compass-schema-validation/src/modules/edit-mode.spec.ts
index b85c3e5a7f4..4c9a2a4f230 100644
--- a/packages/compass-schema-validation/src/modules/edit-mode.spec.js
+++ b/packages/compass-schema-validation/src/modules/edit-mode.spec.ts
@@ -24,7 +24,7 @@ describe('edit-mode module', function () {
       'when the action is not presented in edit-mode module',
       function () {
         it('returns the default state', function () {
-          expect(reducer(undefined, { type: 'test' })).to.deep.equal({
+          expect(reducer(undefined, { type: 'test' } as any)).to.deep.equal({
             collectionReadOnly: false,
             collectionTimeSeries: false,
             writeStateStoreReadOnly: false,
diff --git a/packages/compass-schema-validation/src/modules/edit-mode.js b/packages/compass-schema-validation/src/modules/edit-mode.ts
similarity index 50%
rename from packages/compass-schema-validation/src/modules/edit-mode.js
rename to packages/compass-schema-validation/src/modules/edit-mode.ts
index 96cb36b031e..fe9d20343f8 100644
--- a/packages/compass-schema-validation/src/modules/edit-mode.js
+++ b/packages/compass-schema-validation/src/modules/edit-mode.ts
@@ -1,12 +1,28 @@
+import type { RootAction } from '.';
+
 /**
  * The edit mode changed action.
  */
-export const EDIT_MODE_CHANGED = 'validation/namespace/EDIT_MODE_CHANGED';
+export const EDIT_MODE_CHANGED =
+  'validation/namespace/EDIT_MODE_CHANGED' as const;
+interface EditModeChangedAction {
+  type: typeof EDIT_MODE_CHANGED;
+  editMode: Partial<EditModeState>;
+}
+
+export type EditModeAction = EditModeChangedAction;
+
+export interface EditModeState {
+  collectionReadOnly: boolean;
+  collectionTimeSeries: boolean;
+  writeStateStoreReadOnly: boolean;
+  oldServerReadOnly: boolean;
+}
 
 /**
  * The initial state.
  */
-export const INITIAL_STATE = {
+export const INITIAL_STATE: EditModeState = {
   collectionReadOnly: false,
   collectionTimeSeries: false,
   writeStateStoreReadOnly: false,
@@ -21,7 +37,10 @@ export const INITIAL_STATE = {
  *
  * @returns {String} The new state.
  */
-export default function reducer(state = INITIAL_STATE, action) {
+export default function reducer(
+  state: EditModeState = INITIAL_STATE,
+  action: RootAction
+): EditModeState {
   if (action.type === EDIT_MODE_CHANGED) {
     return { ...state, ...action.editMode };
   }
@@ -36,7 +55,9 @@ export default function reducer(state = INITIAL_STATE, action) {
  *
  * @returns {Object} The edit mode changed action.
  */
-export const editModeChanged = (editMode) => ({
+export const editModeChanged = (
+  editMode: Partial<EditModeState>
+): EditModeChangedAction => ({
   type: EDIT_MODE_CHANGED,
   editMode,
 });
diff --git a/packages/compass-schema-validation/src/modules/fields.spec.js b/packages/compass-schema-validation/src/modules/fields.spec.ts
similarity index 94%
rename from packages/compass-schema-validation/src/modules/fields.spec.js
rename to packages/compass-schema-validation/src/modules/fields.spec.ts
index a5047d1273d..df44ebd210d 100644
--- a/packages/compass-schema-validation/src/modules/fields.spec.js
+++ b/packages/compass-schema-validation/src/modules/fields.spec.ts
@@ -17,7 +17,7 @@ describe('server version module', function () {
   describe('#reducer', function () {
     context('when the action is not fields changed', function () {
       it('returns the default state', function () {
-        expect(reducer(undefined, { type: 'test' })).to.deep.equal([]);
+        expect(reducer(undefined, { type: 'test' } as any)).to.deep.equal([]);
       });
     });
 
diff --git a/packages/compass-schema-validation/src/modules/fields.js b/packages/compass-schema-validation/src/modules/fields.ts
similarity index 53%
rename from packages/compass-schema-validation/src/modules/fields.js
rename to packages/compass-schema-validation/src/modules/fields.ts
index f2d8e49b7ce..67dc0e8b4db 100644
--- a/packages/compass-schema-validation/src/modules/fields.js
+++ b/packages/compass-schema-validation/src/modules/fields.ts
@@ -1,21 +1,33 @@
+import type { RootAction } from '.';
+
 /**
  * Fields changed action.
  */
-export const FIELDS_CHANGED = 'validation/fields/FIELDS_CHANGED';
+export const FIELDS_CHANGED = 'validation/fields/FIELDS_CHANGED' as const;
+interface FieldsChangedAction {
+  type: typeof FIELDS_CHANGED;
+  fields: Record<string, unknown>;
+}
+
+export type FieldsAction = FieldsChangedAction;
+
+export type FieldsState = {
+  name: string;
+  value: string;
+  score: number;
+  meta: string;
+  version: string;
+}[];
 
 /**
  * The initial state.
  */
-export const INITIAL_STATE = [];
+export const INITIAL_STATE: FieldsState = [];
 
 /**
  * Process the fields into an autocomplete friendly format.
- *
- * @param {Object} fields - The fields.
- *
- * @returns {Array} The processed fields.
  */
-const process = (fields) =>
+const process = (fields: Record<string, unknown>) =>
   Object.keys(fields).map((key) => {
     const field =
       key.indexOf('.') > -1 || key.indexOf(' ') > -1 ? `"${key}"` : key;
@@ -31,13 +43,11 @@ const process = (fields) =>
 
 /**
  * Reducer function for handle state changes to fields.
- *
- * @param {Array} state - The fields state.
- * @param {Object} action - The action.
- *
- * @returns {Array} The new state.
  */
-export default function reducer(state = INITIAL_STATE, action) {
+export default function reducer(
+  state: FieldsState = INITIAL_STATE,
+  action: RootAction
+) {
   if (action.type === FIELDS_CHANGED) {
     return process(action.fields);
   }
@@ -47,12 +57,10 @@ export default function reducer(state = INITIAL_STATE, action) {
 
 /**
  * Action creator for fields changed events.
- *
- * @param {Object} fields - The fields value.
- *
- * @returns {Object} The fields changed action.
  */
-export const fieldsChanged = (fields) => ({
+export const fieldsChanged = (
+  fields: Record<string, unknown>
+): FieldsChangedAction => ({
   type: FIELDS_CHANGED,
   fields,
 });
diff --git a/packages/compass-schema-validation/src/modules/index.js b/packages/compass-schema-validation/src/modules/index.js
deleted file mode 100644
index ad93122973a..00000000000
--- a/packages/compass-schema-validation/src/modules/index.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import { combineReducers } from 'redux';
-
-import appRegistry, {
-  INITIAL_STATE as APP_REGISTRY_STATE,
-} from '@mongodb-js/mongodb-redux-common/app-registry';
-import dataService, { INITIAL_STATE as DS_INITIAL_STATE } from './data-service';
-import fields, { INITIAL_STATE as FIELDS_INITIAL_STATE } from './fields';
-import namespace, { INITIAL_STATE as NS_INITIAL_STATE } from './namespace';
-import serverVersion, {
-  INITIAL_STATE as SV_INITIAL_STATE,
-} from './server-version';
-import validation, { INITIAL_STATE as VALIDATION_STATE } from './validation';
-import sampleDocuments, {
-  INITIAL_STATE as SAMPLE_DOCUMENTS_STATE,
-} from './sample-documents';
-import isZeroState, { INITIAL_STATE as IS_ZERO_STATE } from './zero-state';
-import isLoaded, { INITIAL_STATE as IS_LOADED_STATE } from './is-loaded';
-import editMode, { INITIAL_STATE as EDIT_MODE_STATE } from './edit-mode';
-
-/**
- * Reset action constant.
- */
-export const RESET = 'validation/reset';
-
-/**
- * The intial state of the root reducer.
- */
-export const INITIAL_STATE = {
-  appRegistry: APP_REGISTRY_STATE,
-  dataService: DS_INITIAL_STATE,
-  fields: FIELDS_INITIAL_STATE,
-  namespace: NS_INITIAL_STATE,
-  serverVersion: SV_INITIAL_STATE,
-  validation: VALIDATION_STATE,
-  sampleDocuments: SAMPLE_DOCUMENTS_STATE,
-  isZeroState: IS_ZERO_STATE,
-  isLoaded: IS_LOADED_STATE,
-  editMode: EDIT_MODE_STATE,
-};
-
-/**
- * The reducer.
- */
-const appReducer = combineReducers({
-  appRegistry,
-  dataService,
-  fields,
-  namespace,
-  serverVersion,
-  validation,
-  sampleDocuments,
-  isZeroState,
-  isLoaded,
-  editMode,
-});
-
-/**
- * Handle the reset.
- *
- * @returns {Object} The new state.
- */
-const doReset = () => ({ ...INITIAL_STATE });
-
-/**
- * The action to state modifier mappings.
- */
-const MAPPINGS = {
-  [RESET]: doReset,
-};
-
-/**
- * Reset the entire state.
- *
- * @returns {Object} The action.
- */
-export const reset = () => ({ type: RESET });
-
-/**
- * The root reducer.
- *
- * @param {Object} state - The state.
- * @param {Object} action - The action.
- *
- * @returns {Object} The new state.
- */
-const rootReducer = (state, action) => {
-  const fn = MAPPINGS[action.type];
-
-  return fn ? fn(state, action) : appReducer(state, action);
-};
-
-export default rootReducer;
diff --git a/packages/compass-schema-validation/src/modules/index.ts b/packages/compass-schema-validation/src/modules/index.ts
new file mode 100644
index 00000000000..c7cdef9bbb5
--- /dev/null
+++ b/packages/compass-schema-validation/src/modules/index.ts
@@ -0,0 +1,124 @@
+import { combineReducers } from 'redux';
+
+import appRegistry, {
+  INITIAL_STATE as APP_REGISTRY_STATE,
+} from '@mongodb-js/mongodb-redux-common/app-registry';
+import type { DataServiceAction, DataServiceState } from './data-service';
+import dataService, { INITIAL_STATE as DS_INITIAL_STATE } from './data-service';
+import type { FieldsAction, FieldsState } from './fields';
+import fields, { INITIAL_STATE as FIELDS_INITIAL_STATE } from './fields';
+import type { NamespaceAction, NamespaceState } from './namespace';
+import namespace, { INITIAL_STATE as NS_INITIAL_STATE } from './namespace';
+import type { ServerVersionAction, ServerVersionState } from './server-version';
+import serverVersion, {
+  INITIAL_STATE as SV_INITIAL_STATE,
+} from './server-version';
+import type { ValidationAction, ValidationState } from './validation';
+import validation, { INITIAL_STATE as VALIDATION_STATE } from './validation';
+import type {
+  SampleDocumentAction,
+  SampleDocumentState,
+} from './sample-documents';
+import sampleDocuments, {
+  INITIAL_STATE as SAMPLE_DOCUMENTS_STATE,
+} from './sample-documents';
+import type { IsZeroStateAction, IsZeroStateState } from './zero-state';
+import isZeroState, { INITIAL_STATE as IS_ZERO_STATE } from './zero-state';
+import type { IsLoadedAction, IsLoadedState } from './is-loaded';
+import isLoaded, { INITIAL_STATE as IS_LOADED_STATE } from './is-loaded';
+import type { EditModeAction, EditModeState } from './edit-mode';
+import editMode, { INITIAL_STATE as EDIT_MODE_STATE } from './edit-mode';
+import type AppRegistry from 'hadron-app-registry';
+
+/**
+ * Reset action constant.
+ */
+export const RESET = 'validation/reset' as const;
+interface ResetAction {
+  type: typeof RESET;
+}
+
+export interface RootState {
+  appRegistry: {
+    localAppRegistry: AppRegistry;
+    globalAppRegistry: AppRegistry;
+  };
+  dataService: DataServiceState;
+  fields: FieldsState;
+  namespace: NamespaceState;
+  serverVersion: ServerVersionState;
+  validation: ValidationState;
+  sampleDocuments: SampleDocumentState;
+  isZeroState: IsZeroStateState;
+  isLoaded: IsLoadedState;
+  editMode: EditModeState;
+}
+
+export type RootAction =
+  | DataServiceAction
+  | FieldsAction
+  | NamespaceAction
+  | ServerVersionAction
+  | ValidationAction
+  | SampleDocumentAction
+  | IsZeroStateAction
+  | IsLoadedAction
+  | EditModeAction
+  | ResetAction;
+
+/**
+ * The intial state of the root reducer.
+ */
+export const INITIAL_STATE: RootState = {
+  appRegistry: APP_REGISTRY_STATE,
+  dataService: DS_INITIAL_STATE,
+  fields: FIELDS_INITIAL_STATE,
+  namespace: NS_INITIAL_STATE,
+  serverVersion: SV_INITIAL_STATE,
+  validation: VALIDATION_STATE,
+  sampleDocuments: SAMPLE_DOCUMENTS_STATE,
+  isZeroState: IS_ZERO_STATE,
+  isLoaded: IS_LOADED_STATE,
+  editMode: EDIT_MODE_STATE,
+};
+
+/**
+ * The reducer.
+ */
+const appReducer = combineReducers<RootState, RootAction>({
+  appRegistry,
+  dataService,
+  fields,
+  namespace,
+  serverVersion,
+  validation,
+  sampleDocuments,
+  isZeroState,
+  isLoaded,
+  editMode,
+});
+
+/**
+ * Handle the reset.
+ */
+const doReset = (): RootState => ({ ...INITIAL_STATE });
+
+/**
+ * Reset the entire state.
+ */
+export const reset = (): ResetAction => ({ type: RESET });
+
+/**
+ * The root reducer.
+ */
+const rootReducer = (
+  state: RootState | undefined,
+  action: RootAction
+): RootState => {
+  if (action.type === RESET) {
+    return doReset();
+  }
+  return appReducer(state, action);
+};
+
+export default rootReducer;
diff --git a/packages/compass-schema-validation/src/modules/is-loaded.js b/packages/compass-schema-validation/src/modules/is-loaded.js
deleted file mode 100644
index 0932821fe30..00000000000
--- a/packages/compass-schema-validation/src/modules/is-loaded.js
+++ /dev/null
@@ -1,16 +0,0 @@
-export const IS_LOADED_CHANGED = 'validation/namespace/IS_LOADED_CHANGED';
-
-export const INITIAL_STATE = false;
-
-export default function reducer(state = INITIAL_STATE, action) {
-  if (action.type === IS_LOADED_CHANGED) {
-    return action.isLoaded;
-  }
-
-  return state;
-}
-
-export const isLoadedChanged = (isLoaded) => ({
-  type: IS_LOADED_CHANGED,
-  isLoaded,
-});
diff --git a/packages/compass-schema-validation/src/modules/is-loaded.spec.js b/packages/compass-schema-validation/src/modules/is-loaded.spec.ts
similarity index 91%
rename from packages/compass-schema-validation/src/modules/is-loaded.spec.js
rename to packages/compass-schema-validation/src/modules/is-loaded.spec.ts
index 88b50d5566c..0b457f8e4e3 100644
--- a/packages/compass-schema-validation/src/modules/is-loaded.spec.js
+++ b/packages/compass-schema-validation/src/modules/is-loaded.spec.ts
@@ -17,7 +17,7 @@ describe('is-loaded module', function () {
       'when the action is not presented in is-loaded module',
       function () {
         it('returns the default state', function () {
-          expect(reducer(undefined, { type: 'test' })).to.equal(false);
+          expect(reducer(undefined, { type: 'test' } as any)).to.equal(false);
         });
       }
     );
diff --git a/packages/compass-schema-validation/src/modules/is-loaded.ts b/packages/compass-schema-validation/src/modules/is-loaded.ts
new file mode 100644
index 00000000000..a05e1f5025d
--- /dev/null
+++ b/packages/compass-schema-validation/src/modules/is-loaded.ts
@@ -0,0 +1,29 @@
+import type { RootAction } from '.';
+
+export const IS_LOADED_CHANGED =
+  'validation/namespace/IS_LOADED_CHANGED' as const;
+interface IsLoadedChangedAction {
+  type: typeof IS_LOADED_CHANGED;
+  isLoaded: boolean;
+}
+
+export type IsLoadedAction = IsLoadedChangedAction;
+export type IsLoadedState = boolean;
+
+export const INITIAL_STATE: IsLoadedState = false;
+
+export default function reducer(
+  state: IsLoadedState = INITIAL_STATE,
+  action: RootAction
+): IsLoadedState {
+  if (action.type === IS_LOADED_CHANGED) {
+    return action.isLoaded;
+  }
+
+  return state;
+}
+
+export const isLoadedChanged = (isLoaded: boolean): IsLoadedChangedAction => ({
+  type: IS_LOADED_CHANGED,
+  isLoaded,
+});
diff --git a/packages/compass-schema-validation/src/modules/namespace.js b/packages/compass-schema-validation/src/modules/namespace.js
deleted file mode 100644
index 2690ae85021..00000000000
--- a/packages/compass-schema-validation/src/modules/namespace.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * Namespace changed action.
- */
-export const NAMESPACE_CHANGED = 'validation/namespace/NAMESPACE_CHANGED';
-
-/**
- * The initial state.
- */
-export const INITIAL_STATE = '';
-
-/**
- * Reducer function for handle state changes to namespace.
- *
- * @param {String} state - The namespace state.
- * @param {Object} action - The action.
- *
- * @returns {String} The new state.
- */
-export default function reducer(state = INITIAL_STATE, action) {
-  if (action.type === NAMESPACE_CHANGED) {
-    return action.namespace;
-  }
-
-  return state;
-}
-
-/**
- * Action creator for namespace changed events.
- *
- * @param {String} namespace - The namespace value.
- *
- * @returns {Object} The namespace changed action.
- */
-export const namespaceChanged = (namespace) => ({
-  type: NAMESPACE_CHANGED,
-  namespace,
-});
diff --git a/packages/compass-schema-validation/src/modules/namespace.spec.js b/packages/compass-schema-validation/src/modules/namespace.spec.ts
similarity index 71%
rename from packages/compass-schema-validation/src/modules/namespace.spec.js
rename to packages/compass-schema-validation/src/modules/namespace.spec.ts
index d0ad23a6bc7..081208b643c 100644
--- a/packages/compass-schema-validation/src/modules/namespace.spec.js
+++ b/packages/compass-schema-validation/src/modules/namespace.spec.ts
@@ -1,11 +1,12 @@
 import { expect } from 'chai';
 
 import reducer, { namespaceChanged, NAMESPACE_CHANGED } from './namespace';
+import toNS from 'mongodb-ns';
 
 describe('namespace module', function () {
   describe('#namespaceChanged', function () {
     it('returns the NAMESPACE_CHANGED action', function () {
-      expect(namespaceChanged('db.coll')).to.deep.equal({
+      expect(namespaceChanged('db.coll' as any)).to.deep.equal({
         type: NAMESPACE_CHANGED,
         namespace: 'db.coll',
       });
@@ -15,13 +16,15 @@ describe('namespace module', function () {
   describe('#reducer', function () {
     context('when the action is not namespace changed', function () {
       it('returns the default state', function () {
-        expect(reducer(undefined, { type: 'test' })).to.equal('');
+        expect(reducer(undefined, { type: 'test' } as any)).to.deep.equal(
+          toNS('')
+        );
       });
     });
 
     context('when the action is namespace changed', function () {
       it('returns the new state', function () {
-        expect(reducer(undefined, namespaceChanged('db.coll'))).to.equal(
+        expect(reducer(undefined, namespaceChanged('db.coll' as any))).to.equal(
           'db.coll'
         );
       });
diff --git a/packages/compass-schema-validation/src/modules/namespace.ts b/packages/compass-schema-validation/src/modules/namespace.ts
new file mode 100644
index 00000000000..5a11e940a62
--- /dev/null
+++ b/packages/compass-schema-validation/src/modules/namespace.ts
@@ -0,0 +1,53 @@
+import toNS from 'mongodb-ns';
+import type { RootAction } from '.';
+
+type NS = ReturnType<typeof toNS>;
+
+/**
+ * Namespace changed action.
+ */
+export const NAMESPACE_CHANGED =
+  'validation/namespace/NAMESPACE_CHANGED' as const;
+interface NamespaceChangedAction {
+  type: typeof NAMESPACE_CHANGED;
+  namespace: NS;
+}
+
+export type NamespaceAction = NamespaceChangedAction;
+export type NamespaceState = NS;
+
+/**
+ * The initial state.
+ */
+export const INITIAL_STATE: NS = toNS('');
+
+/**
+ * Reducer function for handle state changes to namespace.
+ *
+ * @param {String} state - The namespace state.
+ * @param {Object} action - The action.
+ *
+ * @returns {String} The new state.
+ */
+export default function reducer(
+  state: NamespaceState = INITIAL_STATE,
+  action: RootAction
+): NamespaceState {
+  if (action.type === NAMESPACE_CHANGED) {
+    return action.namespace;
+  }
+
+  return state;
+}
+
+/**
+ * Action creator for namespace changed events.
+ *
+ * @param {String} namespace - The namespace value.
+ *
+ * @returns {Object} The namespace changed action.
+ */
+export const namespaceChanged = (namespace: NS): NamespaceChangedAction => ({
+  type: NAMESPACE_CHANGED,
+  namespace,
+});
diff --git a/packages/compass-schema-validation/src/modules/sample-documents.js b/packages/compass-schema-validation/src/modules/sample-documents.js
deleted file mode 100644
index 7d074c6636a..00000000000
--- a/packages/compass-schema-validation/src/modules/sample-documents.js
+++ /dev/null
@@ -1,217 +0,0 @@
-import preferences from 'compass-preferences-model';
-import { checkValidator } from './validation';
-
-export const SAMPLE_SIZE = 10000;
-
-/**
- * Initial state
- */
-
-export const DOCUMENT_LOADING_STATES = {
-  INITIAL: 'initial',
-  LOADING: 'loading',
-  SUCCESS: 'success',
-  ERROR: 'error',
-};
-
-export const INITIAL_STATE = {
-  validDocumentState: DOCUMENT_LOADING_STATES.INITIAL,
-  validDocument: undefined,
-
-  invalidDocumentState: DOCUMENT_LOADING_STATES.INITIAL,
-  invalidDocument: undefined,
-};
-
-/**
- * Action names
- */
-
-export const CLEAR_SAMPLE_DOCUMENTS =
-  'validation/namespace/CLEAR_SAMPLE_DOCUMENTS';
-
-export const FETCHING_VALID_DOCUMENT =
-  'validation/namespace/FETCHING_VALID_DOCUMENT';
-
-export const FETCHED_VALID_DOCUMENT =
-  'validation/namespace/FETCHED_VALID_DOCUMENT';
-
-export const FETCHING_VALID_DOCUMENT_FAILED =
-  'validation/namespace/FETCHING_VALID_DOCUMENT_FAILED';
-
-export const FETCHING_INVALID_DOCUMENT =
-  'validation/namespace/FETCHING_INVALID_DOCUMENT';
-
-export const FETCHED_INVALID_DOCUMENT =
-  'validation/namespace/FETCHED_INVALID_DOCUMENT';
-
-export const FETCHING_INVALID_DOCUMENT_FAILED =
-  'validation/namespace/FETCHING_INVALID_DOCUMENT_FAILED';
-
-/**
- * Action creators
- */
-
-export const clearSampleDocuments = () => ({
-  type: CLEAR_SAMPLE_DOCUMENTS,
-});
-
-export const fetchingValidDocument = () => ({
-  type: FETCHING_VALID_DOCUMENT,
-});
-
-export const fetchingInvalidDocument = () => ({
-  type: FETCHING_INVALID_DOCUMENT,
-});
-
-export const fetchedValidDocument = (document) => ({
-  type: FETCHED_VALID_DOCUMENT,
-  document,
-});
-
-export const fetchedInvalidDocument = (document) => ({
-  type: FETCHED_INVALID_DOCUMENT,
-  document,
-});
-
-export const fetchingValidDocumentFailed = () => ({
-  type: FETCHING_VALID_DOCUMENT_FAILED,
-});
-
-export const fetchingInvalidDocumentFailed = () => ({
-  type: FETCHING_INVALID_DOCUMENT_FAILED,
-});
-
-/**
- * State reducers
- */
-
-export const clearingSampleDocuments = () => INITIAL_STATE;
-
-export const startFetchingValidDocument = (state) => ({
-  ...state,
-  validDocumentState: DOCUMENT_LOADING_STATES.LOADING,
-});
-
-export const startFetchingInvalidDocument = (state) => ({
-  ...state,
-  invalidDocumentState: DOCUMENT_LOADING_STATES.LOADING,
-});
-
-export const updateStateWithFetchedValidDocument = (state, action) => ({
-  ...state,
-  validDocumentState: DOCUMENT_LOADING_STATES.SUCCESS,
-  validDocument: action.document,
-});
-
-export const updateStateWithFetchedInvalidDocument = (state, action) => ({
-  ...state,
-  invalidDocumentState: DOCUMENT_LOADING_STATES.SUCCESS,
-  invalidDocument: action.document,
-});
-
-export const validDocumentFetchErrored = (state) => ({
-  ...state,
-  validDocumentState: DOCUMENT_LOADING_STATES.ERROR,
-  validDocument: undefined,
-});
-
-export const invalidDocumentFetchErrored = (state) => ({
-  ...state,
-  invalidDocumentState: DOCUMENT_LOADING_STATES.ERROR,
-  invalidDocument: undefined,
-});
-
-const ACTION_TO_REDUCER_MAPPINGS = {
-  [CLEAR_SAMPLE_DOCUMENTS]: clearingSampleDocuments,
-  [FETCHING_VALID_DOCUMENT]: startFetchingValidDocument,
-  [FETCHED_VALID_DOCUMENT]: updateStateWithFetchedValidDocument,
-  [FETCHING_VALID_DOCUMENT_FAILED]: validDocumentFetchErrored,
-  [FETCHING_INVALID_DOCUMENT]: startFetchingInvalidDocument,
-  [FETCHED_INVALID_DOCUMENT]: updateStateWithFetchedInvalidDocument,
-  [FETCHING_INVALID_DOCUMENT_FAILED]: invalidDocumentFetchErrored,
-};
-
-export default function (state = INITIAL_STATE, action) {
-  const fn = ACTION_TO_REDUCER_MAPPINGS[action.type];
-
-  return fn ? fn(state, action) : state;
-}
-
-/**
- * Side effects
- */
-
-const getSampleDocuments = async (docsOptions) => {
-  const aggOptions = {
-    allowDiskUse: true,
-    maxTimeMS: preferences.getPreferences().maxTimeMS,
-  };
-  const { pipeline, namespace, dataService } = docsOptions;
-  pipeline.unshift({ $sample: { size: SAMPLE_SIZE } });
-
-  return await dataService.aggregate(namespace, pipeline, aggOptions);
-};
-
-export const fetchValidDocument = () => {
-  return async (dispatch, getState) => {
-    dispatch(fetchingValidDocument());
-
-    const state = getState();
-    const dataService = state.dataService.dataService;
-    const namespace = state.namespace.ns;
-    const validator = state.validation.validator;
-
-    const checkedValidator = checkValidator(validator);
-    const query = checkValidator(checkedValidator.validator).validator;
-
-    if (!dataService) {
-      return;
-    }
-
-    try {
-      const valid = (
-        await getSampleDocuments({
-          namespace,
-          dataService,
-          pipeline: [{ $match: query }, { $limit: 1 }],
-        })
-      )[0];
-
-      dispatch(fetchedValidDocument(valid));
-    } catch (e) {
-      dispatch(fetchingValidDocumentFailed());
-    }
-  };
-};
-
-export const fetchInvalidDocument = () => {
-  return async (dispatch, getState) => {
-    dispatch(fetchingInvalidDocument());
-
-    const state = getState();
-    const dataService = state.dataService.dataService;
-    const namespace = state.namespace.ns;
-    const validator = state.validation.validator;
-
-    const checkedValidator = checkValidator(validator);
-    const query = checkValidator(checkedValidator.validator).validator;
-
-    if (!dataService) {
-      return;
-    }
-
-    try {
-      const invalid = (
-        await getSampleDocuments({
-          namespace,
-          dataService,
-          pipeline: [{ $match: { $nor: [query] } }, { $limit: 1 }],
-        })
-      )[0];
-
-      dispatch(fetchedInvalidDocument(invalid));
-    } catch (e) {
-      dispatch(fetchingInvalidDocumentFailed());
-    }
-  };
-};
diff --git a/packages/compass-schema-validation/src/modules/sample-documents.spec.js b/packages/compass-schema-validation/src/modules/sample-documents.spec.ts
similarity index 81%
rename from packages/compass-schema-validation/src/modules/sample-documents.spec.js
rename to packages/compass-schema-validation/src/modules/sample-documents.spec.ts
index 299d6d1447d..ddfdd1e2d29 100644
--- a/packages/compass-schema-validation/src/modules/sample-documents.spec.js
+++ b/packages/compass-schema-validation/src/modules/sample-documents.spec.ts
@@ -16,7 +16,6 @@ import reducer, {
   FETCHING_INVALID_DOCUMENT_FAILED,
   fetchingInvalidDocumentFailed,
   FETCHING_VALID_DOCUMENT_FAILED,
-  DOCUMENT_LOADING_STATES,
 } from './sample-documents';
 
 const SAMPLE_DOCUMENT = {
@@ -44,21 +43,21 @@ describe('sample-documents module', function () {
     });
 
     it('returns the FETCHED_VALID_DOCUMENT action', function () {
-      [undefined, SAMPLE_DOCUMENT].forEach((document) => {
+      for (const document of [undefined, SAMPLE_DOCUMENT] as any[]) {
         expect(fetchedValidDocument(document)).to.deep.equal({
           type: FETCHED_VALID_DOCUMENT,
           document,
         });
-      });
+      }
     });
 
     it('returns the FETCHED_INVALID_DOCUMENT action', function () {
-      [undefined, SAMPLE_DOCUMENT].forEach((document) => {
+      for (const document of [undefined, SAMPLE_DOCUMENT] as any[]) {
         expect(fetchedInvalidDocument(document)).to.deep.equal({
           type: FETCHED_INVALID_DOCUMENT,
           document,
         });
-      });
+      }
     });
 
     it('returns the FETCHING_VALID_DOCUMENT_FAILED action', function () {
@@ -79,7 +78,7 @@ describe('sample-documents module', function () {
       'when the action is not presented in sample-documents module',
       function () {
         it('returns the default state', function () {
-          expect(reducer(undefined, { type: 'test' })).to.deep.equal(
+          expect(reducer(undefined, { type: 'test' } as any)).to.deep.equal(
             INITIAL_STATE
           );
         });
@@ -97,48 +96,40 @@ describe('sample-documents module', function () {
     context('when the action is FETCHING_VALID_DOCUMENT', function () {
       it('returns a loading state', function () {
         const sampleDocuments = reducer(undefined, fetchingValidDocument());
-        expect(sampleDocuments.validDocumentState).to.equal(
-          DOCUMENT_LOADING_STATES.LOADING
-        );
+        expect(sampleDocuments.validDocumentState).to.equal('loading');
       });
     });
 
     context('when the action is FETCHING_INVALID_DOCUMENT', function () {
       it('returns a loading state', function () {
         const sampleDocuments = reducer(undefined, fetchingInvalidDocument());
-        expect(sampleDocuments.invalidDocumentState).to.equal(
-          DOCUMENT_LOADING_STATES.LOADING
-        );
+        expect(sampleDocuments.invalidDocumentState).to.equal('loading');
       });
     });
 
     context('when the action is FETCHED_VALID_DOCUMENT', function () {
       it('updates the state with the document', function () {
-        [null, undefined, SAMPLE_DOCUMENT].forEach((document) => {
+        for (const document of [null, undefined, SAMPLE_DOCUMENT] as any[]) {
           const sampleDocuments = reducer(
             undefined,
             fetchedValidDocument(document)
           );
-          expect(sampleDocuments.validDocumentState).to.equal(
-            DOCUMENT_LOADING_STATES.SUCCESS
-          );
+          expect(sampleDocuments.validDocumentState).to.equal('success');
           expect(sampleDocuments.validDocument).to.deep.equal(document);
-        });
+        }
       });
     });
 
     context('when the action is FETCHED_INVALID_DOCUMENT', function () {
       it('updates the state with the document', function () {
-        [null, undefined, SAMPLE_DOCUMENT].forEach((document) => {
+        for (const document of [null, undefined, SAMPLE_DOCUMENT] as any[]) {
           const sampleDocuments = reducer(
             undefined,
             fetchedInvalidDocument(document)
           );
-          expect(sampleDocuments.invalidDocumentState).to.equal(
-            DOCUMENT_LOADING_STATES.SUCCESS
-          );
+          expect(sampleDocuments.invalidDocumentState).to.equal('success');
           expect(sampleDocuments.invalidDocument).to.deep.equal(document);
-        });
+        }
       });
     });
 
@@ -148,9 +139,7 @@ describe('sample-documents module', function () {
           undefined,
           fetchingValidDocumentFailed()
         );
-        expect(sampleDocuments.validDocumentState).to.equal(
-          DOCUMENT_LOADING_STATES.ERROR
-        );
+        expect(sampleDocuments.validDocumentState).to.equal('error');
         expect(sampleDocuments.validDocument).to.equal(undefined);
       });
     });
@@ -161,9 +150,7 @@ describe('sample-documents module', function () {
           undefined,
           fetchingInvalidDocumentFailed()
         );
-        expect(sampleDocuments.invalidDocumentState).to.equal(
-          DOCUMENT_LOADING_STATES.ERROR
-        );
+        expect(sampleDocuments.invalidDocumentState).to.equal('error');
         expect(sampleDocuments.invalidDocument).to.deep.equal(undefined);
       });
     });
diff --git a/packages/compass-schema-validation/src/modules/sample-documents.ts b/packages/compass-schema-validation/src/modules/sample-documents.ts
new file mode 100644
index 00000000000..c586091da61
--- /dev/null
+++ b/packages/compass-schema-validation/src/modules/sample-documents.ts
@@ -0,0 +1,307 @@
+import preferences from 'compass-preferences-model';
+import { checkValidator } from './validation';
+import type { DataService } from 'mongodb-data-service';
+import type { RootAction, RootState } from '.';
+
+export const SAMPLE_SIZE = 10000;
+
+/**
+ * Initial state
+ */
+export type DOCUMENT_LOADING_STATES =
+  | 'initial'
+  | 'loading'
+  | 'success'
+  | 'error';
+
+export interface SampleDocumentState {
+  validDocumentState: DOCUMENT_LOADING_STATES;
+  validDocument: undefined | Record<string, unknown>;
+
+  invalidDocumentState: DOCUMENT_LOADING_STATES;
+  invalidDocument: undefined | Record<string, unknown>;
+}
+
+export const INITIAL_STATE: SampleDocumentState = {
+  validDocumentState: 'initial',
+  validDocument: undefined,
+
+  invalidDocumentState: 'initial',
+  invalidDocument: undefined,
+};
+
+/**
+ * Action names
+ */
+
+export const CLEAR_SAMPLE_DOCUMENTS =
+  'validation/namespace/CLEAR_SAMPLE_DOCUMENTS' as const;
+interface ClearSampleDocumentsAction {
+  type: typeof CLEAR_SAMPLE_DOCUMENTS;
+}
+
+export const FETCHING_VALID_DOCUMENT =
+  'validation/namespace/FETCHING_VALID_DOCUMENT' as const;
+interface FetchingValidDocumentAction {
+  type: typeof FETCHING_VALID_DOCUMENT;
+}
+
+export const FETCHED_VALID_DOCUMENT =
+  'validation/namespace/FETCHED_VALID_DOCUMENT' as const;
+interface FetchedValidDocumentAction {
+  type: typeof FETCHED_VALID_DOCUMENT;
+  document: Record<string, unknown>;
+}
+
+export const FETCHING_VALID_DOCUMENT_FAILED =
+  'validation/namespace/FETCHING_VALID_DOCUMENT_FAILED' as const;
+interface FetchingValidDocumentFailedAction {
+  type: typeof FETCHING_VALID_DOCUMENT_FAILED;
+}
+
+export const FETCHING_INVALID_DOCUMENT =
+  'validation/namespace/FETCHING_INVALID_DOCUMENT' as const;
+interface FetchingInvalidDocumentAction {
+  type: typeof FETCHING_INVALID_DOCUMENT;
+}
+
+export const FETCHED_INVALID_DOCUMENT =
+  'validation/namespace/FETCHED_INVALID_DOCUMENT' as const;
+interface FetchedInvalidDocumentAction {
+  type: typeof FETCHED_INVALID_DOCUMENT;
+  document: Record<string, unknown>;
+}
+
+export const FETCHING_INVALID_DOCUMENT_FAILED =
+  'validation/namespace/FETCHING_INVALID_DOCUMENT_FAILED' as const;
+interface FetchingInvalidDocumentFailedAction {
+  type: typeof FETCHING_INVALID_DOCUMENT_FAILED;
+}
+
+export type SampleDocumentAction =
+  | ClearSampleDocumentsAction
+  | FetchingValidDocumentAction
+  | FetchedValidDocumentAction
+  | FetchingValidDocumentAction
+  | FetchingInvalidDocumentAction
+  | FetchedInvalidDocumentAction
+  | FetchingInvalidDocumentFailedAction
+  | FetchingValidDocumentFailedAction;
+
+/**
+ * Action creators
+ */
+
+export const clearSampleDocuments = (): ClearSampleDocumentsAction => ({
+  type: CLEAR_SAMPLE_DOCUMENTS,
+});
+
+export const fetchingValidDocument = (): FetchingValidDocumentAction => ({
+  type: FETCHING_VALID_DOCUMENT,
+});
+
+export const fetchingInvalidDocument = (): FetchingInvalidDocumentAction => ({
+  type: FETCHING_INVALID_DOCUMENT,
+});
+
+export const fetchedValidDocument = (
+  document: Record<string, unknown>
+): FetchedValidDocumentAction => ({
+  type: FETCHED_VALID_DOCUMENT,
+  document,
+});
+
+export const fetchedInvalidDocument = (
+  document: Record<string, unknown>
+): FetchedInvalidDocumentAction => ({
+  type: FETCHED_INVALID_DOCUMENT,
+  document,
+});
+
+export const fetchingValidDocumentFailed =
+  (): FetchingValidDocumentFailedAction => ({
+    type: FETCHING_VALID_DOCUMENT_FAILED,
+  });
+
+export const fetchingInvalidDocumentFailed =
+  (): FetchingInvalidDocumentFailedAction => ({
+    type: FETCHING_INVALID_DOCUMENT_FAILED,
+  });
+
+/**
+ * State reducers
+ */
+
+export const clearingSampleDocuments = (): SampleDocumentState => INITIAL_STATE;
+
+export const startFetchingValidDocument = (
+  state: SampleDocumentState
+): SampleDocumentState => ({
+  ...state,
+  validDocumentState: 'loading',
+});
+
+export const startFetchingInvalidDocument = (
+  state: SampleDocumentState
+): SampleDocumentState => ({
+  ...state,
+  invalidDocumentState: 'loading',
+});
+
+export const updateStateWithFetchedValidDocument = (
+  state: SampleDocumentState,
+  action: FetchedValidDocumentAction
+): SampleDocumentState => ({
+  ...state,
+  validDocumentState: 'success',
+  validDocument: action.document,
+});
+
+export const updateStateWithFetchedInvalidDocument = (
+  state: SampleDocumentState,
+  action: FetchedInvalidDocumentAction
+): SampleDocumentState => ({
+  ...state,
+  invalidDocumentState: 'success',
+  invalidDocument: action.document,
+});
+
+export const validDocumentFetchErrored = (
+  state: SampleDocumentState
+): SampleDocumentState => ({
+  ...state,
+  validDocumentState: 'error',
+  validDocument: undefined,
+});
+
+export const invalidDocumentFetchErrored = (
+  state: SampleDocumentState
+): SampleDocumentState => ({
+  ...state,
+  invalidDocumentState: 'error',
+  invalidDocument: undefined,
+});
+
+const ACTION_TO_REDUCER_MAPPINGS: {
+  [Type in SampleDocumentAction['type']]: (
+    state: SampleDocumentState,
+    action: SampleDocumentAction & { type: Type }
+  ) => SampleDocumentState;
+} = {
+  [CLEAR_SAMPLE_DOCUMENTS]: clearingSampleDocuments,
+  [FETCHING_VALID_DOCUMENT]: startFetchingValidDocument,
+  [FETCHED_VALID_DOCUMENT]: updateStateWithFetchedValidDocument,
+  [FETCHING_VALID_DOCUMENT_FAILED]: validDocumentFetchErrored,
+  [FETCHING_INVALID_DOCUMENT]: startFetchingInvalidDocument,
+  [FETCHED_INVALID_DOCUMENT]: updateStateWithFetchedInvalidDocument,
+  [FETCHING_INVALID_DOCUMENT_FAILED]: invalidDocumentFetchErrored,
+};
+
+export default function (
+  state: SampleDocumentState = INITIAL_STATE,
+  action: RootAction
+): SampleDocumentState {
+  const fn =
+    ACTION_TO_REDUCER_MAPPINGS[action.type as SampleDocumentAction['type']];
+
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore-error TS does not understand that action can be passed to fn
+  return fn ? fn(state, action) : state;
+}
+
+/**
+ * Side effects
+ */
+
+const getSampleDocuments = async ({
+  pipeline,
+  namespace,
+  dataService,
+}: {
+  namespace: string;
+  dataService: DataService;
+  pipeline: Record<string, unknown>[];
+}) => {
+  const aggOptions = {
+    allowDiskUse: true,
+    maxTimeMS: preferences.getPreferences().maxTimeMS,
+  };
+  pipeline.unshift({ $sample: { size: SAMPLE_SIZE } });
+
+  return await dataService.aggregate(namespace, pipeline, aggOptions);
+};
+
+export const fetchValidDocument = () => {
+  return async (
+    dispatch: (action: RootAction) => void,
+    getState: () => RootState
+  ) => {
+    dispatch(fetchingValidDocument());
+
+    const state = getState();
+    const dataService = state.dataService;
+    const namespace = state.namespace.ns;
+    const validator = state.validation.validator;
+
+    const checkedValidator = checkValidator(validator);
+    const query = checkValidator(
+      checkedValidator.validator as string
+    ).validator;
+
+    if (!dataService) {
+      return;
+    }
+
+    try {
+      const valid = (
+        await getSampleDocuments({
+          namespace,
+          dataService,
+          pipeline: [{ $match: query }, { $limit: 1 }],
+        })
+      )[0];
+
+      dispatch(fetchedValidDocument(valid));
+    } catch (e) {
+      dispatch(fetchingValidDocumentFailed());
+    }
+  };
+};
+
+export const fetchInvalidDocument = () => {
+  return async (
+    dispatch: (action: RootAction) => void,
+    getState: () => RootState
+  ) => {
+    dispatch(fetchingInvalidDocument());
+
+    const state = getState();
+    const dataService = state.dataService;
+    const namespace = state.namespace.ns;
+    const validator = state.validation.validator;
+
+    // Calling checkValidator twice here seems wrong
+    const checkedValidator = checkValidator(validator);
+    const query = checkValidator(
+      checkedValidator.validator as string
+    ).validator;
+
+    if (!dataService) {
+      return;
+    }
+
+    try {
+      const invalid = (
+        await getSampleDocuments({
+          namespace,
+          dataService,
+          pipeline: [{ $match: { $nor: [query] } }, { $limit: 1 }],
+        })
+      )[0];
+
+      dispatch(fetchedInvalidDocument(invalid));
+    } catch (e) {
+      dispatch(fetchingInvalidDocumentFailed());
+    }
+  };
+};
diff --git a/packages/compass-schema-validation/src/modules/server-version.js b/packages/compass-schema-validation/src/modules/server-version.js
deleted file mode 100644
index 4f190c76464..00000000000
--- a/packages/compass-schema-validation/src/modules/server-version.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * Server version changed action.
- */
-export const SERVER_VERSION_CHANGED =
-  'validation/server-version/SERVER_VERSION_CHANGED';
-
-/**
- * The initial state.
- */
-export const INITIAL_STATE = '4.0.0';
-
-/**
- * Reducer function for handle state changes to server version.
- *
- * @param {String} state - The version state.
- * @param {Object} action - The action.
- *
- * @returns {String} The new state.
- */
-export default function reducer(state = INITIAL_STATE, action) {
-  if (action.type === SERVER_VERSION_CHANGED) {
-    return action.version || state;
-  }
-
-  return state;
-}
-
-/**
- * Action creator for server version changed events.
- *
- * @param {String} version - The version value.
- *
- * @returns {Object} The server version changed action.
- */
-export const serverVersionChanged = (version) => ({
-  type: SERVER_VERSION_CHANGED,
-  version,
-});
diff --git a/packages/compass-schema-validation/src/modules/server-version.spec.js b/packages/compass-schema-validation/src/modules/server-version.spec.ts
similarity index 91%
rename from packages/compass-schema-validation/src/modules/server-version.spec.js
rename to packages/compass-schema-validation/src/modules/server-version.spec.ts
index dbcc7e1e7ed..ca648dba7e0 100644
--- a/packages/compass-schema-validation/src/modules/server-version.spec.js
+++ b/packages/compass-schema-validation/src/modules/server-version.spec.ts
@@ -18,7 +18,7 @@ describe('server version module', function () {
   describe('#reducer', function () {
     context('when the action is not server version changed', function () {
       it('returns the default state', function () {
-        expect(reducer(undefined, { type: 'test' })).to.equal('4.0.0');
+        expect(reducer(undefined, { type: 'test' } as any)).to.equal('4.0.0');
       });
     });
 
diff --git a/packages/compass-schema-validation/src/modules/server-version.ts b/packages/compass-schema-validation/src/modules/server-version.ts
new file mode 100644
index 00000000000..bd62d32a795
--- /dev/null
+++ b/packages/compass-schema-validation/src/modules/server-version.ts
@@ -0,0 +1,43 @@
+import type { RootAction } from '.';
+
+/**
+ * Server version changed action.
+ */
+export const SERVER_VERSION_CHANGED =
+  'validation/server-version/SERVER_VERSION_CHANGED' as const;
+interface ServerVersionChangedAction {
+  type: typeof SERVER_VERSION_CHANGED;
+  version: string | null | undefined;
+}
+
+export type ServerVersionAction = ServerVersionChangedAction;
+export type ServerVersionState = string;
+
+/**
+ * The initial state.
+ */
+export const INITIAL_STATE: ServerVersionState = '4.0.0';
+
+/**
+ * Reducer function for handle state changes to server version.
+ */
+export default function reducer(
+  state: ServerVersionState = INITIAL_STATE,
+  action: RootAction
+): ServerVersionState {
+  if (action.type === SERVER_VERSION_CHANGED) {
+    return action.version || state;
+  }
+
+  return state;
+}
+
+/**
+ * Action creator for server version changed events.
+ */
+export const serverVersionChanged = (
+  version: string | null | undefined
+): ServerVersionChangedAction => ({
+  type: SERVER_VERSION_CHANGED,
+  version,
+});
diff --git a/packages/compass-schema-validation/src/modules/validation.spec.js b/packages/compass-schema-validation/src/modules/validation.spec.ts
similarity index 93%
rename from packages/compass-schema-validation/src/modules/validation.spec.js
rename to packages/compass-schema-validation/src/modules/validation.spec.ts
index 2f4dd0bc355..915f804c138 100644
--- a/packages/compass-schema-validation/src/modules/validation.spec.js
+++ b/packages/compass-schema-validation/src/modules/validation.spec.ts
@@ -68,15 +68,15 @@ describe('validation module', function () {
     it('returns the VALIDATION_FETCHED action', function () {
       expect(
         validationFetched({
-          validator: { name: { $exists: true } },
-          validationAction: 'warning',
+          validator: '{ name: { $exists: true } }',
+          validationAction: 'warn',
           validationLevel: 'off',
         })
       ).to.deep.equal({
         type: VALIDATION_FETCHED,
         validation: {
-          validator: { name: { $exists: true } },
-          validationAction: 'warning',
+          validator: '{ name: { $exists: true } }',
+          validationAction: 'warn',
           validationLevel: 'off',
         },
       });
@@ -88,20 +88,18 @@ describe('validation module', function () {
       expect(
         validationCanceled({
           isChanged: false,
-          validator: { name: { $exists: true } },
-          validationAction: 'warning',
+          validator: '{ name: { $exists: true } }',
+          validationAction: 'warn',
           validationLevel: 'off',
-          syntaxError: null,
           error: null,
         })
       ).to.deep.equal({
         type: VALIDATION_CANCELED,
         validation: {
           isChanged: false,
-          validator: { name: { $exists: true } },
-          validationAction: 'warning',
+          validator: '{ name: { $exists: true } }',
+          validationAction: 'warn',
           validationLevel: 'off',
-          syntaxError: null,
           error: null,
         },
       });
@@ -191,7 +189,7 @@ describe('validation module', function () {
       'when the action is not presented in validation module',
       function () {
         it('returns the default state', function () {
-          expect(reducer(undefined, { type: 'test' })).to.deep.equal({
+          expect(reducer(undefined, { type: 'test' } as any)).to.deep.equal({
             validator: '',
             validationAction: 'error',
             validationLevel: 'strict',
@@ -279,8 +277,8 @@ describe('validation module', function () {
         const validation = reducer(
           undefined,
           validationFetched({
-            validator: { name: { $exists: true } },
-            validationAction: 'warning',
+            validator: '{ name: { $exists: true } }',
+            validationAction: 'warn',
             validationLevel: 'off',
           })
         );
@@ -295,11 +293,11 @@ describe('validation module', function () {
           isChanged: false,
           prevValidation: {
             validator,
-            validationAction: 'warning',
+            validationAction: 'warn',
             validationLevel: 'off',
           },
           validator,
-          validationAction: 'warning',
+          validationAction: 'warn',
           validationLevel: 'off',
           syntaxError: null,
           error: null,
diff --git a/packages/compass-schema-validation/src/modules/validation.js b/packages/compass-schema-validation/src/modules/validation.ts
similarity index 51%
rename from packages/compass-schema-validation/src/modules/validation.js
rename to packages/compass-schema-validation/src/modules/validation.ts
index fa57c5e0f5e..fc8bb1e2aac 100644
--- a/packages/compass-schema-validation/src/modules/validation.js
+++ b/packages/compass-schema-validation/src/modules/validation.ts
@@ -1,3 +1,4 @@
+import type { RootAction, RootState } from '.';
 import { EJSON } from 'bson';
 import { parseFilter } from 'mongodb-query-parser';
 import { stringify as javascriptStringify } from 'javascript-stringify';
@@ -6,53 +7,117 @@ import { clearSampleDocuments } from './sample-documents';
 import { zeroStateChanged } from './zero-state';
 import { isLoadedChanged } from './is-loaded';
 import { isEqual, pick } from 'lodash';
+import type { ThunkDispatch } from 'redux-thunk';
 
 const { track } = createLoggerAndTelemetry('COMPASS-SCHEMA-VALIDATION-UI');
 
+export type ValidationServerAction = 'error' | 'warn';
+export type ValidationLevel = 'off' | 'moderate' | 'strict';
+
 /**
  * The module action prefix.
  */
-const PREFIX = 'validation';
+const PREFIX = 'validation' as const;
 
 /**
  * Validator changed action name.
  */
-export const VALIDATOR_CHANGED = `${PREFIX}/VALIDATOR_CHANGED`;
+export const VALIDATOR_CHANGED = `${PREFIX}/VALIDATOR_CHANGED` as const;
+interface ValidatorChangedAction {
+  type: typeof VALIDATOR_CHANGED;
+  validator: string;
+}
 
 /**
  * Validation canceled action name.
  */
-export const VALIDATION_CANCELED = `${PREFIX}/VALIDATION_CANCELED`;
+export const VALIDATION_CANCELED = `${PREFIX}/VALIDATION_CANCELED` as const;
+interface ValidationCanceledAction {
+  type: typeof VALIDATION_CANCELED;
+  validation: Validation;
+}
 
 /**
  * Validation save failed action name.
  */
-export const VALIDATION_SAVE_FAILED = `${PREFIX}/VALIDATION_SAVE_FAILED`;
+export const VALIDATION_SAVE_FAILED =
+  `${PREFIX}/VALIDATION_SAVE_FAILED` as const;
+interface ValidationSaveFailedAction {
+  type: typeof VALIDATION_SAVE_FAILED;
+  error: null | { message: string };
+}
 
 /**
  * Validation fetched action name.
  */
-export const VALIDATION_FETCHED = `${PREFIX}/VALIDATION_FETCHED`;
+export const VALIDATION_FETCHED = `${PREFIX}/VALIDATION_FETCHED` as const;
+interface ValidationFetchedAction {
+  type: typeof VALIDATION_FETCHED;
+  validation: PartialValidation;
+}
 
 /**
  * Validation action changed action name.
  */
-export const VALIDATION_ACTION_CHANGED = `${PREFIX}/VALIDATION_ACTION_CHANGED`;
+export const VALIDATION_ACTION_CHANGED =
+  `${PREFIX}/VALIDATION_ACTION_CHANGED` as const;
+interface ValidationActionChangedAction {
+  type: typeof VALIDATION_ACTION_CHANGED;
+  validationAction: ValidationServerAction;
+}
 
 /**
  * Validation level changed action name.
  */
-export const VALIDATION_LEVEL_CHANGED = `${PREFIX}/VALIDATION_LEVEL_CHANGED`;
+export const VALIDATION_LEVEL_CHANGED =
+  `${PREFIX}/VALIDATION_LEVEL_CHANGED` as const;
+interface ValidationLevelChangedAction {
+  type: typeof VALIDATION_LEVEL_CHANGED;
+  validationLevel: ValidationLevel;
+}
 
 /**
  * Syntax error occurred action name.
  */
-export const SYNTAX_ERROR_OCCURRED = `${PREFIX}/SYNTAX_ERROR_OCCURRED`;
+export const SYNTAX_ERROR_OCCURRED = `${PREFIX}/SYNTAX_ERROR_OCCURRED` as const;
+interface SyntaxErrorOccurredAction {
+  type: typeof SYNTAX_ERROR_OCCURRED;
+  syntaxError: null | { message: string };
+}
+
+export type ValidationAction =
+  | ValidatorChangedAction
+  | ValidationCanceledAction
+  | ValidationSaveFailedAction
+  | ValidationFetchedAction
+  | ValidationActionChangedAction
+  | ValidationLevelChangedAction
+  | SyntaxErrorOccurredAction;
+
+export interface Validation {
+  validator: string;
+  validationAction: ValidationServerAction;
+  validationLevel: ValidationLevel;
+  isChanged?: boolean;
+  error?: null | { message: string };
+}
+type PartialValidation = Pick<
+  Validation,
+  'validationAction' | 'validationLevel'
+> &
+  Partial<Validation>;
+
+export interface ValidationState extends Validation {
+  isChanged: boolean;
+  syntaxError: null | { message: string };
+  error: null | { message: string };
+  prevValidation?: Validation;
+}
 
 /**
  * The initial state.
  */
-export const INITIAL_STATE = {
+export const INITIAL_STATE: ValidationState = {
   validator: '',
   validationAction: 'error',
   validationLevel: 'strict',
@@ -63,16 +128,17 @@ export const INITIAL_STATE = {
 
 /**
  * Check validator as a simple query.
- * @typedef {Object} Validator
- * @property {string} syntaxError - The validation error
- * @property {Object} validator - Parsed validation object
- *
- * @param {String} validator - Validator.
- *
- * @returns {Validator}
  */
-export const checkValidator = (validator) => {
-  const validation = { syntaxError: null, validator };
+export const checkValidator = (
+  validator: string
+): {
+  syntaxError: null | { message: string };
+  validator: Record<string, unknown> | string;
+} => {
+  const validation: {
+    syntaxError: null | { message: string };
+    validator: Record<string, unknown> | string;
+  } = { syntaxError: null, validator };
 
   if (validator === '') {
     validation.syntaxError = {
@@ -82,7 +148,7 @@ export const checkValidator = (validator) => {
     try {
       validation.validator = parseFilter(validator);
     } catch (error) {
-      validation.syntaxError = error;
+      validation.syntaxError = error as Error;
     }
   }
 
@@ -91,13 +157,11 @@ export const checkValidator = (validator) => {
 
 /**
  * Change validator.
- *
- * @param {Object} state - The state.
- * @param {Object} action - The action.
- *
- * @returns {Object} The new state.
  */
-const changeValidator = (state, action) => {
+const changeValidator = (
+  state: ValidationState,
+  action: ValidatorChangedAction
+): ValidationState => {
   const checkedValidator = checkValidator(action.validator);
   const newState = {
     ...state,
@@ -117,13 +181,11 @@ const changeValidator = (state, action) => {
 
 /**
  * Sets syntax error.
- *
- * @param {Object} state - The state
- * @param {Object} action - The action.
- *
- * @returns {Object} The new state.
  */
-const setSyntaxError = (state, action) => ({
+const setSyntaxError = (
+  state: ValidationState,
+  action: SyntaxErrorOccurredAction
+): ValidationState => ({
   ...state,
   isChanged: true,
   syntaxError: action.syntaxError,
@@ -131,15 +193,18 @@ const setSyntaxError = (state, action) => ({
 
 /**
  * Set validation.
- *
- * @param {Object} state - The state
- * @param {Object} action - The action.
- *
- * @returns {Object} The new state.
  */
-const setValidation = (state, action) => {
-  const checkedValidator = checkValidator(action.validation.validator);
-  const validator = javascriptStringify(checkedValidator.validator, null, 2);
+const setValidation = (
+  state: ValidationState,
+  action: ValidationFetchedAction | ValidationCanceledAction
+): ValidationState => {
+  const checkedValidator = checkValidator(action.validation.validator ?? '');
+  // TODO(COMPASS-4989): javascriptStringify??
+  const validator = javascriptStringify(
+    checkedValidator.validator,
+    null,
+    2
+  ) as string;
 
   return {
     ...state,
@@ -159,13 +224,11 @@ const setValidation = (state, action) => {
 
 /**
  * Set Error.
- *
- * @param {Object} state - The state
- * @param {Object} action - The action.
- *
- * @returns {Object} The new state.
  */
-const setError = (state, action) => {
+const setError = (
+  state: ValidationState,
+  action: ValidationSaveFailedAction
+): ValidationState => {
   return {
     ...state,
     error: action.error || null,
@@ -174,13 +237,11 @@ const setError = (state, action) => {
 
 /**
  * Change validation action.
- *
- * @param {Object} state - The state
- * @param {Object} action - The action.
- *
- * @returns {Object} The new state.
  */
-const changeValidationAction = (state, action) => {
+const changeValidationAction = (
+  state: ValidationState,
+  action: ValidationActionChangedAction
+): ValidationState => {
   const newState = {
     ...state,
     validationAction: action.validationAction,
@@ -197,13 +258,11 @@ const changeValidationAction = (state, action) => {
 
 /**
  * Change validation level.
- *
- * @param {Object} state - The state
- * @param {Object} action - The action.
- *
- * @returns {Object} The new state.
  */
-const changeValidationLevel = (state, action) => {
+const changeValidationLevel = (
+  state: ValidationState,
+  action: ValidationLevelChangedAction
+): ValidationState => {
   const newState = {
     ...state,
     validationLevel: action.validationLevel,
@@ -221,7 +280,12 @@ const changeValidationLevel = (state, action) => {
 /**
  * To not have a huge switch statement in the reducer.
  */
-const MAPPINGS = {
+const MAPPINGS: {
+  [Type in ValidationAction['type']]: (
+    state: ValidationState,
+    action: ValidationAction & { type: Type }
+  ) => ValidationState;
+} = {
   [VALIDATOR_CHANGED]: changeValidator,
   [VALIDATION_CANCELED]: setValidation,
   [VALIDATION_FETCHED]: setValidation,
@@ -233,74 +297,64 @@ const MAPPINGS = {
 
 /**
  * Reducer function for handle state changes to status.
- *
- * @param {String} state - The status state.
- * @param {Object} action - The action.
- *
- * @returns {String} The new state.
  */
-export default function reducer(state = INITIAL_STATE, action) {
-  const fn = MAPPINGS[action.type];
-
+export default function reducer(
+  state: ValidationState = INITIAL_STATE,
+  action: RootAction
+): ValidationState {
+  const fn = MAPPINGS[action.type as ValidationAction['type']];
+
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore-error TS does not understand that action can be passed to fn
   return fn ? fn(state, action) : state;
 }
 
 /**
  * Action creator for validation action changed events.
- *
- * @param {String} validationAction - Validation action.
- *
- * @returns {Object} Validation action changed action.
  */
-export const validationActionChanged = (validationAction) => ({
+export const validationActionChanged = (
+  validationAction: ValidationServerAction
+): ValidationActionChangedAction => ({
   type: VALIDATION_ACTION_CHANGED,
   validationAction,
 });
 
 /**
  * Action creator for validation level changed events.
- *
- * @param {String} validationLevel - Validation level.
- *
- * @returns {Object} Validation level changed action.
  */
-export const validationLevelChanged = (validationLevel) => ({
+export const validationLevelChanged = (
+  validationLevel: ValidationLevel
+): ValidationLevelChangedAction => ({
   type: VALIDATION_LEVEL_CHANGED,
   validationLevel,
 });
 
 /**
  * Action creator for validator changed events.
- *
- * @param {String} validator - Validator.
- *
- * @returns {Object} Validator changed action.
  */
-export const validatorChanged = (validator) => ({
+export const validatorChanged = (
+  validator: string
+): ValidatorChangedAction => ({
   type: VALIDATOR_CHANGED,
   validator,
 });
 
 /**
  * Action creator for validation fetched events.
- *
- * @param {String} validation - Validation.
- *
- * @returns {Object} Validation fetched action.
  */
-export const validationFetched = (validation) => ({
+export const validationFetched = (
+  validation: PartialValidation
+): ValidationFetchedAction => ({
   type: VALIDATION_FETCHED,
   validation,
 });
 
 /**
  * Action creator for validation canceled events.
- *
- * @param {String} validation - Validation.
- *
- * @returns {Object} Validation canceled action.
  */
-export const validationCanceled = (validation) => ({
+export const validationCanceled = (
+  validation: Validation
+): ValidationCanceledAction => ({
   type: VALIDATION_CANCELED,
   validation,
 });
@@ -312,34 +366,33 @@ export const validationCanceled = (validation) => ({
  *
  * @returns {Object} Validation save failed action.
  */
-export const validationSaveFailed = (error) => ({
+export const validationSaveFailed = (error: {
+  message: string;
+}): ValidationSaveFailedAction => ({
   type: VALIDATION_SAVE_FAILED,
   error,
 });
 
 /**
  * Action creator for syntax error occurred events.
- *
- * @param {Object} syntaxError - Syntax error value.
- *
- * @returns {Object} Syntax error occurred action.
  */
-export const syntaxErrorOccurred = (syntaxError) => ({
+export const syntaxErrorOccurred = (
+  syntaxError: null | { message: string }
+): SyntaxErrorOccurredAction => ({
   type: SYNTAX_ERROR_OCCURRED,
   syntaxError,
 });
 
-/**
- * Fetch validation.
- *
- * @param {Object} namespace - Namespace.
- *
- * @returns {Function} The function.
- */
-export const fetchValidation = (namespace) => {
-  return (dispatch, getState) => {
+export const fetchValidation = (namespace: {
+  database: string;
+  collection: string;
+}) => {
+  return (
+    dispatch: (action: RootAction) => void,
+    getState: () => RootState
+  ) => {
     const state = getState();
-    const dataService = state.dataService.dataService;
+    const dataService = state.dataService;
 
     if (!dataService) {
       return;
@@ -350,20 +403,29 @@ export const fetchValidation = (namespace) => {
         const validation = validationFromCollection(null, collInfo ?? {});
 
         if (!validation.validator) {
-          validation.validator = '{}';
-          dispatch(validationFetched(validation));
+          const newValidation = { ...validation, validator: '{}' };
+          dispatch(validationFetched(newValidation));
           dispatch(isLoadedChanged(true));
           return;
         }
 
-        validation.validator = EJSON.stringify(validation.validator, null, 2);
+        // TODO(COMPASS-4989): EJSON??
+        const newValidation = {
+          ...validation,
+          validator: EJSON.stringify(validation.validator, undefined, 2),
+        };
 
-        dispatch(validationFetched(validation));
+        dispatch(validationFetched(newValidation));
         dispatch(zeroStateChanged(false));
         dispatch(isLoadedChanged(true));
       },
-      (err) => {
-        dispatch(validationFetched(validationFromCollection(err)));
+      (err: Error) => {
+        dispatch(
+          validationFetched({
+            ...validationFromCollection(err),
+            validator: undefined,
+          })
+        );
         dispatch(zeroStateChanged(false));
         dispatch(isLoadedChanged(true));
       }
@@ -371,14 +433,30 @@ export const fetchValidation = (namespace) => {
   };
 };
 
-export function validationFromCollection(err, { validation } = {}) {
+export function validationFromCollection(
+  err: null | { message: string },
+  {
+    validation,
+  }: {
+    validation?: {
+      validationAction?: string;
+      validationLevel?: string;
+      validator?: null | Record<string, unknown>;
+    } | null;
+  } = {}
+): Pick<Validation, 'validationAction' | 'validationLevel'> & {
+  error?: { message: string };
+  validator?: Record<string, unknown>;
+} {
   const { validationAction, validationLevel } = INITIAL_STATE;
   if (err) {
     return { validationAction, validationLevel, error: err };
   }
   return {
-    validationAction: validation?.validationAction ?? validationAction,
-    validationLevel: validation?.validationLevel ?? validationLevel,
+    validationAction: (validation?.validationAction ??
+      validationAction) as ValidationServerAction,
+    validationLevel: (validation?.validationLevel ??
+      validationLevel) as ValidationLevel,
     ...(validation?.validator && {
       validator: validation.validator,
     }),
@@ -387,15 +465,14 @@ export function validationFromCollection(err, { validation } = {}) {
 
 /**
  * Save validation.
- *
- * @param {Object} validation - Validation.
- *
- * @returns {Function} The function.
  */
-export const saveValidation = (validation) => {
-  return async (dispatch, getState) => {
+export const saveValidation = (validation: Validation) => {
+  return async (
+    dispatch: ThunkDispatch<RootState, unknown, RootAction>,
+    getState: () => RootState
+  ) => {
     const state = getState();
-    const dataService = state.dataService.dataService;
+    const dataService = state.dataService;
     const namespace = state.namespace;
     const checkedValidator = checkValidator(validation.validator);
     const savedValidation = {
@@ -422,7 +499,7 @@ export const saveValidation = (validation) => {
         );
         dispatch(fetchValidation(namespace));
       } catch (error) {
-        dispatch(validationSaveFailed(error));
+        dispatch(validationSaveFailed(error as Error));
       }
     }
   };
@@ -434,17 +511,19 @@ export const saveValidation = (validation) => {
  * @returns {Function} The function.
  */
 export const cancelValidation = () => {
-  return (dispatch, getState) => {
+  return (
+    dispatch: ThunkDispatch<RootState, unknown, RootAction>,
+    getState: () => RootState
+  ) => {
     const state = getState();
     const prevValidation = state.validation.prevValidation;
 
     dispatch(
       validationCanceled({
         isChanged: false,
-        validator: prevValidation.validator,
-        validationAction: prevValidation.validationAction,
-        validationLevel: prevValidation.validationLevel,
-        syntaxError: null,
+        validator: prevValidation!.validator,
+        validationAction: prevValidation!.validationAction,
+        validationLevel: prevValidation!.validationLevel,
         error: null,
       })
     );
@@ -460,7 +539,10 @@ export const cancelValidation = () => {
  * @returns {Function} The function.
  */
 export const activateValidation = () => {
-  return (dispatch, getState) => {
+  return (
+    dispatch: ThunkDispatch<RootState, unknown, RootAction>,
+    getState: () => RootState
+  ) => {
     const state = getState();
     const namespace = state.namespace;
 
diff --git a/packages/compass-schema-validation/src/modules/zero-state.spec.js b/packages/compass-schema-validation/src/modules/zero-state.spec.ts
similarity index 91%
rename from packages/compass-schema-validation/src/modules/zero-state.spec.js
rename to packages/compass-schema-validation/src/modules/zero-state.spec.ts
index fa5158f65af..873af4306be 100644
--- a/packages/compass-schema-validation/src/modules/zero-state.spec.js
+++ b/packages/compass-schema-validation/src/modules/zero-state.spec.ts
@@ -17,7 +17,7 @@ describe('zero-state module', function () {
       'when the action is not presented in zero-state module',
       function () {
         it('returns the default state', function () {
-          expect(reducer(undefined, { type: 'test' })).to.equal(true);
+          expect(reducer(undefined, { type: 'test' } as any)).to.equal(true);
         });
       }
     );
diff --git a/packages/compass-schema-validation/src/modules/zero-state.js b/packages/compass-schema-validation/src/modules/zero-state.ts
similarity index 50%
rename from packages/compass-schema-validation/src/modules/zero-state.js
rename to packages/compass-schema-validation/src/modules/zero-state.ts
index 46ff6bf2469..9bb3bdff227 100644
--- a/packages/compass-schema-validation/src/modules/zero-state.js
+++ b/packages/compass-schema-validation/src/modules/zero-state.ts
@@ -1,26 +1,32 @@
 import { createLoggerAndTelemetry } from '@mongodb-js/compass-logging';
+import type { RootAction } from '.';
 const { track } = createLoggerAndTelemetry('COMPASS-SCHEMA-VALIDATION-UI');
 
 /**
  * Zero state changed action.
  */
 export const IS_ZERO_STATE_CHANGED =
-  'validation/namespace/IS_ZERO_STATE_CHANGED';
+  'validation/namespace/IS_ZERO_STATE_CHANGED' as const;
+interface IsZeroStateChangedAction {
+  type: typeof IS_ZERO_STATE_CHANGED;
+  isZeroState: boolean;
+}
+
+export type IsZeroStateAction = IsZeroStateChangedAction;
+export type IsZeroStateState = boolean;
 
 /**
  * The initial state.
  */
-export const INITIAL_STATE = true;
+export const INITIAL_STATE: IsZeroStateState = true;
 
 /**
  * Reducer function for handle state changes to namespace.
- *
- * @param {String} state - The namespace state.
- * @param {Object} action - The action.
- *
- * @returns {String} The new state.
  */
-export default function reducer(state = INITIAL_STATE, action) {
+export default function reducer(
+  state: IsZeroStateState = INITIAL_STATE,
+  action: RootAction
+): IsZeroStateState {
   if (action.type === IS_ZERO_STATE_CHANGED) {
     return action.isZeroState;
   }
@@ -30,25 +36,19 @@ export default function reducer(state = INITIAL_STATE, action) {
 
 /**
  * Action creator for zero state changed events.
- *
- * @param {Boolean} isZeroState - Is zero state.
- *
- * @returns {Object} The zero state changed action.
  */
-export const zeroStateChanged = (isZeroState) => ({
+export const zeroStateChanged = (
+  isZeroState: boolean
+): IsZeroStateChangedAction => ({
   type: IS_ZERO_STATE_CHANGED,
   isZeroState,
 });
 
 /**
  * Change zero state.
- *
- * @param {Boolean} isZeroState - Is zero state.
- *
- * @returns {Function} The function.
  */
-export const changeZeroState = (isZeroState) => {
-  return (dispatch) => {
+export const changeZeroState = (isZeroState: boolean) => {
+  return (dispatch: (action: IsZeroStateAction) => void) => {
     if (isZeroState === false) {
       track('Schema Validation Added');
     }
diff --git a/packages/compass-schema-validation/src/plugin.jsx b/packages/compass-schema-validation/src/plugin.jsx
deleted file mode 100644
index 548c8a62e31..00000000000
--- a/packages/compass-schema-validation/src/plugin.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React, { Component } from 'react';
-import { Provider } from 'react-redux';
-import PropTypes from 'prop-types';
-import CompassSchemaValidation from './components/compass-schema-validation';
-
-/**
- * CompassSchemaValidationPlugin plugin.
- */
-class Plugin extends Component {
-  static displayName = 'CompassSchemaValidationPlugin';
-  static propTypes = {
-    store: PropTypes.object.isRequired,
-  };
-
-  /**
-   * Connect the Plugin to the store and render.
-   *
-   * @returns {React.Component} The rendered component.
-   */
-  render() {
-    return (
-      <Provider store={this.props.store}>
-        <CompassSchemaValidation />
-      </Provider>
-    );
-  }
-}
-
-export default Plugin;
diff --git a/packages/compass-schema-validation/src/plugin.spec.js b/packages/compass-schema-validation/src/plugin.spec.js
deleted file mode 100644
index e8feb1c2215..00000000000
--- a/packages/compass-schema-validation/src/plugin.spec.js
+++ /dev/null
@@ -1,17 +0,0 @@
-// import React from 'react';
-// import { mount } from 'enzyme';
-// import CompassSchemaValidationPlugin from './plugin';
-
-describe('CompassSchemaValidation [Plugin]', function () {
-  // let component;
-
-  beforeEach(function (done) {
-    // component = mount(<CompassSchemaValidationPlugin />);
-    done();
-  });
-
-  afterEach(function (done) {
-    // component = null;
-    done();
-  });
-});
diff --git a/packages/compass-schema-validation/src/stores/index.js b/packages/compass-schema-validation/src/stores/index.js
deleted file mode 100644
index dad536b8ec2..00000000000
--- a/packages/compass-schema-validation/src/stores/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import configureStore, { setDataProvider } from './store';
-export default configureStore;
-export { setDataProvider };
diff --git a/packages/compass-schema-validation/src/stores/index.ts b/packages/compass-schema-validation/src/stores/index.ts
new file mode 100644
index 00000000000..906b3bd9caf
--- /dev/null
+++ b/packages/compass-schema-validation/src/stores/index.ts
@@ -0,0 +1 @@
+export { onActivated } from './store';
diff --git a/packages/compass-schema-validation/src/stores/store.js b/packages/compass-schema-validation/src/stores/store.js
deleted file mode 100644
index 692616e5c5f..00000000000
--- a/packages/compass-schema-validation/src/stores/store.js
+++ /dev/null
@@ -1,105 +0,0 @@
-import { createStore, applyMiddleware } from 'redux';
-import thunk from 'redux-thunk';
-import reducer from '../modules';
-import toNS from 'mongodb-ns';
-import { namespaceChanged } from '../modules/namespace';
-import { dataServiceConnected } from '../modules/data-service';
-import { fieldsChanged } from '../modules/fields';
-import { serverVersionChanged } from '../modules/server-version';
-import { activateValidation } from '../modules/validation';
-import { editModeChanged } from '../modules/edit-mode';
-import {
-  localAppRegistryActivated,
-  globalAppRegistryActivated,
-} from '@mongodb-js/mongodb-redux-common/app-registry';
-import semver from 'semver';
-
-/**
- * The lowest supported version.
- */
-const MIN_VERSION = '3.2.0';
-
-export const setDataProvider = (store, error, dataProvider) => {
-  store.dispatch(dataServiceConnected(error, dataProvider));
-};
-
-/**
- * The store has a combined pipeline reducer plus the thunk middleware.
- */
-const configureStore = (options = {}) => {
-  const store = createStore(reducer, applyMiddleware(thunk));
-
-  // Set the app registry if preset. This must happen first.
-  if (options.localAppRegistry) {
-    const localAppRegistry = options.localAppRegistry;
-    store.dispatch(localAppRegistryActivated(localAppRegistry));
-
-    /**
-     * When the collection is changed, update the store.
-     */
-    localAppRegistry.on('fields-changed', (fields) => {
-      store.dispatch(fieldsChanged(fields.fields));
-    });
-
-    /**
-     * When the Schema Validation is an active tab, send 'activated' metric.
-     *
-     * @param {String} tabName - The name of active tab.
-     */
-    localAppRegistry.on('subtab-changed', (tabName) => {
-      if (tabName === 'Validation') {
-        store.dispatch(activateValidation());
-      }
-    });
-  }
-
-  if (options.globalAppRegistry) {
-    const globalAppRegistry = options.globalAppRegistry;
-    store.dispatch(globalAppRegistryActivated(globalAppRegistry));
-
-    const instanceStore = globalAppRegistry.getStore('App.InstanceStore');
-    const { instance } = instanceStore.getState();
-
-    const setEditMode = () => {
-      store.dispatch(
-        editModeChanged({
-          collectionTimeSeries: !!options.isTimeSeries,
-          collectionReadOnly: options.isReadonly ? true : false,
-          writeStateStoreReadOnly: !instance.isWritable,
-          oldServerReadOnly: semver.gte(MIN_VERSION, instance.build.version),
-        })
-      );
-    };
-
-    // set the initial value
-    setEditMode();
-
-    // isWritable can change later
-    instance.on('change:isWritable', () => {
-      store.dispatch(
-        editModeChanged({
-          writeStateStoreReadOnly: !instance.isWritable,
-        })
-      );
-    });
-
-    store.dispatch(serverVersionChanged(instance.build.version));
-
-    if (options.namespace) {
-      const namespace = toNS(options.namespace);
-      store.dispatch(namespaceChanged(namespace));
-    }
-
-    if (options.dataProvider) {
-      setDataProvider(
-        store,
-        options.dataProvider.error,
-        options.dataProvider.dataProvider
-      );
-    }
-  }
-
-  return store;
-};
-
-export default configureStore;
diff --git a/packages/compass-schema-validation/src/stores/store.spec.js b/packages/compass-schema-validation/src/stores/store.spec.ts
similarity index 86%
rename from packages/compass-schema-validation/src/stores/store.spec.js
rename to packages/compass-schema-validation/src/stores/store.spec.ts
index fe4cd22850e..ecc897a3a4c 100644
--- a/packages/compass-schema-validation/src/stores/store.spec.js
+++ b/packages/compass-schema-validation/src/stores/store.spec.ts
@@ -12,10 +12,11 @@ import {
 import {
   fetchValidDocument,
   fetchInvalidDocument,
-  DOCUMENT_LOADING_STATES,
 } from '../modules/sample-documents';
 import { stringify as javascriptStringify } from 'javascript-stringify';
-import configureStore from './';
+import type { Store } from 'redux';
+import type { RootAction, RootState } from '../modules';
+import { onActivated } from './store';
 
 const topologyDescription = {
   type: 'Unknown',
@@ -28,32 +29,36 @@ const fakeInstance = new MongoDBInstance({
   build: {
     version: '6.0.0',
   },
-});
+} as any);
 
-const fakeAppInstanceStore = {
-  getState: function () {
-    return {
-      instance: fakeInstance,
-    };
-  },
-};
+const fakeDataService = {
+  collectionInfo: () =>
+    new Promise(() => {
+      /* never resolves */
+    }),
+} as any;
 
 describe('Schema Validation Store', function () {
-  let store;
+  let store: Store<RootState, RootAction>;
+  let deactivate: null | (() => void) = null;
   const globalAppRegistry = new AppRegistry();
   const localAppRegistry = new AppRegistry();
 
-  globalAppRegistry.registerStore('App.InstanceStore', fakeAppInstanceStore);
-
   beforeEach(function () {
-    store = configureStore({
+    const activateResult = onActivated({} as any, {
       localAppRegistry: localAppRegistry,
       globalAppRegistry: globalAppRegistry,
-      dataProvider: {
-        error: 'error',
-        dataProvider: 'ds',
-      },
+      dataService: fakeDataService,
+      instance: fakeInstance,
     });
+    store = activateResult.store;
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    deactivate = activateResult.deactivate;
+  });
+
+  afterEach(function () {
+    deactivate?.();
+    deactivate = null;
   });
 
   describe('#onActivated', function () {
@@ -129,7 +134,7 @@ describe('Schema Validation Store', function () {
           writeStateStoreReadOnly: true,
         });
 
-        fakeInstance.set({
+        (fakeInstance as any).set({
           topologyDescription: {
             type: 'Single',
             servers: [{ type: 'Standalone' }],
@@ -146,12 +151,8 @@ describe('Schema Validation Store', function () {
     });
 
     context('when the data service is connected', function () {
-      it('sets the data servicein the state', function () {
-        expect(store.getState().dataService.dataService).to.equal('ds');
-      });
-
-      it('sets the error in the state', function () {
-        expect(store.getState().dataService.error).to.equal('error');
+      it('sets the data service in the state', function () {
+        expect(store.getState().dataService).to.equal(fakeDataService);
       });
     });
   });
@@ -164,7 +165,7 @@ describe('Schema Validation Store', function () {
           expect(store.getState().validation.validator).to.equal('');
           done();
         });
-        store.dispatch({ type: 'UNKNOWN' });
+        store.dispatch({ type: 'UNKNOWN' } as any);
       });
     });
 
@@ -184,32 +185,32 @@ describe('Schema Validation Store', function () {
     context('when the action is fetch valid sample documents', function () {
       it('updates the sample document loading in state', function (done) {
         expect(store.getState().sampleDocuments.validDocumentState).to.equal(
-          DOCUMENT_LOADING_STATES.INITIAL
+          'initial'
         );
         const unsubscribe = store.subscribe(() => {
           unsubscribe();
           expect(store.getState().sampleDocuments.validDocumentState).to.equal(
-            DOCUMENT_LOADING_STATES.LOADING
+            'loading'
           );
           done();
         });
-        store.dispatch(fetchValidDocument());
+        store.dispatch(fetchValidDocument() as any);
       });
     });
 
     context('when the action is fetch invalid sample documents', function () {
       it('updates the sample document loading in state', function (done) {
         expect(store.getState().sampleDocuments.invalidDocumentState).to.equal(
-          DOCUMENT_LOADING_STATES.INITIAL
+          'initial'
         );
         const unsubscribe = store.subscribe(() => {
           unsubscribe();
           expect(
             store.getState().sampleDocuments.invalidDocumentState
-          ).to.equal(DOCUMENT_LOADING_STATES.LOADING);
+          ).to.equal('loading');
           done();
         });
-        store.dispatch(fetchInvalidDocument());
+        store.dispatch(fetchInvalidDocument() as any);
       });
     });
 
@@ -241,7 +242,7 @@ describe('Schema Validation Store', function () {
           expect(store.getState().validation).to.deep.equal(createdValidation);
           done();
         });
-        store.dispatch(validationFetched(validation));
+        store.dispatch(validationFetched(validation as any));
       });
 
       it('updates the error in state if failed', function (done) {
@@ -265,8 +266,8 @@ describe('Schema Validation Store', function () {
           expect(store.getState().validation).to.deep.equal(createdValidation);
           done();
         });
-        validation.error = { message: 'Validation fetch failed!' };
-        store.dispatch(validationFetched(validation));
+        (validation as any).error = { message: 'Validation fetch failed!' };
+        store.dispatch(validationFetched(validation as any));
       });
     });
 
diff --git a/packages/compass-schema-validation/src/stores/store.ts b/packages/compass-schema-validation/src/stores/store.ts
new file mode 100644
index 00000000000..db87e4deb93
--- /dev/null
+++ b/packages/compass-schema-validation/src/stores/store.ts
@@ -0,0 +1,117 @@
+import type { Store } from 'redux';
+import { createStore, applyMiddleware } from 'redux';
+import type { ThunkDispatch } from 'redux-thunk';
+import thunk from 'redux-thunk';
+import type { RootAction, RootState } from '../modules';
+import reducer from '../modules';
+import toNS from 'mongodb-ns';
+import { namespaceChanged } from '../modules/namespace';
+import { dataServiceConnected } from '../modules/data-service';
+import { fieldsChanged } from '../modules/fields';
+import { serverVersionChanged } from '../modules/server-version';
+import { activateValidation } from '../modules/validation';
+import { editModeChanged } from '../modules/edit-mode';
+import {
+  localAppRegistryActivated,
+  globalAppRegistryActivated,
+} from '@mongodb-js/mongodb-redux-common/app-registry';
+import semver from 'semver';
+import type { CollectionTabPluginMetadata } from '@mongodb-js/compass-collection';
+import type { AppRegistry } from 'hadron-app-registry';
+import type { DataService } from 'mongodb-data-service';
+import type { MongoDBInstance } from '@mongodb-js/compass-app-stores/provider';
+
+/**
+ * The lowest supported version.
+ */
+const MIN_VERSION = '3.2.0';
+
+// Exposed for testing
+export function configureStore(): Store<RootState, RootAction> {
+  return createStore(reducer, applyMiddleware(thunk));
+}
+
+/**
+ * The store has a combined pipeline reducer plus the thunk middleware.
+ */
+export function onActivated(
+  options: CollectionTabPluginMetadata,
+  {
+    localAppRegistry,
+    globalAppRegistry,
+    dataService,
+    instance,
+  }: {
+    localAppRegistry: AppRegistry;
+    globalAppRegistry: AppRegistry;
+    dataService: DataService;
+    instance: MongoDBInstance;
+  }
+) {
+  const store = configureStore();
+  const cleanup: (() => void)[] = [];
+  function on(
+    eventEmitter: {
+      on(ev: string, l: (...args: any[]) => void): void;
+      removeListener(ev: string, l: (...args: any[]) => void): void;
+    },
+    ev: string,
+    listener: (...args: any[]) => void
+  ) {
+    eventEmitter.on(ev, listener);
+    cleanup.push(() => eventEmitter.removeListener(ev, listener));
+  }
+
+  // Set the app registry if preset. This must happen first.
+  store.dispatch(localAppRegistryActivated(localAppRegistry));
+  store.dispatch(globalAppRegistryActivated(globalAppRegistry));
+  store.dispatch(serverVersionChanged(instance.build.version));
+  store.dispatch(dataServiceConnected(dataService));
+
+  /**
+   * When the collection is changed, update the store.
+   */
+  on(localAppRegistry, 'fields-changed', (fields) => {
+    store.dispatch(fieldsChanged(fields.fields));
+  });
+
+  const setEditMode = () => {
+    store.dispatch(
+      editModeChanged({
+        collectionTimeSeries: !!options.isTimeSeries,
+        collectionReadOnly: options.isReadonly ? true : false,
+        writeStateStoreReadOnly: !instance.isWritable,
+        oldServerReadOnly: semver.gte(MIN_VERSION, instance.build.version),
+      })
+    );
+  };
+
+  // set the initial value
+  setEditMode();
+
+  // isWritable can change later
+  instance.on('change:isWritable', () => {
+    store.dispatch(
+      editModeChanged({
+        writeStateStoreReadOnly: !instance.isWritable,
+      })
+    );
+  });
+
+  if (options.namespace) {
+    const namespace = toNS(options.namespace);
+    store.dispatch(namespaceChanged(namespace));
+  }
+
+  // Activate validation when this plugin is first rendered
+  (store.dispatch as ThunkDispatch<RootState, unknown, RootAction>)(
+    activateValidation()
+  );
+
+  return {
+    store,
+    deactivate() {
+      for (const cleaner of cleanup) cleaner();
+    },
+  };
+}
diff --git a/packages/compass-schema-validation/src/typings.d.ts b/packages/compass-schema-validation/src/typings.d.ts
new file mode 100644
index 00000000000..43b4ac609bf
--- /dev/null
+++ b/packages/compass-schema-validation/src/typings.d.ts
@@ -0,0 +1 @@
+declare module '@mongodb-js/mongodb-redux-common/app-registry';