Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migration of the remaining components #533

Merged
merged 6 commits into from
Mar 16, 2023
Merged

Migration of the remaining components #533

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c386c53
Add useFragment to WebHookSettings
ikatemart Mar 16, 2023
6c7541c
Add useMutation to WebHookSettings
ikatemart Mar 16, 2023
3bba9ce
Add useMutation to ActiveRepositoriesDrawer
ikatemart Mar 16, 2023
a910382
Add useMutation to PersistentWorkerPoolsList
ikatemart Mar 16, 2023
ee90aa8
Schema update
ikatemart Mar 16, 2023
d57970c
@deleteRecord
fkorotkov Mar 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion schema.gql
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,7 @@ input DeletePersistentWorkerPoolInput {
}

type DeletePersistentWorkerPoolPayload {
deletedPoolId: String!
deletedPoolId: ID!
deletedPool: PersistentWorkerPool!
clientMutationId: String
}
Expand Down Expand Up @@ -1001,6 +1001,7 @@ input SaveWebHookSettingsInput {
type SaveWebHookSettingsPayload {
error: String
info: OwnerInfo
settings: WebHookSettings
clientMutationId: String
}

Expand Down Expand Up @@ -1393,6 +1394,7 @@ type WebHookDeliveryResponse {
}

type WebHookSettings {
ownerUid: ID
webhookURL: String
maskedSecretToken: String
}
142 changes: 53 additions & 89 deletions src/components/webhooks/WebHookSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React, { useState } from 'react';
import environment from '../../createRelayEnvironment';
import { commitMutation, createPaginationContainer, RelayPaginationProp } from 'react-relay';
import { useMutation, useFragment } from 'react-relay';
import { graphql } from 'babel-plugin-relay/macro';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
Expand All @@ -15,29 +14,16 @@ import IconButton from '@mui/material/IconButton';
import classNames from 'classnames';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import DeliveriesList from './DeliveriesList';
import { WebHookSettings_info } from './__generated__/WebHookSettings_info.graphql';
import { WebHookSettings_info$key } from './__generated__/WebHookSettings_info.graphql';
import FormHelperText from '@mui/material/FormHelperText';
import sjcl from 'sjcl/sjcl.js';
import {
WebHookSettingsMutation,
SaveWebHookSettingsInput,
WebHookSettingsMutationVariables,
} from './__generated__/WebHookSettingsMutation.graphql';
import { Link } from '@mui/material';

const securedVariableMutation = graphql`
mutation WebHookSettingsMutation($input: SaveWebHookSettingsInput!) {
saveWebHookSettings(input: $input) {
error
info {
webhookSettings {
webhookURL
maskedSecretToken
}
}
}
}
`;

const useStyles = makeStyles(theme => {
return {
expand: {
Expand All @@ -54,23 +40,56 @@ const useStyles = makeStyles(theme => {
});

interface Props {
info: WebHookSettings_info;
relay: RelayPaginationProp;
info: WebHookSettings_info$key;
}

function WebHookSettings(props: Props) {
export default function WebHookSettings(props: Props) {
let info = useFragment(
graphql`
fragment WebHookSettings_info on OwnerInfo {
platform
uid
webhookSettings {
webhookURL
maskedSecretToken
}
webhookDeliveries(last: 50) {
edges {
node {
...DeliveryRow_delivery
}
}
}
}
`,
props.info,
);

let [expanded, setExpanded] = useState(false);
let [webhookURL, setWebhookURL] = useState(props.info.webhookSettings.webhookURL || '');
let [webhookURL, setWebhookURL] = useState(info.webhookSettings.webhookURL || '');
let [secretToken, setSecretToken] = useState('');
let { info } = props;
let classes = useStyles();

const [commitSecuredVariableMutation] = useMutation<WebHookSettingsMutation>(graphql`
mutation WebHookSettingsMutation($input: SaveWebHookSettingsInput!) {
saveWebHookSettings(input: $input) {
error
info {
uid
webhookSettings {
webhookURL
maskedSecretToken
}
}
}
}
`);
function saveWebhookSettings() {
const variables: WebHookSettingsMutationVariables = {
input: {
clientMutationId: webhookURL,
platform: props.info.platform,
ownerUid: props.info.uid,
platform: info.platform,
ownerUid: info.uid,
webhookURL: webhookURL,
},
};
Expand All @@ -81,35 +100,33 @@ function WebHookSettings(props: Props) {
variables.input['secretToken'] = secretToken;
}

commitMutation(environment, {
mutation: securedVariableMutation,
commitSecuredVariableMutation({
variables: variables,
onError: err => console.error(err),
});
}

function resetSecretToken() {
let input: SaveWebHookSettingsInput = {
clientMutationId: `reset-${props.info.webhookSettings.maskedSecretToken}`,
platform: props.info.platform,
ownerUid: props.info.uid,
webhookURL: props.info.webhookSettings.webhookURL,
clientMutationId: `reset-${info.webhookSettings.maskedSecretToken}`,
platform: info.platform,
ownerUid: info.uid,
webhookURL: info.webhookSettings.webhookURL,
secretToken: '',
};

commitMutation(environment, {
mutation: securedVariableMutation,
commitSecuredVariableMutation({
variables: { input },
onError: err => console.error(err),
});
}

const hasTokenSet = props.info.webhookSettings != null && props.info.webhookSettings.maskedSecretToken !== '';
const hasTokenSet = info.webhookSettings != null && info.webhookSettings.maskedSecretToken !== '';
const secretTokenControl = hasTokenSet ? (
<FormControl style={{ width: '100%' }}>
<FormHelperText>
Currently the secret token is set to <code>{props.info.webhookSettings.maskedSecretToken}</code>, reset it first
to set a new one:
Currently the secret token is set to <code>{info.webhookSettings.maskedSecretToken}</code>, reset it first to
set a new one:
</FormHelperText>
<Button variant="contained" onClick={resetSecretToken}>
Reset Secret Token
Expand Down Expand Up @@ -140,8 +157,7 @@ function WebHookSettings(props: Props) {
</FormControl>
);

const webhookURLUnchanged =
props.info.webhookSettings != null && props.info.webhookSettings.webhookURL === webhookURL;
const webhookURLUnchanged = info.webhookSettings != null && info.webhookSettings.webhookURL === webhookURL;
const secretTokenUnchanged = hasTokenSet || secretToken === '';

return (
Expand Down Expand Up @@ -194,55 +210,3 @@ function WebHookSettings(props: Props) {
</Card>
);
}

export default createPaginationContainer(
WebHookSettings as typeof WebHookSettings,
{
info: graphql`
fragment WebHookSettings_info on OwnerInfo
@argumentDefinitions(count: { type: "Int", defaultValue: 50 }, cursor: { type: "String" }) {
platform
uid
webhookSettings {
webhookURL
maskedSecretToken
}
webhookDeliveries(last: $count, after: $cursor) @connection(key: "WebHookSettings_webhookDeliveries") {
edges {
node {
...DeliveryRow_delivery
}
}
}
}
`,
},
{
direction: 'forward',
getConnectionFromProps(props: any) {
return props.info && props.info.deliveries;
},
// This is also the default implementation of `getFragmentVariables` if it isn't provided.
getFragmentVariables(prevVars, totalCount) {
return {
...prevVars,
count: totalCount,
};
},
getVariables(props, { count, cursor }, fragmentVariables) {
return {
count: count,
cursor: cursor,
platform: props.info.platform,
uid: props.info.uid,
};
},
query: graphql`
query WebHookSettingsQuery($platform: String!, $uid: ID!, $count: Int!, $cursor: String) {
ownerInfo(platform: $platform, uid: $uid) {
...WebHookSettings_info @arguments(count: $count, cursor: $cursor)
}
}
`,
},
);
55 changes: 24 additions & 31 deletions src/components/workers/PersistentWorkerPoolsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@ import Typography from '@mui/material/Typography';
import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import Button from '@mui/material/Button';
import { commitMutation } from 'react-relay';
import environment from '../../createRelayEnvironment';
import { useMutation } from 'react-relay';
import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
Expand All @@ -18,6 +17,7 @@ import Input from '@mui/material/Input';
import DialogActions from '@mui/material/DialogActions';
import { graphql } from 'babel-plugin-relay/macro';
import {
PersistentWorkerPoolsListCreateMutation,
CreatePersistentWorkerPoolInput,
PersistentWorkerPoolsListCreateMutationResponse,
} from './__generated__/PersistentWorkerPoolsListCreateMutation.graphql';
Expand All @@ -33,7 +33,10 @@ import {
ListItemText,
} from '@mui/material';
import DeleteIcon from '@mui/icons-material/Delete';
import { PersistentWorkerPoolsListDeleteMutationVariables } from './__generated__/PersistentWorkerPoolsListDeleteMutation.graphql';
import {
PersistentWorkerPoolsListDeleteMutation,
PersistentWorkerPoolsListDeleteMutationVariables,
} from './__generated__/PersistentWorkerPoolsListDeleteMutation.graphql';
import PoolVisibilityIcon from '../icons/PoolVisibilityIcon';
import { useNavigate } from 'react-router-dom';

Expand All @@ -46,34 +49,26 @@ interface PoolsListProps {
}>;
}

const deletePoolMutation = graphql`
mutation PersistentWorkerPoolsListDeleteMutation($input: DeletePersistentWorkerPoolInput!) {
deletePersistentWorkerPool(input: $input) {
deletedPoolId
}
}
`;

function PersistentWorkerPoolsList(props: PoolsListProps) {
let navigate = useNavigate();
let [openDialog, setOpenDialog] = useState(false);

const [commitDeleteMutation] = useMutation<PersistentWorkerPoolsListDeleteMutation>(graphql`
mutation PersistentWorkerPoolsListDeleteMutation($input: DeletePersistentWorkerPoolInput!) {
deletePersistentWorkerPool(input: $input) {
deletedPoolId @deleteRecord
}
}
`);
let deletePool = poolId => {
const variables: PersistentWorkerPoolsListDeleteMutationVariables = {
input: {
clientMutationId: 'delete-persistent-worker-pool-' + poolId,
poolId: poolId,
},
};
commitMutation(environment, {
mutation: deletePoolMutation,
commitDeleteMutation({
variables: variables,
configs: [
{
type: 'NODE_DELETE',
deletedIDFieldName: 'deletedPoolId',
},
],
onError: err => console.log(err),
});
};
Expand Down Expand Up @@ -123,30 +118,28 @@ interface DialogProps {
onClose(...args: any[]): void;
}

const createPoolMutation = graphql`
mutation PersistentWorkerPoolsListCreateMutation($input: CreatePersistentWorkerPoolInput!) {
createPersistentWorkerPool(input: $input) {
pool {
id
}
}
}
`;

function CreateNewPersistentWorkerPoolDialog(props: DialogProps) {
let navigate = useNavigate();
let [name, setName] = useState('');
let [enabledForPublic, setEnabledForPublic] = useState(true);

const [commitCreatePoolMutation] = useMutation<PersistentWorkerPoolsListCreateMutation>(graphql`
mutation PersistentWorkerPoolsListCreateMutation($input: CreatePersistentWorkerPoolInput!) {
createPersistentWorkerPool(input: $input) {
pool {
id
}
}
}
`);
function createPool() {
const input: CreatePersistentWorkerPoolInput = {
clientMutationId: 'create-persistent-worker-pool-' + props.ownerUid,
ownerUid: props.ownerUid,
name: name,
enabledForPublic: enabledForPublic,
};
commitMutation(environment, {
mutation: createPoolMutation,
commitCreatePoolMutation({
variables: { input: input },
onCompleted: (response: PersistentWorkerPoolsListCreateMutationResponse, errors) => {
if (errors) {
Expand Down
Loading