Skip to content

[Codebridge] Add reset neighborhood button #65257

New issue

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

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

Already on GitHub? # to your account

Merged
merged 12 commits into from
Apr 15, 2025
Merged

Conversation

fisher-alice
Copy link
Contributor

@fisher-alice fisher-alice commented Apr 14, 2025

This PR adds a 'reset' button for the Neighborhood mini-app so that a user can reset the Neighborhood to its initial state before running the program again. This is especially helpful when there are assets on the neighborhood grid including paint buckets with the initial number of 'paints' at a particular coordinate.
Example:

Screenshot 2025-04-15 at 12 06 52 PM

The 'reset' button is initially disabled.
Screenshot 2025-04-15 at 12 06 40 PM

Once the user runs the program and the program has completed, the 'reset' button is enabled and includes a tooltip:
Screenshot 2025-04-15 at 12 06 59 PM

After update

Notice that if a user goes to a different Neighborhood level, that the 'reset' button is initially disabled.

Screen.Recording.2025-04-15.at.12.08.54.PM.mov

Links

jira
Slack thread confirming implementation with product/design

Testing story

I tested on pythonlab neighborhood levels and on pythonlab standalone projects.
This does not have any impact on console levels.

Deployment strategy

Follow-up work

I will check with product to see if they'd like to implement this for javalab.

Privacy

Security

Caching

PR Checklist:

  • Tests provide adequate coverage
  • Privacy and Security impacts have been assessed
  • Code is well-commented
  • New features are translatable or updates will not break translations
  • Relevant documentation has been added or updated
  • User impact is well-understood and desirable
  • Pull Request is labeled appropriately
  • Follow-up work items (including potential tech debt) are tracked and linked

@fisher-alice fisher-alice marked this pull request as ready for review April 14, 2025 23:58
@fisher-alice fisher-alice requested review from molly-moen and a team April 14, 2025 23:58
Copy link
Contributor

@molly-moen molly-moen left a comment

Choose a reason for hiding this comment

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

Looks good, one note on naming/simplifying the logic

@@ -30,14 +44,40 @@ const MiniAppPreview: React.FunctionComponent<MiniAppPreviewProps> = ({
showMaximizeButton = true,
handleScaling,
}) => {
const {labConfig} = useCodebridgeContext();
const {labConfig, levelProperties} = useCodebridgeContext();
const [isDisabled, setIsDisabled] = useState(true);
Copy link
Contributor

Choose a reason for hiding this comment

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

can you rename this something like isResetButtonDisabled? In the context of the component isDisabled could mean the entire preview is disabled.

Copy link
Contributor

Choose a reason for hiding this comment

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

Additionally, do we need both isDisabled and isReset? Can we just update isDisabled when we would update isReset and get the same effect?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes - will rename and simplify. Thanks!

@@ -23,7 +23,7 @@ This tests adds some customization to the output of unit tests, and has a functi

## Building a package
From the package folder containing `pyproject.toml`, run `uv build`. The generated `.whl` file will be in the `code-dot-org/dist` folder.
The generated `.whl` file can then be copied to [apps/lib/pyiodide](../../apps/lib/pyodide/).
The generated `.whl` file can then be copied to [apps/lib/pyodide](../../apps/lib/pyodide/).
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Unrelated typo fix.

}}
size={'xs'}
type={'tertiary'}
className={classNames(darkModeStyles.tertiaryButton)}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Removed custom style since we now use DSCO dark theme.

@fisher-alice fisher-alice requested a review from molly-moen April 15, 2025 17:04
@fisher-alice fisher-alice merged commit 96ef54c into staging Apr 15, 2025
6 checks passed
@fisher-alice fisher-alice deleted the alice/reset-neighborhood branch April 15, 2025 20:45
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants