web: easier to navigate around + a lot of minor ui improvements

apps/web/src/modals/AddDashboard.tsx

@@ -0,0 +1,78 @@
+import { ButtonContainer } from '@/components/ButtonContainer';
+import { InputWithLabel } from '@/components/forms/InputWithLabel';
+import { Button } from '@/components/ui/button';
+import { toast } from '@/components/ui/use-toast';
+import { useRefetchActive } from '@/hooks/useRefetchActive';
+import { api, handleError } from '@/utils/api';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { popModal } from '.';
+import { ModalContent, ModalHeader } from './Modal/Container';
+
+interface AddDashboardProps {
+  organizationSlug: string;
+  projectSlug: string;
+}
+
+const validator = z.object({
+  name: z.string().min(1, 'Required'),
+});
+
+type IForm = z.infer<typeof validator>;
+
+export default function AddDashboard({
+  // organizationSlug,
+  projectSlug,
+}: AddDashboardProps) {
+  const refetch = useRefetchActive();
+
+  const { register, handleSubmit, formState } = useForm<IForm>({
+    resolver: zodResolver(validator),
+    defaultValues: {
+      name: '',
+    },
+  });
+
+  const mutation = api.dashboard.create.useMutation({
+    onError: handleError,
+    onSuccess() {
+      refetch();
+      toast({
+        title: 'Success',
+        description: 'Dashboard created.',
+      });
+      popModal();
+    },
+  });
+
+  return (
+    <ModalContent>
+      <ModalHeader title="Edit client" />
+      <form
+        className="flex flex-col gap-4"
+        onSubmit={handleSubmit(({ name }) => {
+          mutation.mutate({
+            name,
+            projectSlug,
+          });
+        })}
+      >
+        <InputWithLabel
+          label="Name"
+          placeholder="Name of the dashboard"
+          {...register('name')}
+        />
+        <ButtonContainer>
+          <Button type="button" variant="outline" onClick={() => popModal()}>
+            Cancel
+          </Button>
+          <Button type="submit" disabled={!formState.isDirty}>
+            Create
+          </Button>
+        </ButtonContainer>
+      </form>
+    </ModalContent>
+  );
+}

apps/web/src/modals/SaveReport.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { ButtonContainer } from '@/components/ButtonContainer';
 import { InputWithLabel } from '@/components/forms/InputWithLabel';
 import { Button } from '@/components/ui/button';
@@ -8,6 +9,7 @@ import { useOrganizationParams } from '@/hooks/useOrganizationParams';
 import { useRefetchActive } from '@/hooks/useRefetchActive';
 import type { IChartInput } from '@/types';
 import { api, handleError } from '@/utils/api';
+import { strip } from '@/utils/object';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useRouter } from 'next/router';
 import { Controller, useForm } from 'react-hook-form';
@@ -30,7 +32,7 @@ type IForm = z.infer<typeof validator>;
 
 export default function SaveReport({ report }: SaveReportProps) {
   const router = useRouter();
-  const { organization, project } = useOrganizationParams();
+  const { organization, project, dashboard } = useOrganizationParams();
   const refetch = useRefetchActive();
   const save = api.report.save.useMutation({
     onError: handleError,
@@ -41,7 +43,10 @@ export default function SaveReport({ report }: SaveReportProps) {
       });
       popModal();
       refetch();
-      router.push(`/${organization}/${project}/reports/${res.id}`);
+      router.push({
+        pathname: `/${organization}/${project}/reports/${res.id}`,
+        query: strip({ dashboard }),
+      });
     },
   });
 
@@ -58,7 +63,7 @@ export default function SaveReport({ report }: SaveReportProps) {
     onError: handleError,
     onSuccess(res) {
       setValue('dashboardId', res.id);
-      dashboasrdQuery.refetch();
+      dashboardQuery.refetch();
       toast({
         title: 'Success',
         description: 'Dashboard created.',
@@ -66,15 +71,24 @@ export default function SaveReport({ report }: SaveReportProps) {
     },
   });
 
-  const dashboasrdQuery = api.dashboard.list.useQuery({
+  const dashboardQuery = api.dashboard.list.useQuery({
     projectSlug: project,
   });
 
-  const dashboards = (dashboasrdQuery.data ?? []).map((item) => ({
+  const dashboards = (dashboardQuery.data ?? []).map((item) => ({
     value: item.id,
     label: item.name,
   }));
 
+  useEffect(() => {
+    if (dashboard && dashboardQuery.data) {
+      const match = dashboardQuery.data.find((item) => item.slug === dashboard);
+      if (match) {
+        setValue('dashboardId', match.id);
+      }
+    }
+  }, [dashboard, dashboardQuery]);
+
   return (
     <ModalContent>
       <ModalHeader title="Edit client" />

apps/web/src/modals/index.tsx

@@ -31,6 +31,9 @@ const modals = {
   SaveReport: dynamic(() => import('./SaveReport'), {
     loading: Loading,
   }),
+  AddDashboard: dynamic(() => import('./AddDashboard'), {
+    loading: Loading,
+  }),
 };
 
 const emitter = mitt<{