From 671dffa5873adfc263a575341e5949a9debd5e72 Mon Sep 17 00:00:00 2001
From: Sharon Gratch <sgratch@redhat.com>
Date: Mon, 7 Oct 2024 11:47:03 +0300
Subject: [PATCH] Wrap all password/token fields (with hidden content option)
 with InputGroup item.

Reference: https://issues.redhat.com/browse/MTV-1572

After migrating to Patternfly 5, all the password/token fields in all forms that include
the 'hidden content button' field, were splitted into 2 lines.
The button was pushed to next line.

For fixing, need to wrap the field's entries with the InputGroup item.

Signed-off-by: Sharon Gratch <sgratch@redhat.com>
---
 .../components/edit/EsxiCredentialsEdit.tsx   | 46 +++++++++++--------
 .../edit/OpenshiftCredentialsEdit.tsx         | 46 +++++++++++--------
 ...ionCredentialNameSecretFieldsFormGroup.tsx | 40 ++++++++--------
 .../ApplicationWithCredentialsIDFormGroup.tsx | 40 ++++++++--------
 .../PasswordSecretFieldsFormGroup.tsx         | 38 +++++++--------
 .../TokenWithUserIDSecretFieldsFormGroup.tsx  | 40 ++++++++--------
 ...TokenWithUsernameSecretFieldsFormGroup.tsx | 40 ++++++++--------
 .../components/edit/OvirtCredentialsEdit.tsx  | 46 +++++++++++--------
 .../edit/VCenterCredentialsEdit.tsx           | 46 +++++++++++--------
 .../tabs/Hosts/modals/VSphereNetworkModal.tsx | 29 ++++++------
 10 files changed, 232 insertions(+), 179 deletions(-)

diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/EsxiCredentialsEdit.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/EsxiCredentialsEdit.tsx
index 672e27813..326325ae2 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/EsxiCredentialsEdit.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/EsxiCredentialsEdit.tsx
@@ -5,7 +5,15 @@ import { CertificateUpload } from 'src/modules/Providers/utils/components/Certif
 import { ForkliftTrans, useForkliftTranslation } from 'src/utils/i18n';
 
 import { FormGroupWithHelpText } from '@kubev2v/common';
-import { Button, Divider, Form, Popover, Switch, TextInput } from '@patternfly/react-core';
+import {
+  Button,
+  Divider,
+  Form,
+  InputGroup,
+  Popover,
+  Switch,
+  TextInput,
+} from '@patternfly/react-core';
 import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
 import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
