refresh button for role, user, share-link, invitation table

src/components/InvitationsDataTable.tsx

@@ -9,11 +9,15 @@ import { useTranslations } from 'next-intl';
 interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
     data: TData[];
+    onRefresh?: () => void;
+    isRefreshing?: boolean;
 }
 
 export function InvitationsDataTable<TData, TValue>({
     columns,
-    data
+    data,
+    onRefresh,
+    isRefreshing
 }: DataTableProps<TData, TValue>) {
 
     const t = useTranslations();
@@ -26,6 +30,8 @@ export function InvitationsDataTable<TData, TValue>({
             title={t('invite')}
             searchPlaceholder={t('inviteSearch')}
             searchColumn="email"
+            onRefresh={onRefresh}
+            isRefreshing={isRefreshing}
         />
     );
 }

src/components/InvitationsTable.tsx

@@ -19,6 +19,7 @@ import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { useTranslations } from "next-intl";
 import moment from "moment";
+import { useRouter } from "next/navigation";
 
 export type InvitationRow = {
     id: string;
@@ -45,6 +46,25 @@ export default function InvitationsTable({
 
     const api = createApiClient(useEnvContext());
     const { org } = useOrgContext();
+    const router = useRouter();
+    const [isRefreshing, setIsRefreshing] = useState(false);
+
+    const refreshData = async () => {
+        console.log("Data refreshed");
+        setIsRefreshing(true);
+        try {
+            await new Promise((resolve) => setTimeout(resolve, 200));
+            router.refresh();
+        } catch (error) {
+            toast({
+                title: t("error"),
+                description: t("refreshError"),
+                variant: "destructive"
+            });
+        } finally {
+            setIsRefreshing(false);
+        }
+    };
 
     const columns: ColumnDef<InvitationRow>[] = [
         {
@@ -185,7 +205,12 @@ export default function InvitationsTable({
                 }}
             />
 
-            <InvitationsDataTable columns={columns} data={invitations} />
+            <InvitationsDataTable
+                columns={columns}
+                data={invitations}
+                onRefresh={refreshData}
+                isRefreshing={isRefreshing}
+            />
         </>
     );
 }

src/components/ResourcesTable.tsx

@@ -773,18 +773,16 @@ export default function ResourcesTable({
                             </div>
                             <div className="flex items-center gap-2 sm:justify-end">
                                 <div>
-                                    {refreshData && (
+                                    <Button
-                                        <Button
+                                        variant="outline"
-                                            variant="outline"
+                                        onClick={refreshData}
-                                            onClick={refreshData}
+                                        disabled={isRefreshing}
-                                            disabled={isRefreshing}
+                                    >
-                                        >
+                                        <RefreshCw
-                                            <RefreshCw
+                                            className={`mr-2 h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`}
-                                                className={`mr-2 h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`}
+                                        />
-                                            />
+                                        {t("refresh")}
-                                            {t("refresh")}
+                                    </Button>
-                                        </Button>
-                                    )}
                                 </div>
                                 <div>
                                     {getActionButton()}

src/components/RolesDataTable.tsx

@@ -10,12 +10,16 @@ interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
     data: TData[];
     createRole?: () => void;
+    onRefresh?: () => void;
+    isRefreshing?: boolean;
 }
 
 export function RolesDataTable<TData, TValue>({
     columns,
     data,
-    createRole
+    createRole,
+    onRefresh,
+    isRefreshing
 }: DataTableProps<TData, TValue>) {
 
     const t = useTranslations();
@@ -29,6 +33,8 @@ export function RolesDataTable<TData, TValue>({
             searchPlaceholder={t('accessRolesSearch')}
             searchColumn="name"
             onAdd={createRole}
+            onRefresh={onRefresh}
+            isRefreshing={isRefreshing}
             addButtonText={t('accessRolesAdd')}
         />
     );

src/components/RolesTable.tsx

@@ -20,6 +20,7 @@ import DeleteRoleForm from "@app/components/DeleteRoleForm";
 import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { useTranslations } from "next-intl";
+import { useRouter } from "next/navigation";
 
 export type RoleRow = Role;
 
@@ -30,6 +31,7 @@ type RolesTableProps = {
 export default function UsersTable({ roles: r }: RolesTableProps) {
     const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
     const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+    const router = useRouter();
 
     const [roles, setRoles] = useState<RoleRow[]>(r);
 
@@ -40,6 +42,24 @@ export default function UsersTable({ roles: r }: RolesTableProps) {
     const { org } = useOrgContext();
 
     const t = useTranslations();
+    const [isRefreshing, setIsRefreshing] = useState(false);
+
+    const refreshData = async () => {
+        console.log("Data refreshed");
+        setIsRefreshing(true);
+        try {
+            await new Promise((resolve) => setTimeout(resolve, 200));
+            router.refresh();
+        } catch (error) {
+            toast({
+                title: t("error"),
+                description: t("refreshError"),
+                variant: "destructive"
+            });
+        } finally {
+            setIsRefreshing(false);
+        }
+    };
 
     const columns: ColumnDef<RoleRow>[] = [
         {
@@ -116,6 +136,8 @@ export default function UsersTable({ roles: r }: RolesTableProps) {
                 createRole={() => {
                     setIsCreateModalOpen(true);
                 }}
+                onRefresh={refreshData}
+                isRefreshing={isRefreshing}
             />
         </>
     );

src/components/ShareLinksDataTable.tsx

@@ -10,12 +10,16 @@ interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
     data: TData[];
     createShareLink?: () => void;
+    onRefresh?: () => void;
+    isRefreshing?: boolean;
 }
 
 export function ShareLinksDataTable<TData, TValue>({
     columns,
     data,
-    createShareLink
+    createShareLink,
+    onRefresh,
+    isRefreshing
 }: DataTableProps<TData, TValue>) {
 
     const t = useTranslations();
@@ -29,6 +33,8 @@ export function ShareLinksDataTable<TData, TValue>({
             searchPlaceholder={t('shareSearch')}
             searchColumn="name"
             onAdd={createShareLink}
+            onRefresh={onRefresh}
+            isRefreshing={isRefreshing}
             addButtonText={t('shareCreate')}
         />
     );

src/components/ShareLinksTable.tsx

@@ -61,6 +61,25 @@ export default function ShareLinksTable({
     const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
     const [rows, setRows] = useState<ShareLinkRow[]>(shareLinks);
 
+    const [isRefreshing, setIsRefreshing] = useState(false);
+
+    const refreshData = async () => {
+        console.log("Data refreshed");
+        setIsRefreshing(true);
+        try {
+            await new Promise((resolve) => setTimeout(resolve, 200));
+            router.refresh();
+        } catch (error) {
+            toast({
+                title: t("error"),
+                description: t("refreshError"),
+                variant: "destructive"
+            });
+        } finally {
+            setIsRefreshing(false);
+        }
+    };
+
     function formatLink(link: string) {
         return link.substring(0, 20) + "..." + link.substring(link.length - 20);
     }
@@ -292,6 +311,8 @@ export default function ShareLinksTable({
                 createShareLink={() => {
                     setIsCreateModalOpen(true);
                 }}
+                onRefresh={refreshData}
+                isRefreshing={isRefreshing}
             />
         </>
     );

src/components/UsersDataTable.tsx

@@ -10,12 +10,16 @@ interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
     data: TData[];
     inviteUser?: () => void;
+    onRefresh?: () => void;
+    isRefreshing?: boolean;
 }
 
 export function UsersDataTable<TData, TValue>({
     columns,
     data,
-    inviteUser
+    inviteUser,
+    onRefresh,
+    isRefreshing
 }: DataTableProps<TData, TValue>) {
 
     const t = useTranslations();
@@ -29,6 +33,8 @@ export function UsersDataTable<TData, TValue>({
             searchPlaceholder={t('accessUsersSearch')}
             searchColumn="email"
             onAdd={inviteUser}
+            onRefresh={onRefresh}
+            isRefreshing={isRefreshing}
             addButtonText={t('accessUserCreate')}
         />
     );

src/components/UsersTable.tsx

@@ -51,6 +51,24 @@ export default function UsersTable({ users: u }: UsersTableProps) {
     const { user, updateUser } = useUserContext();
     const { org } = useOrgContext();
     const t = useTranslations();
+    const [isRefreshing, setIsRefreshing] = useState(false);
+
+    const refreshData = async () => {
+        console.log("Data refreshed");
+        setIsRefreshing(true);
+        try {
+            await new Promise((resolve) => setTimeout(resolve, 200));
+            router.refresh();
+        } catch (error) {
+            toast({
+                title: t("error"),
+                description: t("refreshError"),
+                variant: "destructive"
+            });
+        } finally {
+            setIsRefreshing(false);
+        }
+    };
 
     const columns: ColumnDef<UserRow>[] = [
         {
@@ -290,6 +308,8 @@ export default function UsersTable({ users: u }: UsersTableProps) {
                         `/${org?.org.orgId}/settings/access/users/create`
                     );
                 }}
+                onRefresh={refreshData}
+                isRefreshing={isRefreshing}
             />
         </>
     );