foreman_remote_execution 4.5.6 → 5.0.0

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

@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import { useQuery } from '@apollo/client';
+import { SelectVariant } from '@patternfly/react-core';
+import {
+  useForemanOrganization,
+  useForemanLocation,
+} from 'foremanReact/Root/Context/ForemanContext';
+import { HOSTS, HOST_GROUPS, dataName } from '../../JobWizardConstants';
+import { SearchSelect } from '../form/SearchSelect';
+import hostsQuery from './hosts.gql';
+import hostgroupsQuery from './hostgroups.gql';
+
+export const useNameSearchGQL = apiKey => {
+  const org = useForemanOrganization();
+  const location = useForemanLocation();
+  const [search, setSearch] = useState('');
+  const queries = {
+    [HOSTS]: hostsQuery,
+    [HOST_GROUPS]: hostgroupsQuery,
+  };
+  const { loading, data } = useQuery(queries[apiKey], {
+    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[apiKey]]?.totalCount,
+      results:
+        data?.[dataName[apiKey]]?.nodes.map(node => ({
+          id: node.name,
+          name: node.name,
+        })) || [],
+    },
+    loading,
+  ];
+};
+
+export const SelectGQL = props => (
+  <SearchSelect
+    {...props}
+    variant={SelectVariant.typeaheadMulti}
+    useNameSearch={useNameSearchGQL}
+  />
+);

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

@@ -1,25 +1,100 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Chip, ChipGroup } from '@patternfly/react-core';
+import { Chip, ChipGroup, Button } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { hostMethods } from '../../JobWizardConstants';
 
