Code rabbit implementations

Author: faisalsiddique4400

admin-ui/app/components/GluuTable/GluuTable.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useCallback, useEffect } from 'react'
+import React, { useState, useMemo, useCallback, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'
@@ -13,7 +13,11 @@ import { useStyles, EXPAND_BUTTON_SIZE } from './GluuTable.style'
 import type { GluuTableProps, SortDirection, ColumnKey } from './types'
 import { ChevronIcon } from '@/components/SVG'
 import { BORDER_RADIUS } from '@/constants'
-import { getRowsPerPageOptions } from '@/utils/pagingUtils'
+import {
+  getDefaultPagingSize,
+  getRowsPerPageOptions,
+  PAGING_SIZE_CHANGED_EVENT,
+} from '@/utils/pagingUtils'
 
 const T_KEYS = {
   FIELDS_ACTIONS: 'fields.actions',
@@ -45,6 +49,7 @@ function GluuTable<T>(props: Readonly<GluuTableProps<T>>) {
     emptyMessage,
     stickyHeader = false,
     tableClassName,
+    onPagingSizeSync,
   } = props
 
   const { t } = useTranslation()
@@ -60,6 +65,31 @@ function GluuTable<T>(props: Readonly<GluuTableProps<T>>) {
     setExpandedRows(new Set())
   }, [data])
 
+  const rowsPerPageRef = useRef(pagination?.rowsPerPage ?? 0)
+  rowsPerPageRef.current = pagination?.rowsPerPage ?? 0
+  useEffect(() => {
+    if (!pagination || !onPagingSizeSync) return
+    const notifyIfChanged = (newSize: number) => {
+      if (newSize !== rowsPerPageRef.current) onPagingSizeSync(newSize)
+    }
+    const handler = (e: Event) => {
+      const detail = (e as CustomEvent<number>).detail
+      const newSize = detail != null && Number.isInteger(detail) ? detail : getDefaultPagingSize()
+      notifyIfChanged(newSize)
+    }
+    const onVisibilityChange = () => {
+      if (document.visibilityState === 'visible') {
+        notifyIfChanged(getDefaultPagingSize())
+      }
+    }
+    window.addEventListener(PAGING_SIZE_CHANGED_EVENT, handler)
+    document.addEventListener('visibilitychange', onVisibilityChange)
+    return () => {
+      window.removeEventListener(PAGING_SIZE_CHANGED_EVENT, handler)
+      document.removeEventListener('visibilitychange', onVisibilityChange)
+    }
+  }, [pagination, onPagingSizeSync])
+
   const totalCols = (expandable ? 1 : 0) + columns.length + (actions?.length ? 1 : 0)
   const defaultEmptyMessage = useMemo(() => t(T_KEYS.MESSAGES_NO_DATA), [t])
 
@@ -78,7 +108,8 @@ function GluuTable<T>(props: Readonly<GluuTableProps<T>>) {
   const resolveRowKey = useCallback(
     (item: T, index: number): string | number => {
       if (getRowKey) return getRowKey(item, index)
-      return index
+      const row = item as { id?: string | number }
+      return row.id ?? index
     },
     [getRowKey],
   )

admin-ui/app/components/GluuTable/types.ts

@@ -38,6 +38,9 @@ export interface PaginationConfig {
   onRowsPerPageChange: (rowsPerPage: number) => void
 }
 
+/** When Settings (or another tab) changes paging size, GluuTable can notify so the parent can sync and refetch. Optional. */
+export type OnPagingSizeSync = (newSize: number) => void
+
 export interface GluuTableProps<T> {
   columns: ColumnDef<T>[]
   data: T[]
@@ -54,4 +57,6 @@ export interface GluuTableProps<T> {
   stickyHeader?: boolean
   /** Optional class applied to the <table> for parent overrides (e.g. Audit) */
   tableClassName?: string
+  /** When provided with pagination, GluuTable listens for paging-size changes (Settings / visibility) and calls this so the parent can sync and refetch. */
+  onPagingSizeSync?: OnPagingSizeSync
 }

admin-ui/app/utils/pagingUtils.ts

@@ -1,9 +1,13 @@
+import { useState, useCallback } from 'react'
+
 export const ROWS_PER_PAGE_OPTIONS = [5, 10, 25, 50] as const
 
 export const DEFAULT_PAGING_SIZE = 10
 
 const STORAGE_KEY = 'gluu.pagingSize'
 
+export const PAGING_SIZE_CHANGED_EVENT = 'gluu:pagingSizeChanged'
+
 export const getPagingSize = (defaultSize: number = DEFAULT_PAGING_SIZE): number => {
   if (typeof window === 'undefined' || !window.localStorage) {
     return defaultSize
@@ -53,7 +57,20 @@ export const savePagingSize = (size: number): void => {
 
   try {
     localStorage.setItem(STORAGE_KEY, String(validSize))
+    if (typeof window !== 'undefined') {
+      window.dispatchEvent(new CustomEvent(PAGING_SIZE_CHANGED_EVENT, { detail: validSize }))
+    }
   } catch (error) {
     console.warn('Failed to save paging size to localStorage:', error)
   }
 }
+
+export function usePaginationState() {
+  const [limit, setLimit] = useState(getDefaultPagingSize)
+  const [pageNumber, setPageNumber] = useState(0)
+  const onPagingSizeSync = useCallback((newSize: number) => {
+    setLimit(newSize)
+    setPageNumber(0)
+  }, [])
+  return { limit, setLimit, pageNumber, setPageNumber, onPagingSizeSync }
+}

admin-ui/plugins/admin/components/Audit/AuditListPage.style.ts

@@ -52,7 +52,7 @@ const useStyles = makeStyles<{ isDark: boolean; themeColors: ThemeConfig }>()((
         minWidth: 0,
       },
       '& table td': {
-        verticalAlign: 'top',
+        verticalAlign: 'middle',
         minWidth: 0,
         lineHeight: '28px',
       },
@@ -71,15 +71,12 @@ const useStyles = makeStyles<{ isDark: boolean; themeColors: ThemeConfig }>()((
       },
     },
     logEntryCell: {
-      'display': 'flex',
-      'alignItems': 'flex-start',
-      'gap': `${SPACING.SECTION_GAP}px`,
-      'flexWrap': 'nowrap',
-      'minWidth': 0,
-      'lineHeight': '28px',
-      '& > *': {
-        alignSelf: 'flex-start',
-      },
+      display: 'flex',
+      alignItems: 'center',
+      gap: `${SPACING.SECTION_GAP}px`,
+      flexWrap: 'nowrap',
+      minWidth: 0,
+      lineHeight: '28px',
     },
     logEntryContent: {
       minWidth: 0,
@@ -99,6 +96,7 @@ const useStyles = makeStyles<{ isDark: boolean; themeColors: ThemeConfig }>()((
       alignItems: 'center',
       gap: '6px',
       lineHeight: 1,
+      verticalAlign: 'middle',
     },
     searchActionIcon: {
       fontSize: 20,

admin-ui/plugins/admin/components/Audit/AuditListPage.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useCallback, useEffect } from 'react'
+import React, { useState, useMemo, useCallback, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { createDate, subtractDate, isValidDate, isAfterDate } from '@/utils/dayjsUtils'
 import type { Dayjs } from '@/utils/dayjsUtils'
@@ -21,7 +21,11 @@ import { useStyles } from './AuditListPage.style'
 import { auditListTimestampRegex, dateConverter, hasBothDates } from 'Plugins/admin/helper/utils'
 import { useGetAuditData, GetAuditDataParams } from 'JansConfigApi'
 import type { AuditRow } from './types'
-import { getDefaultPagingSize, getRowsPerPageOptions } from '@/utils/pagingUtils'
+import {
+  getDefaultPagingSize,
+  getRowsPerPageOptions,
+  usePaginationState,
+} from '@/utils/pagingUtils'
 
 const AUDIT_LOGS_RESOURCE_ID = ADMIN_UI_RESOURCES.AuditLogs
 const AUDIT_LOGS_SCOPES = CEDAR_RESOURCE_SCOPES[AUDIT_LOGS_RESOURCE_ID] ?? []
@@ -35,8 +39,6 @@ const T_KEYS = {
   PLACEHOLDER_SEARCH_PATTERN: 'placeholders.search_pattern',
 } as const
 
-const getAuditRowKey = (row: AuditRow) => row.id
-
 const splitTimestamp = (timestamp: string): { datePart: string; timePart: string } => {
   if (!timestamp) return { datePart: '', timePart: '' }
   const spaceIdx = timestamp.indexOf(' ')
@@ -68,9 +70,8 @@ const AuditListPage: React.FC = () => {
     }
   }, [authorizeHelper])
 
-  const [limit, setLimit] = useState(getDefaultPagingSize)
+  const { limit, setLimit, pageNumber, setPageNumber, onPagingSizeSync } = usePaginationState()
   const [pattern, setPattern] = useState('')
-  const [pageNumber, setPageNumber] = useState(0)
   const [startDate, setStartDate] = useState<Dayjs | null>(() =>
     subtractDate(createDate(), 14, 'day'),
   )
@@ -123,6 +124,19 @@ const AuditListPage: React.FC = () => {
     [],
   )
 
+  const patternRef = useRef(pattern)
+  const filterStateRef = useRef(filterState)
+  patternRef.current = pattern
+  filterStateRef.current = filterState
+
+  const handlePagingSizeSync = useCallback(
+    (newSize: number) => {
+      onPagingSizeSync(newSize)
+      setQueryParams(buildQueryParams(newSize, 0, patternRef.current, filterStateRef.current))
+    },
+    [buildQueryParams, onPagingSizeSync],
+  )
+
   const handleSearch = useCallback(() => {
     if (!filterState.hasBothDates) return
     setPageNumber(0)
@@ -373,7 +387,7 @@ const AuditListPage: React.FC = () => {
               loading={false}
               expandable
               pagination={pagination}
-              getRowKey={getAuditRowKey}
+              onPagingSizeSync={handlePagingSizeSync}
               emptyMessage={emptyMessage}
             />
           </div>