#688 New Autosuggest component for SelectorSelectorField

package.json

@@ -29,6 +29,7 @@
     "@maxim_mazurok/gapi.client.bigquery": "^2.0.20210701",
     "@reduxjs/toolkit": "^1.6.0",
     "@rjsf/core": "^3.0.0",
+    "@types/react-autosuggest": "^10.1.5",
     "@uipath/robot": "^1.2.5",
     "ace-builds": "^1.4.12",
     "axios": "^0.21.1",
@@ -83,6 +84,7 @@
     "psl": "^1.8.0",
     "react": "^16.13.1",
     "react-ace": "^9.4.1",
+    "react-autosuggest": "^10.1.0",
     "react-beautiful-dnd": "^13.1.0",
     "react-bootstrap": "^1.6.1",
     "react-dom": "^16.13.1",
@@ -211,6 +213,7 @@
     "ts-loader": "^9.2.4",
     "type-fest": "^1.2.2",
     "typescript": "^4.3.5",
+    "typescript-plugin-css-modules": "^3.4.0",
     "webpack": "^5.46.0",
     "webpack-build-notifier": "^2.3.0",
     "webpack-bundle-analyzer": "^4.4.2",

src/Globals.d.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright (C) 2021 PixieBrix, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+declare module "*.module.css";
+declare module "*.module.scss";

src/action.scss

@@ -41,22 +41,11 @@ body {
   }
 }
 
