CONSOLE-4075: address tech debt in web hook secret form component

frontend/public/components/secrets/create-secret/WebHookSecretForm.tsx

@@ -1,83 +1,57 @@
 import * as React from 'react';
-import { withTranslation } from 'react-i18next';
-import { WithT } from 'i18next';
-import { generateSecret } from './utils';
-import { SecretStringData } from './types';
+import { useTranslation } from 'react-i18next';
+import { SecretSubFormProps } from './types';
 
-class WebHookSecretFormWithTranslation extends React.Component<
-  WebHookSecretFormProps & WithT,
-  WebHookSecretFormState
-> {
-  constructor(props) {
-    super(props);
-    this.state = {
-      stringData: { WebHookSecretKey: this.props.stringData.WebHookSecretKey || '' },
-    };
-    this.changeWebHookSecretkey = this.changeWebHookSecretkey.bind(this);
-    this.generateWebHookSecret = this.generateWebHookSecret.bind(this);
-  }
-  changeWebHookSecretkey(event) {
-    this.setState(
-      {
-        stringData: { WebHookSecretKey: event.target.value },
-      },
-      () => this.props.onChange(this.state),
-    );
-  }
-  generateWebHookSecret() {
-    this.setState(
-      {
-        stringData: { WebHookSecretKey: generateSecret() },
-      },
-      () => this.props.onChange(this.state),
-    );
-  }
-  render() {
-    const { t } = this.props;
-    return (
-      <div className="form-group">
-        <label className="control-label co-required" htmlFor="webhook-secret-key">
-          {t('public~Webhook secret key')}
-        </label>
-        <div className="pf-v5-c-input-group">
-          <input
-            className="pf-v5-c-form-control"
-            id="webhook-secret-key"
-            data-test="secret-key"
-            type="text"
-            name="webhookSecretKey"
-            onChange={this.changeWebHookSecretkey}
-            value={this.state.stringData.WebHookSecretKey}
-            aria-describedby="webhook-secret-help"
-            required
-          />
-          <button
-            type="button"
-            onClick={this.generateWebHookSecret}
-            className="pf-v5-c-button pf-m-tertiary"
-            data-test="webhook-generate-button"
-          >
-            {t('public~Generate')}
-          </button>
-        </div>
-        <p className="help-block" id="webhook-secret-help">
-          {t('public~Value of the secret will be supplied when invoking the webhook.')}
-        </p>
-      </div>
-    );
-  }
-}
+export const WebHookSecretForm: React.FC<SecretSubFormProps> = ({ onChange, stringData }) => {
+  const { t } = useTranslation();
 
-export const WebHookSecretForm = withTranslation()(WebHookSecretFormWithTranslation);
+  const handleWebHookSecretChange = (newSecret: string) => {
+    onChange({ stringData: { ...stringData, WebHookSecretKey: newSecret }, base64StringData: {} });
+  };
 
-type WebHookSecretFormState = {
-  stringData: SecretStringData;
-};
+  const changeWebHookSecretkey = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newSecret = event.target.value;
+    handleWebHookSecretChange(newSecret);
+  };
 
-type WebHookSecretFormProps = {
-  onChange: Function;
-  onError: Function;
-  onFormDisable: Function;
-  secretType: string;
-  stringData: SecretStringData;
+  const generateWebHookSecret = () => {
+    // the current (4.5.5) version of typescript does not have the randomUUID function defined, thus it produces ts errors
+    // but all of our supported browsers should have it defined, so we can safely ignore the error.
+    // randomUUID is firstly defined in 4.6 version of typescript, so once we upgrade to this or newer version we can remove this ts-ignore
+    // @ts-ignore-next-line
+    const newSecret = window.crypto.randomUUID();
+    handleWebHookSecretChange(newSecret);
+  };
+
+  return (
+    <div className="form-group">
+      <label className="control-label co-required" htmlFor="webhook-secret-key">
+        {t('public~Webhook secret key')}
+      </label>
+      <div className="pf-v5-c-input-group">
+        <input
+          className="pf-v5-c-form-control"
+          id="webhook-secret-key"
+          data-test="secret-key"
+          type="text"
+          name="webhookSecretKey"
+          onChange={changeWebHookSecretkey}
+          value={stringData.WebHookSecretKey}
+          aria-describedby="webhook-secret-help"
+          required
+        />
+        <button
+          type="button"
+          onClick={generateWebHookSecret}
+          className="pf-v5-c-button pf-m-tertiary"
+          data-test="webhook-generate-button"
+        >
+          {t('public~Generate')}
+        </button>
+      </div>
+      <p className="help-block" id="webhook-secret-help">
+        {t('public~Value of the secret will be supplied when invoking the webhook.')}
+      </p>
+    </div>
+  );
 };

frontend/public/components/secrets/create-secret/utils.ts

@@ -31,15 +31,6 @@ export const toTypeAbstraction = (secret): SecretTypeAbstraction => {
   }
 };
 
-export const generateSecret = (): string => {
-  // http://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript
-  const s4 = () =>
-    Math.floor((1 + Math.random()) * 0x10000)
-      .toString(16)
-      .substring(1);
-  return s4() + s4() + s4() + s4();
-};
-
 export const determineSecretType = (stringData): SecretType => {
   const dataKeys = _.keys(stringData).sort();
   if (_.isEqual(dataKeys, ['tls.crt', 'tls.key'])) {