[G2M] Add aliases for column titles

[geoerika]

Closes #185

Changes:

ColumnAliasControls - for devs only

• added new editing functionality for column names that allows to add an alias to be used instead of the current column name

• moved the Edit button in ValueConfigurationby the Clear button

• the Edit button allows both deleting a value in the value configuration & adding an alias for the column name in value & domain configurations

  

• added validation for the alias, letting know the user if the alias is already in use

  

• the alias text field is disabled if the corresponding column has no column name selected

  

• the Edit button will be disabled & will inform users if there is no editable columns

  

Test Story

Recording:

https://user-images.githubusercontent.com/41120953/197799479-47c8efc0-1278-440d-ac71-8b818646b0b9.mov

[github-actions[bot]]

📚 Storybook preview (updated to 6c3ca8601b2572b45f20389d23994e1c0741f52f)

[geoerika]

@Hamaad102

The domain configuration lacks the icons for column and alias

Yes, I know. But that's how the design for that section looks like. We can revisit this later. Widget Studio needs a full revision for styling, something we have been pushing aside since the design team could not fit it in their schedule. From Figma:

[geoerika]

@Hamaad102

Textfield is slightly finicky. If you make changes and immediately hit the done button it most likely will not save. If you wait a moment or hit the enter button the changes will save. I can provide video of this if needed.

No need for the recording, I am using a debounced value to update the state so I don't have too frequent re-renders in the charts/map. I just reduced the time in useDebounce from 1 sec to .5 sec. Please try it again and let me know if I need to decrease the time further.

[Hamaad102]

@Hamaad102

Textfield is slightly finicky. If you make changes and immediately hit the done button it most likely will not save. If you wait a moment or hit the enter button the changes will save. I can provide video of this if needed.

No need for the recording, I am using a debounced value to update the state so I don't have too frequent re-renders in the charts/map. I just reduced the time in useDebounce from 1 sec to .5 sec. Please try it again and let me know if I need to decrease the time further.

I just tested it, this adjustment is perfect

[geoerika]

@Hamaad102 I also fixed all the other issues you pointed out, if you can re-review please!

[Hamaad102]

• [x] The alias issue is still present in a specific case. If you're in the editor mode and click the clear button it will keep you in the editor mode and disable the textfield. The alias will still be present once you press done and you add another column.

When you click the done button and go back to the normal view the add value button is also temporarily missing. Pressing clear once will actually clear the alias. Pressing it a second time will display the add value button. I think in this instance it should not be there at all? This is for dev-bar-2 specifically where normally the add value button is not there at all.

Otherwise, everything looks good

[vlatawiec]

@Hamaad102

The domain configuration lacks the icons for column and alias

Yes, I know. But that's how the design for that section looks like. We can revisit this later. Widget Studio needs a full revision for styling, something we have been pushing aside since the design team could not fit it in their schedule. From Figma:

This is a definite addition for consistency. I can create a design for this (if it's a quick/simple iteration for DEV) asap, otherwise let me know when this becomes a priority again!

[geoerika]

This is a definite addition for consistency. I can create a design for this (if it's a quick/simple iteration for DEV) asap, otherwise let me know when this becomes a priority again!

@vlatawiec if you have time, sure, go ahead. I will take care of it when I get a window.

[geoerika]

@vlatawiec thank you! @Hamaad102 I fixed the last issues. Good catches! Thanks!