From 5d28b990e11d4e50d4e7ec5daffc5a9e4a78d4b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20=C5=9Al=C4=99zak?= <fslezak@teonite.com>
Date: Wed, 11 Mar 2026 10:38:30 +0100
Subject: [PATCH] update openid table page

---
 .../components/GroupsTable/GroupsTable.tsx     |  6 ++----
 web/src/pages/OpenIdPage/OpenIdPage.tsx        |  9 +++++----
 web/src/pages/OpenIdPage/OpenIdTable.tsx       | 15 ++++++---------
 .../ProfileAuthCard/ProfileAuthCard.tsx        | 18 +++---------------
 web/src/routes/_authorized/_default/openid.tsx |  4 ----
 5 files changed, 16 insertions(+), 36 deletions(-)

diff --git a/web/src/pages/GroupsPage/components/GroupsTable/GroupsTable.tsx b/web/src/pages/GroupsPage/components/GroupsTable/GroupsTable.tsx
index b589ad81da..0b64d0386b 100644
--- a/web/src/pages/GroupsPage/components/GroupsTable/GroupsTable.tsx
+++ b/web/src/pages/GroupsPage/components/GroupsTable/GroupsTable.tsx
@@ -52,16 +52,14 @@ export const GroupsTable = ({ groups, users }: Props) => {
     () => [
       columnHelper.accessor('name', {
         header: m.groups_col_name(),
+        minSize: 250,
+        enableSorting: true,
         sortingFn: 'text',
         cell: (info) => (
           <TableCell>
             <span>{info.getValue()}</span>
           </TableCell>
         ),
-        meta: {
-          flex: true,
-        },
-        enableSorting: true,
       }),
       columnHelper.display({
         size: 108,
diff --git a/web/src/pages/OpenIdPage/OpenIdPage.tsx b/web/src/pages/OpenIdPage/OpenIdPage.tsx
index 0bba00362e..321dad7f3c 100644
--- a/web/src/pages/OpenIdPage/OpenIdPage.tsx
+++ b/web/src/pages/OpenIdPage/OpenIdPage.tsx
@@ -1,19 +1,20 @@
-import { useSuspenseQuery } from '@tanstack/react-query';
+import { Suspense } from 'react';
 import { m } from '../../paraglide/messages';
 import { Page } from '../../shared/components/Page/Page';
+import { TableSkeleton } from '../../shared/components/skeleton/TableSkeleton/TableSkeleton';
 import { SizedBox } from '../../shared/defguard-ui/components/SizedBox/SizedBox';
 import { ThemeSpacing } from '../../shared/defguard-ui/types';
-import { getOpenIdClientQueryOptions } from '../../shared/query';
 import { CeOpenIdClientModal } from './modals/CEOpenIdClientModal/CEOpenIdClientModal';
 import { OpenIdClientTable } from './OpenIdTable';
 
 export const OpenIdPage = () => {
-  const { data } = useSuspenseQuery(getOpenIdClientQueryOptions);
   return (
     <>
       <Page title={m.openid_title()} id="openid-page">
         <SizedBox height={ThemeSpacing.Xl3} />
-        <OpenIdClientTable data={data} />
+        <Suspense fallback={<TableSkeleton />}>
+          <OpenIdClientTable />
+        </Suspense>
       </Page>
       <CeOpenIdClientModal />
     </>
diff --git a/web/src/pages/OpenIdPage/OpenIdTable.tsx b/web/src/pages/OpenIdPage/OpenIdTable.tsx
index 8f92cd4ff2..3d97d74995 100644
--- a/web/src/pages/OpenIdPage/OpenIdTable.tsx
+++ b/web/src/pages/OpenIdPage/OpenIdTable.tsx
@@ -1,4 +1,4 @@
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useSuspenseQuery } from '@tanstack/react-query';
 import {
   createColumnHelper,
   getCoreRowModel,
@@ -22,16 +22,15 @@ import { TableTop } from '../../shared/defguard-ui/components/table/TableTop/Tab
 import { useClipboard } from '../../shared/defguard-ui/hooks/useClipboard';
 import { openModal } from '../../shared/hooks/modalControls/modalsSubjects';
 import { ModalName } from '../../shared/hooks/modalControls/modalTypes';
+import { getOpenIdClientQueryOptions } from '../../shared/query';
 
 type RowData = OpenIdClient;
 
 const columnHelper = createColumnHelper<RowData>();
 
-type Props = {
-  data: OpenIdClient[];
-};
+export const OpenIdClientTable = () => {
+  const { data } = useSuspenseQuery(getOpenIdClientQueryOptions);
 
-export const OpenIdClientTable = ({ data }: Props) => {
   const reservedNames = useMemo(
     () => data.map((c) => c.name.toLowerCase().replaceAll(' ', '')),
     [data],
@@ -73,9 +72,7 @@ export const OpenIdClientTable = ({ data }: Props) => {
         header: 'App name',
         enableSorting: true,
         sortingFn: 'text',
-        meta: {
-          flex: true,
-        },
+        minSize: 300,
         cell: (info) => (
           <TableCell>
             <span>{info.getValue()}</span>
@@ -84,7 +81,7 @@ export const OpenIdClientTable = ({ data }: Props) => {
       }),
       columnHelper.accessor('enabled', {
         header: 'Status',
-        size: 600,
+        minSize: 180,
         cell: (info) => (
           <TableCell>
             {info.getValue() ? (
diff --git a/web/src/pages/user-profile/UserProfilePage/tabs/ProfileDetailsTab/components/ProfileAuthCard/ProfileAuthCard.tsx b/web/src/pages/user-profile/UserProfilePage/tabs/ProfileDetailsTab/components/ProfileAuthCard/ProfileAuthCard.tsx
index 23ee52bcea..7b3071a4d9 100644
--- a/web/src/pages/user-profile/UserProfilePage/tabs/ProfileDetailsTab/components/ProfileAuthCard/ProfileAuthCard.tsx
+++ b/web/src/pages/user-profile/UserProfilePage/tabs/ProfileDetailsTab/components/ProfileAuthCard/ProfileAuthCard.tsx
@@ -22,9 +22,6 @@ import {
   type UserMfaMethodValue,
 } from '../../../../../../../shared/api/types';
 import { Badge } from '../../../../../../../shared/defguard-ui/components/Badge/Badge';
-import { TooltipContent } from '../../../../../../../shared/defguard-ui/providers/tooltip/TooltipContent';
-import { TooltipProvider } from '../../../../../../../shared/defguard-ui/providers/tooltip/TooltipContext';
-import { TooltipTrigger } from '../../../../../../../shared/defguard-ui/providers/tooltip/TooltipTrigger';
 import { ThemeSpacing } from '../../../../../../../shared/defguard-ui/types';
 import { openModal } from '../../../../../../../shared/hooks/modalControls/modalsSubjects';
 import { ModalName } from '../../../../../../../shared/hooks/modalControls/modalTypes';
@@ -452,18 +449,9 @@ const FactorRow = ({
         </div>
         <div className="row availability">
           <div className="fill"></div>
-          <TooltipProvider>
-            <TooltipTrigger>
-              <p className="availability">
-                {showSmtpDisabledWarning
-                  ? m.state_smtp_not_configured()
-                  : availabilityText}
-              </p>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>{m.test_placeholder()}</p>
-            </TooltipContent>
-          </TooltipProvider>
+          <p className="availability">
+            {showSmtpDisabledWarning ? m.state_smtp_not_configured() : availabilityText}
+          </p>
         </div>
       </div>
       <div className="controls">
diff --git a/web/src/routes/_authorized/_default/openid.tsx b/web/src/routes/_authorized/_default/openid.tsx
index 29b7099e88..fa7c7fd670 100644
--- a/web/src/routes/_authorized/_default/openid.tsx
+++ b/web/src/routes/_authorized/_default/openid.tsx
@@ -1,10 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router';
 import { OpenIdPage } from '../../../pages/OpenIdPage/OpenIdPage';
-import { getOpenIdClientQueryOptions } from '../../../shared/query';
 
 export const Route = createFileRoute('/_authorized/_default/openid')({
   component: OpenIdPage,
-  loader: ({ context }) => {
-    return context.queryClient.ensureQueryData(getOpenIdClientQueryOptions);
-  },
 });