Fixed conflicts

Author: geodem127

src/apps/content-editor/src/app/views/ItemList/ItemListTable.tsx

@@ -13,9 +13,13 @@ import {
   useMemo,
   useState,
   useContext,
+  useEffect,
 } from "react";
 import AutoSizer, { Size } from "react-virtualized-auto-sizer";
-import { ContentItem } from "../../../../../../shell/services/types";
+import {
+  ContentItem,
+  ContentModelField,
+} from "../../../../../../shell/services/types";
 import { useStagedChanges } from "./StagedChangesContext";
 import { OneToManyCell } from "./TableCells/OneToManyCell";
 import { UserCell } from "./TableCells/UserCell";
@@ -29,6 +33,12 @@ import { Currency } from "../../../../../../shell/components/FieldTypeCurrency/c
 import { ImageCell } from "./TableCells/ImageCell";
 import { SingleRelationshipCell } from "./TableCells/SingleRelationshipCell";
 import { TableSortContext } from "./TableSortProvider";
+import {
+  FIELD_SKELETON_MAP,
+  gridLoadingStyles,
+  SkeletonLoadingOverlay,
+} from "./Loader";
+import { Skeleton } from "@mui/material";
 
 type ItemListTableProps = {
   loading: boolean;
@@ -67,7 +77,6 @@ const METADATA_COLUMNS = [
     width: 240,
     filterable: true,
     renderCell: (params: GridRenderCellParams) => <UserCell params={params} />,
-    type: "createdBy",
   },
   {
     field: "createdOn",
@@ -263,8 +272,6 @@ export const ItemListTable = memo(
     const [sortModel, setSortModel] = useContext(TableSortContext);
     const [pinnedColumns, setPinnedColumns] = useState({});
 
-    const { data: fields } = useGetContentModelFieldsQuery(modelZUID);
-
     const saveSnapshot = useCallback(() => {
       if (apiRef?.current?.exportState && localStorage) {
         const currentState = apiRef.current.exportState();
@@ -297,6 +304,12 @@ export const ItemListTable = memo(
     }, [saveSnapshot, fields, modelZUID]);
 
     const columns = useMemo(() => {
+      const stateFromLocalStorage = localStorage?.getItem(
+        `${modelZUID}-dataGridState`
+      );
+      const colDimensions = stateFromLocalStorage
+        ? JSON.parse(stateFromLocalStorage)?.columns?.dimensions
+        : null;
       let result: any[] = [
         {
           field: "version",
@@ -307,7 +320,6 @@ export const ItemListTable = memo(
           renderCell: (params: GridRenderCellParams) => (
             <VersionCell params={params} />
           ),
-          type: "version",
         },
       ];
       if (fields) {
@@ -336,33 +348,34 @@ export const ItemListTable = memo(
                 field?.settings?.options?.[1] !== "Yes" && {
                   width: 280,
                 }),
-              type: field.datatype,
             })),
         ];
       }
-      return [...result, ...METADATA_COLUMNS];
-    }, [fields]);
-
-    if (!initialState) {
-      return (
-        <Box
-          display="flex"
-          justifyContent="center"
-          alignItems="center"
-          height="100%"
-        >
-          <CircularProgress />
-        </Box>
-      );
-    }
+      result = [
+        ...result,
+        ...METADATA_COLUMNS?.map((column) => ({
+          ...column,
+          flex: loading && !fields ? 1 : 0,
+        })),
+      ];
+      return result.map((column) => {
+        const { headerName, ...other } = column;
+        return {
+          ...other,
+          width: colDimensions?.[column.field]?.width || column.width,
+          renderHeader: () =>
+            loading ? FIELD_SKELETON_MAP.header : headerName,
+        };
+      });
+    }, [fields, loading]);
 
     return (
       <AutoSizer>
         {({ width, height }: Size) => (
           <DataGridPro
             apiRef={apiRef}
             loading={loading}
-            rows={rows}
+            rows={loading ? [] : rows}
             columns={columns}
             style={{
               width,
@@ -393,12 +406,19 @@ export const ItemListTable = memo(
             }}
             slots={{
               noRowsOverlay: noRowsOverlay,
-              baseCheckbox: (props: any) => (
-                <Checkbox
-                  disabled={stagedChanges && Object.keys(stagedChanges)?.length}
-                  {...props}
-                />
-              ),
+              baseCheckbox: (props: any) =>
+                loading ? (
+                  <Skeleton variant="rounded" width="18px" height="18px" />
+                ) : (
+                  <Checkbox
+                    disabled={
+                      stagedChanges && Object.keys(stagedChanges)?.length
+                    }
+                    {...props}
+                  />
+                ),
+
+              loadingOverlay: () => <SkeletonLoadingOverlay fields={fields} />,
             }}
             slotProps={{
               baseTooltip: {
@@ -453,6 +473,7 @@ export const ItemListTable = memo(
               params.row?.meta?.version &&
               !(stagedChanges && Object.keys(stagedChanges)?.length)
             }
+            onColumnWidthChange={saveSnapshot}
             sx={{
               backgroundColor: "common.white",
               ".MuiDataGrid-row": {
@@ -495,6 +516,7 @@ export const ItemListTable = memo(
               "& [data-cy='NoResults']": {
                 pointerEvents: "all",
               },
+              ...(loading ? gridLoadingStyles : {}),
             }}
           />
         )}

src/apps/content-editor/src/app/views/ItemList/SkeletonLoader.tsx renamed to src/apps/content-editor/src/app/views/ItemList/Loader.tsx

@@ -2,12 +2,25 @@ import {
   useGridApiContext,
   gridColumnsTotalWidthSelector,
   gridColumnPositionsSelector,
-  gridDensityRowHeightSelector,
 } from "@mui/x-data-grid-pro";
 import { ReactNode, useMemo } from "react";
 import { Box, Skeleton } from "@mui/material";
 import ImageRoundedIcon from "@mui/icons-material/ImageRounded";
 import Typography from "@mui/material/Typography";
+import { ContentModelField } from "../../../../../../shell/services/types";
+
+export const gridLoadingStyles = {
+  pointerEvents: "none",
+  "& .MuiDataGrid-virtualScroller": {
+    overflow: "hidden",
+  },
+  "& .MuiDataGrid-columnHeader .MuiDataGrid-iconButtonContainer": {
+    visibility: "hidden!important",
+  },
+  "& .MuiDataGrid-columnSeparator": {
+    visibility: "hidden!important",
+  },
+};
 
 const CellWrapper = ({
   align = "left",
@@ -165,8 +178,14 @@ export const FIELD_SKELETON_MAP: Record<string, JSX.Element> = {
       alignItems="center"
       justifyContent="flex-start"
       position="absolute"
+      pr={2}
     >
-      <Skeleton height={12} width="70%" />
+      <Skeleton
+        variant="rounded"
+        height="12px"
+        width="calc(100% - 16px)"
+        sx={{ maxWidth: "180px" }}
+      />
     </Box>
   ),
   default: (
@@ -181,14 +200,19 @@ export const FIELD_SKELETON_MAP: Record<string, JSX.Element> = {
   ),
 };
 
-export const SkeletonLoadingOverlay = () => {
+export const SkeletonLoadingOverlay = ({
+  fields,
+}: {
+  fields?: ContentModelField[];
+}) => {
   const apiRef = useGridApiContext();
 
   const dimensions = apiRef.current?.getRootDimensions();
   const viewportHeight = dimensions?.viewportInnerSize.height ?? 0;
-
-  const rowHeight = gridDensityRowHeightSelector(apiRef);
-  const skeletonRowsCount = Math.ceil(viewportHeight / rowHeight);
+  const rowHeight = apiRef.current.state.dimensions.rowHeight;
+  const skeletonRowsCount = Math.ceil(
+    viewportHeight / apiRef.current.state.dimensions.rowHeight
+  );
 
   const totalWidth = gridColumnsTotalWidthSelector(apiRef);
   const positions = gridColumnPositionsSelector(apiRef);
@@ -198,6 +222,23 @@ export const SkeletonLoadingOverlay = () => {
   );
   const columns = apiRef.current.getVisibleColumns().slice(0, inViewportCount);
 
+  const COL_TYPE_MAP = useMemo(() => {
+    const typesMap = fields?.reduce((acc, field) => {
+      acc[field.name] = field.datatype;
+      return acc;
+    }, {} as Record<string, string>);
+    return {
+      ...typesMap,
+      createdBy: "createdBy",
+      createdOn: "text",
+      lastSaved: "text",
+      lastPublished: "text",
+      zuid: "text",
+      version: "version",
+      __check__: "checkboxSelection",
+    };
+  }, [fields]);
+
   const children = useMemo(() => {
     const array: ReactNode[] = [];
 
@@ -217,7 +258,11 @@ export const SkeletonLoadingOverlay = () => {
               borderColor: "border",
             }}
           >
-            {FIELD_SKELETON_MAP[column.type] || FIELD_SKELETON_MAP.default}
+            {FIELD_SKELETON_MAP[
+              COL_TYPE_MAP[
+                column.field as keyof typeof COL_TYPE_MAP
+              ] as keyof typeof FIELD_SKELETON_MAP
+            ] || FIELD_SKELETON_MAP.default}
           </Box>
         );
       }

src/apps/content-editor/src/app/views/ItemList/index.tsx

@@ -18,6 +18,7 @@ import {
 } from "react";
 import { SearchRounded, RestartAltRounded } from "@mui/icons-material";
 import noSearchResults from "../../../../../../../public/images/noSearchResults.svg";
+import { ItemListFilters } from "./ItemListFilters";
 import { useParams } from "../../../../../../shell/hooks/useParams";
 import { useDispatch, useSelector } from "react-redux";
 import { AppState } from "../../../../../../shell/store/types";
@@ -36,7 +37,7 @@ import { fetchItems } from "../../../../../../shell/store/content";
 import { TableSortContext } from "./TableSortProvider";
 import { fetchFields } from "../../../../../../shell/store/fields";
 import { debounce } from "lodash";
-import { SkeletonContentHeader } from "./SkeletonLoader";
+import { SkeletonContentHeader, SkeletonItemListFilters } from "./Loader";
 
 const dateFormatter = new Intl.DateTimeFormat("en-US", {
   year: "numeric",
@@ -79,9 +80,7 @@ export const ItemList = () => {
     useGetContentModelQuery(modelZUID);
   const { data: fields, isFetching: isFieldsFetching } =
     useGetContentModelFieldsQuery(modelZUID);
-  const { data: languages, isLoading: isLanguagesLoading } = useGetLangsQuery(
-    {}
-  );
+  const { data: languages } = useGetLangsQuery({});
   const activeLangId =
     languages?.find((lang) => lang.code === activeLanguageCode)?.ID || 1;
   const allItems = useSelector((state: AppState) => state.content);
@@ -95,11 +94,7 @@ export const ItemList = () => {
 
   const allFields = useSelector((state: AppState) => state.fields);
   const user = useSelector((state: AppState) => state.user);
-  const {
-    data: users,
-    isFetching: isUsersFetching,
-    isLoading: isUsersLoading,
-  } = useGetUsersQuery();
+  const { data: users, isFetching: isUsersFetching } = useGetUsersQuery();
   const [processedItems, setProcessedItems] = useState([]);
   const [isModelItemsFetching, setIsModelItemsFetching] = useState(true);
   const [sortModel] = useContext(TableSortContext);
@@ -586,34 +581,30 @@ export const ItemList = () => {
         {(stagedChanges && Object.keys(stagedChanges)?.length) ||
         selectedItems?.length ? (
           <UpdateListActions items={items as ContentItem[]} />
+        ) : isModelFetching ? (
+          <SkeletonContentHeader />
         ) : (
           <>
-            {isUsersLoading || isLanguagesLoading || isModelFetching ? (
-              <SkeletonContentHeader />
-            ) : (
-              <>
-                <Box flex={1}>
-                  <ContentBreadcrumbs />
-                  <Typography
-                    variant="h3"
-                    mt={0.25}
-                    fontWeight={700}
-                    sx={{
-                      display: "-webkit-box",
-                      "-webkit-line-clamp": "2",
-                      "-webkit-box-orient": "vertical",
-                      wordBreak: "break-word",
-                      wordWrap: "break-word",
-                      hyphens: "auto",
-                      overflow: "hidden",
-                    }}
-                  >
-                    {model?.label}
-                  </Typography>
-                </Box>
-                <ItemListActions ref={searchRef} />
-              </>
-            )}
+            <Box flex={1}>
+              <ContentBreadcrumbs />
+              <Typography
+                variant="h3"
+                mt={0.25}
+                fontWeight={700}
+                sx={{
+                  display: "-webkit-box",
+                  "-webkit-line-clamp": "2",
+                  "-webkit-box-orient": "vertical",
+                  wordBreak: "break-word",
+                  wordWrap: "break-word",
+                  hyphens: "auto",
+                  overflow: "hidden",
+                }}
+              >
+                {model?.label}
+              </Typography>
+            </Box>
+            <ItemListActions ref={searchRef} />
           </>
         )}
       </Box>
@@ -630,13 +621,15 @@ export const ItemList = () => {
           <ItemListEmpty />
         ) : (
           <>
+            {isFieldsFetching || isUsersFetching ? (
+              <SkeletonItemListFilters />
+            ) : (
+              <ItemListFilters />
+            )}
             <ItemListTable
               key={modelZUID}
               loading={
-                isFieldsFetching ||
-                isUsersFetching ||
-                isModelItemsFetching ||
-                isModelFetching
+                isFieldsFetching || isUsersFetching || isModelItemsFetching
               }
               rows={sortedAndFilteredItems}
               fields={fields}