Merge pull request #14631 from Mylanos/CONSOLE-4077-Address-tech-debt…

…-in-BasicAuthSubform-component CONSOLE-4077: Refactor BasicAuthSubform to be functional component
openshift · Jan 9, 2025 · e4649ad · e4649ad
2 parents 10c0bd8 + ee8c81c
commit e4649ad
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 80 deletions.
diff --git a/frontend/public/components/secrets/create-secret/BasicAuthSubform.tsx b/frontend/public/components/secrets/create-secret/BasicAuthSubform.tsx
@@ -1,89 +1,65 @@
 import * as React from 'react';
-import { withTranslation } from 'react-i18next';
-import { WithT } from 'i18next';
-import { SecretStringData } from './types';
+import { useTranslation } from 'react-i18next';
+import { SecretChangeData, SecretStringData } from './types';
 
-class BasicAuthSubformWithTranslation extends React.Component<
-  BasicAuthSubformProps & WithT,
-  BasicAuthSubformState
-> {
-  constructor(props) {
-    super(props);
-    this.state = {
-      username: this.props.stringData.username || '',
-      password: this.props.stringData.password || '',
-    };
-    this.changeData = this.changeData.bind(this);
-  }
-  changeData(event) {
-    this.setState(
-      {
-        [event.target.name]: event.target.value,
-      } as BasicAuthSubformState,
-      () => this.props.onChange(this.state),
-    );
-  }
+export const BasicAuthSubform: React.FC<BasicAuthSubformProps> = ({ onChange, stringData }) => {
+  const { t } = useTranslation();
 
-  render() {
-    const { t } = this.props;
-    return (
-      <>
-        <div className="form-group">
-          <label className="control-label" htmlFor="username">
-            {t('public~Username')}
-          </label>
-          <div>
-            <input
-              className="pf-v5-c-form-control"
-              id="username"
-              data-test="secret-username"
-              aria-describedby="username-help"
-              type="text"
-              name="username"
-              onChange={this.changeData}
-              value={this.state.username}
-            />
-            <p className="help-block" id="username-help">
-              {t('public~Optional username for Git authentication.')}
-            </p>
-          </div>
+  const changeData = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = event.target;
+    onChange({ ...stringData, [name]: value });
+  };
+
+  return (
+    <>
+      <div className="form-group">
+        <label className="control-label" htmlFor="username">
+          {t('public~Username')}
+        </label>
+        <div>
+          <input
+            className="pf-v5-c-form-control"
+            id="username"
+            data-test="secret-username"
+            aria-describedby="username-help"
+            type="text"
+            name="username"
+            onChange={changeData}
+            value={stringData.username}
+          />
+          <p className="help-block" id="username-help">
+            {t('public~Optional username for Git authentication.')}
+          </p>
         </div>
-        <div className="form-group">
-          <label className="control-label co-required" htmlFor="password">
-            {t('public~Password or token')}
-          </label>
-          <div>
-            <input
-              className="pf-v5-c-form-control"
-              id="password"
-              data-test="secret-password"
-              aria-describedby="password-help"
-              type="password"
-              name="password"
-              onChange={this.changeData}
-              value={this.state.password}
-              required
-            />
-            <p className="help-block" id="password-help">
-              {t(
-                'public~Password or token for Git authentication. Required if a ca.crt or .gitconfig file is not specified.',
-              )}
-            </p>
-          </div>
+      </div>
+      <div className="form-group">
+        <label className="control-label co-required" htmlFor="password">
+          {t('public~Password or token')}
+        </label>
+        <div>
+          <input
+            className="pf-v5-c-form-control"
+            id="password"
+            data-test="secret-password"
+            aria-describedby="password-help"
+            type="password"
+            name="password"
+            onChange={changeData}
+            value={stringData.password}
+            required
+          />
+          <p className="help-block" id="password-help">
+            {t(
+              'public~Password or token for Git authentication. Required if a ca.crt or .gitconfig file is not specified.',
+            )}
+          </p>
         </div>
-      </>
-    );
-  }
-}
-
-export const BasicAuthSubform = withTranslation()(BasicAuthSubformWithTranslation);
-
-type BasicAuthSubformState = {
-  username: string;
-  password: string;
+      </div>
+    </>
+  );
 };
 
 type BasicAuthSubformProps = {
-  onChange: Function;
+  onChange: (stringData: SecretChangeData) => void;
   stringData: SecretStringData;
 };
diff --git a/frontend/public/components/secrets/create-secret/types.ts b/frontend/public/components/secrets/create-secret/types.ts
@@ -24,7 +24,7 @@ export type SecretSubFormProps = {
   isCreate?: boolean;
 };
 
-type SecretChangeData = {
+export type SecretChangeData = {
   stringData?: SecretStringData;
   base64StringData?: SecretStringData;
 };