add filtering to api pagination #2130

rossedfort · 2024-05-30T21:25:32Z

Description & motivation 💭

Adds a filterable prop to <ApiPagination /> if present, will render an Input. The input is debounced and will refetch items after 1 second using the existing onFetch prop. Extends the PaginatedRequest type to take an optional query field, which can be used by callers

Screenshots (if applicable) 📸

Screen.Recording.2024-05-31.at.9.23.41.AM.mov

Design Considerations 🎨

Testing 🧪

I pnpm linked ui to cloud-ui and tested against Namespaces and Users

How was this tested 👻

Manual testing
E2E tests added
Unit tests added

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

Checklists

Draft Checklist

Merge Checklist

Issue(s) closed

Docs

Any docs updates needed?

vercel · 2024-05-30T21:25:32Z

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	May 30, 2024 9:25pm

laurakwhit · 2024-06-03T17:20:01Z

src/lib/holocene/api-pagination.svelte

@@ -52,6 +57,10 @@
  export let itemsKeyname = 'items';
  export let previousButtonLabel: string;
  export let nextButtonLabel: string;
+  export let filterable = false;
+  export let filterInputLabel: string = undefined;


What do you think about making this ⬇️ instead?

Suggested change

export let filterInputLabel: string = undefined;

export let filterInputPlaceholder: string = undefined;

I could be talked into just using placeholder to keep it inline with HTML.

<ApiPagination placeholder="whatever" /> doesn't make a ton of sense, cause it's not clear what the placeholder is for. I'll go with Laura's suggesiton.

laurakwhit · 2024-06-03T17:20:44Z

src/lib/holocene/api-pagination.svelte

@@ -29,11 +31,14 @@
    itemsKeyname?: string;
    previousButtonLabel: string;
    nextButtonLabel: string;
+    filterable?: boolean | undefined;
+    filterInputLabel?: string | undefined;


Since the input only shows up if filterable && filterInputLabel, can we make filterInputLabel required if filterable is true?

laurakwhit · 2024-06-03T17:23:18Z

src/lib/holocene/api-pagination.svelte

@@ -29,11 +31,14 @@
    itemsKeyname?: string;
    previousButtonLabel: string;
    nextButtonLabel: string;
+    filterable?: boolean | undefined;


We should replace the custom input on the Schedules page ⬇️ with this prop 🎉

We should, I can make a follow up task for that

laurakwhit · 2024-06-03T17:24:33Z

src/lib/holocene/api-pagination.svelte

