Fixes #39167 - set category when REX feature is present (#1024)

* Refs #39167 - stabilize wizard category rerenders

* Fixes #39167 - set category when REX feature is present

* Fixes #39167 - set category when REX feature is present

Author: MariaAga

webpack/JobWizard/JobWizard.js

@@ -1,6 +1,6 @@
 /* eslint-disable max-lines */
 /* eslint-disable camelcase */
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import { Wizard } from '@patternfly/react-core/deprecated';
@@ -51,6 +51,8 @@ export const JobWizard = ({ rerunData }) => {
   const [category, setCategory] = useState(
     rerunData?.job_category || jobCategoriesResponse?.default_category || ''
   );
+  const categoryRef = useRef(category);
+  categoryRef.current = category;
   const [advancedValues, setAdvancedValues] = useState({ templateValues: {} });
   const [templateValues, setTemplateValues] = useState({});
   const [scheduleValue, setScheduleValue] = useState(initialScheduleState);
@@ -89,6 +91,10 @@ export const JobWizard = ({ rerunData }) => {
         concurrency_control = {},
       },
     }) => {
+      if (categoryRef.current !== job_category) {
+        setCategory(job_category);
+      }
+
       const advancedTemplateValues = {};
       const defaultTemplateValues = {};
       const inputs = template_inputs;

webpack/JobWizard/JobWizardSelectors.js

@@ -1,5 +1,7 @@
+/* eslint-disable camelcase */
 import URI from 'urijs';
 import { get } from 'lodash';
+import { createSelector } from 'reselect';
 import {
   selectAPIResponse,
   selectAPIStatus,
@@ -17,8 +19,12 @@ import {
   JOB_API_KEY,
 } from './JobWizardConstants';
 
+/** Stable fallbacks so useSelector does not see a new reference every run */
+const EMPTY_ARRAY = [];
+const EMPTY_OBJECT = {};
+
 export const selectRerunJobInvocationResponse = state =>
-  selectAPIResponse(state, JOB_API_KEY) || {};
+  selectAPIResponse(state, JOB_API_KEY) || EMPTY_OBJECT;
 
 export const selectRerunJobInvocationStatus = state =>
   selectAPIStatus(state, JOB_API_KEY);
@@ -27,19 +33,26 @@ export const selectJobTemplatesStatus = state =>
   selectAPIStatus(state, JOB_TEMPLATES);
 
 export const filterJobTemplates = templates =>
-  templates?.filter(template => !template.snippet) || [];
+  templates?.filter(template => !template.snippet) || EMPTY_ARRAY;
+
+const selectJobTemplatesResults = state =>
+  selectAPIResponse(state, JOB_TEMPLATES)?.results;
 
-export const selectJobTemplates = state =>
-  filterJobTemplates(selectAPIResponse(state, JOB_TEMPLATES)?.results);
+export const selectJobTemplates = createSelector(
+  [selectJobTemplatesResults],
+  results => filterJobTemplates(results)
+);
 
 export const selectJobTemplatesSearch = state =>
   selectAPIResponse(state, JOB_TEMPLATES)?.search;
 
 export const selectJobCategoriesResponse = state =>
-  selectAPIResponse(state, JOB_CATEGORIES) || {};
+  selectAPIResponse(state, JOB_CATEGORIES) || EMPTY_OBJECT;
 
-export const selectJobCategories = state =>
-  selectJobCategoriesResponse(state).job_categories || [];
+export const selectJobCategories = state => {
+  const { job_categories: jobCategories } = selectJobCategoriesResponse(state);
+  return jobCategories || EMPTY_ARRAY;
+};
 
 export const selectWithKatello = state =>
   selectJobCategoriesResponse(state).with_katello || false;
@@ -58,7 +71,7 @@ export const selectJobCategoriesMissingPermissions = state => {
       'data',
       'error',
       'missing_permissions',
-    ]) || []
+    ]) || EMPTY_ARRAY
   );
 };
 
@@ -75,29 +88,32 @@ export const selectEffectiveUser = state =>
   selectAPIResponse(state, JOB_TEMPLATE).effective_user;
 
 export const selectAdvancedTemplateInputs = state =>
-  selectAPIResponse(state, JOB_TEMPLATE).advanced_template_inputs || [];
+  selectAPIResponse(state, JOB_TEMPLATE)?.advanced_template_inputs ||
+  EMPTY_ARRAY;
 
 export const selectTemplateInputs = state =>
