From f69e995204c16e22df7d62cf9d14cfb8cb3f9aa4 Mon Sep 17 00:00:00 2001
From: nael <ouldbelkacemnael@yahoo.fr>
Date: Thu, 30 Nov 2023 17:29:54 +0100
Subject: [PATCH] :adhesive_bandage: Simple fix

fixed team switch
---
 .../api-keys/components/choose-project.tsx    | 188 ------------------
 .../webapp/src/components/api-keys/index.tsx  |   2 -
 .../src/components/shared/team-switcher.tsx   | 113 ++++++-----
 3 files changed, 61 insertions(+), 242 deletions(-)
 delete mode 100644 packages/webapp/src/components/api-keys/components/choose-project.tsx

diff --git a/packages/webapp/src/components/api-keys/components/choose-project.tsx b/packages/webapp/src/components/api-keys/components/choose-project.tsx
deleted file mode 100644
index b396b7f12..000000000
--- a/packages/webapp/src/components/api-keys/components/choose-project.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  CaretSortIcon,
-  CheckIcon,
-} from "@radix-ui/react-icons"
-
-import { cn } from "@/lib/utils"
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/components/ui/avatar"
-import { Button } from "@/components/ui/button"
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-} from "@/components/ui/command"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
-
-const groups = [
-  {
-    label: "Projects",
-    teams: [
-      {
-        label: "Project 1",
-        value: "project1",
-      },
-      {
-        label: "Project 2",
-        value: "project2",
-      },
-    ],
-  },
-]
-
-type Team = (typeof groups)[number]["teams"][number]
-
-type PopoverTriggerProps = React.ComponentPropsWithoutRef<typeof PopoverTrigger>
-
-interface TeamSwitcherProps extends PopoverTriggerProps {}
-
-export default function ChooseProjectSwitcher({ className }: TeamSwitcherProps) {
-  const [open, setOpen] = React.useState(false)
-  const [showNewTeamDialog, setShowNewTeamDialog] = React.useState(false)
-  const [selectedTeam, setSelectedTeam] = React.useState<Team>(
-    groups[0].teams[0]
-  )
-
-  return (
-    <Dialog open={showNewTeamDialog} onOpenChange={setShowNewTeamDialog}>
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            variant="outline"
-            role="combobox"
-            aria-expanded={open}
-            aria-label="Select a project"
-            className={cn("w-[200px] justify-between", className)}
-          >
-            <Avatar className="mr-2 h-3 w-3">
-              <AvatarImage
-                src={`https://avatar.vercel.sh/${selectedTeam.value}.png`}
-                alt={selectedTeam.label}
-              />
-              <AvatarFallback>SC</AvatarFallback>
-            </Avatar>
-            Choose your project
-            <CaretSortIcon className="ml-auto h-4 w-4 shrink-0 opacity-50" />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className="w-[200px] p-0 ml-20">
-          <Command>
-            <CommandList>
-              <CommandInput placeholder="Search project..." />
-              <CommandEmpty>No project found.</CommandEmpty>
-              {groups.map((group) => (
-                <CommandGroup key={group.label} heading={group.label}>
-                  {group.teams.map((team) => (
-                    <CommandItem
-                      key={team.value}
-                      onSelect={() => {
-                        setSelectedTeam(team)
-                        setOpen(false)
-                      }}
-                      className="text-sm"
-                    >
-                      <Avatar className="mr-2 h-5 w-5">
-                        <AvatarImage
-                          src={`https://avatar.vercel.sh/${team.value}.png`}
-                          alt={team.label}
-                          className="grayscale"
-                        />
-                        <AvatarFallback>SC</AvatarFallback>
-                      </Avatar>
-                      {team.label}
-                      <CheckIcon
-                        className={cn(
-                          "ml-auto h-4 w-4",
-                          selectedTeam.value === team.value
-                            ? "opacity-100"
-                            : "opacity-0"
-                        )}
-                      />
-                    </CommandItem>
-                  ))}
-                </CommandGroup>
-              ))}
-            </CommandList>
-            <CommandSeparator />
-      
-          </Command>
-        </PopoverContent>
-      </Popover>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Create team</DialogTitle>
-          <DialogDescription>
-            Add a new team to manage products and customers.
-          </DialogDescription>
-        </DialogHeader>
-        <div>
-          <div className="space-y-4 py-2 pb-4">
-            <div className="space-y-2">
-              <Label htmlFor="name">Team name</Label>
-              <Input id="name" placeholder="Acme Inc." />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="plan">Subscription plan</Label>
-              <Select>
-                <SelectTrigger>
-                  <SelectValue placeholder="Select a plan" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="free">
-                    <span className="font-medium">Free</span> -{" "}
-                    <span className="text-muted-foreground">
-                      Trial for two weeks
-                    </span>
-                  </SelectItem>
-                  <SelectItem value="pro">
-                    <span className="font-medium">Pro</span> -{" "}
-                    <span className="text-muted-foreground">
-                      $9/month per user
-                    </span>
-                  </SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-          </div>
-        </div>
-        <DialogFooter>
-          <Button variant="outline" onClick={() => setShowNewTeamDialog(false)}>
-            Cancel
-          </Button>
-          <Button type="submit">Continue</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  )
-}
\ No newline at end of file
diff --git a/packages/webapp/src/components/api-keys/index.tsx b/packages/webapp/src/components/api-keys/index.tsx
index 5297416b6..4f49f929f 100644
--- a/packages/webapp/src/components/api-keys/index.tsx
+++ b/packages/webapp/src/components/api-keys/index.tsx
@@ -1,6 +1,5 @@
 import { PlusCircledIcon } from "@radix-ui/react-icons";
 import { Button } from "../ui/button";
