Show icon button to the right of NavigationItemsFilter

Author: kraenhansen

packages/compass-sidebar/src/components/multiple-connections/connections-navigation.tsx

@@ -12,6 +12,10 @@ 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';
@@ -80,11 +84,19 @@ const connectionCountStyles = css({
   marginLeft: spacing[100],
 });
 
-const searchStyles = css({
+const filterContainerStyles = css({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  gap: spacing[200],
   paddingLeft: spacing[400],
   paddingRight: spacing[400],
 });
 
+const searchFormStyles = css({
+  flexGrow: 1,
+});
+
 const noDeploymentStyles = css({
   paddingLeft: spacing[400],
   paddingRight: spacing[400],
@@ -112,7 +124,9 @@ type ConnectionsNavigationComponentProps = {
   connectionsWithStatus: ReturnType<typeof useConnectionsWithStatus>;
   activeWorkspace: WorkspaceTab | null;
   filterRegex: RegExp | null;
+  excludeInactive: boolean;
   onFilterChange(regex: RegExp | null): void;
+  onToggleExcludeInactive(): void;
   onConnect(info: ConnectionInfo): void;
   onNewConnection(): void;
   onEditConnection(info: ConnectionInfo): void;
@@ -154,10 +168,12 @@ const ConnectionsNavigation: React.FC<ConnectionsNavigationProps> = ({
   connectionsWithStatus,
   activeWorkspace,
   filterRegex,
+  excludeInactive,
   instances,
   databases,
   isPerformanceTabSupported,
   onFilterChange,
+  onToggleExcludeInactive,
   onConnect,
   onNewConnection,
   onEditConnection,
@@ -502,11 +518,37 @@ const ConnectionsNavigation: React.FC<ConnectionsNavigationProps> = ({
       </div>
       {connections.length > 0 && (
         <>
-          <NavigationItemsFilter
-            searchInputClassName={searchStyles}
-            placeholder="Search connections"
-            onFilterChange={onFilterChange}
-          />
+          <div className={filterContainerStyles}>
+            <NavigationItemsFilter
+              className={searchFormStyles}
+              placeholder="Search connections"
+              onFilterChange={onFilterChange}
+            />
+            <Tooltip
+              justify="middle"
+              align="bottom"
+              trigger={
+                <IconButton
+                  onClick={onToggleExcludeInactive}
+                  aria-label={
+                    excludeInactive
+                      ? 'Showing active connections'
+                      : 'Showing all connections'
+                  }
+                >
+                  {excludeInactive ? (
+                    <ConnectedPlugsIcon />
+                  ) : (
+                    <DisconnectedPlugIcon />
+                  )}
+                </IconButton>
+              }
+            >
+              {excludeInactive
+                ? 'Showing active connections'
+                : 'Showing all connections'}
+            </Tooltip>
+          </div>
           <ConnectionsNavigationTree
             connections={filtered || connections}
             activeWorkspace={activeWorkspace}

packages/compass-sidebar/src/components/multiple-connections/sidebar.tsx

@@ -103,6 +103,10 @@ export function MultipleConnectionSidebar({
     useState<RegExp | null>(null);
   const [connectionInfoModalConnectionId, setConnectionInfoModalConnectionId] =
     useState<string | undefined>();
+  const [excludeInactive, setExcludeInactiveConnections] = useState(false);
+  const toggleExcludeInactiveConnections = useCallback(() => {
+    setExcludeInactiveConnections((previous) => !previous);
+  }, []);
 
   const formPreferences = useConnectionFormPreferences();
   const maybeProtectConnectionString = useMaybeProtectConnectionString();
@@ -204,7 +208,9 @@ export function MultipleConnectionSidebar({
           connectionsWithStatus={connectionsWithStatus}
           activeWorkspace={activeWorkspace}
           filterRegex={activeConnectionsFilterRegex}
+          excludeInactive={excludeInactive}
           onFilterChange={onActiveConnectionFilterChange}
+          onToggleExcludeInactive={toggleExcludeInactiveConnections}
           onConnect={(connectionInfo) => {
             void connect(connectionInfo);
           }}

packages/compass-sidebar/src/components/navigation-items-filter.tsx

@@ -6,13 +6,13 @@ export default function NavigationItemsFilter({
   ariaLabel = 'Search',
   title = 'Search',
   onFilterChange,
-  searchInputClassName,
+  className,
 }: {
   placeholder?: string;
   ariaLabel?: string;
   title?: string;
-  searchInputClassName?: string;
   onFilterChange(regex: RegExp | null): void;
+  className?: string;
 }): React.ReactElement {
   const onChange = useCallback(
     (event) => {
@@ -37,15 +37,14 @@ export default function NavigationItemsFilter({
   }, []);
 
   return (
-    <form noValidate onSubmit={onSubmit}>
+    <form noValidate className={className} onSubmit={onSubmit}>
       <TextInput
         data-testid="sidebar-filter-input"
         placeholder={placeholder}
         type="search"
         aria-label={ariaLabel}
         title={title}
         onChange={onChange}
-        className={searchInputClassName}
       />
     </form>
   );