Datagrid state & semver

[romgrk]

Ours docs says that the grid's internal state is not public and therefore not covered by semver.

However, I've seen it said many times that our users are storing at least part of the state in their database for restoring it later. So everytime we change the state, there is a chance their code breaks.

Should we:

• Explicitly say we don't support save & restore across versions?
• Make the state public, and therefore covered by semver?
• Expose a semver compatible save & restore API?

[flaviendelangle]

For me the format exported by the save & restore API (which is a sub-set of the state) is public, but not the rest.

[romgrk]

Ah I see. Do we have a way to ensure that we can't break the semver guarantee if we change the state? I seem to remember that we broke something a few weeks ago, so I'm guessing we don't have tests or they don't cover this enough.

[flaviendelangle]

That's a good question
I would be interested to see if you can find this unwanted breaking change from a few weeks ago
The main issue is that, before, the whole state was public, and it was a pain to do non-trivial evolution during minors because every single weird internal state elements could in theory be used by someone.
So, we moved to a private state and only supporting semver for the selectors (that can temporarily translate back to the old format if needed) and the API methods (like the save and restore one).

[cherniavskii]

Do we have a way to ensure that we can't break the semver guarantee if we change the state?

We have some tests in https://github.com/mui/mui-x/blob/3329a605b94691ece11d2110c0a8d519e9ef7ee9/packages/grid/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx

I seem to remember that we broke something a few weeks ago

We can cover this one with a test.

[DanailH]

I think so far we have only relied on selectors to transform the state accordingly if there is an internal change. I think there is a place in the docs that explains that one should only access the state through the exported selectors.

[flaviendelangle]

We already have this warning: https://mui.com/x/react-data-grid/state/#access-the-state

[breadcrumbsonthefloor]

sorry this is maybe not the right forum to ask this, but when is the next mui-x release? I'm waiting for #10470 to be released, when can I expect this?

[DanailH]

@breadcrumbsonthefloor We are doing weekly releases on Thursday, so you can expect it today ;)

[nikita-fxbytes]

Hello

My code is
"use client"
import { TreeView } from '@mui/x-tree-view/TreeView';
import { Box } from '@mui/material';
import SidebarController from './sidebarController';
import AddCircleIcon from '@mui/icons-material/AddCircle';
import RemoveCircleIcon from '@mui/icons-material/RemoveCircle';
import { StyledTreeItem } from './styledTreeItem';
import FunctionTree from './function-tree';
import ImageTree from './image-tree';
interface SidebarProps {
onError: (error: string) => void;
}
const Sidebar: React.FC = ({ onError }) => {
const {
defaultCollectionId,
collectionLoader,
collectionData,
openCollection,
handleCollectionClick,
create,
edit,
collectionEdit,
handleCollectionPermission,
userPermissions
} = SidebarController(onError)

return (


{!collectionLoader &&
{collectionData && collectionData.length>0 && collectionData.map((collection:any)=>(
<StyledTreeItem
key={collection.id}
nodeId={collection.id}
label={
<div className={tree-lable ${openCollection[collection.id] ? 'active' : ''}}><span onClick={() => handleCollectionClick(collection.id)}>{openCollection[collection.id] ? :<AddCircleIcon onClick={() => handleCollectionPermission(collection.id)}/>}
<span className='tree-heading' onClick={(e)=>collectionEdit(e, collection.id)}>{collection?.name ?? ''}

}
>
<FunctionTree
collectionId={collection.id}
handleCollectionClick={handleCollectionClick}
openCollection={openCollection}
create={create}
onError={onError}
totalFunctions={collection.totalFunctions}
edit={edit}
userPermissions={userPermissions && userPermissions[collection.id] && userPermissions[collection.id]}
/>

            </StyledTreeItem>
            ))}
    
    </TreeView>}
  </Box>
</Box>

)
}
export default Sidebar

my function component code