-import ChooseProjectSwitcher from "./components/choose-project";
 import { useEffect, useState } from "react";
 import { API_KEYS } from "./data/api-keys";
 import { columns } from "./data/columns";
@@ -41,7 +40,6 @@ export default function ApiKeysPage() {
         </div>          
         <div className="flex space-y-8 md:flex pb-4">
           <div></div>
-          <ChooseProjectSwitcher className="w-52 mr-4" />
           <Dialog>
             <DialogTrigger asChild>
               <Button>
diff --git a/packages/webapp/src/components/shared/team-switcher.tsx b/packages/webapp/src/components/shared/team-switcher.tsx
index 4d88b4d8f..ffe3dece1 100644
--- a/packages/webapp/src/components/shared/team-switcher.tsx
+++ b/packages/webapp/src/components/shared/team-switcher.tsx
@@ -39,13 +39,6 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
 
 const groups = [
   {
@@ -86,15 +79,27 @@ type PopoverTriggerProps = React.ComponentPropsWithoutRef<typeof PopoverTrigger>
 
 interface TeamSwitcherProps extends PopoverTriggerProps {}
 
+interface ModalObj {
+  open: boolean;
+  status?: number; // 0 for org, 1 for project
+}
+
 export default function TeamSwitcher({ className }: TeamSwitcherProps) {
   const [open, setOpen] = React.useState(false)
-  const [showNewTeamDialog, setShowNewTeamDialog] = React.useState(false)
   const [selectedTeam, setSelectedTeam] = React.useState<Team>(
     groups[0].teams[0]
   )
 
+  const [showNewDialog, setShowNewDialog] = React.useState<ModalObj>({
+    open: false,
+  })
+
+  const handleOpenChange = (open: boolean) => {
+    setShowNewDialog(prevState => ({ ...prevState, open }));
+  };
+
   return (
-    <Dialog open={showNewTeamDialog} onOpenChange={setShowNewTeamDialog}>
+    <Dialog open={showNewDialog.open} onOpenChange={handleOpenChange}>
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger asChild>
           <Button
@@ -154,18 +159,18 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) {
                   <CommandItem
                     onSelect={() => {
                       setOpen(false)
-                      setShowNewTeamDialog(true)
+                      setShowNewDialog({open: true, status: 0})
                     }}
                   >
                     <PlusCircledIcon className="mr-2 h-5 w-5" />
-                    Create Team
+                    Create Organisation
                   </CommandItem>
                 </DialogTrigger>
                 <DialogTrigger asChild>
                   <CommandItem
                     onSelect={() => {
                       setOpen(false)
-                      setShowNewTeamDialog(true)
+                      setShowNewDialog({open: true, status: 1})
                     }}
                   >
                     <PlusCircledIcon className="mr-2 h-5 w-5" />
@@ -178,48 +183,52 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) {
         </PopoverContent>
       </Popover>
       <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Create team</DialogTitle>
-          <DialogDescription>
-            Add a new team to manage products and customers.
-          </DialogDescription>
-        </DialogHeader>
-        <div>
-          <div className="space-y-4 py-2 pb-4">
-            <div className="space-y-2">
-              <Label htmlFor="name">Team name</Label>
-              <Input id="name" placeholder="Acme Inc." />
+        {showNewDialog.status == 0 ? 
+          <>
+            <DialogHeader>
+              <DialogTitle>Create organisation</DialogTitle>
+              <DialogDescription>
+                Add a new organisation to manage your integrations.
+              </DialogDescription>
+            </DialogHeader>
+            <div>
+              <div className="space-y-4 py-2 pb-4">
+                <div className="space-y-2">
+                  <Label htmlFor="name">Organisation name</Label>
+                  <Input id="name" placeholder="Acme Inc." />
+                </div>
+              </div>
             </div>
-            <div className="space-y-2">
-              <Label htmlFor="plan">Subscription plan</Label>
-              <Select>
-                <SelectTrigger>
-                  <SelectValue placeholder="Select a plan" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="free">
-                    <span className="font-medium">Free</span> -{" "}
-                    <span className="text-muted-foreground">
-                      Trial for two weeks
-                    </span>
-                  </SelectItem>
-                  <SelectItem value="pro">
-                    <span className="font-medium">Pro</span> -{" "}
-                    <span className="text-muted-foreground">
-                      $9/month per user
-                    </span>
-                  </SelectItem>
-                </SelectContent>
-              </Select>
+            <DialogFooter>
+              <Button variant="outline" onClick={() => setShowNewDialog({open:false})}>
+                Cancel
+              </Button>
+              <Button type="submit">Continue</Button>
+            </DialogFooter>
+          </> : 
+          <>
+            <DialogHeader>
+              <DialogTitle>Create project</DialogTitle>
+              <DialogDescription>
+                Add a new project to manage your integrations.
+              </DialogDescription>
+            </DialogHeader>
+            <div>
+              <div className="space-y-4 py-2 pb-4">
+                <div className="space-y-2">
+                  <Label htmlFor="name">Project name</Label>
+                  <Input id="name" placeholder="Project Inc." />
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
-        <DialogFooter>
-          <Button variant="outline" onClick={() => setShowNewTeamDialog(false)}>
-            Cancel
-          </Button>
-          <Button type="submit">Continue</Button>
-        </DialogFooter>
+            <DialogFooter>
+              <Button variant="outline" onClick={() => setShowNewDialog({open:false})}>
+                Cancel
+              </Button>
+              <Button type="submit">Continue</Button>
+            </DialogFooter>
+          </>
+        }
       </DialogContent>
     </Dialog>
   )