From fcc4c9b9173d3af4f16a3ddb9a5f4d44f458fff6 Mon Sep 17 00:00:00 2001
From: Marco polo <salazarm@users.noreply.github.com>
Date: Thu, 7 Mar 2024 10:14:15 -0500
Subject: [PATCH] [Asset checks] Add back warnings for different gql errors
 (#20317)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary & Motivation

tested with storybook:

![Screenshot 2024-03-06 at 5 48
28 PM](https://github.com/dagster-io/dagster/assets/2286579/5530ab08-7dca-4e29-972a-90e093f06419)
![Screenshot 2024-03-06 at 5 50
12 PM](https://github.com/dagster-io/dagster/assets/2286579/659a7c24-7a0b-4231-a49c-05ecd47491d3)
![Screenshot 2024-03-06 at 5 50
07 PM](https://github.com/dagster-io/dagster/assets/2286579/187ba2b5-fa08-4829-a4d0-6f464e448a41)
---
 .../src/assets/asset-checks/AssetChecks.tsx   | 26 +++++++++++-
 .../__stories__/AssetChecks.stories.tsx       | 40 +++++++++++++++++++
 2 files changed, 64 insertions(+), 2 deletions(-)

diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/AssetChecks.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/AssetChecks.tsx
index 784af61fe996a..42b927ad50e01 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/AssetChecks.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/AssetChecks.tsx
@@ -21,7 +21,13 @@ import React, {useContext} from 'react';
 import {Link} from 'react-router-dom';
 import styled from 'styled-components';
 
-import {ASSET_CHECK_DETAILS_QUERY, MetadataCell} from './AssetCheckDetailModal';
+import {
+  ASSET_CHECK_DETAILS_QUERY,
+  AgentUpgradeRequired,
+  MetadataCell,
+  MigrationRequired,
+  NeedsUserCodeUpgrade,
+} from './AssetCheckDetailModal';
 import {AssetCheckStatusTag} from './AssetCheckStatusTag';
 import {
   EXECUTE_CHECKS_BUTTON_ASSET_NODE_FRAGMENT,
@@ -36,7 +42,7 @@ import {
 import {AssetChecksQuery, AssetChecksQueryVariables} from './types/AssetChecks.types';
 import {assetCheckStatusDescription, getCheckIcon} from './util';
 import {FIFTEEN_SECONDS, useQueryRefreshAtInterval} from '../../app/QueryRefresh';
-import {COMMON_COLLATOR} from '../../app/Util';
+import {COMMON_COLLATOR, assertUnreachable} from '../../app/Util';
 import {Timestamp} from '../../app/time/Timestamp';
 import {AssetKeyInput} from '../../graphql/types';
 import {useQueryPersistedState} from '../../hooks/useQueryPersistedState';
@@ -118,6 +124,22 @@ export const AssetChecks = ({
     return null;
   }
 
+  if (data.assetNodeOrError.__typename === 'AssetNode') {
+    const type = data.assetNodeOrError.assetChecksOrError.__typename;
+    switch (type) {
+      case 'AssetCheckNeedsAgentUpgradeError':
+        return <AgentUpgradeRequired />;
+      case 'AssetCheckNeedsMigrationError':
+        return <MigrationRequired />;
+      case 'AssetCheckNeedsUserCodeUpgrade':
+        return <NeedsUserCodeUpgrade />;
+      case 'AssetChecks':
+        break;
+      default:
+        assertUnreachable(type);
+    }
+  }
+
   if (!checks.length || !selectedCheck || !assetNode) {
     return (
       <Box flex={{alignItems: 'center'}} padding={32}>
diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/__stories__/AssetChecks.stories.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/__stories__/AssetChecks.stories.tsx
index 8d7ccc5b83cd0..6daf87932f4fc 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/__stories__/AssetChecks.stories.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/__stories__/AssetChecks.stories.tsx
@@ -3,7 +3,9 @@ import {Meta} from '@storybook/react';
 import {MemoryRouter} from 'react-router-dom';
 
 import {
+  buildAssetCheckNeedsAgentUpgradeError,
   buildAssetCheckNeedsMigrationError,
+  buildAssetCheckNeedsUserCodeUpgrade,
   buildAssetChecks,
   buildAssetKey,
   buildAssetNode,
@@ -61,6 +63,44 @@ export const MigrationRequired = () => {
   );
 };
 
+export const AgentUpgradeRequired = () => {
+  return (
+    <Component
+      mocks={[
+        buildQueryMock<any, AssetChecksQueryVariables>({
+          query: ASSET_CHECKS_QUERY,
+          variables: {assetKey: testAssetKey},
+          data: {
+            assetNodeOrError: buildAssetNode({
+              assetKey: buildAssetKey(testAssetKey),
+              assetChecksOrError: buildAssetCheckNeedsAgentUpgradeError(),
+            }),
+          },
+        }),
+      ]}
+    />
+  );
+};
+
+export const NeedsUserCodeUpgradeRequired = () => {
+  return (
+    <Component
+      mocks={[
+        buildQueryMock<any, AssetChecksQueryVariables>({
+          query: ASSET_CHECKS_QUERY,
+          variables: {assetKey: testAssetKey},
+          data: {
+            assetNodeOrError: buildAssetNode({
+              assetKey: buildAssetKey(testAssetKey),
+              assetChecksOrError: buildAssetCheckNeedsUserCodeUpgrade(),
+            }),
+          },
+        }),
+      ]}
+    />
+  );
+};
+
 export const NoChecks = () => {
   return (
     <Component