foreman_remote_execution 16.3.1 → 16.4.0

data/webpack/JobInvocationDetail/TemplateInvocation.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { isEmpty } from 'lodash';
 import PropTypes from 'prop-types';
 import { ClipboardCopyButton, Alert, Skeleton } from '@patternfly/react-core';
@@ -60,6 +60,12 @@ export const TemplateInvocation = ({
   isExpanded,
   hostName,
   hostProxy,
+  showOutputType,
+  setShowOutputType,
+  showTemplatePreview,
+  setShowTemplatePreview,
+  showCommand,
+  setShowCommand,
 }) => {
   const intervalRef = useRef(null);
   const templateURL = showTemplateInvocationUrl(hostID, jobID);
@@ -74,14 +80,6 @@ export const TemplateInvocation = ({
     responseRef.current = response;
   }, [response]);
 
-  const [showOutputType, setShowOutputType] = useState({
-    stderr: true,
-    stdout: true,
-    debug: true,
-  });
-  const [showTemplatePreview, setShowTemplatePreview] = useState(false);
-  const [showCommand, setShowCommand] = useState(false);
-
   useEffect(() => {
     const dispatchFetch = () => {
       dispatch(
@@ -123,12 +121,8 @@ export const TemplateInvocation = ({
     };
   }, [isExpanded, dispatch, templateURL, hostID]);
 
-  if (!isExpanded) {
-    return null;
-  }
-
-  if ((status === STATUS.PENDING && isEmpty(response)) || !response) {
-    return <Skeleton />;
+  if (!response || (status === STATUS.PENDING && isEmpty(response))) {
+    return <Skeleton data-testid="template-invocation-skeleton" />;
   }
 
   const errorMessage =
@@ -239,6 +233,16 @@ TemplateInvocation.propTypes = {
   jobID: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
   isInTableView: PropTypes.bool,
   isExpanded: PropTypes.bool,
+  showOutputType: PropTypes.shape({
+    stderr: PropTypes.bool,
+    stdout: PropTypes.bool,
+    debug: PropTypes.bool,
+  }).isRequired,
+  setShowOutputType: PropTypes.func.isRequired,
+  showTemplatePreview: PropTypes.bool.isRequired,
+  setShowTemplatePreview: PropTypes.func.isRequired,
+  showCommand: PropTypes.bool.isRequired,
+  setShowCommand: PropTypes.func.isRequired,
 };
 
 TemplateInvocation.defaultProps = {

data/webpack/JobInvocationDetail/TemplateInvocationComponents/OutputToggleGroup.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import {
   ToggleGroup,
@@ -27,31 +27,49 @@ export const OutputToggleGroup = ({
   taskCancellable,
   permissions,
 }) => {
-  const handleSTDERRClick = _isSelected => {
-    setShowOutputType(prevShowOutputType => ({
-      ...prevShowOutputType,
-      stderr: _isSelected,
-    }));
-  };
+  const handleSTDERRClick = useCallback(
+    _isSelected => {
+      setShowOutputType(prevShowOutputType => ({
+        ...prevShowOutputType,
+        stderr: _isSelected,
+      }));
+    },
+    [setShowOutputType]
+  );
 
-  const handleSTDOUTClick = _isSelected => {
-    setShowOutputType(prevShowOutputType => ({
-      ...prevShowOutputType,
-      stdout: _isSelected,
-    }));
-  };
-  const handleDEBUGClick = _isSelected => {
-    setShowOutputType(prevShowOutputType => ({
-      ...prevShowOutputType,
-      debug: _isSelected,
-    }));
-  };
-  const handlePreviewTemplateClick = _isSelected => {
-    setShowTemplatePreview(_isSelected);
-  };
-  const handleCommandClick = _isSelected => {
-    setShowCommand(_isSelected);
-  };
+  const handleSTDOUTClick = useCallback(
+    _isSelected => {
+      setShowOutputType(prevShowOutputType => ({
+        ...prevShowOutputType,
+        stdout: _isSelected,
+      }));
+    },
+    [setShowOutputType]
+  );
+
+  const handleDEBUGClick = useCallback(
+    _isSelected => {
+      setShowOutputType(prevShowOutputType => ({
+        ...prevShowOutputType,
+        debug: _isSelected,
+      }));
+    },
+    [setShowOutputType]
+  );
+
+  const handlePreviewTemplateClick = useCallback(
+    _isSelected => {
+      setShowTemplatePreview(_isSelected);
+    },
+    [setShowTemplatePreview]
+  );
+
+  const handleCommandClick = useCallback(
+    _isSelected => {
+      setShowCommand(_isSelected);
+    },
+    [setShowCommand]
+  );
 
   const toggleGroupItems = {
     stderr: {

data/webpack/JobInvocationDetail/TemplateInvocationPage.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import PageLayout from 'foremanReact/routes/common/PageLayout/PageLayout';
@@ -26,6 +26,15 @@ const TemplateInvocationPage = ({
     ],
     isPf4: true,
   };
+
+  const [showOutputType, setShowOutputType] = useState({
+    stderr: true,
+    stdout: true,
+    debug: true,
+  });
+  const [showTemplatePreview, setShowTemplatePreview] = useState(false);
+  const [showCommand, setShowCommand] = useState(false);
+
   return (
     <PageLayout
       header={description}
@@ -39,6 +48,12 @@ const TemplateInvocationPage = ({
         isExpanded
         hostName={hostName}
         hostProxy={hostProxy}
+        showOutputType={showOutputType}
+        setShowOutputType={setShowOutputType}
+        showTemplatePreview={showTemplatePreview}
+        setShowTemplatePreview={setShowTemplatePreview}
+        showCommand={showCommand}
+        setShowCommand={setShowCommand}
       />
     </PageLayout>
   );

data/webpack/JobInvocationDetail/__tests__/TemplateInvocation.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import configureMockStore from 'redux-mock-store';
 import { Provider } from 'react-redux';
-import { render, screen, act, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import * as api from 'foremanReact/redux/API';
 import * as selectors from '../JobInvocationSelectors';
@@ -10,12 +10,7 @@ import { mockTemplateInvocationResponse } from './fixtures';
 
 jest.spyOn(api, 'get');
 jest.mock('../JobInvocationSelectors');
-selectors.selectTemplateInvocationStatus.mockImplementation(() => () =>
-  'RESOLVED'
-);
-selectors.selectTemplateInvocation.mockImplementation(() => () =>
-  mockTemplateInvocationResponse
-);
+
 const mockStore = configureMockStore([]);
 const store = mockStore({
   HOSTS_API: {
@@ -24,79 +19,122 @@ const store = mockStore({
     },
   },
 });
+
+Object.assign(navigator, {
+  clipboard: {
+    writeText: jest.fn().mockResolvedValue(undefined),
+  },
+});
+
+const mockProps = {
+  hostID: '1',
+  jobID: '1',
+  isInTableView: false,
+  isExpanded: true,
+  hostName: 'example-host',
+  hostProxy: { name: 'example-proxy', href: '#' },
+  showOutputType: { stderr: true, stdout: true, debug: true },
+  setShowOutputType: jest.fn(),
+  showTemplatePreview: false,
+  setShowTemplatePreview: jest.fn(),
+  showCommand: false,
+  setShowCommand: jest.fn(),
+};
+
 describe('TemplateInvocation', () => {
-  test('render', async () => {
+  beforeEach(() => {
+    selectors.selectTemplateInvocationStatus.mockImplementation(() => () =>
+      'RESOLVED'
+    );
+    selectors.selectTemplateInvocation.mockImplementation(() => () =>
+      mockTemplateInvocationResponse
+    );
+  });
+
+  test('render', () => {
     render(
       <Provider store={store}>
-        <TemplateInvocation
-          hostID="1"
-          jobID="1"
-          isInTableView={false}
-          isExpanded
-          hostName="example-host"
-          hostProxy={{ name: 'example-proxy', href: '#' }}
-        />
+        <TemplateInvocation {...mockProps} />
       </Provider>
     );
 
     expect(screen.getByText('example-host')).toBeInTheDocument();
     expect(screen.getByText('example-proxy')).toBeInTheDocument();
-
     expect(screen.getByText(/using Smart Proxy/)).toBeInTheDocument();
     expect(screen.getByText(/Target:/)).toBeInTheDocument();
-
     expect(screen.getByText('This is red text')).toBeInTheDocument();
     expect(screen.getByText('This is default text')).toBeInTheDocument();
+    expect(screen.getByLabelText('Copy to clipboard')).toBeInTheDocument();
   });
-  test('filtering toggles', () => {
-    render(
+
+  test('shows "No output" message when all toggles are off', () => {
+    const { rerender } = render(
       <Provider store={store}>
-        <TemplateInvocation
-          hostID="1"
-          jobID="1"
-          isInTableView={false}
-          isExpanded
-          hostName="example-host"
-          hostProxy={{ name: 'example-proxy', href: '#' }}
-        />
+        <TemplateInvocation {...mockProps} />
       </Provider>
     );
 
-    act(() => {
-      fireEvent.click(screen.getByText('STDOUT'));
-      fireEvent.click(screen.getByText('DEBUG'));
-      fireEvent.click(screen.getByText('STDERR'));
-    });
     expect(
-      screen.queryAllByText('No output for the selected filters')
-    ).toHaveLength(1);
-    expect(screen.queryAllByText('Exit status: 1')).toHaveLength(0);
-    expect(
-      screen.queryAllByText('StandardError: Job execution failed')
-    ).toHaveLength(0);
+      screen.queryByText('No output for the selected filters')
+    ).not.toBeInTheDocument();
+
+    const newProps = {
+      ...mockProps,
+      showOutputType: { stderr: false, stdout: false, debug: false },
+    };
+
+    rerender(
+      <Provider store={store}>
+        <TemplateInvocation {...newProps} />
+      </Provider>
+    );
 
-    act(() => {
-      fireEvent.click(screen.getByText('STDOUT'));
-    });
     expect(
-      screen.queryAllByText('No output for the selected filters')
-    ).toHaveLength(0);
-    expect(screen.queryAllByText('Exit status: 1')).toHaveLength(1);
+      screen.getByText('No output for the selected filters')
+    ).toBeInTheDocument();
+  });
+
+  test('correctly filters specific output types', () => {
+    const { rerender } = render(
+      <Provider store={store}>
+        <TemplateInvocation {...mockProps} />
+      </Provider>
+    );
+
+    expect(screen.getByText('Exit status: 1')).toBeInTheDocument(); // stdout
     expect(
-      screen.queryAllByText('StandardError: Job execution failed')
-    ).toHaveLength(0);
+      screen.getByText('StandardError: Job execution failed')
+    ).toBeInTheDocument(); // debug
 
-    act(() => {
-      fireEvent.click(screen.getByText('DEBUG'));
-    });
+    // Turn off stdout
+    rerender(
+      <Provider store={store}>
+        <TemplateInvocation
+          {...mockProps}
+          showOutputType={{ stderr: true, stdout: false, debug: true }}
+        />
+      </Provider>
+    );
+    expect(screen.queryByText('Exit status: 1')).not.toBeInTheDocument();
     expect(
-      screen.queryAllByText('No output for the selected filters')
-    ).toHaveLength(0);
-    expect(screen.queryAllByText('Exit status: 1')).toHaveLength(1);
+      screen.getByText('StandardError: Job execution failed')
+    ).toBeInTheDocument();
+
+    // Turn off debug
+    rerender(
+      <Provider store={store}>
+        <TemplateInvocation
+          {...mockProps}
+          showOutputType={{ stderr: true, stdout: false, debug: false }}
+        />
+      </Provider>
+    );
+    expect(screen.queryByText('Exit status: 1')).not.toBeInTheDocument();
     expect(
-      screen.queryAllByText('StandardError: Job execution failed')
-    ).toHaveLength(1);
+      screen.queryByText('StandardError: Job execution failed')
+    ).not.toBeInTheDocument();
   });
+
   test('displays an error alert when there is an error', async () => {
     selectors.selectTemplateInvocationStatus.mockImplementation(() => () =>
       'ERROR'
@@ -106,14 +144,7 @@ describe('TemplateInvocation', () => {
     }));
     render(
       <Provider store={store}>
-        <TemplateInvocation
-          hostID="1"
-          jobID="1"
-          isInTableView={false}
-          isExpanded
-          hostName="example-host"
-          hostProxy={{ name: 'example-proxy', href: '#' }}
-        />
+        <TemplateInvocation {...mockProps} />
       </Provider>
     );
 
@@ -129,19 +160,30 @@ describe('TemplateInvocation', () => {
     selectors.selectTemplateInvocationStatus.mockImplementation(() => () =>
       'PENDING'
     );
-    selectors.selectTemplateInvocation.mockImplementation(() => () => ({}));
+    selectors.selectTemplateInvocation.mockImplementation(() => () => null);
     render(
       <Provider store={store}>
-        <TemplateInvocation
-          hostID="1"
-          jobID="1"
-          isInTableView={false}
-          isExpanded
-          hostName="example-host"
-        />
+        <TemplateInvocation {...mockProps} />
       </Provider>
     );
 
-    expect(document.querySelectorAll('.pf-v5-c-skeleton')).toHaveLength(1);
+    expect(
+      screen.getByTestId('template-invocation-skeleton')
+    ).toBeInTheDocument();
+  });
+
+  test('copies text to clipboard when clicked', async () => {
+    render(
+      <Provider store={store}>
+        <TemplateInvocation {...mockProps} />
+      </Provider>
+    );
+
+    const copyButton = screen.getByLabelText('Copy to clipboard');
+    fireEvent.click(copyButton);
+    expect(navigator.clipboard.writeText).toHaveBeenCalledTimes(1);
+    expect(
+      await screen.findByText('Successfully copied to clipboard!')
+    ).toBeInTheDocument();
   });
 });

data/webpack/JobInvocationDetail/index.js

@@ -79,15 +79,14 @@ const JobInvocationDetailPage = ({
     return () => {
       dispatch(stopInterval(JOB_INVOCATION_KEY));
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dispatch, id, finished, autoRefresh]);
 
+  const taskId = task?.id;
   useEffect(() => {
-    if (task?.id !== undefined) {
-      dispatch(getTask(`${task?.id}`));
+    if (taskId !== undefined) {
+      dispatch(getTask(`${taskId}`));
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dispatch, task?.id]);
+  }, [dispatch, taskId]);
 
   const pageStatus =
     items.id === undefined

data/webpack/JobWizard/JobWizard.js

@@ -89,9 +89,6 @@ export const JobWizard = ({ rerunData }) => {
         concurrency_control = {},
       },
     }) => {
-      if (category !== job_category) {
-        setCategory(job_category);
-      }
       const advancedTemplateValues = {};
       const defaultTemplateValues = {};
       const inputs = template_inputs;
@@ -131,8 +128,7 @@ export const JobWizard = ({ rerunData }) => {
         };
       });
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [category.length]
+    [setTemplateValues, setAdvancedValues]
   );
   useEffect(() => {
     if (rerunData) {
@@ -153,8 +149,7 @@ export const JobWizard = ({ rerunData }) => {
         },
       });
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [rerunData]);
+  }, [rerunData, setDefaults]);
   useEffect(() => {
     if (jobTemplateID) {
       dispatch(
@@ -199,8 +194,14 @@ export const JobWizard = ({ rerunData }) => {
         })
       );
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [rerunData, jobTemplateID, dispatch]);
+  }, [
+    rerunData,
+    jobTemplateID,
+    dispatch,
+    setDefaults,
+    setTemplateValues,
+    setAdvancedValues,
+  ]);
 
   const [isStartsBeforeError, setIsStartsBeforeError] = useState(false);
   const [isStartsAtError, setIsStartsAtError] = useState(false);
@@ -514,7 +515,7 @@ JobWizard.propTypes = {
     }),
     execution_timeout_interval: PropTypes.number,
     time_to_pickup: PropTypes.number,
-    remote_execution_feature_id: PropTypes.string,
+    remote_execution_feature_id: PropTypes.number,
     template_invocations: PropTypes.arrayOf(
       PropTypes.shape({
         template_id: PropTypes.number,

data/webpack/JobWizard/autofill.js

@@ -95,6 +95,14 @@ export const useAutoFill = ({
         });
       }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fills]);
+  }, [
+    fills,
+    setFills,
+    setSelectedTargets,
+    setHostsSearchQuery,
+    setJobTemplateID,
+    setTemplateValues,
+    setAdvancedValues,
+    dispatch,
+  ]);
 };

data/webpack/JobWizard/steps/AdvancedFields/__tests__/__snapshots__/AdvancedFields.test.js.snap

@@ -57,7 +57,7 @@ Array [
         "port": null,
         "preventInvalidHostname": false,
         "protocol": null,
-        "query": "resource=ForemanTasks%3A%3ATask&name=some+search",
+        "query": "resource=ForemanTasks%3A%3ATask",
         "urn": null,
         "username": null,
       },

data/webpack/JobWizard/steps/CategoryAndTemplate/index.js

@@ -55,8 +55,13 @@ const ConnectedCategoryAndTemplate = ({
         })
       );
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [jobCategoriesStatus]);
+  }, [
+    jobCategoriesStatus,
+    dispatch,
+    isCategoryPreselected,
+    setCategory,
+    setJobTemplate,
+  ]);
 
   const jobCategories = useSelector(selectJobCategories);
   const jobTemplatesSearch = useSelector(selectJobTemplatesSearch);
@@ -73,22 +78,29 @@ const ConnectedCategoryAndTemplate = ({
               per_page: 'all',
             }),
             handleSuccess: response => {
-              if (!jobTemplate)
-                setJobTemplate(
-                  current =>
-                    current ||
-                    Number(
-                      filterJobTemplates(response?.data?.results)[0]?.id
-                    ) ||
-                    null
-                );
+              const filteredTemplates = filterJobTemplates(
+                response?.data?.results
+              );
+              setJobTemplate(current => {
+                // Check if current template is in the new category's template list.
+                // This preserves the user's selection when changing categories on rerun,
+                // preventing the category from flashing and reverting back (Issue #38899).
+                // We check the state value (current) rather than the prop to avoid race conditions.
+                if (
+                  current &&
+                  filteredTemplates.some(template => template.id === current)
+                ) {
+                  return current;
+                }
+                // Otherwise, select the first template from the new category
+                return Number(filteredTemplates[0]?.id) || null;
+              });
             },
           })
         );
       }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [category, dispatch]);
