Merge main into fix/test-elastic-nav

Author: itsalexcm

Directory.Packages.props

@@ -22,23 +22,23 @@
     <PackageVersion Include="AngleSharp" Version="1.4.0" />
     <PackageVersion Include="Aspire.Hosting" Version="13.0.0" />
     <PackageVersion Include="Aspire.Hosting.Testing" Version="13.0.0" />
-    <PackageVersion Include="AWSSDK.Core" Version="4.0.3.6" />
+    <PackageVersion Include="AWSSDK.Core" Version="4.0.3.8" />
     <PackageVersion Include="AWSSDK.DynamoDBv2" Version="4.0.10.5" />
-    <PackageVersion Include="AWSSDK.SQS" Version="4.0.2.9" />
+    <PackageVersion Include="AWSSDK.SQS" Version="4.0.2.11" />
     <PackageVersion Include="AWSSDK.S3" Version="4.0.16.2" />
     <PackageVersion Include="Elastic.OpenTelemetry" Version="1.1.0" />
     <PackageVersion Include="Microsoft.Extensions.Configuration.UserSecrets" Version="10.0.0" />
-    <PackageVersion Include="Microsoft.Extensions.Configuration.Abstractions" Version="10.0.0" />
+    <PackageVersion Include="Microsoft.Extensions.Configuration.Abstractions" Version="10.0.1" />
     <PackageVersion Include="Microsoft.Extensions.Telemetry.Abstractions" Version="10.0.0" />
     <PackageVersion Include="OpenTelemetry.Instrumentation.AspNetCore" Version="1.13.0" />
     <PackageVersion Include="Generator.Equals" Version="3.2.1" PrivateAssets="all" IncludeAssets="runtime; build; native; contentfiles; analyzers; buildtransitive" />
     <PackageVersion Include="KubernetesClient" Version="18.0.5" />
     <PackageVersion Include="Elastic.Aspire.Hosting.Elasticsearch" Version="9.3.0" />
     <PackageVersion Include="Elastic.Clients.Elasticsearch" Version="9.2.2" />
-    <PackageVersion Include="FakeItEasy" Version="8.3.0" />
+    <PackageVersion Include="FakeItEasy" Version="9.0.0" />
     <PackageVersion Include="Elastic.Ingest.Elasticsearch" Version="0.17.1" />
     <PackageVersion Include="InMemoryLogger" Version="1.0.66" />
-    <PackageVersion Include="MartinCostello.Logging.XUnit.v3" Version="0.6.0" />
+    <PackageVersion Include="MartinCostello.Logging.XUnit.v3" Version="0.7.0" />
     <PackageVersion Include="Microsoft.Extensions.DependencyInjection.Abstractions" Version="10.0.0" />
     <PackageVersion Include="Microsoft.OpenApi" Version="3.0.1" />
     <PackageVersion Include="TUnit" Version="0.25.21" />
@@ -100,7 +100,7 @@
     <PackageVersion Include="GitHubActionsTestLogger" Version="2.4.1" />
     <PackageVersion Include="JetBrains.Annotations" Version="2025.2.4" />
     <PackageVersion Include="Microsoft.AspNetCore.Mvc.Testing" Version="10.0.0" />
-    <PackageVersion Include="Microsoft.AspNetCore.TestHost" Version="10.0.0" />
+    <PackageVersion Include="Microsoft.AspNetCore.TestHost" Version="10.0.1" />
     <PackageVersion Include="Microsoft.NET.Test.Sdk" Version="18.0.1" />
     <PackageVersion Include="OpenTelemetry.Exporter.InMemory" Version="1.13.0" />
     <PackageVersion Include="System.IO.Abstractions.TestingHelpers" Version="22.1.0" />

config/versions.yml

@@ -3,7 +3,7 @@ versioning_systems:
   # Updates for Stack versions are manual
   stack: &stack
     base: 9.0
