Allows user to generate a label on the JTForm

awx/ui_next/src/components/MultiSelect/useSyncedSelectValue.js

@@ -1,4 +1,7 @@
-import { useState, useEffect } from 'react';
+import {
+  useState,
+  useEffect
+} from 'react';
 
 /*
   Hook for using PatternFly's <Select> component when a pre-existing value
@@ -21,6 +24,7 @@ export default function useSyncedSelectValue(value, onChange) {
   }, [value, options]);
 
   const onSelect = (event, item) => {
+
     if (selections.includes(item)) {
       onChange(selections.filter(i => i !== item));
     } else {

awx/ui_next/src/screens/Template/shared/LabelSelect.jsx

@@ -57,13 +57,26 @@ function LabelSelect({ value, placeholder, onChange, onError }) {
     <Select
       variant={SelectVariant.typeaheadMulti}
       onToggle={toggleExpanded}
-      onSelect={onSelect}
+      onSelect={(e, item) => {
+        if (typeof item === 'string') {
+          item = { id: item, name: item };
+        }
+        onSelect(e, item);
+      }}
       onClear={() => onChange([])}
       onFilter={event => {
         const str = event.target.value.toLowerCase();
         const matches = options.filter(o => o.name.toLowerCase().includes(str));
         return renderOptions(matches);
       }}
+      isCreatable
+      onCreateOption={label => {
+        label = label.trim();
+        if (!options.includes(label)) {
+          setOptions(options.concat({ name: label, id: label }));
+        }
+        return label;
+      }}
       selections={selections}
       isExpanded={isExpanded}
       ariaLabelledBy="label-select"

awx/ui_next/src/screens/Template/shared/LabelSelect.test.jsx

@@ -56,4 +56,20 @@ describe('<LabelSelect />', () => {
     const selectOptions = wrapper.find('SelectOption');
     expect(selectOptions).toHaveLength(4);
   });
+  test('Generate a label  ', async () => {
+    let wrapper;
+    const onChange = jest.fn();
+    LabelsAPI.read.mockReturnValueOnce({
+      data: {
+        options,
+      },
+    });
+    await act(async () => {
+      wrapper = mount(
+        <LabelSelect value={[]} onError={() => {}} onChange={onChange} />
+      );
+    });
+    await wrapper.find('Select').invoke('onSelect')({}, 'foo');
+    expect(onChange).toBeCalledWith([{ id: 'foo', name: 'foo' }]);
+  });
 });