diff --git a/src/components/configure-application-github/index.js b/src/components/configure-application-github/index.js index c341031f5..2bbd0f644 100644 --- a/src/components/configure-application-github/index.js +++ b/src/components/configure-application-github/index.js @@ -1,5 +1,5 @@ import PropTypes from 'prop-types'; -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import Button from '../button'; import Code from '../code'; @@ -14,6 +14,10 @@ import configHandler from '../../utils/config'; import './style.css'; import externalUrls from '../../externalUrls'; +import requestStates from '../../state/state-utils/request-states'; +import Spinner from '../spinner'; +import Alert from '../alert'; +import useRegenerateDeployKeyAndSecret from '../page-configuration/use-regenerate-deploy-key-and-secret'; const imageDeployKey = require('./deploy-key02.png').default; const imageWebhook = require('./webhook02.png').default; @@ -21,14 +25,23 @@ const imageWebhook = require('./webhook02.png').default; const radixZoneDNS = configHandler.getConfig(configKeys.RADIX_CLUSTER_BASE); const webhookURL = `https://webhook.${radixZoneDNS}/events/github`; -export const ConfigureApplicationGithub = ({ - app, - startVisible, - deployKeyTitle, - webhookTitle, - useOtherCiToolOptionVisible, -}) => { +export const ConfigureApplicationGithub = (props) => { + const { + app, + startVisible, + deployKeyTitle, + webhookTitle, + useOtherCiToolOptionVisible, + onDeployKeyChange, + } = props; const [useOtherCiTool, setUseOtherCiTool] = useState(false); + const [deployKey, setDeployKey] = useState(app.publicKey); + const [sharedSecret, setSharedSecret] = useState(app.sharedSecret); + const [savedDeployKey, setSavedDeployKey] = useState(deployKey); + const [savedSharedSecret, setSavedSharedSecret] = useState(sharedSecret); + const [saveState, saveFunc, resetSaveState] = useRegenerateDeployKeyAndSecret( + app.name + ); const deployOnlyHelp = ( Select this option if your project is hosted on multiple repositories @@ -47,6 +60,28 @@ export const ConfigureApplicationGithub = ({ ); + useEffect(() => { + setDeployKey(savedDeployKey); + }, [savedDeployKey]); + + useEffect(() => { + setSharedSecret(savedSharedSecret); + }, [savedSharedSecret]); + + useEffect(() => { + if (saveState.status !== requestStates.SUCCESS) { + return; + } + setSavedDeployKey(saveState.data.publicDeployKey); + setSavedSharedSecret(saveState.data.sharedSecret); + resetSaveState(); + onDeployKeyChange(app.name); + }, [saveState, resetSaveState, onDeployKeyChange]); + + const saveDeployKeySetting = () => { + saveFunc(); + }; + return (

To integrate with GitHub you must add a deploy key and a webhook

@@ -74,12 +109,37 @@ export const ConfigureApplicationGithub = ({
  • Copy and paste this key: - {app.publicKey} + {deployKey}
  • Press "Add key"
  • +
    +
    + {saveState.status === requestStates.IN_PROGRESS && ( + Regenerating… + )} + {saveState.status === requestStates.FAILURE && ( + + Failed to regenerate deploy key and webhook secret. + {saveState.error} + + )} + { + + } +
    +
    @@ -135,9 +195,9 @@ export const ConfigureApplicationGithub = ({
  • The Shared Secret for this application is{' '} - {app.sharedSecret}{' '} + {sharedSecret}{' '}