78113 allow regenerate deploy key and secret (#272)

* Added button regenerate deploy key

* Add generate deploy key button

* Fixed effects

* Updated changed application

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,21 +14,34 @@ 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;
 
 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 = (
     <span>
       Select this option if your project is hosted on multiple repositories
@@ -47,6 +60,28 @@ export const ConfigureApplicationGithub = ({
     </span>
   );
 
+  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 (
     <div className="configure-application-github">
       <p>To integrate with GitHub you must add a deploy key and a webhook</p>
@@ -74,12 +109,37 @@ export const ConfigureApplicationGithub = ({
               <li>
                 Copy and paste this key:
                 <Code copy wrap>
-                  {app.publicKey}
+                  {deployKey}
                 </Code>
               </li>
               <li>Press "Add key"</li>
             </ol>
           </div>
+          <div className="o-body-text">
+            <div className="o-action-bar">
+              {saveState.status === requestStates.IN_PROGRESS && (
+                <Spinner>Regenerating…</Spinner>
+              )}
+              {saveState.status === requestStates.FAILURE && (
+                <Alert type="danger">
+                  Failed to regenerate deploy key and webhook secret.
+                  {saveState.error}
+                </Alert>
+              )}
+              {
+                <Button
+                  onClick={() => saveDeployKeySetting()}
+                  btnType="danger"
+                  disabled={
+                    savedDeployKey !== deployKey ||
+                    saveState.status === requestStates.IN_PROGRESS
+                  }
+                >
+                  Regenerate deploy key and webhook secret
+                </Button>
+              }
+            </div>
+          </div>
         </Toggler>
       </Panel>
       <Panel>
@@ -135,9 +195,9 @@ export const ConfigureApplicationGithub = ({
                   </li>
                   <li>
                     The Shared Secret for this application is{' '}
-                    <code>{app.sharedSecret}</code>{' '}
+                    <code>{sharedSecret}</code>{' '}
                     <Button
-                      onClick={() => copyToClipboard(app.sharedSecret)}
+                      onClick={() => copyToClipboard(sharedSecret)}
                       btnType={['default', 'tiny']}
                     >
                       Copy

src/components/page-configuration/change-machine-user-form.js

@@ -20,7 +20,9 @@ export const ChangeMachineUserForm = (props) => {
     props.appName
   );
 
-  useEffect(() => setMachineUser(props.machineUser), [props.machineUser]);
+  useEffect(() => {
+    setMachineUser(props.machineUser);
+  }, [props.machineUser]);
 
   useEffect(() => {
     if (saveState.status === requestStates.SUCCESS) {

src/components/page-configuration/index.js

@@ -107,6 +107,7 @@ class PageConfiguration extends React.Component {
                   startCollapsed
                   deployKeyTitle="Deploy key"
                   webhookTitle="Webhook"
+                  onDeployKeyChange={refreshApp}
                 />
               </section>
               <section>

src/components/page-configuration/use-regenerate-deploy-key-and-secret.js

@@ -0,0 +1,14 @@
+import { usePostJson } from '../../effects';
+var phraseit = require('phraseit');
+
+const useRegenerateDeployKeyAndSecret = (appName) => {
+  const path = `/applications/${appName}/regenerate-deploy-key`;
+  var sharedSecret = phraseit.make('{{an_adjective}} {{adjective}} {{noun}}');
+  return usePostJson(path, () => {
+    return {
+      sharedSecret: sharedSecret,
+    };
+  });
+};
+
+export default useRegenerateDeployKeyAndSecret;