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/workflows/helper.js

@@ -13,10 +13,28 @@ const celInfo = (workflow) => [
 /** 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: celInfo(workflow), clickable: true,
-  }));
-  const miqRows = rowData(headerKeys, rows, false);
+  const rows = response.resources.map((workflow) => {
+    const isValid = !!workflow.payload;
+    return {
+      id: workflow.id.toString(),
+      name: workflow.name,
+      cells: celInfo(workflow),
+      clickable: isValid,
+      disabled: !isValid,
+    };
+  });
+
+  // Sort: valid workflows first (alphabetically), then invalid workflows (alphabetically)
+  const sortedRows = rows.sort((a, b) => {
+    // If both have same validity status, sort alphabetically by name
+    if (a.disabled === b.disabled) {
+      return a.name.localeCompare(b.name);
+    }
+    // Valid workflows come first
+    return a.disabled ? 1 : -1;
+  });
+
+  const miqRows = rowData(headerKeys, sortedRows, false);
   return miqRows.rowItems;
 };
 

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

@@ -34,6 +34,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,
@@ -53,6 +61,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);
@@ -81,6 +98,7 @@ const WorkflowEntryPoints = ({
       open
       modalHeading={sprintf(__('Select Embedded Workflow - %s Entry Point'), workflowTypes[type])}
       primaryButtonText={__('Apply')}
+      primaryButtonDisabled={!isValidSelection()}
       secondaryButtonText={__('Cancel')}
       onRequestSubmit={onApply}
       onRequestClose={onCloseModal}

app/stylesheet/miq-data-table.scss

@@ -393,6 +393,22 @@ 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;
+        pointer-events: none !important;
+        color: #8d8d8d !important;
+        background-color: #f4f4f4 !important;
+
+        &:hover {
+          background-color: #f4f4f4 !important;
+        }
+
+        td {
+          color: #8d8d8d !important;
+        }
+      }
     }
   }
 }
@@ -424,4 +440,4 @@ table.miq_preview {
     width: 50px;
     padding-left: 24px;
   }
-}
+}