import React from 'react'
import RemoveCircleIcon from '@mui/icons-material/RemoveCircle';
import AddBoxOutlinedIcon from '@mui/icons-material/AddBoxOutlined';
import AddCircleIcon from '@mui/icons-material/AddCircle';
import { StyledTreeItem } from '../styledTreeItem';
import FunctionTreeController from './functionTreeController';
import PermissionComponent from '@/components/permission';
import { TREEVIEWPERMISSIONS } from '@/utils/permissionsConstants';
interface FunctionTreeProps {
collectionId: string;
handleCollectionClick: (id: string) => void;
openCollection: { [key: string]: boolean };
create: any;
onError: (error: string) => void;
totalFunctions: string;
edit: any;
userPermissions:any
}
const FunctionTree: React.FC = ({ collectionId, handleCollectionClick, openCollection, create, onError, totalFunctions, edit, userPermissions }) => {

const {showCollectionFunction,mydata, collectionFunctions, collectionFunctionLoader, collectionChildFunctions } = FunctionTreeController(onError)
console.log(mydata,'mydata')
console.log(collectionFunctions, 'collectionFunctions')
const renderChildFunctions = (collectionId:any, functionId:any) => {
    const childFuncs = collectionChildFunctions[collectionId]?.[functionId];
    if (childFuncs && childFuncs.length > 0) {
      return (
        <>
          {childFuncs.map((childFunction: any) => (
            <StyledTreeItem 
            
              key={childFunction.id} 
              nodeId={childFunction.id} 
              label={
                <div 
                    className={`tree-label ${openCollection[`${childFunction.id}`] ? 'active' : ''}`}
                >
                    {childFunction.childcount !== '0' && 
                    <span 
                        
                        onClick={() => handleCollectionClick(`${childFunction.id}`)}
                        > {openCollection[`${childFunction.id}`] ? <RemoveCircleIcon />:<AddCircleIcon onClick={() => showCollectionFunction(collectionId, childFunction.functionscollectionid)}/>}
                    </span>}
                    <span 
                        className='tree-heading' 
                        onClick={(e)=>edit(e, collectionId, childFunction.functionscollectionid, childFunction.id, 'function')}>{childFunction.name}
                    </span>
                    <PermissionComponent userPermissions={userPermissions ? userPermissions : []} requiredPermission={TREEVIEWPERMISSIONS.FUNCTIONCREATE}>
                        <span 
                            onClick={(e)=>create(e, collectionId, childFunction.functionscollectionid, 'function')}><AddBoxOutlinedIcon />
                        </span>
                    </PermissionComponent>
                    
                </div>
              }
              >
            {renderChildFunctions(collectionId, childFunction.functionscollectionid)}
            </StyledTreeItem>
              ))}
        </>
      );
    }
    return null;
  };

return (
<>
<StyledTreeItem
nodeId={functions-${collectionId}}
label={
<div
className={tree-label ${openCollection[${collectionId}-function] ? 'active' : ''}}
>
{
totalFunctions !== '0' &&
<span
onClick={() => handleCollectionClick(${collectionId}-function)}
>
{openCollection[${collectionId}-function] ?
:
<AddCircleIcon
onClick={() => showCollectionFunction(collectionId)}
/>}

} <span
className='tree-heading'
onClick={(e)=>e.stopPropagation()}>Functions

<PermissionComponent userPermissions={userPermissions ? userPermissions : []} requiredPermission={TREEVIEWPERMISSIONS.FUNCTIONCREATE}>
<span
onClick={(e)=>create(e,collectionId, null, 'function')}
>

        </div>
        }
        >
        {mydata[collectionId] &&
        mydata[collectionId].map((colectionfunction: any) => (
            <StyledTreeItem 
                key={colectionfunction.id} 
                nodeId={colectionfunction.id} 
                label={
                    <div 
                        className={`tree-label ${openCollection[`${colectionfunction.id}`] ? 'active' : ''}`}
                    >
                        {colectionfunction.childcount !== '0' && 
                            <span 
                                
                                onClick={() => handleCollectionClick(`${colectionfunction.id}`)}
                                > {openCollection[`${colectionfunction.id}`] ? <RemoveCircleIcon />:<AddCircleIcon onClick={() => showCollectionFunction(collectionId, colectionfunction.functionscollectionid)}/>}
                            </span>
                        }
                        <span 
                            className='tree-heading' 
                            onClick={(e)=>edit(e, collectionId, colectionfunction.functionscollectionid, colectionfunction.id,'function')}>{colectionfunction.name}
                        </span>
                        <PermissionComponent userPermissions={userPermissions ? userPermissions : []} requiredPermission={TREEVIEWPERMISSIONS.FUNCTIONCREATE}>
                            <span 
                                onClick={(e)=>create(e, collectionId, colectionfunction.functionscollectionid, 'function')}><AddBoxOutlinedIcon />
                            </span>
                        </PermissionComponent>
                       
                    </div>
                }
            >
                {renderChildFunctions(collectionId, colectionfunction.functionscollectionid)}
            </StyledTreeItem>
        
        ))}
    </StyledTreeItem>
</>

)
}

