chore(saved-aggregations-queries): refactor plugin to use new hadron …

…plugin interface (#5129)

packages/compass-app-stores/src/provider.ts

@@ -12,3 +12,5 @@ export const mongoDBInstanceLocator = (): MongoDBInstance => {
   }
   return instance;
 };
+
+export type { MongoDBInstance };

packages/compass-home/package.json

@@ -44,6 +44,7 @@
     "@mongodb-js/compass-import-export": "^7.19.1",
     "@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-settings": "^0.21.1",
     "@mongodb-js/compass-shell": "^3.19.1",
     "@mongodb-js/compass-sidebar": "^5.19.1",
@@ -65,6 +66,7 @@
     "@mongodb-js/compass-import-export": "^7.19.1",
     "@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-settings": "^0.21.1",
     "@mongodb-js/compass-shell": "^3.19.1",
     "@mongodb-js/compass-sidebar": "^5.19.1",

packages/compass-home/src/components/workspace-content.tsx

@@ -7,6 +7,7 @@ import {
 import InstanceWorkspacePlugin, {
   InstanceTabsProvider,
 } from '@mongodb-js/compass-instance';
+import CompassSavedAggregationsQueriesPlugin from '@mongodb-js/compass-saved-aggregations-queries';
 import type Namespace from '../types/namespace';
 
 const EmptyComponent: React.FunctionComponent = () => null;
@@ -30,7 +31,9 @@ const WorkspaceContent: React.FunctionComponent<{ namespace: Namespace }> = ({
   }
 
   return (
-    <InstanceTabsProvider tabs={instanceTabs ?? []}>
+    <InstanceTabsProvider
+      tabs={[CompassSavedAggregationsQueriesPlugin, ...(instanceTabs ?? [])]}
+    >
       <InstanceWorkspacePlugin></InstanceWorkspacePlugin>
     </InstanceTabsProvider>
   );

packages/compass-saved-aggregations-queries/package.json

@@ -56,17 +56,23 @@
     "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-logging": "^1.2.6",
     "@mongodb-js/my-queries-storage": "^0.2.1",
     "bson": "^6.0.0",
+    "hadron-app-registry": "^9.0.14",
+    "mongodb-data-service": "^22.15.1",
     "react": "^17.0.2"
   },
   "dependencies": {
+    "@mongodb-js/compass-app-stores": "^7.6.1",
     "@mongodb-js/compass-components": "^1.19.0",
     "@mongodb-js/compass-logging": "^1.2.6",
     "@mongodb-js/my-queries-storage": "^0.2.1",
-    "bson": "^6.0.0"
+    "bson": "^6.0.0",
+    "hadron-app-registry": "^9.0.14",
+    "mongodb-data-service": "^22.15.1"
   },
   "devDependencies": {
     "@mongodb-js/eslint-config-compass": "^1.0.11",
@@ -87,10 +93,7 @@
     "depcheck": "^1.4.1",
     "eslint": "^7.25.0",
     "fuse.js": "^6.5.3",
-    "hadron-app-registry": "^9.0.14",
     "mocha": "^10.2.0",
-    "mongodb-data-service": "^22.15.1",
-    "mongodb-instance-model": "^12.15.1",
     "mongodb-ns": "^2.4.0",
     "nyc": "^15.1.0",
     "prettier": "^2.7.1",

packages/compass-saved-aggregations-queries/src/components/aggregations-queries-list.tsx

@@ -1,18 +1,16 @@
 import React, { useEffect, useCallback, useContext } from 'react';
 import { connect } from 'react-redux';
-import type { ConnectedProps } from 'react-redux';
 import {
   VirtualGrid,
   css,
   spacing,
   useSortControls,
   useSortedItems,
-  useEffectOnChange,
 } from '@mongodb-js/compass-components';
 import { fetchItems } from '../stores/aggregations-queries-items';
 import type { Item } from '../stores/aggregations-queries-items';
 import { openSavedItem } from '../stores/open-item';
-import type { RootState } from '../stores/index';
+import type { RootState } from '../stores';
 import { SavedItemCard, CARD_WIDTH, CARD_HEIGHT } from './saved-item-card';
 import type { Action } from './saved-item-card';
 import { NoSavedItems, NoSearchResults } from './empty-list-items';
@@ -22,9 +20,7 @@ import { useGridFilters, useFilteredItems } from '../hooks/use-grid-filters';
 import { editItem } from '../stores/edit-item';
 import { confirmDeleteItem } from '../stores/delete-item';
 import { copyToClipboard } from '../stores/copy-to-clipboard';
-import { createLoggerAndTelemetry } from '@mongodb-js/compass-logging';
-
-const { track } = createLoggerAndTelemetry('COMPASS-MY-QUERIES-UI');
+import { useTrackOnChange } from '@mongodb-js/compass-logging/provider';
 
 const sortBy: { name: keyof Item; label: string }[] = [
   {
@@ -73,6 +69,16 @@ const GridControls = () => {
   );
 };
 
+type AggregationsQueriesListProps = {
+  loading: boolean;
+  items: Item[];
+  onMount(): void;
+  onOpenItem(id: string): void;
+  onEditItem(id: string): void;
+  onDeleteItem(id: string): void;
+  onCopyToClipboard(id: string): void;
+};
+
 const AggregationsQueriesList = ({
   loading,
   items,
@@ -98,30 +104,42 @@ const AggregationsQueriesList = ({
     })
     .map((x) => x.item);
 
-  useEffectOnChange(() => {
-    if (filters.database) {
-      track('My Queries Filter', { type: 'database' });
-    }
-  }, filters.database);
+  useTrackOnChange(
+    'COMPASS-MY-QUERIES-UI',
+    (track) => {
+      if (filters.database) {
+        track('My Queries Filter', { type: 'database' });
+      }
+    },
+    [filters.database]
+  );
 
-  useEffectOnChange(() => {
-    if (filters.collection) {
-      track('My Queries Filter', { type: 'collection' });
-    }
-  }, filters.collection);
+  useTrackOnChange(
+    'COMPASS-MY-QUERIES-UI',
+    (track) => {
+      if (filters.collection) {
+        track('My Queries Filter', { type: 'collection' });
+      }
+    },
+    [filters.collection]
+  );
 
   // If a user is searching, we disable the sort as
   // search results are sorted by match score
   const [sortControls, sortState] = useSortControls(sortBy, {
     isDisabled: Boolean(search),
   });
 
-  useEffectOnChange(() => {
-    track('My Queries Sort', {
-      sort_by: sortState.name,
-      order: sortState.order === 1 ? 'ascending' : 'descending',
-    });
-  }, sortState);
+  useTrackOnChange(
+    'COMPASS-MY-QUERIES-UI',
+    (track) => {
+      track('My Queries Sort', {
+        sort_by: sortState.name,
+        order: sortState.order === 1 ? 'ascending' : 'descending',
+      });
+    },
+    [sortState]
+  );
 
   const sortedItems = useSortedItems(filteredItems, sortState);
 
@@ -221,8 +239,4 @@ const mapDispatch = {
   onCopyToClipboard: copyToClipboard,
 };
 
-const connector = connect(mapState, mapDispatch);
-
-type AggregationsQueriesListProps = ConnectedProps<typeof connector>;
-
-export default connector(AggregationsQueriesList);
+export default connect(mapState, mapDispatch)(AggregationsQueriesList);

packages/compass-saved-aggregations-queries/src/hooks/use-grid-filters.tsx

@@ -8,9 +8,7 @@ import {
   Option,
   TextInput,
 } from '@mongodb-js/compass-components';
-import { createLoggerAndTelemetry } from '@mongodb-js/compass-logging';
-
-const { track } = createLoggerAndTelemetry('COMPASS-MY-QUERIES-UI');
+import { useLoggerAndTelemetry } from '@mongodb-js/compass-logging/provider';
 
 import type { Item } from '../stores/aggregations-queries-items';
 
@@ -74,6 +72,7 @@ const FilterSelect: React.FunctionComponent<{
 };
 
 function useSearchFilter(): [React.ReactElement, string] {
+  const { track } = useLoggerAndTelemetry('COMPASS-MY-QUERIES-UI');
   const [search, setSearch] = useState('');
   const searchControls = useMemo(() => {
     return (
@@ -94,7 +93,7 @@ function useSearchFilter(): [React.ReactElement, string] {
         spellCheck={false}
       />
     );
-  }, [search]);
+  }, [search, track]);
 
   return [searchControls, search];
 }