Skip to content

Conversation

@laurakwhit
Copy link
Collaborator

@laurakwhit laurakwhit commented Jul 29, 2025

Description & motivation 💭

  • Prevents queries over 15k from being
    • sent as a request in the URL
    • pasted into the workflow search input
  • Moves the maxLength outside of the Input component and inline with the hintText below
  • Replaces Spinner icon with solid version

Screenshots (if applicable) 📸

Before After
Screenshot 2025-07-29 at 3 38 07 PM Screenshot 2025-07-29 at 3 38 34 PM
Screenshot 2025-07-29 at 5 17 30 PM Screenshot 2025-07-29 at 5 18 06 PM

Design Considerations 🎨

Testing 🧪

How was this tested 👻

  • Manual testing
  • E2E tests added
  • Unit tests added

Steps for others to test: 🚶🏽‍♂️🚶🏽‍♀️

  • On a clearable Input that has maxLength set
    • Verify clicking the x clear button clears the value
    • Verify the maxLength is visible below the input on focus (and if hideCount is false)

  • On the /workflows page
    • Verify the Filter button is disabled if the query in the URL is over 15k characters
    • Verify a value can not be pasted in the workflow search input that is over 15k characters

Checklists

Draft Checklist

Merge Checklist

Issue(s) closed

DT-3119

Docs

Any docs updates needed?

@vercel
Copy link

vercel bot commented Jul 29, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
holocene ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 5, 2025 9:41pm


const queryString = query.toString();
if (queryString.length >= MAX_QUERY_LENGTH) {
query = new URLSearchParams(queryString.substring(0, MAX_QUERY_LENGTH - 1));
Copy link
Collaborator Author

@laurakwhit laurakwhit Jul 29, 2025

Choose a reason for hiding this comment

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

Not sure if this is really what we want to be doing here. Seems like the API should maybe just return an error instead. Maybe we can add something via middleware? Open to suggestions!

Copy link
Collaborator

Choose a reason for hiding this comment

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

Gah ya this is tricky. I don't think we wanna do this because it will almost certainly still result in an error with hacking off the end of the query. I think the spirit of ticket is to prevent the request from ever being sent.

It's really only going to happen on our workflow list query, so I'd suggest we do the check there (onMount with the query param and when triggering via manual query a la copy/paste most likely) and throw error text on the input and prevent triggering the query

Copy link
Collaborator Author

@laurakwhit laurakwhit Jul 30, 2025

Choose a reason for hiding this comment

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

I think it would also happen for the workflow count query, no? Maybe safest to keep something that checks all the requests 🤔

What do you think about a custom response here. That way the error would show up in the UI like this on the /workflows page and the request wouldn't be sent ⬇️
Screenshot 2025-07-30 at 3 35 44 PM

@laurakwhit laurakwhit marked this pull request as ready for review August 4, 2025 16:31
@Alex-Tideman
Copy link
Collaborator

Screenshot 2025-08-05 at 2 05 57 PM

Looks like the max appears on focus

@Alex-Tideman
Copy link
Collaborator

Screenshot 2025-08-05 at 3 20 45 PM Screenshot 2025-08-05 at 3 20 58 PM Screenshot 2025-08-05 at 3 23 28 PM Screenshot 2025-08-05 at 3 24 18 PM

So it does at height to the input, wondering if we can make the count smaller text

{#if maxLength && !disabled && !hideCount}
<span
class="invisible text-right text-sm font-medium tracking-widest group-focus-within:visible"
class="invisible text-right text-xs tracking-widest group-focus-within:visible"
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

So it does at height to the input, wondering if we can make the count smaller text

@Alex-Tideman updated size for both Input and Textarea to be text-xs ⬇️

Screenshot 2025-08-05 at 3 37 11 PM Screenshot 2025-08-05 at 3 36 44 PM

const queryIsTooLong = query.toString().length > MAX_QUERY_LENGTH;
const queryIsTooLong = [...query.values()].some(
(value) => value.length > MAX_QUERY_LENGTH,
);
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Decided to use values() instead of toString() so the character count should be a little more accurate here. But will still be a little off for the /worklfow-count request because we add a "GROUP BY ExecutionStatus" in addition to whatever is in the query input.

Copy link
Collaborator

Choose a reason for hiding this comment

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

👍

@laurakwhit laurakwhit merged commit cef7bed into main Aug 6, 2025
16 checks passed
@laurakwhit laurakwhit deleted the DT-3119-limit-query-length branch August 6, 2025 15:49
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.

3 participants