foreman_ansible 7.0.3 → 8.0.0

data/webpack/components/AnsibleHostDetail/components/RolesTab/AllRolesModal/index.js

@@ -27,7 +27,7 @@ const AllRolesModal = ({ hostGlobalId, onClose, history }) => {
     ),
   };
 
-  const paginationKeys = { page: 'allPage', perPage: 'allPerPage' };
+  const paginationKeys = { page: 'page', perPage: 'per_page' };
 
   const wrapper = child => <Modal {...baseModalProps}>{child}</Modal>;
 

data/webpack/components/AnsibleHostDetail/components/RolesTab/EditRolesModal/EditRolesForm.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { translate as __ } from 'foremanReact/common/I18n';
 import PropTypes from 'prop-types';
 
@@ -21,17 +21,17 @@ const EditRolesForm = props => {
     actions,
   } = props;
 
-  const [formState, setFormState] = useState({
-    availableOptions: [],
-    chosenOptions: [],
-  });
+  const [availableOptions, setAvailableOptions] = useState(
+    availableRoles.map(item => item.name)
+  );
+  const [chosenOptions, setChosenOptions] = useState(
+    assignedRoles.map(item => item.name)
+  );
 
-  useEffect(() => {
-    setFormState({
-      availableOptions: availableRoles.map(item => item.name),
-      chosenOptions: assignedRoles.map(item => item.name) || [],
-    });
-  }, [availableRoles, assignedRoles]);
+  const onListChange = (nextAvailable, nextChosen) => {
+    setAvailableOptions(nextAvailable);
+    setChosenOptions(nextChosen);
+  };
 
   const [callMutation, { loading }] = useMutation(assignAnsibleRoles, {
     onCompleted: onCompleted(closeModal),
@@ -42,7 +42,7 @@ const EditRolesForm = props => {
 
   const variables = {
     id: encodeId('Host', hostId),
-    ansibleRoleIds: roleNamesToIds(allRoles, formState.chosenOptions),
+    ansibleRoleIds: roleNamesToIds(allRoles, chosenOptions),
   };
 
   const formActions = [
@@ -65,14 +65,9 @@ const EditRolesForm = props => {
   return (
     <Modal {...baseModalProps} actions={formActions}>
       <DualList
-        availableOptions={formState.availableOptions}
-        chosenOptions={formState.chosenOptions}
-        onListChange={(newAvailable, newChosen) =>
-          setFormState({
-            availableOptions: newAvailable,
-            chosenOptions: newChosen,
-          })
-        }
+        availableOptions={availableOptions}
+        chosenOptions={chosenOptions}
+        onListChange={onListChange}
       />
     </Modal>
   );
@@ -80,11 +75,16 @@ const EditRolesForm = props => {
 
 EditRolesForm.propTypes = {
   closeModal: PropTypes.func.isRequired,
-  assignedRoles: PropTypes.array.isRequired,
-  availableRoles: PropTypes.array.isRequired,
+  assignedRoles: PropTypes.array,
+  availableRoles: PropTypes.array,
   actions: PropTypes.array.isRequired,
   hostId: PropTypes.number.isRequired,
   baseModalProps: PropTypes.object.isRequired,
 };
 
+EditRolesForm.defaultProps = {
+  assignedRoles: [],
+  availableRoles: [],
+};
+
 export default withLoading(EditRolesForm);

data/webpack/components/AnsibleHostDetail/components/RolesTab/EditRolesModal/index.js

@@ -54,6 +54,7 @@ const EditRolesModal = ({
 
   const renameData = data => ({
     availableRoles: data.host.availableAnsibleRoles.nodes,
+    assignedRoles,
   });
 
   return (
@@ -64,7 +65,7 @@ const EditRolesModal = ({
       baseModalProps={baseModalProps}
       fetchFn={useFetchFn}
       renameData={renameData}
-      renamedDataPath="availableRoles"
+      renamedDataPath="availableRoles.assignedRoles"
       assignedRoles={assignedRoles}
       closeModal={closeModal}
       hostId={hostId}

data/webpack/components/AnsibleHostDetail/components/RolesTab/RolesTable.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { Route, Link } from 'react-router-dom';
-import { usePaginationOptions } from 'foremanReact/components/Pagination/PaginationHooks';
+import Pagination from 'foremanReact/components/Pagination';
 
 import {
   TableComposable,
@@ -12,37 +12,22 @@ import {
   Th,
   Td,
 } from '@patternfly/react-table';
-import { Flex, FlexItem, Button, Pagination } from '@patternfly/react-core';
+import { Flex, FlexItem, Button } from '@patternfly/react-core';
 
 import EditRolesModal from './EditRolesModal';
 
 import withLoading from '../../../withLoading';
 import AllRolesModal from './AllRolesModal';
-import {
-  preparePerPageOptions,
-  refreshPage,
-} from '../../../../helpers/paginationHelper';
 
 const RolesTable = ({
   totalCount,
-  pagination,
   history,
   ansibleRoles,
   hostId,
   hostGlobalId,
   canEditHost,
 }) => {
-  const columns = [__('Name')];
-
-  const handlePerPageSelected = (event, perPage) => {
-    refreshPage(history, { page: 1, perPage });
-  };
-
-  const handlePageSelected = (event, page) => {
-    refreshPage(history, { ...pagination, page });
-  };
-
-  const perPageOptions = preparePerPageOptions(usePaginationOptions());
+  const columns = [__('Name'), __('Variables')];
 
   const editBtn = canEditHost ? (
     <FlexItem>
@@ -67,36 +52,48 @@ const RolesTable = ({
       </Flex>
       <Flex>
         <FlexItem>{editBtn}</FlexItem>
+        <FlexItem align={{ default: 'alignRight' }}>
+          <Pagination updateParamsByUrl itemCount={totalCount} variant="top" />
+        </FlexItem>
+      </Flex>
+      <Flex direction={{ default: 'column' }}>
+        <FlexItem>
+          <TableComposable variant="compact">
+            <Thead>
+              <Tr>
+                {columns.map(col => (
+                  <Th key={col}>{col}</Th>
+                ))}
+              </Tr>
+            </Thead>
+            <Tbody>
+              {ansibleRoles.map(role => (
+                <Tr key={role.id}>
+                  <Td>
+                    <a href={role.path}>{role.name}</a>
+                  </Td>
+                  <Td>
+                    <a
+                      href={`/ansible/ansible_variables?search=ansible_role=${role.name}`}
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      {role.ansibleVariables.totalCount}
+                    </a>
+                  </Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </TableComposable>
+        </FlexItem>
         <FlexItem align={{ default: 'alignRight' }}>
           <Pagination
+            updateParamsByUrl
             itemCount={totalCount}
-            page={pagination.page}
-            perPage={pagination.perPage}
-            onSetPage={handlePageSelected}
-            onPerPageSelect={handlePerPageSelected}
-            perPageOptions={perPageOptions}
-            variant="top"
+            variant="bottom"
           />
         </FlexItem>
       </Flex>
-      <TableComposable variant="compact">
-        <Thead>
-          <Tr>
-            {columns.map(col => (
-              <Th key={col}>{col}</Th>
-            ))}
-          </Tr>
-        </Thead>
-        <Tbody>
-          {ansibleRoles.map(role => (
-            <Tr key={role.id}>
-              <Td>
-                <a href={role.path}>{role.name}</a>
-              </Td>
-            </Tr>
-          ))}
-        </Tbody>
-      </TableComposable>
       <Route path="/Ansible/roles/edit">
         <EditRolesModal
           closeModal={() => history.goBack()}
@@ -123,7 +120,6 @@ RolesTable.propTypes = {
   hostId: PropTypes.number.isRequired,
   hostGlobalId: PropTypes.string.isRequired,
   history: PropTypes.object.isRequired,
-  pagination: PropTypes.object.isRequired,
   totalCount: PropTypes.number.isRequired,
   canEditHost: PropTypes.bool.isRequired,
 };

data/webpack/components/AnsibleHostDetail/components/RolesTab/__test__/RolesTab.fixtures.js

@@ -35,6 +35,9 @@ const role1 = {
   id: 'MDE6QW5zaWJsZVJvbGUtMw==',
   name: 'aardvaark.cube',
   path: '/ansible/ansible_roles/search="name = aardvaark.cube"',
+  ansibleVariables: {
+    totalCount: 1,
+  },
 };
 
 const role2 = {
@@ -42,6 +45,9 @@ const role2 = {
   id: 'MDE6QW5zaWJsZVJvbGUtNQ==',
   name: 'aardvaark.sphere',
   path: '/ansible/ansible_roles/search="name = aardvaark.sphere"',
+  ansibleVariables: {
+    totalCount: 2,
+  },
 };
 
 const role3 = {
@@ -49,6 +55,9 @@ const role3 = {
   id: 'MDE6QW5zaWJsZVJvbGUtMzA=',
   name: 'another.role',
   path: '/ansible/ansible_roles/search="name = another.role"',
+  ansibleVariables: {
+    totalCount: 3,
+  },
 };
 
 const role4 = {
@@ -56,6 +65,9 @@ const role4 = {
   id: 'MDE6QW5zaWJsZVJvbGUtMzk=',
   name: 'geerlingguy.ceylon',
   path: '/ansible/ansible_roles/search="name = geerlingguy.ceylon"',
+  ansibleVariables: {
+    totalCount: 4,
+  },
 };
 
 const ansibleRolesMock = {
@@ -77,30 +89,45 @@ const availableRoles = {
       name: 'theforeman.foreman_scap_client',
       path:
         '/ansible/ansible_roles/search="name = theforeman.foreman_scap_client"',
+      ansibleVariables: {
+        totalCount: 23,
+      },
     },
     {
       __typename: 'AnsibleRole',
       id: 'MDE6QW5zaWJsZVJvbGUtMg==',
       name: 'adriagalin.motd',
       path: '/ansible/ansible_roles/search="name = adriagalin.motd"',
+      ansibleVariables: {
+        totalCount: 23,
+      },
     },
     {
       __typename: 'AnsibleRole',
       id: 'MDE6QW5zaWJsZVJvbGUtMjI=',
       name: 'geerlingguy.php',
       path: '/ansible/ansible_roles/search="name = geerlingguy.php"',
+      ansibleVariables: {
+        totalCount: 23,
+      },
     },
     {
       __typename: 'AnsibleRole',
       id: 'MDE6QW5zaWJsZVJvbGUtNTc=',
       name: 'robertdebock.epel',
       path: '/ansible/ansible_roles/search="name = robertdebock.epel"',
+      ansibleVariables: {
+        totalCount: 23,
+      },
     },
     {
       __typename: 'AnsibleRole',
       id: 'MDE6QW5zaWJsZVJvbGUtNTg=',
       name: 'geerlingguy.nfs',
       path: '/ansible/ansible_roles/search="name = geerlingguy.nfs"',
+      ansibleVariables: {
+        totalCount: 23,
+      },
     },
   ],
 };
@@ -118,6 +145,9 @@ export const allRolesMocks = allAnsibleRolesMockFactory(
           name: 'adriagalin.motd',
           path: '/ansible/ansible_roles/search="name = adriagalin.motd"',
           inherited: true,
+          ansibleVariables: {
+            totalCount: 23,
+          },
         },
         { ...role1, inherited: false },
         { ...role2, inherited: false },

data/webpack/components/AnsibleRolesAndVariables/AnsibleRolesAndVariables.js

@@ -12,9 +12,8 @@ import {
   ToolbarContent,
   ToolbarItem,
   Checkbox,
-  Pagination,
 } from '@patternfly/react-core';
-
+import Pagination from 'foremanReact/components/Pagination';
 import PropTypes from 'prop-types';
 import { DEFAULT_PER_PAGE } from './AnsibleRolesAndVariablesConstants';
 import './AnsibleRolesAndVariables.scss';
@@ -25,6 +24,7 @@ const ImportRolesAndVariablesTable = ({
   proxy,
   onSubmit,
   onCancel,
+  isImporting,
 }) => {
   const columns = columnsData.map(col => ({
     ...col,
@@ -34,10 +34,13 @@ const ImportRolesAndVariablesTable = ({
 
   const [isChecked, setIsChecked] = useState(false);
   const [selectedRowsCount, setSelectRowsCount] = useState(0);
-
-  const [page, setPage] = useState();
-  const [perPage, setPerPage] = useState(DEFAULT_PER_PAGE);
-  const [paginatedRows, setPaginatedRows] = useState(rows.slice(0, perPage));
+  const [pagination, setPagination] = useState({
+    page: 1,
+    per_page: DEFAULT_PER_PAGE,
+  });
+  const [paginatedRows, setPaginatedRows] = useState(
+    rows.slice(0, pagination.per_page)
+  );
 
   const onSelect = (event, isSelected, rowId, row) => {
     const selectableRowLength = rows.filter(
@@ -68,43 +71,22 @@ const ImportRolesAndVariablesTable = ({
     onSelect(null, checked, -1);
   };
 
-  const handleSetPage = (event, newPage) => {
-    const startIdx = (newPage - 1) * perPage;
+  const handleSetPage = args => {
+    const startIdx = (args.page - 1) * args.per_page;
     const endIdx =
-      rows.length < newPage * perPage ? rows.length : newPage * perPage;
-    setPage(newPage);
+      rows.length < args.page * args.per_page
+        ? rows.length
+        : args.page * args.per_page;
+    setPagination(args);
     setPaginatedRows(rows.slice(startIdx, endIdx));
   };
 
-  const handlePerPageSelect = (
-    event,
-    newPerPage,
-    newPage,
-    startIdx,
-    endIdx
-  ) => {
-    setPerPage(newPerPage);
-    setPage(newPage);
-    setPaginatedRows(rows.slice(startIdx, endIdx));
-  };
-
-  const renderPagination = (variant = 'top') => (
+  const renderPagination = () => (
     <Pagination
       isCompact
       itemCount={rows.length}
-      page={page}
-      perPage={perPage}
-      defaultToFullPage
-      onSetPage={handleSetPage}
-      onPerPageSelect={handlePerPageSelect}
-      perPageOptions={[
-        { title: '3', value: 3 },
-        { title: '5', value: 5 },
-        { title: '10', value: 10 },
-      ]}
-      titles={{
-        paginationTitle: `${variant} pagination`,
-      }}
+      perPage={pagination.per_page}
+      onChange={args => handleSetPage(args)}
     />
   );
 
@@ -131,10 +113,15 @@ const ImportRolesAndVariablesTable = ({
     <div className="submit-cancel-btns">
       <br />
       <br />
-      <Button variant="primary" onClick={() => onSubmit(rows, proxy)}>
+      <Button
+        variant="primary"
+        onClick={() => onSubmit(rows, proxy)}
+        isLoading={isImporting}
+        isDisabled={isImporting || selectedRowsCount === 0}
+      >
         Submit
       </Button>
-      <Button variant="secondary" onClick={onCancel}>
+      <Button variant="secondary" onClick={onCancel} isDisabled={isImporting}>
         Cancel
       </Button>
     </div>
@@ -165,6 +152,7 @@ ImportRolesAndVariablesTable.defaultProps = {
   proxy: undefined,
   onSubmit: undefined,
   onCancel: undefined,
+  isImporting: false,
 };
 
 ImportRolesAndVariablesTable.propTypes = {
@@ -173,6 +161,7 @@ ImportRolesAndVariablesTable.propTypes = {
   proxy: PropTypes.number,
   onSubmit: PropTypes.func,
   onCancel: PropTypes.func,
+  isImporting: PropTypes.bool,
 };
 
 export default ImportRolesAndVariablesTable;

data/webpack/components/AnsibleRolesAndVariables/AnsibleRolesAndVariablesActions.js

@@ -4,6 +4,7 @@ import { post } from 'foremanReact/redux/API';
 import { push } from 'connected-react-router';
 import { prepareResult } from './AnsibleRolesAndVariablesHelpers';
 import {
+  IMPORT_ANSIBLE_V_R,
   ANSIBLE_ROLE_CONFIRM_IMPORT_PATH,
   ANSIBLE_ROLES_INDEX,
 } from './AnsibleRolesAndVariablesConstants';
@@ -14,7 +15,7 @@ export const onSubmit = (rows, proxy) => dispatch => {
   const params = prepareResult(rows);
   dispatch(
     post({
-      key: 'import_ansible_v_r',
+      key: IMPORT_ANSIBLE_V_R,
       url: ANSIBLE_ROLE_CONFIRM_IMPORT_PATH,
       params: { changed: params, proxy },
       handleSuccess: () => {

data/webpack/components/AnsibleRolesAndVariables/AnsibleRolesAndVariablesConstants.js

@@ -1,3 +1,4 @@
+export const IMPORT_ANSIBLE_V_R = 'IMPORT_ANSIBLE_V_R';
 export const ANSIBLE_ROLES_INDEX = '/ansible/ansible_roles';
 export const ANSIBLE_ROLE_CONFIRM_IMPORT_PATH =
   '/ansible/ansible_roles/confirm_import';

data/webpack/components/AnsibleRolesAndVariables/AnsibleRolesAndVariablesSelectors.js

@@ -0,0 +1,6 @@
+import { selectAPIStatus } from 'foremanReact/redux/API/APISelectors';
+import { IMPORT_ANSIBLE_V_R } from './AnsibleRolesAndVariablesConstants';
+
+// API statuses
+export const selectApiImportStatus = state =>
+  selectAPIStatus(state, IMPORT_ANSIBLE_V_R);

data/webpack/components/AnsibleRolesAndVariables/index.js

@@ -1,10 +1,13 @@
 import React from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { push } from 'connected-react-router';
 
+import { STATUS } from 'foremanReact/constants';
+
 import ImportRolesAndVariablesTable from './AnsibleRolesAndVariables';
 import { onSubmit } from './AnsibleRolesAndVariablesActions';
 import { ANSIBLE_ROLES_INDEX } from './AnsibleRolesAndVariablesConstants';
+import { selectApiImportStatus } from './AnsibleRolesAndVariablesSelectors';
 
 const WrappedImportRolesAndVariables = props => {
   const cols = [
@@ -19,12 +22,15 @@ const WrappedImportRolesAndVariables = props => {
   const onCancel = () => {
     dispatch(push(ANSIBLE_ROLES_INDEX));
   };
+  const apiImportStatus = useSelector(selectApiImportStatus);
+
   return (
     <ImportRolesAndVariablesTable
       {...props}
       columnsData={cols}
       onSubmit={submit}
       onCancel={onCancel}
+      isImporting={apiImportStatus === STATUS.PENDING}
     />
   );
 };

data/webpack/components/AnsibleRolesSwitcher/__tests__/AnsibleRolesSwitcher.test.js

@@ -2,8 +2,6 @@ import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
 
 import AnsibleRolesSwitcher from '../AnsibleRolesSwitcher';
 
-jest.mock('foremanReact/components/Pagination/PaginationWrapper');
-
 const noop = () => {};
 
 const fixtures = {

data/webpack/components/AnsibleRolesSwitcher/components/AnsibleRole.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ListView, Tooltip, OverlayTrigger } from 'patternfly-react';
+import { ListView } from 'patternfly-react';
+import { Tooltip } from '@patternfly/react-core';
 import classNames from 'classnames';
 import { translate as __ } from 'foremanReact/common/I18n';
 
@@ -13,12 +14,6 @@ const AnsibleRole = ({ role, icon, onClick, resourceName, index }) => {
       ? __('This Ansible role is inherited from parent host group')
       : __('This Ansible role is inherited from host group');
 
-  const tooltip = (
-    <Tooltip id={role.id}>
-      <span>{text}</span>
-    </Tooltip>
-  );
-
   const clickHandler = (onClickFn, ansibleRole) => event => {
     event.preventDefault();
     onClickFn(ansibleRole);
@@ -48,11 +43,7 @@ const AnsibleRole = ({ role, icon, onClick, resourceName, index }) => {
   );
 
   if (role.inherited) {
-    return (
-      <OverlayTrigger overlay={tooltip} placement="top">
-        {listItem()}
-      </OverlayTrigger>
-    );
+    return <Tooltip content={<span>{text}</span>}>{listItem()}</Tooltip>;
   }
 
   return listItem(clickHandler);

data/webpack/components/AnsibleRolesSwitcher/components/AvailableRolesList.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { ListView, LoadingState } from 'patternfly-react';
-import PaginationWrapper from 'foremanReact/components/Pagination/PaginationWrapper';
+import Pagination from 'foremanReact/components/Pagination';
 
 import AnsibleRole from './AnsibleRole';
 
@@ -16,7 +16,7 @@ const AvailableRolesList = ({
 }) => (
   <ListView>
     <div className="sticky-pagination">
-      <PaginationWrapper
+      <Pagination
         viewType="list"
         itemCount={itemCount}
         pagination={pagination}

data/webpack/components/AnsibleRolesSwitcher/components/OrderedRolesTooltip.js

@@ -1,22 +1,21 @@
 import React from 'react';
 import { translate as __ } from 'foremanReact/common/I18n';
-import { Tooltip, Icon, OverlayTrigger } from 'patternfly-react';
+import { Tooltip } from '@patternfly/react-core';
+import { InfoCircleIcon } from '@patternfly/react-icons';
 
 const OrderedRolesTooltip = props => {
-  const tooltip = (
-    <Tooltip id="assigned-ansible-roles-tooltip">
-      <span>
-        {__(
-          'Use drag and drop to change order of the roles. Ordering of roles is respected for Ansible runs, inherited roles are always before those assigned directly'
-        )}
-      </span>
-    </Tooltip>
+  const content = (
+    <span>
+      {__(
+        'Use drag and drop to change order of the roles. Ordering of roles is respected for Ansible runs, inherited roles are always before those assigned directly'
+      )}
+    </span>
   );
 
   return (
-    <OverlayTrigger overlay={tooltip} trigger={['hover', 'focus']}>
-      <Icon type="pf" name="info" style={{ 'margin-right': '10px' }} />
-    </OverlayTrigger>
+    <Tooltip content={content}>
+      <InfoCircleIcon style={{ marginRight: '10px' }} />
+    </Tooltip>
   );
 };
 

data/webpack/components/AnsibleRolesSwitcher/components/__snapshots__/AnsibleRole.test.js.snap

@@ -65,25 +65,11 @@ exports[`AnsibleRole should render a role to remove 1`] = `
 `;
 
 exports[`AnsibleRole should render inherited role to remove 1`] = `
-<OverlayTrigger
-  defaultOverlayShown={false}
-  overlay={
-    <Tooltip
-      bsClass="tooltip"
-      id={5}
-      placement="right"
-    >
-      <span>
-        This Ansible role is inherited from host group
-      </span>
-    </Tooltip>
-  }
-  placement="top"
-  trigger={
-    Array [
-      "hover",
-      "focus",
-    ]
+<Tooltip
+  content={
+    <span>
+      This Ansible role is inherited from host group
+    </span>
   }
 >
   <ListViewItem
@@ -104,5 +90,5 @@ exports[`AnsibleRole should render inherited role to remove 1`] = `
     onExpandClose={[Function]}
     stacked={true}
   />
-</OverlayTrigger>
+</Tooltip>
 `;

data/webpack/components/AnsibleRolesSwitcher/components/__snapshots__/AvailableRolesList.test.js.snap

@@ -7,21 +7,24 @@ exports[`AvailableRolesList should render 1`] = `
   <div
     className="sticky-pagination"
   >
-    <PaginationWrapper
-      className=""
-      disableNext={false}
-      disablePrev={false}
+    <Pagination
+      className={null}
       dropdownButtonId="available-ansible-roles-pagination-row-dropdown"
       itemCount={2}
+      noSidePadding={false}
       onChange={[Function]}
-      onPageSet={[Function]}
-      onPerPageSelect={[Function]}
+      onPerPageSelect={null}
+      onSetPage={null}
+      page={1}
       pagination={
         Object {
           "page": 1,
           "perPage": 25,
         }
       }
+      perPage={null}
+      updateParamsByUrl={true}
+      variant="bottom"
       viewType="list"
     />
   </div>