Skip to content

Create React UI for editing validations in levelbuilder#53142

Merged
sanchitmalhotra126 merged 2 commits into
stagingfrom
sanchit/validations-editor
Aug 4, 2023
Merged

Create React UI for editing validations in levelbuilder#53142
sanchitmalhotra126 merged 2 commits into
stagingfrom
sanchit/validations-editor

Conversation

@sanchitmalhotra126

Copy link
Copy Markdown
Contributor

This adds a React-based UI for editing validations to levelbuilder pages. This is in an effort to create a nicer UI for authoring validations (rather than hand-crafting code or JSON), and has another big benefit of being able to share front end code with other front end components. This means that we can reference other front-end types, like the list of valid validations, and shared typescript types and interfaces.

Currently, this adds a new field to music levels called "validations", but when saving the level, we merge the validations back into level data. I think we are looking to move towards storing validations on level properties directly, rather than in level data, so when that change is complete, we can tweak some of the code that copies over the validations JSON in levels_controller.

Testing Notes

I've hand tested this on some Music all the things levels, but i'm sure we'll continue to iterate on this as we start using it more.

Validations.Editor.8-2.mov

@sanchitmalhotra126 sanchitmalhotra126 requested review from a team and breville August 3, 2023 00:23
<br />
NOTE: Validations are checked in the order they are listed. The first
validation set that passes is the one that is displayed, so be sure to
order your validation sets from most conditions to least.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

This could possibly be "most stringent to least" or similar, since it might be the case that we check for one validation earlier even though it technically doesn't have more conditions than those below it?

Comment on lines +65 to +66
// height: 30px;
// width: 30px;

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Unused?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Oh good catch

# first-order member of the properties JSON, rather than simply as a string of
# JSON belonging to a single property.
update_level_params[:level_data] = JSON.parse(level_params[:level_data]) if level_params[:level_data]
# Update level data with validatons, and remove from level properties.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

super nit: typo

);
};

const moveValidation = (key: string, direction: 'up' | 'down') => {

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

It might be tough given the size of a validation's UI block, but it's pretty slick when we can drag things to reorder them. The up/down arrows do seem sufficient though.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Agreed! Wanted to just get something working so I went with the arrows, but it would be cool to pull in some React dragging library for this

@breville breville left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

It's so awesome to see this. Great work!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants