Refactor embedded entry point to workflow entry point

Author: GilbertCherrie

app/javascript/components/embedded-entry-point/index.jsx renamed to app/javascript/components/embedded-automate-entry-point/index.jsx

@@ -0,0 +1,87 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Button, TextInput } from 'carbon-components-react';
+import { Close16, TreeViewAlt16 } from '@carbon/icons-react';
+import { useFieldApi } from '@@ddf';
+import WorkflowEntryPoints from '../workflows/workflow-entry-points';
+
+const EmbeddedWorkflowEntryPoint = (props) => {
+  const {
+    label, initialValue, id, field, selected, type,
+  } = props;
+  const { input } = useFieldApi(props);
+
+  const [showModal, setShowModal] = useState(false);
+  const [selectedValue, setSelectedValue] = useState({});
+  const [textValue, setTextValue] = useState('');
+
+  useEffect(() => {
+    if (selectedValue && selectedValue.name && selectedValue.name.text) {
+      setTextValue(selectedValue.name.text);
+    } else {
+      setTextValue('');
+    }
+  }, [selectedValue]);
+
+  useEffect(() => {
+    if (selectedValue && selectedValue.name && selectedValue.name.text) {
+      selectedValue.name.text = textValue;
+    }
+    input.onChange(selectedValue);
+  }, [textValue]);
+
+  return (
+    <div>
+      {showModal ? (
+        <WorkflowEntryPoints
+          field={field}
+          selected={selected}
+          type={type}
+          setShowModal={setShowModal}
+          setSelectedValue={setSelectedValue}
+        />
+      ) : undefined}
+      <div className="entry-point-wrapper">
+        <div className="entry-point-text-input">
+          <TextInput id={id} type="text" labelText={__(label)} onChange={(value) => setTextValue(value.target.value)} value={textValue} />
+        </div>
+        <div className="entry-point-buttons">
+          <div className="entry-point-open">
+            <Button
+              renderIcon={TreeViewAlt16}
+              iconDescription={sprintf(__('Click to select %s'), label)}
+              hasIconOnly
+              onClick={() => setShowModal(true)}
+            />
+          </div>
+          <div className="entry-point-remove">
+            <Button
+              renderIcon={Close16}
+              iconDescription={sprintf(__('Remove this %s'), label)}
+              hasIconOnly
+              onClick={() => {
+                setSelectedValue({});
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+EmbeddedWorkflowEntryPoint.propTypes = {
+  id: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  initialValue: PropTypes.string,
+  field: PropTypes.string.isRequired,
+  selected: PropTypes.string,
+  type: PropTypes.string.isRequired,
+};
+
+EmbeddedWorkflowEntryPoint.defaultProps = {
+  initialValue: '',
+  selected: '',
+};
+
+export default EmbeddedWorkflowEntryPoint;

app/javascript/components/embedded-workflow-entry-point/index.jsx

@@ -50,7 +50,7 @@ const basicInformationTabSchema = (availableCatalogs, tenantTree, roleAllows, zo
         },
       },
       {
-        component: 'embedded-entry-point',
+        component: 'embedded-workflow-entry-point',
         id: 'provisioning_entry_point_workflow',
         name: 'provisioning_entry_point_workflow',
         label: 'Provisioning Entry Point',
@@ -81,7 +81,7 @@ const basicInformationTabSchema = (availableCatalogs, tenantTree, roleAllows, zo
         },
       },
       {
-        component: 'embedded-entry-point',
+        component: 'embedded-workflow-entry-point',
         id: 'reconfigure_entry_point_workflow',
         name: 'reconfigure_entry_point_workflow',
         label: 'Reconfigure Entry Point',
@@ -113,7 +113,7 @@ const basicInformationTabSchema = (availableCatalogs, tenantTree, roleAllows, zo
         },
       },
       {
-        component: 'embedded-entry-point',
+        component: 'embedded-workflow-entry-point',
         id: 'retirement_entry_point_workflow',
         name: 'retirement_entry_point_workflow',
         label: 'Retirement Entry Point',

app/javascript/components/terraform-template-catalog-form/terraform-template-catalog-form.schema.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { componentMapper } from '@data-driven-forms/carbon-component-mapper';
 import { componentTypes } from '@@ddf';
 import AsyncCredentials from '../../components/async-credentials/async-credentials';
@@ -11,15 +10,15 @@ import { TreeViewField, TreeViewSelector } from '../../components/tree-view';
 import MultiSelectWithSelectAll from '../../components/multiselect-with-selectall';
 import FontIconPicker from '../../components/fonticon-picker';
 import FontIconPickerDdf from '../../components/fonticon-picker/font-icon-picker-ddf';
-import EmbeddedEntryPoint from '../../components/embedded-entry-point';
+import EmbeddedWorkflowEntryPoint from '../../components/embedded-workflow-entry-point';
 
 const mapper = {
   ...componentMapper,
   'code-editor': CodeEditor,
   'edit-password-field': EditPasswordField,
   'file-upload': FileUploadComponent,
   'password-field': PasswordField,
-  'embedded-entry-point': EmbeddedEntryPoint,
+  'embedded-workflow-entry-point': EmbeddedWorkflowEntryPoint,
   'validate-credentials': AsyncCredentials,
   'tree-view': TreeViewField,
   'tree-selector': TreeViewSelector,

app/javascript/forms/mappers/componentMapper.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { shallowToJson } from 'enzyme-to-json';
 
-import EmbeddedEntryPoint from '../../components/embedded-entry-point';
+import EmbeddedWorkflowEntryPoint from '../../components/embedded-workflow-entry-point';
 
 jest.mock('@@ddf', () => ({
   useFieldApi: (props) => ({ meta: {}, input: {}, ...props }),
@@ -22,7 +22,7 @@ describe('CodeEditor component', () => {
   });
 
   it('should render correctly', () => {
-    const wrapper = shallow(<EmbeddedEntryPoint {...initialProps} />);
+    const wrapper = shallow(<EmbeddedWorkflowEntryPoint {...initialProps} />);
     expect(shallowToJson(wrapper)).toMatchSnapshot();
   });
 });