Migration task

src/components/artifacts/TaskArtifacts.tsx

@@ -1,24 +1,25 @@
 import React from 'react';
-import { createFragmentContainer } from 'react-relay';
+import { useFragment } from 'react-relay';
 import { graphql } from 'babel-plugin-relay/macro';
 import ArtifactsView from './ArtifactsView';
 
-function TaskArtifacts(props) {
-  if (!props.task.artifacts || props.task.artifacts.length === 0) return <div />;
-  return <ArtifactsView task={props.task} />;
-}
-
-export default createFragmentContainer(TaskArtifacts, {
-  task: graphql`
-    fragment TaskArtifacts_task on Task {
-      id
-      artifacts {
-        name
-        files {
-          path
-          size
+export default function TaskArtifacts(props) {
+  let task = useFragment(
+    graphql`
+      fragment TaskArtifacts_task on Task {
+        id
+        artifacts {
+          name
+          files {
+            path
+            size
+          }
         }
       }
-    }
-  `,
-});
+    `,
+    props.task,
+  );
+
+  if (!task.artifacts || task.artifacts.length === 0) return <div />;
+  return <ArtifactsView task={props.task} />;
+}

src/components/builds/BuildsTable.tsx

@@ -21,6 +21,7 @@ import InfoIcon from '@mui/icons-material/Info';
 import CommitIcon from '@mui/icons-material/Commit';
 import Typography from '@mui/material/Typography';
 import CallSplitIcon from '@mui/icons-material/CallSplit';
+import BookOutlinedIcon from '@mui/icons-material/BookOutlined';
 import UnarchiveIcon from '@mui/icons-material/UnarchiveOutlined';
 
 import BuildStatusChipNew from '../chips/BuildStatusChipNew';
@@ -33,8 +34,6 @@ import { navigateBuildHelper } from '../../utils/navigateHelper';
 
 import { BuildsTable_builds } from './__generated__/BuildsTable_builds.graphql';
 
