adding markdown support to confirmation text (#13)

* adding markdown support to confirmation text * basic styling
bomoko · Apr 7, 2022 · 34185d0 · 34185d0
1 parent 6b6081a
commit 34185d0
Show file tree

Hide file tree

Showing 4 changed files with 593 additions and 44 deletions.
diff --git a/services/ui/package.json b/services/ui/package.json
@@ -44,6 +44,7 @@
     "react-dom": "^16.8.4",
     "react-hexgrid": "^1.0.3",
     "react-highlight-words": "^0.14.0",
+    "react-markdown": "^8.0.2",
     "react-modal": "^3.8.1",
     "react-nice-dates": "^1.0.2",
     "react-select": "^3.0.0",

diff --git a/services/ui/src/components/AddTask/components/CustomTaskConfirm.js b/services/ui/src/components/AddTask/components/CustomTaskConfirm.js
@@ -3,6 +3,7 @@ import Modal from 'components/Modal';
 import Button from 'components/Button';
 import { bp, color } from 'lib/variables';
 
+import ReactMarkdown from 'react-markdown';
 
 /**
  * Confirm custom task
@@ -17,28 +18,26 @@ import { bp, color } from 'lib/variables';
   }) => {
     return (
       <React.Fragment>
-        <div className="margins"><Button disabled={disabled} action={openModal}>
-          Confirm Task
-        </Button></div>
+        <div className="margins">
+          <Button disabled={disabled} action={openModal}>Confirm Task</Button>
+        </div>
         <Modal
           isOpen={open}
           onRequestClose={closeModal}
           contentLabel={`Confirm`}
         >
           <React.Fragment>
-              <h3>Run Task</h3>
-            <p>
-                {taskText}
-            </p>
-
+            <ReactMarkdown>
+              {taskText}
+            </ReactMarkdown>
             <div className="form-input">
-              <a href="#" className="hover-state margins" onClick={closeModal}>cancel</a>
+              <a href="#" className="hover-state margins" onClick={closeModal}>Cancel</a>
               <Button action={onProceed}>Confirm</Button>
             </div>
           </React.Fragment>
         </Modal>
         <style jsx>{`
-          .margins{
+          .margins {
             margin-right: 10px;
           }
           input {
@@ -56,6 +55,7 @@ import { bp, color } from 'lib/variables';
           .form-input {
             display: flex;
             align-items: center;
+            justify-content: space-between;
           }
         `}</style>
       </React.Fragment>

diff --git a/services/ui/src/components/AddTask/components/InvokeRegisteredTask.js b/services/ui/src/components/AddTask/components/InvokeRegisteredTask.js
@@ -63,41 +63,42 @@ const InvokeRegisteredTask = ({ pageEnvironment, selectedTask, advancedTaskArgum
       return (
         <React.Fragment>
           <div className="taskArguments">
-          {selectedTask.arguments && selectedTask.arguments.map( d => {
+          {selectedTask.arguments && selectedTask.arguments.map((d, index) => {
             switch(d.type) {
 
-            case("ENVIRONMENT_SOURCE_NAME"):
-            return (
-              <div className="envSelect">
-              <label id="source-env">{d.displayName || d.name} :</label>
-            <ReactSelect
-            aria-labelledby="{d.name}"
-            name="{d.name}"
-            placeholder="Select environment..."
-            value={{
-              label: R.prop(d.name, advancedTaskArguments),
-              value: R.prop(d.name, advancedTaskArguments)}}
-            onChange={selectedOption => {
-              setAdvancedTaskArguments({ ... advancedTaskArguments, [d.name]: selectedOption.value})
-            }
-            }
-            options={ d.range.map(opt => ({label: opt, value: opt}))}
-          />
-          </div>
-          )
-            break;
-            default:
-              return (
-                <div className="envText">
-                <label id="source-env">{d.displayName || d.name} :</label>
-              <input type="text" name="{d.name}"
-                value={R.prop(d.name, advancedTaskArguments)}
-                onChange={event => {
-                  setAdvancedTaskArguments({ ... advancedTaskArguments, [d.name]: event.target.value})
-                }
-                }
-              /></div>)
+              case("ENVIRONMENT_SOURCE_NAME"):
+                return (
+                  <div key={`env-text-${index}`} className="envSelect">
+                    <label id="source-env">{d.displayName || d.name} :</label>
+                    <ReactSelect
+                      aria-labelledby="{d.name}"
+                      name="{d.name}"
+                      placeholder="Select environment..."
+                      value={{
+                        label: R.prop(d.name, advancedTaskArguments),
+                        value: R.prop(d.name, advancedTaskArguments)
+                      }}
+                      onChange={selectedOption => {
+                        setAdvancedTaskArguments({ ... advancedTaskArguments, [d.name]: selectedOption.value})
+                      }}
+                      options={d.range.map(opt => ({label: opt, value: opt}))}
+                    />
+                  </div>
+                )
+              break;
 
+              default:
+                return (
+                  <div key={`env-text-${index}`} className="envText">
+                    <label id="source-env">{d.displayName || d.name} :</label>
+                    <input type="text" name="{d.name}"
+                      value={R.prop(d.name, advancedTaskArguments)}
+                      onChange={event => {
+                        setAdvancedTaskArguments({ ... advancedTaskArguments, [d.name]: event.target.value})
+                      }}
+                    />
+                  </div>
+                )
                 break;
             }
             return null;