Skip to content

Commit

Permalink
change the docs icon to book and remove repeating code
Browse files Browse the repository at this point in the history
  • Loading branch information
@harshsbhat
harshsbhat committed Sep 25, 2024
1 parent fa1d22b commit 4564e47
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 165 deletions.
4 changes: 2 additions & 2 deletions apps/dashboard/app/(app)/desktop-sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip
import type { Workspace } from "@/lib/db";
import { cn } from "@/lib/utils";
import {
BookOpen,
Cable,
Crown,
DatabaseZap,
ExternalLink,
Fingerprint,
Gauge,
List,
Expand Down Expand Up @@ -140,7 +140,7 @@ export const DesktopSidebar: React.FC<Props> = ({ workspace, className }) => {
].filter((n) => !n.hidden);
const resourcesNavigation: NavItem[] = [
{
icon: ExternalLink,
icon: BookOpen,
href: "https://unkey.dev/docs",
external: true,
label: "Docs",
Expand Down
168 changes: 7 additions & 161 deletions apps/dashboard/components/dashboard/command-menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,27 +7,10 @@ import {
CommandItem,
CommandList,
} from "@/components/ui/command";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { trpc } from "@/lib/trpc/client";
import { zodResolver } from "@hookform/resolvers/zod";
import { BookOpen, type LucideIcon, MessagesSquare } from "lucide-react";
import { BookOpen, type LucideIcon } from "lucide-react";
import { useRouter } from "next/navigation";
import React, { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { Button } from "../ui/button";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
import { Textarea } from "../ui/textarea";
import { toast } from "../ui/toaster";
import { Loading } from "./loading";
import React from "react";
import { Feedback as FeedbackComponent } from "./feedback-component";

export function CommandMenu() {
const [open, setOpen] = React.useState(false);
Expand Down Expand Up @@ -57,7 +40,7 @@ export function CommandMenu() {
label="Documentation"
icon={BookOpen}
/>
<Feedback />
<FeedbackCommand />
</CommandGroup>
</CommandList>
</CommandDialog>
Expand Down Expand Up @@ -104,147 +87,10 @@ const GenericLinkCommand: React.FC<{
);
};

const Feedback: React.FC = () => {
const [open, setOpen] = useState(false);
/**
* This was necessary cause otherwise the dialog would not close when you're clicking outside of it
*/
const [selected, setSelected] = useState(false);
useEffect(() => {
if (selected) {
setOpen(true);
}
}, [selected]);

const schema = z.object({
severity: z.enum(["p0", "p1", "p2", "p3"]),
issueType: z.enum(["bug", "feature", "security", "payment", "question"]),
message: z.string(),
});

const form = useForm<z.infer<typeof schema>>({
resolver: zodResolver(schema),
defaultValues: {
severity: "p2",
issueType: "bug",
message: "",
},
});

const create = trpc.plain.createIssue.useMutation({
onSuccess: () => {
setOpen(false);
toast.success("Your issue has been created, we'll get back to you as soon as possible");
},
onError(err) {
console.error(err);
toast.error(err.message);
},
});

const FeedbackCommand: React.FC = () => {
return (
<CommandItem
onSelect={(_v) => {
setSelected(true);
}}
>
<MessagesSquare className="w-4 h-4 mr-2" />
Feedback
<Dialog open={open} onOpenChange={setOpen}>
<Form {...form}>
<form>
<DialogContent>
<DialogHeader>
<DialogTitle>Report an issue</DialogTitle>
<DialogDescription>What went wrong or how can we improve?</DialogDescription>
</DialogHeader>
<div className="grid grid-cols-2 gap-4">
<FormField
control={form.control}
name="issueType"
render={({ field }) => (
<FormItem>
<FormLabel>Area</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="What area is this" />
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value="bug">Bug</SelectItem>
<SelectItem value="feature">Feature Request</SelectItem>
<SelectItem value="security">Security</SelectItem>
<SelectItem value="payment">Payments</SelectItem>
<SelectItem value="question">General Question</SelectItem>
</SelectContent>
</Select>

<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="severity"
render={({ field }) => (
<FormItem>
<FormLabel>Severity</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Select a severity" />
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value="p0">Urgent</SelectItem>
<SelectItem value="p1">High</SelectItem>
<SelectItem value="p2">Normal</SelectItem>
<SelectItem value="p3">Low</SelectItem>
</SelectContent>
</Select>

<FormMessage />
</FormItem>
)}
/>
</div>
<FormField
control={form.control}
name="message"
render={({ field }) => (
<FormItem>
<FormLabel>What can we do for you?</FormLabel>
<FormControl>
<Textarea
{...field}
placeholder="Please include all information relevant to your issue."
/>
</FormControl>

<FormMessage />
</FormItem>
)}
/>

<DialogFooter>
<Button variant="ghost" onClick={() => setOpen(false)}>
Cancel
</Button>
<Button
type="submit"
disabled={create.isLoading}
onClick={form.handleSubmit((data) => {
create.mutate(data);
})}
>
{create.isLoading ? <Loading /> : "Send"}
</Button>
</DialogFooter>
</DialogContent>
</form>
</Form>
</Dialog>
<CommandItem>
<FeedbackComponent variant="command" />
</CommandItem>
);
};
13 changes: 11 additions & 2 deletions apps/dashboard/components/dashboard/feedback-component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,15 @@ import { z } from "zod";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";

export const Feedback: React.FC = () => {
type FeedbackVariant = "command";

interface FeedbackProps {
variant?: FeedbackVariant;
}

export const Feedback: React.FC<FeedbackProps> = ({ variant }) => {
const [open, setOpen] = useState(false);
const paddingClasses = variant === "command" ? "px-0" : "px-2.5";
/**
* This was necessary cause otherwise the dialog would not close when you're clicking outside of it
*/
Expand Down Expand Up @@ -53,7 +60,9 @@ export const Feedback: React.FC = () => {
});

return (
<div className="transition-all duration-150 group flex gap-x-2 rounded-md px-2 py-1 text-sm font-normal leading-6 items-center border border-transparent hover:bg-background-subtle hover:text-content justify-between">
<div
className={`transition-all duration-150 group flex gap-x-2 rounded-md text-sm font-normal leading-6 items-center border border-transparent hover:bg-background-subtle hover:text-content justify-between ${paddingClasses}`}
>
<button type="button" onClick={() => setOpen(true)} className="flex items-center">
<MessagesSquare className="w-4 h-4 mr-2" />
Feedback
Expand Down

0 comments on commit 4564e47

Please sign in to comment.