-    current: 9.2.3
+    current: 9.2.4
 
   # Using an unlikely high version
   # So that our logic that would display "planned" doesn't trigger
@@ -73,7 +73,7 @@ versioning_systems:
   # EDOTs
   edot-collector:
     base: 9.0
-    current: 9.2.3
+    current: 9.2.4
   edot-ios:
     base: 1.0
     current: 1.4.0
@@ -82,7 +82,7 @@ versioning_systems:
     current: 1.4.0
   edot-dotnet:
     base: 1.0
-    current: 1.2.0
+    current: 1.2.2
   edot-java:
     base: 1.0
     current: 1.8.0
@@ -149,7 +149,7 @@ versioning_systems:
     current: 9.2.1
   elasticsearch-client-java:
     base: 9.0
-    current: 9.2.3
+    current: 9.2.4
   elasticsearch-client-javascript:
     base: 9.0
     current: 9.2.0

docs/syntax/applies-switch.md

@@ -9,11 +9,11 @@ The applies-switch directive creates tabbed content where each tab displays an a
 
 ::::{applies-switch}
 
-:::{applies-item} stack:
+:::{applies-item} stack: ga 9.0+
 Content for Stack
 :::
 
-:::{applies-item} serverless:
+:::{applies-item} serverless: ga
 Content for Serverless
 :::
 
@@ -25,11 +25,11 @@ Content for Serverless
 ```markdown
 ::::{applies-switch}
 
-:::{applies-item} stack:
+:::{applies-item} stack: ga 9.0+
 Content for Stack
 :::
 
-:::{applies-item} serverless:
+:::{applies-item} serverless: ga
 Content for Serverless
 :::
 
@@ -48,11 +48,11 @@ This is useful when content applies to multiple deployment types or versions sim
 
 ::::{applies-switch}
 
-:::{applies-item} { ece:, ess: }
+:::{applies-item} { ece: ga 4.0+, ess: ga }
 Content for ECE and ECH
 :::
 
-:::{applies-item} serverless:
+:::{applies-item} serverless: ga
 Content for Serverless
 :::
 
@@ -64,11 +64,11 @@ Content for Serverless
 ```markdown
 ::::{applies-switch}
 
-:::{applies-item} { ece:, ess: }
+:::{applies-item} { ece: ga 4.0+, ess: ga }
 Content for ECE and ECH
 :::
 
-:::{applies-item} serverless:
+:::{applies-item} serverless: ga
 Content for Serverless
 :::
 
@@ -81,28 +81,28 @@ Content for Serverless
 
 All applies switches on a page automatically sync together. When you select an applies_to definition in one switch, all other switches will switch to the same applies_to definition.
 
-The format of the applies_to definition doesn't matter - `stack: preview 9.1`, `{ "stack": "preview 9.1" }`, and `{ stack: "preview 9.1" }` all identify the same content and will sync together.
+The format of the applies_to definition doesn't matter - `stack: ga 9.1+`, `{ "stack": "ga 9.1+" }`, and `{ stack: "ga 9.1+" }` all identify the same content and will sync together.
 
 In the following example, both switch sets are automatically grouped and will stay in sync.
 
 ::::::{tab-set}
 :::::{tab-item} Output
 
 ::::{applies-switch}
-:::{applies-item} { "stack": "preview 9.0" }
-Content for 9.0 version
+:::{applies-item} { "stack": "ga 9.1+" }
+Content for versions 9.1 and newer
 :::
-:::{applies-item} { "stack": "ga 9.1" }
-Content for 9.1 version
+:::{applies-item} { "stack": "preview =9.0" }
+Content for version 9.0
 :::
 ::::
 
 ::::{applies-switch}
-:::{applies-item} stack: preview 9.0
-Other content for 9.0 version
+:::{applies-item} stack: ga 9.1+
+Other content for versions 9.1 and newer
 :::
