foreman_ansible 6.0.2 → 6.4.0

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

@@ -1,4 +1,4 @@
-import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
+import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
 import AnsiblePermissionDenied from './AnsiblePermissionDenied';
 
 jest.mock('foremanReact/components/common/EmptyState');

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

@@ -6,7 +6,7 @@ import { translate as __ } from 'foremanReact/common/I18n';
 import AnsibleRoleActionButton from './AnsibleRoleActionButton';
 import '../AnsibleRolesSwitcher.scss';
 
-const AnsibleRole = ({ role, icon, onClick, resourceName }) => {
+const AnsibleRole = ({ role, icon, onClick, resourceName, index }) => {
   const text =
     resourceName === 'hostgroup'
       ? __('This Ansible role is inherited from parent host group')
@@ -23,6 +23,9 @@ const AnsibleRole = ({ role, icon, onClick, resourceName }) => {
     onClickFn(ansibleRole);
   };
 
+  const headingText = (name, idx) =>
+    idx || idx === 0 ? `${idx + 1}. ${name}` : name;
+
   const listItem = (click = undefined) => (
     <ListView.Item
       id={role.id}
@@ -30,7 +33,7 @@ const AnsibleRole = ({ role, icon, onClick, resourceName }) => {
         'ansible-role-disabled': role.inherited,
         'ansible-role-movable': !role.inherited,
       })}
-      heading={role.name}
+      heading={headingText(role.name, index)}
       actions={
         role.inherited ? (
           ''

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

@@ -1,4 +1,4 @@
-import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
+import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
 
 import AnsibleRole from './AnsibleRole';
 

data/webpack/components/AnsibleRolesSwitcher/components/AnsibleRoleInputs.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const AnsibleRoleInputs = props => {
+  const { role, idx, resourceName } = props;
+
+  const fieldName = attr =>
+    `${resourceName}[${resourceName}_ansible_roles_attributes][${idx}][${attr}]`;
+
+  const attrName = modelName => `${modelName}AnsibleRoleId`;
+
+  const idField = (
+    <input
+      name={fieldName('id')}
+      value={role[attrName(resourceName)]}
+      type="hidden"
+    />
+  );
+  return (
+    <React.Fragment>
+      {role[attrName(resourceName)] ? idField : null}
+      <input
+        name={fieldName('ansible_role_id')}
+        value={role.id}
+        type="hidden"
+      />
+      <input name={fieldName('position')} value={idx + 1} type="hidden" />
+      <input
+        name={fieldName('_destroy')}
+        value={!!role.destroy}
+        type="hidden"
+      />
+    </React.Fragment>
+  );
+};
+
+AnsibleRoleInputs.propTypes = {
+  role: PropTypes.object.isRequired,
+  idx: PropTypes.number.isRequired,
+  resourceName: PropTypes.string.isRequired,
+};
+
+export default AnsibleRoleInputs;

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

@@ -0,0 +1,19 @@
+import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
+
+import AnsibleRoleInputs from './AnsibleRoleInputs';
+
+const fixtures = {
+  'should render role to add': {
+    role: { id: 2, name: 'test.role', hostAnsibleRoleId: 5, position: 2 },
+    resourceName: 'host',
+    idx: 14,
+  },
+  'should render role to remove': {
+    role: { id: 2, name: 'test.role', hostAnsibleRoleId: 5, destroy: true },
+    resourceName: 'host',
+    idx: 14,
+  },
+};
+
+describe('AnsibleRoleInputs', () =>
+  testComponentSnapshotsWithFixtures(AnsibleRoleInputs, fixtures));

data/webpack/components/AnsibleRolesSwitcher/components/AssignedRolesList.js

@@ -1,79 +1,91 @@
 import React from 'react';
+import { DndProvider } from 'react-dnd';
+import HTML5Backend from 'react-dnd-html5-backend';
+
 import { ListView } from 'patternfly-react';
-import PaginationWrapper from 'foremanReact/components/Pagination/PaginationWrapper';
-import { isEmpty } from 'lodash';
+
+import {
+  orderable,
+  orderDragged,
+} from 'foremanReact/components/common/forms/OrderableSelect/helpers';
+
 import PropTypes from 'prop-types';
 
 import AnsibleRole from './AnsibleRole';
+import AnsibleRoleInputs from './AnsibleRoleInputs';
+
+const OrderableRole = orderable(AnsibleRole, {
+  type: 'ansibleRole',
+  getItem: props => ({ id: props.role.id }),
+  direction: 'vertical',
+});
 
 const AssignedRolesList = ({
+  unassignedRoles,
   assignedRoles,
-  allAssignedRoles,
-  pagination,
-  itemCount,
-  onPaginationChange,
+  toDestroyRoles,
   onRemoveRole,
+  onMoveRole,
   resourceName,
 }) => {
-  const directlyAssignedRoles = allAssignedRoles.filter(
-    role => !role.inherited
+  const moveValue = (dragIndex, hoverIndex) => {
+    onMoveRole(orderDragged(assignedRoles, dragIndex, hoverIndex));
+  };
+
+  const allOwnRoles = roles => roles.filter(role => !role.inherited);
+
+  const renderRole = (role, idx) =>
+    role.inherited ? renderInherited(role, idx) : renderOwn(role, idx);
+
+  const renderInherited = (role, idx) => (
+    <AnsibleRole
+      key={role.id}
+      role={role}
+      index={idx}
+      icon="fa fa-minus-circle"
+      onClick={onRemoveRole}
+      resourceName={resourceName}
+    />
+  );
+
+  const renderOwn = (role, idx) => (
+    <OrderableRole
+      key={role.id}
+      role={role}
+      index={idx}
+      moveValue={moveValue}
+      icon="fa fa-minus-circle"
+      onClick={onRemoveRole}
+      resourceName={resourceName}
+    />
   );
 
   return (
-    <div>
-      <ListView>
-        <div className="sticky-pagination sticky-pagination-grey">
-          <PaginationWrapper
-            viewType="list"
-            itemCount={itemCount}
-            pagination={pagination}
-            onChange={onPaginationChange}
-            dropdownButtonId="assigned-ansible-roles-pagination-row-dropdown"
-          />
-        </div>
-        {assignedRoles.map(role => (
-          <AnsibleRole
-            key={role.id}
-            role={role}
-            icon="fa fa-minus-circle"
-            onClick={onRemoveRole}
-            resourceName={resourceName}
-          />
-        ))}
-      </ListView>
+    <DndProvider backend={HTML5Backend}>
+      <ListView>{assignedRoles.map(renderRole)}</ListView>
       <div>
-        {isEmpty(directlyAssignedRoles) ? (
-          <input
-            type="hidden"
-            name={`${resourceName}[ansible_role_ids][]`}
-            value=""
-          />
-        ) : (
-          directlyAssignedRoles.map(role => (
-            <input
+        {allOwnRoles(assignedRoles)
+          .concat(toDestroyRoles)
+          .map((role, idx) => (
+            <AnsibleRoleInputs
               key={role.id}
-              type="hidden"
-              name={`${resourceName}[ansible_role_ids][]`}
-              value={role.id}
+              role={role}
+              idx={idx}
+              resourceName={resourceName}
             />
-          ))
-        )}
+          ))}
       </div>
-    </div>
+    </DndProvider>
   );
 };
 
 AssignedRolesList.propTypes = {
+  unassignedRoles: PropTypes.arrayOf(PropTypes.object).isRequired,
   assignedRoles: PropTypes.arrayOf(PropTypes.object).isRequired,
-  allAssignedRoles: PropTypes.arrayOf(PropTypes.object).isRequired,
-  pagination: PropTypes.shape({
-    page: PropTypes.number,
-    perPage: PropTypes.number,
-  }).isRequired,
-  itemCount: PropTypes.number.isRequired,
-  onPaginationChange: PropTypes.func.isRequired,
   onRemoveRole: PropTypes.func.isRequired,
+  onMoveRole: PropTypes.func.isRequired,
   resourceName: PropTypes.string.isRequired,
+  toDestroyRoles: PropTypes.arrayOf(PropTypes.object).isRequired,
 };
 
 export default AssignedRolesList;

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

@@ -1,4 +1,4 @@
-import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
+import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
 
 import AssignedRolesList from './AssignedRolesList';
 
@@ -18,7 +18,10 @@ const fixtures = {
     itemCount: 2,
     onPaginationChange: noop,
     onRemoveRole: noop,
+    onMoveRole: noop,
     resourceName: 'host',
+    toDestroyRoles: [],
+    unassignedRoles: [],
   },
 };
 

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

@@ -1,4 +1,4 @@
-import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
+import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
 
 import AvailableRolesList from './AvailableRolesList';
 

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { Tooltip, Icon, OverlayTrigger } from 'patternfly-react';
+
+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>
+  );
+
+  return (
+    <OverlayTrigger overlay={tooltip} trigger={['hover', 'focus']}>
+      <Icon type="pf" name="info" style={{ 'margin-right': '10px' }} />
+    </OverlayTrigger>
+  );
+};
+
+export default OrderedRolesTooltip;

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

@@ -2,6 +2,7 @@
 
 exports[`AnsiblePermissionDenied should render 1`] = `
 <EmptyStatePattern
+  action={null}
   description={
     <span>
       You are not authorized to perform this action.
@@ -22,5 +23,6 @@ exports[`AnsiblePermissionDenied should render 1`] = `
   header="Permission Denied"
   icon="lock"
   iconType="fa"
+  secondaryActions={Array []}
 />
 `;

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

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AnsibleRoleInputs should render role to add 1`] = `
+<Fragment>
+  <input
+    name="host[host_ansible_roles_attributes][14][id]"
+    type="hidden"
+    value={5}
+  />
+  <input
+    name="host[host_ansible_roles_attributes][14][ansible_role_id]"
+    type="hidden"
+    value={2}
+  />
+  <input
+    name="host[host_ansible_roles_attributes][14][position]"
+    type="hidden"
+    value={15}
+  />
+  <input
+    name="host[host_ansible_roles_attributes][14][_destroy]"
+    type="hidden"
+    value={false}
+  />
+</Fragment>
+`;
+
+exports[`AnsibleRoleInputs should render role to remove 1`] = `
+<Fragment>
+  <input
+    name="host[host_ansible_roles_attributes][14][id]"
+    type="hidden"
+    value={5}
+  />
+  <input
+    name="host[host_ansible_roles_attributes][14][ansible_role_id]"
+    type="hidden"
+    value={2}
+  />
+  <input
+    name="host[host_ansible_roles_attributes][14][position]"
+    type="hidden"
+    value={15}
+  />
+  <input
+    name="host[host_ansible_roles_attributes][14][_destroy]"
+    type="hidden"
+    value={true}
+  />
+</Fragment>
+`;

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

