Allow entering playbook filename manually in Job Template

Signed-off-by: Vidya Nambiar <vnambiar@redhat.com>

Prettier

Signed-off-by: Vidya Nambiar <vnambiar@redhat.com>

awx/ui/src/screens/Template/shared/PlaybookSelect.js

@@ -59,13 +59,14 @@ function PlaybookSelect({
       onToggle={setIsOpen}
       placeholderText={t`Select a playbook`}
       typeAheadAriaLabel={t`Select a playbook`}
-      isCreatable={false}
+      isCreatable
+      createText=""
       onSelect={(event, value) => {
         setIsOpen(false);
         onChange(value);
       }}
       id="template-playbook"
-      isValid={isValid}
+      validated={isValid ? 'default' : 'error'}
       onBlur={onBlur}
       isDisabled={isLoading || isDisabled}
       maxHeight="1000%"

awx/ui/src/screens/Template/shared/PlaybookSelect.test.js

@@ -1,15 +1,15 @@
 import React from 'react';
-import { act } from 'react-dom/test-utils';
+import { render, fireEvent, waitFor, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { ProjectsAPI } from 'api';
-import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
 import PlaybookSelect from './PlaybookSelect';
 
-jest.mock('../../../api');
+jest.mock('api');
 
 describe('<PlaybookSelect />', () => {
   beforeEach(() => {
     ProjectsAPI.readPlaybooks.mockReturnValue({
-      data: ['debug.yml'],
+      data: ['debug.yml', 'test.yml'],
     });
   });
 
@@ -18,24 +18,90 @@ describe('<PlaybookSelect />', () => {
   });
 
   test('should reload playbooks when project value changes', async () => {
-    let wrapper;
+    const { rerender } = render(
-    await act(async () => {
+      <PlaybookSelect
-      wrapper = mountWithContexts(
+        projectId={1}
-        <PlaybookSelect
+        isValid
-          projectId={1}
+        onChange={() => {}}
-          isValid
+        onError={() => {}}
-          onChange={() => {}}
+      />
-          onError={() => {}}
+    );
-        />
+
+    await waitFor(() => {
+      expect(ProjectsAPI.readPlaybooks).toHaveBeenCalledWith(1);
+    });
+
+    rerender(
+      <PlaybookSelect
+        projectId={15}
+        isValid
+        onChange={() => {}}
+        onError={() => {}}
+      />
+    );
+
+    await waitFor(() => {
+      expect(ProjectsAPI.readPlaybooks).toHaveBeenCalledTimes(2);
+      expect(ProjectsAPI.readPlaybooks).toHaveBeenCalledWith(15);
+    });
+  });
+
+  test('should trigger the onChange callback for the option selected from the list', async () => {
+    const mockCallback = jest.fn();
+
+    const { container } = render(
+      <PlaybookSelect
+        projectId={1}
+        isValid={true}
+        onChange={mockCallback}
+        onError={() => {}}
+      />
+    );
+
+    await waitFor(() => {
+      const selectToggleButton = container.querySelector(
+        'button.pf-c-select__toggle-button'
       );
+      fireEvent.click(selectToggleButton);
+      // Select options are displayed
+      expect(screen.getAllByRole('option').length).toBe(2);
+
+      fireEvent.click(screen.getByText('debug.yml'));
+
+      expect(mockCallback).toHaveBeenCalledWith('debug.yml');
+    });
+  });
+
+  test('should allow entering playbook file name manually', async () => {
+    const mockCallback = jest.fn();
+
+    const { container } = render(
+      <PlaybookSelect
+        projectId={1}
+        isValid={true}
+        onChange={mockCallback}
+        onError={() => {}}
+      />
+    );
+
+    await waitFor(() => {
+      const input = container.querySelector('input.pf-c-form-control');
+      expect(input).toBeVisible();
+      fireEvent.change(input, { target: { value: 'foo.yml' } });
     });
 
-    expect(ProjectsAPI.readPlaybooks).toHaveBeenCalledWith(1);
+    await waitFor(() => {
-    await act(async () => {
+      // A new select option is displayed ("foo.yml")
-      wrapper.setProps({ projectId: 15 });
+      expect(
-    });
+        screen.getByText('"foo.yml"', { selector: '[role="option"]' })
+      ).toBeVisible();
+      expect(screen.getAllByRole('option').length).toBe(1);
 
-    expect(ProjectsAPI.readPlaybooks).toHaveBeenCalledTimes(2);
+      fireEvent.click(
-    expect(ProjectsAPI.readPlaybooks).toHaveBeenCalledWith(15);
+        screen.getByText('"foo.yml"', { selector: '[role="option"]' })
+      );
+
+      expect(mockCallback).toHaveBeenCalledWith('foo.yml');
+    });
   });
 });