feat: add organization edit page

Signed-off-by: Gabor Boros <[email protected]>

Author: gabor-boros

assets/queries/bootstrap.cypher

@@ -30,6 +30,14 @@ ON CREATE SET r.created_at = datetime();
 
 // ============================================================================
 // Create system roles to manage resources
+//
+// The users with system roles assigned are considered superusers. However,
+// they shouldn't access __ALL__ resources. Some resources may contain private
+// or sensitive data to the individual user. For example, a user may create a
+// TODO item for themselves that should not be visible to other users.
+//
+// All other resources are considered public within the platform and can be
+// accessed by all users (with necessary permissions).
 // ============================================================================
 
 // Create roles
@@ -48,7 +56,6 @@ UNWIND [
   'Organization',
   'Project',
   'Role',
-  'Todo',
   'User'
 ] AS t
 UNWIND [
@@ -57,7 +64,8 @@ UNWIND [
   ['Support', 'read', 'write']
 ] AS bindings
 WITH t, bindings[0] AS role, bindings[1..] AS permissions
-MATCH (rt:ResourceType {id: t}), (r:Role {id: role})
+MATCH (rt:ResourceType {id: t})
+OPTIONAL MATCH (r:Role {id: role, system: true})
 WITH rt, r, permissions
 UNWIND permissions AS permission
 MERGE (r)-[p:HAS_PERMISSION {kind: permission}]->(rt)

web/src/components/auth/auth-provider.tsx

@@ -1,5 +1,5 @@
 import { useNavigate } from "@tanstack/react-router";
-import { useEffect, useReducer } from "react";
+import { useEffect, useReducer, useRef } from "react";
 import type { ReactNode } from "react";
 
 import { client, v1UserGet } from "@/lib/api";
@@ -20,6 +20,7 @@ import type {
   LoginCredentials,
   User,
 } from "@/lib/auth/types";
+import { queryClient } from "@/lib/query-client";
 
 type AuthAction =
   | { type: "SET_LOADING"; payload: boolean }
@@ -74,6 +75,15 @@ interface AuthProviderProps {
 export function AuthProvider({ children }: AuthProviderProps) {
   const navigate = useNavigate();
   const [state, dispatch] = useReducer(authReducer, initialState);
+  const prevIsAuthenticatedRef = useRef<boolean>(false);
+
+  // Clear query cache when authentication state transitions from authenticated to unauthenticated
+  useEffect(() => {
+    if (prevIsAuthenticatedRef.current && !state.isAuthenticated) {
+      queryClient.clear();
+    }
+    prevIsAuthenticatedRef.current = state.isAuthenticated;
+  }, [state.isAuthenticated]);
 
   // Initialize auth state on mount
   useEffect(() => {
@@ -188,6 +198,7 @@ export function AuthProvider({ children }: AuthProviderProps) {
 
   const login = async (credentials: LoginCredentials): Promise<void> => {
     try {
+      queryClient.clear();
       dispatch({ type: "SET_LOADING", payload: true });
       dispatch({ type: "SET_ERROR", payload: null });
 
@@ -220,6 +231,7 @@ export function AuthProvider({ children }: AuthProviderProps) {
 
   // eslint-disable-next-line @typescript-eslint/require-await
   const logout = async (): Promise<void> => {
+    queryClient.clear();
     tokenRefreshService.stopAutoRefresh();
     clearAllAuthData();
     dispatch({ type: "CLEAR_AUTH" });

web/src/components/notification/notification-item.tsx

@@ -20,10 +20,12 @@ export function NotificationItem({
   notification,
   onSuccess,
 }: NotificationItemProps) {
+  const queryClient = useQueryClient();
+
   const deleteMutation = useMutation({
     ...v1NotificationDeleteMutation(),
     onSuccess: () => {
-      useQueryClient().invalidateQueries({
+      queryClient.invalidateQueries({
         queryKey: v1NotificationsGetOptions().queryKey,
       });
       showSuccessToast(

web/src/components/organizations/index.ts

@@ -6,6 +6,7 @@ export * from "./organization-detail-header";
 export * from "./organization-detail-info";
 export * from "./organization-detail-field";
 export * from "./organization-detail-skeleton";
+export * from "./organization-edit-form";
 export * from "./organization-list";
 export * from "./organization-list-skeleton";
 export * from "./organization-members-list";

web/src/components/organizations/organization-detail-info.tsx

@@ -1,6 +1,10 @@
+import { Link } from "@tanstack/react-router";
+import { Edit } from "lucide-react";
+
 import { OrganizationDetailField } from "./organization-detail-field";
 
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   Card,
   CardContent,
@@ -9,21 +13,48 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { ExternalLink } from "@/components/ui/external-link";
+import {
+  ResourceType,
+  usePermissions,
+  withResourceType,
+} from "@/hooks/use-permissions";
 import type { Organization } from "@/lib/api";
+import { can } from "@/lib/auth/permissions";
 import { formatDate } from "@/lib/utils";
 
 export function OrganizationDetailInfo({
   organization,
 }: {
   organization: Organization;
 }) {
+  const { data: permissions } = usePermissions(
+    withResourceType(ResourceType.Organization, organization.id)
+  );
+
+  const hasWritePermission = can(permissions, "write");
+
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Organization Information</CardTitle>
-        <CardDescription>
-          Details about the organization and its status.
-        </CardDescription>
+        <div className="flex items-start justify-between">
+          <div>
+            <CardTitle>Organization Information</CardTitle>
+            <CardDescription>
+              Details about the organization and its status.
+            </CardDescription>
+          </div>
+          {hasWritePermission && (
+            <Button variant="outline" size="sm" asChild>
+              <Link
+                to="/settings/organizations/$organizationId/edit"
+                params={{ organizationId: organization.id }}
+              >
+                <Edit className="mr-2 size-4" />
+                Edit
+              </Link>
+            </Button>
+          )}
+        </div>
       </CardHeader>
       <CardContent className="space-y-4">
         <div className="grid grid-cols-1 gap-4 md:grid-cols-2">

web/src/components/organizations/organization-edit-form.tsx

@@ -0,0 +1,229 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation } from "@tanstack/react-query";
+import { useNavigate } from "@tanstack/react-router";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import type { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Spinner } from "@/components/ui/spinner";
+import type { Organization } from "@/lib/api";
+import { v1OrganizationUpdateMutation } from "@/lib/client/@tanstack/react-query.gen";
+import { zOrganizationPatch } from "@/lib/client/zod.gen";
+import { showErrorToast, showSuccessToast } from "@/lib/toast";
+
+// Create a schema without logo and status fields for the form
+// TODO: Add logo field when implementing image upload
+const organizationEditFormSchema = zOrganizationPatch.omit({
+  logo: true,
+  status: true,
+});
+
+type OrganizationEditFormValues = z.infer<typeof organizationEditFormSchema>;
+
+interface OrganizationEditFormProps {
+  organization: Organization;
+  organizationId: string;
+}
+
+export function OrganizationEditForm({
+  organization,
+  organizationId,
+}: OrganizationEditFormProps) {
+  const navigate = useNavigate();
+
+  const form = useForm<OrganizationEditFormValues>({
+    resolver: zodResolver(organizationEditFormSchema),
+    defaultValues: {
+      name: organization.name,
+      email: organization.email,
+      website: organization.website || undefined,
+    },
+  });
+
+  // Update form when organization data changes
+  useEffect(() => {
+    form.reset({
+      name: organization.name,
+      email: organization.email,
+      website: organization.website || undefined,
+    });
+  }, [organization, form]);
+
+  const mutation = useMutation(v1OrganizationUpdateMutation());
+
+  const onSubmit = (values: OrganizationEditFormValues) => {
+    const body: {
+      name?: string;
+      email?: string;
+      website?: string;
+    } = {};
+
+    // Only include fields that have changed or are explicitly provided
+    if (values.name !== organization.name) {
+      body.name = values.name;
+    }
+    if (values.email !== organization.email) {
+      body.email = values.email;
+    }
+    if (values.website !== (organization.website || undefined)) {
+      body.website = values.website;
+    }
+
+    // If no changes, don't submit
+    if (Object.keys(body).length === 0) {
+      showErrorToast(
+        "No changes",
+        "Please make changes to the organization before saving."
+      );
+      return;
+    }
+
+    mutation.mutate(
+      {
+        path: {
+          id: organizationId,
+        },
+        body,
+      },
+      {
+        onSuccess: () => {
+          showSuccessToast(
+            "Organization updated",
+            "Organization updated successfully"
+          );
+          navigate({
+            to: "/settings/organizations/$organizationId",
+            params: { organizationId },
+          });
+        },
+        onError: (error) => {
+          showErrorToast("Failed to update organization", error.message);
+        },
+      }
+    );
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Edit Organization</CardTitle>
+        <CardDescription>
+          Update the organization details below.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="flex flex-col gap-y-6"
+          >
+            {mutation.isError && (
+              <div className="text-destructive text-sm">
+                <p>{mutation.error.message}</p>
+              </div>
+            )}
+
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Name</FormLabel>
+                  <FormControl>
+                    <Input placeholder="Enter organization name" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="email"
+                      placeholder="Enter organization email"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="website"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Website</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="url"
+                      placeholder="https://example.com (optional)"
+                      value={field.value || ""}
+                      onChange={(e) => {
+                        const value = e.target.value;
+                        field.onChange(value === "" ? undefined : value);
+                      }}
+                      onBlur={field.onBlur}
+                      name={field.name}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="flex justify-end gap-2">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() =>
+                  navigate({
+                    to: "/settings/organizations/$organizationId",
+                    params: { organizationId },
+                  })
+                }
+                disabled={mutation.isPending}
+              >
+                Cancel
+              </Button>
+              <Button type="submit" disabled={mutation.isPending}>
+                {mutation.isPending ? (
+                  <>
+                    <Spinner size="xs" className="mr-0.5 text-white" />
+                    <span>Saving...</span>
+                  </>
+                ) : (
+                  "Save Changes"
+                )}
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </CardContent>
+    </Card>
+  );
+}