From 570f549cf44d2553fbd02750fa5c2eabeba56f23 Mon Sep 17 00:00:00 2001
From: Alex Corey <alex.swansboro@gmail.com>
Date: Mon, 27 Jan 2020 09:27:27 -0500
Subject: [PATCH] Allows user to generate a label on the JTForm

---
 .../MultiSelect/useSyncedSelectValue.js          |  6 +++++-
 .../src/screens/Template/shared/LabelSelect.jsx  | 15 ++++++++++++++-
 .../screens/Template/shared/LabelSelect.test.jsx | 16 ++++++++++++++++
 3 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/awx/ui_next/src/components/MultiSelect/useSyncedSelectValue.js b/awx/ui_next/src/components/MultiSelect/useSyncedSelectValue.js
index 2512ebe265..54c4915ccf 100644
--- a/awx/ui_next/src/components/MultiSelect/useSyncedSelectValue.js
+++ b/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 {
diff --git a/awx/ui_next/src/screens/Template/shared/LabelSelect.jsx b/awx/ui_next/src/screens/Template/shared/LabelSelect.jsx
index 174116c9e6..2ffcc4b6c6 100644
--- a/awx/ui_next/src/screens/Template/shared/LabelSelect.jsx
+++ b/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"
diff --git a/awx/ui_next/src/screens/Template/shared/LabelSelect.test.jsx b/awx/ui_next/src/screens/Template/shared/LabelSelect.test.jsx
index 88a76ae570..dda07d8e99 100644
--- a/awx/ui_next/src/screens/Template/shared/LabelSelect.test.jsx
+++ b/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' }]);
+  });
 });