+  }, [category, dispatch, jobTemplatesSearch, setJobTemplate]);
 
   const jobTemplates = useSelector(selectJobTemplates);
 

data/webpack/JobWizard/steps/HostsAndInputs/SelectAPI.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import URI from 'urijs';
 import { SelectVariant } from '@patternfly/react-core/deprecated';
@@ -8,16 +8,21 @@ import { SearchSelect } from '../form/SearchSelect';
 
 export const useNameSearchAPI = (apiKey, url) => {
   const dispatch = useDispatch();
-  const uri = new URI(url);
-  const onSearch = search =>
-    dispatch(
-      get({
-        key: apiKey,
-        url: uri.addSearch({
-          search: `name~"${search}"`,
-        }),
-      })
-    );
+
+  const onSearch = useCallback(
+    search => {
+      const uri = new URI(url);
+      dispatch(
+        get({
+          key: apiKey,
+          url: uri.addSearch({
+            search: `name~"${search}"`,
+          }),
+        })
+      );
+    },
+    [dispatch, apiKey, url]
+  );
 
   const response = useSelector(state => selectResponse(state, apiKey));
   const isLoading = useSelector(state => selectIsLoading(state, apiKey));

data/webpack/JobWizard/steps/form/ResourceSelect.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import {
   Select,
@@ -25,28 +25,30 @@ export const ResourceSelect = ({
   const { perPage } = useForemanSettings();
   const maxResults = perPage;
   const dispatch = useDispatch();
-  const uri = new URI(url);
-  const onSearch = search => {
-    dispatch(
-      get({
-        key: apiKey,
-        url: uri.addSearch(search),
-      })
-    );
-  };
+  const onSearch = useCallback(
+    search => {
+      const uri = new URI(url);
+      dispatch(
+        get({
+          key: apiKey,
+          url: uri.addSearch(search),
+        })
+      );
+    },
+    [dispatch, apiKey, url]
+  );
 
   const response = useSelector(state => selectResponse(state, apiKey));
   const isLoading = useSelector(state => selectIsLoading(state, apiKey));
   const [isOpen, setIsOpen] = useState(false);
   const [typingTimeout, setTypingTimeout] = useState(null);
+  const initializedRef = useRef(false);
   useEffect(() => {
-    onSearch(selected ? { id: selected } : {});
-    if (typingTimeout) {
-      return () => clearTimeout(typingTimeout);
+    if (!initializedRef.current) {
+      onSearch(selected ? { id: selected } : {});
+      initializedRef.current = true;
     }
-    return undefined;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [onSearch, selected]);
   let selectOptions = [];
   if (response.subtotal > maxResults) {
     selectOptions = [