-:::{applies-item} stack: ga 9.1
-Other content for 9.1 version
+:::{applies-item} stack: preview =9.0
+Other content for version 9.0
 :::
 ::::
 
@@ -111,20 +111,20 @@ Other content for 9.1 version
 
 ```markdown
 ::::{applies-switch}
-:::{applies-item} { "stack": "preview 9.0" }
-Content for 9.0 version
+:::{applies-item} { "stack": "ga 9.1+" }
+Content for versions 9.1 and newer
 :::
-:::{applies-item} { "stack": "ga 9.1" }
-Content for 9.1 version
+:::{applies-item} { "stack": "preview =9.0" }
+Content for version 9.0
 :::
 ::::
 
 ::::{applies-switch}
-:::{applies-item} stack: preview 9.0
-Other content for 9.0 version
+:::{applies-item} stack: ga 9.1+
+Other content for versions 9.1 and newer
 :::
-:::{applies-item} stack: ga 9.1
-Other content for 9.1 version
+:::{applies-item} stack: preview =9.0
+Other content for version 9.0
 :::
 ::::
 ```

src/Elastic.Documentation.Site/Assets/main.ts

@@ -30,7 +30,8 @@ initializeOtel({
 // Dynamically import web components after telemetry is initialized
 // This ensures telemetry is available when the components execute
 // Parcel will automatically code-split this into a separate chunk
-import('./web-components/SearchOrAskAi/SearchOrAskAi')
+import('./web-components/NavigationSearch/NavigationSearchComponent')
+import('./web-components/AskAi/AskAi')
 import('./web-components/VersionDropdown')
 import('./web-components/AppliesToPopover')
 
@@ -224,3 +225,18 @@ document.body.addEventListener(
         }
     }
 )
+
+// Clean up web component content before htmx saves to history cache.
+document.body.addEventListener('htmx:beforeHistorySave', function () {
+    // connectedCallback() re-renders
+    $$('applies-to-popover, version-dropdown, search-or-ask-ai').forEach(
+        (el) => {
+            el.innerHTML = ''
+        }
+    )
+
+    // EUI portal containers getting orphaned during navigation
+    $$('[data-euiportal="true"]').forEach((el) => {
+        el.remove()
+    })
+})

…archOrAskAi/AskAi/AiProviderSelector.tsx …-components/AskAi/AiProviderSelector.tsxsrc/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/AiProviderSelector.tsx renamed to src/Elastic.Documentation.Site/Assets/web-components/AskAi/AiProviderSelector.tsx src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/AiProviderSelector.tsx renamed to src/Elastic.Documentation.Site/Assets/web-components/AskAi/AiProviderSelector.tsx

@@ -1,39 +1,36 @@
 import '../../eui-icons-cache'
-import { NavigationSearch } from './NavigationSearch'
-import {
-    // ModalMode,
-    useModalActions,
-    useModalIsOpen,
-    useModalMode,
-} from './modal.store'
+import { useAskAiModalActions, useAskAiModalIsOpen } from './askAi.modal.store'
 import {
     EuiPortal,
     EuiOverlayMask,
     EuiFocusTrap,
     EuiPanel,
     EuiLoadingSpinner,
+    EuiProvider,
     useEuiTheme,
 } from '@elastic/eui'
 import { css } from '@emotion/react'
-import { useQuery } from '@tanstack/react-query'
-import { useEffect, Suspense, lazy } from 'react'
+import r2wc from '@r2wc/react-to-web-component'
+import {
+    QueryClient,
+    QueryClientProvider,
+    useQuery,
+} from '@tanstack/react-query'
+import { useEffect, Suspense, lazy, StrictMode } from 'react'
+
+const queryClient = new QueryClient()
 
 // Lazy load the modal component
