From 2d1879d15d506e5700adba863f7f6a92c06a8f11 Mon Sep 17 00:00:00 2001
From: Marco Salazar <marco@elementl.com>
Date: Fri, 7 Jun 2024 00:55:06 -0400
Subject: [PATCH] fix toast

---
 .../src/nav/useCodeLocationsStatus.tsx        | 32 ++++----
 .../src/workspace/CodeLocationRowSet.tsx      | 82 -------------------
 .../src/workspace/WorkspaceContext.tsx        | 17 +++-
 3 files changed, 30 insertions(+), 101 deletions(-)

diff --git a/js_modules/dagster-ui/packages/ui-core/src/nav/useCodeLocationsStatus.tsx b/js_modules/dagster-ui/packages/ui-core/src/nav/useCodeLocationsStatus.tsx
index 2f276e0fc95e3..1a3f0db69db01 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/nav/useCodeLocationsStatus.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/nav/useCodeLocationsStatus.tsx
@@ -1,5 +1,5 @@
 import {Box, ButtonLink, Colors} from '@dagster-io/ui-components';
-import {useCallback, useContext, useEffect, useLayoutEffect, useState} from 'react';
+import {useCallback, useContext, useLayoutEffect, useState} from 'react';
 import {useHistory} from 'react-router-dom';
 import {atom, useRecoilValue} from 'recoil';
 import styled from 'styled-components';
