Repository: answerdev/answer
File: ui/src/pages/Install/components/SecondStep/index.tsx (TypeScript)

Code before:
                value={data.ssl_mode.value}
                onChange={(e) => {
                  changeCallback({
                    ssl_mode: {
                      value: e.target.value,
                      isInvalid: false,
                      errorMsg: '',
                    },
                  });
                }}>
                {sslModes.map((item) => {
                  return (
                    <option value={item.value} key={item.value}>
                      {item.value}
                    </option>
                  );
                })}
              </Form.Select>
            </Form.Group>
          )}
          {data.db_type.value === 'postgres' &&
            data.ssl_enabled.value &&
            (data.ssl_mode.value === 'verify-ca' ||
              data.ssl_mode.value === 'verify-full') && (
              <InputGroup className="mb-3" hasValidation>
                <Form.Control
                  placeholder={t('key_file.placeholder')}
                  aria-label="key_file"
                  aria-describedby="basic-addon1"
                  isInvalid={data.key_file.isInvalid}
                  onChange={(e) => {
                    changeCallback({
                      key_file: {
                        value: e.target.value,
                        isInvalid: false,
                        errorMsg: '',
                      },
                    });
                  }}
                  required
                />
                <Form.Control.Feedback type="invalid">
                  {`${data.key_file.errorMsg}`}
                </Form.Control.Feedback>
                <Form.Control
                  placeholder={t('cert_file.placeholder')}
                  aria-label="cert_file"
                  aria-describedby="basic-addon1"
                  isInvalid={data.cert_file.isInvalid}
                  onChange={(e) => {
                    changeCallback({

Review comment (bug):
UI exception when validation fails here
![image](https://github.com/user-attachments/assets/06c85a8c-45f5-4ace-9b8e-f9e9963c680e)

The fetch can be split here into three separate Form.Group



Code after:
              />
            </Form.Group>
          )}
          {data.db_type.value === 'postgres' && data.ssl_enabled.value && (
            <Form.Group controlId="sslmodeOptionsDropdown" className="mb-3">
              <Form.Label>{t('ssl_mode.label')}</Form.Label>
              <Form.Select
                value={data.ssl_mode.value}
                onChange={(e) => {
                  changeCallback({
                    ssl_mode: {
                      value: e.target.value,
                      isInvalid: false,
                      errorMsg: '',
                    },
                  });
                }}>
                {sslModes.map((item) => {
                  return (
                    <option value={item.value} key={item.value}>
                      {item.value}
                    </option>
                  );
                })}
              </Form.Select>
            </Form.Group>
          )}
          {data.db_type.value === 'postgres' &&
            data.ssl_enabled.value &&
            (data.ssl_mode.value === 'verify-ca' ||
              data.ssl_mode.value === 'verify-full') && (
              <Row className="mb-3">
                <Form.Group as={Col} controlId="key_file">
                  <Form.Control
                    placeholder={t('key_file.placeholder')}
                    aria-label="key_file"
                    aria-describedby="basic-addon1"
                    isInvalid={data.key_file.isInvalid}
                    onChange={(e) => {
                      changeCallback({
                        key_file: {
                          value: e.target.value,
                          isInvalid: false,
                          errorMsg: '',
                        },
                      });
                    }}
                    required
                  />
                  <Form.Control.Feedback type="invalid">
                    {`${data.key_file.errorMsg}`}