Add support for search sidebar panel via feature flag

hypothesis · Dec 6, 2023 · 400d340 · 400d340
1 parent 652bcfa
commit 400d340
Show file tree

Hide file tree

Showing 24 changed files with 1,514 additions and 33 deletions.
diff --git a/src/sidebar/components/HypothesisApp.tsx b/src/sidebar/components/HypothesisApp.tsx
@@ -22,6 +22,7 @@ import SidebarView from './SidebarView';
 import StreamView from './StreamView';
 import ToastMessages from './ToastMessages';
 import TopBar from './TopBar';
+import SearchPanel from './search/SearchPanel';
 
 export type HypothesisAppProps = {
   auth: AuthService;
@@ -69,6 +70,8 @@ function HypothesisApp({
   const showShareButton =
     !isThirdParty || exportAnnotations || importAnnotations;
 
+  const searchPanelEnabled = store.isFeatureEnabled('search_panel');
+
   const login = async () => {
     if (serviceConfig(settings)) {
       // Let the host page handle the login request
@@ -168,6 +171,7 @@ function HypothesisApp({
       <div className="container">
         <ToastMessages />
         <HelpPanel />
+        {searchPanelEnabled && <SearchPanel />}
         {showShareButton && (
           <ShareDialog
             shareTab={!isThirdParty}

diff --git a/src/sidebar/components/SidebarPanel.tsx b/src/sidebar/components/SidebarPanel.tsx
@@ -1,3 +1,4 @@
+import type { DialogProps } from '@hypothesis/frontend-shared';
 import { Dialog, Slider } from '@hypothesis/frontend-shared';
 import type { IconComponent } from '@hypothesis/frontend-shared/lib/types';
 import type { ComponentChildren } from 'preact';
@@ -22,6 +23,7 @@ export type SidebarPanelProps = {
   onActiveChanged?: (active: boolean) => void;
   /** What Dialog variant to use */
   variant?: 'panel' | 'custom';
+  initialFocus?: DialogProps['initialFocus'];
 };
 
 /**
@@ -35,6 +37,7 @@ export default function SidebarPanel({
   title,
   variant = 'panel',
   onActiveChanged,
+  initialFocus,
 }: SidebarPanelProps) {
   const store = useSidebarStore();
   const panelIsActive = store.isSidebarPanelOpen(panelName);
@@ -61,6 +64,7 @@ export default function SidebarPanel({
     <>
       {panelIsActive && (
         <Dialog
+          initialFocus={initialFocus}
           restoreFocus
           ref={panelElement}
           classes="mb-4"

diff --git a/src/sidebar/components/SidebarView.tsx b/src/sidebar/components/SidebarView.tsx
@@ -6,13 +6,14 @@ import type { FrameSyncService } from '../services/frame-sync';
 import type { LoadAnnotationsService } from '../services/load-annotations';
 import type { StreamerService } from '../services/streamer';
 import { useSidebarStore } from '../store';
-import FilterStatus from './FilterStatus';
 import LoggedOutMessage from './LoggedOutMessage';
 import LoginPromptPanel from './LoginPromptPanel';
 import SelectionTabs from './SelectionTabs';
 import SidebarContentError from './SidebarContentError';
 import ThreadList from './ThreadList';
 import { useRootThread } from './hooks/use-root-thread';
+import FilterStatus from './old-search/FilterStatus';
+import FilterAnnotationsStatus from './search/FilterAnnotationsStatus';
 
 export type SidebarViewProps = {
   onLogin: () => void;
@@ -66,7 +67,8 @@ function SidebarView({
   const hasContentError =
     hasDirectLinkedAnnotationError || hasDirectLinkedGroupError;
 
-  const showFilterStatus = !hasContentError;
+  const searchPanelEnabled = store.isFeatureEnabled('search_panel');
+  const showFilterStatus = !hasContentError && !searchPanelEnabled;
   const showTabs = !hasContentError && !hasAppliedFilter;
 
   // Show a CTA to log in if successfully viewing a direct-linked annotation
@@ -132,6 +134,7 @@ function SidebarView({
     <div>
       <h2 className="sr-only">Annotations</h2>
       {showFilterStatus && <FilterStatus />}
+      {searchPanelEnabled && <FilterAnnotationsStatus />}
       <LoginPromptPanel onLogin={onLogin} onSignUp={onSignUp} />
       {hasDirectLinkedAnnotationError && (
         <SidebarContentError

diff --git a/src/sidebar/components/TopBar.tsx b/src/sidebar/components/TopBar.tsx
@@ -10,10 +10,11 @@ import { useSidebarStore } from '../store';
 import GroupList from './GroupList';
 import PendingUpdatesButton from './PendingUpdatesButton';
 import PressableIconButton from './PressableIconButton';
-import SearchInput from './SearchInput';
 import SortMenu from './SortMenu';
-import StreamSearchInput from './StreamSearchInput';
 import UserMenu from './UserMenu';
+import SearchInput from './old-search/SearchInput';
+import SearchIconButton from './search/SearchIconButton';
+import StreamSearchInput from './search/StreamSearchInput';
 
 export type TopBarProps = {
   showShareButton: boolean;
@@ -54,6 +55,7 @@ function TopBar({
   const filterQuery = store.filterQuery();
   const isLoggedIn = store.isLoggedIn();
   const hasFetchedProfile = store.hasFetchedProfile();
+  const searchPanelEnabled = store.isFeatureEnabled('search_panel');
 
   const toggleSharePanel = () => {
     store.toggleSidebarPanel('shareGroupAnnotations');
@@ -98,10 +100,13 @@ function TopBar({
           {isSidebar && (
             <>
               <PendingUpdatesButton />
-              <SearchInput
-                query={filterQuery || null}
-                onSearch={store.setFilterQuery}
-              />
+              {!searchPanelEnabled && (
+                <SearchInput
+                  query={filterQuery || null}
+                  onSearch={store.setFilterQuery}
+                />
+              )}
+              {searchPanelEnabled && <SearchIconButton />}
               <SortMenu />
               {showShareButton && (
                 <PressableIconButton

diff --git a/src/sidebar/components/FilterStatus.tsx → ...ar/components/old-search/FilterStatus.tsx b/src/sidebar/components/FilterStatus.tsx → ...ar/components/old-search/FilterStatus.tsx
@@ -8,9 +8,9 @@ import {
 import classnames from 'classnames';
 import { useMemo } from 'preact/hooks';
 
-import { countVisible } from '../helpers/thread';
-import { useSidebarStore } from '../store';
-import { useRootThread } from './hooks/use-root-thread';
+import { countVisible } from '../../helpers/thread';
+import { useSidebarStore } from '../../store';
+import { useRootThread } from '../hooks/use-root-thread';
 
 type FilterStatusMessageProps = {
   /**

diff --git a/src/sidebar/components/SearchInput.tsx → ...bar/components/old-search/SearchInput.tsx b/src/sidebar/components/SearchInput.tsx → ...bar/components/old-search/SearchInput.tsx
@@ -8,9 +8,9 @@ import classnames from 'classnames';
 import type { RefObject } from 'preact';
 import { useCallback, useRef, useState } from 'preact/hooks';
 
-import { useShortcut } from '../../shared/shortcut';
-import { isMacOS } from '../../shared/user-agent';
-import { useSidebarStore } from '../store';
+import { useShortcut } from '../../../shared/shortcut';
+import { isMacOS } from '../../../shared/user-agent';
+import { useSidebarStore } from '../../store';
 
 /**
  * Respond to keydown events on the document (shortcut keys):

diff --git a/...ebar/components/test/FilterStatus-test.js → ...ents/old-search/test/FilterStatus-test.js b/...ebar/components/test/FilterStatus-test.js → ...ents/old-search/test/FilterStatus-test.js
@@ -40,9 +40,9 @@ describe('FilterStatus', () => {
 
     $imports.$mock(mockImportedComponents());
     $imports.$mock({
-      './hooks/use-root-thread': { useRootThread: fakeUseRootThread },
-      '../store': { useSidebarStore: () => fakeStore },
-      '../helpers/thread': fakeThreadUtil,
+      '../hooks/use-root-thread': { useRootThread: fakeUseRootThread },
+      '../../store': { useSidebarStore: () => fakeStore },
+      '../../helpers/thread': fakeThreadUtil,
     });
   });
 

diff --git a/...debar/components/test/SearchInput-test.js → ...nents/old-search/test/SearchInput-test.js b/...debar/components/test/SearchInput-test.js → ...nents/old-search/test/SearchInput-test.js
@@ -34,8 +34,8 @@ describe('SearchInput', () => {
 
     $imports.$mock(mockImportedComponents());
     $imports.$mock({
-      '../store': { useSidebarStore: () => fakeStore },
-      '../../shared/user-agent': {
+      '../../store': { useSidebarStore: () => fakeStore },
+      '../../../shared/user-agent': {
         isMacOS: fakeIsMacOS,
       },
     });