foreman_ansible 7.0.3 → 7.1.1

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

@@ -1,7 +1,7 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { translate as __ } from 'foremanReact/common/I18n';
 import PropTypes from 'prop-types';
-
+import { isEqual } from 'lodash';
 import { useMutation } from '@apollo/client';
 
 import { Button, Modal, Spinner } from '@patternfly/react-core';
@@ -21,17 +21,15 @@ const EditRolesForm = props => {
     actions,
   } = props;
 
-  const [formState, setFormState] = useState({
-    availableOptions: [],
-    chosenOptions: [],
-  });
+  const initAvailableOpt = availableRoles.map(item => item.name);
+  const initChosenOpt = assignedRoles.map(item => item.name);
+  const [availableOptions, setAvailableOptions] = useState(initAvailableOpt);
+  const [chosenOptions, setChosenOptions] = useState(initChosenOpt);
 
-  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,15 +40,19 @@ const EditRolesForm = props => {
 
   const variables = {
     id: encodeId('Host', hostId),
-    ansibleRoleIds: roleNamesToIds(allRoles, formState.chosenOptions),
+    ansibleRoleIds: roleNamesToIds(allRoles, chosenOptions),
   };
 
+  const didNotModifyOptions = () =>
+    isEqual(initAvailableOpt.sort(), availableOptions.sort()) &&
+    isEqual(initChosenOpt, chosenOptions); // The order of the chosen options is important.
+
   const formActions = [
     <Button
       key="confirm"
       variant="primary"
       onClick={() => callMutation({ variables })}
-      isDisabled={loading}
+      isDisabled={loading || didNotModifyOptions()}
       aria-label="submit ansible roles"
     >
       {__('Confirm')}
@@ -65,14 +67,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 +77,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

@@ -20,7 +20,7 @@ const EditRolesModal = ({
   canEditHost,
 }) => {
   const baseModalProps = {
-    width: '70%',
+    width: '50%',
     isOpen,
     className: 'foreman-modal',
     showClose: false,

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,20 +12,15 @@ 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,
@@ -34,16 +29,6 @@ const RolesTable = ({
 }) => {
   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 editBtn = canEditHost ? (
     <FlexItem>
       <Link to="/Ansible/roles/edit">
@@ -67,36 +52,39 @@ 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>
+                </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 +111,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/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/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/__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/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);