Better info tab, fix for #36 #38 multiple enhacements

caioricciuti · Nov 10, 2024 · 12429b5 · 12429b5
1 parent cb5da33
commit 12429b5
Show file tree

Hide file tree

Showing 24 changed files with 1,422 additions and 173 deletions.
diff --git a/src/features/admin/components/ClickhouseDefaultConfiguration.tsx b/src/features/admin/components/ClickhouseDefaultConfiguration.tsx
@@ -79,4 +79,4 @@ export default function ClickhouseDefaultConfiguration() {
       </CardContent>
     </Card>
   );
-}
+}
diff --git a/src/features/admin/components/CreateUser/DatabaseRolesSection.tsx b/src/features/admin/components/CreateUser/DatabaseRolesSection.tsx
@@ -1,26 +1,28 @@
 // components/CreateNewUser/DatabaseRolesSection.tsx
 import React from "react";
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
-import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage, FormDescription } from "@/components/ui/form";
+import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
 import { X } from "lucide-react";
 import { Button } from "@/components/ui/button";
 
 interface DatabaseRolesSectionProps {
   form: any;
+  roles: string[];
+  databases: string[];
 }
 
-const DatabaseRolesSection: React.FC<DatabaseRolesSectionProps> = ({ form }) => {
-  const databases = form.watch("grantDatabases") || [];
+const DatabaseRolesSection: React.FC<DatabaseRolesSectionProps> = ({ form, roles, databases }) => {
+  const grantDatabases = form.watch("grantDatabases") || [];
 
   return (
     <Card>
       <CardHeader>
         <CardTitle>Database and Roles</CardTitle>
       </CardHeader>
       <CardContent className="space-y-4">
+        {/* Default Role */}
         <FormField
           control={form.control}
           name="defaultRole"
@@ -34,7 +36,7 @@ const DatabaseRolesSection: React.FC<DatabaseRolesSectionProps> = ({ form }) =>
                   </SelectTrigger>
                 </FormControl>
                 <SelectContent>
-                  {form.getValues("roles")?.map((role: string) => (
+                  {roles.map((role) => (
                     <SelectItem key={role} value={role}>
                       {role}
                     </SelectItem>
@@ -46,6 +48,7 @@ const DatabaseRolesSection: React.FC<DatabaseRolesSectionProps> = ({ form }) =>
           )}
         />
 
+        {/* Default Database */}
         <FormField
           control={form.control}
           name="defaultDatabase"
@@ -59,7 +62,7 @@ const DatabaseRolesSection: React.FC<DatabaseRolesSectionProps> = ({ form }) =>
                   </SelectTrigger>
                 </FormControl>
                 <SelectContent>
-                  {form.getValues("databases")?.map((db: string) => (
+                  {databases.map((db) => (
                     <SelectItem key={db} value={db}>
                       {db}
                     </SelectItem>
@@ -71,6 +74,7 @@ const DatabaseRolesSection: React.FC<DatabaseRolesSectionProps> = ({ form }) =>
           )}
         />
 
+        {/* Grant Access to Databases */}
         <FormField
           control={form.control}
           name="grantDatabases"
@@ -79,8 +83,8 @@ const DatabaseRolesSection: React.FC<DatabaseRolesSectionProps> = ({ form }) =>
               <FormLabel>Grant Access to Databases</FormLabel>
               <Select
                 onValueChange={(value: string) => {
-                  if (!field.value.includes(value)) {
-                    field.onChange([...field.value, value]);
+                  if (!grantDatabases.includes(value)) {
+                    form.setValue("grantDatabases", [...grantDatabases, value]);
                   }
                 }}
               >
@@ -90,20 +94,29 @@ const DatabaseRolesSection: React.FC<DatabaseRolesSectionProps> = ({ form }) =>
                   </SelectTrigger>
                 </FormControl>
                 <SelectContent>
-                  {form.getValues("databases")?.map((db: string) => (
-                    <SelectItem key={db} value={db} disabled={field.value.includes(db)}>
+                  {databases.map((db) => (
+                    <SelectItem
+                      key={db}
+                      value={db}
+                      disabled={grantDatabases.includes(db)}
+                    >
                       {db}
                     </SelectItem>
                   ))}
                 </SelectContent>
               </Select>
               <div className="flex flex-wrap gap-2 mt-2">
-                {field.value.map((db: string) => (
+                {grantDatabases.map((db: string) => (
                   <Badge
                     key={db}
                     variant="secondary"
                     className="hover:bg-destructive hover:text-destructive-foreground cursor-pointer"
-                    onClick={() => field.onChange(field.value.filter((v: string) => v !== db))}
+                    onClick={() =>
+                      form.setValue(
+                        "grantDatabases",
+                        grantDatabases.filter((v: string) => v !== db)
+                      )
+                    }
                   >
                     {db}
                     <X className="ml-1 h-3 w-3" />

diff --git a/src/features/admin/components/CreateUser/index.tsx b/src/features/admin/components/CreateUser/index.tsx
@@ -1,28 +1,27 @@
 // components/CreateNewUser/index.tsx
-import { Alert, AlertDescription } from "@/components/ui/alert";
+import React, { useState } from "react";
 import { Button } from "@/components/ui/button";
-import { Form } from "@/components/ui/form";
+import { Plus } from "lucide-react";
 import {
   Sheet,
   SheetContent,
   SheetHeader,
   SheetTitle,
   SheetTrigger,
 } from "@/components/ui/sheet";
-import { Plus } from "lucide-react";
-import React, { useState } from "react";
-import { useForm } from "react-hook-form";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Form } from "@/components/ui/form";
 import { toast } from "sonner";
+import { useForm } from "react-hook-form";
 import useAppStore from "@/store";
 import { format } from "date-fns";
-import { generateRandomPassword } from "@/lib/utils"
-
-import useMetadata from "./hooks/useMetadata";
-import AccessControlSection from "./AccessControlSection";
+import { generateRandomPassword } from "@/lib/utils";
 import AuthenticationSection from "./AuthenticationSection";
+import AccessControlSection from "./AccessControlSection";
 import DatabaseRolesSection from "./DatabaseRolesSection";
 import PrivilegesSection from "./PrivilegesSection";
 import SettingsSection from "./SettingsSection";
+import useMetadata from "./hooks/useMetadata";
 
 interface CreateNewUserProps {
   onUserCreated: () => void;
@@ -32,7 +31,6 @@ const CreateNewUser: React.FC<CreateNewUserProps> = ({ onUserCreated }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
-  const { runQuery } = useAppStore();
 
   const form = useForm({
     defaultValues: {
@@ -62,7 +60,8 @@ const CreateNewUser: React.FC<CreateNewUserProps> = ({ onUserCreated }) => {
     },
   });
 
-  const metadata = useMetadata(isOpen);
+  const metadata = useMetadata(isOpen); // Fetch roles, databases, profiles
+  const { runQuery } = useAppStore();
 
   const onSubmit = async (data: any) => {
     try {
@@ -215,21 +214,36 @@ const CreateNewUser: React.FC<CreateNewUserProps> = ({ onUserCreated }) => {
             onSubmit={form.handleSubmit(onSubmit)}
             className="space-y-4 pt-6"
           >
+            {/* Authentication Section */}
             <AuthenticationSection
               form={form}
               handleGeneratePassword={handleGeneratePassword}
             />
+
+            {/* Access Control Section */}
             <AccessControlSection form={form} />
-            <DatabaseRolesSection form={form} />
+
+            {/* Database and Roles Section */}
+            <DatabaseRolesSection
+              form={form}
+              roles={metadata.roles}
+              databases={metadata.databases}
+            />
+
+            {/* Privileges Section */}
             <PrivilegesSection form={form} />
+
+            {/* Settings Section */}
             <SettingsSection form={form} profiles={metadata.profiles} />
 
+            {/* Error Alert */}
             {error && (
               <Alert variant="destructive">
                 <AlertDescription>{error}</AlertDescription>
               </Alert>
             )}
 
+            {/* Submit Button */}
             <Button type="submit" className="w-full" disabled={loading}>
               {loading ? "Creating..." : "Create User"}
             </Button>

diff --git a/src/features/explorer/components/CreateTable.tsx b/src/features/explorer/components/CreateTable.tsx
@@ -10,7 +10,6 @@ import {
 } from "@/components/ui/sheet";
 import { toast } from "sonner";
 import useAppStore from "@/store";
-import InfoDialog from "@/components/common/InfoDialog";
 
 import ConfirmationDialog from "@/components/common/ConfirmationDialog";
 import ManualCreationForm from "@/features/explorer/components/ManualCreationForm";

diff --git a/src/features/explorer/components/ManualCreationForm.tsx b/src/features/explorer/components/ManualCreationForm.tsx
@@ -11,7 +11,9 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Copy, CopyCheck, X } from "lucide-react";
-import FieldManagement, { Field } from "@/features/explorer/components/FieldManagement";
+import FieldManagement, {
+  Field,
+} from "@/features/explorer/components/FieldManagement";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 
 interface ManualCreationFormProps {
@@ -134,7 +136,7 @@ const ManualCreationForm: React.FC<ManualCreationFormProps> = ({
           {/* Engine Selector */}
           <div className="flex flex-col">
             <Label htmlFor="engine-select" className="mb-3">
-              Database Engine
+              Table Engine
             </Label>
             <Select
               value={engine}
@@ -147,6 +149,7 @@ const ManualCreationForm: React.FC<ManualCreationFormProps> = ({
                 {[
                   "MergeTree",
                   "ReplacingMergeTree",
+                  "ReplicatedMergeTree",
                   "SummingMergeTree",
                   "AggregatingMergeTree",
                   "CollapsingMergeTree",

diff --git a/src/features/explorer/components/TreeNode.tsx b/src/features/explorer/components/TreeNode.tsx
@@ -129,9 +129,13 @@ const TreeNode: React.FC<TreeNodeProps> = ({
     );
     setConfirmAction(() => async () => {
       try {
-        await runQuery(`DROP DATABASE ${database}`);
-        toast.success(`Dropped database ${database}`);
-        refreshData();
+        const result = await runQuery(`DROP DATABASE ${database}`);
+        if (result.error) {
+          toast.error(result.error);
+        } else {
+          toast.success(`Dropped database ${database}`);
+          refreshData();
+        }
       } catch (error) {
         toast.error(`Failed to drop database ${database}`);
       }
-Original file line number
+Diff line change
@@ Expand Up / @@ -79,4 +79,4 @@ export default function ClickhouseDefaultConfiguration() { @@
           </CardContent>
         </Card>
       );
-    }
+    }