Migration of the remaining components

src/AllRoutes.tsx

@@ -236,7 +236,9 @@ function AllRoutes() {
               </IconButton>
             </Tooltip>
             <div className={classes.marginRight}>
-              <ActiveRepositoriesDrawer />
+              <Suspense fallback={<CirrusLinearProgress />}>
+                <ActiveRepositoriesDrawer />
+              </Suspense>
             </div>
           </Toolbar>
         </AppBar>

src/components/compute-credits/ComputeCreditsTransactionRow.tsx

@@ -6,15 +6,15 @@ import TableRow from '@mui/material/TableRow';
 import Chip from '@mui/material/Chip';
 import TaskNameChip from '../chips/TaskNameChip';
 import TaskDurationChip from '../chips/TaskDurationChip';
-import { createFragmentContainer } from 'react-relay';
+import { useFragment } from 'react-relay';
 import { graphql } from 'babel-plugin-relay/macro';
 import { makeStyles } from '@mui/styles';
 import classNames from 'classnames';
 import RepositoryNameChip from '../chips/RepositoryNameChip';
 import AttachMoneyIcon from '@mui/icons-material/AttachMoney';
 import TaskCreatedChip from '../chips/TaskCreatedChip';
 import { navigateTaskHelper } from '../../utils/navigateHelper';
-import { ComputeCreditsTransactionRow_transaction } from './__generated__/ComputeCreditsTransactionRow_transaction.graphql';
+import { ComputeCreditsTransactionRow_transaction$key } from './__generated__/ComputeCreditsTransactionRow_transaction.graphql';
 
 const useStyles = makeStyles(theme => {
   return {
@@ -31,12 +31,31 @@ const useStyles = makeStyles(theme => {
 });
 
 interface Props {
-  transaction: ComputeCreditsTransactionRow_transaction;
+  transaction: ComputeCreditsTransactionRow_transaction$key;
 }
 
-function ComputeCreditsTransactionRow(props: Props) {
+export default function ComputeCreditsTransactionRow(props: Props) {
+  let transaction = useFragment(
+    graphql`
+      fragment ComputeCreditsTransactionRow_transaction on OwnerTransaction {
+        timestamp
+        creditsAmount
+        task {
+          id
+          name
+          ...TaskCreatedChip_task
+          ...TaskDurationChip_task
+          ...TaskNameChip_task
+        }
+        repository {
+          ...RepositoryNameChip_repository
+        }
+      }
+    `,
+    props.transaction,
+  );
+
   let navigate = useNavigate();
-  let { transaction } = props;
   let classes = useStyles();
   let { task, repository } = transaction;
   return (
@@ -61,22 +80,3 @@ function ComputeCreditsTransactionRow(props: Props) {
     </TableRow>
   );
 }
-
-export default createFragmentContainer(ComputeCreditsTransactionRow, {
-  transaction: graphql`
-    fragment ComputeCreditsTransactionRow_transaction on OwnerTransaction {
-      timestamp
-      creditsAmount
-      task {
-        id
-        name
-        ...TaskCreatedChip_task
-        ...TaskDurationChip_task
-        ...TaskNameChip_task
-      }
-      repository {
-        ...RepositoryNameChip_repository
-      }
-    }
-  `,
-});

src/components/hooks/HookListRow.tsx

@@ -3,12 +3,12 @@ import { useNavigate } from 'react-router-dom';
 
 import TableCell from '@mui/material/TableCell';
 import TableRow from '@mui/material/TableRow';
-import { createFragmentContainer } from 'react-relay';
+import { useFragment } from 'react-relay';
 import { graphql } from 'babel-plugin-relay/macro';
 import { navigateHookHelper } from '../../utils/navigateHelper';
 import { makeStyles } from '@mui/styles';
 import classNames from 'classnames';
-import { HookListRow_hook } from './__generated__/HookListRow_hook.graphql';
+import { HookListRow_hook$key } from './__generated__/HookListRow_hook.graphql';
 import HookStatusChip from '../chips/HookStatusChip';
 import HookNameChip from '../chips/HookNameChip';
 import HookCreatedChip from '../chips/HookCreatedChip';
@@ -31,11 +31,22 @@ const useStyles = makeStyles(theme => {
 });
 
 interface Props {
-  hook: HookListRow_hook;
+  hook: HookListRow_hook$key;
 }
 
-function HookListRow(props: Props) {
-  let { hook } = props;
+export default function HookListRow(props: Props) {
+  let hook = useFragment(
+    graphql`
+      fragment HookListRow_hook on Hook {
+        id
+        ...HookStatusChip_hook
+        ...HookCreatedChip_hook
+        ...HookNameChip_hook
+      }
+    `,
+    props.hook,
+  );
+
   let classes = useStyles();
   let navigate = useNavigate();
 
@@ -49,14 +60,3 @@ function HookListRow(props: Props) {
     </TableRow>
   );
 }
-
-export default createFragmentContainer(HookListRow, {
-  hook: graphql`
-    fragment HookListRow_hook on Hook {
-      id
-      ...HookStatusChip_hook
-      ...HookCreatedChip_hook
-      ...HookNameChip_hook
-    }
-  `,
-});

src/components/settings/OwnerApiSettings.tsx

@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
-import { commitMutation, createFragmentContainer } from 'react-relay';
+import { useMutation, useFragment } from 'react-relay';
 import { graphql } from 'babel-plugin-relay/macro';
-import { OwnerApiSettings_info } from './__generated__/OwnerApiSettings_info.graphql';
+import { OwnerApiSettings_info$key } from './__generated__/OwnerApiSettings_info.graphql';
 import {
+  OwnerApiSettingsMutation,
   GenerateNewOwnerAccessTokenInput,
   OwnerApiSettingsMutationResponse,
 } from './__generated__/OwnerApiSettingsMutation.graphql';
-import environment from '../../createRelayEnvironment';
 import Typography from '@mui/material/Typography';
 import TextField from '@mui/material/TextField';
 import CardActions from '@mui/material/CardActions';
@@ -18,14 +18,6 @@ import { Link } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 import OwnerScopedTokenDialog from './OwnerScopedTokenDialog';
 
-const generateNewTokenMutation = graphql`
-  mutation OwnerApiSettingsMutation($input: GenerateNewOwnerAccessTokenInput!) {
-    generateNewOwnerAccessToken(input: $input) {
-      token
-    }
-  }
-`;
-
 const useStyles = makeStyles(theme => {
   return {
     textField: {
@@ -37,24 +29,44 @@ const useStyles = makeStyles(theme => {
 });
 
 interface Props {
-  info: OwnerApiSettings_info;
+  info: OwnerApiSettings_info$key;
 }
 
-function OwnerApiSettings(props: Props) {
+export default function OwnerApiSettings(props: Props) {
+  let info = useFragment(
+    graphql`
+      fragment OwnerApiSettings_info on OwnerInfo {
+        platform
+        uid
+        apiToken {
+          maskedToken
+        }
+        ...OwnerScopedTokenDialog_ownerInfo
+      }
+    `,
+    props.info,
+  );
+
   let classes = useStyles();
   let existingTokenComponent = null;
   let [newToken, setNewToken] = useState(null);
   let [openDialog, setOpenDialog] = useState(false);
 
+  const [commitGenerateNewTokenMutation] = useMutation<OwnerApiSettingsMutation>(graphql`
+    mutation OwnerApiSettingsMutation($input: GenerateNewOwnerAccessTokenInput!) {
+      generateNewOwnerAccessToken(input: $input) {
+        token
+      }
+    }
+  `);
   function generateNewAccessToken() {
     let input: GenerateNewOwnerAccessTokenInput = {
-      clientMutationId: `generate-api-token-${props.info.uid}`,
-      platform: props.info.platform,
-      ownerUid: props.info.uid,
+      clientMutationId: `generate-api-token-${info.uid}`,
+      platform: info.platform,
+      ownerUid: info.uid,
     };
 
-    commitMutation(environment, {
-      mutation: generateNewTokenMutation,
+    commitGenerateNewTokenMutation({
       variables: { input },
       onCompleted: (response: OwnerApiSettingsMutationResponse, errors) => {
         if (errors) {
@@ -67,9 +79,9 @@ function OwnerApiSettings(props: Props) {
     });
   }
 
-  if (props.info.apiToken && props.info.apiToken.maskedToken) {
+  if (info.apiToken && info.apiToken.maskedToken) {
     existingTokenComponent = (
-      <Typography variant="subtitle1">Currently active token: {props.info.apiToken.maskedToken}</Typography>
+      <Typography variant="subtitle1">Currently active token: {info.apiToken.maskedToken}</Typography>
     );
   }
   let newTokenComponent = null;
@@ -103,27 +115,14 @@ function OwnerApiSettings(props: Props) {
         </CardContent>
         <CardActions>
           <Button variant="contained" onClick={() => generateNewAccessToken()}>
-            {props.info.apiToken ? 'Invalidate All Tokens' : 'Generate New Token'}
+            {info.apiToken ? 'Invalidate All Tokens' : 'Generate New Token'}
           </Button>
           <Button variant="contained" onClick={() => setOpenDialog(true)}>
             Generate a scoped repository Token
           </Button>
         </CardActions>
       </Card>
-      <OwnerScopedTokenDialog ownerInfo={props.info} open={openDialog} onClose={() => setOpenDialog(!openDialog)} />
+      <OwnerScopedTokenDialog ownerInfo={info} open={openDialog} onClose={() => setOpenDialog(!openDialog)} />
     </div>
   );
 }
-
-export default createFragmentContainer(OwnerApiSettings, {
-  info: graphql`
-    fragment OwnerApiSettings_info on OwnerInfo {
-      platform
-      uid
-      apiToken {
-        maskedToken
-      }
-      ...OwnerScopedTokenDialog_ownerInfo
-    }
-  `,
-});

src/components/settings/OwnerPersistentWorkerPools.tsx

@@ -1,27 +1,27 @@
 import React from 'react';
-import { createFragmentContainer } from 'react-relay';
+import { useFragment } from 'react-relay';
 import { graphql } from 'babel-plugin-relay/macro';
 import PersistentWorkerPoolsList from '../workers/PersistentWorkerPoolsList';
-import { OwnerPersistentWorkerPools_info } from './__generated__/OwnerPersistentWorkerPools_info.graphql';
+import { OwnerPersistentWorkerPools_info$key } from './__generated__/OwnerPersistentWorkerPools_info.graphql';
 
 interface Props {
-  info: OwnerPersistentWorkerPools_info;
+  info: OwnerPersistentWorkerPools_info$key;
 }
 
-function OwnerPersistentWorkerPools(props: Props) {
-  let info = props.info;
+export default function OwnerPersistentWorkerPools(props: Props) {
+  let info = useFragment(
+    graphql`
+      fragment OwnerPersistentWorkerPools_info on OwnerInfo {
+        uid
+        persistentWorkerPools {
+          id
+          name
+          enabledForPublic
+        }
+      }
+    `,
+    props.info,
+  );
+
   return <PersistentWorkerPoolsList ownerUid={info.uid} pools={info.persistentWorkerPools || []} />;
 }
-
-export default createFragmentContainer(OwnerPersistentWorkerPools, {
-  info: graphql`
-    fragment OwnerPersistentWorkerPools_info on OwnerInfo {
-      uid
-      persistentWorkerPools {
-        id
-        name
-        enabledForPublic
-      }
-    }
-  `,
-});