Skip to content

Commit

Permalink
fix toast
Browse files Browse the repository at this point in the history
  • Loading branch information
@salazarm
salazarm committed Jun 7, 2024
1 parent 2afd178 commit 2d1879d
Show file tree
Hide file tree
Showing 3 changed files with 30 additions and 101 deletions.
32 changes: 16 additions & 16 deletions js_modules/dagster-ui/packages/ui-core/src/nav/useCodeLocationsStatus.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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' ||
Expand All @@ -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]);
Expand All @@ -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.
Expand All @@ -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];
Expand Down Expand Up @@ -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.
Expand Down
82 changes: 0 additions & 82 deletions js_modules/dagster-ui/packages/ui-core/src/workspace/CodeLocationRowSet.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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();
Expand Down
17 changes: 14 additions & 3 deletions js_modules/dagster-ui/packages/ui-core/src/workspace/WorkspaceContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 2d1879d

Please sign in to comment.