-export const SelectedChips = ({ selected, setSelected }) => {
+const SelectedChip = ({ selected, setSelected, categoryName }) => {
   const deleteItem = itemToRemove => {
     setSelected(oldSelected =>
-      oldSelected.filter(item => item !== itemToRemove)
+      oldSelected.filter(({ id }) => id !== itemToRemove)
     );
   };
   return (
-    <ChipGroup className="hosts-chip-group">
-      {selected.map(chip => (
-        <Chip key={chip} id={chip} onClick={() => deleteItem(chip)}>
-          {chip}
+    <ChipGroup className="hosts-chip-group" categoryName={categoryName}>
+      {selected.map(({ name, id }, index) => (
+        <Chip
+          key={index}
+          id={id}
+          onClick={() => deleteItem(id)}
+          closeBtnAriaLabel={`Close ${name}`}
+        >
+          {name}
         </Chip>
       ))}
     </ChipGroup>
   );
 };
 
+export const SelectedChips = ({
+  selectedHosts,
+  setSelectedHosts,
+  selectedHostCollections,
+  setSelectedHostCollections,
+  selectedHostGroups,
+  setSelectedHostGroups,
+  hostsSearchQuery,
+  clearSearch,
+}) => {
+  const clearAll = () => {
+    setSelectedHosts(() => []);
+    setSelectedHostCollections(() => []);
+    setSelectedHostGroups(() => []);
+    clearSearch();
+  };
+  const showClear =
+    selectedHosts.length ||
+    selectedHostCollections.length ||
+    selectedHostGroups.length ||
+    hostsSearchQuery;
+  return (
+    <div className="selected-chips">
+      <SelectedChip
+        selected={selectedHosts}
+        categoryName={hostMethods.hosts}
+        setSelected={setSelectedHosts}
+      />
+      <SelectedChip
+        selected={selectedHostCollections}
+        categoryName={hostMethods.hostCollections}
+        setSelected={setSelectedHostCollections}
+      />
+      <SelectedChip
+        selected={selectedHostGroups}
+        categoryName={hostMethods.hostGroups}
+        setSelected={setSelectedHostGroups}
+      />
+      <SelectedChip
+        selected={
+          hostsSearchQuery
+            ? [{ id: hostsSearchQuery, name: hostsSearchQuery }]
+            : []
+        }
+        categoryName={hostMethods.searchQuery}
+        setSelected={clearSearch}
+      />
+      {showClear && (
+        <Button variant="link" className="clear-chips" onClick={clearAll}>
+          {__('Clear filters')}
+        </Button>
+      )}
+    </div>
+  );
+};
+
 SelectedChips.propTypes = {
+  selectedHosts: PropTypes.array.isRequired,
+  setSelectedHosts: PropTypes.func.isRequired,
+  selectedHostCollections: PropTypes.array.isRequired,
+  setSelectedHostCollections: PropTypes.func.isRequired,
+  selectedHostGroups: PropTypes.array.isRequired,
+  setSelectedHostGroups: PropTypes.func.isRequired,
+  hostsSearchQuery: PropTypes.string.isRequired,
+  clearSearch: PropTypes.func.isRequired,
+};
+
+SelectedChip.propTypes = {
+  categoryName: PropTypes.string.isRequired,
   selected: PropTypes.array.isRequired,
   setSelected: PropTypes.func.isRequired,
 };

data/webpack/JobWizard/steps/HostsAndInputs/__tests__/HostsAndInputs.test.js

@@ -0,0 +1,151 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { fireEvent, screen, render, act } from '@testing-library/react';
+import { MockedProvider } from '@apollo/client/testing';
+import * as api from 'foremanReact/redux/API';
+import * as routerSelectors from 'foremanReact/routes/RouterSelector';
+import { JobWizard } from '../../../JobWizard';
+import * as selectors from '../../../JobWizardSelectors';
+import { testSetup, mockApi, gqlMock } from '../../../__tests__/fixtures';
+
+const store = testSetup(selectors, api);
+mockApi(api);
+const lodash = require('lodash');
+
+lodash.debounce = fn => fn;
+
+describe('Hosts', () => {
+  it('Host selection chips removal and keep state between steps', async () => {
+    render(
+      <MockedProvider mocks={gqlMock} addTypename={false}>
+        <Provider store={store}>
+          <JobWizard />
+        </Provider>
+      </MockedProvider>
+    );
+    await act(async () => {
+      fireEvent.click(screen.getByText('Target hosts and inputs'));
+      await new Promise(resolve => setTimeout(resolve, 0)); // to resolve gql
+    });
+    const select = name =>
+      screen.getByRole('button', { name: `${name} toggle` });
+    fireEvent.click(select('hosts'));
+    await act(async () => {
+      fireEvent.click(screen.getByText('host1'));
+      fireEvent.click(screen.getByText('host2'));
+    });
+    fireEvent.click(
+      screen.getByText('Hosts', { selector: '.pf-c-select__toggle-text' })
+    );
+    await act(async () => {
+      fireEvent.click(screen.getByText('Host groups'));
+    });
+    fireEvent.click(select('host groups'));
+    await act(async () => {
+      fireEvent.click(screen.getByText('host_group1'));
+    });
+
+    fireEvent.click(
+      screen.getByText('Host groups', { selector: '.pf-c-select__toggle-text' })
+    );
+    await act(async () => {
+      fireEvent.click(screen.getByText('Host collections'));
+    });
+    fireEvent.click(select('host collections'));
+    await act(async () => {
+      fireEvent.click(screen.getByText('host_collection1'));
+    });
+
+    expect(screen.queryAllByText('host1')).toHaveLength(1);
+    expect(screen.queryAllByText('host2')).toHaveLength(1);
+    expect(screen.queryAllByText('host3')).toHaveLength(0);
+    const chip1 = screen.getByRole('button', { name: 'Close host1 host1' });
+    await act(async () => {
+      fireEvent.click(chip1);
+    });
+    expect(screen.queryAllByText('host1')).toHaveLength(0);
+    expect(screen.queryAllByText('host3')).toHaveLength(0);
+    expect(screen.queryAllByText('host2')).toHaveLength(1);
+    expect(screen.queryAllByText('host_group1')).toHaveLength(1);
+    expect(screen.queryAllByText('host_collection1')).toHaveLength(1);
+
+    await act(async () => {
+      fireEvent.click(screen.getByText('Category and Template'));
+    });
+    await act(async () => {
+      fireEvent.click(screen.getByText('Target hosts and inputs'));
+    });
+    expect(screen.queryAllByText('host2')).toHaveLength(1);
+    expect(screen.queryAllByText('host_group1')).toHaveLength(1);
+
+    await act(async () => {
+      fireEvent.click(screen.getByText('Clear filters'));
+    });
+
+    expect(screen.queryAllByText('host2')).toHaveLength(0);
+    expect(screen.queryAllByText('host_group1')).toHaveLength(0);
+  });
+  it('Host Collection isnt shown without katello', async () => {
+    selectors.selectWithKatello.mockImplementation(() => false);
+    render(
+      <MockedProvider mocks={gqlMock} addTypename={false}>
+        <Provider store={store}>
+          <JobWizard />
+        </Provider>
+      </MockedProvider>
+    );
+    await act(async () => {
+      fireEvent.click(screen.getByText('Target hosts and inputs'));
+    });
+
+    expect(screen.queryAllByText('Hosts')).toHaveLength(1);
+    await act(async () => {
+      fireEvent.click(
+        screen.getByText('Hosts', { selector: '.pf-c-select__toggle-text' })
+      );
+    });
+    expect(screen.queryAllByText('Host groups')).toHaveLength(1);
+    expect(screen.queryAllByText('Search query')).toHaveLength(1);
+    expect(screen.queryAllByText('Host collections')).toHaveLength(0);
+  });
+  it('Host fill list from url', async () => {
+    routerSelectors.selectRouterLocation.mockImplementation(() => ({
+      search: '?host_ids%5B%5D=host1&host_ids%5B%5D=host3',
+    }));
+    render(
+      <MockedProvider mocks={gqlMock} addTypename={false}>
+        <Provider store={store}>
+          <JobWizard />
+        </Provider>
+      </MockedProvider>
+    );
+    await act(async () => {
+      fireEvent.click(screen.getByText('Target hosts and inputs'));
+    });
+    api.get.mock.calls.forEach(call => {
+      if (call[0].key === 'HOST_IDS') {
+        expect(call[0].params).toEqual({ search: 'id = host1 or id = host3' });
+      }
+    });
+
+    expect(screen.queryAllByText('host1')).toHaveLength(1);
+    expect(screen.queryAllByText('host2')).toHaveLength(0);
+    expect(screen.queryAllByText('host3')).toHaveLength(1);
+  });
+  it('Host fill search from url', async () => {
+    routerSelectors.selectRouterLocation.mockImplementation(() => ({
+      search: 'search=os=gnome',
+    }));
+    render(
+      <MockedProvider mocks={gqlMock} addTypename={false}>
+        <Provider store={store}>
+          <JobWizard />
+        </Provider>
+      </MockedProvider>
+    );
+    await act(async () => {
+      fireEvent.click(screen.getByText('Target hosts and inputs'));
+    });
+    expect(screen.queryAllByText('os=gnome')).toHaveLength(1);
+  });
+});

data/webpack/JobWizard/steps/HostsAndInputs/__tests__/TemplateInputs.test.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import { Provider } from 'react-redux';
 import { fireEvent, screen, render, act } from '@testing-library/react';
+import { MockedProvider } from '@apollo/client/testing';
 import * as api from 'foremanReact/redux/API';
 import { JobWizard } from '../../../JobWizard';
 import * as selectors from '../../../JobWizardSelectors';
-import { testSetup, mockApi } from '../../../__tests__/fixtures';
+import { testSetup, mockApi, gqlMock } from '../../../__tests__/fixtures';
 import { WIZARD_TITLES } from '../../../JobWizardConstants';
 
 const store = testSetup(selectors, api);
@@ -13,9 +14,11 @@ mockApi(api);
 describe('TemplateInputs', () => {
   it('should save data between steps for template input fields', async () => {
     render(
-      <Provider store={store}>
-        <JobWizard />
-      </Provider>
+      <MockedProvider mocks={gqlMock} addTypename={false}>
+        <Provider store={store}>
+          <JobWizard />
+        </Provider>
+      </MockedProvider>
     );
     await act(async () => {
       fireEvent.click(screen.getByText(WIZARD_TITLES.hostsAndInputs));

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

@@ -0,0 +1,18 @@
+export const buildHostQuery = (selected, search) => {
+  const { hosts, hostCollections, hostGroups } = selected;
+  const hostsSearch = `(name ^ (${hosts.map(({ id }) => id).join(',')}))`;
+  const hostCollectionsSearch = `(host_collection_id ^ (${hostCollections
+    .map(({ id }) => id)
+    .join(',')}))`;
+  const hostGroupsSearch = `(hostgroup_id ^ (${hostGroups
+    .map(({ id }) => id)
+    .join(',')}))`;
+  return [
+    hosts.length ? hostsSearch : false,
+    hostCollections.length ? hostCollectionsSearch : false,
+    hostGroups.length ? hostGroupsSearch : false,
+    search.length ? `(${search})` : false,
+  ]
+    .filter(Boolean)
+    .join(' or ');
+};

data/webpack/JobWizard/steps/HostsAndInputs/hostgroups.gql

@@ -0,0 +1,8 @@
+query($search: String!) {
+  hostgroups(first: 100, last: 100, search: $search) {
+    totalCount
+    nodes {
+      name
+    }
+  }
+}

data/webpack/JobWizard/steps/HostsAndInputs/hosts.gql

@@ -0,0 +1,8 @@
+query($search: String!) {
+  hosts(first: 100, last: 100, search: $search) {
+    totalCount
+    nodes {
+      name
+    }
+  }
+}

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

@@ -1,66 +1,214 @@
-import React, { useState } from 'react';
-import { Button, Form, FormGroup } from '@patternfly/react-core';
+import React, { useEffect, useState } from 'react';
+import {
+  Button,
+  Form,
+  FormGroup,
+  InputGroup,
+  Text,
+  Spinner,
+} from '@patternfly/react-core';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
+import { FilterIcon } from '@patternfly/react-icons';
+import { debounce } from 'lodash';
+import { get } from 'foremanReact/redux/API';
 import { translate as __ } from 'foremanReact/common/I18n';
-import { selectTemplateInputs } from '../../JobWizardSelectors';
+import { resetData } from 'foremanReact/components/AutoComplete/AutoCompleteActions';
+import {
+  selectTemplateInputs,
+  selectWithKatello,
+  selectHostCount,
+  selectIsLoadingHosts,
+} from '../../JobWizardSelectors';
 import { SelectField } from '../form/SelectField';
 import { SelectedChips } from './SelectedChips';
 import { TemplateInputs } from './TemplateInputs';
-import { WIZARD_TITLES } from '../../JobWizardConstants';
+import { HostSearch } from './HostSearch';
+import { HostPreviewModal } from './HostPreviewModal';
+import {
+  WIZARD_TITLES,
+  HOSTS,
+  HOST_COLLECTIONS,
+  HOST_GROUPS,
+  hostMethods,
+  hostsController,
+  hostQuerySearchID,
+  HOSTS_API,
+  HOSTS_TO_PREVIEW_AMOUNT,
+  DEBOUNCE_HOST_COUNT,
+} from '../../JobWizardConstants';
 import { WizardTitle } from '../form/WizardTitle';
+import { SelectAPI } from './SelectAPI';
+import { SelectGQL } from './SelectGQL';
+import { buildHostQuery } from './buildHostQuery';
 
 const HostsAndInputs = ({
   templateValues,
   setTemplateValues,
-  selectedHosts,
-  setSelectedHosts,
+  selected,
+  setSelected,
+  hostsSearchQuery,
+  setHostsSearchQuery,
 }) => {
+  const [hostMethod, setHostMethod] = useState(hostMethods.hosts);
+  const isLoading = useSelector(selectIsLoadingHosts);
   const templateInputs = useSelector(selectTemplateInputs);
-  const hostMethods = [
-    __('Hosts'),
-    __('Host collection'),
-    __('Host group'),
-    __('Search query'),
-  ];
-  const [hostMethod, setHostMethod] = useState(hostMethods[0]);
+  const [hostPreviewOpen, setHostPreviewOpen] = useState(false);
+  useEffect(() => {
+    debounce(() => {
+      dispatch(
+        get({
+          key: HOSTS_API,
+          url: '/api/hosts',
+          params: {
+            search: buildHostQuery(selected, hostsSearchQuery),
+            per_page: HOSTS_TO_PREVIEW_AMOUNT,
+          },
+        })
+      );
+    }, DEBOUNCE_HOST_COUNT)();
+  }, [
+    dispatch,
+    selected,
+    selected.hosts,
+    selected.hostCollections,
+    selected.hostCollections,
+    hostsSearchQuery,
+  ]);
+  const withKatello = useSelector(selectWithKatello);
+  const hostCount = useSelector(selectHostCount);
+  const dispatch = useDispatch();
+
+  const selectedHosts = selected.hosts;
+  const setSelectedHosts = newSelected =>
+    setSelected(prevSelected => ({
+      ...prevSelected,
+      hosts: newSelected(prevSelected.hosts),
+    }));
+  const selectedHostCollections = selected.hostCollections;
+  const setSelectedHostCollections = newSelected =>
+    setSelected(prevSelected => ({
+      ...prevSelected,
+      hostCollections: newSelected(prevSelected.hostCollections),
+    }));
+  const selectedHostGroups = selected.hostGroups;
+  const setSelectedHostGroups = newSelected => {
+    setSelected(prevSelected => ({
+      ...prevSelected,
+      hostGroups: newSelected(prevSelected.hostGroups),
+    }));
+  };
+
+  const clearSearch = () => {
+    dispatch(resetData(hostsController, hostQuerySearchID));
+    setHostsSearchQuery('');
+  };
   return (
-    <>
+    <div className="target-hosts-and-inputs">
       <WizardTitle title={WIZARD_TITLES.hostsAndInputs} />
+      {hostPreviewOpen && (
+        <HostPreviewModal
+          isOpen={hostPreviewOpen}
+          setIsOpen={setHostPreviewOpen}
+          searchQuery={buildHostQuery(selected, hostsSearchQuery)}
+        />
+      )}
       <Form>
-        <FormGroup fieldId="host_selection">
-          <SelectField
-            fieldId="host_methods"
-            options={hostMethods}
-            setValue={setHostMethod}
-            value={hostMethod}
-          />
-          <SelectedChips
-            selected={selectedHosts}
-            setSelected={setSelectedHosts}
-          />
+        <FormGroup fieldId="host_selection" id="host-selection">
+          <InputGroup>
+            <SelectField
+              isRequired
+              className="target-method-select"
+              toggleIcon={<FilterIcon />}
+              fieldId="host_methods"
+              options={Object.values(hostMethods).filter(method => {
+                if (method === hostMethods.hostCollections && !withKatello) {
+                  return false;
+                }
+                return true;
+              })}
+              setValue={setHostMethod}
+              value={hostMethod}
+            />
+            {hostMethod === hostMethods.searchQuery && (
+              <HostSearch
+                setValue={setHostsSearchQuery}
+                value={hostsSearchQuery}
+              />
+            )}
+            {hostMethod === hostMethods.hosts && (
+              <SelectGQL
+                selected={selectedHosts}
+                setSelected={setSelectedHosts}
+                apiKey={HOSTS}
+                name="hosts"
+                placeholderText={__('Filter by hosts')}
+              />
+            )}
+            {hostMethod === hostMethods.hostCollections && (
+              <SelectAPI
+                selected={selectedHostCollections}
+                setSelected={setSelectedHostCollections}
+                apiKey={HOST_COLLECTIONS}
+                name="host collections"
+                url="/katello/api/host_collections?per_page=100"
+                placeholderText={__('Filter by host collections')}
+              />
+            )}
+            {hostMethod === hostMethods.hostGroups && (
+              <SelectGQL
+                selected={selectedHostGroups}
+                setSelected={setSelectedHostGroups}
+                apiKey={HOST_GROUPS}
+                name="host groups"
+                placeholderText={__('Filter by host groups')}
+              />
+            )}
+          </InputGroup>
         </FormGroup>
-        <span>
+        <SelectedChips
+          selectedHosts={selectedHosts}
+          setSelectedHosts={setSelectedHosts}
+          selectedHostCollections={selectedHostCollections}
+          setSelectedHostCollections={setSelectedHostCollections}
+          selectedHostGroups={selectedHostGroups}
+          setSelectedHostGroups={setSelectedHostGroups}
+          hostsSearchQuery={hostsSearchQuery}
+          clearSearch={clearSearch}
+        />
+        <Text>
           {__('Apply to')}{' '}
-          <Button variant="link" isInline>
-            {selectedHosts.length} {__('hosts')}
-          </Button>
-        </span>
+          <Button
+            variant="link"
+            isInline
+            onClick={() => setHostPreviewOpen(true)}
+            isDisabled={isLoading}
+          >
+            {hostCount} {__('hosts')}
+          </Button>{' '}
+          {isLoading && <Spinner size="sm" />}
+        </Text>
         <TemplateInputs
           inputs={templateInputs}
           value={templateValues}
           setValue={setTemplateValues}
         />
       </Form>
-    </>
+    </div>
   );
 };
 
 HostsAndInputs.propTypes = {
   templateValues: PropTypes.object.isRequired,
   setTemplateValues: PropTypes.func.isRequired,
-  selectedHosts: PropTypes.array.isRequired,
-  setSelectedHosts: PropTypes.func.isRequired,
+  selected: PropTypes.shape({
+    hosts: PropTypes.array.isRequired,
+    hostCollections: PropTypes.array.isRequired,
+    hostGroups: PropTypes.array.isRequired,
+  }).isRequired,
+  setSelected: PropTypes.func.isRequired,
+  hostsSearchQuery: PropTypes.string.isRequired,
+  setHostsSearchQuery: PropTypes.func.isRequired,
 };
 
 export default HostsAndInputs;