[Selection syntax autocomplete](Refactor) input component to be gener…

…alized. (dagster-io#26410)

## Summary & Motivation

Last remaining piece of the generalized autocomplete work is to
generalize the input component itself.
The generalized SelectionAutoCompleteInput component will be used by the
Run gantt chart selection input, the op selection input and the asset
selection input.

Note this PR is just a refactor. No new logic was added.

## How I Tested These Changes

Existing jest tests + manually tested the asset selection filtering
input and made sure it still works.

js_modules/dagster-ui/packages/ui-core/src/app/DefaultFeatureFlags.oss.tsx

@@ -8,6 +8,9 @@ export const DEFAULT_FEATURE_FLAG_VALUES: Partial<Record<FeatureFlag, boolean>>
   [FeatureFlag.flagAssetSelectionSyntax]: new URLSearchParams(global?.location?.search ?? '').has(
     'new-asset-selection-syntax',
   ),
+  [FeatureFlag.flagRunSelectionSyntax]: new URLSearchParams(global?.location?.search ?? '').has(
+    'new-run-selection-syntax',
+  ),
 
   // Flags for tests
   [FeatureFlag.__TestFlagDefaultTrue]: true,

js_modules/dagster-ui/packages/ui-core/src/asset-selection/input/AssetSelectionInput.oss.tsx

@@ -1,19 +1,15 @@
-import {Colors, Icon, Icons} from '@dagster-io/ui-components';
-import CodeMirror, {Editor, HintFunction} from 'codemirror';
-import {useLayoutEffect, useMemo, useRef} from 'react';
-import styled, {createGlobalStyle, css} from 'styled-components';
+import {Icons} from '@dagster-io/ui-components';
+import {useMemo} from 'react';
+import styled from 'styled-components';
 
-import {lintAssetSelection} from './AssetSelectionLinter';
 import {assertUnreachable} from '../../app/Util';
 import {AssetGraphQueryItem} from '../../asset-graph/useAssetGraphData';
-import {useUpdatingRef} from '../../hooks/useUpdatingRef';
-import {createSelectionHint} from '../../selection/SelectionAutoComplete';
-import {
-  SelectionAutoCompleteInputCSS,
-  applyStaticSyntaxHighlighting,
-} from '../../selection/SelectionAutoCompleteHighlighter';
+import {SelectionAutoCompleteInput, iconStyle} from '../../selection/SelectionAutoCompleteInput';
+import {createSelectionLinter} from '../../selection/createSelectionLinter';
 import {placeholderTextForItems} from '../../ui/GraphQueryInput';
 import {buildRepoPathForHuman} from '../../workspace/buildRepoAddress';
+import {AssetSelectionLexer} from '../generated/AssetSelectionLexer';
+import {AssetSelectionParser} from '../generated/AssetSelectionParser';
 
 import 'codemirror/addon/edit/closebrackets';
 import 'codemirror/lib/codemirror.css';
@@ -32,215 +28,86 @@ interface AssetSelectionInputProps {
 const FUNCTIONS = ['sinks', 'roots'];
 
 export const AssetSelectionInput = ({value, onChange, assets}: AssetSelectionInputProps) => {
-  const editorRef = useRef<HTMLDivElement>(null);
-  const cmInstance = useRef<CodeMirror.Editor | null>(null);
-
-  const currentValueRef = useRef(value);
-
-  const hintRef = useUpdatingRef(
-    useMemo(() => {
-      const assetNamesSet: Set<string> = new Set();
-      const tagNamesSet: Set<string> = new Set();
-      const ownersSet: Set<string> = new Set();
-      const groupsSet: Set<string> = new Set();
-      const kindsSet: Set<string> = new Set();
-      const codeLocationSet: Set<string> = new Set();
-
-      assets.forEach((asset) => {
-        assetNamesSet.add(asset.name);
-        asset.node.tags.forEach((tag) => {
-          if (tag.key && tag.value) {
-            tagNamesSet.add(`${tag.key}=${tag.value}`);
-          } else {
-            tagNamesSet.add(tag.key);
-          }
-        });
-        asset.node.owners.forEach((owner) => {
-          switch (owner.__typename) {
-            case 'TeamAssetOwner':
-              ownersSet.add(owner.team);
-              break;
-            case 'UserAssetOwner':
-              ownersSet.add(owner.email);
-              break;
-            default:
-              assertUnreachable(owner);
-          }
-        });
-        if (asset.node.groupName) {
-          groupsSet.add(asset.node.groupName);
+  const attributesMap = useMemo(() => {
+    const assetNamesSet: Set<string> = new Set();
+    const tagNamesSet: Set<string> = new Set();
+    const ownersSet: Set<string> = new Set();
+    const groupsSet: Set<string> = new Set();
+    const kindsSet: Set<string> = new Set();
+    const codeLocationSet: Set<string> = new Set();
+
+    assets.forEach((asset) => {
+      assetNamesSet.add(asset.name);
+      asset.node.tags.forEach((tag) => {
+        if (tag.key && tag.value) {
+          tagNamesSet.add(`${tag.key}=${tag.value}`);
+        } else {
+          tagNamesSet.add(tag.key);
         }
-        asset.node.kinds.forEach((kind) => {
-          kindsSet.add(kind);
-        });
-        const location = buildRepoPathForHuman(
-          asset.node.repository.name,
-          asset.node.repository.location.name,
-        );
-        codeLocationSet.add(location);
-      });
-
-      const assetNames = Array.from(assetNamesSet);
-      const tagNames = Array.from(tagNamesSet);
-      const owners = Array.from(ownersSet);
-      const groups = Array.from(groupsSet);
-      const kinds = Array.from(kindsSet);
-      const codeLocations = Array.from(codeLocationSet);
-
-      return createSelectionHint(
-        'key',
-        {
-          key: assetNames,
-          tag: tagNames,
-          owner: owners,
-          group: groups,
-          kind: kinds,
-          code_location: codeLocations,
-        },
-        FUNCTIONS,
-      );
-    }, [assets]),
-  );
-
-  useLayoutEffect(() => {
-    if (editorRef.current && !cmInstance.current) {
-      cmInstance.current = CodeMirror(editorRef.current, {
-        value,
-        mode: 'assetSelection',
-        lineNumbers: false,
-        lineWrapping: false,
-        scrollbarStyle: 'native',
-        autoCloseBrackets: true,
-        lint: {
-          getAnnotations: lintAssetSelection,
-          async: false,
-        },
-        placeholder: placeholderTextForItems('Type an asset subset…', assets),
-        extraKeys: {
-          'Ctrl-Space': 'autocomplete',
-          Tab: (cm: Editor) => {
-            cm.replaceSelection('  ', 'end');
-          },
-        },
       });
-
-      cmInstance.current.setSize('100%', 20);
-
-      // Enforce single line by preventing newlines
-      cmInstance.current.on('beforeChange', (_instance: Editor, change) => {
-        if (change.text.some((line) => line.includes('\n'))) {
-          change.cancel();
-        }
-      });
-
-      cmInstance.current.on('change', (instance: Editor, change) => {
-        const newValue = instance.getValue().replace(/\s+/g, ' ');
-        currentValueRef.current = newValue;
-        onChange(newValue);
-
-        if (change.origin === 'complete' && change.text[0]?.endsWith('()')) {
-          // Set cursor inside the right parenthesis
-          const cursor = instance.getCursor();
-          instance.setCursor({...cursor, ch: cursor.ch - 1});
+      asset.node.owners.forEach((owner) => {
+        switch (owner.__typename) {
+          case 'TeamAssetOwner':
+            ownersSet.add(owner.team);
+            break;
+          case 'UserAssetOwner':
+            ownersSet.add(owner.email);
+            break;
+          default:
+            assertUnreachable(owner);
         }
       });
-
-      cmInstance.current.on('inputRead', (instance: Editor) => {
-        showHint(instance, hintRef.current);
-      });
-
-      cmInstance.current.on('cursorActivity', (instance: Editor) => {
-        applyStaticSyntaxHighlighting(instance);
-        showHint(instance, hintRef.current);
-      });
-
-      requestAnimationFrame(() => {
-        if (!cmInstance.current) {
-          return;
-        }
-
-        applyStaticSyntaxHighlighting(cmInstance.current);
+      if (asset.node.groupName) {
+        groupsSet.add(asset.node.groupName);
+      }
+      asset.node.kinds.forEach((kind) => {
+        kindsSet.add(kind);
       });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // Update CodeMirror when value prop changes
-  useLayoutEffect(() => {
-    const noNewLineValue = value.replace('\n', ' ');
-    if (cmInstance.current && cmInstance.current.getValue() !== noNewLineValue) {
-      const instance = cmInstance.current;
-      const cursor = instance.getCursor();
-      instance.setValue(noNewLineValue);
-      instance.setCursor(cursor);
-      showHint(instance, hintRef.current);
-    }
-  }, [hintRef, value]);
+      const location = buildRepoPathForHuman(
+        asset.node.repository.name,
+        asset.node.repository.location.name,
+      );
+      codeLocationSet.add(location);
+    });
 
+    const assetNames = Array.from(assetNamesSet);
+    const tagNames = Array.from(tagNamesSet);
+    const owners = Array.from(ownersSet);
+    const groups = Array.from(groupsSet);
+    const kinds = Array.from(kindsSet);
+    const codeLocations = Array.from(codeLocationSet);
+
+    return {
+      key: assetNames,
+      tag: tagNames,
+      owner: owners,
+      group: groups,
+      kind: kinds,
+      code_location: codeLocations,
+    };
+  }, [assets]);
+
+  const linter = useMemo(
+    () => createSelectionLinter({Lexer: AssetSelectionLexer, Parser: AssetSelectionParser}),
+    [],
+  );
   return (
-    <>
-      <GlobalHintStyles />
-      <InputDiv
-        style={{
-          display: 'grid',
-          gridTemplateColumns: 'auto minmax(0, 1fr) auto',
-          alignItems: 'center',
-        }}
-      >
-        <Icon name="op_selector" />
-        <div ref={editorRef} />
-        <Icon name="info" />
-      </InputDiv>
-    </>
+    <WrapperDiv>
+      <SelectionAutoCompleteInput
+        nameBase="key"
+        attributesMap={attributesMap}
+        placeholder={placeholderTextForItems('Type an asset subset…', assets)}
+        functions={FUNCTIONS}
+        linter={linter}
+        value={value}
+        onChange={onChange}
+      />
+    </WrapperDiv>
   );
 };
-const iconStyle = (img: string) => css`
-  &:before {
-    content: ' ';
-    width: 14px;
-    mask-size: contain;
-    mask-repeat: no-repeat;
-    mask-position: center;
-    mask-image: url(${img});
-    background: ${Colors.accentPrimary()};
-    display: inline-block;
-  }
-`;
-
-const InputDiv = styled.div`
-  ${SelectionAutoCompleteInputCSS}
 
+const WrapperDiv = styled.div`
   .attribute-owner {
     ${iconStyle(Icons.owner.src)}
   }
 `;
-
-const GlobalHintStyles = createGlobalStyle`
-  .CodeMirror-hints {
-    background: ${Colors.popoverBackground()};
-    border: none;
-    border-radius: 4px;
-    padding: 8px 4px;
-    .CodeMirror-hint {
-      border-radius: 4px;
-      font-size: 14px;
-      padding: 6px 8px 6px 12px;
-      color: ${Colors.textDefault()};
-      &.CodeMirror-hint-active {
-        background-color: ${Colors.backgroundBlue()};
-        color: ${Colors.textDefault()};
-      }
-    }
-  }
-`;
-
-function showHint(instance: Editor, hint: HintFunction) {
-  requestAnimationFrame(() => {
-    instance.showHint({
-      hint,
-      completeSingle: false,
-      moveOnOverlap: true,
-      updateOnCursorActivity: true,
-    });
-  });
-}