feat: dashboard v2, esm, upgrades (#211)
* esm * wip * wip * wip * wip * wip * wip * subscription notice * wip * wip * wip * fix envs * fix: update docker build * fix * esm/types * delete dashboard :D * add patches to dockerfiles * update packages + catalogs + ts * wip * remove native libs * ts * improvements * fix redirects and fetching session * try fix favicon * fixes * fix * order and resize reportds within a dashboard * improvements * wip * added userjot to dashboard * fix * add op * wip * different cache key * improve date picker * fix table * event details loading * redo onboarding completely * fix login * fix * fix * extend session, billing and improve bars * fix * reduce price on 10M
This commit is contained in:
Carl-Gerhard Lindesvärd
committed by
GitHub
GitHub
parent
436e81ecc9
commit
81a7e5d62e
299
apps/start/src/modals/save-report.tsx
Normal file
299
apps/start/src/modals/save-report.tsx
Normal file
@@ -0,0 +1,299 @@
|
||||
import { ButtonContainer } from '@/components/button-container';
|
||||
import { InputWithLabel } from '@/components/forms/input-with-label';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Combobox } from '@/components/ui/combobox';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { useAppParams } from '@/hooks/use-app-params';
|
||||
import { handleError } from '@/integrations/trpc/react';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { useRouter, useSearch } from '@tanstack/react-router';
|
||||
import { Controller, useForm } from 'react-hook-form';
|
||||
import { toast } from 'sonner';
|
||||
import { z } from 'zod';
|
||||
|
||||
import type { IChartProps } from '@openpanel/validation';
|
||||
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { useTRPC } from '@/integrations/trpc/react';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { ArrowLeftIcon, PlusIcon, SaveIcon } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import { popModal } from '.';
|
||||
import { ModalContent, ModalHeader } from './Modal/Container';
|
||||
|
||||
type SaveReportProps = {
|
||||
report: IChartProps;
|
||||
disableRedirect?: boolean;
|
||||
};
|
||||
|
||||
const validator = z.object({
|
||||
name: z.string().min(1, 'Required'),
|
||||
dashboardId: z.string().min(1, 'Required'),
|
||||
});
|
||||
|
||||
type IForm = z.infer<typeof validator>;
|
||||
|
||||
export default function SaveReport({
|
||||
report,
|
||||
disableRedirect,
|
||||
}: SaveReportProps) {
|
||||
const router = useRouter();
|
||||
const queryClient = useQueryClient();
|
||||
const { organizationId, projectId } = useAppParams();
|
||||
const searchParams = useSearch({
|
||||
from: '/_app/$organizationId/$projectId_/reports',
|
||||
shouldThrow: false,
|
||||
});
|
||||
const dashboardId = searchParams?.dashboardId;
|
||||
|
||||
const trpc = useTRPC();
|
||||
const save = useMutation(
|
||||
trpc.report.create.mutationOptions({
|
||||
onError: handleError,
|
||||
onSuccess(res) {
|
||||
const goToReport = () => {
|
||||
router.navigate({
|
||||
to: '/$organizationId/$projectId/reports/$reportId',
|
||||
params: {
|
||||
organizationId,
|
||||
projectId,
|
||||
reportId: res.id,
|
||||
},
|
||||
search: searchParams,
|
||||
});
|
||||
};
|
||||
|
||||
toast('Report created', {
|
||||
description: `${res.name}`,
|
||||
action: {
|
||||
label: 'View report',
|
||||
onClick: () => goToReport(),
|
||||
},
|
||||
});
|
||||
|
||||
if (!disableRedirect) {
|
||||
goToReport();
|
||||
}
|
||||
|
||||
popModal();
|
||||
},
|
||||
}),
|
||||
);
|
||||
const dashboardMutation = useMutation(
|
||||
trpc.dashboard.create.mutationOptions({
|
||||
onError: handleError,
|
||||
onSuccess(res) {
|
||||
setValue('dashboardId', res.id);
|
||||
dashboardQuery.refetch();
|
||||
queryClient.invalidateQueries(trpc.report.list.pathFilter());
|
||||
toast('Success', {
|
||||
description: 'Dashboard created.',
|
||||
});
|
||||
},
|
||||
}),
|
||||
);
|
||||
const dashboardQuery = useQuery(
|
||||
trpc.dashboard.list.queryOptions({
|
||||
projectId: projectId!,
|
||||
}),
|
||||
);
|
||||
|
||||
const { register, handleSubmit, formState, control, setValue } =
|
||||
useForm<IForm>({
|
||||
resolver: zodResolver(validator),
|
||||
defaultValues: {
|
||||
name: report.name,
|
||||
dashboardId,
|
||||
},
|
||||
});
|
||||
|
||||
const dashboards = (dashboardQuery.data ?? []).map((item) => ({
|
||||
value: item.id,
|
||||
label: item.name,
|
||||
}));
|
||||
|
||||
return (
|
||||
<ModalContent>
|
||||
<ModalHeader title="Create report" />
|
||||
<form
|
||||
className="flex flex-col gap-4"
|
||||
onSubmit={handleSubmit(({ name, ...values }) => {
|
||||
save.mutate({
|
||||
report: {
|
||||
...report,
|
||||
name,
|
||||
},
|
||||
...values,
|
||||
});
|
||||
})}
|
||||
>
|
||||
<InputWithLabel
|
||||
label="Report name"
|
||||
placeholder="Name"
|
||||
{...register('name')}
|
||||
defaultValue={report.name}
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
name="dashboardId"
|
||||
render={({ field }) => {
|
||||
return (
|
||||
<SelectDashboard
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
projectId={projectId!}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<ButtonContainer>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => popModal()}
|
||||
size="default"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={!formState.isValid} size="default">
|
||||
Save
|
||||
</Button>
|
||||
</ButtonContainer>
|
||||
</form>
|
||||
</ModalContent>
|
||||
);
|
||||
}
|
||||
|
||||
function SelectDashboard({
|
||||
value,
|
||||
onChange,
|
||||
projectId,
|
||||
}: {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
projectId: string;
|
||||
}) {
|
||||
const trpc = useTRPC();
|
||||
const [isCreatingNew, setIsCreatingNew] = useState(false);
|
||||
const [newDashboardName, setNewDashboardName] = useState('');
|
||||
|
||||
const form = useForm({
|
||||
resolver: zodResolver(z.object({ name: z.string().min(1, 'Required') })),
|
||||
defaultValues: {
|
||||
name: '',
|
||||
},
|
||||
});
|
||||
|
||||
const dashboardQuery = useQuery(
|
||||
trpc.dashboard.list.queryOptions({
|
||||
projectId: projectId!,
|
||||
}),
|
||||
);
|
||||
|
||||
const dashboardMutation = useMutation(
|
||||
trpc.dashboard.create.mutationOptions({
|
||||
onError: handleError,
|
||||
async onSuccess(res) {
|
||||
await dashboardQuery.refetch();
|
||||
onChange(res.id);
|
||||
setIsCreatingNew(false);
|
||||
setNewDashboardName('');
|
||||
form.reset();
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
||||
const handleSelectChange = (selectedValue: string) => {
|
||||
if (selectedValue === 'create-new') {
|
||||
setIsCreatingNew(true);
|
||||
onChange(''); // Clear the current selection
|
||||
} else {
|
||||
setIsCreatingNew(false);
|
||||
onChange(selectedValue);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateDashboard = () => {
|
||||
if (newDashboardName.trim()) {
|
||||
dashboardMutation.mutate({
|
||||
name: newDashboardName.trim(),
|
||||
projectId,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const selectedDashboard = dashboardQuery.data?.find((d) => d.id === value);
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<Label>Dashboard</Label>
|
||||
|
||||
{!isCreatingNew ? (
|
||||
<div className="row gap-2 flex-wrap">
|
||||
{dashboardQuery.data?.map((dashboard) => (
|
||||
<Button
|
||||
type="button"
|
||||
key={dashboard.id}
|
||||
variant={value === dashboard.id ? 'default' : 'outline'}
|
||||
onClick={() => onChange(dashboard.id)}
|
||||
>
|
||||
{dashboard.name}
|
||||
</Button>
|
||||
))}
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setIsCreatingNew(true);
|
||||
onChange('');
|
||||
}}
|
||||
icon={PlusIcon}
|
||||
>
|
||||
Create new dashboard
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
icon={ArrowLeftIcon}
|
||||
onClick={() => {
|
||||
setIsCreatingNew(false);
|
||||
setNewDashboardName('');
|
||||
form.reset();
|
||||
}}
|
||||
/>
|
||||
<Input
|
||||
placeholder="Enter dashboard name"
|
||||
value={newDashboardName}
|
||||
onChange={(e) => setNewDashboardName(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
handleCreateDashboard();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleCreateDashboard}
|
||||
disabled={!newDashboardName.trim() || dashboardMutation.isPending}
|
||||
variant="outline"
|
||||
icon={SaveIcon}
|
||||
>
|
||||
{dashboardMutation.isPending ? 'Creating...' : 'Create'}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user