Working on S3 compatibility.

src/components/wrappers/Button/ButtonWithLoading/ButtonWithLoading.tsx

@@ -1,6 +1,6 @@
 "use client"
 import {Button} from "@/components/ui/button";
-import {useState} from "react";
+import {ButtonHTMLAttributes, useState} from "react";
 import {Loader2} from "lucide-react";
 
 export type VariantButton = {
@@ -21,19 +21,28 @@ export type ButtonWithConfirmProps = {
     isPending? : boolean
 };
 
-export const ButtonWithLoading = (props: ButtonWithConfirmProps) => {
+export const ButtonWithLoading = ({
+                                      icon,
+                                      text,
+                                      variant,
+                                      className,
+                                      onClick,
+                                      isPending,
+                                      ...props // catch all remaining props
+                                  }: ButtonWithConfirmProps & ButtonHTMLAttributes<HTMLButtonElement>) => {
     return(
         <Button
             onClick={() => {
-                    props.onClick()
+                onClick()
             }}
-            variant={props.variant ? props.variant : "default"}
-            className={props.className}
+            variant={variant ? variant : "default"}
+            className={className}
+            {...props} // forward the remaining props to the Button component
         >
-            {props.isPending && <Loader2 className="animate-spin mr-4" size={16}/>}
-            {props.text}
+            {isPending && <Loader2 className="animate-spin mr-4" size={16}/>}
+            {text}
             <>
-                {props.icon ? props.icon : null}
+                {icon ? icon : null}
             </>
         </Button>
     )

src/components/wrappers/Dashboard/Profile/ButtonDeleteAccount/delete-account.action.ts

@@ -18,6 +18,7 @@ export const deleteUserAction = userAction
             data: {
                 email: `${uuid}@portabase.com`,
                 name: `${uuid}`,
+                deleted: true
             }
         })
 

src/components/wrappers/Dashboard/Settings/SettingsEmailTab/SettingsEmailTab.tsx

@@ -39,7 +39,7 @@ export const SettingsEmailTab = (props: SettingsEmailTabProps) => {
     return (
         <div className="flex flex-col h-full  py-4">
             <div className="flex gap-4 h-fit justify-between">
-                <h1>Settings for Portabase storage</h1>
+                <h1>Settings for Portabase email setup</h1>
                 {props.settings.smtpFrom && (
                     <ButtonWithLoading
                         isPending={mutation.isPending}

src/components/wrappers/Dashboard/Settings/SettingsStorageTab/SettingsStorageTab.tsx

@@ -1,10 +1,15 @@
 import {Alert, AlertDescription, AlertTitle} from "@/components/ui/alert";
-import {Info} from "lucide-react";
+import {Info, Send, ShieldCheck} from "lucide-react";
 import {Switch} from "@/components/ui/switch";
 import {Label} from "@/components/ui/label";
 import {StorageS3Form} from "@/components/wrappers/Dashboard/Settings/SettingsStorageTab/StorageS3Form/StorageS3Form";
 import {useState} from "react";
 import {Settings} from "@prisma/client";
+import {ButtonWithLoading} from "@/components/wrappers/Button/ButtonWithLoading/ButtonWithLoading";
+import {useMutation} from "@tanstack/react-query";
+import {checkConnexionToS3} from "@/features/upload/upload.action";
+import {toast} from "sonner";
+
 
 export type SettingsStorageTabProps = {
     settings: Settings
@@ -12,7 +17,15 @@ export type SettingsStorageTabProps = {
 
 export const SettingsStorageTab = (props: SettingsStorageTabProps) => {
 
-
+    const mutation = useMutation({
+        mutationFn: async () => {
+            const result = await checkConnexionToS3()
+            if(result.error){
+                toast.error("An error occured during the connexion !")
+            }
+            toast.success("Connexion succeed!")
+        }
+    })
 
     const [isSwitched, setIsSwitched] = useState<boolean>(props.settings.storage !== "local");
 
@@ -29,7 +42,8 @@ export const SettingsStorageTab = (props: SettingsStorageTabProps) => {
                 </AlertDescription>
             </Alert>
             <div className="flex flex-col h-full  py-4 ">
-                <div className="flex items-center space-x-2">
+                <div className="flex items-center justify-between space-x-2">
+                    <div className="flex items-center space-x-2">
                     <Label htmlFor="storage-mode">Storage Mode (Local/s3 compatible)</Label>
                     <Switch
                         checked={isSwitched}
@@ -37,6 +51,18 @@ export const SettingsStorageTab = (props: SettingsStorageTabProps) => {
                             setIsSwitched(!isSwitched);
                         }}
                         id="storage-mode"/>
+                    </div>
+                    <div>
+                        <ButtonWithLoading
+                            disabled={!isSwitched}
+                            isPending={mutation.isPending}
+                            onClick={async () => {
+                                await mutation.mutateAsync()
+                            }}
+                            icon={<ShieldCheck />}
+                            text="Test connexion"
+                        />
+                    </div>
                 </div>
                 {isSwitched && (
                     <div className="mt-5">

src/components/wrappers/Dashboard/Settings/SettingsTabs/SettingsTabs.tsx

@@ -6,6 +6,7 @@ import {User, Settings} from "@prisma/client";
 import {backupColumns} from "@/features/backup/columns";
 import {SettingsEmailTab} from "@/components/wrappers/Dashboard/Settings/SettingsEmailTab/SettingsEmailTab";
 import {SettingsStorageTab} from "@/components/wrappers/Dashboard/Settings/SettingsStorageTab/SettingsStorageTab";
+import {SettingsUsersTab} from "@/components/wrappers/Dashboard/Settings/SettingsUsersTab/SettingsUsersTab";
 
 
 export type SettingsTabsProps = {
@@ -34,7 +35,7 @@ export const SettingsTabs = (props: SettingsTabsProps) => {
                 </div>
             </TabsContent>
             <TabsContent value="users" className="h-full justify-between">
-                <DataTableWithPagination columns={usersColumns} data={props.users}/>
+                <SettingsUsersTab users={props.users}/>
             </TabsContent>
             <TabsContent value="email">
                 <SettingsEmailTab settings={props.settings}/>

src/components/wrappers/Dashboard/Settings/SettingsTabs/columns-users.tsx

@@ -5,10 +5,6 @@ import {Badge} from "@/components/ui/badge";
 import {User} from "@prisma/client";
 
 export const usersColumns: ColumnDef<User>[] = [
-    {
-        accessorKey: "id",
-        header: "Id",
-    },
     {
         accessorKey: "name",
         header: "Name"

src/components/wrappers/Dashboard/Settings/SettingsUsersTab/SettingsUsersTab.tsx

@@ -0,0 +1,21 @@
+import {DataTableWithPagination} from "@/components/wrappers/table/data-table-with-pagination";
+import {usersColumns} from "@/components/wrappers/Dashboard/Settings/SettingsTabs/columns-users";
+import {User} from "@prisma/client";
+
+
+export type SettingsUsersTabProps = {
+    users: User[]
+}
+
+export const SettingsUsersTab = (props: SettingsUsersTabProps) => {
+    return (
+        <div className="flex flex-col h-full  py-4">
+            <div className="flex gap-4 h-fit justify-between">
+                <h1>List of Portabase users</h1>
+            </div>
+            <div className="mt-5">
+                <DataTableWithPagination columns={usersColumns} data={props.users}/>
+            </div>
+        </div>
+    )
+}