@@ -1,29 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AssignedRolesList should render 1`] = `
-<div>
+<Memo(DndProvider)
+  backend={[Function]}
+>
   <ListView
     className=""
   >
-    <div
-      className="sticky-pagination sticky-pagination-grey"
-    >
-      <PaginationWrapper
-        dropdownButtonId="assigned-ansible-roles-pagination-row-dropdown"
-        itemCount={2}
-        onChange={[Function]}
-        pagination={
-          Object {
-            "page": 1,
-            "perPage": 25,
-          }
-        }
-        viewType="list"
-      />
-    </div>
-    <AnsibleRole
+    <DropTarget(DragSource(Orderable(AnsibleRole)))
       icon="fa fa-minus-circle"
+      index={0}
       key="1"
+      moveValue={[Function]}
       onClick={[Function]}
       resourceName="host"
       role={
@@ -33,9 +21,11 @@ exports[`AssignedRolesList should render 1`] = `
         }
       }
     />
-    <AnsibleRole
+    <DropTarget(DragSource(Orderable(AnsibleRole)))
       icon="fa fa-minus-circle"
+      index={1}
       key="2"
+      moveValue={[Function]}
       onClick={[Function]}
       resourceName="host"
       role={
@@ -47,18 +37,28 @@ exports[`AssignedRolesList should render 1`] = `
     />
   </ListView>
   <div>
-    <input
+    <AnsibleRoleInputs
+      idx={0}
       key="1"
-      name="host[ansible_role_ids][]"
-      type="hidden"
-      value={1}
+      resourceName="host"
+      role={
+        Object {
+          "id": 1,
+          "name": "fake.role",
+        }
+      }
     />
-    <input
+    <AnsibleRoleInputs
+      idx={1}
       key="2"
-      name="host[ansible_role_ids][]"
-      type="hidden"
-      value={2}
+      resourceName="host"
+      role={
+        Object {
+          "id": 2,
+          "name": "test.role",
+        }
+      }
     />
   </div>
-</div>
+</Memo(DndProvider)>
 `;