+    {/if}
+    {#if filterable && filterInputLabel}
+      <Input
+        id="api-pagination-search-input"


Do we want a search icon here, similar to our other "search" inputs?

Suggested change

id="api-pagination-search-input"

icon="search"

id="api-pagination-search-input"

* Add config and command to run local temporal server, remove versioning on workflow worker tab, add link to task queue, add tabs for workers/versioning on task queue page. Add view all assignment rules row * send resetType in request body for batch reset (#2110) * send resetType in req body for batch reset for compatibility with older server/api versions * default reset type to first, clear up reason hint text * 2.27.4 (#2111) Co-authored-by: Temporal Data (cicd) <commander-data@temporal.io> * remove import from protos, use custom enum (#2112) * 2.27.5 (#2113) Co-authored-by: Temporal Data (cicd) <commander-data@temporal.io> * Remove copyable tooltip (#2114) * Fix issue where close button cannot be seen on dark drawers (#2115) * Fix issue where close button cannot be seen on dark drawers * Update drawer.stories.svelte * Update drawer.stories.svelte * DT-2159 - fix "Reapply Signals" checkbox on reset workflow confirmation form (#2117) * use binding instead of on:change for reset reapply checkbox * add regression integration test * Night mode audit (#2118) * Update and consolidate surface colors * Update text colors * Update border colors * Update shadow colors * Remove unnecessary colors * Fix box shadow color * Use ring instead of box shadow * Update WorkflowStatus colors * Fix simple TableHeaderRow * Input updates based on designs * Fix table headers and various text and bg colors * Update button styles to match designs * Remove disabled color variables, update placeholder text and update Pill component * Update checkbox and radio input * Update toggle switch * Update IconButton to use Button component * Remove unnecessary badge background * Update Toast component colors * Update snaps and fix errors * Remove unnecessary surface-input * Update page background color to match designs * Update timeline background and text color * Remove underline on button links * Remove ternary and use and instead for active class * Delete snapshot tests * Kebab case colors * Keep Button border as 2px on focus * Add caret-danger to plugin * 2.27.6 (#2122) Co-authored-by: Temporal Data (cicd) <commander-data@temporal.io> * Add local-temporal command (#2120) * Update SideNavigation component (#2124) * Update side nav focus styles * Update heart beat indicator color * Update version.go to v2.27.2 (#2126) * Link to namespace in Namespace sticky nav (#2123) * Add href prop to combobox for link button * Subtle border, better path, disable link if no namespace * add docs to side nav (#2131) * add filtering to api pagination (#2130) * DT-2179 - fix wf reset button & other fixes (#2133) * missed PR feedback - fix ApiPagination prop typing and name - add search icon to input in ApiPagination * fix workflow reset button disabled logic * move docs link * use cloud guard * Add timezoneName to schedule spec with default of UTC (#2127) * Add timezoneName to schedule spec with default of UTC * Use translate for timezones * Set input on edit * Add onDecode prop * 2.27.7 (#2134) Co-authored-by: Temporal Data (cicd) <commander-data@temporal.io> * Audit a11y issues (#2135) * DT-2134 Fix a11y issues with accordion.svelte * Remove on:keydown on CodeBlock I could not find a single use of `CodeBlock` that had an on:keydown event. [Related ticket](https://temporalio.atlassian.net/browse/DT-2135). * Update filter-or-copy-buttons.svelte These both appear to be `noop` functions? * clean up workflow actions (#2136) * clean up workflow actions * better i18n string name * fix batch action checks * fix tests * add integration tests * 2.27.8 (#2137) Co-authored-by: Temporal Data (cicd) <commander-data@temporal.io> * Update workflow status colors (#2132) * Update running color * Update scheduled color * Update completed and open color * Update new and initiated color * Use globalThis.accessToken() for codec server calls (#2138) * Fix api pagination alignment, add debounce as a prop (#2139) * fix alignment of api pagination slots * fix * fix slot check * add debounce as a prop * spelling * fix debounce * remove loading slot prop * 2.27.9 (#2140) Co-authored-by: Temporal Data (cicd) <commander-data@temporal.io> * Fix header colors * Update snaps? * Remove commented out mock, better check for rules * Remove dup .env --------- Co-authored-by: Ross Edfort <rossedfort@gmail.com> Co-authored-by: Temporal Data (cicd) <commander-data@temporal.io> Co-authored-by: Steve Kinney <hello@stevekinney.net> Co-authored-by: Laura Whitaker <laura.whitaker@temporal.io> Co-authored-by: Grace Iris Gardner <42048868+GraceGardner@users.noreply.github.com>

add filtering to api pagination

b4709b2

vercel bot deployed to Preview May 30, 2024 21:25 View deployment

rossedfort requested a review from Alex-Tideman May 31, 2024 15:04

Alex-Tideman approved these changes Jun 3, 2024

View reviewed changes

rossedfort merged commit 075cc79 into main Jun 3, 2024
10 checks passed

rossedfort deleted the api-pagination-filtering branch June 3, 2024 17:24

laurakwhit reviewed Jun 3, 2024

View reviewed changes

This was referenced Jun 3, 2024

DT-2179 - fix wf reset button & other fixes #2133

Merged

Fix api pagination alignment, add debounce as a prop #2139

Merged

Alex-Tideman pushed a commit that referenced this pull request Jun 6, 2024

add filtering to api pagination (#2130)

ab8d067

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add filtering to api pagination #2130

add filtering to api pagination #2130

rossedfort commented May 30, 2024 •

edited

Loading

vercel bot commented May 30, 2024 •

edited

Loading

laurakwhit Jun 3, 2024

stevekinney Jun 3, 2024

rossedfort Jun 3, 2024

laurakwhit Jun 3, 2024

laurakwhit Jun 3, 2024

rossedfort Jun 3, 2024

laurakwhit Jun 3, 2024

	export let filterInputLabel: string = undefined;
	export let filterInputPlaceholder: string = undefined;

	id="api-pagination-search-input"
	icon="search"
	id="api-pagination-search-input"

add filtering to api pagination #2130

add filtering to api pagination #2130

Conversation

rossedfort commented May 30, 2024 • edited Loading

Description & motivation 💭

Screenshots (if applicable) 📸

Design Considerations 🎨

Testing 🧪

How was this tested 👻

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

Checklists

Draft Checklist

Merge Checklist

Issue(s) closed

Docs

Any docs updates needed?

vercel bot commented May 30, 2024 • edited Loading

laurakwhit Jun 3, 2024

Choose a reason for hiding this comment

stevekinney Jun 3, 2024

Choose a reason for hiding this comment

rossedfort Jun 3, 2024

Choose a reason for hiding this comment

laurakwhit Jun 3, 2024

Choose a reason for hiding this comment

laurakwhit Jun 3, 2024

Choose a reason for hiding this comment

rossedfort Jun 3, 2024

Choose a reason for hiding this comment

laurakwhit Jun 3, 2024

Choose a reason for hiding this comment

rossedfort commented May 30, 2024 •

edited

Loading

vercel bot commented May 30, 2024 •

edited

Loading