From fbb0ea08d68fee798539652cd03b6f5dc499a5b9 Mon Sep 17 00:00:00 2001 From: Ekaterina Martyshevskaia <74831191+katermart@users.noreply.github.com> Date: Mon, 13 Mar 2023 19:17:18 +0100 Subject: [PATCH 01/13] Add useFragment to ComputeCreditsTransactionRow --- .../ComputeCreditsTransactionRow.tsx | 48 +++++++++---------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/src/components/compute-credits/ComputeCreditsTransactionRow.tsx b/src/components/compute-credits/ComputeCreditsTransactionRow.tsx index c6801b7a8..c43372c62 100644 --- a/src/components/compute-credits/ComputeCreditsTransactionRow.tsx +++ b/src/components/compute-credits/ComputeCreditsTransactionRow.tsx @@ -6,7 +6,7 @@ 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'; @@ -14,7 +14,7 @@ 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) { ); } - -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 - } - } - `, -}); From 9de527d0438d03000e59752dc36fb04e440c79cc Mon Sep 17 00:00:00 2001 From: Ekaterina Martyshevskaia <74831191+katermart@users.noreply.github.com> Date: Mon, 13 Mar 2023 19:18:25 +0100 Subject: [PATCH 02/13] Add useFragment to HookListRow --- src/components/hooks/HookListRow.tsx | 32 ++++++++++++++-------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/src/components/hooks/HookListRow.tsx b/src/components/hooks/HookListRow.tsx index 4cf1b2c66..b19ef32eb 100644 --- a/src/components/hooks/HookListRow.tsx +++ b/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) { ); } - -export default createFragmentContainer(HookListRow, { - hook: graphql` - fragment HookListRow_hook on Hook { - id - ...HookStatusChip_hook - ...HookCreatedChip_hook - ...HookNameChip_hook - } - `, -}); From db5384c35f5a116f2f35f0c895cd95b58f68c656 Mon Sep 17 00:00:00 2001 From: Ekaterina Martyshevskaia <74831191+katermart@users.noreply.github.com> Date: Mon, 13 Mar 2023 19:20:03 +0100 Subject: [PATCH 03/13] Add useFragment to OwnerApiSettings --- src/components/settings/OwnerApiSettings.tsx | 49 ++++++++++---------- 1 file changed, 25 insertions(+), 24 deletions(-) diff --git a/src/components/settings/OwnerApiSettings.tsx b/src/components/settings/OwnerApiSettings.tsx index 7ec8cb5e8..cf5bba8e6 100644 --- a/src/components/settings/OwnerApiSettings.tsx +++ b/src/components/settings/OwnerApiSettings.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react'; -import { commitMutation, createFragmentContainer } from 'react-relay'; +import { commitMutation, 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 { GenerateNewOwnerAccessTokenInput, OwnerApiSettingsMutationResponse, @@ -37,10 +37,24 @@ 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); @@ -48,9 +62,9 @@ function OwnerApiSettings(props: Props) { 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, { @@ -67,9 +81,9 @@ function OwnerApiSettings(props: Props) { }); } - if (props.info.apiToken && props.info.apiToken.maskedToken) { + if (info.apiToken && info.apiToken.maskedToken) { existingTokenComponent = ( - Currently active token: {props.info.apiToken.maskedToken} + Currently active token: {info.apiToken.maskedToken} ); } let newTokenComponent = null; @@ -103,27 +117,14 @@ function OwnerApiSettings(props: Props) { - setOpenDialog(!openDialog)} /> + setOpenDialog(!openDialog)} /> ); } - -export default createFragmentContainer(OwnerApiSettings, { - info: graphql` - fragment OwnerApiSettings_info on OwnerInfo { - platform - uid - apiToken { - maskedToken - } - ...OwnerScopedTokenDialog_ownerInfo - } - `, -}); From fcf94642a41652eab1c8a27883d13069c6b589e7 Mon Sep 17 00:00:00 2001 From: Ekaterina Martyshevskaia <74831191+katermart@users.noreply.github.com> Date: Mon, 13 Mar 2023 19:25:35 +0100 Subject: [PATCH 04/13] Add useMutation to OwnerApiSettings --- src/components/settings/OwnerApiSettings.tsx | 22 +++++++++----------- 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/src/components/settings/OwnerApiSettings.tsx b/src/components/settings/OwnerApiSettings.tsx index cf5bba8e6..d6defd757 100644 --- a/src/components/settings/OwnerApiSettings.tsx +++ b/src/components/settings/OwnerApiSettings.tsx @@ -1,12 +1,12 @@ import React, { useState } from 'react'; -import { commitMutation, useFragment } from 'react-relay'; +import { useMutation, useFragment } from 'react-relay'; import { graphql } from 'babel-plugin-relay/macro'; 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: { @@ -60,6 +52,13 @@ export default function OwnerApiSettings(props: Props) { let [newToken, setNewToken] = useState(null); let [openDialog, setOpenDialog] = useState(false); + const [commitGenerateNewTokenMutation] = useMutation(graphql` + mutation OwnerApiSettingsMutation($input: GenerateNewOwnerAccessTokenInput!) { + generateNewOwnerAccessToken(input: $input) { + token + } + } + `); function generateNewAccessToken() { let input: GenerateNewOwnerAccessTokenInput = { clientMutationId: `generate-api-token-${info.uid}`, @@ -67,8 +66,7 @@ export default function OwnerApiSettings(props: Props) { ownerUid: info.uid, }; - commitMutation(environment, { - mutation: generateNewTokenMutation, + commitGenerateNewTokenMutation({ variables: { input }, onCompleted: (response: OwnerApiSettingsMutationResponse, errors) => { if (errors) { From 8504e9ae55487687ecc2053ac570ea3d7471ef0d Mon Sep 17 00:00:00 2001 From: Ekaterina Martyshevskaia <74831191+katermart@users.noreply.github.com> Date: Mon, 13 Mar 2023 19:27:34 +0100 Subject: [PATCH 05/13] Add useFragment to OwnerPersistentWorkerPools --- .../settings/OwnerPersistentWorkerPools.tsx | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/src/components/settings/OwnerPersistentWorkerPools.tsx b/src/components/settings/OwnerPersistentWorkerPools.tsx index a63efc58f..f843ae131 100644 --- a/src/components/settings/OwnerPersistentWorkerPools.tsx +++ b/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 ; } - -export default createFragmentContainer(OwnerPersistentWorkerPools, { - info: graphql` - fragment OwnerPersistentWorkerPools_info on OwnerInfo { - uid - persistentWorkerPools { - id - name - enabledForPublic - } - } - `, -}); From 2e18e82fbf319eca4a34679adb13ccdb26969c5e Mon Sep 17 00:00:00 2001 From: Ekaterina Martyshevskaia <74831191+katermart@users.noreply.github.com> Date: Mon, 13 Mar 2023 19:38:53 +0100 Subject: [PATCH 06/13] Add useFragment to OwnerScopedTokenDialog --- .../settings/OwnerScopedTokenDialog.tsx | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/src/components/settings/OwnerScopedTokenDialog.tsx b/src/components/settings/OwnerScopedTokenDialog.tsx index 38da65f00..e88f7d0b7 100644 --- a/src/components/settings/OwnerScopedTokenDialog.tsx +++ b/src/components/settings/OwnerScopedTokenDialog.tsx @@ -11,9 +11,9 @@ import { makeStyles } from '@mui/styles'; import Switch from '@mui/material/Switch'; import { graphql } from 'babel-plugin-relay/macro'; import React, { useState } from 'react'; -import { commitMutation, createFragmentContainer } from 'react-relay'; +import { commitMutation, useFragment } from 'react-relay'; import environment from '../../createRelayEnvironment'; -import { OwnerScopedTokenDialog_ownerInfo } from './__generated__/OwnerScopedTokenDialog_ownerInfo.graphql'; +import { OwnerScopedTokenDialog_ownerInfo$key } from './__generated__/OwnerScopedTokenDialog_ownerInfo.graphql'; import { OwnerScopedTokenDialogMutationResponse, OwnerScopedTokenDialogMutationVariables, @@ -39,16 +39,25 @@ const generateNewScopedAccessTokenMutation = graphql` `; interface Props { - ownerInfo: OwnerScopedTokenDialog_ownerInfo; + ownerInfo: OwnerScopedTokenDialog_ownerInfo$key; onClose(...args: any[]): void; open: boolean; } -function OwnerScopedTokenDialog(props: Props) { +export default function OwnerScopedTokenDialog(props: Props) { + let ownerInfo = useFragment( + graphql` + fragment OwnerScopedTokenDialog_ownerInfo on OwnerInfo { + platform + uid + } + `, + props.ownerInfo, + ); + let classes = useStyles(); - const { ...other } = props; let [readOnly, setReadOnly] = useState(true); let [expirationDays, setExpirationDays] = useState(null); let [repositoryNames, setRepositoryNames] = useState(''); @@ -57,9 +66,9 @@ function OwnerScopedTokenDialog(props: Props) { function generateToken() { const variables: OwnerScopedTokenDialogMutationVariables = { input: { - clientMutationId: 'generate-scoped-token-' + props.ownerInfo.uid + repositoryNames, - platform: props.ownerInfo.platform, - ownerUid: props.ownerInfo.uid, + clientMutationId: 'generate-scoped-token-' + ownerInfo.uid + repositoryNames, + platform: ownerInfo.platform, + ownerUid: ownerInfo.uid, repositoryNames: repositoryNames.split(','), permission: readOnly ? 'READ' : 'WRITE', durationSeconds: 24 * 60 * 60 * (expirationDays || 0), @@ -98,7 +107,7 @@ function OwnerScopedTokenDialog(props: Props) { } return ( - + Generate API token for repositories @@ -137,12 +146,3 @@ function OwnerScopedTokenDialog(props: Props) { ); } - -export default createFragmentContainer(OwnerScopedTokenDialog, { - ownerInfo: graphql` - fragment OwnerScopedTokenDialog_ownerInfo on OwnerInfo { - platform - uid - } - `, -}); From 625c8033e48846a90ff9e4c97158e6c9b4be5c7b Mon Sep 17 00:00:00 2001 From: Ekaterina Martyshevskaia <74831191+katermart@users.noreply.github.com> Date: Mon, 13 Mar 2023 19:47:39 +0100 Subject: [PATCH 07/13] Add useMutation to OwnerScopedTokenDialog --- .../settings/OwnerScopedTokenDialog.tsx | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/settings/OwnerScopedTokenDialog.tsx b/src/components/settings/OwnerScopedTokenDialog.tsx index e88f7d0b7..0d7a4c226 100644 --- a/src/components/settings/OwnerScopedTokenDialog.tsx +++ b/src/components/settings/OwnerScopedTokenDialog.tsx @@ -11,10 +11,10 @@ import { makeStyles } from '@mui/styles'; import Switch from '@mui/material/Switch'; import { graphql } from 'babel-plugin-relay/macro'; import React, { useState } from 'react'; -import { commitMutation, useFragment } from 'react-relay'; -import environment from '../../createRelayEnvironment'; +import { useMutation, useFragment } from 'react-relay'; import { OwnerScopedTokenDialog_ownerInfo$key } from './__generated__/OwnerScopedTokenDialog_ownerInfo.graphql'; import { + OwnerScopedTokenDialogMutation, OwnerScopedTokenDialogMutationResponse, OwnerScopedTokenDialogMutationVariables, } from './__generated__/OwnerScopedTokenDialogMutation.graphql'; @@ -30,14 +30,6 @@ const useStyles = makeStyles(theme => { }; }); -const generateNewScopedAccessTokenMutation = graphql` - mutation OwnerScopedTokenDialogMutation($input: GenerateNewScopedAccessTokenInput!) { - generateNewScopedAccessToken(input: $input) { - token - } - } -`; - interface Props { ownerInfo: OwnerScopedTokenDialog_ownerInfo$key; @@ -63,6 +55,15 @@ export default function OwnerScopedTokenDialog(props: Props) { let [repositoryNames, setRepositoryNames] = useState(''); let [newToken, setNewToken] = useState(null); + const [commitGenerateNewScopedAccessTokenMutation] = useMutation( + graphql` + mutation OwnerScopedTokenDialogMutation($input: GenerateNewScopedAccessTokenInput!) { + generateNewScopedAccessToken(input: $input) { + token + } + } + `, + ); function generateToken() { const variables: OwnerScopedTokenDialogMutationVariables = { input: { @@ -74,8 +75,7 @@ export default function OwnerScopedTokenDialog(props: Props) { durationSeconds: 24 * 60 * 60 * (expirationDays || 0), }, }; - commitMutation(environment, { - mutation: generateNewScopedAccessTokenMutation, + commitGenerateNewScopedAccessTokenMutation({ variables: variables, onCompleted: (response: OwnerScopedTokenDialogMutationResponse, errors) => { if (errors) { From 2f68ac7f382700dced76841d150c6a10bb3bdcd1 Mon Sep 17 00:00:00 2001 From: Ekaterina Martyshevskaia <74831191+katermart@users.noreply.github.com> Date: Mon, 13 Mar 2023 19:51:21 +0100 Subject: [PATCH 08/13] Add useFragment to OwnerSecuredVariables --- .../settings/OwnerSecuredVariables.tsx | 35 ++++++++++--------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/src/components/settings/OwnerSecuredVariables.tsx b/src/components/settings/OwnerSecuredVariables.tsx index 856cb9f19..f4927d0bf 100644 --- a/src/components/settings/OwnerSecuredVariables.tsx +++ b/src/components/settings/OwnerSecuredVariables.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import environment from '../../createRelayEnvironment'; -import { commitMutation, createFragmentContainer } from 'react-relay'; +import { commitMutation, useFragment } from 'react-relay'; import { graphql } from 'babel-plugin-relay/macro'; import Button from '@mui/material/Button'; import Card from '@mui/material/Card'; @@ -14,7 +14,7 @@ import { OwnerSecuredVariablesMutationResponse, OwnerSecuredVariablesMutationVariables, } from './__generated__/OwnerSecuredVariablesMutation.graphql'; -import { OwnerSecuredVariables_info } from './__generated__/OwnerSecuredVariables_info.graphql'; +import { OwnerSecuredVariables_info$key } from './__generated__/OwnerSecuredVariables_info.graphql'; const securedVariableMutation = graphql` mutation OwnerSecuredVariablesMutation($input: OwnerSecuredVariableInput!) { @@ -25,10 +25,21 @@ const securedVariableMutation = graphql` `; interface Props { - info: OwnerSecuredVariables_info; + info: OwnerSecuredVariables_info$key; } -function OwnerSecuredVariables(props: Props) { +export default function OwnerSecuredVariables(props: Props) { + let info = useFragment( + graphql` + fragment OwnerSecuredVariables_info on OwnerInfo { + platform + uid + name + } + `, + props.info, + ); + let [securedVariableName, setSecuredVariableName] = useState(undefined); let [inputValue, setInputValue] = useState(''); let securedComponent = null; @@ -42,9 +53,9 @@ function OwnerSecuredVariables(props: Props) { function encryptCurrentValue() { const variables: OwnerSecuredVariablesMutationVariables = { input: { - clientMutationId: props.info.name, - platform: props.info.platform, - ownerUid: props.info.uid, + clientMutationId: info.name, + platform: info.platform, + ownerUid: info.uid, valueToSecure: inputValue, }, }; @@ -87,13 +98,3 @@ function OwnerSecuredVariables(props: Props) { ); } - -export default createFragmentContainer(OwnerSecuredVariables, { - info: graphql` - fragment OwnerSecuredVariables_info on OwnerInfo { - platform - uid - name - } - `, -}); From 0d559b8b6b5767cc6f1a6ac04206859ec6eb28ae Mon Sep 17 00:00:00 2001 From: Ekaterina Martyshevskaia <74831191+katermart@users.noreply.github.com> Date: Mon, 13 Mar 2023 19:53:52 +0100 Subject: [PATCH 09/13] Add useMutation to OwnerSecuredVariables --- .../settings/OwnerSecuredVariables.tsx | 22 +++++++++---------- 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/src/components/settings/OwnerSecuredVariables.tsx b/src/components/settings/OwnerSecuredVariables.tsx index f4927d0bf..65f31c5a8 100644 --- a/src/components/settings/OwnerSecuredVariables.tsx +++ b/src/components/settings/OwnerSecuredVariables.tsx @@ -1,6 +1,5 @@ import React, { useState } from 'react'; -import environment from '../../createRelayEnvironment'; -import { commitMutation, useFragment } from 'react-relay'; +import { useMutation, useFragment } from 'react-relay'; import { graphql } from 'babel-plugin-relay/macro'; import Button from '@mui/material/Button'; import Card from '@mui/material/Card'; @@ -11,19 +10,12 @@ import FormControl from '@mui/material/FormControl'; import CopyPasteField from '../common/CopyPasteField'; import TextField from '@mui/material/TextField'; import { + OwnerSecuredVariablesMutation, OwnerSecuredVariablesMutationResponse, OwnerSecuredVariablesMutationVariables, } from './__generated__/OwnerSecuredVariablesMutation.graphql'; import { OwnerSecuredVariables_info$key } from './__generated__/OwnerSecuredVariables_info.graphql'; -const securedVariableMutation = graphql` - mutation OwnerSecuredVariablesMutation($input: OwnerSecuredVariableInput!) { - securedOwnerVariable(input: $input) { - variableName - } - } -`; - interface Props { info: OwnerSecuredVariables_info$key; } @@ -50,6 +42,13 @@ export default function OwnerSecuredVariables(props: Props) { securedComponent = ; } + const [commitSecuredVariableMutation] = useMutation(graphql` + mutation OwnerSecuredVariablesMutation($input: OwnerSecuredVariableInput!) { + securedOwnerVariable(input: $input) { + variableName + } + } + `); function encryptCurrentValue() { const variables: OwnerSecuredVariablesMutationVariables = { input: { @@ -60,8 +59,7 @@ export default function OwnerSecuredVariables(props: Props) { }, }; - commitMutation(environment, { - mutation: securedVariableMutation, + commitSecuredVariableMutation({ variables: variables, onCompleted: (response: OwnerSecuredVariablesMutationResponse, errors) => { if (errors) { From fa70c9103f3d4eb64400d4df350703a6ef3367a2 Mon Sep 17 00:00:00 2001 From: Ekaterina Martyshevskaia <74831191+katermart@users.noreply.github.com> Date: Mon, 13 Mar 2023 19:55:30 +0100 Subject: [PATCH 10/13] Add useFragment to TaskListRow --- src/components/tasks/TaskListRow.tsx | 43 ++++++++++++++-------------- 1 file changed, 22 insertions(+), 21 deletions(-) diff --git a/src/components/tasks/TaskListRow.tsx b/src/components/tasks/TaskListRow.tsx index b50756b56..e8a68fc7a 100644 --- a/src/components/tasks/TaskListRow.tsx +++ b/src/components/tasks/TaskListRow.tsx @@ -7,13 +7,13 @@ import Chip from '@mui/material/Chip'; import TaskNameChip from '../chips/TaskNameChip'; import TaskDurationChip from '../chips/TaskDurationChip'; import { shorten } from '../../utils/text'; -import { createFragmentContainer } from 'react-relay'; +import { useFragment } from 'react-relay'; import { graphql } from 'babel-plugin-relay/macro'; import { navigateTaskHelper } from '../../utils/navigateHelper'; import { makeStyles } from '@mui/styles'; import classNames from 'classnames'; import TaskCreatedChip from '../chips/TaskCreatedChip'; -import { TaskListRow_task } from './__generated__/TaskListRow_task.graphql'; +import { TaskListRow_task$key } from './__generated__/TaskListRow_task.graphql'; import { isTaskFinalStatus } from '../../utils/status'; import { useTaskStatusColorMapping } from '../../utils/colors'; import { Box, Tooltip } from '@mui/material'; @@ -51,16 +51,33 @@ const useStyles = makeStyles(theme => { }); interface Props { - task: TaskListRow_task; + task: TaskListRow_task$key; showCreation: boolean; durationBeforeScheduling?: number; overallDuration?: number; } -function TaskListRow(props: Props) { +export default function TaskListRow(props: Props) { + let task = useFragment( + graphql` + fragment TaskListRow_task on Task { + id + status + executingTimestamp + scheduledTimestamp + finalStatusTimestamp + ...TaskDurationChip_task + ...TaskNameChip_task + ...TaskCreatedChip_task + uniqueLabels + } + `, + props.task, + ); + let navigate = useNavigate(); let colorMapping = useTaskStatusColorMapping(); - let { task, durationBeforeScheduling, overallDuration } = props; + let { durationBeforeScheduling, overallDuration } = props; let classes = useStyles(); let progress = null; if (isTaskFinalStatus(task.status) && overallDuration && task.executingTimestamp) { @@ -136,19 +153,3 @@ function TaskListRow(props: Props) { ); } - -export default createFragmentContainer(TaskListRow, { - task: graphql` - fragment TaskListRow_task on Task { - id - status - executingTimestamp - scheduledTimestamp - finalStatusTimestamp - ...TaskDurationChip_task - ...TaskNameChip_task - ...TaskCreatedChip_task - uniqueLabels - } - `, -}); From 8131c6c369f459ed8df06d7de33d5afd2b6f38fa Mon Sep 17 00:00:00 2001 From: Ekaterina Martyshevskaia <74831191+katermart@users.noreply.github.com> Date: Mon, 13 Mar 2023 20:28:15 +0100 Subject: [PATCH 11/13] Add useFragment to DeliveryRow --- src/components/webhooks/DeliveryRow.tsx | 34 ++++++++++++------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/src/components/webhooks/DeliveryRow.tsx b/src/components/webhooks/DeliveryRow.tsx index 66190dba9..f98fd4b5b 100644 --- a/src/components/webhooks/DeliveryRow.tsx +++ b/src/components/webhooks/DeliveryRow.tsx @@ -3,14 +3,14 @@ import React, { useState } from 'react'; import TableCell from '@mui/material/TableCell'; import TableRow from '@mui/material/TableRow'; import Chip from '@mui/material/Chip'; -import { createFragmentContainer } from 'react-relay'; +import { useFragment } from 'react-relay'; import { graphql } from 'babel-plugin-relay/macro'; import { makeStyles } from '@mui/styles'; import ReportIcon from '@mui/icons-material/Report'; import SendIcon from '@mui/icons-material/Send'; import classNames from 'classnames'; import DeliveryInfoDialog from './DeliveryInfoDialog'; -import { DeliveryRow_delivery } from './__generated__/DeliveryRow_delivery.graphql'; +import { DeliveryRow_delivery$key } from './__generated__/DeliveryRow_delivery.graphql'; import Avatar from '@mui/material/Avatar'; import { useTheme } from '@mui/material'; @@ -29,14 +29,26 @@ const useStyles = makeStyles(theme => { }); interface Props { - delivery: DeliveryRow_delivery; + delivery: DeliveryRow_delivery$key; } -function DeliveryRow(props: Props) { +export default function DeliveryRow(props: Props) { + let delivery = useFragment( + graphql` + fragment DeliveryRow_delivery on WebHookDelivery { + id + timestamp + response { + status + } + } + `, + props.delivery, + ); + let [showDetails, setShowDetails] = useState(false); let theme = useTheme(); - let { delivery } = props; let classes = useStyles(); let success = 200 <= delivery.response.status && delivery.response.status < 300; @@ -68,15 +80,3 @@ function DeliveryRow(props: Props) { ); } - -export default createFragmentContainer(DeliveryRow, { - delivery: graphql` - fragment DeliveryRow_delivery on WebHookDelivery { - id - timestamp - response { - status - } - } - `, -}); From 375b6cfc12670ca02053f6e0055a69d29ed7200b Mon Sep 17 00:00:00 2001 From: Ekaterina Martyshevskaia <74831191+katermart@users.noreply.github.com> Date: Mon, 13 Mar 2023 20:38:46 +0100 Subject: [PATCH 12/13] Add useLazyLoadQuery to DeliveryInfoDialogLazyContent --- .../webhooks/DeliveryInfoDialog.tsx | 7 ++- .../DeliveryInfoDialogLazyContent.tsx | 52 ++++++++----------- 2 files changed, 27 insertions(+), 32 deletions(-) diff --git a/src/components/webhooks/DeliveryInfoDialog.tsx b/src/components/webhooks/DeliveryInfoDialog.tsx index bfa9c8de7..8270d39a4 100644 --- a/src/components/webhooks/DeliveryInfoDialog.tsx +++ b/src/components/webhooks/DeliveryInfoDialog.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { Suspense } from 'react'; import DialogTitle from '@mui/material/DialogTitle'; import Dialog from '@mui/material/Dialog'; import DeliveryInfoDialogLazyContent from './DeliveryInfoDialogLazyContent'; @@ -6,6 +6,7 @@ import DialogActions from '@mui/material/DialogActions/DialogActions'; import Button from '@mui/material/Button/Button'; import { DeliveryRow_delivery } from './__generated__/DeliveryRow_delivery.graphql'; import { UnspecifiedCallbackFunction } from '../../utils/utility-types'; +import CirrusLinearProgress from './../common/CirrusLinearProgress'; interface Props { delivery: DeliveryRow_delivery; @@ -19,7 +20,9 @@ export default function DeliveryInfoDialog(props: Props) { return ( Delivery Info for {delivery.id} - + }> + +