Differential D5639 Diff 28050 js_modules/dagit/src/workspace/RepositoryLocationsList.tsx

Changeset View

Standalone View

js_modules/dagit/src/workspace/RepositoryLocationsList.tsx

import {Button, Classes, Colors, Dialog, NonIdealState, Spinner, Tag} from '@blueprintjs/core';		import {Button, Classes, Colors, Dialog, NonIdealState, Spinner, Tag} from '@blueprintjs/core';
import React from 'react';		import React from 'react';
import styled from 'styled-components';		import styled from 'styled-components';

import {useRepositoryLocationReload} from 'src/nav/ReloadRepositoryLocationButton';		import {useRepositoryLocationReload} from 'src/nav/ReloadRepositoryLocationButton';
import {ButtonLink} from 'src/ui/ButtonLink';		import {ButtonLink} from 'src/ui/ButtonLink';
import {Group} from 'src/ui/Group';		import {Group} from 'src/ui/Group';
import {Table} from 'src/ui/Table';		import {Table} from 'src/ui/Table';
import {FontFamily} from 'src/ui/styles';		import {FontFamily} from 'src/ui/styles';
import {useNetworkedRepositoryLocations} from 'src/workspace/WorkspaceContext';		import {WorkspaceContext} from 'src/workspace/WorkspaceContext';
import {RepositoryLocationsQuery_repositoryLocationsOrError_RepositoryLocationConnection_nodes as LocationOrError} from 'src/workspace/types/RepositoryLocationsQuery';		import {RootRepositoriesQuery_repositoryLocationsOrError_RepositoryLocationConnection_nodes as LocationOrError} from 'src/workspace/types/RootRepositoriesQuery';

const LocationStatus: React.FC<{locationOrError: LocationOrError; reloading: boolean}> = (		const LocationStatus: React.FC<{locationOrError: LocationOrError; reloading: boolean}> = (
props,		props,
) => {		) => {
const {locationOrError, reloading} = props;		const {locationOrError, reloading} = props;
const [showDialog, setShowDialog] = React.useState(false);		const [showDialog, setShowDialog] = React.useState(false);

if (reloading) {		if (reloading) {
▲ Show 20 Lines • Show All 55 Lines • ▼ Show 20 Lines	<ButtonLink onClick={onClick}>
Reload		Reload
{reloading ? <Spinner size={12} /> : null}		{reloading ? <Spinner size={12} /> : null}
</Group>		</Group>
</ButtonLink>		</ButtonLink>
);		);
};		};

export const RepositoryLocationsList = () => {		export const RepositoryLocationsList = () => {
const {locations, loading, refetch} = useNetworkedRepositoryLocations();		const {locations, loading} = React.useContext(WorkspaceContext);
const [reloading, setReloading] = React.useState<string \| null>(null);		const [reloading, setReloading] = React.useState<string \| null>(null);

if (loading && !locations.length) {		if (loading && !locations.length) {
return <div style={{color: Colors.GRAY3}}>Loading…</div>;		return <div style={{color: Colors.GRAY3}}>Loading…</div>;
}		}

if (!locations.length) {		if (!locations.length) {
return <NonIdealState icon="cube" title="No repository locations!" />;		return <NonIdealState icon="cube" title="No repository locations!" />;
}		}

const onReload = async (name: string) => {		const onReload = async (name: string) => {
setReloading(name);		setReloading(name);
// This is to prevent a race condition with resetting the apollo store. By delaying the refetch,
// we make sure that the store isn't being reset while a query is being made.
setTimeout(() => {
refetch();
}, 100);
setReloading(null);		setReloading(null);
};		};

return (		return (
<Table striped style={{width: '100%'}}>		<Table striped style={{width: '100%'}}>
<thead>		<thead>
<tr>		<tr>
<th>Repository location</th>		<th>Repository location</th>
Show All 30 Lines