[dagit] AssetView: Don't show historical view message if it's not (#7639

)

## Summary

Resolves #7636.

We shouldn't show the "historical view" alert on the asset materialization list if the most recent materialization is at the top of the list.

Added a "Loading…" title to the Spinner since it's good to have, and since it gives us something removable to target for testing.

## Test Plan

Jest

js_modules/dagit/packages/core/src/assets/AssetView.test.tsx

@@ -0,0 +1,57 @@
+import {render, screen, waitForElementToBeRemoved} from '@testing-library/react';
+import * as React from 'react';
+import {MemoryRouter} from 'react-router-dom';
+
+import {TestProvider} from '../testing/TestProvider';
+
+import {AssetView} from './AssetView';
+
+describe('AssetView', () => {
+  const defaultMocks = {
+    MaterializationEvent: () => ({
+      timestamp: 100,
+    }),
+  };
+
+  const Test = ({path}: {path: string}) => {
+    return (
+      <TestProvider apolloProps={{mocks: defaultMocks}}>
+        <MemoryRouter initialEntries={[path]}>
+          <AssetView assetKey={{path: ['foo']}} />
+        </MemoryRouter>
+      </TestProvider>
+    );
+  };
+
+  const MESSAGE = /this is a historical view of materializations as of \./i;
+
+  describe('Historical view alert', () => {
+    it('shows historical view alert if `asOf` is old', async () => {
+      render(<Test path="/foo?asOf=10" />);
+      const spinner = screen.queryByTitle(/loading…/i);
+      await waitForElementToBeRemoved(spinner);
+      expect(screen.queryByText(MESSAGE)).toBeVisible();
+    });
+
+    it('does not show historical view alert if `asOf` is past latest materialization', async () => {
+      render(<Test path="/foo?asOf=200" />);
+      const spinner = screen.queryByTitle(/loading…/i);
+      await waitForElementToBeRemoved(spinner);
+      expect(screen.queryByText(MESSAGE)).toBeNull();
+    });
+
+    it('does not show historical view alert if `asOf` is equal to latest materialization', async () => {
+      render(<Test path="/foo?asOf=100" />);
+      const spinner = screen.queryByTitle(/loading…/i);
+      await waitForElementToBeRemoved(spinner);
+      expect(screen.queryByText(MESSAGE)).toBeNull();
+    });
+
+    it('does not show historical view alert if no `asOf` is specified', async () => {
+      render(<Test path="/foo" />);
+      const spinner = screen.queryByTitle(/loading…/i);
+      await waitForElementToBeRemoved(spinner);
+      expect(screen.queryByText(MESSAGE)).toBeNull();
+    });
+  });
+});

js_modules/dagit/packages/core/src/assets/AssetView.tsx

@@ -69,6 +69,8 @@ export const AssetView: React.FC<Props> = ({assetKey}) => {
   const {assetOrError} = queryResult.data || queryResult.previousData || {};
   const asset = assetOrError && assetOrError.__typename === 'Asset' ? assetOrError : null;
   const lastMaterializedAt = asset?.assetMaterializations[0]?.timestamp;
+  const viewingMostRecent = !params.asOf || Number(lastMaterializedAt) <= Number(params.asOf);
+
   const definition = asset?.definition;
 
   const repoAddress = definition
@@ -180,7 +182,7 @@ export const AssetView: React.FC<Props> = ({assetKey}) => {
           >
             <Spinner purpose="page" />
           </Box>
-        ) : params.asOf ? (
+        ) : viewingMostRecent ? null : (
           <Box
             padding={{vertical: 16, horizontal: 24}}
             border={{side: 'bottom', width: 1, color: Colors.KeylineGray}}
@@ -191,7 +193,7 @@ export const AssetView: React.FC<Props> = ({assetKey}) => {
               hasDefinition={!!definition}
             />
           </Box>
-        ) : undefined}
+        )}
       </div>
       {isDefinitionLoaded &&
         (params.view === 'definition' ? (

js_modules/dagit/packages/ui/src/components/Spinner.tsx

@@ -12,7 +12,8 @@ export const Spinner: React.FC<{
   value?: number;
   fillColor?: string;
   stopped?: boolean;
-}> = ({purpose, value, fillColor = Colors.Gray600, stopped}) => {
+  title?: string;
+}> = ({purpose, value, fillColor = Colors.Gray600, stopped, title = 'Loading…'}) => {
   const size = () => {
     switch (purpose) {
       case 'page':
@@ -39,7 +40,7 @@ export const Spinner: React.FC<{
   };
 
   return (
-    <SpinnerWrapper $padding={padding()}>
+    <SpinnerWrapper $padding={padding()} title={title}>
       <SlowSpinner size={size()} value={value} $fillColor={fillColor} $stopped={stopped} />
     </SpinnerWrapper>
   );