export default FunctionTree

my function controller

import FunctionService from '@/services/functionService';
import { ITEMLIMIT, STATUSCODE } from '@/utils/constants';
import { FUNCTIONPERMISSIONS } from '@/utils/permissionsConstants';
import { useRouter } from 'next/navigation';
import React, { useEffect, useState } from 'react'
import { showError } from "@/utils/errorHandler";
interface CollectionChildFunctionsType {
[collectionId: string]: {
[functionId: string]: any[]; // Assuming your collectionChildFunctions[collectionId][functionId] is an array
};
}
interface CollectionFunctionsType {
[key: string]: any[]; // Assuming your collectionFunctions[key] is an array
}
const FunctionTreeController = (onError: (value: any) => void) => {
const router = useRouter()
const [collectionFunctions, setCollectionFunctions] = React.useState({});
const [collectionFunctionLoader, setCollectionFunctionLoader] = React.useState(false);
const [collectionChildFunctions, setCollectionChildFunctions] = React.useState({});
const showCollectionFunction = async(collectionId: string, functionId: any = null) => {
functionTreeAPI(collectionId, functionId);
}

const [mydata, setMydata] = React.useState<CollectionFunctionsType>({});

const functionTreeAPI = async (collectionId: string, functionId: any) => {
    setCollectionFunctionLoader(true);
    const body = {
        CollectionId: collectionId,
        FunctionId: functionId ? functionId : ''
    };
    const data = {
        body,
        permission: FUNCTIONPERMISSIONS.FUNCTIONLISTVIEW,
        collectionId: collectionId
    }

    try {
        const response = await FunctionService.getAllFunctionList(data);
        if (response.status === STATUSCODE.HTTPOK) {
            if(functionId){
                setCollectionChildFunctions((prevState:any) => ({
                    ...prevState,
                    [collectionId]: {
                      ...prevState[collectionId],
                      [functionId]: response.data
                    }
                  }))
            }else{
                setCollectionFunctions((prevState: any) => ({
                    ...prevState,
                    [collectionId]: response.data, // Assuming your response data is an array
                  }));

            }
        }
    } catch (error: any) {
        if (error.response) {
            const errorRes = error.response.data;
            if (errorRes.status === STATUSCODE.HTTPUNAUTHORIZED) {
                router.push('/');
            } else {
                onError(showError(errorRes.message));
            }
        } else {
            onError(showError(error.message));
        }
    } finally {
        setCollectionFunctionLoader(false);
        setTimeout(() => {
            onError(null);
        }, ITEMLIMIT.maxItem5000);
    }  
}
useEffect(()=>{
    setMydata(collectionFunctions)
},[collectionFunctions])

return {showCollectionFunction, collectionFunctions, collectionFunctionLoader, collectionChildFunctions, mydata }
}

export default FunctionTreeController

I face this problem when I click on plus for the first time, I am not able to see any child in my tree when I click, I have to click twice but I see it on the first click. Have to do it, how to do it please help me.

[cherniavskii]

Please create a new issue with a minimal reproduction example so we can take a look.