Use dynamic export instead of import for GroupingsTable

uhawaii-system-its-ti-iam · Nov 21, 2024 · 860037f · 860037f
1 parent 6313241
commit 860037f
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 12 deletions.
diff --git a/ui/src/app/groupings/page.tsx b/ui/src/app/groupings/page.tsx
@@ -1,12 +1,5 @@
 import { ownerGroupings } from '@/lib/fetchers';
-import dynamic from 'next/dynamic';
-import GroupingsTableSkeleton from '@/components/table/groupings-table-skeleton';
-
-// Require dynamic import for localStorage
-const GroupingsTable = dynamic(() => import('@/components/table/groupings-table'), {
-    ssr: false,
-    loading: () => <GroupingsTableSkeleton />
-});
+import GroupingsTable from '@/components/table/groupings-table';
 
 const Groupings = async () => {
     const { groupingPaths } = await ownerGroupings();

diff --git a/ui/src/components/table/groupings-table.tsx b/ui/src/components/table/groupings-table.tsx
@@ -19,6 +19,8 @@ import { useState } from 'react';
 import { useLocalStorage } from 'usehooks-ts';
 import { GroupingPath } from '@/lib/types';
 import GroupingsTableColumns from '@/components/table/table-element/groupings-table-columns';
+import dynamic from 'next/dynamic';
+import GroupingsTableSkeleton from './groupings-table-skeleton';
 
 const pageSize = parseInt(process.env.NEXT_PUBLIC_PAGE_SIZE as string);
 
@@ -100,4 +102,7 @@ const GroupingsTable = ({ groupingPaths }: { groupingPaths: GroupingPath[] }) =>
     );
 };
 
-export default GroupingsTable;
+export default dynamic(() => Promise.resolve(GroupingsTable), {
+    ssr: false, // Disables SSR for localStorage
+    loading: () => <GroupingsTableSkeleton />
+});
diff --git a/ui/src/components/table/table-element/grouping-path-cell.tsx b/ui/src/components/table/table-element/grouping-path-cell.tsx
@@ -45,10 +45,14 @@ const GroupingPathCell = ({ path }: { path: string }) => {
                              justify-center hover:bg-green-blue h-6 p-2 transition ease-in-out duration-150"
                             data-testid="clipboard-button"
                         >
-                            <FontAwesomeIcon className="group-hover:text-white h-4 w-4 text-gray-600" data-testid="clipboard-icon" icon={faClipboard} />
+                            <FontAwesomeIcon
+                                className="group-hover:text-white h-4 w-4 text-gray-600"
+                                data-testid="clipboard-icon"
+                                icon={faClipboard}
+                            />
                         </button>
                     </TooltipTrigger>
-                    <TooltipContent>
+                    <TooltipContent className="bg-white text-slate-950">
                         <p data-testid="tooltip">{tooltipContent}</p>
                     </TooltipContent>
                 </Tooltip>

diff --git a/ui/tests/components/table/groupings-table.test.tsx b/ui/tests/components/table/groupings-table.test.tsx
@@ -16,7 +16,9 @@ describe('GroupingsTable', () => {
 
         // Check for "Manage Groupings", filter, and column settings
         expect(screen.getByText('Manage Groupings')).toBeInTheDocument();
-        expect(screen.getByPlaceholderText('Filter Groupings...')).toBeInTheDocument();
+        await waitFor(() => {
+            expect(screen.getByPlaceholderText('Filter Groupings...')).toBeInTheDocument();
+        });
         expect(screen.getByLabelText('column-settings-button')).toBeInTheDocument();
 
         // Check for table column headers