fix: fixed testset columns naming conventions

[ashrafchowdury]

Description

Fixed the test set colums naming conventions by making it lowercase.

Screenshot

Issue

Closes #1737

[vercel]

@ashrafchowdury is attempting to deploy a commit to the mmabrouk's projects Team on Vercel.

A member of the Team first needs to authorize it.

[mmabrouk]

Thanks @ashrafchowdury
The goal of the issue is not to set everything to lower case but just keep it as is

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
agenta	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 4, 2024 10:40am

[mmabrouk]

I don't understand the changes that you have made and why you have made them..

The way I would tackle this is the following: Somewhere in the code we are transforming the input made by the user and uppercasing the first letter (unless this is the default behavior in ant.design which is very likely), you need to find that part and remove it. That's it.

[ashrafchowdury]

The primary issue is with the ag-grid-react library used to generate the test set tables. This library does not allow styling of the column header names.The library, by default, uses CamelCase format for column headers.

To fix this issue, I am using the column names that are coming from the database, rather than the names provided by the library.

Code Changes:

• Using the inputValues as header name which is comming from the database insead of displayName which is provided by the ag-grid-react library.
• Implemented a setTimeout function to prevent the glitch associated with name changing. The glitch is between previous name and the new name.

[ashrafchowdury]

I don't understand the changes that you have made and why you have made them..

The way I would tackle this is the following: Somewhere in the code we are transforming the input made by the user and uppercasing the first letter (unless this is the default behavior in ant.design which is very likely), you need to find that part and remove it. That's it.

The code is fine, the uppercase formatting is a characteristic of the ag-grid-react library that are used to create the testset tables. This library by default CamelCase column headers.

ag-grid-react library doc: https://www.ag-grid.com/react-data-grid/column-headers/#header-name

[mmabrouk]

The primary issue is with the ag-grid-react library used to generate the test set tables. This library does not allow styling of the column header names.The library, by default, uses CamelCase format for column headers.

To fix this issue, I am using the column names that are coming from the database, rather than the names provided by the library.

Code Changes:

• Using the inputValues as header name which is comming from the database insead of displayName which is provided by the ag-grid-react library.
• Implemented a setTimeout function to prevent the glitch associated with name changing. The glitch is between previous name and the new name.

Thanks for the explanation and for sharing the link to the documentation. I think you misunderstood the documentation. See the example that they provide, if the user specifies field they would use a camel case, if the user provides a headerName they use it as is. I think we just need to use headerName and that would resolve the issue, no?

[bekossy]

Thank you for the PR @ashrafchowdury
Following the Docs, in order to fix the naming convention you just need to set the headerName prop in the columnDefs object

For instance

            const newColDefs = [
                CHECKBOX_COL,
                ...colData.map((col) => ({
                    ...col,
                    headerName: col.field,
                })),
                ADD_BUTTON_COL,
            ]
            setColumnDefs(newColDefs)
            

You need to do this when we apply the columns, update the table and add new columns

[ashrafchowdury]

I apologize for everything @mmabrouk, I misunderstood the documentation. Also, thank you @bekossy, for the direction.

[bekossy]

Awesome work @ashrafchowdury however we also need to do the same when we add a new column

[bekossy]

Great work @ashrafchowdury

[mmabrouk]

Thanks @ashrafchowdury

For some reason the behavior is weird. If you use an upper case column name, it would be transformed to lower case, then if you try to edit it, it would be shown as upper case. I think we need to be consistent here. Either, we show exactly what the user has provided (upper case or lower case), or we transform everything to lowercase and show it as such.

CleanShot.2024-06-03.at.14.38.08.mp4

Second problem is that each time you make a modification to the test set and save, you create a new test set it appears! @bekossy can you please look into this. I did not see this issue in cloud but I am seeing it in the Vercel preview here, is this a new issue introduced by this PR?

[bekossy]

@mmabrouk I don’t think the Vercel Preview is showing the latest changes in the PR as it was last deployed 17 hours ago

Screen.Recording.2024-06-03.at.1.55.28.PM.mov

[mmabrouk]

Thanks @bekossy
I deployed now the latest version. The issue now is that you cannot rename a column named 'correct_answer' to 'Correct_answer' although these are two different column names (since we now differ from lower case and upper case)

[mmabrouk]

Thanks @ashrafchowdury and @bekossy ! Great work!

[mmabrouk]

@all-contributors please add @ashrafchowdury for bug fix and code

[allcontributors]

@mmabrouk

I've put up a pull request to add @ashrafchowdury! 🎉