From 055c4fc8e67aad726014dc18587af198f0c312d8 Mon Sep 17 00:00:00 2001 From: Adam Erb Date: Mon, 24 Feb 2025 18:26:38 -0330 Subject: [PATCH] Simplify command panel filtering on misk web-actions GitOrigin-RevId: 789d81e64da07e1712c975df88d5ba20b0a63490 --- misk-admin/web-actions/package-lock.json | 14 ----- misk-admin/web-actions/package.json | 1 - .../src/web-actions/ui/EndpointSelection.tsx | 56 ++++++++----------- 3 files changed, 23 insertions(+), 48 deletions(-) diff --git a/misk-admin/web-actions/package-lock.json b/misk-admin/web-actions/package-lock.json index 21891393784..d8a359c537a 100644 --- a/misk-admin/web-actions/package-lock.json +++ b/misk-admin/web-actions/package-lock.json @@ -12,7 +12,6 @@ "@chakra-ui/icons": "^2.1.1", "@chakra-ui/react": "^2.8.2", "ace-builds": "^1.36.2", - "fuse.js": "^7.0.0", "react-select": "^5.8.2" }, "devDependencies": { @@ -7786,14 +7785,6 @@ "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==", "dev": true }, - "node_modules/fuse.js": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-7.0.0.tgz", - "integrity": "sha512-14F4hBIxqKvD4Zz/XjDc3y94mNZN6pRv3U13Udo0lNLCWRBUsrMv2xwcF/y/Z5sV6+FQW+/ow68cHpm4sunt8Q==", - "engines": { - "node": ">=10" - } - }, "node_modules/gensync": { "version": "1.0.0-beta.2", "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz", @@ -19957,11 +19948,6 @@ "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==", "dev": true }, - "fuse.js": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-7.0.0.tgz", - "integrity": "sha512-14F4hBIxqKvD4Zz/XjDc3y94mNZN6pRv3U13Udo0lNLCWRBUsrMv2xwcF/y/Z5sV6+FQW+/ow68cHpm4sunt8Q==" - }, "gensync": { "version": "1.0.0-beta.2", "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz", diff --git a/misk-admin/web-actions/package.json b/misk-admin/web-actions/package.json index ff4afd1a718..3ab239a683a 100644 --- a/misk-admin/web-actions/package.json +++ b/misk-admin/web-actions/package.json @@ -42,7 +42,6 @@ "@chakra-ui/icons": "^2.1.1", "@chakra-ui/react": "^2.8.2", "ace-builds": "^1.36.2", - "fuse.js": "^7.0.0", "react-select": "^5.8.2" } } diff --git a/misk-admin/web-actions/src/web-actions/ui/EndpointSelection.tsx b/misk-admin/web-actions/src/web-actions/ui/EndpointSelection.tsx index ca5709d8a9a..cd904ba6058 100644 --- a/misk-admin/web-actions/src/web-actions/ui/EndpointSelection.tsx +++ b/misk-admin/web-actions/src/web-actions/ui/EndpointSelection.tsx @@ -1,12 +1,12 @@ import React from 'react'; import Select, { OnChangeValue, StylesConfig } from 'react-select'; -import Fuse from 'fuse.js'; import { ActionGroup, MiskActions } from '@web-actions/api/responseTypes'; import RealMetadataClient from '@web-actions/api/RealMetadataClient'; export interface EndpointOption { value: ActionGroup; label: string; + lowerCaseLabel: string; } export type EndpointSelectionCallbacks = ((value: ActionGroup) => void)[]; @@ -17,23 +17,21 @@ interface Props { } interface State { - endpointOptions: EndpointOption[]; - filterOptions: EndpointOption[]; + filteredOptions: EndpointOption[]; inputValue: string; menuIsOpen: boolean; } export default class EndpointSelection extends React.Component { private selectRef = React.createRef(); - private fuse: Fuse | null = null; private metadataClient = new RealMetadataClient(); + private options: EndpointOption[] = []; constructor(props: Props) { super(props); this.state = { - endpointOptions: [], - filterOptions: [], + filteredOptions: [], inputValue: '', menuIsOpen: false, }; @@ -41,45 +39,38 @@ export default class EndpointSelection extends React.Component { componentDidMount() { this.metadataClient.fetchMetadata().then((actions: MiskActions) => { - const options = Object.entries(actions) - .map(([key, value]) => ({ - value: value, - label: key, - })) - .sort((a, b) => a.value.name.localeCompare(b.value.name)); - this.fuse = new Fuse(options, { - keys: ['label'], - useExtendedSearch: true, - }); - this.setState({ - endpointOptions: options, - filterOptions: options, - }); + this.options = Object.values(actions) + .sort((a, b) => a.name.localeCompare(b.name)) + .map((it) => ({ + label: it.name, + lowerCaseLabel: it.name.toLowerCase(), + value: it, + })); + this.setState({ filteredOptions: this.options }); this.focusSelect(); }); } componentDidUpdate(_: any, prevState: State) { - if ( - prevState.inputValue !== this.state.inputValue || - prevState.endpointOptions !== this.state.endpointOptions - ) { + if (prevState.inputValue !== this.state.inputValue) { this.updateFilterOptions(); } } updateFilterOptions() { - const { inputValue, endpointOptions } = this.state; - if (!inputValue.trim() || !this.fuse) { - this.setState({ filterOptions: endpointOptions }); + const terms = this.state.inputValue + .split(/\s+/) + .filter((it) => it.length > 0) + .map((it) => it.toLowerCase()); + if (terms.length === 0) { + this.setState({ filteredOptions: this.options }); return; } - const results = this.fuse - .search(inputValue) - .sort((a, b) => b.score! - a.score!); this.setState({ - filterOptions: results.map((result) => result.item), + filteredOptions: this.options.filter((option) => + terms.every((term) => option.lowerCaseLabel.includes(term)), + ), }); } @@ -115,7 +106,6 @@ export default class EndpointSelection extends React.Component { }; render() { - const { filterOptions } = this.state; return ( ref={this.selectRef} @@ -128,7 +118,7 @@ export default class EndpointSelection extends React.Component { onMenuClose={() => this.setMenuOpen(false)} onInputChange={this.handleInputChange} onChange={this.handleChange} - options={filterOptions} + options={this.state.filteredOptions} styles={ { container: (base) => ({ ...base, width: '100%' }),