draft

Author: leafty

client/src/features/searchV2/api/searchV2-empty.api.ts

@@ -20,7 +20,7 @@ import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/dist/query/react";
 
 // initialize an empty api service that we'll inject endpoints into later as needed
 export const searchV2EmptyApi = createApi({
-  baseQuery: fetchBaseQuery({ baseUrl: "/ui-server/api/search" }),
+  baseQuery: fetchBaseQuery({ baseUrl: "/api/data" }),
   endpoints: () => ({}),
   reducerPath: "searchV2Api",
 });

client/src/features/searchV2/components/SearchV2Results.tsx

@@ -19,6 +19,7 @@
 import cx from "classnames";
 import { ReactNode, useEffect, useRef } from "react";
 import {
+  Database,
   Folder2Open,
   Globe2,
   Icon,
@@ -39,16 +40,18 @@ import {
 } from "reactstrap";
 
 import ClampedParagraph from "../../../components/clamped/ClampedParagraph";
+import { RtkOrNotebooksError } from "../../../components/errors/RtkErrorAlert";
 import { Loader } from "../../../components/Loader";
 import Pagination from "../../../components/Pagination";
 import { TimeCaption } from "../../../components/TimeCaption";
 import { ABSOLUTE_ROUTES } from "../../../routing/routes.constants";
 import useAppSelector from "../../../utils/customHooks/useAppSelector.hook";
 import {
-  Group,
-  Project,
-  SearchEntity,
-  User,
+  type DataConnector,
+  type Group,
+  type Project,
+  type SearchEntity,
+  type User,
   searchV2Api,
 } from "../api/searchV2Api.api";
 import useClampSearchPage from "../hooks/useClampSearchPage.hook";
@@ -107,8 +110,14 @@ function SearchV2ResultsContent() {
     return <Loader />;
   }
 
+  if (searchResults.error) {
+    return (
+      <RtkOrNotebooksError error={searchResults.error} dismissible={false} />
+    );
+  }
+
   if (!searchResults.data?.items?.length) {
-    return query == null ? (
+    return query == null || query === "" ? (
       <p>No results</p>
     ) : (
       <>
@@ -136,6 +145,14 @@ function SearchV2ResultsContent() {
       return (
         <SearchV2ResultUser key={`user-result-${entity.id}`} user={entity} />
       );
+    } else if (entity.type === "DataConnector") {
+      entity;
+      return (
+        <SearchV2ResultDataConnector
+          key={`user-result-${entity.id}`}
+          dataConnector={entity}
+        />
+      );
     }
     // Unknown entity type, in case backend introduces new types before the UI catches up
     return <SearchV2ResultsUnknown key={`unknown-result-${index}`} />;
@@ -216,6 +233,8 @@ export function EntityPill({
       ? People
       : entityType === "User"
       ? Person
+      : entityType === "DataConnector"
+      ? Database
       : Question;
   const sizeClass =
     size == "sm"
@@ -379,6 +398,39 @@ function SearchV2ResultUser({ user }: SearchV2ResultUserProps) {
   );
 }
 
+interface SearchV2ResultDataConnectorProps {
+  dataConnector: DataConnector;
+}
+function SearchV2ResultDataConnector({
+  dataConnector,
+}: SearchV2ResultDataConnectorProps) {
+  const { id, name, namespace } = dataConnector;
+
+  const namespaceUrl =
+    namespace?.type === "User"
+      ? generatePath(ABSOLUTE_ROUTES.v2.users.show, {
+          username: namespace?.namespace ?? "",
+        })
+      : generatePath(ABSOLUTE_ROUTES.v2.groups.show.root, {
+          slug: namespace?.namespace ?? "",
+        });
+  const hash = `data-connector-${id}`;
+  const dcUrl = `${namespaceUrl}#${hash}`;
+
+  return (
+    <SearchV2ResultsContainer>
+      <SearchV2CardTitle
+        entityType="DataConnector"
+        entityUrl={dcUrl}
+        name={name}
+        namespace={namespace?.namespace ?? ""}
+        namespaceUrl={namespaceUrl}
+      />
+      <CardBody />
+    </SearchV2ResultsContainer>
+  );
+}
+
 function SearchV2ResultsUnknown() {
   return (
     <SearchV2ResultsContainer>

client/src/features/searchV2/searchV2.constants.ts

@@ -77,6 +77,7 @@ export const TYPE_FILTER_ALLOWED_VALUES: SearchEntityType[] = [
   "group",
   "project",
   "user",
+  "dataconnector", //eslint-disable-line spellcheck/spell-checker
 ];
 
 // Visibility filter constants