Merge pull request ManageIQ#9548 from GilbertCherrie/workflow_entry_point_enhancements

Workflow entry point enhancements

Author: Fryguy

app/javascript/components/automate-entry-points/index.jsx

@@ -177,6 +177,7 @@ const AutomateEntryPoints = ({
 
   return !isLoading && (
     <Modal
+      modalHeading={__('Select Entry Point Instance')}
       open={showModal}
       primaryButtonText={__('OK')}
       secondaryButtonText={__('Cancel')}

app/javascript/components/terraform-template-catalog-form/terraform-template-catalog-form.schema.js

@@ -237,7 +237,6 @@ const provisionTabSchema = (
   return schema;
 };
 
-
 const createSchema = ({
   data,
   setData,

app/javascript/components/workflows/helper.js

@@ -2,19 +2,21 @@ import { rowData } from '../miq-data-table/helper';
 
 /** Function to return the header information for the service catalog item's entry points. */
 const entryPointsHeaderInfo = () => [
-  { header: __('Name'), key: 'name' },
+  { header: __('Repository'), key: 'configuration_script_source.name' },
+  { header: __('Workflow name'), key: 'name' },
 ];
 
 /** Function to return the cell data for a row item. */
-const celInfo = (workflow) => [
+const cellInfo = (workflow) => [
+  { text: workflow.configuration_script_source ? workflow.configuration_script_source.name : '' },
   { text: workflow.name },
 ];
 
 /** 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,
+    id: workflow.id.toString(), cells: cellInfo(workflow), clickable: true,
   }));
   const miqRows = rowData(headerKeys, rows, false);
   return miqRows.rowItems;

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

@@ -9,19 +9,76 @@ const WorkflowEntryPoints = ({
   field, selected, type, setShowModal, setSelectedValue,
 }) => {
   const [data, setData] = useState({
-    isLoading: true, list: {}, selectedItemId: selected,
+    isLoading: true, list: {}, selectedItemId: selected, key: 'workflow-entry-points',
   });
+  const [prevSelectedHeader, setPrevSelectedHeader] = useState('');
+  const [sortDirectionRepository, setSortDirectionRepository] = useState('DESC');
+  const [sortDirectionName, setSortDirectionName] = useState('DESC');
 
   const workflowTypes = {
     provision: __('Provision'),
     reconfigure: __('Reconfigure'),
     retire: __('Retirement'),
   };
 
+  const sortFunction = (selectedHeader, itemA, itemB) => {
+    if (selectedHeader.key === 'name') {
+      if (itemA.name.text === itemB.name.text) {
+        return itemA.id - itemB.id;
+      }
+      return itemA.name.text.localeCompare(itemB.name.text, undefined, { sensitivity: 'base' });
+    }
+    if (itemA['configuration_script_source.name'] === undefined) {
+      itemA['configuration_script_source.name'] = { text: '' };
+    } else if (itemB['configuration_script_source.name'] === undefined) {
+      itemB['configuration_script_source.name'] = { text: '' };
+    }
+    return itemA['configuration_script_source.name'].text.localeCompare(
+      itemB['configuration_script_source.name'].text, undefined, { semsitivity: 'base' }
+    );
+  };
+
+  const onSort = (itemKey) => {
+    const selectedHeader = data.list.headers.find((item) => item === itemKey);
+    if (selectedHeader) {
+      const sortedList = data.list;
+      // FIXME: Try to only have 1 sort.
+      // Need this sort or else you have to click the column names twice to resort when changing columns
+      sortedList.rows.sort((a, b) => sortFunction(selectedHeader, a, b));
+      if (prevSelectedHeader === selectedHeader.key) {
+        if (selectedHeader.key === 'name') {
+          if (sortDirectionName === 'ASC') {
+            sortedList.rows.sort((a, b) => sortFunction(selectedHeader, a, b));
+          } else {
+            sortedList.rows.sort((a, b) => sortFunction(selectedHeader, b, a));
+          }
+          setSortDirectionName(sortDirectionName === 'ASC' ? 'DESC' : 'ASC');
+        } else {
+          if (sortDirectionRepository === 'ASC') {
+            sortedList.rows.sort((a, b) => sortFunction(selectedHeader, a, b));
+          } else {
+            sortedList.rows.sort((a, b) => sortFunction(selectedHeader, b, a));
+          }
+          setSortDirectionRepository(sortDirectionRepository === 'ASC' ? 'DESC' : 'ASC');
+        }
+      } else {
+        setSortDirectionName('DESC');
+        setSortDirectionRepository('DESC');
+      }
+      const tempKey = `${data.key}-${sortedList.rows[0].id}`;
+      setPrevSelectedHeader(selectedHeader.key);
+      setData({
+        ...data, isLoading: false, list: sortedList, key: tempKey,
+      });
+    }
+  };
+
   useEffect(() => {
     http.post(`/catalog/ae_tree_select_toggle?typ=${type}`, {}, { headers: {}, skipJsonParsing: true })
       .then((_data) => {
-        API.get('/api/configuration_script_payloads?expand=resources')
+        const url = '/api/configuration_script_payloads/?expand=resources&attributes=configuration_script_source.name&'
+        + 'collection_class=ManageIQ::Providers::Workflows::AutomationManager::Workflow';
+        API.get(url)
           .then((response) => {
             setData({
               ...data,
@@ -81,6 +138,7 @@ const WorkflowEntryPoints = ({
       open
       modalHeading={sprintf(__('Select Embedded Workflow - %s Entry Point'), workflowTypes[type])}
       primaryButtonText={__('Apply')}
+      primaryButtonDisabled={!data.selectedItemId}
       secondaryButtonText={__('Cancel')}
       onRequestSubmit={onApply}
       onRequestClose={onCloseModal}
@@ -90,6 +148,9 @@ const WorkflowEntryPoints = ({
         <MiqDataTable
           headers={data.list.headers}
           rows={data.list.rows}
+          sortable
+          onSort={onSort}
+          key={data.key}
           onCellClick={(selectedRow) => onSelect(selectedRow.id)}
           showPagination={false}
           truncateText={false}