-.action-panel-close-button {
-  padding: 4px;
-  margin: 4px 12px 4px 12px;
+.action-panel-button {
   color: #6562aa;
 
-  svg:last-child {
-    margin-left: -3px;
-  }
-
   &:hover {
+    color: #4d4b8b;
     background-color: #d1c2d7;
   }
 }
-
-.ActionPanelToolbar {
-  .btn {
-    border-radius: 0;
-  }
-}

src/actionPanel/ActionPanelApp.tsx

@@ -21,9 +21,9 @@ import ErrorBoundary from "@/components/ErrorBoundary";
 import logo from "@img/logo.svg";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
-  faPuzzlePiece,
+  faCog,
   faSpinner,
-  faChevronRight,
+  faAngleDoubleRight
 } from "@fortawesome/free-solid-svg-icons";
 import { getStore } from "@/actionPanel/native";
 import {
@@ -138,18 +138,18 @@ const ActionPanelApp: React.FunctionComponent = () => {
       <PersistGate loading={<GridLoader />} persistor={persistor}>
         <ToastProvider>
           <div className="d-flex flex-column" style={{ height: "100vh" }}>
-            <div className="d-flex mb-2" style={{ flex: "none" }}>
+            <div className="d-flex flex-row mb-2 p-2 justify-content-between align-content-center">
               <Button
-                className="action-panel-close-button"
+                className="action-panel-button"
                 onClick={closeSidebar}
                 size="sm"
                 variant="link"
               >
-                <FontAwesomeIcon icon={faChevronRight} />
-                <FontAwesomeIcon icon={faChevronRight} />
+                <FontAwesomeIcon
+                  icon={faAngleDoubleRight}
+                  className="fa-lg"
+                />
               </Button>
-              {/* spacer */}
-              <div className="flex-grow-1" />
               <div className="align-self-center">
                 <img
                   src={logo}
@@ -158,16 +158,15 @@ const ActionPanelApp: React.FunctionComponent = () => {
                   className="px-4"
                 />
               </div>
-              <div className="ActionPanelToolbar">
-                <Button
-                  href="/options.html"
-                  target="_blank"
-                  size="sm"
-                  variant="info"
-                >
-                  <FontAwesomeIcon icon={faPuzzlePiece} /> Open Extension
-                </Button>
-              </div>
+              <Button
+                href="/options.html"
+                target="_blank"
+                size="sm"
+                variant="link"
+                className="action-panel-button d-inline-flex align-items-center"
+              >
+                <span>Options  <FontAwesomeIcon icon={faCog} /></span>
+              </Button>
             </div>
 
             <DeploymentBanner className="flex-none" />

src/background/devtools/protocol.ts

@@ -168,10 +168,10 @@ export const toggleSelector = liftBackground(
   "TOGGLE_SELECTOR",
   (target: Target) => async ({
     selector,
-    on = true,
+    on,
   }: {
-    selector: string;
-    on: boolean;
+    selector?: string;
+    on?: boolean;
   }) => nativeEditorProtocol.toggleOverlay(target, { selector, on })
 );
 

src/devTools/editor/fields/SelectorSelectorField.tsx

@@ -16,17 +16,14 @@
  */
 
 import React, {
-  ComponentType,
   useCallback,
   useContext,
   useMemo,
   useState,
 } from "react";
 import { useField } from "formik";
-import { components, OptionsType } from "react-select";
 import { compact, isEmpty, sortBy, uniqBy } from "lodash";
-import Creatable from "react-select/creatable";
-import { Badge, Button } from "react-bootstrap";
+import { Button } from "react-bootstrap";
 import { faMousePointer } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as nativeOperations from "@/background/devtools";
@@ -36,69 +33,26 @@ import { SelectMode } from "@/nativeEditor/selector";
 import { ElementInfo } from "@/nativeEditor/frameworks";
 import { Framework } from "@/messaging/constants";
 import { reportError } from "@/telemetry/logging";
-import { OptionProps } from "react-select/src/components/Option";
 import { useToasts } from "react-toast-notifications";
+import CreatableAutosuggest, { SuggestionTypeBase } from "@/devTools/editor/fields/creatableAutosuggest/CreatableAutosuggest";
+import SelectorListItem from "@/devTools/editor/fields/selectorListItem/SelectorListItem";
 
-type OptionValue = { value: string; elementInfo?: ElementInfo };
-type SelectorOptions = OptionsType<OptionValue>;
-
-const CustomOption: ComponentType<OptionProps<OptionValue, false>> = ({
-  children,
-  ...props
-}) => {
-  const { port } = useContext(DevToolsContext);
-
-  const toggle = useCallback(
-    async (on: boolean) => {
-      await nativeOperations.toggleSelector(port, {
-        selector: props.data.value,
-        on,
-      });
-    },
-    [port, props.data.value]
-  );
-
-  return (
-    <components.Option {...props}>
-      <div onMouseEnter={() => toggle(true)} onMouseLeave={() => toggle(false)}>
-        {props.data.elementInfo?.tagName && (
-          <Badge variant="dark" className="mr-1 pb-1">
-            {props.data.elementInfo.tagName}
-          </Badge>
-        )}
-        {props.data.elementInfo?.hasData && (
-          <Badge variant="info" className="mx-1 pb-1">
-            Data
-          </Badge>
-        )}
-        {children}
-      </div>
-    </components.Option>
-  );
-};
+interface ElementSuggestion extends SuggestionTypeBase {
+  value: string
+  elementInfo?: ElementInfo
+}
 
-function unrollValues(elementInfo: ElementInfo): OptionValue[] {
+function getSuggestionsForElement(elementInfo: ElementInfo | undefined): ElementSuggestion[] {
   if (!elementInfo) {
     return [];
   }
 
-  return [
-    ...(elementInfo.selectors ?? []).map((value) => ({ value, elementInfo })),
-    ...compact([elementInfo.parent]).flatMap(unrollValues),
-  ].filter((x) => x.value && x.value.trim() !== "");
-}
-
-function makeOptions(
-  elementInfo: ElementInfo | null,
-  extra: string[] = []
-): SelectorOptions {
   return uniqBy(
-    [...unrollValues(elementInfo), ...extra.map((value) => ({ value }))],
-    (x) => x.value
-  ).map((option) => ({
-    ...option,
-    label: option.value,
-  }));
+    compact([
+      ...elementInfo.selectors.map((value) => ({ value, elementInfo })),
+      ...getSuggestionsForElement(elementInfo.parent)
+    ]).filter((suggestion) => suggestion.value && suggestion.value.trim() !== "")
+  , (suggestion) => suggestion.value);
 }
 
 interface CommonProps {
@@ -131,14 +85,45 @@ export const SelectorSelectorControl: React.FunctionComponent<
 }) => {
   const { port } = useContext(DevToolsContext);
   const { addToast } = useToasts();
-  const [element, setElement] = useState<ElementInfo>(initialElement);
-  const [created, setCreated] = useState([]);
+  const [element, setElement] = useState(initialElement);
   const [isSelecting, setSelecting] = useState(false);
 
-  const options: SelectorOptions = useMemo(() => {
-    const raw = makeOptions(element, compact([...created, value]));
+  const suggestions: ElementSuggestion[] = useMemo(() => {
+    const raw = getSuggestionsForElement(element);
     return sort ? sortBy(raw, (x) => x.value.length) : raw;
-  }, [created, element, value, sort]);
+  }, [element, sort]);
+
+  const renderSuggestion = useCallback((suggestion: ElementSuggestion) => (
+    <SelectorListItem
+      value={suggestion.value}
+      hasData={suggestion.elementInfo.hasData}
+      tag={suggestion.elementInfo.tagName}
+    />
+  ), []);
+
+  const enableSelector = useCallback((selector: string) => {
+    try {
+      void nativeOperations.toggleSelector(port, { selector });
+    } catch (error: unknown) {
+      console.debug("Error toggling selector", { selector, error });
+    }
+  },[port]);
+
+  const disableSelector = useCallback(() => {
+    void nativeOperations.toggleSelector(port, { on: false });
+  },[port]);
+
+  const onHighlighted = useCallback((suggestion: ElementSuggestion | null) => {
+    if (suggestion) {
+      enableSelector(suggestion.value);
+    } else {
+      disableSelector();
+    }
+  }, [enableSelector, disableSelector]);
+
+  const onTextChanged = useCallback((value: string) => {
+    onSelect(value);
+  }, [onSelect]);
 
   const select = useCallback(async () => {
     setSelecting(true);
@@ -204,31 +189,16 @@ export const SelectorSelectorControl: React.FunctionComponent<
         </Button>
       </div>
       <div className="flex-grow-1">
-        <Creatable
+        <CreatableAutosuggest
           isClearable={isClearable}
-          createOptionPosition="first"
           isDisabled={isSelecting || disabled}
-          options={options}
-          components={{ Option: CustomOption }}
-          onCreateOption={(inputValue) => {
-            setCreated([...created, inputValue]);
-            onSelect(inputValue);
-          }}
-          value={options.find((x) => x.value === value)}
-          onMenuClose={() => {
-            void nativeOperations.toggleSelector(port, {
-              selector: null,
-              on: false,
-            });
-          }}
-          onChange={async (option) => {
-            console.debug("selected", { option });
-            onSelect(option ? option.value : null);
-            void nativeOperations.toggleSelector(port, {
-              selector: null,
-              on: false,
-            });
-          }}
+          suggestions={suggestions}
+          inputValue={value}
+          inputPlaceholder="Choose a selector..."
+          renderSuggestion={renderSuggestion}
+          onSuggestionHighlighted={onHighlighted}
+          onSuggestionsClosed={disableSelector}
+          onTextChanged={onTextChanged}
         />
       </div>
     </div>

src/devTools/editor/fields/creatableAutosuggest/CreatableAutosuggest.module.scss

@@ -0,0 +1,40 @@
+/*!
+ * Copyright (C) 2021 PixieBrix, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+$clearButtonPadding: 2px;
+
+// Changes the size of the browser-native 'x' button at the end of the input
+.input {
+  &::-webkit-search-cancel-button {
+    padding: $clearButtonPadding;
+  }
+  &::-ms-clear {
+    padding: $clearButtonPadding;
+  }
+}
+
+// Disables/hides the browser-native 'x' button at the end of the input
+.notClearable {
+  // Internet Explorer
+  &::-ms-clear { display: none; width : 0; height: 0; }
+  &::-ms-reveal { display: none; width : 0; height: 0; }
+  // Chrome
+  &::-webkit-search-decoration,
+  &::-webkit-search-cancel-button,
+  &::-webkit-search-results-button,
+  &::-webkit-search-results-decoration { display: none; }
+}