Hook up op selection syntax to frontend (#26488)

## Summary & Motivation
We want to hook up the new op selection syntax so that it is being used
on the frontend.

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

@@ -7,6 +7,7 @@ export enum FeatureFlag {
   flagAssetSelectionSyntax = 'flagAssetSelectionSyntax',
   flagRunSelectionSyntax = 'flagRunSelectionSyntax',
   flagAssetSelectionWorker = 'flagAssetSelectionWorker',
+  flagOpSelectionSyntax = 'flagOpSelectionSyntax',
 
   // Flags for tests
   __TestFlagDefaultNone = '__TestFlagDefaultNone',

js_modules/dagster-ui/packages/ui-core/src/launchpad/OpSelector.tsx

@@ -7,6 +7,7 @@ import {OpSelectorQuery, OpSelectorQueryVariables} from './types/OpSelector.type
 import {filterByQuery} from '../app/GraphQueryImpl';
 import {PYTHON_ERROR_FRAGMENT} from '../app/PythonErrorFragment';
 import {ShortcutHandler} from '../app/ShortcutHandler';
+import {filterOpSelectionByQuery} from '../op-selection/AntlrOpSelection';
 import {explodeCompositesInHandleGraph} from '../pipelines/CompositeSupport';
 import {GRAPH_EXPLORER_SOLID_HANDLE_FRAGMENT} from '../pipelines/GraphExplorer';
 import {GraphQueryInput} from '../ui/GraphQueryInput';
@@ -85,7 +86,7 @@ export const OpSelector = (props: IOpSelectorProps) => {
   const opsFetchError =
     (data?.pipelineOrError.__typename !== 'Pipeline' && data?.pipelineOrError.message) || null;
 
-  const queryResultOps = filterByQuery(ops, query).all;
+  const queryResultOps = filterOpSelectionByQuery(ops, query).all;
   const invalidOpSelection = !loading && queryResultOps.length === 0;
 
   const errorMessage = invalidOpSelection

js_modules/dagster-ui/packages/ui-core/src/op-selection/AntlrOpSelection.ts

@@ -1,10 +1,12 @@
 import {CharStreams, CommonTokenStream} from 'antlr4ts';
+import {FeatureFlag} from 'shared/app/FeatureFlags.oss';
 
 import {AntlrOpSelectionVisitor} from './AntlrOpSelectionVisitor';
-import {GraphQueryItem} from '../app/GraphQueryImpl';
+import {GraphQueryItem, filterByQuery} from '../app/GraphQueryImpl';
 import {AntlrInputErrorListener} from '../asset-selection/AntlrAssetSelection';
 import {OpSelectionLexer} from './generated/OpSelectionLexer';
 import {OpSelectionParser} from './generated/OpSelectionParser';
+import {featureEnabled} from '../app/Flags';
 
 type OpSelectionQueryResult = {
   all: GraphQueryItem[];
@@ -40,3 +42,18 @@ export const parseOpSelectionQuery = (
     return e as Error;
   }
 };
+
+export const filterOpSelectionByQuery = (
+  all_ops: GraphQueryItem[],
+  query: string,
+): OpSelectionQueryResult => {
+  if (featureEnabled(FeatureFlag.flagOpSelectionSyntax)) {
+    const result = parseOpSelectionQuery(all_ops, query);
+    if (result instanceof Error) {
+      // fall back to old behavior
+      return filterByQuery(all_ops, query);
+    }
+    return result;
+  }
+  return filterByQuery(all_ops, query);
+};