Merge pull request #105 from panoratech/feat/nael-web-ui

💄 Ui boilerplate updated

packages/webapp/src/App.tsx

@@ -4,7 +4,7 @@ import DashboardPage from './components/dashboard'
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import JobsPage from './components/jobs';
 import ConnectionsPage from './components/connections';
-import TaskPage from './components/jobs/Task';
+import TaskPage from './components/jobs/JobsTable';
 
 function App() {
   return (

packages/webapp/src/components/api-keys/components/choose-project.tsx

@@ -4,7 +4,6 @@ import * as React from "react"
 import {
   CaretSortIcon,
   CheckIcon,
-  PlusCircledIcon,
 } from "@radix-ui/react-icons"
 
 import { cn } from "@/lib/utils"
@@ -30,7 +29,6 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-  DialogTrigger,
 } from "@/components/ui/dialog"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
@@ -49,15 +47,15 @@ import {
 
 const groups = [
   {
-    label: "Teams",
+    label: "Projects",
     teams: [
       {
-        label: "Acme Inc.",
-        value: "acme-inc",
+        label: "Project 1",
+        value: "project1",
       },
       {
-        label: "Monsters Inc.",
-        value: "monsters",
+        label: "Project 2",
+        value: "project2",
       },
     ],
   },
@@ -84,7 +82,7 @@ export default function ChooseProjectSwitcher({ className }: TeamSwitcherProps)
             variant="outline"
             role="combobox"
             aria-expanded={open}
-            aria-label="Select a team"
+            aria-label="Select a project"
             className={cn("w-[200px] justify-between", className)}
           >
             <Avatar className="mr-2 h-3 w-3">
@@ -101,8 +99,8 @@ export default function ChooseProjectSwitcher({ className }: TeamSwitcherProps)
         <PopoverContent className="w-[200px] p-0 ml-20">
           <Command>
             <CommandList>
-              <CommandInput placeholder="Search team..." />
-              <CommandEmpty>No team found.</CommandEmpty>
+              <CommandInput placeholder="Search project..." />
+              <CommandEmpty>No project found.</CommandEmpty>
               {groups.map((group) => (
                 <CommandGroup key={group.label} heading={group.label}>
                   {group.teams.map((team) => (
@@ -137,21 +135,7 @@ export default function ChooseProjectSwitcher({ className }: TeamSwitcherProps)
               ))}
             </CommandList>
             <CommandSeparator />
-            <CommandList>
-              <CommandGroup>
-                <DialogTrigger asChild>
-                  <CommandItem
-                    onSelect={() => {
-                      setOpen(false)
-                      setShowNewTeamDialog(true)
-                    }}
-                  >
-                    <PlusCircledIcon className="mr-2 h-5 w-5" />
-                    Create Team
-                  </CommandItem>
-                </DialogTrigger>
-              </CommandGroup>
-            </CommandList>
+
           </Command>
         </PopoverContent>
       </Popover>

packages/webapp/src/components/api-keys/data/columns.tsx

@@ -4,8 +4,8 @@ import { ColumnDef } from "@tanstack/react-table"
 
 
 import { ApiKey } from "./schema"
-import { DataTableColumnHeader } from "./../../jobs/components/data-table-column-header"
-import { DataTableRowActions } from "./../../jobs/components/data-table-row-actions"
+import { DataTableColumnHeader } from "../../shared/data-table-column-header"
+import { DataTableRowActions } from "../../shared/data-table-row-actions"
 
 export const columns: ColumnDef<ApiKey>[] = [
   {

packages/webapp/src/components/api-keys/index.tsx

@@ -4,7 +4,7 @@ import ChooseProjectSwitcher from "./components/choose-project";
 import { useEffect, useState } from "react";
 import { API_KEYS } from "./data/api-keys";
 import { columns } from "./data/columns";
-import { DataTable } from "../jobs/components/data-table";
+import { DataTable } from "../shared/data-table";
 import {
   Dialog,
   DialogContent,
@@ -26,50 +26,50 @@ export default function ApiKeysPage() {
   const [apiKeys, setApiKeys] = useState<ApiKey[]>();
 
   useEffect(() => {
-    async function loadTasks() {
-      //const fetchedTasks = await getTasks();
+    async function loadApiKeys() {
       setApiKeys(API_KEYS);
     }
-    loadTasks();
+    loadApiKeys();
   }, []);
-    return (
 
-<div className="flex items-center justify-between space-y-2">
-<div className="flex-1 space-y-4 p-8 pt-6">
-<div className="flex flex-col items-start justify-between space-y-2">
-  <h2 className="text-3xl font-bold tracking-tight">Api Keys</h2>
-  <h2 className="text-lg font-bold tracking-tight">Manage your api keys.</h2>
-</div>          
-<div className="flex space-y-8 md:flex pb-4">
+  return (
+    <div className="flex items-center justify-between space-y-2">
+      <div className="flex-1 space-y-4 p-8 pt-6">
+        <div className="flex flex-col items-start justify-between space-y-2">
+          <h2 className="text-3xl font-bold tracking-tight">Api Keys</h2>
+          <h2 className="text-lg font-bold tracking-tight">Manage your api keys.</h2>
+        </div>          
+        <div className="flex space-y-8 md:flex pb-4">
           <div></div>
           <ChooseProjectSwitcher className="w-52 mr-4" />
           <Dialog>
-          <DialogTrigger asChild>
-          <Button>
-            <PlusCircledIcon className="mr-2 h-4 w-4" />
-            Create New Key
-          </Button>
-          </DialogTrigger>
-          <DialogContent>
-            <DialogHeader>
-              <DialogTitle>Add New Api Key</DialogTitle>
-              <DialogDescription>
-                Never share this key, you must saved it it will be displayed once !
-              </DialogDescription>
-            </DialogHeader>
-            <div className="grid gap-4 py-4">
-              <div className="grid gap-2">
-                <Label htmlFor="url">Name</Label>
-                <Input id="url" placeholder="My Best Key For Finance Data" />
+            <DialogTrigger asChild>
+              <Button>
+                <PlusCircledIcon className="mr-2 h-4 w-4" />
+                Create New Key
+              </Button>
+            </DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Add New Api Key</DialogTitle>
+                <DialogDescription>
+                  Never share this key, you must saved it it will be displayed once !
+                </DialogDescription>
+              </DialogHeader>
+              <div className="grid gap-4 py-4">
+                <div className="grid gap-2">
+                  <Label htmlFor="url">Name</Label>
+                  <Input id="url" placeholder="My Best Key For Finance Data" />
+                </div>
               </div>
-            </div>
-            <DialogFooter>
-              <Button>Create</Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
+              <DialogFooter>
+                <Button>Create</Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
         </div>
-        {apiKeys && <DataTable data={apiKeys} columns={columns} />}</div>
-</div>
-    );
-  }
+        {apiKeys && <DataTable data={apiKeys} columns={columns} />}
+      </div>
+    </div>
+  );
+}

packages/webapp/src/components/configuration/components/AddLinkedAccount.tsx

@@ -0,0 +1,133 @@
+import { Button } from "@/components/ui/button"
+import {
+  Command,
+  CommandGroup,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} 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 { PlusCircledIcon } from "@radix-ui/react-icons"
+import { cn } from "@/lib/utils"
+import React from "react"
+
+interface LinkedUserModalObj {
+  open: boolean;
+  import?: boolean;
+}
+
+const AddLinkedAccount = () => {
+  const [open, setOpen] = React.useState(false)
+  const [showNewLinkedUserDialog, setShowNewLinkedUserDialog] = React.useState<LinkedUserModalObj>({
+    open: false,
+    import: false
+  })
+
+  const handleOpenChange = (open: boolean) => {
+    setShowNewLinkedUserDialog(prevState => ({ ...prevState, open }));
+  };
+
+  return (
+    <Dialog open={showNewLinkedUserDialog.open} onOpenChange={handleOpenChange}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            aria-label="Select a team"
+            className={cn("w-[180px] justify-between")}
+          >
+            <PlusCircledIcon className="mr-2 h-5 w-5" />
+            Add Linked Users
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-[220px] p-0 ml-20">
+          <Command>
+            <CommandList>
+              <CommandGroup>
+                <DialogTrigger asChild>
+                  <CommandItem
+                    onSelect={() => {
+                      setOpen(false)
+                      setShowNewLinkedUserDialog({
+                          open: true,
+                          import: false
+                      })
+                    }}
+                  >
+                    <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.5 0.875C5.49797 0.875 3.875 2.49797 3.875 4.5C3.875 6.15288 4.98124 7.54738 6.49373 7.98351C5.2997 8.12901 4.27557 8.55134 3.50407 9.31167C2.52216 10.2794 2.02502 11.72 2.02502 13.5999C2.02502 13.8623 2.23769 14.0749 2.50002 14.0749C2.76236 14.0749 2.97502 13.8623 2.97502 13.5999C2.97502 11.8799 3.42786 10.7206 4.17091 9.9883C4.91536 9.25463 6.02674 8.87499 7.49995 8.87499C8.97317 8.87499 10.0846 9.25463 10.8291 9.98831C11.5721 10.7206 12.025 11.8799 12.025 13.5999C12.025 13.8623 12.2376 14.0749 12.5 14.0749C12.7623 14.075 12.975 13.8623 12.975 13.6C12.975 11.72 12.4778 10.2794 11.4959 9.31166C10.7244 8.55135 9.70025 8.12903 8.50625 7.98352C10.0187 7.5474 11.125 6.15289 11.125 4.5C11.125 2.49797 9.50203 0.875 7.5 0.875ZM4.825 4.5C4.825 3.02264 6.02264 1.825 7.5 1.825C8.97736 1.825 10.175 3.02264 10.175 4.5C10.175 5.97736 8.97736 7.175 7.5 7.175C6.02264 7.175 4.825 5.97736 4.825 4.5Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
+                    <p className="ml-2">Add New Linked User</p>
+                  </CommandItem>
+                </DialogTrigger>
+                <DialogTrigger asChild>
+                  <CommandItem
+                    onSelect={() => {
+                      setOpen(false)
+                      setShowNewLinkedUserDialog({
+                        open: true,
+                        import: true
+                      })
+                    }}
+                  >
+                    <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.81825 1.18188C7.64251 1.00615 7.35759 1.00615 7.18185 1.18188L4.18185 4.18188C4.00611 4.35762 4.00611 4.64254 4.18185 4.81828C4.35759 4.99401 4.64251 4.99401 4.81825 4.81828L7.05005 2.58648V9.49996C7.05005 9.74849 7.25152 9.94996 7.50005 9.94996C7.74858 9.94996 7.95005 9.74849 7.95005 9.49996V2.58648L10.1819 4.81828C10.3576 4.99401 10.6425 4.99401 10.8182 4.81828C10.994 4.64254 10.994 4.35762 10.8182 4.18188L7.81825 1.18188ZM2.5 9.99997C2.77614 9.99997 3 10.2238 3 10.5V12C3 12.5538 3.44565 13 3.99635 13H11.0012C11.5529 13 12 12.5528 12 12V10.5C12 10.2238 12.2239 9.99997 12.5 9.99997C12.7761 9.99997 13 10.2238 13 10.5V12C13 13.104 12.1062 14 11.0012 14H3.99635C2.89019 14 2 13.103 2 12V10.5C2 10.2238 2.22386 9.99997 2.5 9.99997Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
+                    <p className="ml-2">Import your Linked Users</p>
+                  </CommandItem>
+                </DialogTrigger>
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{showNewLinkedUserDialog.import ? "Import your linked users": "Create a new linked user"}</DialogTitle>
+          <DialogDescription>
+            {showNewLinkedUserDialog.import ? "You can upload a sheet of your existing linked users" : "Add a new linked user to your project"}
+          </DialogDescription>
+        </DialogHeader>
+        <div>
+          <div className="space-y-4 py-2 pb-4">
+            {!showNewLinkedUserDialog.import ?
+              ( <>
+                  <div className="space-y-2">
+                    <Label htmlFor="name">Linked User Origin Identifier</Label>
+                    <Input id="name" placeholder="acme-inc-user-123" />
+                  </div>
+                </>
+              ) : 
+              <>
+                <div className="space-y-2">
+                  <Label htmlFor="picture">Upload your file</Label>
+                  <Input className="h-20" id="picture" type="file" />
+                </div>
+              </>
+            }
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setShowNewLinkedUserDialog({open: false})}>
+            Cancel
+          </Button>
+          <Button type="submit">{showNewLinkedUserDialog.import ? "Import" : "Create"}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>    
+  )
+}
+
+export default AddLinkedAccount;