Skip to content

Commit e1bc95c

Browse files
ikatemartikatemart
authored
Migration of the remaining components (#532)
* Add useFragment to ComputeCreditsTransactionRow * Add useFragment to HookListRow * Add useFragment to OwnerApiSettings * Add useMutation to OwnerApiSettings * Add useFragment to OwnerPersistentWorkerPools * Add useFragment to OwnerScopedTokenDialog * Add useMutation to OwnerScopedTokenDialog * Add useFragment to OwnerSecuredVariables * Add useMutation to OwnerSecuredVariables * Add useFragment to TaskListRow * Add useFragment to DeliveryRow * Add useLazyLoadQuery to DeliveryInfoDialogLazyContent * Add useLazyLoadQuery to ActiveRepositoriesDrawer
1 parent bc839b6 commit e1bc95c

12 files changed

+233
-245
lines changed

‎src/AllRoutes.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -236,7 +236,9 @@ function AllRoutes() {
236236
</IconButton>
237237
</Tooltip>
238238
<div className={classes.marginRight}>
239-
<ActiveRepositoriesDrawer />
239+
<Suspense fallback={<CirrusLinearProgress />}>
240+
<ActiveRepositoriesDrawer />
241+
</Suspense>
240242
</div>
241243
</Toolbar>
242244
</AppBar>

‎src/components/compute-credits/ComputeCreditsTransactionRow.tsx

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,15 @@ import TableRow from '@mui/material/TableRow';
66
import Chip from '@mui/material/Chip';
77
import TaskNameChip from '../chips/TaskNameChip';
88
import TaskDurationChip from '../chips/TaskDurationChip';
9-
import { createFragmentContainer } from 'react-relay';
9+
import { useFragment } from 'react-relay';
1010
import { graphql } from 'babel-plugin-relay/macro';
1111
import { makeStyles } from '@mui/styles';
1212
import classNames from 'classnames';
1313
import RepositoryNameChip from '../chips/RepositoryNameChip';
1414
import AttachMoneyIcon from '@mui/icons-material/AttachMoney';
1515
import TaskCreatedChip from '../chips/TaskCreatedChip';
1616
import { navigateTaskHelper } from '../../utils/navigateHelper';
17-
import { ComputeCreditsTransactionRow_transaction } from './__generated__/ComputeCreditsTransactionRow_transaction.graphql';
17+
import { ComputeCreditsTransactionRow_transaction$key } from './__generated__/ComputeCreditsTransactionRow_transaction.graphql';
1818

1919
const useStyles = makeStyles(theme => {
2020
return {
@@ -31,12 +31,31 @@ const useStyles = makeStyles(theme => {
3131
});
3232

3333
interface Props {
34-
transaction: ComputeCreditsTransactionRow_transaction;
34+
transaction: ComputeCreditsTransactionRow_transaction$key;
3535
}
3636

37-
function ComputeCreditsTransactionRow(props: Props) {
37+
export default function ComputeCreditsTransactionRow(props: Props) {
38+
let transaction = useFragment(
39+
graphql`
40+
fragment ComputeCreditsTransactionRow_transaction on OwnerTransaction {
41+
timestamp
42+
creditsAmount
43+
task {
44+
id
45+
name
46+
...TaskCreatedChip_task
47+
...TaskDurationChip_task
48+
...TaskNameChip_task
49+
}
50+
repository {
51+
...RepositoryNameChip_repository
52+
}
53+
}
54+
`,
55+
props.transaction,
56+
);
57+
3858
let navigate = useNavigate();
39-
let { transaction } = props;
4059
let classes = useStyles();
4160
let { task, repository } = transaction;
4261
return (
@@ -61,22 +80,3 @@ function ComputeCreditsTransactionRow(props: Props) {
6180
</TableRow>
6281
);
6382
}
64-
65-
export default createFragmentContainer(ComputeCreditsTransactionRow, {
66-
transaction: graphql`
67-
fragment ComputeCreditsTransactionRow_transaction on OwnerTransaction {
68-
timestamp
69-
creditsAmount
70-
task {
71-
id
72-
name
73-
...TaskCreatedChip_task
74-
...TaskDurationChip_task
75-
...TaskNameChip_task
76-
}
77-
repository {
78-
...RepositoryNameChip_repository
79-
}
80-
}
81-
`,
82-
});

‎src/components/hooks/HookListRow.tsx

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ import { useNavigate } from 'react-router-dom';
33

44
import TableCell from '@mui/material/TableCell';
55
import TableRow from '@mui/material/TableRow';
6-
import { createFragmentContainer } from 'react-relay';
6+
import { useFragment } from 'react-relay';
77
import { graphql } from 'babel-plugin-relay/macro';
88
import { navigateHookHelper } from '../../utils/navigateHelper';
99
import { makeStyles } from '@mui/styles';
1010
import classNames from 'classnames';
11-
import { HookListRow_hook } from './__generated__/HookListRow_hook.graphql';
11+
import { HookListRow_hook$key } from './__generated__/HookListRow_hook.graphql';
1212
import HookStatusChip from '../chips/HookStatusChip';
1313
import HookNameChip from '../chips/HookNameChip';
1414
import HookCreatedChip from '../chips/HookCreatedChip';
@@ -31,11 +31,22 @@ const useStyles = makeStyles(theme => {
3131
});
3232

3333
interface Props {
34-
hook: HookListRow_hook;
34+
hook: HookListRow_hook$key;
3535
}
3636

37-
function HookListRow(props: Props) {
38-
let { hook } = props;
37+
export default function HookListRow(props: Props) {
38+
let hook = useFragment(
39+
graphql`
40+
fragment HookListRow_hook on Hook {
41+
id
42+
...HookStatusChip_hook
43+
...HookCreatedChip_hook
44+
...HookNameChip_hook
45+
}
46+
`,
47+
props.hook,
48+
);
49+
3950
let classes = useStyles();
4051
let navigate = useNavigate();
4152

@@ -49,14 +60,3 @@ function HookListRow(props: Props) {
4960
</TableRow>
5061
);
5162
}
52-
53-
export default createFragmentContainer(HookListRow, {
54-
hook: graphql`
55-
fragment HookListRow_hook on Hook {
56-
id
57-
...HookStatusChip_hook
58-
...HookCreatedChip_hook
59-
...HookNameChip_hook
60-
}
61-
`,
62-
});

‎src/components/settings/OwnerApiSettings.tsx

Lines changed: 34 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React, { useState } from 'react';
2-
import { commitMutation, createFragmentContainer } from 'react-relay';
2+
import { useMutation, useFragment } from 'react-relay';
33
import { graphql } from 'babel-plugin-relay/macro';
4-
import { OwnerApiSettings_info } from './__generated__/OwnerApiSettings_info.graphql';
4+
import { OwnerApiSettings_info$key } from './__generated__/OwnerApiSettings_info.graphql';
55
import {
6+
OwnerApiSettingsMutation,
67
GenerateNewOwnerAccessTokenInput,
78
OwnerApiSettingsMutationResponse,
89
} from './__generated__/OwnerApiSettingsMutation.graphql';
9-
import environment from '../../createRelayEnvironment';
1010
import Typography from '@mui/material/Typography';
1111
import TextField from '@mui/material/TextField';
1212
import CardActions from '@mui/material/CardActions';
@@ -18,14 +18,6 @@ import { Link } from '@mui/material';
1818
import { makeStyles } from '@mui/styles';
1919
import OwnerScopedTokenDialog from './OwnerScopedTokenDialog';
2020

21-
const generateNewTokenMutation = graphql`
22-
mutation OwnerApiSettingsMutation($input: GenerateNewOwnerAccessTokenInput!) {
23-
generateNewOwnerAccessToken(input: $input) {
24-
token
25-
}
26-
}
27-
`;
28-
2921
const useStyles = makeStyles(theme => {
3022
return {
3123
textField: {
@@ -37,24 +29,44 @@ const useStyles = makeStyles(theme => {
3729
});
3830

3931
interface Props {
40-
info: OwnerApiSettings_info;
32+
info: OwnerApiSettings_info$key;
4133
}
4234

43-
function OwnerApiSettings(props: Props) {
35+
export default function OwnerApiSettings(props: Props) {
36+
let info = useFragment(
37+
graphql`
38+
fragment OwnerApiSettings_info on OwnerInfo {
39+
platform
40+
uid
41+
apiToken {
42+
maskedToken
43+
}
44+
...OwnerScopedTokenDialog_ownerInfo
45+
}
46+
`,
47+
props.info,
48+
);
49+
4450
let classes = useStyles();
4551
let existingTokenComponent = null;
4652
let [newToken, setNewToken] = useState(null);
4753
let [openDialog, setOpenDialog] = useState(false);
4854

55+
const [commitGenerateNewTokenMutation] = useMutation<OwnerApiSettingsMutation>(graphql`
56+
mutation OwnerApiSettingsMutation($input: GenerateNewOwnerAccessTokenInput!) {
57+
generateNewOwnerAccessToken(input: $input) {
58+
token
59+
}
60+
}
61+
`);
4962
function generateNewAccessToken() {
5063
let input: GenerateNewOwnerAccessTokenInput = {
51-
clientMutationId: `generate-api-token-${props.info.uid}`,
52-
platform: props.info.platform,
53-
ownerUid: props.info.uid,
64+
clientMutationId: `generate-api-token-${info.uid}`,
65+
platform: info.platform,
66+
ownerUid: info.uid,
5467
};
5568

56-
commitMutation(environment, {
57-
mutation: generateNewTokenMutation,
69+
commitGenerateNewTokenMutation({
5870
variables: { input },
5971
onCompleted: (response: OwnerApiSettingsMutationResponse, errors) => {
6072
if (errors) {
@@ -67,9 +79,9 @@ function OwnerApiSettings(props: Props) {
6779
});
6880
}
6981

70-
if (props.info.apiToken && props.info.apiToken.maskedToken) {
82+
if (info.apiToken && info.apiToken.maskedToken) {
7183
existingTokenComponent = (
72-
<Typography variant="subtitle1">Currently active token: {props.info.apiToken.maskedToken}</Typography>
84+
<Typography variant="subtitle1">Currently active token: {info.apiToken.maskedToken}</Typography>
7385
);
7486
}
7587
let newTokenComponent = null;
@@ -103,27 +115,14 @@ function OwnerApiSettings(props: Props) {
103115
</CardContent>
104116
<CardActions>
105117
<Button variant="contained" onClick={() => generateNewAccessToken()}>
106-
{props.info.apiToken ? 'Invalidate All Tokens' : 'Generate New Token'}
118+
{info.apiToken ? 'Invalidate All Tokens' : 'Generate New Token'}
107119
</Button>
108120
<Button variant="contained" onClick={() => setOpenDialog(true)}>
109121
Generate a scoped repository Token
110122
</Button>
111123
</CardActions>
112124
</Card>
113-
<OwnerScopedTokenDialog ownerInfo={props.info} open={openDialog} onClose={() => setOpenDialog(!openDialog)} />
125+
<OwnerScopedTokenDialog ownerInfo={info} open={openDialog} onClose={() => setOpenDialog(!openDialog)} />
114126
</div>
115127
);
116128
}
117-
118-
export default createFragmentContainer(OwnerApiSettings, {
119-
info: graphql`
120-
fragment OwnerApiSettings_info on OwnerInfo {
121-
platform
122-
uid
123-
apiToken {
124-
maskedToken
125-
}
126-
...OwnerScopedTokenDialog_ownerInfo
127-
}
128-
`,
129-
});

‎src/components/settings/OwnerPersistentWorkerPools.tsx

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
11
import React from 'react';
2-
import { createFragmentContainer } from 'react-relay';
2+
import { useFragment } from 'react-relay';
33
import { graphql } from 'babel-plugin-relay/macro';
44
import PersistentWorkerPoolsList from '../workers/PersistentWorkerPoolsList';
5-
import { OwnerPersistentWorkerPools_info } from './__generated__/OwnerPersistentWorkerPools_info.graphql';
5+
import { OwnerPersistentWorkerPools_info$key } from './__generated__/OwnerPersistentWorkerPools_info.graphql';
66

77
interface Props {
8-
info: OwnerPersistentWorkerPools_info;
8+
info: OwnerPersistentWorkerPools_info$key;
99
}
1010

11-
function OwnerPersistentWorkerPools(props: Props) {
12-
let info = props.info;
11+
export default function OwnerPersistentWorkerPools(props: Props) {
12+
let info = useFragment(
13+
graphql`
14+
fragment OwnerPersistentWorkerPools_info on OwnerInfo {
15+
uid
16+
persistentWorkerPools {
17+
id
18+
name
19+
enabledForPublic
20+
}
21+
}
22+
`,
23+
props.info,
24+
);
25+
1326
return <PersistentWorkerPoolsList ownerUid={info.uid} pools={info.persistentWorkerPools || []} />;
1427
}
15-
16-
export default createFragmentContainer(OwnerPersistentWorkerPools, {
17-
info: graphql`
18-
fragment OwnerPersistentWorkerPools_info on OwnerInfo {
19-
uid
20-
persistentWorkerPools {
21-
id
22-
name
23-
enabledForPublic
24-
}
25-
}
26-
`,
27-
});

0 commit comments

Comments
 (0)