chore(query-bar, crud, schema): remove query-changed, query-reset, subtab-changed events from the app COMPASS-7543 COMPASS-7544 (#5814)

* chore(query-bar): introduce new hooks to access last applied query state

* chore(schema): replace unnecessary state with query bar hooks and service

* chore(crud): replace unnecessary state with query bar hooks and service

Author: gribnoysup

package-lock.json

@@ -72,6 +72,8 @@ type ConnectionTabConnectedProps = {
   stats: CollectionState['stats'];
   onTabClick: (tab: CollectionSubtab) => void;
 };
+
+// TODO(COMPASS-7937): Wrong place for these types and type descriptions
 // Props definition when using the component
 type ConnectionTabExpectedProps = {
   /**
@@ -129,8 +131,6 @@ const CollectionTabWithMetadata: React.FunctionComponent<
       });
     }
   }, [currentTab, track]);
-
-  const QueryBarPlugin = useCollectionQueryBar();
   const pluginTabs = useCollectionSubTabs();
   const pluginModals = useCollectionScopedModals();
 
@@ -157,77 +157,75 @@ const CollectionTabWithMetadata: React.FunctionComponent<
   const activeTabIndex = tabs.findIndex((tab) => tab.name === currentTab);
 
   return (
-    <QueryBarPlugin {...pluginProps}>
-      <div className={collectionStyles} data-testid="collection">
-        <div className={collectionContainerStyles}>
-          <CollectionHeader
-            editViewName={editViewName}
-            {...collectionMetadata}
-          ></CollectionHeader>
-          <TabNavBar
-            data-testid="collection-tabs"
-            aria-label="Collection Tabs"
-            tabNames={tabs.map((tab) => tab.name)}
-            tabLabels={tabs.map((tab) => {
-              // We don't show stats, when the collection is a timeseries or a view
-              // or when the view is being edited
-              const hideStats =
-                collectionMetadata.isTimeSeries ||
-                collectionMetadata.sourceName ||
-                editViewName;
-              if (hideStats) {
-                return tab.name;
-              }
-              if (tab.name === 'Documents') {
-                return (
-                  <TabTitleWithStats
-                    data-testid="documents-tab-with-stats"
-                    title={tab.name}
-                    statsComponent={<CollectionDocumentsStats stats={stats} />}
-                  />
-                );
-              }
-              if (tab.name === 'Indexes') {
-                return (
-                  <TabTitleWithStats
-                    data-testid="indexes-tab-with-stats"
-                    title={tab.name}
-                    statsComponent={<CollectionIndexesStats stats={stats} />}
-                  />
-                );
-              }
+    <div className={collectionStyles} data-testid="collection">
+      <div className={collectionContainerStyles}>
+        <CollectionHeader
+          editViewName={editViewName}
+          {...collectionMetadata}
+        ></CollectionHeader>
+        <TabNavBar
+          data-testid="collection-tabs"
+          aria-label="Collection Tabs"
+          tabNames={tabs.map((tab) => tab.name)}
+          tabLabels={tabs.map((tab) => {
+            // We don't show stats, when the collection is a timeseries or a view
+            // or when the view is being edited
+            const hideStats =
+              collectionMetadata.isTimeSeries ||
+              collectionMetadata.sourceName ||
+              editViewName;
+            if (hideStats) {
               return tab.name;
-            })}
-            views={tabs.map((tab) => {
+            }
+            if (tab.name === 'Documents') {
               return (
-                <ErrorBoundary
-                  key={tab.name}
-                  onError={(error: Error, errorInfo: unknown) => {
-                    log.error(
-                      mongoLogId(1001000107),
-                      'Collection Workspace',
-                      'Rendering collection tab failed',
-                      { name: tab.name, error: error.stack, errorInfo }
-                    );
-                  }}
-                >
-                  {tab.component}
-                </ErrorBoundary>
+                <TabTitleWithStats
+                  data-testid="documents-tab-with-stats"
+                  title={tab.name}
+                  statsComponent={<CollectionDocumentsStats stats={stats} />}
+                />
               );
-            })}
-            activeTabIndex={activeTabIndex}
-            onTabClicked={(id) => {
-              onTabClick(tabs[id].name);
-            }}
-          />
-        </div>
-        <div className={collectionModalContainerStyles}>
-          {pluginModals.map((ModalPlugin, idx) => {
-            return <ModalPlugin key={idx} {...pluginProps}></ModalPlugin>;
+            }
+            if (tab.name === 'Indexes') {
+              return (
+                <TabTitleWithStats
+                  data-testid="indexes-tab-with-stats"
+                  title={tab.name}
+                  statsComponent={<CollectionIndexesStats stats={stats} />}
+                />
+              );
+            }
+            return tab.name;
+          })}
+          views={tabs.map((tab) => {
+            return (
+              <ErrorBoundary
+                key={tab.name}
+                onError={(error: Error, errorInfo: unknown) => {
+                  log.error(
+                    mongoLogId(1001000107),
+                    'Collection Workspace',
+                    'Rendering collection tab failed',
+                    { name: tab.name, error: error.stack, errorInfo }
+                  );
+                }}
+              >
+                {tab.component}
+              </ErrorBoundary>
+            );
           })}
-        </div>
+          activeTabIndex={activeTabIndex}
+          onTabClicked={(id) => {
+            onTabClick(tabs[id].name);
+          }}
+        />
       </div>
-    </QueryBarPlugin>
+      <div className={collectionModalContainerStyles}>
+        {pluginModals.map((ModalPlugin, idx) => {
+          return <ModalPlugin key={idx} {...pluginProps}></ModalPlugin>;
+        })}
+      </div>
+    </div>
   );
 };
 
@@ -237,15 +235,29 @@ const CollectionTab = ({
 }: Omit<CollectionTabProps, 'collectionMetadata'> & {
   collectionMetadata: CollectionMetadata | null;
 }) => {
+  const QueryBarPlugin = useCollectionQueryBar();
+
   if (!collectionMetadata) {
     return null;
   }
 
+  const pluginProps = {
+    ...collectionMetadata,
+    namespace: props.namespace,
+    aggregation: props.initialAggregation,
+    pipeline: props.initialPipeline,
+    pipelineText: props.initialPipelineText,
+    query: props.initialQuery,
+    editViewName: props.editViewName,
+  };
+
   return (
-    <CollectionTabWithMetadata
-      collectionMetadata={collectionMetadata}
-      {...props}
-    ></CollectionTabWithMetadata>
+    <QueryBarPlugin {...pluginProps}>
+      <CollectionTabWithMetadata
+        collectionMetadata={collectionMetadata}
+        {...props}
+      ></CollectionTabWithMetadata>
+    </QueryBarPlugin>
   );
 };
 

packages/compass-collection/src/components/collection-tab.tsx

@@ -99,8 +99,7 @@ export const collectionMetadataFetched = (metadata: CollectionMetadata) => {
 export const selectTab = (
   tabName: CollectionSubtab
 ): CollectionThunkAction<void> => {
-  return (_dispatch, getState, { localAppRegistry, workspaces }) => {
-    localAppRegistry.emit('subtab-changed', tabName);
+  return (_dispatch, getState, { workspaces }) => {
     workspaces.openCollectionWorkspaceSubtab(
       getState().workspaceTabId,
       tabName

packages/compass-collection/src/modules/collection-tab.ts

@@ -47,8 +47,8 @@ type EmptyContentProps = {
   icon: React.FunctionComponent;
   title: string;
   subTitle: string;
-  callToAction?: string | JSX.Element;
-  callToActionLink?: JSX.Element;
+  callToAction?: React.ReactNode;
+  callToActionLink?: React.ReactNode;
 };
 
 const EmptyContent: React.FunctionComponent<

packages/compass-components/src/components/empty-content.tsx

@@ -117,8 +117,6 @@ application can be listened to via [hadron-app-registry][hadron-app-registry].
 
 - **'import-finished'**: received when import in the import-export plugin is
   finished. Refreshes documents.
-- **'query-changed'**: received when query was changed in the query bar. Handles updates to crud plugin's query
-  state, and refreshes documents.
 - **'refresh-data'**: received when other plugins need documents refreshed.
   Refreshes documents.
 

packages/compass-crud/README.md

@@ -169,6 +169,7 @@ const CrudToolbar: React.FunctionComponent<CrudToolbarProps> = ({
     <div className={crudToolbarStyles}>
       <div className={crudQueryBarStyles}>
         <QueryBar
+          source="crud"
           resultId={resultId}
           buttonLabel="Find"
           onApply={onApplyClicked}