Changes to the datagrid

[romicolman]

Description

For further context, please check issue #485

Figma file section for datagrid here.

Changes to the datagrid

This issue is to implement changes to the datagrid. Please, take into consideration that in other tickets we removed/hide the following buttons from the datagrid:

• ChatAI
• Errors

In these implementation we will keep these features:

• Metadata
• Source
• Redo
• Undo
• Errors report

and the buttons Publish and Save changes.

This is how it should look like:

List of changes and instructions

• Move button PUBLISH to the top right.
• Move the button SAVE to the top right and change its name to SAVE CHANGES: this button should be grey if the user did not save changes and green if changes has been saved.
• Change the name of the REPORT button to ERRORS REPORT: if the file has 0 errors, that button should be grey. @Faithkenny what should be the color of this button if the file contains errors?
• Adapt font of the datagrid.

Other things to consider

• In the current version of the ODE, the app highlights in red cells with errors. We need to keep that indication. @Faithkenny are we keeping the same color here? Does Guergana need to use a different red variation?
• @guergana: when the user clicks on METADATA this panel should be displayed (we won't change that logic. Keep it as it is). Same for the ERRORS REPORT functionality.

[romicolman]

@guergana There is an extra issue that you will need to consider when working on the implementation of the new datagrid:

Because of the implementation of the sidebar, the metadata panel and the Errors report (currently named Report) have moved:

[Faithkenny]

@romicolman here, @guergana should be using OKFN/Red/400 from our color palette

Other things to consider

• In the current version of the ODE, the app highlights in red cells with errors. We need to keep that indication. @Faithkenny are we keeping the same color here? Does Guergana need to use a different red variation?
• @guergana: when the user clicks on METADATA this panel should be displayed (we won't change that logic. Keep it as it is). Same for the ERRORS REPORT functionality.

[Faithkenny]

@romicolman There's a design opportunity here. I will share it with you on Slack

• Change the name of the REPORT button to ERRORS REPORT: if the file has 0 errors, that button should be grey. @Faithkenny what should be the color of this button if the file contains errors?

[Faithkenny]

Implementation guidelines for the Errors report button,

• The button is grey, and in a disabled state if the file has no errors
• The button has a badge count if there are 1 or more errors

Please see the Variants/States here

Here's the Figma file, and Prototype

https://github.com/user-attachments/assets/765ff449-7993-4c1c-a23f-3433c3f4a1bf