-import BookOutlinedIcon from '@mui/icons-material/BookOutlined';
-
 // todo: move custom values to mui theme adjustments
 const useStyles = makeStyles(theme => {
   return {

src/components/chips/TaskCancellerChip.tsx

@@ -3,31 +3,32 @@ import React from 'react';
 import Avatar from '@mui/material/Avatar';
 import Chip from '@mui/material/Chip';
 
-import { createFragmentContainer } from 'react-relay';
+import { useFragment } from 'react-relay';
 import { graphql } from 'babel-plugin-relay/macro';
-import { TaskCancellerChip_task } from './__generated__/TaskCancellerChip_task.graphql';
+import { TaskCancellerChip_task$key } from './__generated__/TaskCancellerChip_task.graphql';
 
 interface Props {
-  task: TaskCancellerChip_task;
+  task: TaskCancellerChip_task$key;
   className?: string;
 }
 
-function TaskCancellerChip(props: Props) {
-  let { cancelledBy } = props.task;
+export default function TaskCancellerChip(props: Props) {
+  let task = useFragment(
+    graphql`
+      fragment TaskCancellerChip_task on Task {
+        cancelledBy {
+          avatarURL
+        }
+      }
+    `,
+    props.task,
+  );
+
+  let { cancelledBy } = task;
 
   if (!cancelledBy) return <></>;
 
   return (
     <Chip className={props.className} label="Cancelled by a user" avatar={<Avatar src={cancelledBy.avatarURL} />} />
   );
 }
-
-export default createFragmentContainer(TaskCancellerChip, {
-  task: graphql`
-    fragment TaskCancellerChip_task on Task {
-      cancelledBy {
-        avatarURL
-      }
-    }
-  `,
-});

src/components/chips/TaskCreatedChip.tsx

@@ -4,21 +4,30 @@ import Icon from '@mui/material/Icon';
 import Tooltip from '@mui/material/Tooltip';
 import { graphql } from 'babel-plugin-relay/macro';
 import React, { useEffect } from 'react';
-import { createFragmentContainer } from 'react-relay';
+import { useFragment } from 'react-relay';
 import { useTaskStatusColor } from '../../utils/colors';
 import { taskStatusIconName } from '../../utils/status';
 import { roundAndPresentDuration } from '../../utils/time';
-import { TaskCreatedChip_task } from './__generated__/TaskCreatedChip_task.graphql';
+import { TaskCreatedChip_task$key } from './__generated__/TaskCreatedChip_task.graphql';
 import { useTheme } from '@mui/material';
 
 interface Props {
-  task: TaskCreatedChip_task;
+  task: TaskCreatedChip_task$key;
   className?: string;
 }
 
-let TaskCreatedChip = (props: Props) => {
+export default function TaskCreatedChip(props: Props) {
+  let task = useFragment(
+    graphql`
+      fragment TaskCreatedChip_task on Task {
+        creationTimestamp
+      }
+    `,
+    props.task,
+  );
+
   let theme = useTheme();
-  const creationTimestamp = props.task.creationTimestamp;
+  const creationTimestamp = task.creationTimestamp;
 
   const [durationAgoInSeconds, setDurationAgoInSeconds] = React.useState((Date.now() - creationTimestamp) / 1000);
 
@@ -51,12 +60,4 @@ let TaskCreatedChip = (props: Props) => {
       />
     </Tooltip>
   );
-};
-
-export default createFragmentContainer(TaskCreatedChip, {
-  task: graphql`
-    fragment TaskCreatedChip_task on Task {
-      creationTimestamp
-    }
-  `,
-});
+}

src/components/chips/TaskExperimentalChip.tsx

@@ -4,19 +4,27 @@ import Avatar from '@mui/material/Avatar';
 import Chip from '@mui/material/Chip';
 import CasinoIcon from '@mui/icons-material/Casino';
 
-import { createFragmentContainer } from 'react-relay';
+import { useFragment } from 'react-relay';
 import { graphql } from 'babel-plugin-relay/macro';
-import { TaskExperimentalChip_task } from './__generated__/TaskExperimentalChip_task.graphql';
+import { TaskExperimentalChip_task$key } from './__generated__/TaskExperimentalChip_task.graphql';
 import { useTheme } from '@mui/material';
 
 interface Props {
   className?: string;
-  task: TaskExperimentalChip_task;
+  task: TaskExperimentalChip_task$key;
 }
 
-let TaskExperimentalChip = (props: Props) => {
+export default function TaskExperimentalChip(props: Props) {
+  let task = useFragment(
+    graphql`
+      fragment TaskExperimentalChip_task on Task {
+        experimental
+      }
+    `,
+    props.task,
+  );
+
   let theme = useTheme();
-  const { task } = props;
   const { experimental } = task;
 
   if (!experimental) return <div />;
@@ -32,12 +40,4 @@ let TaskExperimentalChip = (props: Props) => {
       }
     />
   );
-};
-
-export default createFragmentContainer(TaskExperimentalChip, {
-  task: graphql`
-    fragment TaskExperimentalChip_task on Task {
-      experimental
-    }
-  `,
-});
+}

src/components/chips/TaskOptionalChip.tsx

@@ -4,20 +4,29 @@ import Avatar from '@mui/material/Avatar';
 import Chip from '@mui/material/Chip';
 import Report from '@mui/icons-material/Report';
 
-import { createFragmentContainer } from 'react-relay';
+import { useFragment } from 'react-relay';
 import { graphql } from 'babel-plugin-relay/macro';
-import { TaskOptionalChip_task } from './__generated__/TaskOptionalChip_task.graphql';
+import { TaskOptionalChip_task$key } from './__generated__/TaskOptionalChip_task.graphql';
 import { useTheme } from '@mui/material';
 
 interface Props {
-  task: TaskOptionalChip_task;
+  task: TaskOptionalChip_task$key;
   className?: string;
 }
 
-function TaskOptionalChip(props: Props) {
+export default function TaskOptionalChip(props: Props) {
+  let task = useFragment(
+    graphql`
+      fragment TaskOptionalChip_task on Task {
+        optional
+      }
+    `,
+    props.task,
+  );
+
   let theme = useTheme();
 
-  let { optional } = props.task;
+  let { optional } = task;
   if (!optional) return <div />;
 
   return (
@@ -32,11 +41,3 @@ function TaskOptionalChip(props: Props) {
     />
   );
 }
-
-export default createFragmentContainer(TaskOptionalChip, {
-  task: graphql`
-    fragment TaskOptionalChip_task on Task {
-      optional
-    }
-  `,
-});

src/components/chips/TaskRerunnerChip.tsx

@@ -3,29 +3,30 @@ import React from 'react';
 import Avatar from '@mui/material/Avatar';
 import Chip from '@mui/material/Chip';
 
-import { createFragmentContainer } from 'react-relay';
+import { useFragment } from 'react-relay';
 import { graphql } from 'babel-plugin-relay/macro';
-import { TaskRerunnerChip_task } from './__generated__/TaskRerunnerChip_task.graphql';
+import { TaskRerunnerChip_task$key } from './__generated__/TaskRerunnerChip_task.graphql';
 
 interface Props {
-  task: TaskRerunnerChip_task;
+  task: TaskRerunnerChip_task$key;
   className?: string;
 }
 
-function TaskRerunnerChip(props: Props) {
-  let { reranBy } = props.task;
+export default function TaskRerunnerChip(props: Props) {
+  let task = useFragment(
+    graphql`
+      fragment TaskRerunnerChip_task on Task {
+        reranBy {
+          avatarURL
+        }
+      }
+    `,
+    props.task,
+  );
+
+  let { reranBy } = task;
 
   if (!reranBy) return <></>;
 
   return <Chip className={props.className} label="Re-ran by a user" avatar={<Avatar src={reranBy.avatarURL} />} />;
 }
-
-export default createFragmentContainer(TaskRerunnerChip, {
-  task: graphql`
-    fragment TaskRerunnerChip_task on Task {
-      reranBy {
-        avatarURL
-      }
-    }
-  `,
-});

src/components/chips/TaskResourcesChip.tsx

@@ -4,10 +4,10 @@ import Avatar from '@mui/material/Avatar';
 import Chip from '@mui/material/Chip';
 import Tooltip from '@mui/material/Tooltip';
 import Memory from '@mui/icons-material/Memory';
-import { createFragmentContainer } from 'react-relay';
+import { useFragment } from 'react-relay';
 import { graphql } from 'babel-plugin-relay/macro';
 import { makeStyles } from '@mui/styles';
-import { TaskResourcesChip_task } from './__generated__/TaskResourcesChip_task.graphql';
+import { TaskResourcesChip_task$key } from './__generated__/TaskResourcesChip_task.graphql';
 
 const useStyles = makeStyles(theme => {
   return {
@@ -21,13 +21,25 @@ const useStyles = makeStyles(theme => {
 });
 
 interface Props {
-  task: TaskResourcesChip_task;
+  task: TaskResourcesChip_task$key;
   className?: string;
 }
 
-function TaskResourcesChip(props: Props) {
+export default function TaskResourcesChip(props: Props) {
+  let task = useFragment(
+    graphql`
+      fragment TaskResourcesChip_task on Task {
+        instanceResources {
+          cpu
+          memory
+        }
+      }
+    `,
+    props.task,
+  );
+
   let classes = useStyles();
-  let { task, className } = props;
+  let { className } = props;
   let resources = task.instanceResources;
   if (!resources) {
     return null;
@@ -48,14 +60,3 @@ function TaskResourcesChip(props: Props) {
     </Tooltip>
   );
 }
-
-export default createFragmentContainer(TaskResourcesChip, {
-  task: graphql`
-    fragment TaskResourcesChip_task on Task {
-      instanceResources {
-        cpu
-        memory
-      }
-    }
-  `,
-});