adding tab to render the payload inside it

ManageIQ · Oct 23, 2023 · 07f3e8b · 07f3e8b
1 parent 263c88a
commit 07f3e8b
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 38 deletions.
diff --git a/app/javascript/components/ansible-playbook-workflow/index.jsx b/app/javascript/components/ansible-playbook-workflow/index.jsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Controlled as CodeMirror } from 'react-codemirror2';
+import { Tabs, Tab } from 'carbon-components-react';
 import NotificationMessage from '../notification-message';
 
 /** The AnsiblePlaybookWorkflow is used to render the payload received from the  Ansible Playbook's show page */
 const AnsiblePlaybookWorkflow = ({ payload, payloadType }) => {
   /** Function to render a notification message. */
-  const renderMessage = () => <NotificationMessage type="info" message={__('Payload is not avaible')} />;
+  const renderMessage = () => <NotificationMessage type="info" message={__('Payload is not avaible.')} />;
 
   /** Function to render the payload using  CodeMirror. */
   const renderCodeMirror = () => (
@@ -26,11 +27,23 @@ const AnsiblePlaybookWorkflow = ({ payload, payloadType }) => {
     />
   );
 
+  /** Function to render the tab contents. Only one tab named 'Text' is required for ansible. */
+  const renderTabContents = () => {
+    const { name, text } = { name: 'text', text: __('Text') };
+    return (
+      <Tabs className="miq_custom_tabs">
+        <Tab key={`tab${name}`} label={text}>
+          { renderCodeMirror() }
+        </Tab>
+      </Tabs>
+    );
+  };
+
   return (
     <div className="row">
       <div className="col-md-12 col-lg-6">
         {
-          payload ? renderCodeMirror() : renderMessage()
+          payload ? renderTabContents() : renderMessage()
         }
       </div>
     </div>

diff --git a/...cript/spec/ansible-playbook-workflow/__snapshots__/ansible-playbook-workflow.spec.js.snap b/...cript/spec/ansible-playbook-workflow/__snapshots__/ansible-playbook-workflow.spec.js.snap
@@ -7,40 +7,57 @@ exports[`AnsiblePlaybookWorkflow component should render the AnsiblePlaybookWork
   <div
     className="col-md-12 col-lg-6"
   >
-    <Controlled
-      className="miq-codemirror ansible-playbook-workflow-payload"
-      options={
-        Object {
-          "autoCloseBrackets": true,
-          "gutters": Array [
-            "CodeMirror-lint-markers",
-          ],
-          "lineNumbers": true,
-          "lineWrapping": true,
-          "lint": true,
-          "mode": "yaml",
-          "styleActiveLine": true,
-          "theme": "eclipse",
-        }
-      }
-      value={
-        Object {
-          "address": Object {
-            "city": "Anytown",
-            "street": "123 Main St",
-            "zip": 12345,
-          },
-          "age": 30,
-          "email": "[email protected]",
-          "hobbies": Array [
-            "Reading",
-            "Hiking",
-            "Cooking",
-          ],
-          "name": "John Doe",
-        }
-      }
-    />
+    <Tabs
+      className="miq_custom_tabs"
+      scrollDebounceWait={150}
+      scrollIntoView={true}
+      selected={0}
+      selectionMode="automatic"
+      type="default"
+    >
+      <Tab
+        key="tabtext"
+        label="Text"
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        selected={false}
+      >
+        <Controlled
+          className="miq-codemirror ansible-playbook-workflow-payload"
+          options={
+            Object {
+              "autoCloseBrackets": true,
+              "gutters": Array [
+                "CodeMirror-lint-markers",
+              ],
+              "lineNumbers": true,
+              "lineWrapping": true,
+              "lint": true,
+              "mode": "yaml",
+              "styleActiveLine": true,
+              "theme": "eclipse",
+            }
+          }
+          value={
+            Object {
+              "address": Object {
+                "city": "Anytown",
+                "street": "123 Main St",
+                "zip": 12345,
+              },
+              "age": 30,
+              "email": "[email protected]",
+              "hobbies": Array [
+                "Reading",
+                "Hiking",
+                "Cooking",
+              ],
+              "name": "John Doe",
+            }
+          }
+        />
+      </Tab>
+    </Tabs>
   </div>
 </div>
 `;
@@ -56,7 +73,7 @@ exports[`AnsiblePlaybookWorkflow component should render the AnsiblePlaybookWork
       className="col-md-12 col-lg-6"
     >
       <NotificationMessage
-        message="Payload is not avaible"
+        message="Payload is not avaible."
         type="info"
       >
         <div
@@ -66,7 +83,7 @@ exports[`AnsiblePlaybookWorkflow component should render the AnsiblePlaybookWork
             className="pficon pficon-info"
           />
           <strong>
-            Payload is not avaible
+            Payload is not avaible.
           </strong>
         </div>
       </NotificationMessage>