From dd385afd2af6115e677c9125c8883ed4720c089b Mon Sep 17 00:00:00 2001
From: bengotow <bgotow@elementl.com>
Date: Tue, 16 Apr 2024 14:08:04 -0500
Subject: [PATCH] New UI support

---
 .../asset-checks/AssetCheckStatusTag.tsx      | 33 ++++++++-
 .../src/assets/useAssetCatalogFiltering.tsx   |  1 -
 .../ui-core/src/runs/RepoSectionHeader.tsx    | 73 ++++---------------
 .../ui-core/src/ui/useRepoExpansionState.tsx  |  4 +-
 .../src/workspace/TableSectionHeader.tsx      | 61 ++++++++++++++++
 5 files changed, 109 insertions(+), 63 deletions(-)
 create mode 100644 js_modules/dagster-ui/packages/ui-core/src/workspace/TableSectionHeader.tsx

diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/AssetCheckStatusTag.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/AssetCheckStatusTag.tsx
index 8b534598f94e0..81e94d60e69ee 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/AssetCheckStatusTag.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/AssetCheckStatusTag.tsx
@@ -8,7 +8,8 @@ import {
   AssetCheckSeverity,
 } from '../../graphql/types';
 import {linkToRunEvent} from '../../runs/RunUtils';
-import {TagActionsPopover} from '../../ui/TagActions';
+import {TagAction, TagActionsPopover} from '../../ui/TagActions';
+import {AssetCheckLiveFragment} from '../../asset-data/types/AssetLiveDataProvider.types';
 
 export const AssetCheckStatusTag = ({
   execution,
@@ -94,3 +95,33 @@ export const AssetCheckStatusTag = ({
     </TagActionsPopover>
   );
 };
+
+export const AssetCheckErrorsTag = ({
+  checks,
+  severity,
+}: {
+  checks: AssetCheckLiveFragment[];
+  severity: AssetCheckSeverity;
+}) => {
+  const actions: TagAction[] = [];
+  const execution = checks[0]?.executionForLatestMaterialization;
+  if (execution) {
+    actions.push({
+      label: 'View in run logs',
+      to: linkToRunEvent(
+        {id: execution.runId},
+        {stepKey: execution.stepKey, timestamp: execution.timestamp},
+      ),
+    });
+  }
+  return (
+    <TagActionsPopover data={{key: '', value: ''}} actions={actions}>
+      <Tag
+        icon={severity === AssetCheckSeverity.ERROR ? 'cancel' : 'warning_outline'}
+        intent={severity === AssetCheckSeverity.ERROR ? 'danger' : 'warning'}
+      >
+        {checks.length === 1 ? checks[0]!.name : `${checks.length} failed`}
+      </Tag>
+    </TagActionsPopover>
+  );
+};
diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/useAssetCatalogFiltering.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/useAssetCatalogFiltering.tsx
index e253e5c091917..dad6db70c37fc 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/assets/useAssetCatalogFiltering.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/assets/useAssetCatalogFiltering.tsx
@@ -117,7 +117,6 @@ export function useAssetCatalogFiltering(
   return {
     searchPath,
     activeFiltersJsx: components.activeFiltersJsx,
-    filterValues: filters,
     filterButton: components.button,
     filterInput,
     isFiltered,
diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/RepoSectionHeader.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/RepoSectionHeader.tsx
index 7155d00f12db7..c9bd8bbac3150 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/runs/RepoSectionHeader.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/runs/RepoSectionHeader.tsx
@@ -1,79 +1,34 @@
-import {Box, Colors, Icon, IconWrapper} from '@dagster-io/ui-components';
+import {Box, Colors, Icon} from '@dagster-io/ui-components';
 import * as React from 'react';
 import styled from 'styled-components';
 
+import {TableSectionHeader, TableSectionHeaderProps} from '../workspace/TableSectionHeader';
 import {DUNDER_REPO_NAME} from '../workspace/buildRepoAddress';
 
-export const SECTION_HEADER_HEIGHT = 32;
-
-interface Props {
-  expanded: boolean;
-  onClick: (e: React.MouseEvent) => void;
+interface Props extends TableSectionHeaderProps {
   repoName: string;
   repoLocation: string;
   showLocation: boolean;
-  rightElement?: React.ReactNode;
 }
 
 export const RepoSectionHeader = (props: Props) => {
-  const {expanded, onClick, repoName, repoLocation, showLocation, rightElement} = props;
+  const {repoName, repoLocation, showLocation, ...rest} = props;
   const isDunderRepoName = repoName === DUNDER_REPO_NAME;
   return (
-    <SectionHeaderButton $open={expanded} onClick={onClick}>
-      <Box
-        flex={{alignItems: 'center', justifyContent: 'space-between'}}
-        padding={{horizontal: 24}}
-      >
-        <Box flex={{alignItems: 'center', gap: 8}}>
-          <Icon name="folder" color={Colors.accentGray()} />
-          <div>
-            <RepoName>{isDunderRepoName ? repoLocation : repoName}</RepoName>
-            {showLocation && !isDunderRepoName ? (
-              <RepoLocation>{`@${repoLocation}`}</RepoLocation>
-            ) : null}
-          </div>
-        </Box>
-        <Box flex={{alignItems: 'center', gap: 8}}>
-          {rightElement}
-          <Box margin={{top: 2}}>
-            <Icon name="arrow_drop_down" />
-          </Box>
-        </Box>
+    <TableSectionHeader {...rest}>
+      <Box flex={{alignItems: 'center', gap: 8}}>
+        <Icon name="folder" color={Colors.accentGray()} />
+        <div>
+          <RepoName>{isDunderRepoName ? repoLocation : repoName}</RepoName>
+          {showLocation && !isDunderRepoName ? (
+            <RepoLocation>{`@${repoLocation}`}</RepoLocation>
+          ) : null}
+        </div>
       </Box>
-    </SectionHeaderButton>
+    </TableSectionHeader>
   );
 };
 
-const SectionHeaderButton = styled.button<{$open: boolean}>`
-  background-color: ${Colors.backgroundLight()};
-  border: 0;
-  box-shadow:
-    inset 0px -1px 0 ${Colors.keylineDefault()},
-    inset 0px 1px 0 ${Colors.keylineDefault()};
-  color: ${Colors.textLight()};
-  cursor: pointer;
-  display: block;
-  padding: 0;
-  width: 100%;
-  margin: 0;
-  height: ${SECTION_HEADER_HEIGHT}px;
-  text-align: left;
-
-  :focus,
-  :active {
-    outline: none;
-  }
-
-  :hover {
-    background-color: ${Colors.backgroundLightHover()};
-  }
-
-  ${IconWrapper}[aria-label="arrow_drop_down"] {
-    transition: transform 100ms linear;
-    ${({$open}) => ($open ? null : `transform: rotate(-90deg);`)}
-  }
-`;
-
 const RepoName = styled.span`
   font-weight: 600;
 `;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/ui/useRepoExpansionState.tsx b/js_modules/dagster-ui/packages/ui-core/src/ui/useRepoExpansionState.tsx
index 97e8395b0fc65..f38d37ba34e10 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/ui/useRepoExpansionState.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/ui/useRepoExpansionState.tsx
@@ -22,8 +22,8 @@ export const useRepoExpansionState = (collapsedKey: string, allKeys: string[]) =
   );
 
   const onToggle = useCallback(
-    (repoAddress: RepoAddress) => {
-      const key = repoAddressAsHumanString(repoAddress);
+    (_key: string | RepoAddress) => {
+      const key = typeof _key === 'object' ? repoAddressAsHumanString(_key) : _key;
       setCollapsedKeys((current) => {
         const nextCollapsedKeys = new Set(current || []);
         if (nextCollapsedKeys.has(key)) {
diff --git a/js_modules/dagster-ui/packages/ui-core/src/workspace/TableSectionHeader.tsx b/js_modules/dagster-ui/packages/ui-core/src/workspace/TableSectionHeader.tsx
new file mode 100644
index 0000000000000..f6114589f58f5
--- /dev/null
+++ b/js_modules/dagster-ui/packages/ui-core/src/workspace/TableSectionHeader.tsx
@@ -0,0 +1,61 @@
+import {Box, Colors, Icon, IconWrapper} from '@dagster-io/ui-components';
+import styled from 'styled-components';
+
+export const SECTION_HEADER_HEIGHT = 32;
+
+export interface TableSectionHeaderProps {
+  expanded: boolean;
+  onClick: (e: React.MouseEvent) => void;
+  children?: React.ReactNode;
+  rightElement?: React.ReactNode;
+}
+
+export const TableSectionHeader = (props: TableSectionHeaderProps) => {
+  const {expanded, onClick, children, rightElement} = props;
+  return (
+    <SectionHeaderButton $open={expanded} onClick={onClick}>
+      <Box
+        flex={{alignItems: 'center', justifyContent: 'space-between'}}
+        padding={{horizontal: 24}}
+      >
+        {children}
+        <Box flex={{alignItems: 'center', gap: 8}}>
+          {rightElement}
+          <Box margin={{top: 2}}>
+            <Icon name="arrow_drop_down" />
+          </Box>
+        </Box>
+      </Box>
+    </SectionHeaderButton>
+  );
+};
+
+const SectionHeaderButton = styled.button<{$open: boolean}>`
+  background-color: ${Colors.backgroundLight()};
+  border: 0;
+  box-shadow:
+    inset 0px -1px 0 ${Colors.keylineDefault()},
+    inset 0px 1px 0 ${Colors.keylineDefault()};
+  color: ${Colors.textLight()};
+  cursor: pointer;
+  display: block;
+  padding: 0;
+  width: 100%;
+  margin: 0;
+  height: ${SECTION_HEADER_HEIGHT}px;
+  text-align: left;
+
+  :focus,
+  :active {
+    outline: none;
+  }
+
+  :hover {
+    background-color: ${Colors.backgroundLightHover()};
+  }
+
+  ${IconWrapper}[aria-label="arrow_drop_down"] {
+    transition: transform 100ms linear;
+    ${({$open}) => ($open ? null : `transform: rotate(-90deg);`)}
+  }
+`;