feat: Dashboards search (#4781)

## Description

- [ ] Search the projects
- [ ] Use arrow keys directly from the search or by focusing the project
- [ ] Hit enter to open
- [ ] Empty state when nothing found

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: kof

apps/builder/app/auth/login.tsx

@@ -15,7 +15,6 @@ import { SecretLogin } from "./secret-login";
 const globalStyles = globalCss({
   body: {
     margin: 0,
-    background: theme.colors.brandBackgroundDashboard,
     overflow: "hidden",
   },
 });
@@ -35,7 +34,14 @@ export const Login = ({
 }: LoginProps) => {
   globalStyles();
   return (
-    <Flex align="center" justify="center" css={{ height: "100vh" }}>
+    <Flex
+      align="center"
+      justify="center"
+      css={{
+        height: "100vh",
+        background: theme.colors.brandBackgroundDashboard,
+      }}
+    >
       <Flex
         direction="column"
         align="center"
@@ -56,34 +62,30 @@ export const Login = ({
         </Text>
 
         <TooltipProvider>
-          <Flex
-            as={Form}
-            method="post"
-            direction="column"
-            gap="3"
-            css={{ width: "100%" }}
-          >
-            <Button
-              disabled={isGoogleEnabled === false}
-              prefix={<GoogleIcon size={22} />}
-              color="primary"
-              css={{ height: theme.spacing[15] }}
-              formAction={authPath({ provider: "google" })}
-            >
-              Sign in with Google
-            </Button>
-            <Button
-              disabled={isGithubEnabled === false}
-              prefix={<GithubIcon size={22} fill="currentColor" />}
-              color="ghost"
-              css={{
-                border: `1px solid ${theme.colors.borderDark}`,
-                height: theme.spacing[15],
-              }}
-              formAction={authPath({ provider: "github" })}
-            >
-              Sign in with GitHub
-            </Button>
+          <Flex direction="column" gap="3" css={{ width: "100%" }}>
+            <Form method="post" style={{ display: "contents" }}>
+              <Button
+                disabled={isGoogleEnabled === false}
+                prefix={<GoogleIcon size={22} />}
+                color="primary"
+                css={{ height: theme.spacing[15] }}
+                formAction={authPath({ provider: "google" })}
+              >
+                Sign in with Google
+              </Button>
+              <Button
+                disabled={isGithubEnabled === false}
+                prefix={<GithubIcon size={22} fill="currentColor" />}
+                color="ghost"
+                css={{
+                  border: `1px solid ${theme.colors.borderDark}`,
+                  height: theme.spacing[15],
+                }}
+                formAction={authPath({ provider: "github" })}
+              >
+                Sign in with GitHub
+              </Button>
+            </Form>
             {isSecretLoginEnabled && <SecretLogin />}
           </Flex>
         </TooltipProvider>

apps/builder/app/auth/secret-login.tsx

@@ -5,30 +5,25 @@ import { authPath } from "~/shared/router-utils";
 export const SecretLogin = () => {
   const [show, setShow] = useState(false);
   if (show) {
-    const action = authPath({ provider: "dev" });
     return (
-      <Flex gap="2">
-        <InputField
-          name="secret"
-          type="password"
-          minLength={2}
-          required
-          autoFocus
-          placeholder="Auth secret"
-          css={{ flexGrow: 1 }}
-          formAction={authPath({ provider: "dev" })}
-          onKeyDown={(event) => {
-            const form = event.currentTarget.form;
-            if (event.key === "Enter" && form) {
-              form.action = action;
-              form.submit();
-            }
-          }}
-        />
-        <Button type="submit" formAction={action}>
-          Login
-        </Button>
-      </Flex>
+      <form
+        method="post"
+        action={authPath({ provider: "dev" })}
+        style={{ display: "contents" }}
+      >
+        <Flex gap="2">
+          <InputField
+            name="secret"
+            type="password"
+            minLength={2}
+            required
+            autoFocus
+            placeholder="Auth secret"
+            css={{ flexGrow: 1 }}
+          />
+          <Button type="submit">Login</Button>
+        </Flex>
+      </form>
     );
   }
 

apps/builder/app/builder/features/components/components.tsx

@@ -219,7 +219,7 @@ export const ComponentsPanel = ({
 
   const searchFieldProps = useSearchFieldKeys({
     onChange: resetSelectedComponent,
-    onCancel: resetSelectedComponent,
+    onAbort: resetSelectedComponent,
     onMove({ direction }) {
       if (direction === "current") {
         const component = getSelectedComponent();

apps/builder/app/dashboard/dashboard.stories.tsx

@@ -1,12 +1,12 @@
 import type { StoryFn } from "@storybook/react";
 import type { JSX } from "react";
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
-import { Dashboard } from "./dashboard";
+import { createMemoryRouter, RouterProvider } from "react-router-dom";
+import { Dashboard, DashboardSetup } from "./dashboard";
 import type { UserPlanFeatures } from "~/shared/db/user-plan-features.server";
 import type { DashboardProject } from "@webstudio-is/dashboard";
 
 export default {
-  title: "Dashboard / Projects",
+  title: "Dashboard",
   component: Dashboard,
 };
 
@@ -20,14 +20,10 @@ const user = {
   provider: "github",
 };
 
-const createRouter = (element: JSX.Element) =>
-  createBrowserRouter([
-    {
-      path: "*",
-      element,
-      loader: () => null,
-    },
-  ]);
+const createRouter = (element: JSX.Element, path: string, current?: string) =>
+  createMemoryRouter([{ path, element }], {
+    initialEntries: [current ?? path],
+  });
 
 const userPlanFeatures: UserPlanFeatures = {
   hasProPlan: false,
@@ -38,60 +34,85 @@ const userPlanFeatures: UserPlanFeatures = {
   maxDomainsAllowedPerUser: 1,
 };
 
-export const WithProjects: StoryFn<typeof Dashboard> = () => {
-  const projects = [
-    {
-      id: "0",
-      createdAt: new Date().toString(),
-      title: "My Project",
-      domain: "domain.com",
-      userId: "",
-      isDeleted: false,
-      isPublished: false,
-      latestBuild: null,
-      previewImageAsset: null,
-      previewImageAssetId: "",
-      latestBuildVirtual: null,
-      marketplaceApprovalStatus: "UNLISTED" as const,
-    } as DashboardProject,
-  ];
+const projects = [
+  {
+    id: "0",
+    createdAt: new Date().toString(),
+    title: "My Project",
+    domain: "domain.com",
+    userId: "",
+    isDeleted: false,
+    isPublished: false,
+    latestBuild: null,
+    previewImageAsset: null,
+    previewImageAssetId: "",
+    latestBuildVirtual: null,
+    marketplaceApprovalStatus: "UNLISTED" as const,
+  } as DashboardProject,
+];
+
+const data = {
+  user,
+  templates: projects,
+  userPlanFeatures,
+  publisherHost: "https://wstd.work",
+  projects,
+};
+
+export const Welcome: StoryFn<typeof Dashboard> = () => {
+  const router = createRouter(
+    <>
+      <DashboardSetup data={{ ...data, projects: [] }} />
+      <Dashboard />
+    </>,
+    "/dashboard/templates"
+  );
+  return <RouterProvider router={router} />;
+};
+
+export const Projects: StoryFn<typeof Dashboard> = () => {
   const router = createRouter(
-    <Dashboard
-      user={user}
-      welcome={false}
-      projects={projects}
-      userPlanFeatures={userPlanFeatures}
-      publisherHost={"https://wstd.work"}
-    />
+    <>
+      <DashboardSetup data={data} />
+      <Dashboard />
+    </>,
+    "/dashboard"
   );
   return <RouterProvider router={router} />;
 };
 
-export const WithTemplates: StoryFn<typeof Dashboard> = () => {
-  const templates = [
-    {
-      id: "0",
-      createdAt: new Date().toString(),
-      title: "My Project",
-      domain: "domain.com",
-      userId: "",
-      isDeleted: false,
-      isPublished: false,
-      latestBuild: null,
-      previewImageAsset: null,
-      previewImageAssetId: "",
-      latestBuildVirtual: null,
-      marketplaceApprovalStatus: "UNLISTED" as const,
-    } as DashboardProject,
-  ];
+export const Templates: StoryFn<typeof Dashboard> = () => {
+  const router = createRouter(
+    <>
+      <DashboardSetup data={data} />
+      <Dashboard />
+    </>,
+    "/dashboard/templates"
+  );
+  return <RouterProvider router={router} />;
+};
+
+export const Search: StoryFn<typeof Dashboard> = () => {
+  const router = createRouter(
+    <>
+      <DashboardSetup data={data} />
+      <Dashboard />
+    </>,
+    "/dashboard/search",
+    "/dashboard/search?q=my"
+  );
+
+  return <RouterProvider router={router} />;
+};
+
+export const SearchNothingFound: StoryFn<typeof Dashboard> = () => {
   const router = createRouter(
-    <Dashboard
-      user={user}
-      templates={templates}
-      welcome
-      userPlanFeatures={userPlanFeatures}
-      publisherHost={"https://wstd.work"}
-    />
+    <>
+      <DashboardSetup data={data} />
+      <Dashboard />
+    </>,
+    "/dashboard/search",
+    "/dashboard/search?q=notfound"
   );
   return <RouterProvider router={router} />;
 };