Include invalid workflows and disable them in the embedded workflow component

Author: elsamaryv

app/javascript/components/miq-data-table/helper.js

@@ -133,7 +133,7 @@ export const rowData = (headerKeys, rows, hasCheckbox) => {
   const rowItems = [];
   const mergedStatus = [];
   rows.forEach(({
-    cells, id, clickable, clickId,
+    cells, id, clickable, clickId, disabled,
   }) => {
     const requiredCells = hasCheckbox ? (cells.filter((c) => !c.is_checkbox)) : cells;
     const { mergedCells, merged } = mergeIcons(requiredCells);
@@ -143,6 +143,7 @@ export const rowData = (headerKeys, rows, hasCheckbox) => {
       result.id = id;
       if (clickId) result.clickId = clickId;
       result.clickable = clickable;
+      if (disabled !== undefined) result.disabled = disabled;
       return result;
     }, {});
     rowItems.push(reducedItems);

app/javascript/components/miq-data-table/index.jsx

@@ -128,7 +128,8 @@ const MiqDataTable = ({
   /** Function to identify if the row is clickable or not and the returns a class name */
   const classNameRow = (item) => {
     if (item) {
-      const { clickable, id } = item;
+      const { clickable, id, disabled } = item;
+      if (disabled) return 'disabled-row';
       if (clickable === false) return 'simple-row';
       if (clickable === true || clickable === null) {
         return (gridChecks.includes(id)

app/javascript/components/miq-data-table/miq-table-cell.jsx

@@ -25,8 +25,9 @@ const MiqTableCell = ({
   const alignClass = longText ? 'vertical_align_top' : '';
   const longerTextClass = veryLongText ? 'truncate_longer_text' : '';
 
+  const cellTitle = cell.data.title ? cell.data.title : cell.value;
   const truncateText = (
-    <span title={cell.value} className={classNames('bx--front-line', wrapClass, longerTextClass)}>
+    <span title={cellTitle} className={classNames('bx--front-line', wrapClass, longerTextClass)}>
       {cell.value}
     </span>
   );

app/javascript/components/workflows/helper.js

@@ -7,17 +7,30 @@ const entryPointsHeaderInfo = () => [
 ];
 
 /** Function to return the cell data for a row item. */
-const cellInfo = (workflow) => [
-  { text: workflow.configuration_script_source ? workflow.configuration_script_source.name : '' },
-  { text: workflow.name },
-];
+const cellInfo = (workflow) => {
+  const isValid = workflow.payload_valid;
+  const workflowNameTitle = !isValid ? `${workflow.name} (${__('Invalid Workflow')})` : workflow.name;
+
+  return [
+    { text: workflow.configuration_script_source ? workflow.configuration_script_source.name : '' },
+    { text: workflow.name, title: workflowNameTitle },
+  ];
+};
 
 /** Function to return the row information for the list */
 const rowInfo = (headers, response) => {
   const headerKeys = headers.map((item) => item.key);
-  const rows = response.resources.filter((item) => item.payload).map((workflow) => ({
-    id: workflow.id.toString(), cells: cellInfo(workflow), clickable: true,
-  }));
+  const rows = response.resources.map((workflow) => {
+    const isValid = workflow.payload_valid;
+    return {
+      id: workflow.id.toString(),
+      name: workflow.name,
+      cells: cellInfo(workflow),
+      clickable: isValid,
+      disabled: !isValid,
+    };
+  });
+
   const miqRows = rowData(headerKeys, rows, false);
   return miqRows.rowItems;
 };

app/javascript/components/workflows/workflow-entry-points.jsx

@@ -91,6 +91,14 @@ const WorkflowEntryPoints = ({
 
   /** Function to handle a row's click event. */
   const onSelect = (selectedItemId) => {
+    // Find the row to check if it's disabled
+    const selectedRow = data.list.rows.find((row) => row.id === selectedItemId);
+
+    // Don't allow selection of disabled rows
+    if (selectedRow && selectedRow.disabled) {
+      return;
+    }
+
     setData({
       ...data,
       selectedItemId: (data.selectedItemId === selectedItemId) ? undefined : selectedItemId,
@@ -110,6 +118,15 @@ const WorkflowEntryPoints = ({
       http.post('/catalog/ae_tree_select_toggle?button=cancel', {}, { headers: {}, skipJsonParsing: true });
     }
   };
+  /** Function to check if a valid workflow is selected */
+  const isValidSelection = () => {
+    if (!data.selectedItemId) {
+      return false;
+    }
+    const selectedRow = data.list.rows.find((row) => row.id === data.selectedItemId);
+    return selectedRow && !selectedRow.disabled;
+  };
+
   /** Function to handle the modal box apply button click event. */
   const onApply = () => {
     const seletedItem = data.list.rows.find((item) => item.id === data.selectedItemId);
@@ -138,7 +155,7 @@ const WorkflowEntryPoints = ({
       open
       modalHeading={sprintf(__('Select Embedded Workflow - %s Entry Point'), workflowTypes[type])}
       primaryButtonText={__('Apply')}
-      primaryButtonDisabled={!data.selectedItemId}
+      primaryButtonDisabled={!isValidSelection()}
       secondaryButtonText={__('Cancel')}
       onRequestSubmit={onApply}
       onRequestClose={onCloseModal}

app/stylesheet/miq-data-table.scss

@@ -393,6 +393,21 @@ table.miq_preview {
   .workflows-entry-point-modal-body {
     .miq-data-table {
       margin-top: 0px;
+
+      tbody tr.disabled-row {
+        opacity: 0.5 !important;
+        cursor: not-allowed !important;
+        color: #8d8d8d !important;
+        background-color: #f4f4f4 !important;
+
+        &:hover {
+          background-color: #f4f4f4 !important;
+        }
+
+        td {
+          color: #8d8d8d !important;
+        }
+      }
     }
   }
 }
@@ -424,4 +439,4 @@ table.miq_preview {
     width: 50px;
     padding-left: 24px;
   }
-}
+}