[AAP-23162] Add credentials test button

[skochay330]

This PR adds a 'test' button to the credentials edit and create pages when an external credential type is selected. This button opens a modal which asks for some additional fields (dynamic depending on the credential type that is selected) and has a run button to run the test. Running the test then displays either a success or error alert on the page.

Jira issue: https://issues.redhat.com/browse/AAP-23162

Steps to see a mock successful response:
In AWX run:

DOCKER_HOST=`docker context inspect | jq -r ".[0].Endpoints.docker.Host"` VAULT=true COMPOSE_TAG=devel make docker-compose

Then, in a separate window (still in AWX):
ansible-playbook tools/docker-compose/ansible/plumb_vault.yml -e enable_ldap=false
ansible-playbook tools/docker-compose/ansible/unseal_vault.yml

Open a new window, in ansible-ui:
Point frontend to local backend using
export AWX_SERVER=https://127.0.0.1:8043
Npm run awx

In UI, go to credentials list
Vault lookup cred => edit => test button =>
Name of secret backend: my_engine
Path to secret: /my_root/my_folder
Key name: my_key

[kialam]

This was a complicated piece of our code to nail down and implement, nice work. A suggestion to simplify/refactor some of the logic came to mind:
Use a new hook here to avoid some repetition and prop drilling in the CreateCredential and EditCredential sections of the code:

export const useTestButton = () => {
  const { t } = useTranslation();
  const openCredentialsExternalTestModal = useCredentialsTestModal()
  const [disableButton, setDisableButton] = useState(false);
  const [values, setValues] = useState({});

  const TestButton = () => (
    <Button
      variant="primary"
      onClick={() => {
        console.log('Test button clicked');
        console.log(values);
        openCredentialsExternalTestModal(...)
      }}
      isDisabled={disableButton}
    >
      {t('Test')}
    </Button>
  );
  return { TestButton, setDisableButton, setValues };
};

Then, within CreateCredential:

  const { TestButton, setDisableButton, setValues } = useTestButton();

Pass the setDisabledButton and setValues as props down to the CredentialInputs component.

Within the CredentialInputs component set a watcher for the form values to change/update:

const {
    formState: { isValid },
  } = useFormContext();
  const watchedValues = useWatch();

  useEffect(() => {
    setDisableButton(!isValid);
    setValues(watchedValues as initialValues);
  }, [isValid, setDisableButton, setValues, watchedValues]);

This would then give you the form values needed to render the Test Modal, as well as the validation logic to enable/disable the Test button within the form. We can then remove (I think):

  const [selectedCredentialTypeId, setSelectedCredentialTypeId] = useState<number>(0);
  const [watchedSubFormFields, setWatchedSubFormFields] = useState<unknown[]>([]);
  const [isTestButtonEnabled, setIsTestButtonEnabled] = useState(false);
  const [isTestButtonEnabledSubForm, setIsTestButtonEnabledSubForm] = useState(false);

Repeat for EditCredentials.

We can do this as a follow up PR as well, so I'll go ahead and approve this.