Migration repository

src/components/builds/BuildsTable.tsx

@@ -1,7 +1,7 @@
 import { memo, useEffect, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { ThemeProvider } from '@emotion/react';
-import { createFragmentContainer, requestSubscription } from 'react-relay';
+import { requestSubscription, useFragment } from 'react-relay';
 import cx from 'classnames';
 import { useRecoilValue } from 'recoil';
 import { graphql } from 'babel-plugin-relay/macro';
@@ -32,7 +32,7 @@ import { formatDuration } from '../../utils/time';
 import { isBuildFinalStatus } from '../../utils/status';
 import { navigateBuildHelper } from '../../utils/navigateHelper';
 
-import { BuildsTable_builds } from './__generated__/BuildsTable_builds.graphql';
+import { BuildsTable_builds, BuildsTable_builds$key } from './__generated__/BuildsTable_builds.graphql';
 
 // todo: move custom values to mui theme adjustments
 const useStyles = makeStyles(theme => {
@@ -115,7 +115,7 @@ const useStyles = makeStyles(theme => {
 });
 
 interface Props {
-  builds: BuildsTable_builds;
+  builds: BuildsTable_builds$key;
   selectedBuildId?: string;
   setSelectedBuildId?: Function;
 }
@@ -128,7 +128,27 @@ const buildSubscription = graphql`
   }
 `;
 
-const BuildsTable = ({ builds = [], selectedBuildId, setSelectedBuildId }: Props) => {
+export default function BuildsTable({ selectedBuildId, setSelectedBuildId, ...props }: Props) {
+  let builds = useFragment(
+    graphql`
+      fragment BuildsTable_builds on Build @relay(plural: true) {
+        id
+        branch
+        tag
+        status
+        changeIdInRepo
+        changeMessageTitle
+        clockDurationInSeconds
+        repository {
+          platform
+          owner
+          name
+        }
+      }
+    `,
+    props.builds,
+  );
+
   let classes = useStyles();
   const themeOptions = useRecoilValue(muiThemeOptions);
   const muiTheme = useMemo(() => createTheme(themeOptions), [themeOptions]);
@@ -152,7 +172,7 @@ const BuildsTable = ({ builds = [], selectedBuildId, setSelectedBuildId }: Props
       </Table>
     </ThemeProvider>
   );
-};
+}
 const HeadRow = () => {
   let classes = useStyles();
   const durationTooltipText = (
@@ -291,22 +311,3 @@ const BuildRow = memo(({ build, selected, setSelectedBuildId }: BuildRowProps) =
     </TableRow>
   );
 });
-
-export default createFragmentContainer(BuildsTable, {
-  builds: graphql`
-    fragment BuildsTable_builds on Build @relay(plural: true) {
-      id
-      branch
-      tag
-      status
-      changeIdInRepo
-      changeMessageTitle
-      clockDurationInSeconds
-      repository {
-        platform
-        owner
-        name
-      }
-    }
-  `,
-});

src/components/builds/CreateBuildDialog.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
-import environment from '../../createRelayEnvironment';
-import { commitMutation, createFragmentContainer } from 'react-relay';
+import { useFragment, useMutation } from 'react-relay';
 import { graphql } from 'babel-plugin-relay/macro';
 import Button from '@mui/material/Button';
 import Dialog from '@mui/material/Dialog';
@@ -15,34 +14,48 @@ import { navigateBuildHelper } from '../../utils/navigateHelper';
 
 import 'ace-builds/src-noconflict/mode-yaml';
 import 'ace-builds/src-noconflict/theme-github';
-import { CreateBuildDialog_repository } from './__generated__/CreateBuildDialog_repository.graphql';
+import { CreateBuildDialog_repository$key } from './__generated__/CreateBuildDialog_repository.graphql';
 import {
+  CreateBuildDialogMutation,
   CreateBuildDialogMutationResponse,
   CreateBuildDialogMutationVariables,
 } from './__generated__/CreateBuildDialogMutation.graphql';
 
-const createBuildMutation = graphql`
-  mutation CreateBuildDialogMutation($input: RepositoryCreateBuildInput!) {
-    createBuild(input: $input) {
-      build {
-        id
-      }
-    }
-  }
-`;
-
 interface Props {
   onClose: Function;
   open: boolean;
-  repository: CreateBuildDialog_repository;
+  repository: CreateBuildDialog_repository$key;
 }
 
-function CreateBuildDialog(props: Props) {
+export default function CreateBuildDialog(props: Props) {
+  let repository = useFragment(
+    graphql`
+      fragment CreateBuildDialog_repository on Repository {
+        id
+        owner
+        name
+        masterBranch
+      }
+    `,
+    props.repository,
+  );
+
+  const [commitCreateBuildMutation] = useMutation<CreateBuildDialogMutation>(
+    graphql`
+      mutation CreateBuildDialogMutation($input: RepositoryCreateBuildInput!) {
+        createBuild(input: $input) {
+          build {
+            id
+          }
+        }
+      }
+    `,
+  );
+
   let navigate = useNavigate();
-  let [branch, setBranch] = useState(props.repository.masterBranch);
+  let [branch, setBranch] = useState(repository.masterBranch);
   let [configOverride, setConfigOverride] = useState('');
   let [sha, setSHA] = useState('');
-  let { repository } = props;
 
   function handleClose() {
     if (props.onClose) {
@@ -53,16 +66,15 @@ function CreateBuildDialog(props: Props) {
   function sendMutation() {
     const variables: CreateBuildDialogMutationVariables = {
       input: {
-        clientMutationId: props.repository.name,
-        repositoryId: props.repository.id,
+        clientMutationId: repository.name,
+        repositoryId: repository.id,
         branch: branch,
         sha: sha,
         configOverride: configOverride,
       },
     };
 
-    commitMutation(environment, {
-      mutation: createBuildMutation,
+    commitCreateBuildMutation({
       variables: variables,
       onCompleted: (response: CreateBuildDialogMutationResponse, errors) => {
         if (errors) {
@@ -118,14 +130,3 @@ function CreateBuildDialog(props: Props) {
     </Dialog>
   );
 }
-
-export default createFragmentContainer(CreateBuildDialog, {
-  repository: graphql`
-    fragment CreateBuildDialog_repository on Repository {
-      id
-      owner
-      name
-      masterBranch
-    }
-  `,
-});

src/components/chips/BuildStatusChip.tsx

@@ -3,13 +3,13 @@ import Chip from '@mui/material/Chip';
 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, requestSubscription } from 'react-relay';
+import React, { useEffect, useMemo } from 'react';
+import { useFragment, requestSubscription } from 'react-relay';
 import environment from '../../createRelayEnvironment';
 import { useBuildStatusColor } from '../../utils/colors';
 import { buildStatusIconName, buildStatusMessage, isBuildFinalStatus } from '../../utils/status';
 import { formatDuration } from '../../utils/time';
-import { BuildStatusChip_build } from './__generated__/BuildStatusChip_build.graphql';
+import { BuildStatusChip_build$key } from './__generated__/BuildStatusChip_build.graphql';
 import { useTheme } from '@mui/material';
 
 const buildSubscription = graphql`
@@ -21,20 +21,33 @@ const buildSubscription = graphql`
 `;
 
 interface Props {
-  build: BuildStatusChip_build;
+  build: BuildStatusChip_build$key;
   className?: string;
   mini?: boolean;
 }
 
-function BuildStatusChip(props: Props) {
+export default function BuildStatusChip(props: Props) {
+  let build = useFragment(
+    graphql`
+      fragment BuildStatusChip_build on Build {
+        id
+        status
+        durationInSeconds
+        clockDurationInSeconds
+      }
+    `,
+    props.build,
+  );
+
   let theme = useTheme();
 
+  const isFinalStatus = useMemo(() => isBuildFinalStatus(build.status), [build.status]);
   useEffect(() => {
-    if (isBuildFinalStatus(props.build.status)) {
+    if (isFinalStatus) {
       return;
     }
 
-    let variables = { buildID: props.build.id };
+    let variables = { buildID: build.id };
 
     const subscription = requestSubscription(environment, {
       subscription: buildSubscription,
@@ -43,9 +56,9 @@ function BuildStatusChip(props: Props) {
     return () => {
       subscription.dispose();
     };
-  }, [props.build.id, props.build.status]);
+  }, [build.id, isFinalStatus]);
 
-  let { build, mini, className } = props;
+  let { mini, className } = props;
   let message = buildStatusMessage(build.status, build.durationInSeconds);
   let buildStatusColor = useBuildStatusColor(build.status);
   if (mini) {
@@ -77,14 +90,3 @@ function BuildStatusChip(props: Props) {
     </Tooltip>
   );
 }
-
-export default createFragmentContainer(BuildStatusChip, {
-  build: graphql`
-    fragment BuildStatusChip_build on Build {
-      id
-      status
-      durationInSeconds
-      clockDurationInSeconds
-    }
-  `,
-});