#1320 Search results for all types

nemerosa · Jul 8, 2024 · 7318dc1 · 7318dc1
1 parent 4966d30
commit 7318dc1
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 22 deletions.
diff --git a/ontrack-web-core/components/search/SearchResult.js b/ontrack-web-core/components/search/SearchResult.js
@@ -1,9 +1,14 @@
 import {Dynamic} from "@components/common/Dynamic";
+import {Space} from "antd";
+import SearchResultType from "@components/search/SearchResultType";
 
-export default function SearchResult({type, result}) {
+export default function SearchResult({result}) {
     return (
         <>
-            <Dynamic path={`framework/search/${type.id}/Result`} props={result}/>
+            <Space>
+                <SearchResultType type={result.type}/>
+                <Dynamic path={`framework/search/${result.type.id}/Result`} props={result}/>
+            </Space>
         </>
     )
 }
diff --git a/ontrack-web-core/components/search/SearchResultList.js b/ontrack-web-core/components/search/SearchResultList.js
@@ -1,14 +1,13 @@
 import {Space} from "antd";
 import SearchResult from "@components/search/SearchResult";
 
-export default function SearchResultList({type, results}) {
+export default function SearchResultList({results}) {
     return (
         <>
             <Space direction="vertical">
                 {
                     results.map((result, index) => <SearchResult
                         key={index}
-                        type={type}
                         result={result}
                     />)
                 }

diff --git a/ontrack-web-core/components/search/SearchResultType.js b/ontrack-web-core/components/search/SearchResultType.js
@@ -1,14 +1,17 @@
-import {Space, Typography} from "antd";
+import {Popover, Typography} from "antd";
 import SearchResultTypeIcon from "@components/search/SearchResultTypeIcon";
 
 export default function SearchResultType({type}) {
     return (
         <>
-            <Space>
-                <SearchResultTypeIcon type={type}/>
-                {type.name}
-                <Typography.Text type="secondary" italic>{type.description}</Typography.Text>
-            </Space>
+            <Popover
+                title={type.name}
+                content={<Typography.Text type="secondary">{type.description}</Typography.Text>}
+            >
+                <div>
+                    <SearchResultTypeIcon type={type}/>
+                </div>
+            </Popover>
         </>
     )
 }
diff --git a/ontrack-web-core/components/search/SearchView.js b/ontrack-web-core/components/search/SearchView.js
@@ -6,11 +6,55 @@ import {homeUri} from "@components/common/Links";
 import {CloseCommand} from "@components/common/Commands";
 import {homeBreadcrumbs} from "@components/common/Breadcrumbs";
 import MainPage from "@components/layouts/MainPage";
-import {Space} from "antd";
-import SearchTypeSection from "@components/search/SearchTypeSection";
+import {Skeleton} from "antd";
+import {useEffect, useState} from "react";
+import {gql} from "graphql-request";
+import SearchResultList from "@components/search/SearchResultList";
 
 export default function SearchView({q}) {
-    const {searchResultTypes} = useRefData()
+
+    const client = useGraphQLClient()
+    const [searching, setSearching] = useState(true)
+    const [results, setResults] = useState([])
+
+    useEffect(() => {
+        if (client && q) {
+            setSearching(true)
+            client.request(
+                gql`
+                    query SearchWithType($q: String!) {
+                        search(offset: 0, size: 10, token: $q) {
+                            pageInfo {
+                                totalSize
+                                nextPage {
+                                    offset
+                                    size
+                                }
+                            }
+                            pageItems {
+                                type {
+                                    id
+                                    name
+                                    description
+                                }
+                                title
+                                description
+                                data
+                                accuracy
+                            }
+                        }
+                    }
+                `,
+                {
+                    q: q,
+                }
+            ).then(data => {
+                setResults(data.search.pageItems)
+            }).finally(() => {
+                setSearching(false)
+            })
+        }
+    }, [client, q])
 
     return (
         <>
@@ -24,15 +68,9 @@ export default function SearchView({q}) {
                     <CloseCommand key="close" href={homeUri()}/>,
                 ]}
             >
-                <Space direction="vertical" className="ot-line">
-                    {
-                        searchResultTypes.map(type => (
-                            <>
-                                <SearchTypeSection key={type.name} type={type} q={q}/>
-                            </>
-                        ))
-                    }
-                </Space>
+                <Skeleton active loading={searching}>
+                    <SearchResultList results={results}/>
+                </Skeleton>
             </MainPage>
         </>
     )