[Obs AI Assistant] Add form validation to new kb entry (#181379)

The name and content are required when submitting a KB entry. This PR
adds validation to ensure both are filled out

<img width="1267" alt="image"
src="07310678-d38c-4a6c-be2a-5311e9b7ecb9">
This commit is contained in:
Søren Louv-Jansen 2024-04-23 17:43:49 +02:00 committed by GitHub
parent 22dd9f86f4
commit 3def76dab8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 28 additions and 5 deletions

View file

@ -45,6 +45,10 @@ export function KnowledgeBaseEditManualEntryFlyout({
const [newEntryId, setNewEntryId] = useState(entry?.id ?? '');
const [newEntryText, setNewEntryText] = useState(entry?.text ?? '');
const isEntryIdInvalid = newEntryId.trim() === '';
const isEntryTextInvalid = newEntryText.trim() === '';
const isFormInvalid = isEntryIdInvalid || isEntryTextInvalid;
const handleSubmitNewEntryClick = async () => {
createEntry({
entry: {
@ -92,10 +96,11 @@ export function KnowledgeBaseEditManualEntryFlyout({
)}
>
<EuiFieldText
data-test-subj="knowledgeBaseEditManualEntryFlyoutFieldText"
data-test-subj="knowledgeBaseEditManualEntryFlyoutIdInput"
fullWidth
value={newEntryId}
onChange={(e) => setNewEntryId(e.target.value)}
isInvalid={isEntryIdInvalid}
/>
</EuiFormRow>
) : (
@ -136,6 +141,7 @@ export function KnowledgeBaseEditManualEntryFlyout({
)}
>
<EuiMarkdownEditor
editorId="knowledgeBaseEditManualEntryFlyoutMarkdownEditor"
aria-label={i18n.translate(
'xpack.observabilityAiAssistantManagement.knowledgeBaseNewManualEntryFlyout.euiMarkdownEditor.observabilityAiAssistantKnowledgeBaseViewMarkdownEditorLabel',
{ defaultMessage: 'observabilityAiAssistantKnowledgeBaseViewMarkdownEditor' }
@ -173,6 +179,7 @@ export function KnowledgeBaseEditManualEntryFlyout({
fill
isLoading={isLoading}
onClick={handleSubmitNewEntryClick}
isDisabled={isFormInvalid}
>
{i18n.translate(
'xpack.observabilityAiAssistantManagement.knowledgeBaseNewManualEntryFlyout.saveButtonLabel',

View file

@ -71,15 +71,31 @@ describe('KnowledgeBaseTab', () => {
fireEvent.click(getByTestId('knowledgeBaseSingleEntryContextMenuItem'));
fireEvent.click(getByTestId('knowledgeBaseEditManualEntryFlyoutFieldText'));
fireEvent.change(getByTestId('knowledgeBaseEditManualEntryFlyoutFieldText'), {
fireEvent.change(getByTestId('knowledgeBaseEditManualEntryFlyoutIdInput'), {
target: { value: 'foo' },
});
fireEvent.change(getByTestId('euiMarkdownEditorTextArea'), {
target: { value: 'bar' },
});
getByTestId('knowledgeBaseEditManualEntryFlyoutSaveButton').click();
expect(createMock).toHaveBeenCalledWith({ entry: { id: 'foo', text: '' } });
expect(createMock).toHaveBeenCalledWith({ entry: { id: 'foo', text: 'bar' } });
});
it('should require an id', () => {
const { getByTestId } = render(<KnowledgeBaseTab />);
fireEvent.click(getByTestId('knowledgeBaseNewEntryButton'));
fireEvent.click(getByTestId('knowledgeBaseSingleEntryContextMenuItem'));
fireEvent.change(getByTestId('knowledgeBaseEditManualEntryFlyoutIdInput'), {
target: { value: 'foo' },
});
expect(getByTestId('knowledgeBaseEditManualEntryFlyoutSaveButton')).toBeDisabled();
});
});