Refactor ConnectionsNavigation into NavigationItemsFilter

kraenhansen · kraenhansen · commit 754ab493e60a · 2024-11-13T11:43:20.000+01:00
diff --git a/packages/compass-sidebar/src/components/multiple-connections/connections-navigation.tsx b/packages/compass-sidebar/src/components/multiple-connections/connections-navigation.tsx
@@ -12,10 +12,6 @@ import {
   Button,
   Icon,
   ButtonVariant,
-  IconButton,
-  ConnectedPlugsIcon,
-  DisconnectedPlugIcon,
-  Tooltip,
 } from '@mongodb-js/compass-components';
 import { ConnectionsNavigationTree } from '@mongodb-js/compass-connections-navigation';
 import type { MapDispatchToProps, MapStateToProps } from 'react-redux';
@@ -46,7 +42,10 @@ import {
   fetchAllCollections,
   type Database,
 } from '../../modules/databases';
-import { useFilteredConnections } from '../use-filtered-connections';
+import {
+  type ConnectionsFilter,
+  useFilteredConnections,
+} from '../use-filtered-connections';
 import NavigationItemsFilter from '../navigation-items-filter';
 import {
   type ConnectionImportExportAction,
@@ -84,15 +83,6 @@ const connectionCountStyles = css({
   marginLeft: spacing[100],
 });
 
-const filterContainerStyles = css({
-  display: 'flex',
-  flexDirection: 'row',
-  alignItems: 'center',
-  gap: spacing[200],
-  paddingLeft: spacing[400],
-  paddingRight: spacing[400],
-});
-
 const searchFormStyles = css({
   flexGrow: 1,
 });
@@ -123,10 +113,10 @@ type ConnectionListTitleActions =
 type ConnectionsNavigationComponentProps = {
   connectionsWithStatus: ReturnType<typeof useConnectionsWithStatus>;
   activeWorkspace: WorkspaceTab | null;
-  filterRegex: RegExp | null;
-  excludeInactive: boolean;
-  onFilterChange(regex: RegExp | null): void;
-  onToggleExcludeInactive(): void;
+  filter: ConnectionsFilter;
+  onFilterChange(
+    updater: (filter: ConnectionsFilter) => ConnectionsFilter
+  ): void;
   onConnect(info: ConnectionInfo): void;
   onNewConnection(): void;
   onEditConnection(info: ConnectionInfo): void;
@@ -167,13 +157,11 @@ type ConnectionsNavigationProps = ConnectionsNavigationComponentProps &
 const ConnectionsNavigation: React.FC<ConnectionsNavigationProps> = ({
   connectionsWithStatus,
   activeWorkspace,
-  filterRegex,
-  excludeInactive,
+  filter,
   instances,
   databases,
   isPerformanceTabSupported,
   onFilterChange,
-  onToggleExcludeInactive,
   onConnect,
   onNewConnection,
   onEditConnection,
@@ -270,10 +258,9 @@ const ConnectionsNavigation: React.FC<ConnectionsNavigationProps> = ({
     onDatabaseToggle,
   } = useFilteredConnections({
     connections,
-    filterRegex,
+    filter,
     fetchAllCollections,
     onDatabaseExpand,
-    excludeInactive,
   });
 
   const connectionListTitleActions =
@@ -519,37 +506,12 @@ const ConnectionsNavigation: React.FC<ConnectionsNavigationProps> = ({
       </div>
       {connections.length > 0 && (
         <>
-          <div className={filterContainerStyles}>
-            <NavigationItemsFilter
-              className={searchFormStyles}
-              placeholder="Search connections"
-              onFilterChange={onFilterChange}
-            />
-            <Tooltip
-              justify="middle"
-              trigger={
-                <IconButton
-                  onClick={onToggleExcludeInactive}
-                  active={excludeInactive}
-                  aria-label={
-                    excludeInactive
-                      ? 'Showing active connections'
-                      : 'Showing all connections'
-                  }
-                >
-                  {excludeInactive ? (
-                    <ConnectedPlugsIcon />
-                  ) : (
-                    <DisconnectedPlugIcon />
-                  )}
-                </IconButton>
-              }
-            >
-              {excludeInactive
-                ? 'Showing active connections'
-                : 'Showing all connections'}
-            </Tooltip>
-          </div>
+          <NavigationItemsFilter
+            className={searchFormStyles}
+            placeholder="Search connections"
+            filter={filter}
+            onFilterChange={onFilterChange}
+          />
           <ConnectionsNavigationTree
             connections={filtered || connections}
             activeWorkspace={activeWorkspace}
diff --git a/packages/compass-sidebar/src/components/multiple-connections/sidebar.tsx b/packages/compass-sidebar/src/components/multiple-connections/sidebar.tsx
@@ -25,8 +25,10 @@ import ConnectionsNavigation from './connections-navigation';
 import CSFLEConnectionModal, {
   type CSFLEConnectionModalProps,
 } from '../csfle-connection-modal';
+import type { ConnectionsFilter } from '../use-filtered-connections';
 import { setConnectionIsCSFLEEnabled } from '../../modules/data-service';
 import { useGlobalAppRegistry } from 'hadron-app-registry';
+
 const TOAST_TIMEOUT_MS = 5000; // 5 seconds.
 
 type MappedCsfleModalProps = {
@@ -99,14 +101,11 @@ export function MultipleConnectionSidebar({
   const [csfleModalConnectionId, setCsfleModalConnectionId] = useState<
     string | undefined
   >(undefined);
-  const [activeConnectionsFilterRegex, setActiveConnectionsFilterRegex] =
-    useState<RegExp | null>(null);
+  const [connectionsFilter, setConnectionsFilter] = useState<ConnectionsFilter>(
+    { regex: null, excludeInactive: false }
+  );
   const [connectionInfoModalConnectionId, setConnectionInfoModalConnectionId] =
     useState<string | undefined>();
-  const [excludeInactive, setExcludeInactiveConnections] = useState(false);
-  const toggleExcludeInactiveConnections = useCallback(() => {
-    setExcludeInactiveConnections((previous) => !previous);
-  }, []);
 
   const formPreferences = useConnectionFormPreferences();
   const maybeProtectConnectionString = useMaybeProtectConnectionString();
@@ -142,12 +141,6 @@ export function MultipleConnectionSidebar({
     )?.connectionInfo;
   };
 
-  const onActiveConnectionFilterChange = useCallback(
-    (filterRegex: RegExp | null) =>
-      setActiveConnectionsFilterRegex(filterRegex),
-    [setActiveConnectionsFilterRegex]
-  );
-
   const onOpenConnectionInfo = useCallback((connectionId: string) => {
     return setConnectionInfoModalConnectionId(connectionId);
   }, []);
@@ -207,10 +200,8 @@ export function MultipleConnectionSidebar({
         <ConnectionsNavigation
           connectionsWithStatus={connectionsWithStatus}
           activeWorkspace={activeWorkspace}
-          filterRegex={activeConnectionsFilterRegex}
-          excludeInactive={excludeInactive}
-          onFilterChange={onActiveConnectionFilterChange}
-          onToggleExcludeInactive={toggleExcludeInactiveConnections}
+          filter={connectionsFilter}
+          onFilterChange={setConnectionsFilter}
           onConnect={(connectionInfo) => {
             void connect(connectionInfo);
           }}
diff --git a/packages/compass-sidebar/src/components/navigation-items-filter.tsx b/packages/compass-sidebar/src/components/navigation-items-filter.tsx
@@ -1,51 +1,107 @@
 import React, { useCallback } from 'react';
-import { TextInput } from '@mongodb-js/compass-components';
+import {
+  ConnectedPlugsIcon,
+  css,
+  DisconnectedPlugIcon,
+  IconButton,
+  spacing,
+  TextInput,
+  Tooltip,
+} from '@mongodb-js/compass-components';
+import type { ConnectionsFilter } from './use-filtered-connections';
+
+const filterContainerStyles = css({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  gap: spacing[200],
+  paddingLeft: spacing[400],
+  paddingRight: spacing[400],
+});
+
+function createRegExp(input: string) {
+  try {
+    return input ? new RegExp(input, 'i') : null;
+  } catch (e) {
+    return null;
+  }
+}
 
 export default function NavigationItemsFilter({
   placeholder = 'Search',
   ariaLabel = 'Search',
   title = 'Search',
+  filter,
   onFilterChange,
   className,
 }: {
   placeholder?: string;
   ariaLabel?: string;
   title?: string;
-  onFilterChange(regex: RegExp | null): void;
+  filter: ConnectionsFilter;
+  onFilterChange(
+    updater: (filter: ConnectionsFilter) => ConnectionsFilter
+  ): void;
   className?: string;
 }): React.ReactElement {
-  const onChange = useCallback(
+  const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(
     (event) => {
-      const searchString: string = event.target.value;
-
-      let re;
-
-      try {
-        re = searchString ? new RegExp(searchString, 'i') : null;
-      } catch (e) {
-        re = null;
-      }
-
-      onFilterChange(re);
+      onFilterChange((filter) => ({
+        ...filter,
+        regex: createRegExp(event.target.value),
+      }));
     },
     [onFilterChange]
   );
 
+  const toggleExcludeInactive = useCallback(() => {
+    onFilterChange((filter) => ({
+      ...filter,
+      excludeInactive: !filter.excludeInactive,
+    }));
+  }, [onFilterChange]);
+
   const onSubmit = useCallback((evt) => {
     evt.preventDefault();
     evt.stopPropagation();
   }, []);
 
   return (
-    <form noValidate className={className} onSubmit={onSubmit}>
-      <TextInput
-        data-testid="sidebar-filter-input"
-        placeholder={placeholder}
-        type="search"
-        aria-label={ariaLabel}
-        title={title}
-        onChange={onChange}
-      />
-    </form>
+    <div className={filterContainerStyles}>
+      <form noValidate className={className} onSubmit={onSubmit}>
+        <TextInput
+          data-testid="sidebar-filter-input"
+          placeholder={placeholder}
+          type="search"
+          aria-label={ariaLabel}
+          title={title}
+          onChange={onChange}
+        />
+      </form>
+      <Tooltip
+        justify="middle"
+        trigger={
+          <IconButton
+            onClick={toggleExcludeInactive}
+            active={filter.excludeInactive}
+            aria-label={
+              filter.excludeInactive
+                ? 'Showing active connections'
+                : 'Showing all connections'
+            }
+          >
+            {filter.excludeInactive ? (
+              <ConnectedPlugsIcon />
+            ) : (
+              <DisconnectedPlugIcon />
+            )}
+          </IconButton>
+        }
+      >
+        {filter.excludeInactive
+          ? 'Showing active connections'
+          : 'Showing all connections'}
+      </Tooltip>
+    </div>
   );
 }
diff --git a/packages/compass-sidebar/src/components/use-filtered-connections.ts b/packages/compass-sidebar/src/components/use-filtered-connections.ts
@@ -388,16 +388,19 @@ function filteredConnectionsToSidebarConnection(
   return sidebarConnections;
 }
 
+export type ConnectionsFilter = {
+  regex: RegExp | null;
+  excludeInactive: boolean;
+};
+
 export const useFilteredConnections = ({
   connections,
-  filterRegex,
-  excludeInactive,
+  filter,
   fetchAllCollections,
   onDatabaseExpand,
 }: {
   connections: SidebarConnection[];
-  filterRegex: RegExp | null;
-  excludeInactive: boolean;
+  filter: ConnectionsFilter;
   fetchAllCollections: () => void;
   onDatabaseExpand: (connectionId: string, databaseId: string) => void;
 }): UseFilteredConnectionsHookResult => {
@@ -423,9 +426,9 @@ export const useFilteredConnections = ({
   // connections change often, but the effect only uses connections if the filter is active
   // so we use this conditional dependency to avoid too many calls
   const connectionsWhenFiltering =
-    (filterRegex || excludeInactive) && connections;
+    (filter.regex || filter.excludeInactive) && connections;
   useEffect(() => {
-    if (!filterRegex && !excludeInactive) {
+    if (!filter.regex && !filter.excludeInactive) {
       dispatch({ type: CLEAR_FILTER });
     } else if (connectionsWhenFiltering) {
       // the above check is extra just to please TS
@@ -438,13 +441,13 @@ export const useFilteredConnections = ({
       dispatch({
         type: FILTER_CONNECTIONS,
         connections: connectionsWhenFiltering,
-        filterRegex,
-        excludeInactive,
+        filterRegex: filter.regex,
+        excludeInactive: filter.excludeInactive,
       });
     }
   }, [
-    filterRegex,
-    excludeInactive,
+    filter.regex,
+    filter.excludeInactive,
     connectionsWhenFiltering,
     fetchAllCollections,
   ]);
