foreman_ansible 7.0.4 → 8.0.1

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>

data/webpack/components/withLoading.js

@@ -13,14 +13,12 @@ import {
 } from '../permissionsHelper';
 import ErrorState from './ErrorState';
 
-const pluckData = (data, path) => {
+const getResultsLength = (data, path) => {
   const split = path.split('.');
-  return split.reduce((memo, item) => {
-    if (item) {
-      return memo[item];
-    }
-    throw new Error('Unexpected empty segment in response data path');
-  }, data);
+  return split.reduce(
+    (prevValue, currentValue) => prevValue + data[currentValue]?.length || 0,
+    0
+  );
 };
 
 const withLoading = Component => {
@@ -79,12 +77,9 @@ const withLoading = Component => {
     }
 
     const renamedData = renameData(data);
-    const result = pluckData(renamedData, renamedDataPath);
+    const resultLength = getResultsLength(renamedData, renamedDataPath);
 
-    if (
-      showEmptyState &&
-      ((Array.isArray(result) && result.length === 0) || !result)
-    ) {
+    if (showEmptyState && !resultLength) {
       return emptyWrapper(
         <EmptyState
           {...{

data/webpack/graphql/queries/allAnsibleRoles.gql

@@ -7,6 +7,9 @@ query($id: String!, $first: Int, $last: Int){
         id
         name
         inherited
+        ansibleVariables {
+          totalCount
+        }
       }
     }
   }

data/webpack/graphql/queries/hostAnsibleRoles.gql

@@ -9,6 +9,9 @@ query($id: String!, $first: Int, $last: Int) {
         id
         name
         path
+        ansibleVariables {
+          totalCount
+        }
       }
     }
   }

data/webpack/helpers/pageParamsHelper.js

@@ -14,7 +14,7 @@ export const addSearch = (basePath, params) => {
 
 export const useCurrentPagination = (
   history,
-  keys = { page: 'page', perPage: 'perPage' }
+  keys = { page: 'page', perPage: 'per_page' }
 ) => {
   const pageParams = parsePageParams(history);
   const uiSettings = useForemanSettings();
@@ -28,7 +28,7 @@ export const useCurrentPagination = (
 
 export const pageToVars = (
   pagination,
-  keys = { page: 'page', perPage: 'perPage' }
+  keys = { page: 'page', perPage: 'per_page' }
 ) => ({
   first: pagination[keys.page] * pagination[keys.perPage],
   last: pagination[keys.perPage],
@@ -36,5 +36,5 @@ export const pageToVars = (
 
 export const useParamsToVars = (
   history,
-  keys = { page: 'page', perPage: 'perPage' }
+  keys = { page: 'page', perPage: 'per_page' }
 ) => pageToVars(useCurrentPagination(history, keys), keys);