feat: add Help Desk search link when KBar has no results (calcom#27062)

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

Author: PeerRich

apps/web/modules/shell/Kbar.tsx

@@ -1,3 +1,9 @@
+import { appStoreMetadata } from "@calcom/app-store/appStoreMetaData";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { isMac } from "@calcom/lib/isMac";
+import { trpc } from "@calcom/trpc/react";
+import { Icon } from "@calcom/ui/components/icon";
+import { Tooltip } from "@calcom/ui/components/tooltip";
 import type { Action } from "kbar";
 import {
   KBarAnimator,
@@ -12,14 +18,7 @@ import {
 } from "kbar";
 import { useRouter } from "next/navigation";
 import type { ReactNode } from "react";
-import { useMemo } from "react";
-
-import { appStoreMetadata } from "@calcom/app-store/appStoreMetaData";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { isMac } from "@calcom/lib/isMac";
-import { trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui/components/icon";
-import { Tooltip } from "@calcom/ui/components/tooltip";
+import { useEffect, useMemo } from "react";
 
 type ShortcutArrayType = {
   shortcuts?: string[];
@@ -49,26 +48,165 @@ const getApps: AppAction[] = Object.values(appStoreMetadata).map(({ name, slug }
 }));
 
 const KBAR_ACTION_CONFIGS: ActionConfig[] = [
-  { id: "workflows", name: "workflows", section: "workflows", shortcut: ["w", "f"], keywords: "workflows automation", href: "/workflows" },
-  { id: "event-types", name: "event_types_page_title", section: "event_types_page_title", shortcut: ["e", "t"], keywords: "event types", href: "/event-types" },
-  { id: "app-store", name: "app_store", section: "apps", shortcut: ["a", "s"], keywords: "app store", href: "/apps" },
-  { id: "upcoming-bookings", name: "upcoming", section: "bookings", shortcut: ["u", "b"], keywords: "upcoming bookings", href: "/bookings/upcoming" },
-  { id: "recurring-bookings", name: "recurring", section: "bookings", shortcut: ["r", "b"], keywords: "recurring bookings", href: "/bookings/recurring" },
-  { id: "past-bookings", name: "past", section: "bookings", shortcut: ["p", "b"], keywords: "past bookings", href: "/bookings/past" },
-  { id: "cancelled-bookings", name: "cancelled", section: "bookings", shortcut: ["c", "b"], keywords: "cancelled bookings", href: "/bookings/cancelled" },
-  { id: "schedule", name: "availability", section: "availability", shortcut: ["s", "a"], keywords: "schedule availability", href: "/availability" },
-  { id: "profile", name: "profile", section: "profile", shortcut: ["p", "s"], keywords: "setting profile", href: "/settings/my-account/profile" },
-  { id: "avatar", name: "change_avatar", section: "profile", shortcut: ["c", "a"], keywords: "remove change modify avatar", href: "/settings/my-account/profile" },
-  { id: "timezone", name: "timezone", section: "profile", shortcut: ["c", "t"], keywords: "change modify timezone", href: "/settings/my-account/general" },
-  { id: "brand-color", name: "brand_color", section: "profile", shortcut: ["b", "c"], keywords: "change modify brand color", href: "/settings/my-account/appearance" },
-  { id: "teams", name: "teams", shortcut: ["t", "s"], keywords: "add manage modify team", href: "/settings/teams" },
-  { id: "password", name: "change_password", section: "security", shortcut: ["c", "p"], keywords: "change modify password", href: "/settings/security/password" },
-  { id: "two-factor", name: "two_factor_auth", section: "security", shortcut: ["t", "f", "a"], keywords: "two factor authentication", href: "/settings/security/two-factor-auth" },
-  { id: "impersonation", name: "user_impersonation_heading", section: "security", shortcut: ["u", "i"], keywords: "user impersonation", href: "/settings/security/impersonation" },
-  { id: "license", name: "choose_a_license", section: "admin", shortcut: ["u", "l"], keywords: "license", href: "/auth/setup?step=1" },
-  { id: "webhooks", name: "Webhooks", section: "developer", shortcut: ["w", "h"], keywords: "webhook automation", href: "/settings/developer/webhooks" },
-  { id: "api-keys", name: "api_keys", section: "developer", shortcut: ["a", "p", "i"], keywords: "api keys", href: "/settings/developer/api-keys" },
-  { id: "billing", name: "manage_billing", section: "billing", shortcut: ["m", "b"], keywords: "billing view manage", href: "/settings/billing" },
+  {
+    id: "workflows",
+    name: "workflows",
+    section: "workflows",
+    shortcut: ["w", "f"],
+    keywords: "workflows automation",
+    href: "/workflows",
+  },
+  {
+    id: "event-types",
+    name: "event_types_page_title",
+    section: "event_types_page_title",
+    shortcut: ["e", "t"],
+    keywords: "event types",
+    href: "/event-types",
+  },
+  {
+    id: "app-store",
+    name: "app_store",
+    section: "apps",
+    shortcut: ["a", "s"],
+    keywords: "app store",
+    href: "/apps",
+  },
+  {
+    id: "upcoming-bookings",
+    name: "upcoming",
+    section: "bookings",
+    shortcut: ["u", "b"],
+    keywords: "upcoming bookings",
+    href: "/bookings/upcoming",
+  },
+  {
+    id: "recurring-bookings",
+    name: "recurring",
+    section: "bookings",
+    shortcut: ["r", "b"],
+    keywords: "recurring bookings",
+    href: "/bookings/recurring",
+  },
+  {
+    id: "past-bookings",
+    name: "past",
+    section: "bookings",
+    shortcut: ["p", "b"],
+    keywords: "past bookings",
+    href: "/bookings/past",
+  },
+  {
+    id: "cancelled-bookings",
+    name: "cancelled",
+    section: "bookings",
+    shortcut: ["c", "b"],
+    keywords: "cancelled bookings",
+    href: "/bookings/cancelled",
+  },
+  {
+    id: "schedule",
+    name: "availability",
+    section: "availability",
+    shortcut: ["s", "a"],
+    keywords: "schedule availability",
+    href: "/availability",
+  },
+  {
+    id: "profile",
+    name: "profile",
+    section: "profile",
+    shortcut: ["p", "s"],
+    keywords: "setting profile",
+    href: "/settings/my-account/profile",
+  },
+  {
+    id: "avatar",
+    name: "change_avatar",
+    section: "profile",
+    shortcut: ["c", "a"],
+    keywords: "remove change modify avatar",
+    href: "/settings/my-account/profile",
+  },
+  {
+    id: "timezone",
+    name: "timezone",
+    section: "profile",
+    shortcut: ["c", "t"],
+    keywords: "change modify timezone",
+    href: "/settings/my-account/general",
+  },
+  {
+    id: "brand-color",
+    name: "brand_color",
+    section: "profile",
+    shortcut: ["b", "c"],
+    keywords: "change modify brand color",
+    href: "/settings/my-account/appearance",
+  },
+  {
+    id: "teams",
+    name: "teams",
+    shortcut: ["t", "s"],
+    keywords: "add manage modify team",
+    href: "/settings/teams",
+  },
+  {
+    id: "password",
+    name: "change_password",
+    section: "security",
+    shortcut: ["c", "p"],
+    keywords: "change modify password",
+    href: "/settings/security/password",
+  },
+  {
+    id: "two-factor",
+    name: "two_factor_auth",
+    section: "security",
+    shortcut: ["t", "f", "a"],
+    keywords: "two factor authentication",
+    href: "/settings/security/two-factor-auth",
+  },
+  {
+    id: "impersonation",
+    name: "user_impersonation_heading",
+    section: "security",
+    shortcut: ["u", "i"],
+    keywords: "user impersonation",
+    href: "/settings/security/impersonation",
+  },
+  {
+    id: "license",
+    name: "choose_a_license",
+    section: "admin",
+    shortcut: ["u", "l"],
+    keywords: "license",
+    href: "/auth/setup?step=1",
+  },
+  {
+    id: "webhooks",
+    name: "Webhooks",
+    section: "developer",
+    shortcut: ["w", "h"],
+    keywords: "webhook automation",
+    href: "/settings/developer/webhooks",
+  },
+  {
+    id: "api-keys",
+    name: "api_keys",
+    section: "developer",
+    shortcut: ["a", "p", "i"],
+    keywords: "api keys",
+    href: "/settings/developer/api-keys",
+  },
+  {
+    id: "billing",
+    name: "manage_billing",
+    section: "billing",
+    shortcut: ["m", "b"],
+    keywords: "billing view manage",
+    href: "/settings/billing",
+  },
 ];
 
 function buildKbarActions(push: (href: string) => void): Action[] {
@@ -145,16 +283,16 @@ const KBarContent = (): JSX.Element => {
   return (
     <KBarPortal>
       <KBarPositioner className="overflow-scroll">
-        <KBarAnimator className="bg-default max-w-(--breakpoint-sm) z-10 w-full overflow-hidden rounded-md shadow-lg">
-          <div className="border-subtle flex items-center justify-center border-b">
-            <Icon name="search" className="text-default mx-3 h-4 w-4" />
+        <KBarAnimator className="z-10 w-full max-w-(--breakpoint-sm) overflow-hidden rounded-md bg-default shadow-lg">
+          <div className="flex items-center justify-center border-subtle border-b">
+            <Icon name="search" className="mx-3 h-4 w-4 text-default" />
             <KBarSearch
               defaultPlaceholder={t("kbar_search_placeholder")}
-              className="bg-default placeholder:text-subtle text-default w-full rounded-sm border-0 py-2.5 px-0 focus:ring-0 focus-visible:outline-none"
+              className="w-full rounded-sm border-0 bg-default px-0 py-2.5 text-default placeholder:text-subtle focus:ring-0 focus-visible:outline-none"
             />
           </div>
           <RenderResults />
-          <div className="text-subtle border-subtle hidden items-center space-x-1 border-t px-2 py-1.5 text-xs sm:flex">
+          <div className="hidden items-center space-x-1 border-subtle border-t px-2 py-1.5 text-subtle text-xs sm:flex">
             <Icon name="arrow-up" className="h-4 w-4" />
             <Icon name="arrow-down" className="h-4 w-4" /> <span className="pr-2">{t("navigate")}</span>
             <Icon name="corner-down-left" className="h-4 w-4" />
@@ -164,7 +302,7 @@ const KBarContent = (): JSX.Element => {
             <span className="pr-2">{t("close")}</span>
           </div>
         </KBarAnimator>
-        <div className="z-1 fixed inset-0 bg-neutral-800/70" />
+        <div className="fixed inset-0 z-1 bg-neutral-800/70" />
       </KBarPositioner>
     </KBarPortal>
   );
@@ -189,7 +327,7 @@ const KBarTrigger = (): JSX.Element | null => {
       <button
         color="minimal"
         onClick={query.toggle}
-        className="text-default hover:bg-subtle todesktop:hover:!bg-transparent lg:hover:bg-emphasis lg:hover:text-emphasis group flex rounded-md px-3 py-2 text-sm font-medium transition lg:px-2">
+        className="todesktop:hover:!bg-transparent group flex rounded-md px-3 py-2 font-medium text-default text-sm transition hover:bg-subtle lg:px-2 lg:hover:bg-emphasis lg:hover:text-emphasis">
         <Icon name="search" className="h-4 w-4 shrink-0 text-inherit" />
       </button>
     </Tooltip>
@@ -205,7 +343,7 @@ function DisplayShortcuts(item: ShortcutArrayType): JSX.Element {
         return (
           <kbd
             key={shortcut}
-            className="bg-default hover:bg-subtle text-emphasis rounded-sm border px-2 py-1 transition">
+            className="rounded-sm border bg-default px-2 py-1 text-emphasis transition hover:bg-subtle">
             {shortcut}
           </kbd>
         );
@@ -221,7 +359,7 @@ type RenderItemProps = {
 
 function renderResultItem(item: string | Action, active: boolean, t: (key: string) => string): JSX.Element {
   if (typeof item === "string") {
-    return <div className="bg-default text-emphasis p-4 text-xs font-bold uppercase">{t(item)}</div>;
+    return <div className="bg-default p-4 font-bold text-emphasis text-xs uppercase">{t(item)}</div>;
   }
 
   let background = "var(--cal-bg-default)";
@@ -241,10 +379,48 @@ function renderResultItem(item: string | Action, active: boolean, t: (key: strin
   );
 }
 
+function NoResultsFound({ searchQuery }: { searchQuery: string }): JSX.Element {
+  const { t } = useLocale();
+  const helpUrl = `https://cal.com/help/welcome?search=${encodeURIComponent(searchQuery)}`;
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent): void => {
+      if (event.key === "Enter") {
+        window.open(helpUrl, "_blank", "noopener,noreferrer");
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [helpUrl]);
+
+  return (
+    <div className="px-4 py-6 text-center">
+      <p className="mb-3 text-sm text-subtle">{t("kbar_no_results_found")}</p>
+      <a
+        href={helpUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="flex items-center justify-center gap-2 text-emphasis text-sm transition hover:text-default">
+        <Icon name="external-link" className="h-4 w-4" />
+        {t("kbar_search_help_desk_prefix")} <span className="underline">&quot;{searchQuery}&quot;</span>{" "}
+        {t("kbar_search_help_desk_suffix")}
+      </a>
+    </div>
+  );
+}
+
 function RenderResults(): JSX.Element {
   const { results } = useMatches();
+  const { searchQuery } = useKBar((state) => ({ searchQuery: state.searchQuery }));
   const { t } = useLocale();
 
+  if (results.length === 0 && searchQuery.trim().length > 0) {
+    return <NoResultsFound searchQuery={searchQuery} />;
+  }
+
   return (
     <KBarResults
       items={results}

apps/web/public/static/locales/en/common.json

@@ -2167,6 +2167,9 @@
   "attendee_email_info": "The person booking's email",
   "booking_uid": "Booking UID",
   "kbar_search_placeholder": "Type a command or search...",
+  "kbar_search_help_desk_prefix": "Search for",
+  "kbar_search_help_desk_suffix": "on our Help Desk",
+  "kbar_no_results_found": "No results found",
   "invalid_credential": "It looks like permissions expired or were revoked for {{appName}}.",
   "invalid_credential_action": "Reinstall app",
   "reschedule_reason": "Reschedule reason",