fix: [Roles] Added roles for the entity are not displayed (Issue #2132 #2134) (#2144)

Author: PolinaGurinovich97

apps/ai-dial-admin/src/components/Common/DraggableItem/DraggableItem.tsx

@@ -9,7 +9,7 @@ import { BASE_BUTTON_ICON_PROPS } from '@/src/constants/main-layout';
 interface Props {
   children: ReactNode;
   id: string;
-  findItem?: (field: string) => number;
+  findItem?: (field: string) => number | undefined;
   moveItem?: (field: string, atIndex: number) => void;
 }
 

apps/ai-dial-admin/src/components/Grid/AgGridWrapper.tsx

@@ -128,27 +128,33 @@ const AgGridWrapper = <T extends object>({
 
   const onGridReady = (event: GridReadyEvent) => {
     setGridApi(event.api);
-    gridReadyCb?.(event);
+
     event.api.sizeColumnsToFit();
 
-    const defaultSorts =
-      columnDefs
-        ?.filter((col) => col.sort)
-        .map(
-          (col) =>
-            ({
-              colId: col.field,
-              sort: col.sort,
-            }) as ColumnState,
-        ) || [];
-    const columns = columnDefs?.map((col) => ({ ...col, sort: undefined }));
-    event.api?.updateGridOptions({ columnDefs: columns, rowData });
-    setGridColumnsState(event, defaultSorts);
+    if (columnDefs) {
+      const defaultSorts =
+        columnDefs
+          ?.filter((col) => col.sort)
+          .map(
+            (col) =>
+              ({
+                colId: col.field,
+                sort: col.sort,
+              }) as ColumnState,
+          ) || [];
+      const columns = columnDefs?.map((col) => ({ ...col, sort: undefined }));
+      event.api?.updateGridOptions({ columnDefs: columns, rowData });
+      setGridColumnsState(event, defaultSorts);
+    }
+
+    gridReadyCb?.(event);
   };
 
   useEffect(() => {
-    const columns = columnDefs?.map((col) => ({ ...col, sort: undefined }));
-    gridApi?.updateGridOptions({ columnDefs: columns, rowData });
+    if (columnDefs) {
+      const columns = columnDefs?.map((col) => ({ ...col, sort: undefined }));
+      gridApi?.updateGridOptions({ columnDefs: columns, rowData });
+    }
   }, [columnDefs, gridApi, rowData]);
 
   const tooltipRenderer = (params: { value: string }) => {

apps/ai-dial-admin/src/components/Grid/ColumnsPanel/ColumnsPanel.tsx

@@ -5,11 +5,11 @@ import { ColDef } from 'ag-grid-community';
 import { FC, useCallback, useRef } from 'react';
 import { useDrop } from 'react-dnd';
 
+import CloseButton from '@/src/components/Common/CloseButton/CloseButton';
 import DraggableItem from '@/src/components/Common/DraggableItem/DraggableItem';
+import { COLUMN_PANEL_PREFIX } from '@/src/constants/grid-columns/grid-columns';
 import { ButtonsI18nKey } from '@/src/constants/i18n';
-import CloseButton from '@/src/components/Common/CloseButton/CloseButton';
 import { useI18n } from '@/src/locales/client';
-import { COLUMN_PANEL_PREFIX } from '@/src/constants/grid-columns/grid-columns';
 
 interface Props {
   columns: ColDef[];
@@ -18,7 +18,7 @@ interface Props {
   onReset: () => void;
   toggleColumnsPanel?: () => void;
   toggleColumnVisibility: (id?: string) => void;
-  onFind?: (field: string) => number;
+  onFind?: (field: string) => number | undefined;
   onMove?: (field: string, atIndex: number) => void;
 }
 

apps/ai-dial-admin/src/components/Grid/GridView/GridView.tsx

@@ -43,7 +43,7 @@ const GridView = <T extends object>({
   );
   const isMobile = useIsMobileScreen();
   const isTablet = useIsOnlyTabletScreen();
-  const [currentColDefs, setCurrentColDefs] = useState<ColDef[]>([]);
+  const [currentColDefs, setCurrentColDefs] = useState<ColDef[] | undefined>(undefined);
   const [showResetButton, setShowResetButton] = useState(false);
   const [panelContainerClassName, setPanelContainerClassName] = useState(staticPanelContainerClassName);
   const [panelClassName, setPanelClassName] = useState(staticPanelClassName);
@@ -59,7 +59,7 @@ const GridView = <T extends object>({
   );
 
   useEffect(() => {
-    if (currentColDefs == null || currentColDefs.length === 0) {
+    if ((currentColDefs == null || currentColDefs.length === 0) && columnDefs) {
       const storageColumns = storageKey ? getColumnVisibilityFromStorage(columnDefs, storageKey) : null;
       setCurrentColDefs(
         !(storageColumns && columnDefs && columnDefs.length > storageColumns?.length)
@@ -88,12 +88,14 @@ const GridView = <T extends object>({
 
   const toggleColumnVisibility = useCallback(
     (id?: string) => {
-      const newColDefs = currentColDefs.map((c) => (c.field === id ? { ...c, hide: !c.hide } : c));
-      setCurrentColDefs(newColDefs);
-      if (storageKey) {
-        saveColumnVisibilityToStorage(newColDefs, storageKey);
+      if (currentColDefs) {
+        const newColDefs = currentColDefs?.map((c) => (c.field === id ? { ...c, hide: !c.hide } : c));
+        setCurrentColDefs(newColDefs);
+        if (storageKey) {
+          saveColumnVisibilityToStorage(newColDefs, storageKey);
+        }
+        setShowResetButton(newColDefs.some((c, index) => c.hide !== columnDefs?.[index].hide));
       }
-      setShowResetButton(newColDefs.some((c, index) => c.hide !== columnDefs?.[index].hide));
     },
     [currentColDefs, columnDefs, storageKey],
   );
@@ -108,21 +110,23 @@ const GridView = <T extends object>({
   };
 
   const onFindColumn = useCallback(
-    (field?: string) => currentColDefs.findIndex((c) => c.field === field),
+    (field?: string) => currentColDefs?.findIndex((c) => c.field === field),
     [currentColDefs],
   );
 
   const onMoveColumn = useCallback(
     (field: string, atIndex: number) => {
       const index = onFindColumn(field);
-      const updatedColDefs = [...currentColDefs];
-      const [removedColDef] = updatedColDefs.splice(index, 1);
-      updatedColDefs.splice(atIndex, 0, removedColDef);
-      if (storageKey) {
-        saveColumnVisibilityToStorage(updatedColDefs, storageKey);
+      if (index) {
+        const updatedColDefs = [...(currentColDefs || [])];
+        const [removedColDef] = updatedColDefs.splice(index, 1);
+        updatedColDefs.splice(atIndex, 0, removedColDef);
+        if (storageKey) {
+          saveColumnVisibilityToStorage(updatedColDefs, storageKey);
+        }
+        setCurrentColDefs(updatedColDefs);
+        setShowResetButton(checkColDefsChanges(updatedColDefs, columnDefs || []));
       }
-      setCurrentColDefs(updatedColDefs);
-      setShowResetButton(checkColDefsChanges(updatedColDefs, columnDefs || []));
     },
     [onFindColumn, currentColDefs, setShowResetButton, columnDefs, storageKey],
   );
@@ -144,7 +148,7 @@ const GridView = <T extends object>({
             <div className={panelContainerClassName}>
               <DndProvider backend={HTML5Backend}>
                 <ColumnsPanel
-                  columns={currentColDefs}
+                  columns={currentColDefs || []}
                   showResetButton={showResetButton}
                   panelClassName={panelClassName}
                   onReset={onResetToDefault}