From 5d4264bbec05f72b53cb0a764e9b70c3e13af31f Mon Sep 17 00:00:00 2001
From: Marco polo <salazarm@users.noreply.github.com>
Date: Fri, 28 Feb 2025 09:40:53 -0600
Subject: [PATCH] Add stub for create catalog view button + add create_view
 icon (#28091)

As titled
---
 .../packages/ui-components/src/components/Icon.tsx  |  2 ++
 .../ui-components/src/icon-svgs/create_view.svg     | 11 +++++++++++
 .../ui-core/src/asset-graph/AssetGraphExplorer.tsx  |  4 ++++
 .../ui-core/src/assets/AssetsCatalogTable.tsx       | 13 ++++---------
 .../src/assets/CreateCatalogViewButton.oss.tsx      |  1 +
 .../ui-core/src/selection/CustomErrorListener.ts    |  7 ++++++-
 .../useSelectionInputLintingAndHighlighting.tsx     |  4 ++++
 7 files changed, 32 insertions(+), 10 deletions(-)
 create mode 100644 js_modules/dagster-ui/packages/ui-components/src/icon-svgs/create_view.svg
 create mode 100644 js_modules/dagster-ui/packages/ui-core/src/assets/CreateCatalogViewButton.oss.tsx

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx
index aa5dc82cdad9d..adbeb5f1da3a9 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx
@@ -95,6 +95,7 @@ import cost_rupee from '../icon-svgs/cost_rupee.svg';
 import cost_yen from '../icon-svgs/cost_yen.svg';
 import cpu from '../icon-svgs/cpu.svg';
 import create from '../icon-svgs/create.svg';
+import create_view from '../icon-svgs/create_view.svg';
 import credit_card from '../icon-svgs/credit_card.svg';
 import credits from '../icon-svgs/credits.svg';
 import curly_braces from '../icon-svgs/curly_braces.svg';
@@ -506,6 +507,7 @@ export const Icons = {
   cost_yen,
   cpu,
   create,
+  create_view,
   credit_card,
   credits,
   curly_braces,
diff --git a/js_modules/dagster-ui/packages/ui-components/src/icon-svgs/create_view.svg b/js_modules/dagster-ui/packages/ui-components/src/icon-svgs/create_view.svg
new file mode 100644
index 0000000000000..e0fc38e3966dd
--- /dev/null
+++ b/js_modules/dagster-ui/packages/ui-components/src/icon-svgs/create_view.svg
@@ -0,0 +1,11 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Layer_1" clip-path="url(#clip0_4516_2080)">
+<path id="Vector" d="M6.87972 13.1618C6.01299 13.1618 5.1965 12.9985 4.43026 12.6656C3.66402 12.3327 2.99827 11.8868 2.43301 11.3216C1.86775 10.7563 1.42182 10.0905 1.08895 9.3243C0.756071 8.55806 0.592773 7.74157 0.592773 6.87484C0.592773 6.00811 0.756071 5.19162 1.08895 4.42538C1.42182 3.65914 1.86775 2.99339 2.43301 2.42813C2.99827 1.86287 3.66402 1.41694 4.43026 1.08406C5.1965 0.751188 6.01299 0.587891 6.87972 0.587891C7.74645 0.587891 8.56294 0.751188 9.32918 1.08406C10.0954 1.41694 10.7612 1.86287 11.3264 2.42813C11.8917 2.99339 12.3376 3.65914 12.6705 4.42538C13.0034 5.19162 13.1667 6.00811 13.1667 6.87484C13.1667 7.0821 13.1541 7.29564 13.1353 7.50291C13.1164 7.71017 13.085 7.92371 13.0411 8.13097H11.7535C11.8038 7.92371 11.8477 7.71017 11.8729 7.50291C11.898 7.29564 11.9105 7.0821 11.9105 6.87484C11.9105 6.66758 11.898 6.45403 11.8729 6.24677C11.8477 6.03951 11.81 5.82597 11.7535 5.61871H9.61809C9.6495 5.82597 9.67462 6.03951 9.68718 6.24677C9.70602 6.45403 9.7123 6.66758 9.7123 6.87484C9.7123 7.0821 9.70602 7.29564 9.68718 7.50291C9.66834 7.71017 9.6495 7.92371 9.61809 8.13097H8.36196C8.39336 7.92371 8.41849 7.71017 8.43105 7.50291C8.44361 7.29564 8.45617 7.0821 8.45617 6.87484C8.45617 6.66758 8.44989 6.45403 8.43105 6.24677C8.4122 6.03951 8.39336 5.82597 8.36196 5.61871H5.41005C5.37864 5.82597 5.35352 6.03951 5.34096 6.24677C5.32212 6.45403 5.31584 6.66758 5.31584 6.87484C5.31584 7.0821 5.32212 7.29564 5.34096 7.50291C5.3598 7.71017 5.37864 7.92371 5.41005 8.13097H7.51407V9.38711H5.69268C5.81829 9.83931 5.98159 10.2664 6.18257 10.6809C6.38355 11.0954 6.61593 11.4911 6.89228 11.868C7.09955 11.868 7.31309 11.8554 7.52035 11.8303C7.72761 11.8052 7.94115 11.78 8.14842 11.7612V13.0487C7.94115 13.0676 7.72761 13.0927 7.52035 13.1178C7.31309 13.1429 7.09955 13.1555 6.89228 13.1555L6.87972 13.1618ZM2.0122 8.13725H4.14763C4.11623 7.92999 4.09111 7.71645 4.07854 7.50919C4.06598 7.30192 4.05342 7.08838 4.05342 6.88112C4.05342 6.67386 4.0597 6.46031 4.07854 6.25305C4.09739 6.04579 4.11623 5.83225 4.14763 5.62499H2.0122C1.96196 5.83225 1.91799 6.04579 1.89287 6.25305C1.86775 6.46031 1.85519 6.67386 1.85519 6.88112C1.85519 7.08838 1.86775 7.30192 1.89287 7.50919C1.91799 7.71645 1.95568 7.92999 2.0122 8.13725ZM2.54606 4.36885H4.39886C4.49307 3.97945 4.6124 3.60261 4.75058 3.23205C4.88875 2.86149 5.05833 2.49721 5.24675 2.13922C4.66893 2.32764 4.15391 2.61027 3.68914 2.99339C3.23065 3.37651 2.84753 3.835 2.53978 4.36885H2.54606ZM5.24675 11.623C5.05833 11.265 4.89503 10.9007 4.75058 10.5302C4.60612 10.1596 4.49307 9.77651 4.39886 9.39339H2.54606C2.84753 9.92724 3.23065 10.3857 3.69542 10.7689C4.15391 11.152 4.67521 11.4346 5.25303 11.623H5.24675ZM5.68639 4.36885H8.07305C7.94743 3.91664 7.78414 3.48956 7.58316 3.07503C7.38217 2.66051 7.14979 2.26483 6.87344 1.88799C6.60337 2.26483 6.36471 2.66051 6.16373 3.07503C5.96274 3.48956 5.79945 3.92292 5.67383 4.36885H5.68639ZM9.36058 4.36885H11.2134C10.9119 3.835 10.5288 3.37651 10.064 2.99339C9.60553 2.61027 9.08424 2.32764 8.50641 2.13922C8.69483 2.49721 8.85813 2.86149 9.00259 3.23205C9.14704 3.60261 9.26009 3.98573 9.3543 4.36885H9.36058Z" fill="#030615"/>
+<path id="Vector_2" d="M10.8929 13.3996V11.8923H9.39185V10.8937H10.8929V9.39258H11.8916V10.8937H13.3989V11.8923H11.8916V13.3996H10.8929Z" fill="#030615"/>
+</g>
+<defs>
+<clipPath id="clip0_4516_2080">
+<rect width="12.8" height="12.8" fill="white" transform="translate(0.600098 0.599609)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx
index 6a04fbcc4938b..fc1493dafcc0f 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx
@@ -21,6 +21,7 @@ import {AssetGraphAssetSelectionInput} from 'shared/asset-graph/AssetGraphAssetS
 import {useAssetGraphExplorerFilters} from 'shared/asset-graph/useAssetGraphExplorerFilters.oss';
 import {AssetSelectionInput} from 'shared/asset-selection/input/AssetSelectionInput.oss';
 import {CatalogViewSelector} from 'shared/assets/CatalogViewSelector.oss';
+import {CreateCatalogViewButton} from 'shared/assets/CreateCatalogViewButton.oss';
 import styled from 'styled-components';
 
 import {AssetEdges} from './AssetEdges';
@@ -784,6 +785,9 @@ const AssetGraphExplorerWithData = ({
                       />
                     )}
                   </GraphQueryInputFlexWrap>
+                  {featureEnabled(FeatureFlag.flagSelectionSyntax) ? (
+                    <CreateCatalogViewButton />
+                  ) : null}
                   <AssetLiveDataRefreshButton />
                   <LaunchAssetExecutionButton
                     preferredJobName={explorerPath.pipelineName}
diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetsCatalogTable.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetsCatalogTable.tsx
index 7255984b8e053..5cced9e9572cc 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetsCatalogTable.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetsCatalogTable.tsx
@@ -6,6 +6,7 @@ import {useSetRecoilState} from 'recoil';
 import {FeatureFlag} from 'shared/app/FeatureFlags.oss';
 import {AssetGraphFilterBar} from 'shared/asset-graph/AssetGraphFilterBar.oss';
 import {CatalogViewSelector} from 'shared/assets/CatalogViewSelector.oss';
+import {CreateCatalogViewButton} from 'shared/assets/CreateCatalogViewButton.oss';
 import {useAssetCatalogFiltering} from 'shared/assets/useAssetCatalogFiltering.oss';
 
 import {AssetTable} from './AssetTable';
@@ -265,14 +266,7 @@ export const AssetsCatalogTable = ({
       isLoading={filteredAssetsLoading || loading}
       isFiltered={isFiltered}
       actionBarComponents={
-        <div
-          style={{
-            display: 'grid',
-            gridTemplateColumns: 'auto auto minmax(0, 1fr)',
-            gap: 12,
-            alignItems: 'flex-start',
-          }}
-        >
+        <Box flex={{gap: 12, alignItems: 'flex-start'}}>
           <ButtonGroup<AssetViewType>
             activeItems={new Set([view])}
             buttons={[
@@ -288,7 +282,8 @@ export const AssetsCatalogTable = ({
           />
           {featureEnabled(FeatureFlag.flagSelectionSyntax) ? <CatalogViewSelector /> : filterButton}
           {filterInput}
-        </div>
+          {featureEnabled(FeatureFlag.flagSelectionSyntax) ? <CreateCatalogViewButton /> : null}
+        </Box>
       }
       belowActionBarComponents={
         featureEnabled(FeatureFlag.flagSelectionSyntax) ? null : (
diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/CreateCatalogViewButton.oss.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/CreateCatalogViewButton.oss.tsx
new file mode 100644
index 0000000000000..5cc7e10ce3806
--- /dev/null
+++ b/js_modules/dagster-ui/packages/ui-core/src/assets/CreateCatalogViewButton.oss.tsx
@@ -0,0 +1 @@
+export const CreateCatalogViewButton = () => null;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/selection/CustomErrorListener.ts b/js_modules/dagster-ui/packages/ui-core/src/selection/CustomErrorListener.ts
index 1a3fdf0b125f0..97398bfe818ab 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/selection/CustomErrorListener.ts
+++ b/js_modules/dagster-ui/packages/ui-core/src/selection/CustomErrorListener.ts
@@ -22,10 +22,15 @@ export class CustomErrorListener implements ANTLRErrorListener<any> {
     msg: string,
     _e: RecognitionException | undefined,
   ): void {
+    let from = charPositionInLine;
+    if (offendingSymbol?.text === '<EOF>') {
+      // If the error is at the very end of the input, set the from to the start of the input
+      from = 0;
+    }
     this.errors.push({
       message: msg,
       offendingSymbol: offendingSymbol?.text,
-      from: charPositionInLine,
+      from,
       to: charPositionInLine + (offendingSymbol?.text?.length ?? Infinity),
     });
   }
diff --git a/js_modules/dagster-ui/packages/ui-core/src/selection/useSelectionInputLintingAndHighlighting.tsx b/js_modules/dagster-ui/packages/ui-core/src/selection/useSelectionInputLintingAndHighlighting.tsx
index fcee167ad6922..e7cb5082e3038 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/selection/useSelectionInputLintingAndHighlighting.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/selection/useSelectionInputLintingAndHighlighting.tsx
@@ -84,6 +84,10 @@ export const useSelectionInputLintingAndHighlighting = ({
       return null;
     }
     if (error.error.offendingSymbol) {
+      const symbol = error.error.offendingSymbol;
+      if (symbol === '<EOF>') {
+        return 'Selection is incomplete';
+      }
       return (
         <Box flex={{direction: 'row', alignItems: 'center'}}>
           Unexpected input