Organization Settings Page

backend/src/database/sql.go

@@ -39,7 +39,8 @@ var (
 									INNER JOIN public."membership" m
 									ON o.org_id = m.org_id
 									WHERE user_id = $1
-									AND o.deleted = false`
+									AND o.deleted = false
+									AND m.deleted = false`
 
 	SelectOrganizationByOrgIdAndOwnerStatement = `SELECT * FROM public."organization"
 													WHERE org_id = $1

backend/src/server/server.go

@@ -24,7 +24,7 @@ func New(c *ServerConfig) http.Server {
 	return http.Server{
 		Addr: c.Address,
 		Handler: handlers.CORS(
-			handlers.AllowedMethods([]string{"GET", "POST", "PUT", "DELETE"}),
+			handlers.AllowedMethods([]string{"GET", "POST", "PUT", "PATCH", "DELETE"}),
 			handlers.AllowedOrigins([]string{"http://localhost:3000"}),
 			handlers.AllowedHeaders([]string{
 				"Content-Type",

flowforge_api_bruno/membership/update membership.bru

@@ -1,19 +1,19 @@
-meta {
-  name: update membership
-  type: http
-  seq: 3
-}
-
-patch {
-  url: {{HOST}}/membership
-  body: json
-  auth: inherit
-}
-
-body:json {
-  {
-    "user_id": "auth0|345678",
-    "org_id": 4,
-    "role": "Owner"
-  }
-}
+meta {
+  name: update membership
+  type: http
+  seq: 3
+}
+
+patch {
+  url: {{HOST}}/membership
+  body: json
+  auth: inherit
+}
+
+body:json {
+  {
+    "user_id": "auth0|345678",
+    "org_id": 4,
+    "role": "Owner"
+  }
+}

flowforge_api_bruno/organization/leave organization.bru

@@ -0,0 +1,15 @@
+meta {
+  name: leave organization
+  type: http
+  seq: 6
+}
+
+delete {
+  url: {{HOST}}/organization/{{org_id}}/membership
+  body: none
+  auth: none
+}
+
+vars:pre-request {
+  org_id: 
+}

frontend/next.config.js

@@ -8,6 +8,11 @@ const nextConfig = {
         destination: "/service-catalog",
         permanent: true,
       },
+      {
+        source: "/settings",
+        destination: "/settings/organization",
+        permanent: true,
+      },
     ]
   },
 }

frontend/src/app/(authenticated)/(main)/(non-admin)/service-catalog/[pipelineId]/_hooks/use-service-request-form.tsx

@@ -53,7 +53,7 @@ const useServiceRequestForm = ({
         router.push("/your-service-request-dashboard")
       })
       .catch((err) => {
-        console.log(err)
+        console.error(err)
         toast({
           title: "Request Submission Error",
           description: "Failed to submit the service request.",

frontend/src/app/(authenticated)/(main)/(non-admin)/service-catalog/[pipelineId]/_hooks/use-service-request.ts

@@ -4,7 +4,6 @@ import usePipeline from "@/hooks/use-pipeline"
 import { createServiceRequest } from "@/lib/service"
 import { generateUiSchema } from "@/lib/rjsf-utils"
 import { convertServiceRequestFormToRJSFSchema } from "@/lib/rjsf-utils"
-import { FormFieldType, JsonFormComponents } from "@/types/json-form-components"
 import { IChangeEvent } from "@rjsf/core"
 import { RJSFSchema } from "@rjsf/utils"
 import { useMemo, useState } from "react"
@@ -35,17 +34,16 @@ const useServiceRequestForm = ({
       return
     }
     createServiceRequest(organizationId, pipelineId, formData, service?.version)
-      .then((data) => {
+      .then(() => {
         toast({
           title: "Request Submission Successful",
           description:
             "Please check the dashboard for the status of the request.",
           variant: "success",
         })
-        console.log("Response: ", data)
       })
       .catch((err) => {
-        console.log(err)
+        console.error(err)
         toast({
           title: "Request Submission Error",
           description: "Failed to submit the service request.",

frontend/src/app/(authenticated)/(main)/(non-admin)/service-catalog/_hooks/use-services.ts

@@ -10,7 +10,7 @@ const useServices = () => {
     queryKey: ["pipelines"],
     queryFn: () =>
       getAllPipeline(organizationId).catch((err) => {
-        console.log(err)
+        console.error(err)
         toast({
           title: "Fetching Services Error",
           description: "Failed to fetch the services. Please try again later.",

frontend/src/app/(authenticated)/(main)/settings/_components/settings-sidebar.tsx

@@ -0,0 +1,38 @@
+"use client"
+
+import { cn } from "@/lib/utils"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+
+interface SettingsSidebarProps {
+  className?: string
+}
+
+const linkBaseStyle = "transition-colors w-full flex pl-2 py-1"
+const linkInactiveStyle = `${linkBaseStyle} hover:rounded-md hover:bg-muted hover:text-muted-foreground`
+const linkActiveStyle = `${linkInactiveStyle} rounded-md bg-gray-50`
+
+const links = [{ name: "Organization", href: "/settings/organization" }]
+
+export default function SettingsSidebar({ className }: SettingsSidebarProps) {
+  const pathname = usePathname()
+
+  return (
+    <div className={cn("flex flex-col gap-4 py-2", className)}>
+      <p className="font-bold">Settings</p>
+      <nav>
+        {links.map((link) => (
+          <Link
+            key={link.name}
+            href={link.href}
+            className={cn(
+              `${linkBaseStyle}, ${pathname === link.href ? linkActiveStyle : linkInactiveStyle}`
+            )}
+          >
+            {link.name}
+          </Link>
+        ))}
+      </nav>
+    </div>
+  )
+}

frontend/src/app/(authenticated)/(main)/settings/layout.tsx

@@ -0,0 +1,21 @@
+"use client"
+
+import MainNavigationLayout from "@/components/layouts/main-navigation-layout"
+import SettingsSidebar from "./_components/settings-sidebar"
+
+export default function SettingsLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <MainNavigationLayout enableOrgName={false}>
+      <div className="flex justify-center pt-10">
+        <div className="w-[90%] flex space-x-10">
+          <SettingsSidebar className="w-[20%]" />
+          <div className="w-[80%]">{children}</div>
+        </div>
+      </div>
+    </MainNavigationLayout>
+  )
+}

frontend/src/app/(authenticated)/(main)/settings/organization/_components/add-member-dialog.tsx

@@ -0,0 +1,142 @@
+import { Button, ButtonWithSpinner } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Search, X } from "lucide-react"
+import useAddMembers from "../_hooks/use-add-members"
+import { UserInfo } from "@/types/user-profile"
+import { useState } from "react"
+import useDebounce from "@/hooks/use-debounce"
+import { Role } from "@/types/membership"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Separator } from "@/components/ui/separator"
+
+interface AddMemberDialogProps {
+  children: React.ReactNode
+  existingMembers: UserInfo[]
+  organizationId: number
+  refetchMembers: () => void
+}
+
+export default function AddMemberDialog({
+  children,
+  existingMembers,
+  organizationId,
+  refetchMembers,
+}: AddMemberDialogProps) {
+  const [searchFilter, setSearchFilter] = useState("")
+  // Delay filter execution by 0.5s at each filter change
+  const { debouncedValue: debouncedFilter } = useDebounce(searchFilter, 500)
+  const {
+    allUsers,
+    selectedMember,
+    setSelectedMember,
+    handleAddMember,
+    isAddingMember,
+  } = useAddMembers({
+    existingMembers,
+    filter: debouncedFilter,
+    organizationId,
+    refetchMembers,
+  })
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Add member to the organization</DialogTitle>
+        </DialogHeader>
+
+        {selectedMember ? (
+          <>
+            <div className="border rounded-md flex items-center">
+              <p className="px-4 py-2">{selectedMember.name}</p>
+              <X
+                size="20"
+                className="ml-auto mr-2 cursor-pointer"
+                onClick={() => setSelectedMember(undefined)}
+              />
+            </div>
+            <p className="text-sm px-1">
+              Select a role for {selectedMember.name}
+            </p>
+            <Select
+              defaultValue={selectedMember.role}
+              onValueChange={(value) =>
+                setSelectedMember({ ...selectedMember, role: value as Role })
+              }
+            >
+              <SelectTrigger value={selectedMember.role} className="">
+                <SelectValue placeholder="Select role for member" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  <SelectItem value={Role.Member}>{Role.Member}</SelectItem>
+                  <SelectItem value={Role.Admin}>{Role.Admin}</SelectItem>
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+            <Separator className="w-full" />
+          </>
+        ) : (
+          <>
+            <div className="relative">
+              <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder="Search User by Username"
+                className="pl-8"
+                onChange={(e) => setSearchFilter(e.target.value)}
+              />
+            </div>
+            <div className="max-h-[20rem] overflow-y-auto">
+              <div className="border rounded-md">
+                <ul className="divide-y divide-slate-200">
+                  {allUsers?.map((user) => (
+                    <li
+                      key={user.user_id}
+                      className="px-4 py-2 cursor-pointer hover:text-blue-500"
+                      onClick={() => {
+                        // Set default role as Member
+                        setSelectedMember({ ...user, role: Role.Member })
+                        setSearchFilter("")
+                      }}
+                    >
+                      <p>{user.name}</p>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          </>
+        )}
+        <DialogFooter>
+          <ButtonWithSpinner
+            type="submit"
+            className="w-full"
+            disabled={!selectedMember || isAddingMember}
+            onClick={() => handleAddMember()}
+            isLoading={isAddingMember}
+          >
+            {!selectedMember
+              ? "Select a user"
+              : `Add ${selectedMember.name} to organization`}
+          </ButtonWithSpinner>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

frontend/src/app/(authenticated)/(main)/settings/organization/_components/change-org-name-form.tsx

@@ -0,0 +1,60 @@
+"use client"
+
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import useUpdateOrgNameForm from "../_hooks/use-update-org-name-form"
+import { Input } from "@/components/ui/input"
+import { useUserMemberships } from "@/contexts/user-memberships-context"
+import { ButtonWithSpinner } from "@/components/ui/button"
+
+interface ChangeOrgNameFormProps {
+  organizationId: number
+  updateOrgNameInCookie: (name: string) => void
+}
+
+export default function ChangeOrgNameForm({
+  organizationId,
+  updateOrgNameInCookie,
+}: ChangeOrgNameFormProps) {
+  const { updateOrgNameLoading, form, onFormSubmit } = useUpdateOrgNameForm({
+    organizationId,
+    updateOrgNameInCookie,
+  })
+
+  const { isOwner } = useUserMemberships()
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onFormSubmit)} className="space-y-5">
+        <h1 className="text-xl">Change Organization Name</h1>
+        <FormField
+          control={form.control}
+          name="orgName"
+          render={({ field }) => (
+            <FormItem className="space-y-2">
+              <FormDescription>
+                Only the owner of the organization can change the name.
+              </FormDescription>
+              <FormControl>
+                <Input {...field} disabled={!isOwner} className="max-w-md" />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <ButtonWithSpinner
+          isLoading={updateOrgNameLoading}
+          disabled={updateOrgNameLoading || !isOwner}
+        >
+          Change
+        </ButtonWithSpinner>
+      </form>
+    </Form>
+  )
+}