Merge branch 'main' of https://github.com/panoratech/Panora

panoratech · Nov 30, 2023 · 36c29cf · 36c29cf
2 parents 16a3ef4 + 9196c3c
commit 36c29cf
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 242 deletions.
diff --git a/packages/webapp/src/components/api-keys/components/choose-project.tsx b/packages/webapp/src/components/api-keys/components/choose-project.tsx
diff --git 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
@@ -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>
   )