-  selectAPIResponse(state, JOB_TEMPLATE).template_inputs || [];
+  selectAPIResponse(state, JOB_TEMPLATE)?.template_inputs || EMPTY_ARRAY;
 
 export const selectHostsResponse = state => selectAPIResponse(state, HOSTS_API);
 
 export const selectHostCount = state =>
   selectHostsResponse(state).subtotal || 0;
 
-export const selectHosts = state => {
-  const hosts = selectHostsResponse(state).results || [];
+const selectHostsResults = state => selectHostsResponse(state).results;
+
+export const selectHosts = createSelector([selectHostsResults], results => {
+  const hosts = results || EMPTY_ARRAY;
   return hosts.map(host => ({
     name: host.name,
     display_name: host.display_name,
   }));
-};
+});
 
 export const selectHostsMissingPermissions = state => {
   const hostsResponse = selectHostsResponse(state);
   return (
     get(hostsResponse, ['response', 'data', 'error', 'missing_permissions']) ||
-    []
+    EMPTY_ARRAY
   );
 };
 
@@ -115,6 +131,6 @@ export const selectIsSubmitting = state =>
   selectAPIStatus(state, JOB_INVOCATION) === STATUS.RESOLVED;
 
 export const selectRouterSearch = state => {
-  const { search } = selectRouterLocation(state);
+  const { search } = selectRouterLocation(state) || {};
   return URI.parseQuery(search);
 };

webpack/JobWizard/__tests__/fixtures.js

@@ -30,6 +30,12 @@ export const pupptetJobTemplate = {
 
 export const jobTemplates = [jobTemplate];
 
+export const wizardJobTemplatesMockList = [
+  jobTemplate,
+  pupptetJobTemplate,
+  { ...jobTemplate, id: 2, name: 'template2' },
+];
+
 export const jobTemplateResponse = {
   job_template: jobTemplate,
   effective_user: {
@@ -137,11 +143,9 @@ export const testSetup = (selectors, api) => {
     () => jobTemplateResponse.advanced_template_inputs
   );
   selectors.selectJobCategories.mockImplementation(() => jobCategories);
-  selectors.selectJobTemplates.mockImplementation(() => [
-    jobTemplate,
-    pupptetJobTemplate,
-    { ...jobTemplate, id: 2, name: 'template2' },
-  ]);
+  selectors.selectJobTemplates.mockImplementation(
+    () => wizardJobTemplatesMockList
+  );
   selectors.selectJobTemplate.mockImplementation(() => jobTemplateResponse);
 
   selectors.selectEffectiveUser.mockImplementation(
@@ -187,13 +191,25 @@ export const mockApi = api => {
           },
         });
     } else if (action.key === 'JOB_TEMPLATE') {
-      handleSuccess &&
-        handleSuccess({
-          data:
-            action.url === '/ui_job_wizard/template/163'
-              ? { ...jobTemplateResponse, job_template: pupptetJobTemplate }
-              : jobTemplateResponse,
-        });
+      const url = String(action.url);
+      let templatePayload = jobTemplateResponse;
+      if (url.includes('/template/163')) {
+        templatePayload = {
+          ...jobTemplateResponse,
+          job_template: pupptetJobTemplate,
+        };
+      } else if (url.includes('/template/2')) {
+        const jobTemplate2 = { ...jobTemplate, id: 2, name: 'template2' };
+        templatePayload = {
+          ...jobTemplateResponse,
+          job_template: jobTemplate2,
+          effective_user: {
+            ...jobTemplateResponse.effective_user,
+            job_template_id: 2,
+          },
+        };
+      }
+      handleSuccess && handleSuccess({ data: templatePayload });
     } else if (action.key === 'JOB_TEMPLATES') {
       handleSuccess &&
         handleSuccess({
@@ -202,7 +218,7 @@ export const mockApi = api => {
               action.url.search() ===
               '?search=job_category%3D%22Puppet%22&per_page=all'
                 ? [pupptetJobTemplate]
-                : [jobTemplate],
+                : wizardJobTemplatesMockList,
           },
         });
     } else if (action.key === 'HOST_IDS') {

webpack/JobWizard/steps/CategoryAndTemplate/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, memo } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 import URI from 'urijs';
@@ -133,4 +133,4 @@ ConnectedCategoryAndTemplate.propTypes = {
 };
 ConnectedCategoryAndTemplate.defaultProps = { jobTemplate: null };
 
-export default ConnectedCategoryAndTemplate;
+export default memo(ConnectedCategoryAndTemplate);