-const SearchOrAskAiModal = lazy(() =>
-    import('./SearchOrAskAiModal').then((module) => ({
-        default: module.SearchOrAskAiModal,
+const LazyAskAiModal = lazy(() =>
+    import('./AskAiModal').then((module) => ({
+        default: module.AskAiModal,
     }))
 )
 
-export const SearchOrAskAiButton = () => {
+const AskAiButton = () => {
     const { euiTheme } = useEuiTheme()
-    const isModalOpen = useModalIsOpen()
-    const modalMode = useModalMode()
-    const {
-        // openModal,
-        closeModal,
-        // setModalMode
-    } = useModalActions()
+    const isModalOpen = useAskAiModalIsOpen()
+    const { openModal, closeModal } = useAskAiModalActions()
 
     const { data: isApiAvailable } = useQuery({
         queryKey: ['api-health'],
@@ -62,43 +59,26 @@ export const SearchOrAskAiButton = () => {
         padding: 2rem;
     `
 
-    // const openAndSetModalMode = (mode: ModalMode) => {
-    //     setModalMode(mode)
-    //     if (!isModalOpen) {
-    //         openModal()
-    //     }
-    // }
-
-    // const openAskAiModal = () => openAndSetModalMode('askAi')
-    // const openSearchModal = () => openAndSetModalMode('search')
-
-    // Prevent layout jump when hiding the scrollbar by compensating its width
-
     useEffect(() => {
         const handleKeydown = (event: KeyboardEvent) => {
             if (event.key === 'Escape') {
-                closeModal()
+                //closeModal()
+            }
+
+            // Cmd+; to open Ask AI modal
+            if (
+                (event.metaKey || event.ctrlKey) &&
+                event.code === 'Semicolon'
+            ) {
+                //event.preventDefault()
+                //openModal()
             }
-            // Cmd+K is now handled by NavigationSearch to focus the input
-            // if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
-            //     event.preventDefault()
-            //     openSearchModal()
-            // }
-
-            // if (
-            //     (event.metaKey || event.ctrlKey) &&
-            //     event.code === 'Semicolon'
-            // ) {
-            //     event.preventDefault()
-            //     openAskAiModal()
-            //     // Input focuses itself via its own Cmd+; listener
-            // }
         }
         window.addEventListener('keydown', handleKeydown)
         return () => {
             window.removeEventListener('keydown', handleKeydown)
         }
-    }, [isModalOpen, modalMode])
+    }, [openModal, closeModal])
 
     useEffect(() => {
         if (!isModalOpen) return
@@ -132,19 +112,7 @@ export const SearchOrAskAiButton = () => {
     }
 
     return (
-        <div>
-            {/*<EuiToolTip content="Keyboard shortcut: ⌘;">*/}
-            {/*    <ElasticAiAssistantButton*/}
-            {/*        size="s"*/}
-            {/*        iconType={AiIcon}*/}
-            {/*        onClick={openAskAiModal}*/}
-            {/*    >*/}
-            {/*        Ask AI Assistant*/}
-            {/*    </ElasticAiAssistantButton>*/}
-            {/*</EuiToolTip>*/}
-
-            <NavigationSearch />
-
+        <>
             {isModalOpen && (
                 <EuiPortal>
                     <EuiOverlayMask>
@@ -161,13 +129,31 @@ export const SearchOrAskAiButton = () => {
                                         </div>
                                     }
                                 >
-                                    <SearchOrAskAiModal />
+                                    <LazyAskAiModal />
                                 </Suspense>
                             </EuiPanel>
                         </EuiFocusTrap>
                     </EuiOverlayMask>
                 </EuiPortal>
             )}
-        </div>
+        </>
     )
 }
+
+const AskAi = () => {
+    return (
+        <StrictMode>
+            <EuiProvider
+                colorMode="light"
+                globalStyles={false}
+                utilityClasses={false}
+            >
+                <QueryClientProvider client={queryClient}>
+                    <AskAiButton />
+                </QueryClientProvider>
+            </EuiProvider>
+        </StrictMode>
+    )
+}
+
+customElements.define('ask-ai', r2wc(AskAi))