@@ -158,23 +166,25 @@ export const EsxiCredentialsEdit: React.FC<EditComponentProps> = ({ secret, onCh
         helperTextInvalid={state.validation.password.msg}
         validated={state.validation.password.type}
       >
-        <TextInput
-          spellCheck="false"
-          className="pf-u-w-75"
-          isRequired
-          type={state.passwordHidden ? 'password' : 'text'}
-          aria-label="Password input"
-          onChange={(e, v) => onChangePassword(v, e)}
-          value={password}
-          validated={state.validation.password.type}
-        />
-        <Button
-          variant="control"
-          onClick={onClickTogglePassword}
-          aria-label={state.passwordHidden ? 'Show password' : 'Hide password'}
-        >
-          {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
-        </Button>
+        <InputGroup>
+          <TextInput
+            spellCheck="false"
+            className="pf-u-w-75"
+            isRequired
+            type={state.passwordHidden ? 'password' : 'text'}
+            aria-label="Password input"
+            onChange={(e, v) => onChangePassword(v, e)}
+            value={password}
+            validated={state.validation.password.type}
+          />
+          <Button
+            variant="control"
+            onClick={onClickTogglePassword}
+            aria-label={state.passwordHidden ? 'Show password' : 'Hide password'}
+          >
+            {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
+          </Button>
+        </InputGroup>
       </FormGroupWithHelpText>
 
       <Divider />
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenshiftCredentialsEdit.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenshiftCredentialsEdit.tsx
index 953f76b73..a4331e724 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenshiftCredentialsEdit.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenshiftCredentialsEdit.tsx
@@ -5,7 +5,15 @@ import { CertificateUpload } from 'src/modules/Providers/utils/components/Certif
 import { ForkliftTrans, useForkliftTranslation } from 'src/utils/i18n';
 
 import { FormGroupWithHelpText } from '@kubev2v/common';
-import { Button, Divider, Form, Popover, Switch, TextInput } from '@patternfly/react-core';
+import {
+  Button,
+  Divider,
+  Form,
+  InputGroup,
+  Popover,
+  Switch,
+  TextInput,
+} from '@patternfly/react-core';
 import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
 import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
@@ -133,23 +141,25 @@ export const OpenshiftCredentialsEdit: React.FC<EditComponentProps> = ({ secret,
         helperTextInvalid={state.validation.token.msg}
         validated={state.validation.token.type}
       >
-        <TextInput
-          spellCheck="false"
-          className="pf-u-w-75"
-          isRequired
-          type={state.passwordHidden ? 'password' : 'text'}
-          aria-label="Token input"
-          onChange={(e, v) => onChangeToken(v, e)}
-          value={token}
-          validated={state.validation.token.type}
-        />
-        <Button
-          variant="control"
-          onClick={onClickTogglePassword}
-          aria-label={state.passwordHidden ? 'Show token' : 'Hide token'}
-        >
-          {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
-        </Button>
+        <InputGroup>
+          <TextInput
+            spellCheck="false"
+            className="pf-u-w-75"
+            isRequired
+            type={state.passwordHidden ? 'password' : 'text'}
+            aria-label="Token input"
+            onChange={(e, v) => onChangeToken(v, e)}
+            value={token}
+            validated={state.validation.token.type}
+          />
+          <Button
+            variant="control"
+            onClick={onClickTogglePassword}
+            aria-label={state.passwordHidden ? 'Show token' : 'Hide token'}
+          >
+            {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
+          </Button>
+        </InputGroup>
       </FormGroupWithHelpText>
 
       <Divider />
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEditFormGroups/ApplicationCredentialNameSecretFieldsFormGroup.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEditFormGroups/ApplicationCredentialNameSecretFieldsFormGroup.tsx
index 224015a02..6c669ab8a 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEditFormGroups/ApplicationCredentialNameSecretFieldsFormGroup.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEditFormGroups/ApplicationCredentialNameSecretFieldsFormGroup.tsx
@@ -4,7 +4,7 @@ import { openstackSecretFieldValidator, safeBase64Decode } from 'src/modules/Pro
 import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { FormGroupWithHelpText } from '@kubev2v/common';
-import { Button, TextInput } from '@patternfly/react-core';
+import { Button, InputGroup, TextInput } from '@patternfly/react-core';
 import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
 import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
 
@@ -113,24 +113,26 @@ export const ApplicationCredentialNameSecretFieldsFormGroup: React.FC<EditCompon
         helperTextInvalid={state.validation.applicationCredentialSecret.msg}
         validated={state.validation.applicationCredentialSecret.type}
       >
-        <TextInput
-          spellCheck="false"
-          className="pf-u-w-75"
-          isRequired
-          type={state.passwordHidden ? 'password' : 'text'}
-          id="applicationCredentialSecret"
-          name="applicationCredentialSecret"
-          value={applicationCredentialSecret}
-          onChange={(e, v) => onChangeFactory('applicationCredentialSecret')(v, e)}
-          validated={state.validation.applicationCredentialSecret.type}
-        />
-        <Button
-          variant="control"
-          onClick={togglePasswordHidden}
-          aria-label={state.passwordHidden ? 'Show password' : 'Hide password'}
-        >
-          {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
-        </Button>
+        <InputGroup>
+          <TextInput
+            spellCheck="false"
+            className="pf-u-w-75"
+            isRequired
+            type={state.passwordHidden ? 'password' : 'text'}
+            id="applicationCredentialSecret"
+            name="applicationCredentialSecret"
+            value={applicationCredentialSecret}
+            onChange={(e, v) => onChangeFactory('applicationCredentialSecret')(v, e)}
+            validated={state.validation.applicationCredentialSecret.type}
+          />
+          <Button
+            variant="control"
+            onClick={togglePasswordHidden}
+            aria-label={state.passwordHidden ? 'Show password' : 'Hide password'}
+          >
+            {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
+          </Button>
+        </InputGroup>
       </FormGroupWithHelpText>
 
       <FormGroupWithHelpText
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEditFormGroups/ApplicationWithCredentialsIDFormGroup.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEditFormGroups/ApplicationWithCredentialsIDFormGroup.tsx
index ab3c28397..c4bcd6971 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEditFormGroups/ApplicationWithCredentialsIDFormGroup.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEditFormGroups/ApplicationWithCredentialsIDFormGroup.tsx
@@ -4,7 +4,7 @@ import { openstackSecretFieldValidator, safeBase64Decode } from 'src/modules/Pro
 import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { FormGroupWithHelpText } from '@kubev2v/common';
-import { Button, TextInput } from '@patternfly/react-core';
+import { Button, InputGroup, TextInput } from '@patternfly/react-core';
 import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
 import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
 
@@ -109,24 +109,26 @@ export const ApplicationWithCredentialsIDFormGroup: React.FC<EditComponentProps>
         helperTextInvalid={state.validation.applicationCredentialSecret.msg}
         validated={state.validation.applicationCredentialSecret.type}
       >
-        <TextInput
-          spellCheck="false"
-          className="pf-u-w-75"
-          isRequired
-          type={state.passwordHidden ? 'password' : 'text'}
-          id="applicationCredentialSecret"
-          name="applicationCredentialSecret"
-          value={applicationCredentialSecret}
-          onChange={(e, v) => onChangeFactory('applicationCredentialSecret')(v, e)}
-          validated={state.validation.applicationCredentialSecret.type}
-        />
-        <Button
-          variant="control"
-          onClick={togglePasswordHidden}
-          aria-label={state.passwordHidden ? 'Show password' : 'Hide password'}
-        >
-          {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
-        </Button>
+        <InputGroup>
+          <TextInput
+            spellCheck="false"
+            className="pf-u-w-75"
+            isRequired
+            type={state.passwordHidden ? 'password' : 'text'}
+            id="applicationCredentialSecret"
+            name="applicationCredentialSecret"
+            value={applicationCredentialSecret}
+            onChange={(e, v) => onChangeFactory('applicationCredentialSecret')(v, e)}
+            validated={state.validation.applicationCredentialSecret.type}
+          />
+          <Button
+            variant="control"
+            onClick={togglePasswordHidden}
+            aria-label={state.passwordHidden ? 'Show password' : 'Hide password'}
+          >
+            {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
+          </Button>
+        </InputGroup>
       </FormGroupWithHelpText>
 
       <FormGroupWithHelpText
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEditFormGroups/PasswordSecretFieldsFormGroup.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEditFormGroups/PasswordSecretFieldsFormGroup.tsx
index 1fd7c6061..46906a552 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEditFormGroups/PasswordSecretFieldsFormGroup.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEditFormGroups/PasswordSecretFieldsFormGroup.tsx
@@ -4,7 +4,7 @@ import { openstackSecretFieldValidator, safeBase64Decode } from 'src/modules/Pro
 import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { FormGroupWithHelpText } from '@kubev2v/common';
-import { Button, TextInput } from '@patternfly/react-core';
+import { Button, InputGroup, TextInput } from '@patternfly/react-core';
 import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
 import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
 
@@ -105,23 +105,25 @@ export const PasswordSecretFieldsFormGroup: React.FC<EditComponentProps> = ({
         helperTextInvalid={state.validation.password.msg}
         validated={state.validation.password.type}
       >
-        <TextInput
-          spellCheck="false"
-          className="pf-u-w-75"
-          isRequired
-          type={state.passwordHidden ? 'password' : 'text'}
-          aria-label="Password input"
-          value={password}
-          onChange={(e, v) => onChangeFactory('password')(v, e)}
-          validated={state.validation.password.type}
-        />
-        <Button
-          variant="control"
-          onClick={togglePasswordHidden}
-          aria-label={state.passwordHidden ? 'Show password' : 'Hide password'}
-        >
-          {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
-        </Button>
+        <InputGroup>
+          <TextInput
+            spellCheck="false"
+            className="pf-u-w-75"
+            isRequired
+            type={state.passwordHidden ? 'password' : 'text'}
+            aria-label="Password input"
+            value={password}
+            onChange={(e, v) => onChangeFactory('password')(v, e)}
+            validated={state.validation.password.type}
+          />
+          <Button
+            variant="control"
+            onClick={togglePasswordHidden}
+            aria-label={state.passwordHidden ? 'Show password' : 'Hide password'}
+          >
+            {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
+          </Button>
+        </InputGroup>
       </FormGroupWithHelpText>
 
       <FormGroupWithHelpText
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEditFormGroups/TokenWithUserIDSecretFieldsFormGroup.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEditFormGroups/TokenWithUserIDSecretFieldsFormGroup.tsx
index 99c737aa0..b40ffc6d8 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEditFormGroups/TokenWithUserIDSecretFieldsFormGroup.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEditFormGroups/TokenWithUserIDSecretFieldsFormGroup.tsx
@@ -4,7 +4,7 @@ import { openstackSecretFieldValidator, safeBase64Decode } from 'src/modules/Pro
 import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { FormGroupWithHelpText } from '@kubev2v/common';
-import { Button, TextInput } from '@patternfly/react-core';
+import { Button, InputGroup, TextInput } from '@patternfly/react-core';
 import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
 import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
 
@@ -82,24 +82,26 @@ export const TokenWithUserIDSecretFieldsFormGroup: React.FC<EditComponentProps>
         helperTextInvalid={state.validation.token.msg}
         validated={state.validation.token.type}
       >
-        <TextInput
-          spellCheck="false"
-          className="pf-u-w-75"
-          isRequired
-          type={state.passwordHidden ? 'password' : 'text'}
-          id="token"
-          name="token"
-          value={token}
-          onChange={(e, v) => onChangeFactory('token')(v, e)}
-          validated={state.validation.token.type}
-        />
-        <Button
-          variant="control"
-          onClick={togglePasswordHidden}
-          aria-label={state.passwordHidden ? 'Show password' : 'Hide password'}
-        >
-          {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
-        </Button>
+        <InputGroup>
+          <TextInput
+            spellCheck="false"
+            className="pf-u-w-75"
+            isRequired
+            type={state.passwordHidden ? 'password' : 'text'}
+            id="token"
+            name="token"
+            value={token}
+            onChange={(e, v) => onChangeFactory('token')(v, e)}
+            validated={state.validation.token.type}
+          />
+          <Button
+            variant="control"
+            onClick={togglePasswordHidden}
+            aria-label={state.passwordHidden ? 'Show password' : 'Hide password'}
+          >
+            {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
+          </Button>
+        </InputGroup>
       </FormGroupWithHelpText>
 
       <FormGroupWithHelpText
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEditFormGroups/TokenWithUsernameSecretFieldsFormGroup.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEditFormGroups/TokenWithUsernameSecretFieldsFormGroup.tsx
index 03f3cfaa6..a45653692 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEditFormGroups/TokenWithUsernameSecretFieldsFormGroup.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEditFormGroups/TokenWithUsernameSecretFieldsFormGroup.tsx
@@ -4,7 +4,7 @@ import { openstackSecretFieldValidator, safeBase64Decode } from 'src/modules/Pro
 import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { FormGroupWithHelpText } from '@kubev2v/common';
-import { Button, TextInput } from '@patternfly/react-core';
+import { Button, InputGroup, TextInput } from '@patternfly/react-core';
 import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
 import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
 
@@ -84,24 +84,26 @@ export const TokenWithUsernameSecretFieldsFormGroup: React.FC<EditComponentProps
         helperTextInvalid={state.validation.token.msg}
         validated={state.validation.token.type}
       >
-        <TextInput
-          spellCheck="false"
-          className="pf-u-w-75"
-          isRequired
-          type={state.passwordHidden ? 'password' : 'text'}
-          id="token"
-          name="token"
-          value={token}
-          onChange={(e, v) => onChangeFactory('token')(v, e)}
-          validated={state.validation.token.type}
-        />
-        <Button
-          variant="control"
-          onClick={togglePasswordHidden}
-          aria-label={state.passwordHidden ? 'Show password' : 'Hide password'}
-        >
-          {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
-        </Button>
+        <InputGroup>
+          <TextInput
+            spellCheck="false"
+            className="pf-u-w-75"
+            isRequired
+            type={state.passwordHidden ? 'password' : 'text'}
+            id="token"
+            name="token"
+            value={token}
+            onChange={(e, v) => onChangeFactory('token')(v, e)}
+            validated={state.validation.token.type}
+          />
+          <Button
+            variant="control"
+            onClick={togglePasswordHidden}
+            aria-label={state.passwordHidden ? 'Show password' : 'Hide password'}
+          >
+            {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
+          </Button>
+        </InputGroup>
       </FormGroupWithHelpText>
 
       <FormGroupWithHelpText
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OvirtCredentialsEdit.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OvirtCredentialsEdit.tsx
index c21e55221..5a9ae4423 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OvirtCredentialsEdit.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OvirtCredentialsEdit.tsx
@@ -5,7 +5,15 @@ import { CertificateUpload } from 'src/modules/Providers/utils/components/Certif
 import { ForkliftTrans, useForkliftTranslation } from 'src/utils/i18n';
 
 import { FormGroupWithHelpText } from '@kubev2v/common';
-import { Button, Divider, Form, Popover, Switch, TextInput } from '@patternfly/react-core';
+import {
+  Button,
+  Divider,
+  Form,
+  InputGroup,
+  Popover,
+  Switch,
+  TextInput,
+} from '@patternfly/react-core';
 import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
 import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
@@ -164,23 +172,25 @@ export const OvirtCredentialsEdit: React.FC<EditComponentProps> = ({ secret, onC
         helperTextInvalid={state.validation.password.msg}
         validated={state.validation.password.type}
       >
-        <TextInput
-          spellCheck="false"
-          className="pf-u-w-75"
-          isRequired
-          type={state.passwordHidden ? 'password' : 'text'}
-          aria-label="Password input"
-          value={password}
-          validated={state.validation.password.type}
-          onChange={(e, v) => onChangePassword(v, e)}
-        />
-        <Button
-          variant="control"
-          onClick={onClickTogglePassword}
-          aria-label={state.passwordHidden ? 'Show password' : 'Hide password'}
-        >
-          {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
-        </Button>
+        <InputGroup>
+          <TextInput
+            spellCheck="false"
+            className="pf-u-w-75"
+            isRequired
+            type={state.passwordHidden ? 'password' : 'text'}
+            aria-label="Password input"
+            value={password}
+            validated={state.validation.password.type}
+            onChange={(e, v) => onChangePassword(v, e)}
+          />
+          <Button
+            variant="control"
+            onClick={onClickTogglePassword}
+            aria-label={state.passwordHidden ? 'Show password' : 'Hide password'}
+          >
+            {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
+          </Button>
+        </InputGroup>
       </FormGroupWithHelpText>
 
       <Divider />
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/VCenterCredentialsEdit.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/VCenterCredentialsEdit.tsx
index e9d00d76b..00bf93eb4 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/VCenterCredentialsEdit.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/VCenterCredentialsEdit.tsx
@@ -5,7 +5,15 @@ import { CertificateUpload } from 'src/modules/Providers/utils/components/Certif
 import { ForkliftTrans, useForkliftTranslation } from 'src/utils/i18n';
 
 import { FormGroupWithHelpText } from '@kubev2v/common';
-import { Button, Divider, Form, Popover, Switch, TextInput } from '@patternfly/react-core';
+import {
+  Button,
+  Divider,
+  Form,
+  InputGroup,
+  Popover,
+  Switch,
+  TextInput,
+} from '@patternfly/react-core';
 import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
 import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
@@ -152,23 +160,25 @@ export const VCenterCredentialsEdit: React.FC<EditComponentProps> = ({ secret, o
         helperTextInvalid={state.validation.password.msg}
         validated={state.validation.password.type}
       >
-        <TextInput
-          spellCheck="false"
-          className="pf-u-w-75"
-          isRequired
-          type={state.passwordHidden ? 'password' : 'text'}
-          aria-label="Password input"
-          onChange={(e, v) => onChangePassword(v, e)}
-          value={password}
-          validated={state.validation.password.type}
-        />
-        <Button
-          variant="control"
-          onClick={togglePasswordHidden}
-          aria-label={state.passwordHidden ? 'Show password' : 'Hide password'}
-        >
-          {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
-        </Button>
+        <InputGroup>
+          <TextInput
+            spellCheck="false"
+            className="pf-u-w-75"
+            isRequired
+            type={state.passwordHidden ? 'password' : 'text'}
+            aria-label="Password input"
+            onChange={(e, v) => onChangePassword(v, e)}
+            value={password}
+            validated={state.validation.password.type}
+          />
+          <Button
+            variant="control"
+            onClick={togglePasswordHidden}
+            aria-label={state.passwordHidden ? 'Show password' : 'Hide password'}
+          >
+            {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
+          </Button>
+        </InputGroup>
       </FormGroupWithHelpText>
 
       <Divider />
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/Hosts/modals/VSphereNetworkModal.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/Hosts/modals/VSphereNetworkModal.tsx
index 26fc32922..2e1aa6dda 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/Hosts/modals/VSphereNetworkModal.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/Hosts/modals/VSphereNetworkModal.tsx
@@ -11,6 +11,7 @@ import {
   Form,
   HelperText,
   HelperTextItem,
+  InputGroup,
   Modal,
   ModalVariant,
   Text,
@@ -270,19 +271,21 @@ export const VSphereNetworkModal: React.FC<VSphereNetworkModalProps> = ({
               helperTextInvalid={t('Invalid password')}
               validated={state.validation.password}
             >
-              <TextInput
-                spellCheck="false"
-                className="forklift-host-modal-input-secret"
-                isRequired
-                type={state.passwordHidden ? 'password' : 'text'}
-                aria-label="Password input"
-                value={state.password}
-                onChange={(e, v) => onChangePassword(v, e)}
-                validated={state.validation.password}
-              />
-              <Button variant="control" onClick={togglePasswordHidden}>
-                {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
-              </Button>
+              <InputGroup>
+                <TextInput
+                  spellCheck="false"
+                  className="forklift-host-modal-input-secret"
+                  isRequired
+                  type={state.passwordHidden ? 'password' : 'text'}
+                  aria-label="Password input"
+                  value={state.password}
+                  onChange={(e, v) => onChangePassword(v, e)}
+                  validated={state.validation.password}
+                />
+                <Button variant="control" onClick={togglePasswordHidden}>
+                  {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
+                </Button>
+              </InputGroup>
             </FormGroupWithHelpText>
           </>
         )}