Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(@rjsf/core): use name for additional properties #2878

Merged
merged 4 commits into from Sep 14, 2022

Conversation

ranihorev
Copy link
Contributor

@ranihorev ranihorev commented Jun 9, 2022

Reasons for making this change

When rendering additional properties with title, the key of all properties appears to be the title of the property instead of the actual value of the key. Instead, we should first take the key in this case

image

Is there a reason to add a test for this?

Playground demo

TODO: fix tests if this looks like a reasonable solution

label = uiSchema["ui:title"] || props.schema.title || schema.title || name;
label = schema.hasOwnProperty(ADDITIONAL_PROPERTY_FLAG)
? name
: uiSchema["ui:title"] || props.schema.title || schema.title || name;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure quite what this is fixing. Can you add a test -- which should make it clearer the expected behavior?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can see in the demo that the key input field contains the title of the field instead of the key of the addition property. I'll add some tests but I wanted to make sure that it makes sense first

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry about the late reply. Going to add some tests now, but to clarify the diff:

Before:
image

After:
image

Notice that the key is is propTitle which is the title of the field instead of the actual key fsdf

This is the demo playground

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@epicfaace I finally added the test. Sorry about the delay again

@heath-freenome heath-freenome added the v5 refactor Needs refactor due to v5 breaking changes label Sep 3, 2022
@heath-freenome
Copy link
Member

@ranihorev Please refactor this change onto the Typescript conversion of SchemaField and update the CHANGELOG.md file

@heath-freenome heath-freenome added the p1 Important to fix soon label Sep 9, 2022
@heath-freenome
Copy link
Member

@ranihorev Did you have any questions or issues related to the refactor? If so I can be reached on discord

@ranihorev
Copy link
Contributor Author

@heath-freenome I updated the PR. I've been struggling with running the playground locally (core updates are not reflected in the playground) which makes development much slower :(

@heath-freenome
Copy link
Member

heath-freenome commented Sep 10, 2022

@heath-freenome I updated the PR. I've been struggling with running the playground locally (core updates are not reflected in the playground) which makes development much slower :(

Hmmm, if you run npm install and npm run build from the root directory the lerna setup should have made symbolic links in the playground. Are they not there? You can tell by looking in the packages/playground/node_modules/@rjsf directory. Once you start working, to see changes from one package reflected in others you'll need to run npm run build in the package you are working with

@ranihorev
Copy link
Contributor Author

ranihorev commented Sep 11, 2022

That's what I did :)
I see the dist files in the playground package if that's what you mean.
Do I need to run core in watch mode? I assumed that npm start is already watching and building the packages.

btw, I'm also seeing these errors when I run npm start (but the playground is running):

(typescript) Error: /Users/rhorev/react-jsonschema-form/packages/fluent-ui/src/FuiForm/FuiForm.tsx(2,38): semantic error TS7016: Could not find a declaration file for module '@rjsf/core'. '/Users/rhorev/react-jsonschema-form/packages/fluent-ui/node_modules/@rjsf/core/dist/index.js' implicitly has an 'any' type.

@heath-freenome
Copy link
Member

That's what I did :) I see the dist files in the playground package if that's what you mean. Do I need to run core in watch mode? I assumed that npm start is already watching and building the packages.

btw, I'm also seeing these errors when I run npm start (but the playground is running):

(typescript) Error: /Users/rhorev/react-jsonschema-form/packages/fluent-ui/src/FuiForm/FuiForm.tsx(2,38): semantic error TS7016: Could not find a declaration file for module '@rjsf/core'. '/Users/rhorev/react-jsonschema-form/packages/fluent-ui/node_modules/@rjsf/core/dist/index.js' implicitly has an 'any' type.

Odd... Try running core in watch mode. Usually, I'm doing all the builds then starting playground.

@ranihorev
Copy link
Contributor Author

ranihorev commented Sep 12, 2022

How do you run all the builds? using npm run build?
I just did a fresh clone, then ran:

npm install
npm run build
npm start

And I'm getting a bunch of errors:

