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

Dev classifier workflow routing #2993

Merged
merged 3 commits into from
Mar 31, 2022
Merged

Conversation

eatyourgreens
Copy link
Contributor

@eatyourgreens eatyourgreens commented Mar 29, 2022

Add some simple workflow routing to the dev classifier, so that the location bar updates when the selected workflow changes.

I've also fixed a few React errors in the console:

  • use htmlFor instead of for in JSX.
  • use keys on arrays of JSX elements.
  • use defaultValue instead of selected for the <select> element.

Try it out on a project that has multiple workflows. When you select a new workflow, from the dropdown menu, the window location should update to include the new value of the workflow query parameter. I've also added a popstate handler so that you can navigate backwards and forwards with the browser Back and Forward buttons.

https://localhost:8080/?project=eatyourgreens%2F-project-testing-ground

Package

lib-classifier

Checklist

PR Creator - Please cater the checklist to fit the review needed for your code changes.
PR Reviewer - Use the checklist during your review. Each point should be checkmarked or discussed before PR approval.

General

  • Tests are passing locally and on Github
  • Documentation is up to date and changelog has been updated if appropriate
  • You can yarn panic && yarn bootstrap or docker-compose up --build and FEM works as expected
  • FEM works in all major desktop browsers: Firefox, Chrome, Edge, Safari (Use Browserstack account as needed)
  • FEM works in a mobile browser

General UX

Example Staging Project: i-fancy-cats

  • All pages of a FEM project load: Home Page, Classify Page, and About Pages
  • Can submit a classification
  • Can sign-in and sign-out
  • The component is accessible

Bug Fix

  • The PR creator has listed user actions to use when testing if bug is fixed
  • The bug is fixed
  • Unit tests are added or updated

New Feature

  • The PR creator has listed user actions to use when testing the new feature
  • Unit tests are included for the new feature
  • A storybook story has been created or updated
    • Example of SlideTutorial component with docgen comments, and its story

Refactoring

  • The PR creator has described the reason for refactoring
  • The refactored component(s) continue to work as expected

Maintenance

  • If not from dependabot, the PR creator has described the update (major, minor, or patch version, changelog)

Add some simple workflow routing to the dev classifier, so that the location bar updates when the selected workflow changes.
@eatyourgreens eatyourgreens added enhancement New feature or request dx Things that improve the developer experience labels Mar 29, 2022
Add history state for back/forward navigation.
- use `htmlFor` instead of `for`.
- use keys for arrays of JSX elements.
- use `defaultValue` instead of `selected`.
<select id="workflows" onChange={this.selectWorkflow}>
<option selected={!workflowID} value=''>None</option>
{workflows.map(workflow => <option selected={workflow.id === workflowID} value={workflow.id}>{workflow.display_name} {workflow.id}</option>)}
<label htmlFor="workflows">Change workflow</label>
Copy link
Contributor

Choose a reason for hiding this comment

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

Nice catch!

<label htmlFor="workflows">Change workflow</label>
<select id="workflows" defaultValue={workflowID} onChange={this.selectWorkflow}>
<option value=''>None</option>
{workflows.map(workflow => <option key={workflow.id} value={workflow.id}>{workflow.display_name} {workflow.id}</option>)}
Copy link
Contributor

Choose a reason for hiding this comment

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

Missing key: Nice catch!

Copy link
Contributor

@ErikOstlund ErikOstlund left a comment

Choose a reason for hiding this comment

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

All unit tests are passing.
Code looks good.
When viewing a project with multiple workflows, I can use the Change workflow selector to change a workflow: the url updates correctly and the correct workflow loads in the UI.
Everything looks good to me!

@github-actions github-actions bot added the approved This PR is approved for merging label Mar 31, 2022
@eatyourgreens eatyourgreens merged commit 2994b07 into master Mar 31, 2022
@eatyourgreens eatyourgreens deleted the dev-classifier-routing branch March 31, 2022 14:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
approved This PR is approved for merging dx Things that improve the developer experience enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants