foreman_remote_execution 6.0.0 → 7.0.0

data/webpack/JobWizard/JobWizardConstants.js

@@ -19,9 +19,9 @@ export const repeatTypes = {
 export const WIZARD_TITLES = {
   categoryAndTemplate: __('Category and Template'),
   hostsAndInputs: __('Target hosts and inputs'),
-  advanced: __('Advanced Fields'),
+  advanced: __('Advanced fields'),
   schedule: __('Schedule'),
-  review: __('Review Details'),
+  review: __('Review details'),
 };
 
 export const initialScheduleState = {

data/webpack/JobWizard/__tests__/fixtures.js

@@ -193,7 +193,11 @@ export const gqlMock = [
       data: {
         hosts: {
           totalCount: 3,
-          nodes: [{ name: 'host1' }, { name: 'host2' }, { name: 'host3' }],
+          nodes: [
+            { id: 'MDE6SG9zdC0x', name: 'host1' },
+            { id: 'MDE6SG9zdC0y', name: 'host2' },
+            { id: 'MDE6SG9zdC0z', name: 'host3' },
+          ],
         },
       },
     },
@@ -211,9 +215,9 @@ export const gqlMock = [
         hostgroups: {
           totalCount: 3,
           nodes: [
-            { name: 'host_group1' },
-            { name: 'host_group2' },
-            { name: 'host_group3' },
+            { id: 'MDE6SG9zdGdyb3VwLTE=', name: 'host_group1' },
+            { id: 'MDE6SG9zdGdyb3VwLTI=', name: 'host_group2' },
+            { id: 'MDE6SG9zdGdyb3VwLTM=', name: 'host_group3' },
           ],
         },
       },

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

@@ -143,7 +143,7 @@ describe('AdvancedFields', () => {
     );
 
     await act(async () => {
-      fireEvent.click(screen.getByText('Advanced Fields'));
+      fireEvent.click(screen.getByText('Advanced fields'));
     });
     expect(textField.value).toBe(textValue);
     expect(searchField.value).toBe(searchValue);
@@ -162,7 +162,7 @@ describe('AdvancedFields', () => {
       </MockedProvider>
     );
     await act(async () => {
-      fireEvent.click(screen.getByText('Advanced Fields'));
+      fireEvent.click(screen.getByText('Advanced fields'));
     });
 
     expect(

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

@@ -1,11 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
 import { Text, TextVariants, Form, Alert } from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { SelectField } from '../form/SelectField';
 import { GroupedSelectField } from '../form/GroupedSelectField';
 import { WizardTitle } from '../form/WizardTitle';
-import { WIZARD_TITLES } from '../../JobWizardConstants';
+import { WIZARD_TITLES, JOB_TEMPLATES } from '../../JobWizardConstants';
+import { selectIsLoading } from '../../JobWizardSelectors';
 
 export const CategoryAndTemplate = ({
   jobCategories,
@@ -17,18 +19,23 @@ export const CategoryAndTemplate = ({
   errors,
 }) => {
   const templatesGroups = {};
-  jobTemplates.forEach(template => {
-    if (templatesGroups[template.provider_type]?.options)
-      templatesGroups[template.provider_type].options.push({
-        label: template.name,
-        value: template.id,
-      });
-    else
-      templatesGroups[template.provider_type] = {
-        options: [{ label: template.name, value: template.id }],
-        groupLabel: template.provider_type,
-      };
-  });
+  const isTemplatesLoading = useSelector(state =>
+    selectIsLoading(state, JOB_TEMPLATES)
+  );
+  if (!isTemplatesLoading) {
+    jobTemplates.forEach(template => {
+      if (templatesGroups[template.provider_type]?.options)
+        templatesGroups[template.provider_type].options.push({
+          label: template.name,
+          value: template.id,
+        });
+      else
+        templatesGroups[template.provider_type] = {
+          options: [{ label: template.name, value: template.id }],
+          groupLabel: template.provider_type,
+        };
+    });
+  }
 
   const selectedTemplate = jobTemplates.find(
     template => template.id === selectedTemplateID
@@ -60,8 +67,10 @@ export const CategoryAndTemplate = ({
           fieldId="job_template"
           groups={Object.values(templatesGroups)}
           setSelected={setJobTemplate}
-          selected={selectedTemplate}
-          isDisabled={!!(categoryError || allTemplatesError)}
+          selected={isTemplatesLoading ? [] : selectedTemplate}
+          isDisabled={
+            !!(categoryError || allTemplatesError || isTemplatesLoading)
+          }
           placeholderText={allTemplatesError ? __('Error') : ''}
         />
         {isError && (

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

@@ -5,6 +5,7 @@ import {
   useForemanOrganization,
   useForemanLocation,
 } from 'foremanReact/Root/Context/ForemanContext';
+import { decodeId } from 'foremanReact/common/globalIdHelpers';
 import { HOSTS, HOST_GROUPS, dataName } from '../../JobWizardConstants';
 import { SearchSelect } from '../form/SearchSelect';
 import hostsQuery from './hosts.gql';
@@ -35,7 +36,7 @@ export const useNameSearchGQL = apiKey => {
       subtotal: data?.[dataName[apiKey]]?.totalCount,
       results:
         data?.[dataName[apiKey]]?.nodes.map(node => ({
-          id: node.name,
+          id: decodeId(node.id),
           name: node.name,
         })) || [],
     },

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

@@ -15,7 +15,7 @@ const SelectedChip = ({ selected, setSelected, categoryName }) => {
       {selected.map(({ name, id }, index) => (
         <Chip
           key={index}
-          id={id}
+          id={`${categoryName}-${id}`}
           onClick={() => deleteItem(id)}
           closeBtnAriaLabel={`Close ${name}`}
         >

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

@@ -1,6 +1,6 @@
 export const buildHostQuery = (selected, search) => {
   const { hosts, hostCollections, hostGroups } = selected;
-  const hostsSearch = `(name ^ (${hosts.map(({ id }) => id).join(',')}))`;
+  const hostsSearch = `(id ^ (${hosts.map(({ id }) => id).join(',')}))`;
   const hostCollectionsSearch = `(host_collection_id ^ (${hostCollections
     .map(({ id }) => id)
     .join(',')}))`;

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

@@ -2,6 +2,7 @@ query($search: String!) {
   hostgroups(first: 100, last: 100, search: $search) {
     totalCount
     nodes {
+      id
       name
     }
   }

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

@@ -2,6 +2,7 @@ query($search: String!) {
   hosts(first: 100, last: 100, search: $search) {
     totalCount
     nodes {
+      id
       name
     }
   }

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

@@ -72,7 +72,7 @@ const ReviewDetails = ({
   };
   const [isAdvancedShown, setIsAdvancedShown] = useState(false);
   const detailsFirstHalf = [
-    { label: __('Job Category'), value: jobCategory },
+    { label: __('Job category'), value: jobCategory },
     { label: __('Job template'), value: jobTemplate },
     { label: __('Target hosts'), value: stringHosts() },
     ...templateInputs.map(({ name }) => ({

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

@@ -186,7 +186,7 @@ describe('Schedule', () => {
     expect(
       screen.getByPlaceholderText('Repeat N times').hasAttribute('disabled')
     ).toBeTruthy();
-    expect(screen.getByText('Review Details').disabled).toBeFalsy();
+    expect(screen.getByText('Review details').disabled).toBeFalsy();
     await act(async () => {
       fireEvent.click(
         screen.getByLabelText('Does not repeat', { selector: 'button' })
@@ -196,7 +196,7 @@ describe('Schedule', () => {
     await act(async () => {
       fireEvent.click(screen.getByText('Cronline'));
     });
-    expect(screen.getByText('Review Details').disabled).toBeTruthy();
+    expect(screen.getByText('Review details').disabled).toBeTruthy();
     const newRepeatTimes = '3';
     const repeatNTimes = screen.getByPlaceholderText('Repeat N times');
     expect(repeatNTimes.value).toBe('');
@@ -216,7 +216,7 @@ describe('Schedule', () => {
       });
     });
     expect(cronline.value).toBe(newCronline);
-    expect(screen.getByText('Review Details').disabled).toBeFalsy();
+    expect(screen.getByText('Review details').disabled).toBeFalsy();
 
     await act(async () => {
       fireEvent.click(screen.getByText('Category and Template'));
@@ -236,7 +236,7 @@ describe('Schedule', () => {
       fireEvent.click(screen.getByText('Monthly'));
     });
 
-    expect(screen.getByText('Review Details').disabled).toBeTruthy();
+    expect(screen.getByText('Review details').disabled).toBeTruthy();
     const newDays = '1,2,3';
     const days = screen.getByLabelText('days');
     expect(days.value).toBe('');
@@ -248,7 +248,7 @@ describe('Schedule', () => {
     });
     expect(days.value).toBe(newDays);
 
-    expect(screen.getByText('Review Details').disabled).toBeTruthy();
+    expect(screen.getByText('Review details').disabled).toBeTruthy();
     const newAtMonthly = '13:07';
     const at = () => screen.getByLabelText('repeat-at');
     expect(at().value).toBe('');
@@ -259,13 +259,13 @@ describe('Schedule', () => {
     });
     expect(at().value).toBe(newAtMonthly);
 
-    expect(screen.getByText('Review Details').disabled).toBeFalsy();
+    expect(screen.getByText('Review details').disabled).toBeFalsy();
     fireEvent.click(screen.getByText('Monthly'));
     await act(async () => {
       fireEvent.click(screen.getByText('Weekly'));
     });
 
-    expect(screen.getByText('Review Details').disabled).toBeTruthy();
+    expect(screen.getByText('Review details').disabled).toBeTruthy();
     const dayTue = screen.getByLabelText('Tue checkbox');
     const daySat = screen.getByLabelText('Sat checkbox');
     expect(dayTue.checked).toBe(false);
@@ -293,19 +293,19 @@ describe('Schedule', () => {
     });
     expect(at().value).toBe(newAtWeekly);
 
-    expect(screen.getByText('Review Details').disabled).toBeFalsy();
+    expect(screen.getByText('Review details').disabled).toBeFalsy();
     fireEvent.click(screen.getByText('Weekly'));
     await act(async () => {
       fireEvent.click(screen.getByText('Daily'));
     });
 
-    expect(screen.getByText('Review Details').disabled).toBeFalsy();
+    expect(screen.getByText('Review details').disabled).toBeFalsy();
     await act(async () => {
       fireEvent.change(at(), {
         target: { value: '' },
       });
     });
-    expect(screen.getByText('Review Details').disabled).toBeTruthy();
+    expect(screen.getByText('Review details').disabled).toBeTruthy();
     const newAtDaily = '17:07';
     expect(at().value).toBe('');
     await act(async () => {
@@ -314,14 +314,14 @@ describe('Schedule', () => {
       });
     });
     expect(at().value).toBe(newAtDaily);
-    expect(screen.getByText('Review Details').disabled).toBeFalsy();
+    expect(screen.getByText('Review details').disabled).toBeFalsy();
 
     fireEvent.click(screen.getByText('Daily'));
     await act(async () => {
       fireEvent.click(screen.getByText('Hourly'));
     });
 
-    expect(screen.getByText('Review Details').disabled).toBeTruthy();
+    expect(screen.getByText('Review details').disabled).toBeTruthy();
     const newMinutes = '6';
     const atHourly = screen.getByLabelText('repeat-at-minute-typeahead');
     expect(atHourly.value).toBe('');
@@ -331,7 +331,7 @@ describe('Schedule', () => {
     await act(async () => {
       fireEvent.click(screen.getByText(newMinutes));
     });
-    expect(screen.getByText('Review Details').disabled).toBeFalsy();
+    expect(screen.getByText('Review details').disabled).toBeFalsy();
     expect(atHourly.value).toBe(newMinutes);
   });
   it('should show invalid error on start date after end', async () => {
@@ -353,7 +353,7 @@ describe('Schedule', () => {
     expect(
       screen.queryAllByText('End time needs to be after start time')
     ).toHaveLength(0);
-    expect(screen.getByText('Review Details').disabled).toBeFalsy();
+    expect(screen.getByText('Review details').disabled).toBeFalsy();
     await act(async () => {
       await fireEvent.change(startsDateField, {
         target: { value: '2020/10/15' },
@@ -368,7 +368,7 @@ describe('Schedule', () => {
       screen.queryAllByText('End time needs to be after start time')
     ).toHaveLength(1);
 
-    expect(screen.getByText('Review Details').disabled).toBeTruthy();
+    expect(screen.getByText('Review details').disabled).toBeTruthy();
   });
   it('purpose and ends should be disabled when no reaccurence ', async () => {
     render(

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

@@ -69,6 +69,8 @@ export const GroupedSelectField = ({
         className="without_select2"
         onClear={onClear}
         menuAppendTo={() => document.body}
+        aria-labelledby={fieldId}
+        toggleAriaLabel={`${label} toggle`}
         {...props}
       >
         {options}
@@ -81,7 +83,11 @@ GroupedSelectField.propTypes = {
   label: PropTypes.string.isRequired,
   fieldId: PropTypes.string.isRequired,
   groups: PropTypes.array,
-  selected: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  selected: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.array,
+  ]),
   setSelected: PropTypes.func.isRequired,
 };
 

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

@@ -93,7 +93,6 @@ export const SearchSelect = ({
         autoSearch(value || '');
       }}
       placeholderText={placeholderText}
-      onFilter={() => null} // https://github.com/patternfly/patternfly-react/issues/6321
       typeAheadAriaLabel={`${name} typeahead input`}
     >
       {selectOptions}

data/webpack/__mocks__/foremanReact/common/globalIdHelpers.js

@@ -0,0 +1 @@
+export const decodeId = whatever => whatever;

data/webpack/global_index.js

@@ -1,10 +1,8 @@
 import { registerRoutes } from 'foremanReact/routes/RoutingService';
 import routes from './Routes/routes';
-import fillregistrationAdvanced from './react_app/extend/fillregistrationAdvanced';
-import fillRecentJobsCard from './react_app/extend/fillRecentJobsCard';
 import registerReducers from './react_app/extend/reducers';
+import registerFills from './react_app/extend/Fills';
 
 registerReducers();
 registerRoutes('foreman_remote_execution', routes);
-fillRecentJobsCard();
-fillregistrationAdvanced();
+registerFills();

data/webpack/react_app/components/FeaturesDropdown/actions.js

@@ -0,0 +1,13 @@
+import { foremanUrl } from 'foremanReact/common/helpers';
+import { sprintf, translate as __ } from 'foremanReact/common/I18n';
+import { post } from 'foremanReact/redux/API';
+
+export const runFeature = (hostId, feature, label) => dispatch => {
+  const url = foremanUrl(
+    `/job_invocations?feature=${feature}&host_ids%5B%5D=${hostId}`
+  );
+
+  const successToast = () => sprintf(__('%s job has been invoked'), label);
+  const errorToast = ({ message }) => message;
+  dispatch(post({ key: feature.toUpperCase(), url, successToast, errorToast }));
+};

data/webpack/react_app/components/FeaturesDropdown/constant.js

@@ -0,0 +1,2 @@
+export const REX_FEATURES_API = '/api/remote_execution_features';
+export const NEW_JOB_PAGE = '/job_invocations/new?host_ids%5B%5D';

data/webpack/react_app/components/FeaturesDropdown/index.js

@@ -0,0 +1,74 @@
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import {
+  DropdownItem,
+  Dropdown,
+  DropdownToggle,
+  DropdownToggleAction,
+} from '@patternfly/react-core';
+import { push } from 'connected-react-router';
+
+import { useAPI } from 'foremanReact/common/hooks/API/APIHooks';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { foremanUrl } from 'foremanReact/common/helpers';
+import { STATUS } from 'foremanReact/constants';
+
+import { REX_FEATURES_API, NEW_JOB_PAGE } from './constant';
+import { runFeature } from './actions';
+
+const FeaturesDropdown = ({ hostId }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const {
+    response: { results: features },
+    status,
+  } = useAPI('get', foremanUrl(REX_FEATURES_API));
+
+  const dispatch = useDispatch();
+  const dropdownItems = features
+    ?.filter(feature => feature.host_action_button)
+    ?.map(({ name, label, id, description }) => (
+      <DropdownItem
+        onClick={() => dispatch(runFeature(hostId, label, name))}
+        key={id}
+        description={description}
+      >
+        {name}
+      </DropdownItem>
+    ));
+  const scheduleJob = [
+    <DropdownToggleAction
+      onClick={() => dispatch(push(`${NEW_JOB_PAGE}=${hostId}`))}
+      key="schedule-job-action"
+    >
+      {__('Schedule a job')}
+    </DropdownToggleAction>,
+  ];
+
+  return (
+    <Dropdown
+      alignments={{ default: 'right' }}
+      onSelect={() => setIsOpen(false)}
+      toggle={
+        <DropdownToggle
+          splitButtonItems={scheduleJob}
+          toggleVariant="primary"
+          onToggle={() => setIsOpen(prev => !prev)}
+          isDisabled={status === STATUS.PENDING}
+          splitButtonVariant="action"
+        />
+      }
+      isOpen={isOpen}
+      dropdownItems={dropdownItems}
+    />
+  );
+};
+
+FeaturesDropdown.propTypes = {
+  hostId: PropTypes.number,
+};
+FeaturesDropdown.defaultProps = {
+  hostId: undefined,
+};
+
+export default FeaturesDropdown;

data/webpack/react_app/components/HostKebab/KebabItems.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { DropdownItem } from '@patternfly/react-core';
+import { CodeIcon } from '@patternfly/react-icons';
+import { selectAPIResponse } from 'foremanReact/redux/API/APISelectors';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { HOST_DETAILS_KEY } from 'foremanReact/components/HostDetails/consts';
+
+const HostKebabItems = () => {
+  const { cockpit_url: consoleUrl } = useSelector(state =>
+    selectAPIResponse(state, HOST_DETAILS_KEY)
+  );
+
+  if (!consoleUrl) return null;
+  return (
+    <DropdownItem
+      icon={<CodeIcon />}
+      href={consoleUrl}
+      target="_blank"
+      rel="noreferrer"
+    >
+      {__('Web Console')}
+    </DropdownItem>
+  );
+};
+
+export default HostKebabItems;

data/webpack/react_app/components/RecentJobsCard/RecentJobsCard.js

@@ -28,7 +28,7 @@ const RecentJobsCard = ({ hostDetails: { name, id } }) => {
           href={foremanUrl(`${JOB_BASE_URL}${name}`)}
           key="link-to-all"
         >
-          {__('View All Jobs')}
+          {__('View all jobs')}
         </DropdownItem>,
         <DropdownItem
           href={foremanUrl(
@@ -36,23 +36,28 @@ const RecentJobsCard = ({ hostDetails: { name, id } }) => {
           )}
           key="link-to-finished"
         >
-          {__('View Finished Jobs')}
+          {__('View finished jobs')}
         </DropdownItem>,
         <DropdownItem
           href={foremanUrl(`${JOB_BASE_URL}${name}+and+status+%3D+running`)}
           key="link-to-running"
         >
-          {__('View Running Jobs')}
+          {__('View running jobs')}
         </DropdownItem>,
         <DropdownItem
           href={foremanUrl(`${JOB_BASE_URL}${name}+and+status+%3D+queued`)}
           key="link-to-scheduled"
         >
-          {__('View Scheduled Jobs')}
+          {__('View scheduled jobs')}
         </DropdownItem>,
       ]}
     >
-      <Tabs mountOnEnter activeKey={activeTab} onSelect={handleTabClick}>
+      <Tabs
+        mountOnEnter
+        unmountOnExit
+        activeKey={activeTab}
+        onSelect={handleTabClick}
+      >
         <Tab
           eventKey={FINISHED_TAB}
           title={<TabTitleText>{__('Finished')}</TabTitleText>}

data/webpack/react_app/components/RecentJobsCard/RecentJobsTable.js

@@ -19,7 +19,7 @@ import { translate as __ } from 'foremanReact/common/I18n';
 import { foremanUrl } from 'foremanReact/common/helpers';
 
 import JobStatusIcon from './JobStatusIcon';
-import { JOB_API_URL, JOBS_IN_CARD } from './constants';
+import { JOB_API_URL, JOBS_IN_CARD, RECENT_JOBS_KEY } from './constants';
 
 const RecentJobsTable = ({ status, hostId }) => {
   const jobsUrl =
@@ -30,7 +30,7 @@ const RecentJobsTable = ({ status, hostId }) => {
   const {
     response: { results: jobs },
     status: responseStatus,
-  } = useAPI('get', jobsUrl);
+  } = useAPI('get', jobsUrl, RECENT_JOBS_KEY);
 
   return (
     <DataList aria-label="recent-jobs-table" isCompact>

data/webpack/react_app/components/RecentJobsCard/constants.js

@@ -10,3 +10,4 @@ export const JOB_BASE_URL = '/job_invocations?search=host+%3D+';
 export const JOB_API_URL =
   '/api/job_invocations?order=start_at+DESC&search=targeted_host_id%3D';
 export const JOBS_IN_CARD = 3;
+export const RECENT_JOBS_KEY = { key: 'RECENT_JOBS_KEY' };

data/webpack/react_app/components/TargetingHosts/TargetingHostsConsts.js

@@ -1 +1,2 @@
 export const TARGETING_HOSTS = 'TARGETING_HOSTS';
+export const TARGETING_HOSTS_AUTOCOMPLETE = 'targeting_hosts_search';

data/webpack/react_app/components/TargetingHosts/TargetingHostsPage.js

@@ -7,6 +7,7 @@ import Pagination from 'foremanReact/components/Pagination';
 import { getControllerSearchProps } from 'foremanReact/constants';
 
 import TargetingHosts from './TargetingHosts';
+import { TARGETING_HOSTS_AUTOCOMPLETE } from './TargetingHostsConsts';
 import './TargetingHostsPage.scss';
 
 const TargetingHostsPage = ({
@@ -16,6 +17,7 @@ const TargetingHostsPage = ({
   items,
   totalHosts,
   handlePagination,
+  page,
 }) => (
   <div id="targeting_hosts">
     <Grid.Row>
@@ -23,24 +25,26 @@ const TargetingHostsPage = ({
         <SearchBar
           onSearch={query => handleSearch(query)}
           data={{
-            ...getControllerSearchProps('hosts'),
+            ...getControllerSearchProps('hosts', TARGETING_HOSTS_AUTOCOMPLETE),
             autocomplete: {
-              id: 'targeting_hosts_search',
+              id: TARGETING_HOSTS_AUTOCOMPLETE,
               searchQuery,
               url: '/hosts/auto_complete_search',
               useKeyShortcuts: true,
             },
-            bookmarks: {},
           }}
+          onBookmarkClick={handleSearch}
         />
       </Grid.Col>
     </Grid.Row>
     <br />
     <TargetingHosts apiStatus={apiStatus} items={items} />
     <Pagination
+      page={page}
       itemCount={totalHosts}
       onChange={args => handlePagination(args)}
       className="targeting-hosts-pagination"
+      updateParamsByUrl={false}
     />
   </div>
 );
@@ -52,6 +56,7 @@ TargetingHostsPage.propTypes = {
   items: PropTypes.array.isRequired,
   totalHosts: PropTypes.number.isRequired,
   handlePagination: PropTypes.func.isRequired,
+  page: PropTypes.number.isRequired,
 };
 
 TargetingHostsPage.defaultProps = {

data/webpack/react_app/components/TargetingHosts/__tests__/__snapshots__/TargetingHostsPage.test.js.snap

@@ -23,10 +23,16 @@ exports[`TargetingHostsPage renders 1`] = `
               "url": "/hosts/auto_complete_search",
               "useKeyShortcuts": true,
             },
-            "bookmarks": Object {},
+            "bookmarks": Object {
+              "canCreate": true,
+              "documentationUrl": "4.1.5Searching",
+              "id": "targeting_hosts_search",
+              "url": "/api/bookmarks",
+            },
             "controller": "hosts",
           }
         }
+        onBookmarkClick={[Function]}
         onChange={[Function]}
         onSearch={[Function]}
       />
@@ -56,6 +62,8 @@ exports[`TargetingHostsPage renders 1`] = `
     className="targeting-hosts-pagination"
     itemCount={1}
     onChange={[Function]}
+    page={1}
+    updateParamsByUrl={false}
   />
 </div>
 `;

data/webpack/react_app/components/TargetingHosts/__tests__/fixtures.js

@@ -50,10 +50,7 @@ export const TargetingHostsPageFixtures = {
     apiStatus: 'RESOLVED',
     items,
     totalHosts: 1,
-    pagination: {
-      page: 1,
-      perPage: 20,
-    },
+    page: 1,
     handlePagination: () => {},
   },
 };

data/webpack/react_app/components/TargetingHosts/index.js

@@ -89,6 +89,7 @@ const WrappedTargetingHosts = () => {
       items={items}
       totalHosts={totalHosts}
       handlePagination={handlePagination}
+      page={pagination.page}
     />
   );
 };