feat(svelte): Add support for creating search jobs from search results (#64308)

Closes srch-838

This commit extends the search progress popover and adds the search jobs
section.

In the React version the UI for the popover differs slightly when search
jobs are enabled vs not enabled.

I decided to ignore the differences and only impolemented the style used
for the 'search jobs enabled' version, which makes the popover a bit
more compact.

The logic for validating and creating a search job is encapsulated in a
class which makes it easy to conditionally show the search jobs UI.

Additional changes:

- Skipped items is now a list and uses `<details>` elements which is
semantically more correct. We loose the styling of the chevron but I
think that's OK.
- LoadingSpinner was updated to work inline.
- Logging was fixed (?) in the React version to send the correct
meta-data.
- Added integration tests for the search job popover behavior

## Test plan

Integration tests and manual testing.

Author: fkling

client/branded/src/search-ui/results/progress/StreamingProgressSkippedPopover.tsx

@@ -356,7 +356,7 @@ export const ExhaustiveSearchMessage: FC<ExhaustiveSearchMessageProps> = props =
         if (!validationLoading) {
             telemetryService.log('SearchJobsSearchFormShown', { validState }, { validState })
             telemetryRecorder.recordEvent('search.exhaustiveJobs', 'view', {
-                metadata: { validState: validState ? 1 : 0 },
+                metadata: { validState: validState === 'valid' ? 1 : 0 },
             })
         }
     }, [telemetryService, telemetryRecorder, validationError, validationLoading])

client/web-sveltekit/src/app.html

@@ -18,12 +18,14 @@
 
             window.context = Object.assign(
                 {},
-                // Injected window.context (via proxy or playwright) if available
+                // Injected window.context (via proxy) if available
                 window.context,
                 // Dev specific overwrites
                 {
                     sentryDNS: undefined,
                 },
+                // Playwright specific overwrites
+                window.playwrightContext
             )
             window.pageError = undefined
         </script>

client/web-sveltekit/src/lib/LoadingSpinner.stories.svelte

@@ -0,0 +1,55 @@
+<script lang="ts" context="module">
+    import { Story } from '@storybook/addon-svelte-csf'
+
+    import LoadingSpinner from './LoadingSpinner.svelte'
+
+    export const meta = {
+        component: LoadingSpinner,
+    }
+</script>
+
+<Story name="Default">
+    <h3>Default</h3>
+    <div class="wrapper">
+        <LoadingSpinner />
+    </div>
+
+    <h3>--size="2rem"</h3>
+    <div class="wrapper">
+        <LoadingSpinner --size="2rem" />
+    </div>
+
+    <h3>center={false}</h3>
+     <div class="wrapper">
+        <LoadingSpinner center={false} />
+    </div>
+
+    <h3>inline={true}</h3>
+    <div class="wrapper">
+        <LoadingSpinner inline />
+    </div>
+    <button>
+        <LoadingSpinner inline />
+        <span>Loading...</span>
+    </button>
+    <br />
+    <button style="font-size: 48px">
+        <LoadingSpinner inline />
+        <span>Loading...</span>
+    </button>
+</Story>
+
+<style lang="scss">
+    .wrapper {
+        display: flex;
+        margin: 1rem;
+        width: 10rem;
+        height: 10rem;
+        background-color: lightblue;
+    }
+
+    button span {
+        vertical-align: middle;
+    }
+</style>
+

client/web-sveltekit/src/lib/LoadingSpinner.svelte

@@ -3,8 +3,8 @@
     export let center = true
 </script>
 
-<div class:center>
-    <div class="loading-spinner" class:inline aria-label="loading" aria-live="polite" />
+<div class:center class:inline>
+    <div class="loading-spinner" aria-label="loading" aria-live="polite" />
 </div>
 
 <style lang="scss">
@@ -14,6 +14,11 @@
         align-items: center;
         flex: 1;
         justify-content: center;
+
+    }
+
+    .inline {
+        display: contents;
     }
 
     .loading-spinner {
@@ -28,13 +33,12 @@
 
         width: var(--size, 1rem);
         height: var(--size, 1rem);
-        &.inline {
+        .inline & {
             width: #{(16 / 14)}em;
             height: #{(16 / 14)}em;
 
-            vertical-align: bottom;
-            display: inline-flex;
-            align-items: center;
+            vertical-align: middle;
+            display: inline-block;
         }
 
         border-radius: 50%;

client/web-sveltekit/src/lib/Popover.svelte

@@ -16,6 +16,7 @@
     export let hoverDelay: number = 500
     export let hoverCloseDelay: number = 150
     export let closeOnEsc: boolean = true
+    export let flip: boolean = true
     export let trigger: HTMLElement | null = null
     export let target: HTMLElement | undefined = undefined
 
@@ -156,9 +157,9 @@
                 placement,
                 offset,
                 shift: { padding: 4 },
-                flip: {
+                flip: flip ? {
                     fallbackAxisSideDirection: 'start',
-                },
+                } : undefined,
             },
         }}
         on:click-outside={handleClickOutside}

client/web-sveltekit/src/routes/search/+page.svelte

@@ -40,6 +40,7 @@
         queryFromURL={data.queryFromURL}
         {queryState}
         selectedFilters={data.queryFilters}
+        searchJob={data.searchJob}
     />
 {:else}
     <SearchHome {queryState}>

client/web-sveltekit/src/routes/search/+page.ts

@@ -19,6 +19,7 @@ import type { PageLoad } from './$types'
 import DotcomFooterLinks from './DotcomFooterLinks.svelte'
 import { DefaultSearchContext } from './page.gql'
 import { queryExampleDotcom, queryExampleEnterprise } from './queryExamples'
+import { SearchJob } from './searchJob'
 
 type SearchStreamCacheEntry = Observable<AggregateStreamingSearchResults>
 
@@ -145,6 +146,9 @@ export const load: PageLoad = async ({ parent, url, depends }) => {
                 patternType,
                 searchMode,
             },
+            searchJob: window.context.searchJobsEnabled
+                ? new SearchJob(getGraphQLClient(), `${query} patternType:${patternType}`)
+                : undefined,
         }
     }
 

client/web-sveltekit/src/routes/search/SearchResults.svelte

@@ -45,6 +45,7 @@
 
     import PreviewPanel from './PreviewPanel.svelte'
     import SearchAlert from './SearchAlert.svelte'
+    import type { SearchJob } from './searchJob'
     import { getSearchResultComponent } from './searchResultFactory'
     import { setSearchResultsContext } from './searchResultsContext'
     import StreamingProgress from './StreamingProgress.svelte'
@@ -53,6 +54,7 @@
     export let queryFromURL: string
     export let selectedFilters: URLQueryFilter[]
     export let queryState: QueryStateStore
+    export let searchJob: SearchJob | undefined = undefined
 
     export function capture(): SearchResultsCapture {
         return $resultContainer?.scrollTop ?? 0
@@ -195,7 +197,7 @@
                             data-scope-button>Filters</Button
                         >
                     {/if}
-                    <StreamingProgress {state} progress={$stream.progress} on:submit={onResubmitQuery} />
+                    <StreamingProgress {state} progress={$stream.progress} on:submit={onResubmitQuery} {searchJob} />
                 </aside>
                 <div class="result-list" bind:this={$resultContainer}>
                     {#if $stream.alert}