add a blank state message for the asset table (#6792)

dagster-io · Mar 7, 2022 · c4fe9a6 · c4fe9a6
1 parent cf3f6d2
commit c4fe9a6
Showing 1 changed file with 30 additions and 14 deletions.
diff --git a/js_modules/dagit/packages/core/src/assets/AssetTable.tsx b/js_modules/dagit/packages/core/src/assets/AssetTable.tsx
@@ -97,20 +97,24 @@ export const AssetTable = ({
           </tr>
         </thead>
         <tbody>
-          {pageDisplayPathKeys.map((pathStr, idx) => {
-            return (
-              <AssetEntryRow
-                key={idx}
-                prefixPath={prefixPath}
-                path={JSON.parse(pathStr)}
-                assets={assetGroups[pathStr] || []}
-                isSelected={checkedPaths.has(pathStr)}
-                onToggleChecked={onToggleFactory(pathStr)}
-                onWipe={(assets: Asset[]) => setToWipe(assets.map((asset) => asset.key))}
-                canWipe={canWipeAssets}
-              />
-            );
-          })}
+          {pageDisplayPathKeys.length ? (
+            pageDisplayPathKeys.map((pathStr, idx) => {
+              return (
+                <AssetEntryRow
+                  key={idx}
+                  prefixPath={prefixPath}
+                  path={JSON.parse(pathStr)}
+                  assets={assetGroups[pathStr] || []}
+                  isSelected={checkedPaths.has(pathStr)}
+                  onToggleChecked={onToggleFactory(pathStr)}
+                  onWipe={(assets: Asset[]) => setToWipe(assets.map((asset) => asset.key))}
+                  canWipe={canWipeAssets}
+                />
+              );
+            })
+          ) : (
+            <AssetEmptyRow />
+          )}
         </tbody>
       </Table>
       <AssetWipeDialog
@@ -124,6 +128,18 @@ export const AssetTable = ({
   );
 };
 
+const AssetEmptyRow = () => {
+  return (
+    <tr>
+      <td colSpan={4}>
+        <Box flex={{justifyContent: 'center', alignItems: 'center'}}>
+          <Box margin={{left: 8}}>No assets to display</Box>
+        </Box>
+      </td>
+    </tr>
+  );
+};
+
 const AssetEntryRow: React.FC<{
   prefixPath: string[];
   path: string[];