Refactor to a popover

Author: kraenhansen

packages/compass-sidebar/src/components/connections-filter-popover.tsx

@@ -0,0 +1,104 @@
+import React, { useCallback, type PropsWithChildren } from 'react';
+
+import {
+  css,
+  Icon,
+  IconButton,
+  InteractivePopover,
+  Label,
+  Overline,
+  spacing,
+  Toggle,
+  Tooltip,
+  useId,
+} from '@mongodb-js/compass-components';
+import type { ConnectionsFilter } from './use-filtered-connections';
+
+const containerStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  padding: spacing[300],
+  minWidth: 270,
+});
+
+const closeButtonStyles = css({
+  display: 'none',
+});
+
+const groupStyles = css({
+  display: 'flex',
+  flexDirection: 'row',
+  gap: spacing[200],
+  marginTop: spacing[200],
+});
+
+type ConnectionsFilterPopoverProps = PropsWithChildren<{
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  filter: ConnectionsFilter;
+  onFilterChange(
+    updater: (filter: ConnectionsFilter) => ConnectionsFilter
+  ): void;
+}>;
+
+export default function ConnectionsFilterPopover({
+  open,
+  setOpen,
+  filter,
+  onFilterChange,
+}: ConnectionsFilterPopoverProps) {
+  const onExcludeInactiveChange = useCallback(
+    (excludeInactive: boolean) => {
+      onFilterChange((filter) => ({
+        ...filter,
+        excludeInactive,
+      }));
+    },
+    [onFilterChange]
+  );
+
+  const excludeInactiveId = useId('Sort by');
+
+  return (
+    <InteractivePopover
+      open={open}
+      setOpen={setOpen}
+      closeButtonClassName={closeButtonStyles}
+      containerClassName={containerStyles}
+      trigger={({ onClick, children, ref }) => (
+        <>
+          <Tooltip
+            align="right"
+            enabled={!open}
+            trigger={
+              <IconButton
+                onClick={onClick}
+                active={open}
+                aria-label="Filter connections"
+                ref={ref as React.Ref<unknown>}
+              >
+                {/* TODO: Show a small blue circle when filter.excludeInactive is enabled */}
+                <Icon glyph="Filter" />
+              </IconButton>
+            }
+          >
+            Filter connections
+          </Tooltip>
+          {children}
+        </>
+      )}
+    >
+      <Overline>Filter Options</Overline>
+      <div className={groupStyles}>
+        <Toggle
+          aria-labelledby={excludeInactiveId}
+          checked={filter.excludeInactive}
+          onChange={onExcludeInactiveChange}
+          size="small"
+        />
+        <Label htmlFor={excludeInactiveId}>Show only active connections</Label>
+      </div>
+    </InteractivePopover>
+  );
+}

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

@@ -1,14 +1,7 @@
-import React, { useCallback } from 'react';
-import {
-  ConnectedPlugsIcon,
-  css,
-  DisconnectedPlugIcon,
-  IconButton,
-  spacing,
-  TextInput,
-  Tooltip,
-} from '@mongodb-js/compass-components';
+import React, { useCallback, useState } from 'react';
+import { css, spacing, TextInput } from '@mongodb-js/compass-components';
 import type { ConnectionsFilter } from './use-filtered-connections';
+import ConnectionsFilterPopover from './connections-filter-popover';
 
 const filterContainerStyles = css({
   display: 'flex',
@@ -54,12 +47,7 @@ export default function NavigationItemsFilter({
     [onFilterChange]
   );
 
-  const toggleExcludeInactive = useCallback(() => {
-    onFilterChange((filter) => ({
-      ...filter,
-      excludeInactive: !filter.excludeInactive,
-    }));
-  }, [onFilterChange]);
+  const [isPopoverOpen, setPopoverOpen] = useState(false);
 
   const onSubmit = useCallback((evt) => {
     evt.preventDefault();
@@ -78,30 +66,12 @@ export default function NavigationItemsFilter({
           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>
+      <ConnectionsFilterPopover
+        open={isPopoverOpen}
+        setOpen={setPopoverOpen}
+        filter={filter}
+        onFilterChange={onFilterChange}
+      />
     </div>
   );
 }