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

feat: Enable viewing all workflow form sections at once #2310

Merged
merged 18 commits into from
Feb 4, 2025

Conversation

SuaYoo
Copy link
Member

@SuaYoo SuaYoo commented Jan 15, 2025

Resolves #2169

Changes

  • Displays workflow form as collapsible sections
  • Combines run now toggle into submit
  • Fixes exclusion field errors not preventing form submission
  • Refactors <btrix-observable> into new Observable controller

Manual testing

  1. Log in as crawler
  2. Go to New Workflow. Verify scope section is the only section expanded
  3. Interact with side navigation and form sections open/close button. Verify sections update as expected
  4. Enter invalid fields (like regular expression of **.) Verify form submission is prevent and form is scrolled to the errored field
  5. Click "Save". Verify workflow is saved without running
  6. Go to New Workflow again
  7. Fill required fields and click "Run Crawl". Verify workflow is saved and crawl immediately runs
  8. Go to existing workflow. Verify all sections are open and save buttons are always visible
  9. Repeat steps 5 and 7 to test saving existing workflow

Screenshots

Page Image/video
New Workflow Screenshot 2025-02-03 at 3 39 00 PM
New Workflow Screenshot 2025-02-03 at 3 39 06 PM
Screenshot 2025-02-03 at 3 39 09 PM
Edit Workflow Screenshot 2025-02-03 at 3 39 44 PM
Workflow (field errors) Screenshot 2025-02-03 at 3 29 39 PM
Screenshot 2025-02-03 at 10 30 56 AM

@SuaYoo SuaYoo force-pushed the frontend-workflow-form-collapsible branch from 8775a40 to 98cf1b4 Compare January 15, 2025 18:57
@SuaYoo SuaYoo force-pushed the frontend-workflow-form-collapsible branch from 98cf1b4 to f542e60 Compare January 23, 2025 04:34
@SuaYoo

This comment was marked as resolved.

@SuaYoo SuaYoo force-pushed the frontend-workflow-form-collapsible branch from 6606398 to be9fac8 Compare January 28, 2025 19:40
@SuaYoo SuaYoo force-pushed the frontend-workflow-form-collapsible branch from 9256579 to b69804e Compare February 3, 2025 18:21
@SuaYoo SuaYoo changed the title wip: Enable viewing all workflow form sections at once feat: Enable viewing all workflow form sections at once Feb 3, 2025
@SuaYoo SuaYoo marked this pull request as ready for review February 3, 2025 23:45
Copy link
Member

@emma-sg emma-sg left a comment

Choose a reason for hiding this comment

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

Nice, left a few little suggestions! The biggest issue I found here was that the intersection observer currently only made changes when an element went from not visible to visible, which meant that the "Limits" section was never focused at moderate viewport sizes because it starts out already partially visible. The suggestion I made adds a Set of visible panels that gets updated any time panels come in or out of the viewport, and then sets the active panel to the first visible panel instead.

frontend/src/features/crawl-workflows/workflow-editor.ts Outdated Show resolved Hide resolved
frontend/src/features/crawl-workflows/workflow-editor.ts Outdated Show resolved Hide resolved
frontend/src/features/crawl-workflows/workflow-editor.ts Outdated Show resolved Hide resolved
frontend/src/features/crawl-workflows/workflow-editor.ts Outdated Show resolved Hide resolved
Copy link
Member

@Shrinks99 Shrinks99 left a comment

Choose a reason for hiding this comment

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

The setup guide link isn't visible when editing, it also seems to be broken (doesn't open the sidebar).

Other than that, looks great! I like the drop shadow for the selection state.

@SuaYoo
Copy link
Member Author

SuaYoo commented Feb 4, 2025

The setup guide link isn't visible when editing, it also seems to be broken (doesn't open the sidebar).

I noticed it's not opening as well, reported in #2335

We never had it enabled in edit, but I'm unsure why, and it makes sense to me to show it in edit as well.

Copy link
Member

@Shrinks99 Shrinks99 left a comment

Choose a reason for hiding this comment

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

Oop, missed that! Looks good to me then! :)

Copy link
Member

@tw4l tw4l left a comment

Choose a reason for hiding this comment

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

Looks great, nice work!

@SuaYoo SuaYoo merged commit 18e7226 into main Feb 4, 2025
27 checks passed
@SuaYoo SuaYoo deleted the frontend-workflow-form-collapsible branch February 4, 2025 20:56
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.

[Feature]: Show entire workflow form as expandable sections
4 participants