Skip to content

Commit

Permalink
UI improvement and cleaning on Search Anywhere (#4183)
Browse files Browse the repository at this point in the history 
cleaning some old code
reuse some component and utils functions
Small UI update
  • Loading branch information
@bilalabbad
bilalabbad authored Aug 27, 2024
1 parent e884e09 commit 552a0a7
Show file tree
Hide file tree
Showing 3 changed files with 47 additions and 59 deletions.
30 changes: 15 additions & 15 deletions frontend/app/src/components/search/search-anywhere.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { Link, LinkProps, useNavigate } from "react-router-dom";
import { SearchActions } from "./search-actions";
import { SearchDocs } from "./search-docs";
import { SearchNodes } from "./search-nodes";
import { Card } from "@/components/ui/card";

type SearchInputProps = {
className?: string;
Expand Down Expand Up @@ -128,7 +129,7 @@ const SearchAnywhereDialog = forwardRef<HTMLDivElement, SearchAnywhereProps>(
return (
<Dialog.Panel
ref={forwardedRef}
className="w-full max-w-screen-md max-h-[75vh] rounded-2xl bg-gray-50 shadow-xl transition-all flex flex-col"
className="p-2 w-full max-w-screen-md rounded-xl bg-stone-100 shadow-xl transition-all space-y-2"
data-testid="search-anywhere">
<Combobox
onChange={(url: string) => {
Expand All @@ -142,27 +143,22 @@ const SearchAnywhereDialog = forwardRef<HTMLDivElement, SearchAnywhereProps>(

onSelection(url);
}}>
<div className="p-2.5 relative">
<Combobox.Button className="absolute top-5 left-2.5 pl-2 flex items-center">
<Icon icon="mdi:magnify" className="text-lg text-custom-blue-10" aria-hidden="true" />
<div className="relative">
<Combobox.Button className="absolute top-2.5 pl-2.5">
<Icon icon="mdi:magnify" className="text-xl text-custom-blue-600" />
</Combobox.Button>

<Combobox.Input
as={Input}
placeholder="Search anywhere"
onChange={(e) => setQuery(e.target.value)}
value={query}
className={`
w-full px-8 py-2
text-sm leading-5 text-gray-900 placeholder:text-gray-400
rounded-md border border-gray-300 focus:border-custom-blue-600 focus:ring-custom-blue-600 shadow-sm
`}
className="w-full px-9 py-2"
/>
</div>

{query && (
<Combobox.Options
static
className="overflow-x-hidden overflow-y-auto divide-y shadow-inner">
<Combobox.Options static className="overflow-x-hidden overflow-y-auto space-y-2">
<SearchActions query={query} />
<SearchNodes query={query} />
<SearchDocs query={query} />
Expand All @@ -179,14 +175,15 @@ type SearchGroupProps = {
};

export const SearchGroup = ({ children }: SearchGroupProps) => {
return <div className="p-2.5">{children}</div>;
return <Card className="p-2">{children}</Card>;
};

export const SearchGroupTitle = ({ children }: SearchGroupProps) => {
return (
<Combobox.Option
value=""
disabled
className="text-xxs font-semibold text-gray-500 flex items-center">
className="text-xs mb-0.5 pl-1.5 font-semibold text-neutral-600 flex items-center">
{children}
</Combobox.Option>
);
Expand All @@ -200,7 +197,10 @@ export const SearchResultItem = ({ className = "", children, to, ...props }: Lin
to={to}
{...props}
className={({ active }) =>
classNames(`flex items-center gap-1 text-xs p-2 ${active ? "bg-slate-200" : ""}`, className)
classNames(
`flex items-center gap-1 text-xs p-2 rounded ${active ? "bg-gray-100" : ""}`,
className
)
}>
{children}
</Combobox.Option>
Expand Down
70 changes: 28 additions & 42 deletions frontend/app/src/components/search/search-nodes.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,18 @@
import { Skeleton } from "@/components/skeleton";
import { NODE_OBJECT, SCHEMA_ATTRIBUTE_KIND, SEARCH_QUERY_NAME } from "@/config/constants";
import { getObjectDetailsPaginated } from "@/graphql/queries/objects/getObjectDetails";
import { SCHEMA_ATTRIBUTE_KIND, SEARCH_QUERY_NAME } from "@/config/constants";
import { SEARCH } from "@/graphql/queries/objects/search";
import { useDebounce } from "@/hooks/useDebounce";
import useQuery, { useLazyQuery } from "@/hooks/useQuery";
import { genericsState, schemaState } from "@/state/atoms/schema.atom";
import { useLazyQuery } from "@/hooks/useQuery";
import { constructPath } from "@/utils/fetch";
import { getSchemaObjectColumns } from "@/utils/getSchemaObjectColumns";
import { getObjectDetailsUrl } from "@/utils/objects";
import { gql } from "@apollo/client";
import { Icon } from "@iconify-icon/react";
import { format } from "date-fns";
import { useAtomValue } from "jotai/index";
import { ReactElement, useEffect } from "react";
import { SearchGroup, SearchGroupTitle, SearchResultItem } from "./search-anywhere";
import { useObjectDetails } from "@/hooks/useObjectDetails";
import { useSchema } from "@/hooks/useSchema";
import { getSchemaObjectColumns } from "@/utils/getSchemaObjectColumns";
import { Badge } from "@/components/ui/badge";

type SearchProps = {
query: string;
Expand Down Expand Up @@ -59,34 +58,15 @@ type NodesOptionsProps = {
};

const NodesOptions = ({ node }: NodesOptionsProps) => {
const schemaList = useAtomValue(schemaState);
const genericList = useAtomValue(genericsState);

const schema = schemaList.find((s) => s.kind === node.kind);
const generic = genericList.find((s) => s.kind === node.kind);

const schemaData = generic || schema;
const { schema } = useSchema(node.kind);
const { data, loading } = useObjectDetails(schema!, node.id);

const columns = getSchemaObjectColumns({ schema: schemaData, forListView: true, limit: 7 });

const queryString = schemaData
? getObjectDetailsPaginated({
kind: schemaData.kind,
columns,
objectid: node.id,
})
: // Empty query to make the gql parsing work
"query { ok }";

const query = gql`
${queryString}
`;

const { loading, data } = useQuery(query, { skip: !schemaData });
if (!schema) return null;
const columns = getSchemaObjectColumns({ schema, forListView: true, limit: 7 });

if (loading) return <SearchResultNodeSkeleton />;

const objectDetailsData = schemaData && data?.[node.kind]?.edges[0]?.node;
const objectDetailsData = schema && data?.[node.kind]?.edges[0]?.node;
if (!objectDetailsData) return <div className="text-sm">No data found for this object</div>;

const url = constructPath(
Expand All @@ -96,17 +76,23 @@ const NodesOptions = ({ node }: NodesOptionsProps) => {
return (
<SearchResultItem to={url} className="!items-start">
<Icon
icon={schemaData?.icon || "mdi:code-braces-box"}
icon={schema.icon || "mdi:code-braces-box"}
className="text-lg pr-2 py-0.5 text-custom-blue-700"
/>

<div className="flex-grow text-sm">
<span className="mr-1 font-semibold text-custom-blue-700">
{objectDetailsData?.display_label}
</span>
<span className="bg-gray-200 text-gray-800 text-xxs me-1 px-2 align-bottom rounded-full">
{schemaData?.label}
</span>
<div className="flex justify-between">
<span className="mr-1 font-semibold text-custom-blue-800">
{objectDetailsData?.display_label}
</span>

<div className="inline-flex items-center gap-1">
<Badge variant="blue" className="text-xxs py-0">
{schema.namespace}
</Badge>
<span className="text-xxs font-medium">{schema.label}</span>
</div>
</div>

<div className="mt-1 text-gray-600 flex gap-5">
{columns
Expand Down Expand Up @@ -160,8 +146,8 @@ const NodeAttribute = ({ title, kind, value }: NodeAttributeProps) => {
const color = value.color === "" ? "#f1f1f1" : value.color;
return (
<div
className="px-1.5 rounded-full text-gray-700 font-medium text-center"
style={{ background: `${color}40`, border: `1px solid ${color}` }}>
className="px-1.5 rounded text-gray-700 font-medium text-center border border-transparent"
style={{ background: `${color}40` }}>
{value.label}
</div>
);
Expand All @@ -174,8 +160,8 @@ const NodeAttribute = ({ title, kind, value }: NodeAttributeProps) => {

return (
<div className="flex flex-col text-xxs whitespace-nowrap leading-3">
<span className="font-light">{title}</span>
<span className="font-medium">{formatValue() || "-"}</span>
<span>{title}</span>
<span className="font-medium text-gray-800">{formatValue() || "-"}</span>
</div>
);
};
Expand Down
6 changes: 4 additions & 2 deletions frontend/app/tests/e2e/search.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ test.describe("when searching an object", () => {
await test.step("find a matching result", async () => {
await page.getByTestId("search-anywhere").getByPlaceholder("Search anywhere").fill("atl1");
await expect(
page.getByTestId("search-anywhere").getByRole("option", { name: "atl1Site" })
page.getByTestId("search-anywhere").getByRole("option", { name: "atl1 Location Site" })
).toBeVisible();
});
});
Expand All @@ -91,6 +91,8 @@ test.describe("when searching an object", () => {
});

await page.getByTestId("search-anywhere").getByPlaceholder("Search anywhere").fill(uuid);
await expect(page.getByRole("option", { name: "AS174 174Autonomous System" })).toBeVisible();
await expect(
page.getByRole("option", { name: "AS174 174 Infra Autonomous System" })
).toBeVisible();
});
});

0 comments on commit 552a0a7

Please sign in to comment.