Displays invalid workflows in the table

Author: elsamaryv

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,9 +13,15 @@ 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 rows = response.resources.map((workflow) => {
+    const isValid = !!workflow.payload;
+    return {
+      id: workflow.id.toString(),
+      cells: celInfo(workflow),
+      clickable: isValid,
+      disabled: !isValid,
+    };
+  });
   const miqRows = rowData(headerKeys, rows, 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,

app/stylesheet/miq-data-table.scss

@@ -62,6 +62,17 @@
       cursor: pointer;
     }
 
+    &.disabled-row {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+      color: #8d8d8d;
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
     .cell {
       display: flex;
       align-items: flex-start;