[dagit] Use / instead of > for displaying asset paths (#7818)

dagster-io · May 10, 2022 · 9ca7fdd · 9ca7fdd
1 parent e6c5bb0
commit 9ca7fdd
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 14 deletions.
diff --git a/js_modules/dagit/packages/core/src/app/GraphQueryImpl.ts b/js_modules/dagit/packages/core/src/app/GraphQueryImpl.ts
@@ -100,7 +100,7 @@ export function filterByQuery<T extends GraphQueryItem>(items: T[], query: strin
   const focus = new Set<T>();
 
   for (const clause of clauses) {
-    const parts = /(\*?\+*)([.\w\d>\[\]\"_-]+)(\+*\*?)/.exec(clause.trim());
+    const parts = /(\*?\+*)([.\w\d>\[\]\"_\/-]+)(\+*\*?)/.exec(clause.trim());
     if (!parts) {
       continue;
     }

diff --git a/js_modules/dagit/packages/core/src/asset-graph/AssetGraphExplorer.tsx b/js_modules/dagit/packages/core/src/asset-graph/AssetGraphExplorer.tsx
@@ -587,7 +587,7 @@ const AssetGraphExplorerWithData: React.FC<
                       ...explorerPath,
                       opsQuery: [
                         explorerPath.opsQuery,
-                        `${displayNameForAssetKey({path: JSON.parse(item)})}>`,
+                        `${displayNameForAssetKey({path: JSON.parse(item)})}/`,
                       ]
                         .filter(Boolean)
                         .join(','),

diff --git a/js_modules/dagit/packages/core/src/asset-graph/Utils.tsx b/js_modules/dagit/packages/core/src/asset-graph/Utils.tsx
@@ -304,11 +304,11 @@ function findComputeStatusForId(
 }
 
 export function tokenForAssetKey(key: {path: string[]}) {
-  return key.path.join('>');
+  return key.path.join('/');
 }
 
 export function displayNameForAssetKey(key: {path: string[]}) {
-  return key.path.join(' > ');
+  return key.path.join(' / ');
 }
 
 export const IN_PROGRESS_RUNS_FRAGMENT = gql`

diff --git a/js_modules/dagit/packages/core/src/assets/AssetLink.tsx b/js_modules/dagit/packages/core/src/assets/AssetLink.tsx
@@ -24,9 +24,7 @@ export const AssetLink: React.FC<{
             .reduce(
               (accum, curr, ii) => [
                 ...accum,
-                ii > 0 ? (
-                  <React.Fragment key={`${ii}-space`}>&nbsp;{`>`}&nbsp;</React.Fragment>
-                ) : null,
+                ii > 0 ? <React.Fragment key={`${ii}-space`}>&nbsp;/&nbsp;</React.Fragment> : null,
                 curr,
               ],
               [] as React.ReactNode[],

diff --git a/js_modules/dagit/packages/core/src/assets/AssetTable.tsx b/js_modules/dagit/packages/core/src/assets/AssetTable.tsx
@@ -65,7 +65,7 @@ export const AssetTable = ({
           selected={Array.from(checkedAssets)}
           clearSelection={() => onToggleAll(false)}
         />
-        <ReloadAllButton />
+        <ReloadAllButton label="Reload definitions" />
       </Box>
       <Table>
         <thead>
@@ -224,7 +224,7 @@ const AssetEntryRow: React.FC<{
         ) : representsAtLeastOneSDA ? (
           <Link
             to={instanceAssetsExplorerPathToURL({
-              opsQuery: `${tokenForAssetKey({path})}>`,
+              opsQuery: `${tokenForAssetKey({path})}/`,
               opNames: [],
             })}
           >

diff --git a/js_modules/dagit/packages/core/src/pipelines/PipelinePathUtils.tsx b/js_modules/dagit/packages/core/src/pipelines/PipelinePathUtils.tsx
@@ -16,10 +16,12 @@ export function explorerPathToString(path: ExplorerPath) {
   const root = [
     path.pipelineName,
     path.snapshotId ? `@${path.snapshotId}` : ``,
-    path.opsQuery ? `~${path.explodeComposites ? '!' : ''}${path.opsQuery}` : ``,
+    path.opsQuery
+      ? `~${path.explodeComposites ? '!' : ''}${encodeURIComponent(path.opsQuery)}`
+      : ``,
   ].join('');
 
-  return `${root}/${path.opNames.join('/')}`;
+  return `${root}/${path.opNames.map(encodeURIComponent).join('/')}`;
 }
 
 export function explorerPathFromString(path: string): ExplorerPath {
@@ -39,9 +41,9 @@ export function explorerPathFromString(path: string): ExplorerPath {
   return {
     pipelineName,
     snapshotId,
-    opsQuery,
+    opsQuery: decodeURIComponent(opsQuery),
     explodeComposites: explodeComposites === '!',
-    opNames,
+    opNames: opNames.map(decodeURIComponent),
   };
 }
 

diff --git a/js_modules/dagit/packages/core/src/ui/GraphQueryInput.tsx b/js_modules/dagit/packages/core/src/ui/GraphQueryInput.tsx
@@ -163,7 +163,7 @@ export const GraphQueryInput = React.memo(
       setPendingValue(props.value);
     }, [props.value]);
 
-    const lastClause = /(\*?\+*)([\w\d\[\]>_-]+)(\+*\*?)$/.exec(pendingValue);
+    const lastClause = /(\*?\+*)([\w\d\[\]>_\/-]+)(\+*\*?)$/.exec(pendingValue);
 
     const [, prefix, lastElementName, suffix] = lastClause || [];
     const suggestions = React.useMemo(
@@ -187,6 +187,9 @@ export const GraphQueryInput = React.memo(
       // is now at it's location if it's gone, bounded to the array.
       let nextIdx = pos !== -1 ? pos : active.idx;
       nextIdx = Math.max(0, Math.min(suggestions.length - 1, nextIdx));
+      if (!suggestions[nextIdx]) {
+        return;
+      }
       const nextText = suggestions[nextIdx].name;
 
       if (nextIdx !== active.idx || nextText !== active.text) {