[...f/playground] ERROR in ../bootstrap-4/dist/index.js 7:2-62
[...f/playground] Module not found: Error: Can't resolve './bootstrap-4.cjs.development.js' in '/Users/xx/react-jsonschema-form/packages/bootstrap-4/dist'
[...f/playground]  @ ./src/index.js 8:0-61 87:11-26
[...f/playground]
[...f/playground] ERROR in ../chakra-ui/dist/index.js 7:2-60
[...f/playground] Module not found: Error: Can't resolve './chakra-ui.cjs.development.js' in '/Users/xx/react-jsonschema-form/packages/chakra-ui/dist'
[...f/playground]  @ ./src/index.js 9:0-57 91:11-24
[...f/playground]
[...f/playground] ERROR in ../fluent-ui/dist/index.js 7:2-60
[...f/playground] Module not found: Error: Can't resolve './fluent-ui.cjs.development.js' in '/Users/xx/react-jsonschema-form/packages/fluent-ui/dist'
[...f/playground]  @ ./src/index.js 5:0-57 95:11-24
[...f/playground]
[...f/playground] ERROR in ../material-ui/dist/index.js 7:2-62
[...f/playground] Module not found: Error: Can't resolve './material-ui.cjs.development.js' in '/Users/xx/react-jsonschema-form/packages/material-ui/dist'
[...f/playground]  @ ./src/index.js 3:0-56 99:11-21
[...f/playground]
[...f/playground] ERROR in ../mui/dist/index.js 7:2-54
[...f/playground] Module not found: Error: Can't resolve './mui.cjs.development.js' in '/Users/xx/react-jsonschema-form/packages/mui/dist'
[...f/playground]  @ ./src/index.js 4:0-48 103:11-21

It looks like lerna tried running the playground build before the other builds were finished. Not sure why that is. At least you figured out how to get by it.

@heath-freenome
Copy link
Member

It looks like lerna tried running the playground build before the other builds were finished. Not sure why that is. At least you figured out how to get by it.

Does using the updated build command in this PR solve your issues?

@ranihorev
Copy link
Contributor Author

@heath-freenome no, I still can't run the playground locally. I have no idea why...

@heath-freenome
Copy link
Member

heath-freenome commented Sep 12, 2022

Reference

Hmmm, so it started breaking for me just now too?!

@heath-freenome
Copy link
Member

Reference

Hmmm, so it started breaking for me just now too?!

Interesting... by switching back to main (yes, sorry master was renamed, but Github tells you how to fix that) and running npm run build playground compiled fine for me... Then I switched back to my branch and ran it again and it ran fine... Not sure why

@ranihorev
Copy link
Contributor Author

ranihorev commented Sep 13, 2022

I think that npm run start in the root folder is the culprit. It doesn't work.
However, if I run npm run start in playground then it runs just fine. What a waste of time... :(

I'm surprised it's working for everyone else though.

The next challenge, making the playground reload when updating core

@heath-freenome
Copy link
Member

heath-freenome commented Sep 13, 2022

I think that npm run start in the root folder is the culprit. It doesn't work. However, if I run npm run start in playground then it runs just fine. What a waste of time... :(

I'm surprised it's working for everyone else though.

Yes, the npm start from the root directory probably worked just fine when there was core and playground back in that day... Today, with 11 other packages to monitor, it probably just doesn't work anymore or if it does it may crush the computer resources. I think we probably need to update the contributing documentation more helpful directions. I don't use it anymore. I just rebuild the packages I'm updating and redo npm start in the playground directory.

The next challenge, making the playground reload when updating core
Well, its a bit slow, but npm run build followed by npm start in playground will work. You could also temporarily edit the other themes package.json to remove the start command from them and then doing npm start from the root directory will only run core and playground

@heath-freenome
Copy link
Member

@ranihorev Also, please update the CHANGELOG.md and add a new # 5.0.0-beta.8 with your change to ## @rjsf/utils

@ranihorev
Copy link
Contributor Author

@heath-freenome I think that this PR is good to go :)

@heath-freenome heath-freenome merged commit d6b3c1b into rjsf-team:main Sep 14, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
p1 Important to fix soon v5 refactor Needs refactor due to v5 breaking changes
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants