Add a remove button

Author: GilbertCherrie

app/javascript/components/provision-entry-point/index.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Button, TextInput } from 'carbon-components-react';
-import { TreeViewAlt16 } from '@carbon/icons-react';
+import { Close16, TreeViewAlt16 } from '@carbon/icons-react';
 import { useFieldApi } from '@@ddf';
 import WorkflowEntryPoints from '../workflows/workflow-entry-points';
 
@@ -46,13 +46,25 @@ const ProvisionEntryPoint = (props) => {
         <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">
-          <Button
-            renderIcon={TreeViewAlt16}
-            iconDescription={sprintf(__('Click to select %s'), label)}
-            hasIconOnly
-            onClick={() => setShowModal(true)}
-          />
+        <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>

app/javascript/spec/provision-entry-point/__snapshots__/provision-entry-point.spec.js.snap

@@ -19,17 +19,36 @@ exports[`CodeEditor component should render correctly 1`] = `
     <div
       className="entry-point-buttons"
     >
-      <Button
-        hasIconOnly={true}
-        iconDescription="Click to select Provisioning Entry Point"
-        onClick={[Function]}
-        renderIcon={
-          Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "render": [Function],
+      <div
+        className="entry-point-open"
+      >
+        <Button
+          hasIconOnly={true}
+          iconDescription="Click to select Provisioning Entry Point"
+          onClick={[Function]}
+          renderIcon={
+            Object {
+              "$$typeof": Symbol(react.forward_ref),
+              "render": [Function],
+            }
           }
-        }
-      />
+        />
+      </div>
+      <div
+        className="entry-point-remove"
+      >
+        <Button
+          hasIconOnly={true}
+          iconDescription="Remove this Provisioning Entry Point"
+          onClick={[Function]}
+          renderIcon={
+            Object {
+              "$$typeof": Symbol(react.forward_ref),
+              "render": [Function],
+            }
+          }
+        />
+      </div>
     </div>
   </div>
 </div>

app/stylesheet/workflows.scss

@@ -42,6 +42,11 @@
   }
 
   .entry-point-buttons {
+    display: inline-flex;
     margin-top: 20px;
+
+    .entry-point-open {
+      margin-right: 10px;
+    }
   }
 }