Search bar for settings

app/ide-desktop/lib/dashboard/src/App.tsx

@@ -54,6 +54,7 @@ import LoggerProvider from '#/providers/LoggerProvider'
 import type * as loggerProvider from '#/providers/LoggerProvider'
 import ModalProvider from '#/providers/ModalProvider'
 import * as navigator2DProvider from '#/providers/Navigator2DProvider'
+import SearchBarProvider from '#/providers/SearchBarProvider'
 import SessionProvider from '#/providers/SessionProvider'
 
 import ConfirmRegistration from '#/pages/authentication/ConfirmRegistration'
@@ -408,6 +409,7 @@ function AppRouter(props: AppRouterProps) {
     </router.Routes>
   )
   let result = routes
+  result = <SearchBarProvider>{result}</SearchBarProvider>
   result = <InputBindingsProvider inputBindings={inputBindings}>{result}</InputBindingsProvider>
   result = <ModalProvider>{result}</ModalProvider>
   result = (

app/ide-desktop/lib/dashboard/src/components/dashboard/PermissionDisplay.tsx

@@ -14,7 +14,7 @@ import * as permissionsModule from '#/utilities/permissions'
 export interface PermissionDisplayProps extends Readonly<React.PropsWithChildren> {
   readonly action: permissionsModule.PermissionAction
   readonly className?: string
-  readonly onPress?: (event: aria.PressEvent) => void
+  readonly onPress?: ((event: aria.PressEvent) => void) | null
 }
 
 /** Colored border around icons and text indicating permissions. */
@@ -44,6 +44,7 @@ export default function PermissionDisplay(props: PermissionDisplayProps) {
     case permissionsModule.Permission.view: {
       return (
         <UnstyledButton
+          isDisabled={!onPress}
           className={`relative inline-block whitespace-nowrap rounded-full ${className ?? ''}`}
           onPress={onPress ?? (() => {})}
         >

app/ide-desktop/lib/dashboard/src/components/dashboard/column/SharedWithColumn.tsx

@@ -27,7 +27,9 @@ import * as uniqueString from '#/utilities/uniqueString'
 
 /** The type of the `state` prop of a {@link SharedWithColumn}. */
 interface SharedWithColumnStateProp
-  extends Pick<column.AssetColumnProps['state'], 'category' | 'dispatchAssetEvent' | 'setQuery'> {}
+  extends Pick<column.AssetColumnProps['state'], 'category' | 'dispatchAssetEvent'> {
+  readonly setQuery: column.AssetColumnProps['state']['setQuery'] | null
+}
 
 /** Props for a {@link SharedWithColumn}. */
 interface SharedWithColumnPropsInternal extends Pick<column.AssetColumnProps, 'item' | 'setItem'> {
@@ -67,11 +69,20 @@ export default function SharedWithColumn(props: SharedWithColumnPropsInternal) {
         <PermissionDisplay
           key={otherUser.user.userId}
           action={otherUser.permission}
-          onPress={event => {
-            setQuery(oldQuery =>
-              oldQuery.withToggled('owners', 'negativeOwners', otherUser.user.name, event.shiftKey)
-            )
-          }}
+          onPress={
+            setQuery == null
+              ? null
+              : event => {
+                  setQuery(oldQuery =>
+                    oldQuery.withToggled(
+                      'owners',
+                      'negativeOwners',
+                      otherUser.user.name,
+                      event.shiftKey
+                    )
+                  )
+                }
+          }
         >
           {otherUser.user.name}
         </PermissionDisplay>

app/ide-desktop/lib/dashboard/src/components/styled/settings/SettingsInput.tsx → app/ide-desktop/lib/dashboard/src/components/styled/SettingsInput.tsx

@@ -16,6 +16,7 @@ import SvgMask from '#/components/SvgMask'
 
 /** Props for an {@link SettingsInput}. */
 export interface SettingsInputProps {
+  readonly isDisabled?: boolean
   readonly type?: string
   readonly placeholder?: string
   readonly autoComplete?: React.HTMLInputAutoCompleteAttribute
@@ -25,7 +26,7 @@ export interface SettingsInputProps {
 
 /** A styled input specific to settings pages. */
 function SettingsInput(props: SettingsInputProps, ref: React.ForwardedRef<HTMLInputElement>) {
-  const { type, placeholder, autoComplete, onChange, onSubmit } = props
+  const { isDisabled = false, type, placeholder, autoComplete, onChange, onSubmit } = props
   const focusChildProps = focusHooks.useFocusChild()
   // This is SAFE. The value of this context is never a `SlottedContext`.
   // eslint-disable-next-line no-restricted-syntax
@@ -71,6 +72,7 @@ function SettingsInput(props: SettingsInputProps, ref: React.ForwardedRef<HTMLIn
                 className:
                   'settings-value w-full rounded-full bg-transparent font-bold placeholder-black/30 transition-colors invalid:border invalid:border-red-700 hover:bg-selected-frame focus:bg-selected-frame',
                 ...(type == null ? {} : { type: isShowingPassword ? 'text' : type }),
+                disabled: isDisabled,
                 size: 1,
                 autoComplete,
                 placeholder,

app/ide-desktop/lib/dashboard/src/hooks/toastAndLogHooks.ts

@@ -10,6 +10,13 @@ import * as textProvider from '#/providers/TextProvider'
 
 import * as errorModule from '#/utilities/error'
 
+// ===========================
+// === ToastAndLogCallback ===
+// ===========================
+
+/** The type of the `toastAndLog` function returned by {@link useToastAndLog}. */
+export type ToastAndLogCallback = ReturnType<typeof useToastAndLog>
+
 // ======================
 // === useToastAndLog ===
 // ======================

app/ide-desktop/lib/dashboard/src/layouts/AssetPanel.tsx

@@ -15,7 +15,6 @@ import UnstyledButton from '#/components/UnstyledButton'
 import * as backend from '#/services/Backend'
 
 import * as array from '#/utilities/array'
-import type AssetQuery from '#/utilities/AssetQuery'
 import type * as assetTreeNode from '#/utilities/AssetTreeNode'
 import LocalStorage from '#/utilities/LocalStorage'
 
@@ -58,23 +57,14 @@ export interface AssetPanelRequiredProps {
 /** Props for an {@link AssetPanel}. */
 export interface AssetPanelProps extends AssetPanelRequiredProps {
   readonly isReadonly?: boolean
-  readonly setQuery: React.Dispatch<React.SetStateAction<AssetQuery>>
   readonly category: Category
   readonly labels: backend.Label[]
   readonly dispatchAssetEvent: (event: assetEvent.AssetEvent) => void
 }
 
 /** A panel containing the description and settings for an asset. */
 export default function AssetPanel(props: AssetPanelProps) {
-  const {
-    item,
-    setItem,
-    setQuery,
-    category,
-    labels,
-    dispatchAssetEvent,
-    isReadonly = false,
-  } = props
+  const { item, setItem, category, labels, dispatchAssetEvent, isReadonly = false } = props
 
   const { getText } = textProvider.useText()
   const { localStorage } = localStorageProvider.useLocalStorage()
@@ -149,7 +139,6 @@ export default function AssetPanel(props: AssetPanelProps) {
               setItem={setItem}
               category={category}
               labels={labels}
-              setQuery={setQuery}
               dispatchAssetEvent={dispatchAssetEvent}
             />
           )}

app/ide-desktop/lib/dashboard/src/layouts/AssetProperties.tsx

@@ -25,7 +25,6 @@ import UnstyledButton from '#/components/UnstyledButton'
 
 import * as backendModule from '#/services/Backend'
 
-import type AssetQuery from '#/utilities/AssetQuery'
 import type * as assetTreeNode from '#/utilities/AssetTreeNode'
 import * as object from '#/utilities/object'
 import * as permissions from '#/utilities/permissions'
@@ -40,21 +39,13 @@ export interface AssetPropertiesProps {
   readonly setItem: React.Dispatch<React.SetStateAction<assetTreeNode.AnyAssetTreeNode>>
   readonly category: Category
   readonly labels: backendModule.Label[]
-  readonly setQuery: React.Dispatch<React.SetStateAction<AssetQuery>>
   readonly dispatchAssetEvent: (event: assetEvent.AssetEvent) => void
   readonly isReadonly?: boolean
 }
 
 /** Display and modify the properties of an asset. */
 export default function AssetProperties(props: AssetPropertiesProps) {
-  const {
-    item: itemRaw,
-    setItem: setItemRaw,
-    category,
-    labels,
-    setQuery,
-    isReadonly = false,
-  } = props
+  const { item: itemRaw, setItem: setItemRaw, category, labels, isReadonly = false } = props
   const { dispatchAssetEvent } = props
 
   const { user } = authProvider.useNonPartialUserSession()
@@ -215,7 +206,7 @@ export default function AssetProperties(props: AssetPropertiesProps) {
                   isReadonly={isReadonly}
                   item={item}
                   setItem={setItem}
-                  state={{ category, dispatchAssetEvent, setQuery }}
+                  state={{ category, dispatchAssetEvent, setQuery: () => {} }}
                 />
               </td>
             </tr>

app/ide-desktop/lib/dashboard/src/layouts/AssetsTable.tsx

@@ -14,6 +14,7 @@ import * as inputBindingsProvider from '#/providers/InputBindingsProvider'
 import * as localStorageProvider from '#/providers/LocalStorageProvider'
 import * as modalProvider from '#/providers/ModalProvider'
 import * as navigator2DProvider from '#/providers/Navigator2DProvider'
+import * as searchBarProvider from '#/providers/SearchBarProvider'
 import * as textProvider from '#/providers/TextProvider'
 
 import type * as assetEvent from '#/events/assetEvent'
@@ -23,8 +24,10 @@ import AssetListEventType from '#/events/AssetListEventType'
 
 import type * as assetPanel from '#/layouts/AssetPanel'
 import type * as assetSearchBar from '#/layouts/AssetSearchBar'
+import AssetSearchBar from '#/layouts/AssetSearchBar'
 import AssetsTableContextMenu from '#/layouts/AssetsTableContextMenu'
 import Category from '#/layouts/CategorySwitcher/Category'
+import * as pageSwitcher from '#/layouts/PageSwitcher'
 
 import * as aria from '#/components/aria'
 import type * as assetRow from '#/components/dashboard/AssetRow'
@@ -349,8 +352,8 @@ export interface AssetsTableProps {
   readonly setQuery: React.Dispatch<React.SetStateAction<AssetQuery>>
   readonly setCanDownload: (canDownload: boolean) => void
   readonly category: Category
+  readonly page: pageSwitcher.Page
   readonly allLabels: Map<backendModule.LabelName, backendModule.Label>
-  readonly setSuggestions: (suggestions: assetSearchBar.Suggestion[]) => void
   readonly initialProjectName: string | null
   readonly projectStartupInfo: backendModule.ProjectStartupInfo | null
   readonly deletedLabelNames: Set<backendModule.LabelName>
@@ -375,8 +378,8 @@ export interface AssetsTableProps {
 
 /** The table of project assets. */
 export default function AssetsTable(props: AssetsTableProps) {
-  const { hidden, hideRows, query, setQuery, setCanDownload, category, allLabels } = props
-  const { setSuggestions, deletedLabelNames, initialProjectName, projectStartupInfo } = props
+  const { hidden, hideRows, query, setQuery, setCanDownload, category, page, allLabels } = props
+  const { deletedLabelNames, initialProjectName, projectStartupInfo } = props
   const { queuedAssetEvents: rawQueuedAssetEvents } = props
   const { assetListEvents, dispatchAssetListEvent, assetEvents, dispatchAssetEvent } = props
   const { setAssetPanelProps, doOpenEditor, doCloseEditor: rawDoCloseEditor, doCreateLabel } = props
@@ -385,6 +388,7 @@ export default function AssetsTable(props: AssetsTableProps) {
   const { user, accessToken } = authProvider.useNonPartialUserSession()
   const { backend } = backendProvider.useBackend()
   const { setModal, unsetModal } = modalProvider.useSetModal()
+  const { setSearchBar, unsetSearchBar } = searchBarProvider.useSetSearchBar('AssetsTable')
   const { localStorage } = localStorageProvider.useLocalStorage()
   const { getText } = textProvider.useText()
   const inputBindings = inputBindingsProvider.useInputBindings()
@@ -393,6 +397,7 @@ export default function AssetsTable(props: AssetsTableProps) {
   const [initialized, setInitialized] = React.useState(false)
   const [isLoading, setIsLoading] = React.useState(true)
   const [enabledColumns, setEnabledColumns] = React.useState(columnUtils.DEFAULT_ENABLED_COLUMNS)
+  const [suggestions, setSuggestions] = React.useState<assetSearchBar.Suggestion[]>([])
   const [sortInfo, setSortInfo] =
     React.useState<sorting.SortInfo<columnUtils.SortableColumn> | null>(null)
   const [selectedKeys, setSelectedKeysRaw] = React.useState<ReadonlySet<backendModule.AssetId>>(
@@ -644,6 +649,37 @@ export default function AssetsTable(props: AssetsTableProps) {
     }
   }, [targetDirectoryNodeRef, selectedKeys])
 
+  React.useEffect(() => {
+    return () => {
+      unsetSearchBar()
+    }
+  }, [/* should never change */ unsetSearchBar])
+
+  React.useEffect(() => {
+    if (page === pageSwitcher.Page.drive || page === pageSwitcher.Page.home) {
+      setSearchBar(
+        <AssetSearchBar
+          isCloud={isCloud}
+          query={query}
+          setQuery={setQuery}
+          labels={[...allLabels.values()]}
+          suggestions={suggestions}
+        />
+      )
+    } else {
+      unsetSearchBar()
+    }
+  }, [
+    page,
+    isCloud,
+    query,
+    setQuery,
+    allLabels,
+    suggestions,
+    /* should never change */ setSearchBar,
+    /* should never change */ unsetSearchBar,
+  ])
+
   React.useEffect(() => {
     const nodeToSuggestion = (
       node: assetTreeNode.AnyAssetTreeNode,