foreman_openbolt 1.0.0 → 1.1.1

data/webpack/src/Components/LaunchTask/HostSelector/SearchSelect.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useQuery } from '@apollo/client';
 import {
@@ -25,69 +25,78 @@ import hostgroupsQuery from './hostgroups.gql';
 
 export const maxResults = 100;
 
+const queries = {
+  HOSTS: hostsQuery,
+  HOST_GROUPS: hostgroupsQuery,
+};
+
+const dataName = {
+  HOSTS: 'hosts',
+  HOST_GROUPS: 'hostgroups',
+};
+
+const useNameSearch = queryKey => {
+  const org = useForemanOrganization();
+  const location = useForemanLocation();
+  const [search, setSearch] = useState('');
+
+  const { loading, data, error } = useQuery(queries[queryKey], {
+    variables: {
+      search: [
+        `name~"${search}"`,
+        org ? `organization_id=${org.id}` : null,
+        location ? `location_id=${location.id}` : null,
+      ]
+        .filter(i => i)
+        .join(' and '),
+    },
+  });
+  return [
+    setSearch,
+    {
+      subtotal: data?.[dataName[queryKey]]?.totalCount,
+      results:
+        data?.[dataName[queryKey]]?.nodes.map(node => ({
+          id: decodeId(node.id),
+          name: node.name,
+          displayName: node.displayName,
+        })) || [],
+      error: error?.message || null,
+    },
+    loading,
+  ];
+};
+
 export const SearchSelect = ({
   name,
   selected,
   setSelected,
   placeholderText,
   apiKey,
-  url,
   setLabel,
 }) => {
-  const useNameSearch = queryKey => {
-    const org = useForemanOrganization();
-    const location = useForemanLocation();
-    const [search, setSearch] = useState('');
-    const queries = {
-      HOSTS: hostsQuery,
-      HOST_GROUPS: hostgroupsQuery,
-    };
-    // Was from JobWizardConstants. Move into ours maybe.
-    const dataName = {
-      HOSTS: 'hosts',
-      HOST_GROUPS: 'hostgroups',
-    };
-
-    const { loading, data } = useQuery(queries[queryKey], {
-      variables: {
-        search: [
-          `name~"${search}"`,
-          org ? `organization_id=${org.id}` : null,
-          location ? `location_id=${location.id}` : null,
-        ]
-          .filter(i => i)
-          .join(' and '),
-      },
-    });
-    return [
-      setSearch,
-      {
-        subtotal: data?.[dataName[queryKey]]?.totalCount,
-        results:
-          data?.[dataName[queryKey]]?.nodes.map(node => ({
-            id: decodeId(node.id),
-            name: node.name,
-            displayName: node.displayName,
-          })) || [],
-      },
-      loading,
-    ];
-  };
-
-  const [onSearch, response, isLoading] = useNameSearch(apiKey, url);
+  const [onSearch, response, isLoading] = useNameSearch(apiKey);
   const [inputValue, setInputValue] = useState('');
   const [isOpen, setIsOpen] = useState(false);
-  const [typingTimeout, setTypingTimeout] = useState(null);
+  const typingTimeoutRef = useRef(null);
+
   useEffect(() => {
-    onSearch(selected.name || '');
-    if (typingTimeout) {
-      return () => clearTimeout(typingTimeout);
-    }
-    return undefined;
+    onSearch('');
+    return () => {
+      if (typingTimeoutRef.current) clearTimeout(typingTimeoutRef.current);
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+
   let selectOptions = [];
-  if (response.subtotal > maxResults) {
+
+  if (response.error) {
+    selectOptions = [
+      <SelectOption isDisabled key="error">
+        {sprintf(__('Error loading results: %s'), response.error)}
+      </SelectOption>,
+    ];
+  } else if (response.subtotal > maxResults) {
     selectOptions = [
       <SelectOption
         isDisabled
@@ -102,10 +111,11 @@ export const SearchSelect = ({
       </SelectOption>,
     ];
   }
+
   selectOptions = [
     ...selectOptions,
     ...Immutable.asMutable(response?.results || [])?.map((result, index) => (
-      <SelectOption key={index + 1} value={result.id}>
+      <SelectOption key={result.id || index} value={result.id}>
         {setLabel(result)}
       </SelectOption>
     )),
@@ -124,9 +134,10 @@ export const SearchSelect = ({
     }
     setInputValue('');
   };
+
   const autoSearch = searchTerm => {
-    if (typingTimeout) clearTimeout(typingTimeout);
-    setTypingTimeout(setTimeout(() => onSearch(searchTerm), 500));
+    if (typingTimeoutRef.current) clearTimeout(typingTimeoutRef.current);
+    typingTimeoutRef.current = setTimeout(() => onSearch(searchTerm), 500);
   };
 
   const toggle = toggleRef => (
@@ -149,17 +160,19 @@ export const SearchSelect = ({
           aria-label={`${name} typeahead input`}
           role="combobox"
           isExpanded={isOpen}
-          aria-controls="select-typeahead-listbox"
+          aria-controls={`${name}-listbox`}
           placeholder={placeholderText}
         />
         <TextInputGroupUtilities>
-          {isLoading && <Spinner size="md" />}
+          {isLoading && (
+            <Spinner size="md" aria-label={__('Loading results')} />
+          )}
           {selected.length > 0 && (
             <Button
               variant="plain"
               aria-label={__('Clear selections')}
               onClick={() => {
-                setSelected([]);
+                setSelected(() => []);
                 setInputValue('');
               }}
             >
@@ -170,6 +183,7 @@ export const SearchSelect = ({
       </TextInputGroup>
     </MenuToggle>
   );
+
   return (
     <Select
       id={name}
@@ -177,11 +191,11 @@ export const SearchSelect = ({
       selected={selected.map(({ id }) => id)}
       onSelect={onSelect}
       onOpenChange={setIsOpen}
-      role="menu"
+      role="listbox"
       toggle={toggle}
     >
       <SelectList
-        id="select-typeahead-listbox"
+        id={`${name}-listbox`}
         style={{ maxHeight: '45vh', overflowY: 'auto' }}
       >
         {selectOptions}
@@ -192,17 +206,15 @@ export const SearchSelect = ({
 
 SearchSelect.propTypes = {
   name: PropTypes.string,
-  selected: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  selected: PropTypes.array,
   setSelected: PropTypes.func.isRequired,
   setLabel: PropTypes.func.isRequired,
   placeholderText: PropTypes.string,
   apiKey: PropTypes.string.isRequired,
-  url: PropTypes.string,
 };
 
 SearchSelect.defaultProps = {
   name: 'typeahead select',
-  selected: {},
+  selected: [],
   placeholderText: '',
-  url: '',
 };

data/webpack/src/Components/LaunchTask/HostSelector/SelectedChips.js

@@ -17,17 +17,17 @@ const SelectedChip = ({ selected, setSelected, categoryName, setLabel }) => {
         className="hosts-chip-group"
         categoryName={categoryName}
         isClosable
-        closeBtnAriaLabel="Remove all"
+        closeBtnAriaLabel={__('Remove all')}
         collapsedText={sprintf(__('%s more'), selected.length - NUM_CHIPS)}
         numChips={NUM_CHIPS}
         onClick={() => {
           setSelected(() => []);
         }}
       >
-        {selected.map((result, index) => (
+        {selected.map(result => (
           <Chip
             ouiaId={`${categoryName}-${result.id}`}
-            key={index}
+            key={result.id}
             id={`${categoryName}-${result.id}`}
             onClick={() => deleteItem(result.id)}
             closeBtnAriaLabel={`Remove ${result.name}`}
@@ -71,16 +71,14 @@ export const SelectedChips = ({
         setSelected={setSelectedHostGroups}
         setLabel={setLabel}
       />
-      <SelectedChip
-        selected={
-          hostsSearchQuery
-            ? [{ id: hostsSearchQuery, name: hostsSearchQuery }]
-            : []
-        }
-        categoryName={__('Search query')}
-        setSelected={clearSearch}
-        setLabel={setLabel}
-      />
+      {hostsSearchQuery && (
+        <SelectedChip
+          selected={[{ id: hostsSearchQuery, name: hostsSearchQuery }]}
+          categoryName={__('Search query')}
+          setSelected={() => clearSearch()}
+          setLabel={setLabel}
+        />
+      )}
       {showClear && (
         <Button
           ouiaId="clear-chips"

data/webpack/src/Components/LaunchTask/HostSelector/index.js

@@ -4,11 +4,12 @@
  */
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { sprintf, translate as __ } from 'foremanReact/common/I18n';
+import { translate as __ } from 'foremanReact/common/I18n';
 import { API } from 'foremanReact/redux/API';
 import {
   FormGroup,
   HelperText,
+  HelperTextItem,
   Select,
   SelectOption,
   InputGroup,
@@ -17,24 +18,25 @@ import {
   FormHelperText,
 } from '@patternfly/react-core';
 import { FilterIcon } from '@patternfly/react-icons';
+import { extractErrorMessage } from '../../common/helpers';
 import { SearchSelect } from './SearchSelect';
 import { SelectedChips } from './SelectedChips';
 import { HostSearch } from './HostSearch';
 
-// Was from JobWizardConstants. Move into ours maybe.
-const HOST_METHODS = {
-  hosts: __('Hosts'),
-  hostGroups: __('Host groups'),
-  searchQuery: __('Search query'),
+const HOST_METHOD_LABELS = {
+  hosts: () => __('Hosts'),
+  hostGroups: () => __('Host groups'),
+  searchQuery: () => __('Search query'),
 };
+
 const ERROR_MESSAGES = {
-  hosts: __('Please select at least one host'),
-  hostGroups: __('Please select at least one host group'),
-  searchQuery: __('Please enter a search query'),
+  hosts: () => __('Please select at least one host'),
+  hostGroups: () => __('Please select at least one host group'),
+  searchQuery: () => __('Please enter a search query'),
 };
 
 const HostSelector = ({ onChange, targetCount = 0 }) => {
-  const [hostMethod, setHostMethod] = useState(HOST_METHODS.hosts);
+  const [hostMethod, setHostMethod] = useState('hosts');
   const [isOpen, setIsOpen] = useState(false);
   const [errorText, setErrorText] = useState('');
   const [hostsSearchQuery, setHostsSearchQuery] = useState('');
@@ -121,7 +123,7 @@ const HostSelector = ({ onChange, targetCount = 0 }) => {
         }
       } catch (error) {
         if (!cancelled) {
-          setFetchError(error.message || __('Failed to fetch hosts'));
+          setFetchError(extractErrorMessage(error));
           onChange([]);
         }
       } finally {
@@ -143,7 +145,7 @@ const HostSelector = ({ onChange, targetCount = 0 }) => {
   const onSelect = (_event, selection) => {
     setHostMethod(selection);
     setIsOpen(false);
-    setErrorText(ERROR_MESSAGES[selection] || '');
+    setErrorText(ERROR_MESSAGES[selection]());
   };
 
   const onToggleClick = () => setIsOpen(!isOpen);
@@ -154,25 +156,18 @@ const HostSelector = ({ onChange, targetCount = 0 }) => {
       onClick={onToggleClick}
       isExpanded={isOpen}
       icon={<FilterIcon />}
+      aria-label={__('Select host targeting method')}
     >
-      {hostMethod}
+      {HOST_METHOD_LABELS[hostMethod]()}
     </MenuToggle>
   );
 
   return (
     <div className="host-selector">
       <FormGroup fieldId="host-selector" label={__('Hosts')}>
-        {targetCount > 0 && (
-          <HelperText>
-            <HelperText variant="success">
-              {sprintf(__('%s hosts selected'), targetCount)}
-            </HelperText>
-          </HelperText>
-        )}
-
         {isLoading && (
-          <HelperText>
-            <HelperText>{__('Loading hosts...')}</HelperText>
+          <HelperText aria-live="polite">
+            <HelperTextItem>{__('Loading hosts...')}</HelperTextItem>
           </HelperText>
         )}
 
@@ -188,16 +183,16 @@ const HostSelector = ({ onChange, targetCount = 0 }) => {
                 className="without_select2"
                 aria-label={__('Host selection method')}
               >
-                {Object.values(HOST_METHODS).map((method, index) => (
-                  <SelectOption key={index} value={method}>
-                    {method}
+                {Object.entries(HOST_METHOD_LABELS).map(([key, labelFn]) => (
+                  <SelectOption key={key} value={key}>
+                    {labelFn()}
                   </SelectOption>
                 ))}
               </Select>
             </FormGroup>
           </InputGroupItem>
 
-          {hostMethod === HOST_METHODS.hosts && (
+          {hostMethod === 'hosts' && (
             <SearchSelect
               selected={selectedTargets.hosts}
               setSelected={setSelectedHosts}
@@ -208,7 +203,7 @@ const HostSelector = ({ onChange, targetCount = 0 }) => {
             />
           )}
 
-          {hostMethod === HOST_METHODS.hostGroups && (
+          {hostMethod === 'hostGroups' && (
             <SearchSelect
               selected={selectedTargets.hostGroups}
               setSelected={setSelectedHostGroups}
@@ -219,7 +214,7 @@ const HostSelector = ({ onChange, targetCount = 0 }) => {
             />
           )}
 
-          {hostMethod === HOST_METHODS.searchQuery && (
+          {hostMethod === 'searchQuery' && (
             <HostSearch
               setValue={setHostsSearchQuery}
               value={hostsSearchQuery}
@@ -228,14 +223,14 @@ const HostSelector = ({ onChange, targetCount = 0 }) => {
         </InputGroup>
 
         {!hasSelection && (
-          <FormHelperText>
-            <HelperText variant="error">{errorText}</HelperText>
+          <FormHelperText aria-live="assertive">
+            <HelperTextItem variant="error">{errorText}</HelperTextItem>
           </FormHelperText>
         )}
 
         {fetchError && (
-          <FormHelperText>
-            <HelperText variant="error">{fetchError}</HelperText>
+          <FormHelperText aria-live="assertive">
+            <HelperTextItem variant="error">{fetchError}</HelperTextItem>
           </FormHelperText>
         )}
       </FormGroup>

data/webpack/src/Components/LaunchTask/OpenBoltOptionsSection.js

@@ -9,7 +9,7 @@ import { ENCRYPTED_DEFAULT_PLACEHOLDER } from '../common/constants';
 
 const Loading = () => (
   <div style={{ textAlign: 'center', padding: '2rem' }}>
-    <Spinner size="lg" />
+    <Spinner size="lg" aria-label={__('Loading OpenBolt options')} />
     <p>{__('Loading OpenBolt options...')}</p>
   </div>
 );
@@ -74,7 +74,8 @@ const OpenBoltOptionsSection = ({
       if (aIsBoolean !== bIsBoolean) return aIsBoolean ? -1 : 1;
       return 0;
     });
-    return [['transport', transport], ...entries];
+    if (transport) return [['transport', transport], ...entries];
+    return entries;
   };
 
   const render = () => {

data/webpack/src/Components/LaunchTask/ParameterField.js

@@ -105,6 +105,7 @@ const ParameterField = ({
         isChecked={!!(value ?? defaultValue)}
         onChange={(_event, checked) => onChange(name, checked)}
         aria-label={name}
+        label={name}
       />
     );
   }
@@ -125,6 +126,7 @@ const ParameterField = ({
       value={resolvedValue}
       onChange={(_event, newValue) => onChange(name, newValue)}
       isRequired={isRequired && !hasEncryptedDefault}
+      aria-label={description || name}
     />
   );
 };

data/webpack/src/Components/LaunchTask/SmartProxySelect.js

@@ -15,10 +15,11 @@ const SmartProxySelect = ({
 }) => (
   <FormGroup label={__('Smart Proxy')} fieldId="smart-proxy-input">
     <FormSelect
-      id="proxy-select"
+      id="smart-proxy-input"
       value={selectedProxy}
       onChange={onProxyChange}
       isDisabled={isLoading}
+      aria-label={__('Select Smart Proxy')}
       title={__('Select a Smart Proxy to run the task from.')}
       // Foreman tries injecting select2 which breaks this component
       className="without_select2"

data/webpack/src/Components/LaunchTask/TaskSelect.js

@@ -24,9 +24,9 @@ const TaskSelect = ({
     <Flex spaceItems={{ default: 'spaceItemsSm' }}>
       <FlexItem flex={{ default: 'flex_1' }}>
         <FormSelect
-          id="task-select"
+          id="task-name-input"
           // Force remount on isDisabled so the tooltip based on the title changes
-          key={`task-select-${isDisabled}`}
+          key={`task-name-input-${isDisabled}`}
           title={
             isDisabled
               ? __('You must first select a Smart Proxy')
@@ -67,7 +67,7 @@ const TaskSelect = ({
       </FlexItem>
     </Flex>
     <span id="task-select-helper" className="pf-v5-u-screen-reader">
-      {__('Select a OpenBolt task to execute on the specified targets')}
+      {__('Select an OpenBolt task to execute on the specified targets')}
     </span>
   </FormGroup>
 );

data/webpack/src/Components/LaunchTask/__tests__/EmptyContent.test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import EmptyContent from '../EmptyContent';
+
+describe('EmptyContent', () => {
+  test('renders the title text', () => {
+    render(<EmptyContent title="No items found" />);
+    expect(screen.getByText('No items found')).toBeInTheDocument();
+  });
+});

data/webpack/src/Components/LaunchTask/__tests__/LaunchTask.test.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { createStore } from 'redux';
+import { MemoryRouter } from 'react-router-dom';
+import { API } from 'foremanReact/redux/API';
+import LaunchTask from '../index';
+
+// Mock HostSelector to avoid Apollo/GraphQL dependency chain
+jest.mock('../HostSelector', () => {
+  const MockHostSelector = () => (
+    <div data-testid="host-selector">Host Selector</div>
+  );
+  MockHostSelector.displayName = 'HostSelector';
+  return MockHostSelector;
+});
+
+const mockStore = createStore(() => ({}));
+
+const renderLaunchTask = () =>
+  render(
+    <Provider store={mockStore}>
+      <MemoryRouter>
+        <LaunchTask />
+      </MemoryRouter>
+    </Provider>
+  );
+
+afterEach(() => {
+  jest.clearAllMocks();
+});
+
+describe('LaunchTask', () => {
+  beforeEach(() => {
+    // useSmartProxies fetches on mount
+    API.get.mockResolvedValue({
+      data: {
+        results: [
+          { id: 1, name: 'proxy-one' },
+          { id: 2, name: 'proxy-two' },
+        ],
+      },
+    });
+  });
+
+  test('renders the form with Launch Task button', async () => {
+    renderLaunchTask();
+    await waitFor(() => {
+      expect(screen.getByText(/Launch Task/)).toBeInTheDocument();
+    });
+  });
+
+  test('renders Smart Proxy select with fetched proxies', async () => {
+    renderLaunchTask();
+    await waitFor(() => {
+      expect(screen.getByText('proxy-one')).toBeInTheDocument();
+      expect(screen.getByText('proxy-two')).toBeInTheDocument();
+    });
+  });
+
+  test('Launch Task button is disabled when form is incomplete', async () => {
+    renderLaunchTask();
+    await waitFor(() => {
+      const button = screen.getByRole('button', { name: /Launch Task/ });
+      expect(button).toBeDisabled();
+    });
+  });
+
+  test('shows task select as disabled before proxy is selected', async () => {
+    renderLaunchTask();
+    await waitFor(() => {
+      const taskSelect = screen.getByLabelText('Select Task');
+      expect(taskSelect).toBeDisabled();
+    });
+  });
+
+  test('renders host selector', async () => {
+    renderLaunchTask();
+    await waitFor(() => {
+      expect(screen.getByTestId('host-selector')).toBeInTheDocument();
+    });
+  });
+});

data/webpack/src/Components/LaunchTask/__tests__/ParameterField.test.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import ParameterField from '../ParameterField';
+
+describe('ParameterField', () => {
+  test('renders text input for string type', () => {
+    const { container } = render(
+      <ParameterField
+        name="username"
+        metadata={{ type: 'String' }}
+        value="admin"
+        onChange={jest.fn()}
+      />
+    );
+    const input = container.querySelector('input[type="text"]');
+    expect(input).toBeInTheDocument();
+    expect(input.value).toBe('admin');
+  });
+
+  test('renders password input for sensitive fields', () => {
+    const { container } = render(
+      <ParameterField
+        name="password"
+        metadata={{ type: 'String', sensitive: true }}
+        value="secret"
+        onChange={jest.fn()}
+      />
+    );
+    const input = container.querySelector('input[type="password"]');
+    expect(input).toBeInTheDocument();
+  });
+
+  test('renders checkbox for boolean type', () => {
+    render(
+      <ParameterField
+        name="verbose"
+        metadata={{ type: 'boolean' }}
+        value
+        onChange={jest.fn()}
+      />
+    );
+    expect(screen.getByRole('checkbox')).toBeInTheDocument();
+  });
+
+  test('renders checkbox for Optional[Boolean] type', () => {
+    render(
+      <ParameterField
+        name="noop"
+        metadata={{ type: 'Optional[Boolean]' }}
+        value={false}
+        onChange={jest.fn()}
+      />
+    );
+    expect(screen.getByRole('checkbox')).toBeInTheDocument();
+  });
+
+  test('renders select for array (enum) type', () => {
+    const { container } = render(
+      <ParameterField
+        name="transport"
+        metadata={{ type: ['ssh', 'winrm'] }}
+        value="ssh"
+        onChange={jest.fn()}
+      />
+    );
+    const select = container.querySelector('select');
+    expect(select).toBeInTheDocument();
+    expect(screen.getByText('ssh')).toBeInTheDocument();
+    expect(screen.getByText('winrm')).toBeInTheDocument();
+  });
+
+  test('calls onChange when value changes', () => {
+    const handleChange = jest.fn();
+    const { container } = render(
+      <ParameterField
+        name="username"
+        metadata={{ type: 'String' }}
+        value=""
+        onChange={handleChange}
+      />
+    );
+    const input = container.querySelector('input');
+    fireEvent.change(input, { target: { value: 'new-value' } });
+    expect(handleChange).toHaveBeenCalledWith('username', 'new-value');
+  });
+});