fix: move to compass components provider

Author: gagik

configs/testing-library-compass/src/index.tsx

@@ -45,10 +45,7 @@ import {
   ReadOnlyPreferenceAccess,
 } from 'compass-preferences-model/provider';
 import { TelemetryProvider } from '@mongodb-js/compass-telemetry/provider';
-import {
-  CompassComponentsProvider,
-  ContextMenuProvider,
-} from '@mongodb-js/compass-components';
+import { CompassComponentsProvider } from '@mongodb-js/compass-components';
 import {
   TestEnvCurrentConnectionContext,
   ConnectionInfoProvider,
@@ -352,43 +349,41 @@ function createWrapper(
             <PreferencesProvider value={wrapperState.preferences}>
               <LoggerProvider value={logger}>
                 <TelemetryProvider options={telemetryOptions}>
-                  <ContextMenuProvider>
-                    <ConnectionStorageProvider
-                      value={wrapperState.connectionStorage}
-                    >
-                      <ConnectFnProvider connect={wrapperState.connect}>
-                        <CompassConnections
-                          appName={options.appName ?? 'TEST'}
-                          onFailToLoadConnections={
-                            options.onFailToLoadConnections ??
-                            (() => {
-                              // noop
-                            })
-                          }
-                          onExtraConnectionDataRequest={
-                            options.onExtraConnectionDataRequest ??
-                            (() => {
-                              return Promise.resolve([{}, null] as [any, null]);
-                            })
-                          }
-                          onAutoconnectInfoRequest={
-                            options.onAutoconnectInfoRequest
-                          }
-                          preloadStorageConnectionInfos={connections}
-                        >
-                          <StoreGetter>
-                            <TestEnvCurrentConnectionContext.Provider
-                              value={TEST_ENV_CURRENT_CONNECTION}
-                            >
-                              <TestingLibraryWrapper {...props}>
-                                {children}
-                              </TestingLibraryWrapper>
-                            </TestEnvCurrentConnectionContext.Provider>
-                          </StoreGetter>
-                        </CompassConnections>
-                      </ConnectFnProvider>
-                    </ConnectionStorageProvider>
-                  </ContextMenuProvider>
+                  <ConnectionStorageProvider
+                    value={wrapperState.connectionStorage}
+                  >
+                    <ConnectFnProvider connect={wrapperState.connect}>
+                      <CompassConnections
+                        appName={options.appName ?? 'TEST'}
+                        onFailToLoadConnections={
+                          options.onFailToLoadConnections ??
+                          (() => {
+                            // noop
+                          })
+                        }
+                        onExtraConnectionDataRequest={
+                          options.onExtraConnectionDataRequest ??
+                          (() => {
+                            return Promise.resolve([{}, null] as [any, null]);
+                          })
+                        }
+                        onAutoconnectInfoRequest={
+                          options.onAutoconnectInfoRequest
+                        }
+                        preloadStorageConnectionInfos={connections}
+                      >
+                        <StoreGetter>
+                          <TestEnvCurrentConnectionContext.Provider
+                            value={TEST_ENV_CURRENT_CONNECTION}
+                          >
+                            <TestingLibraryWrapper {...props}>
+                              {children}
+                            </TestingLibraryWrapper>
+                          </TestEnvCurrentConnectionContext.Provider>
+                        </StoreGetter>
+                      </CompassConnections>
+                    </ConnectFnProvider>
+                  </ConnectionStorageProvider>
                 </TelemetryProvider>
               </LoggerProvider>
             </PreferencesProvider>
@@ -756,11 +751,6 @@ function createPluginTestHelpers<
  */
 const fireEvent = testingLibraryFireEvent;
 
-/**
- * @deprecated @testing-library/react installs these hooks automatically
- */
-const cleanup = rtlCleanup;
-
 /**
  * @deprecated @testing-library/react-hooks installs these hooks automatically
  */

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

@@ -6,6 +6,7 @@ import { GuideCueProvider } from './guide-cue/guide-cue';
 import { SignalHooksProvider } from './signal-popover';
 import { RequiredURLSearchParamsProvider } from './links/link';
 import { StackedComponentProvider } from '../hooks/use-stacked-component';
+import { ContextMenuProvider } from './context-menu';
 
 type GuideCueProviderProps = React.ComponentProps<typeof GuideCueProvider>;
 
@@ -135,15 +136,17 @@ export const CompassComponentsProvider = ({
           >
             <SignalHooksProvider {...signalHooksProviderProps}>
               <ConfirmationModalArea>
-                <ToastArea>
-                  {typeof children === 'function'
-                    ? children({
-                        darkMode,
-                        portalContainerRef: setPortalContainer,
-                        scrollContainerRef: setScrollContainer,
-                      })
-                    : children}
-                </ToastArea>
+                <ContextMenuProvider>
+                  <ToastArea>
+                    {typeof children === 'function'
+                      ? children({
+                          darkMode,
+                          portalContainerRef: setPortalContainer,
+                          scrollContainerRef: setScrollContainer,
+                        })
+                      : children}
+                  </ToastArea>
+                </ContextMenuProvider>
               </ConfirmationModalArea>
             </SignalHooksProvider>
           </GuideCueProvider>

packages/compass-components/src/index.ts

@@ -93,10 +93,7 @@ export { ModalHeader } from './components/modals/modal-header';
 export { FormModal } from './components/modals/form-modal';
 export { InfoModal } from './components/modals/info-modal';
 
-export {
-  ContextMenuProvider,
-  useContextMenuItems,
-} from './components/context-menu';
+export { useContextMenuItems } from './components/context-menu';
 
 export type {
   FileInputBackend,

packages/compass/src/app/components/entrypoint.tsx

@@ -102,9 +102,7 @@ export const CompassElectron = (props: React.ComponentProps<typeof Home>) => {
       <WithAtlasProviders>
         <WithStorageProviders>
           <AppRegistryProvider scopeName="Application Root">
-            <ContextMenuProvider>
-              <Home {...props} />
-            </ContextMenuProvider>
+            <Home {...props} />
           </AppRegistryProvider>
         </WithStorageProviders>
       </WithAtlasProviders>