feat: add Help Desk search link when KBar has no results (#27062)
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
Peer Richelsen
co-authored by
Devin AI
Devin AI
parent
186a3e648f
commit
769035b1ee
+213
-37
@@ -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">"{searchQuery}"</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}
|
||||
|
||||
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user