@@ -38,8 +38,7 @@ export const useCodeLocationsStatus = (): StatusAndMessage | null => {
   // Reload the workspace, but don't toast about it.
 
   // Reload the workspace, and show a success or error toast upon completion.
-  useEffect(() => {
-    const isFreshPageload = previousEntriesById === null;
+  useLayoutEffect(() => {
     const anyErrors = Object.values(data).some(
       (entry) =>
         entry.__typename === 'PythonError' ||
@@ -59,17 +58,6 @@ export const useCodeLocationsStatus = (): StatusAndMessage | null => {
         ),
         icon: 'check_circle',
       });
-    } else if (!isFreshPageload) {
-      showSharedToaster({
-        intent: 'success',
-        message: (
-          <Box flex={{direction: 'row', justifyContent: 'space-between', gap: 24, grow: 1}}>
-            <div>Definitions reloaded</div>
-            {showViewButton ? <ViewCodeLocationsButton onClick={onClickViewButton} /> : null}
-          </Box>
-        ),
-        icon: 'check_circle',
-      });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data, onClickViewButton]);
@@ -78,6 +66,7 @@ export const useCodeLocationsStatus = (): StatusAndMessage | null => {
 
   useLayoutEffect(() => {
     const isFreshPageload = previousEntriesById === null;
+    const showViewButton = !alreadyViewingCodeLocations();
 
     // Given the previous and current code locations, determine whether to show a) a loading spinner
     // and/or b) a toast indicating that a code location is being reloaded.
@@ -88,6 +77,19 @@ export const useCodeLocationsStatus = (): StatusAndMessage | null => {
         : [];
 
     let hasUpdatedEntries = entries.length !== Object.keys(previousEntriesById || {}).length;
+
+    if (!isFreshPageload && hasUpdatedEntries) {
+      showSharedToaster({
+        intent: 'success',
+        message: (
+          <Box flex={{direction: 'row', justifyContent: 'space-between', gap: 24, grow: 1}}>
+            <div>Definitions reloaded</div>
+            {showViewButton ? <ViewCodeLocationsButton onClick={onClickViewButton} /> : null}
+          </Box>
+        ),
+        icon: 'check_circle',
+      });
+    }
     const currEntriesById: {[key: string]: LocationStatusEntry} = {};
     entries.forEach((entry) => {
       const previousEntry = previousEntriesById && previousEntriesById[entry.id];
@@ -130,8 +132,6 @@ export const useCodeLocationsStatus = (): StatusAndMessage | null => {
       return;
     }
 
-    const showViewButton = !alreadyViewingCodeLocations();
-
     // We have a new entry, and it has already finished loading. Wow! It's surprisingly fast for it
     // to have finished loading so quickly, but go ahead and indicate that the location has
     // been added, then reload the workspace.
diff --git a/js_modules/dagster-ui/packages/ui-core/src/workspace/CodeLocationRowSet.tsx b/js_modules/dagster-ui/packages/ui-core/src/workspace/CodeLocationRowSet.tsx
index a03837c974bf4..0f684461839a6 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/workspace/CodeLocationRowSet.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/workspace/CodeLocationRowSet.tsx
@@ -4,23 +4,16 @@ import {
   ButtonLink,
   Colors,
   Icon,
-  JoinedButtons,
   MiddleTruncate,
   Tag,
   Tooltip,
 } from '@dagster-io/ui-components';
 import {useCallback, useMemo, useState} from 'react';
-import {Link} from 'react-router-dom';
 import styled from 'styled-components';
 
-import {CodeLocationMenu} from './CodeLocationMenu';
-import {RepositoryCountTags} from './RepositoryCountTags';
 import {RepositoryLocationNonBlockingErrorDialog} from './RepositoryLocationErrorDialog';
 import {WorkspaceRepositoryLocationNode} from './WorkspaceContext';
-import {buildRepoAddress} from './buildRepoAddress';
-import {repoAddressAsHumanString} from './repoAddressAsString';
 import {WorkspaceDisplayMetadataFragment} from './types/WorkspaceQueries.types';
-import {workspacePathFromAddress} from './workspacePath';
 import {showSharedToaster} from '../app/DomUtils';
 import {useCopyToClipboard} from '../app/browser';
 import {
@@ -31,81 +24,6 @@ import {
   buildReloadFnForLocation,
   useRepositoryLocationReload,
 } from '../nav/useRepositoryLocationReload';
-import {TimeFromNow} from '../ui/TimeFromNow';
-
-interface Props {
-  locationNode: WorkspaceRepositoryLocationNode;
-}
-
-export const CodeLocationRowSet = ({locationNode}: Props) => {
-  const {name, locationOrLoadError} = locationNode;
-
-  if (!locationOrLoadError || locationOrLoadError?.__typename === 'PythonError') {
-    return (
-      <tr>
-        <td style={{maxWidth: '400px', color: Colors.textLight()}}>
-          <MiddleTruncate text={name} />
-        </td>
-        <td>
-          <LocationStatus location={name} locationOrError={locationNode} />
-        </td>
-        <td style={{whiteSpace: 'nowrap'}}>
-          <TimeFromNow unixTimestamp={locationNode.updatedTimestamp} />
-        </td>
-        <td>{'\u2013'}</td>
-        <td style={{width: '180px'}}>
-          <JoinedButtons>
-            <ReloadButton location={name} />
-            <CodeLocationMenu locationNode={locationNode} />
-          </JoinedButtons>
-        </td>
-      </tr>
-    );
-  }
-
-  const repositories = [...locationOrLoadError.repositories].sort((a, b) =>
-    a.name.localeCompare(b.name),
-  );
-
-  return (
-    <>
-      {repositories.map((repository) => {
-        const repoAddress = buildRepoAddress(repository.name, name);
-        const allMetadata = [...locationNode.displayMetadata, ...repository.displayMetadata];
-        return (
-          <tr key={repoAddressAsHumanString(repoAddress)}>
-            <td style={{maxWidth: '400px'}}>
-              <Box flex={{direction: 'column', gap: 4}}>
-                <div style={{fontWeight: 500}}>
-                  <Link to={workspacePathFromAddress(repoAddress)}>
-                    <MiddleTruncate text={repoAddressAsHumanString(repoAddress)} />
-                  </Link>
-                </div>
-                <ImageName metadata={allMetadata} />
-                <ModuleOrPackageOrFile metadata={allMetadata} />
-              </Box>
-            </td>
-            <td>
-              <LocationStatus location={repository.name} locationOrError={locationNode} />
-            </td>
-            <td style={{whiteSpace: 'nowrap'}}>
-              <TimeFromNow unixTimestamp={locationNode.updatedTimestamp} />
-            </td>
-            <td>
-              <RepositoryCountTags repo={repository} repoAddress={repoAddress} />
-            </td>
-            <td style={{width: '180px'}}>
-              <JoinedButtons>
-                <ReloadButton location={name} />
-                <CodeLocationMenu locationNode={locationNode} />
-              </JoinedButtons>
-            </td>
-          </tr>
-        );
-      })}
-    </>
-  );
-};
 
 export const ImageName = ({metadata}: {metadata: WorkspaceDisplayMetadataFragment[]}) => {
   const copy = useCopyToClipboard();
diff --git a/js_modules/dagster-ui/packages/ui-core/src/workspace/WorkspaceContext.tsx b/js_modules/dagster-ui/packages/ui-core/src/workspace/WorkspaceContext.tsx
index 2bc857cb55549..a2f2119f57109 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/workspace/WorkspaceContext.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/workspace/WorkspaceContext.tsx
@@ -192,19 +192,30 @@ export const WorkspaceProvider = ({children}: {children: React.ReactNode}) => {
     [client, getData, localCacheIdPrefix],
   );
 
+  const [isRefetching, setIsRefetching] = useState(false);
+
   const locationsToFetch = useMemo(() => {
     if (!didLoadCachedData) {
       return [];
     }
+    if (isRefetching) {
+      return [];
+    }
     const toFetch = Object.values(locations).filter((loc) => {
       const prev = prevLocations.current?.[loc.name];
-      return prev?.updateTimestamp !== loc.updateTimestamp || prev?.loadStatus !== loc.loadStatus;
+      const d = locationsData[loc.name];
+      const entry = d?.__typename === 'WorkspaceLocationEntry' ? d : null;
+      return (
+        prev?.updateTimestamp !== loc.updateTimestamp ||
+        prev?.loadStatus !== loc.loadStatus ||
+        entry?.updatedTimestamp !== loc.updateTimestamp ||
+        entry?.loadStatus !== loc.loadStatus
+      );
     });
     prevLocations.current = locations;
     return toFetch;
-  }, [locations, didLoadCachedData]);
+  }, [didLoadCachedData, isRefetching, locations, locationsData]);
 
-  const [isRefetching, setIsRefetching] = useState(false);
   useLayoutEffect(() => {
     if (!locationsToFetch.length) {
       return;