okfn/opendataeditor

Changes to the datagrid

romicolman opened this issue · 4 comments

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:

Image

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.

@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:

Image

Image

@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.

@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?

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

image

Here's the Figma file, and Prototype

Errors.report.interaction.mp4