[Asset checks] Add back warnings for different gql errors (#20317)

## 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)

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}>

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