chore(query-bar): refactor query bar plugin to new interface, provide hooks to access and modify query value COMPASS-7405 (#5244)

* chore(query-bar): refactor query bar to the new plugin interface; provide hooks to access and modify query bar filelds state

* chore(crud): refactor crud to work with new query bar plugin interface

* chore(schema): update schema plugin to use new query bar interfaces

* chore: depcheck

* chore(query-bar): add ticket to todo; update usememo deps

Author: gribnoysup

package-lock.json

@@ -7,19 +7,40 @@ export interface CollectionTabPlugin {
   component: HadronPluginComponent<CollectionTabPluginMetadata, any>;
 }
 
-const CollectionTabsContext = React.createContext<CollectionTabPlugin[]>([]);
-
-export const CollectionTabsProvider: React.FunctionComponent<{
+type CollectionTabComponentsProviderValue = {
   tabs: CollectionTabPlugin[];
-}> = ({ tabs, children }) => {
-  const tabsRef = useRef(tabs);
+  modals: CollectionTabPlugin['component'][];
+  queryBar: CollectionTabPlugin['component'];
+};
+
+const defaultComponents: CollectionTabComponentsProviderValue = {
+  tabs: [],
+  modals: [],
+  queryBar: (() => null) as any,
+};
+
+const CollectionTabComponentsContext =
+  React.createContext<CollectionTabComponentsProviderValue>(defaultComponents);
+
+export const CollectionTabsProvider: React.FunctionComponent<
+  Partial<CollectionTabComponentsProviderValue>
+> = ({ children, ...props }) => {
+  const valueRef = useRef({ ...defaultComponents, ...props });
   return (
-    <CollectionTabsContext.Provider value={tabsRef.current}>
+    <CollectionTabComponentsContext.Provider value={valueRef.current}>
       {children}
-    </CollectionTabsContext.Provider>
+    </CollectionTabComponentsContext.Provider>
   );
 };
 
-export function useCollectionTabPlugins(): CollectionTabPlugin[] {
-  return useContext(CollectionTabsContext);
+export function useCollectionSubTabs() {
+  return useContext(CollectionTabComponentsContext).tabs;
+}
+
+export function useCollectionScopedModals() {
+  return useContext(CollectionTabComponentsContext).modals;
+}
+
+export function useCollectionQueryBar() {
+  return useContext(CollectionTabComponentsContext).queryBar;
 }

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

@@ -4,12 +4,14 @@ import {
   type CollectionState,
   selectTab,
   renderScopedModals,
-  renderTabs,
 } 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 { useCollectionTabPlugins } from './collection-tab-provider';
+import {
+  useCollectionQueryBar,
+  useCollectionSubTabs,
+} from './collection-tab-provider';
 import type { CollectionTabOptions } from '../stores/collection-tab';
 import type { CollectionMetadata } from 'mongodb-collection-model';
 
@@ -44,10 +46,6 @@ type CollectionTabProps = CollectionTabOptions & {
   currentTab: string;
   collectionMetadata: CollectionMetadata;
   renderScopedModals(props: CollectionTabOptions): React.ReactElement[];
-  // TODO(COMPASS-7405): Remove usage of `renderTabs` for Query.QueryBar role
-  renderTabs(
-    props: CollectionTabOptions
-  ): { name: string; component: React.ReactElement }[];
   onTabClick(name: string): void;
 };
 
@@ -63,7 +61,6 @@ const CollectionTabWithMetadata: React.FunctionComponent<
   editViewName,
   collectionMetadata,
   renderScopedModals,
-  renderTabs,
   onTabClick,
 }) => {
   useEffect(() => {
@@ -78,7 +75,8 @@ const CollectionTabWithMetadata: React.FunctionComponent<
     }
   }, [currentTab]);
 
-  const pluginTabs = useCollectionTabPlugins();
+  const QueryBarPlugin = useCollectionQueryBar();
+  const pluginTabs = useCollectionSubTabs();
 
   const tabsProps = {
     namespace,
@@ -88,18 +86,18 @@ const CollectionTabWithMetadata: React.FunctionComponent<
     initialQuery,
     editViewName,
   };
-  renderTabs(tabsProps); // TODO(COMPASS-7405): Remove usage for Query.QueryBar role
-  const tabs = pluginTabs.map(({ name, component: Component }) => {
-    const pluginProps = {
-      ...collectionMetadata,
-      namespace: namespace,
-      aggregation: initialAggregation,
-      pipeline: initialPipeline,
-      pipelineText: initialPipelineText,
-      query: initialQuery,
-      editViewName: editViewName,
-    };
 
+  const pluginProps = {
+    ...collectionMetadata,
+    namespace: namespace,
+    aggregation: initialAggregation,
+    pipeline: initialPipeline,
+    pipelineText: initialPipelineText,
+    query: initialQuery,
+    editViewName: editViewName,
+  };
+
+  const tabs = pluginTabs.map(({ name, component: Component }) => {
     // `pluginTabs` never change in runtime so it's safe to call the hook here
     // eslint-disable-next-line react-hooks/rules-of-hooks
     Component.useActivate(pluginProps);
@@ -112,45 +110,47 @@ const CollectionTabWithMetadata: React.FunctionComponent<
   const activeTabIndex = tabs.findIndex((tab) => tab.name === currentTab);
 
   return (
-    <div className={collectionStyles} data-testid="collection">
-      <div className={collectionContainerStyles}>
-        <CollectionHeader
-          editViewName={editViewName}
-          {...collectionMetadata}
-        ></CollectionHeader>
-        <TabNavBar
-          data-testid="collection-tabs"
-          aria-label="Collection Tabs"
-          tabs={tabs.map((tab) => {
-            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>
-            );
-          })}
-          activeTabIndex={activeTabIndex}
-          onTabClicked={(id) => {
-            onTabClick(tabs[id].name);
-          }}
-        />
-      </div>
-      <div className={collectionModalContainerStyles}>
-        {renderScopedModals(tabsProps)}
+    <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"
+            tabs={tabs.map((tab) => {
+              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>
+              );
+            })}
+            activeTabIndex={activeTabIndex}
+            onTabClicked={(id) => {
+              onTabClick(tabs[id].name);
+            }}
+          />
+        </div>
+        <div className={collectionModalContainerStyles}>
+          {renderScopedModals(tabsProps)}
+        </div>
       </div>
-    </div>
+    </QueryBarPlugin>
   );
 };
 
@@ -182,7 +182,6 @@ const ConnectedCollectionTab = connect(
   },
   {
     renderScopedModals: renderScopedModals,
-    renderTabs: renderTabs,
     onTabClick: selectTab,
   }
 )(CollectionTab) as React.FunctionComponent<CollectionTabOptions>;