Complete permission-aware native search indexing

webui/src/features/search/SearchPage.tsx

@@ -9,7 +9,10 @@ import {
 } from "react";
 import { useSearchParams } from "react-router";
 import {
+  Button,
+  DocumentationHelpLink,
   DismissibleAlert,
+  IconButton,
   LoadingIndicator,
   PageScrollViewport,
   useGuardedNavigate,
@@ -216,12 +219,12 @@ export default function SearchPage({ settings }: PlatformRouteContext) {
             placeholder="Search"
             autoFocus
           />
-          <button type="submit">Search</button>
+          <Button type="submit" variant="primary">Search</Button>
         </form>
         <div className="search-filter-menu" ref={filtersRef}>
-          <button
+          <Button
             type="button"
-            className={`btn search-filter-trigger${activeFilterCount ? " is-active" : ""}`}
+            className={`search-filter-trigger${activeFilterCount ? " is-active" : ""}`}
             aria-haspopup="dialog"
             aria-expanded={filtersOpen}
             onClick={() => setFiltersOpen((current) => !current)}>
@@ -232,18 +235,17 @@ export default function SearchPage({ settings }: PlatformRouteContext) {
                 {activeFilterCount}
               </span>
             }
-          </button>
+          </Button>
           {filtersOpen &&
           <div className="search-filter-popover" role="dialog" aria-label="Filter search results">
               <div className="search-filter-popover-header">
                 <strong>Filter results</strong>
-                <button
-                  type="button"
-                  className="btn btn-ghost icon-button"
-                  aria-label="Close filters"
-                  onClick={() => setFiltersOpen(false)}>
-                  <X size={16} />
-                </button>
+                <IconButton
+                  label="Close filters"
+                  icon={<X size={16} />}
+                  variant="ghost"
+                  onClick={() => setFiltersOpen(false)}
+                />
               </div>
               <fieldset className="search-filter-group">
                 <legend>Modules</legend>
@@ -282,18 +284,22 @@ export default function SearchPage({ settings }: PlatformRouteContext) {
                 </div>
               </fieldset>
               <div className="search-filter-popover-footer">
-                <button
+                <Button
                   type="button"
-                  className="btn btn-ghost"
+                  variant="ghost"
                   disabled={activeFilterCount === 0}
                   onClick={clearFilters}>
                   Clear filters
-                </button>
+                </Button>
               </div>
             </div>
           }
         </div>
         {loading && <LoadingIndicator size="sm" label="Searching" />}
+        <DocumentationHelpLink
+          reference={{ topicId: "search.global-and-contextual", documentationType: "user" }}
+          label="Open search documentation"
+        />
         {activeFilterCount > 0 &&
         <div className="search-active-filters" aria-label="Active search filters">
             {modules.map((moduleId) =>
@@ -359,14 +365,15 @@ export default function SearchPage({ settings }: PlatformRouteContext) {
           )}
         </div>
         {response?.next_cursor &&
-        <button
+        <Button
           type="button"
+          variant="secondary"
           className="search-load-more"
           disabled={loading}
           onClick={() => loadResults(response.next_cursor ?? undefined)}>
             <ChevronDown size={16} />
             <span>Load more</span>
-          </button>
+        </Button>
         }
       </PageScrollViewport>
     </main>