zias/stats
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

change how we create/edit clients

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2024-04-12 20:32:12 +02:00
committed by Carl-Gerhard Lindesvärd
parent 7f8d857508
commit bface463e2
16 changed files with 243 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
apps/dashboard/src/app/(app)/create-organization.tsx
View File

@@ -1,12 +1,14 @@
'use client';
import { useState } from 'react';
import AnimateHeight from '@/components/animate-height';
import { CreateClientSuccess } from '@/components/clients/create-client-success';
import { LogoSquare } from '@/components/logo';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Button, buttonVariants } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Switch } from '@/components/ui/switch';
import { api, handleError } from '@/trpc/client';
import { cn } from '@/utils/cn';
import { zodResolver } from '@hookform/resolvers/zod';
@@ -16,33 +18,23 @@ import type { SubmitHandler } from 'react-hook-form';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
const validation = z
.object({
organization: z.string().min(3),
project: z.string().min(3),
cors: z.string().nullable(),
tab: z.string(),
})
.refine(
(data) =>
data.tab === 'other' || (data.tab === 'website' && data.cors !== ''),
{
message: 'Cors is required',
path: ['cors'],
}
);
const validation = z.object({
organization: z.string().min(3),
project: z.string().min(3),
cors: z.string().url().or(z.literal('')),
});
type IForm = z.infer<typeof validation>;
export function CreateOrganization() {
const router = useRouter();
const [hasDomain, setHasDomain] = useState(true);
const form = useForm<IForm>({
resolver: zodResolver(validation),
defaultValues: {
organization: '',
project: '',
cors: '',
tab: 'website',
},
});
const mutation = api.onboarding.organziation.useMutation({
@@ -51,7 +43,7 @@ export function CreateOrganization() {
const onSubmit: SubmitHandler<IForm> = (values) => {
mutation.mutate({
...values,
cors: values.tab === 'website' ? values.cors : null,
cors: hasDomain ? values.cors : null,
});
};
@@ -128,29 +120,19 @@ export function CreateOrganization() {
/>
</div>
<Tabs
defaultValue="website"
onValueChange={(val) => form.setValue('tab', val)}
className="h-28"
>
<TabsList className="bg-slate-200">
<TabsTrigger value="website">Website</TabsTrigger>
<TabsTrigger value="other">Other</TabsTrigger>
</TabsList>
<TabsContent value="website">
<Label>Cors *</Label>
<div>
<Label className="flex items-center justify-between">
<span>Domain</span>
<Switch checked={hasDomain} onCheckedChange={setHasDomain} />
</Label>
<AnimateHeight open={hasDomain}>
<Input
placeholder="https://example.com"
error={form.formState.errors.cors?.message}
{...form.register('cors')}
/>
</TabsContent>
<TabsContent value="other">
<div className="rounded bg-background p-2 px-3 text-sm">
🔑 You will get a secret to use for your API requests.
</div>
</TabsContent>
</Tabs>
</AnimateHeight>
</div>
<div className="flex justify-end">
<Button

21
apps/dashboard/src/components/animate-height.tsx Normal file
View File

@@ -0,0 +1,21 @@
import ReactAnimateHeight from 'react-animate-height';
type Props = {
children: React.ReactNode;
className?: string;
open: boolean;
};
const AnimateHeight = ({ children, className, open }: Props) => {
return (
<ReactAnimateHeight
duration={300}
height={open ? 'auto' : 0}
className={className}
>
{children}
</ReactAnimateHeight>
);
};
export default AnimateHeight;

42
apps/dashboard/src/components/clients/create-client-success.tsx
View File

@@ -1,7 +1,6 @@
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { clipboard } from '@/utils/clipboard';
import { Copy, RocketIcon } from 'lucide-react';
import Link from 'next/link';
import type { IServiceClient } from '@openpanel/db';
@@ -19,17 +18,28 @@ export function CreateClientSuccess({ id, secret, cors }: Props) {
<Copy size={16} />
</div>
</button>
{secret ? (
<button className="text-left" onClick={() => clipboard(secret)}>
<Label>Secret</Label>
<div className="flex items-center justify-between rounded bg-gray-100 p-2 px-3">
{secret}
<Copy size={16} />
</div>
</button>
) : (
{secret && (
<div className="w-full">
<button
className="w-full text-left"
onClick={() => clipboard(secret)}
>
<Label>Client secret</Label>
<div className="flex items-center justify-between rounded bg-gray-100 p-2 px-3">
{secret}
<Copy size={16} />
</div>
</button>
{cors && (
<p className="mt-1 text-xs text-muted-foreground">
You will only need the secret if you want to send server events.
</p>
)}
</div>
)}
{cors && (
<div className="text-left">
<Label>Cors settings</Label>
<Label>CORS settings</Label>
<div className="flex items-center justify-between rounded bg-gray-100 p-2 px-3">
{cors}
</div>
@@ -39,7 +49,15 @@ export function CreateClientSuccess({ id, secret, cors }: Props) {
<RocketIcon className="h-4 w-4" />
<AlertTitle>Get started!</AlertTitle>
<AlertDescription>
Read our documentation to get started. Easy peasy!
Read our{' '}
<a
target="_blank"
href="https://docs.openpanel.dev"
className="underline"
>
documentation
</a>{' '}
to get started. Easy peasy!
</AlertDescription>
</Alert>
</div>

2
apps/dashboard/src/components/clients/table.tsx
View File

@@ -14,7 +14,7 @@ export const columns: ColumnDef<IServiceClientWithProject>[] = [
<div>
<div>{row.original.name}</div>
<div className="text-sm text-muted-foreground">
{row.original.project.name}
{row.original.project?.name ?? 'No project'}
</div>
</div>
);

5
apps/dashboard/src/components/overview/overview-live-histogram.tsx
View File

@@ -1,12 +1,11 @@
'use client';
import { Fragment } from 'react';
import { api } from '@/trpc/client';
import { cn } from '@/utils/cn';
import AnimateHeight from 'react-animate-height';
import type { IChartInput } from '@openpanel/validation';
import AnimateHeight from '../animate-height';
import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
import { useOverviewOptions } from './useOverviewOptions';
@@ -135,7 +134,7 @@ interface WrapperProps {
function Wrapper({ open, children, count }: WrapperProps) {
return (
<AnimateHeight duration={500} height={open ? 'auto' : 0}>
<AnimateHeight open={open}>
<div className="flex flex-col items-end md:flex-row">
<div className="md:card flex items-end max-md:mb-2 max-md:w-full max-md:justify-between md:mr-2 md:flex-col md:p-4">
<div className="text-sm max-md:mb-1">Last 30 minutes</div>

26
apps/dashboard/src/components/ui/switch.tsx Normal file
View File

@@ -0,0 +1,26 @@
import * as React from 'react';
import { cn } from '@/utils/cn';
import * as SwitchPrimitives from '@radix-ui/react-switch';
const Switch = React.forwardRef<
React.ElementRef<typeof SwitchPrimitives.Root>,
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
>(({ className, ...props }, ref) => (
<SwitchPrimitives.Root
className={cn(
'peer inline-flex h-4 w-7 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-blue-600 data-[state=unchecked]:bg-input',
className
)}
{...props}
ref={ref}
>
<SwitchPrimitives.Thumb
className={cn(
'pointer-events-none block h-3 w-3 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0'
)}
/>
</SwitchPrimitives.Root>
));
Switch.displayName = SwitchPrimitives.Root.displayName;
export { Switch };

101
apps/dashboard/src/modals/AddClient.tsx
View File

@@ -1,12 +1,14 @@
'use client';
import { useState } from 'react';
import AnimateHeight from '@/components/animate-height';
import { CreateClientSuccess } from '@/components/clients/create-client-success';
import { Button, buttonVariants } from '@/components/ui/button';
import { Combobox } from '@/components/ui/combobox';
import { DialogFooter } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Switch } from '@/components/ui/switch';
import { useAppParams } from '@/hooks/useAppParams';
import { api, handleError } from '@/trpc/client';
import { cn } from '@/utils/cn';
@@ -21,21 +23,12 @@ import { z } from 'zod';
import { popModal } from '.';
import { ModalContent, ModalHeader } from './Modal/Container';
const validation = z
.object({
name: z.string().min(1),
cors: z.string().nullable(),
tab: z.string(),
projectId: z.string(),
})
.refine(
(data) =>
data.tab === 'other' || (data.tab === 'website' && data.cors !== ''),
{
message: 'Cors is required',
path: ['cors'],
}
);
const validation = z.object({
name: z.string().min(1),
cors: z.string().url().or(z.literal('')),
projectId: z.string(),
type: z.enum(['read', 'write', 'root']),
});
type IForm = z.infer<typeof validation>;
@@ -50,10 +43,11 @@ export default function AddClient(props: Props) {
defaultValues: {
name: '',
cors: '',
tab: 'website',
projectId: props.projectId ?? projectId,
type: 'write',
},
});
const [hasDomain, setHasDomain] = useState(true);
const mutation = api.client.create.useMutation({
onError: handleError,
onSuccess() {
@@ -67,7 +61,7 @@ export default function AddClient(props: Props) {
const onSubmit: SubmitHandler<IForm> = (values) => {
mutation.mutate({
name: values.name,
cors: values.tab === 'website' ? values.cors : null,
cors: hasDomain ? values.cors : null,
projectId: values.projectId,
organizationSlug,
});
@@ -134,29 +128,64 @@ export default function AddClient(props: Props) {
{...form.register('name')}
/>
</div>
<Tabs
defaultValue="website"
onValueChange={(val) => form.setValue('tab', val)}
className="h-28"
>
<TabsList className="bg-slate-200">
<TabsTrigger value="website">Website</TabsTrigger>
<TabsTrigger value="other">Other</TabsTrigger>
</TabsList>
<TabsContent value="website">
<Label>Cors</Label>
<div>
<Label className="flex items-center justify-between">
<span>Domain</span>
<Switch checked={hasDomain} onCheckedChange={setHasDomain} />
</Label>
<AnimateHeight open={hasDomain}>
<Input
placeholder="https://example.com"
error={form.formState.errors.cors?.message}
{...form.register('cors')}
/>
</TabsContent>
<TabsContent value="other">
<div className="rounded bg-background p-2 px-3 text-sm">
🔑 You will get a secret to use for your API requests.
</div>
</TabsContent>
</Tabs>
</AnimateHeight>
</div>
<div>
<Controller
control={form.control}
name="type"
render={({ field }) => {
return (
<div>
<Label>Type of client</Label>
<Combobox
{...field}
className="w-full"
onChange={(value) => {
field.onChange(value);
}}
items={[
{
value: 'write',
label: 'Write (for ingestion)',
},
{
value: 'read',
label: 'Read (access export API)',
},
{
value: 'root',
label: 'Root (access export API)',
},
]}
placeholder="Select a project"
/>
<p className="mt-1 text-xs text-muted-foreground">
{field.value === 'write' &&
'Write: Is the default client type and is used for ingestion of data'}
{field.value === 'read' &&
'Read: You can access the current projects data from the export API'}
{field.value === 'root' &&
'Root: You can access any projects data from the export API'}
</p>
</div>
);
}}
/>
</div>
<DialogFooter>
<Button
type="button"

4
apps/dashboard/src/modals/EditClient.tsx
View File

@@ -18,7 +18,7 @@ type EditClientProps = IServiceClient;
const validator = z.object({
id: z.string().min(1),
name: z.string().min(1),
cors: z.string().min(1),
cors: z.string().nullable(),
});
type IForm = z.infer<typeof validator>;
@@ -59,13 +59,11 @@ export default function EditClient({ id, name, cors }: EditClientProps) {
label="Name"
placeholder="Name"
{...register('name')}
defaultValue={name}
/>
<InputWithLabel
label="Cors"
placeholder="Cors"
{...register('cors')}
defaultValue={cors}
/>
</div>
<ButtonContainer>

27
apps/dashboard/src/trpc/api/routers/client.ts
View File

@@ -3,6 +3,7 @@ import { createTRPCRouter, protectedProcedure } from '@/trpc/api/trpc';
import { z } from 'zod';
import { hashPassword, stripTrailingSlash } from '@openpanel/common';
import type { Prisma } from '@openpanel/db';
import { db } from '@openpanel/db';
export const clientRouter = createTRPCRouter({
@@ -11,7 +12,7 @@ export const clientRouter = createTRPCRouter({
z.object({
id: z.string(),
name: z.string(),
cors: z.string(),
cors: z.string().nullable(),
})
)
.mutation(({ input }) => {
@@ -21,7 +22,7 @@ export const clientRouter = createTRPCRouter({
},
data: {
name: input.name,
cors: input.cors,
cors: input.cors ?? null,
},
});
}),
@@ -32,23 +33,25 @@ export const clientRouter = createTRPCRouter({
projectId: z.string(),
organizationSlug: z.string(),
cors: z.string().nullable(),
type: z.enum(['read', 'write', 'root']).optional(),
})
)
.mutation(async ({ input }) => {
const secret = randomUUID();
const client = await db.client.create({
data: {
organizationSlug: input.organizationSlug,
projectId: input.projectId,
name: input.name,
secret: input.cors ? null : await hashPassword(secret),
cors: input.cors ? stripTrailingSlash(input.cors) : '*',
},
});
const data: Prisma.ClientCreateArgs['data'] = {
organizationSlug: input.organizationSlug,
projectId: input.projectId,
name: input.name,
type: input.type ?? 'write',
cors: input.cors ? stripTrailingSlash(input.cors) : null,
secret: await hashPassword(secret),
};
const client = await db.client.create({ data });
return {
...client,
secret: input.cors ? null : secret,
secret,
};
}),
remove: protectedProcedure

7
apps/dashboard/src/trpc/api/routers/onboarding.ts
View File

@@ -35,15 +35,16 @@ export const onboardingRouter = createTRPCRouter({
name: `${project.name} Client`,
organizationSlug: org.slug,
projectId: project.id,
cors: input.cors ? stripTrailingSlash(input.cors) : '*',
secret: input.cors ? null : await hashPassword(secret),
type: 'write',
cors: input.cors ? stripTrailingSlash(input.cors) : null,
secret: await hashPassword(secret),
},
});
return {
client: {
...client,
secret: input.cors ? null : secret,
secret,
},
project,
organization: transformOrganization(org),