foreman_ansible 6.2.0 → 6.3.0

data/webpack/components/AnsibleRolesSwitcher/__fixtures__/ansibleRolesSwitcherReducer.fixtures.js

@@ -23,6 +23,7 @@ export const successState = Immutable({
     ...ansibleRolesLong.slice(4, 6),
   ],
   results: ansibleRolesLong,
+  toDestroyRoles: [],
   assignedPagination: {
     page: 1,
     perPage: 20,

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

@@ -13,6 +13,7 @@ const fixtures = {
     itemCount: 20,
     addAnsibleRole: noop,
     removeAnsibleRole: noop,
+    moveAnsibleRole: noop,
     getAnsibleRoles: noop,
     changeAssignedPage: noop,
     assignedPagination: { page: 1, perPage: 12 },
@@ -22,6 +23,7 @@ const fixtures = {
     initialAssignedRoles: [],
     error: { statusText: '', errorMsg: '' },
     allAssignedRoles: [],
+    toDestroyRoles: [],
     availableRolesUrl: 'http://test/roles',
   },
 };

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

@@ -15,7 +15,6 @@ import {
   ANSIBLE_ROLES_FAILURE,
   ANSIBLE_ROLES_ADD,
   ANSIBLE_ROLES_REMOVE,
-  ANSIBLE_ROLES_ASSIGNED_PAGE_CHANGE,
 } from '../AnsibleRolesSwitcherConstants';
 
 const fixtures = {
@@ -60,13 +59,6 @@ const fixtures = {
       payload: { role: ansibleRolesLong[5] },
     },
   },
-  'should change pagination for assigned roles': {
-    state: successState,
-    action: {
-      type: ANSIBLE_ROLES_ASSIGNED_PAGE_CHANGE,
-      payload: { pagination: { page: 20, perPage: 5 } },
-    },
-  },
 };
 
 describe('AnsibleRolesSwitcherReducer', () =>

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

@@ -1,13 +1,7 @@
 import { testSelectorsSnapshotWithFixtures } from '@theforeman/test';
 
-import {
-  selectUnassignedRoles,
-  selectAssignedRolesPage,
-} from '../AnsibleRolesSwitcherSelectors';
-import {
-  ansibleRolesShort,
-  ansibleRolesLong,
-} from '../__fixtures__/ansibleRolesData.fixtures';
+import { selectUnassignedRoles } from '../AnsibleRolesSwitcherSelectors';
+import { ansibleRolesShort } from '../__fixtures__/ansibleRolesData.fixtures';
 
 const stateFactory = obj => ({
   foremanAnsible: {
@@ -25,18 +19,11 @@ const state2 = {
   assignedRoles: [],
 };
 
-const state3 = {
-  assignedRoles: ansibleRolesLong,
-  assignedPagination: { page: 2, perPage: 5 },
-};
-
 const fixtures = {
   'should return unassigned roles': () =>
     selectUnassignedRoles(stateFactory(state1)),
   'should return all roles when no roles assigned': () =>
     selectUnassignedRoles(stateFactory(state2)),
-  'should return requested page': () =>
-    selectAssignedRolesPage(stateFactory(state3)),
 };
 
 describe('AnsibleRolesSwitcherSelectors', () =>

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

@@ -57,22 +57,17 @@ exports[`AnsibleRolesSwitcher should render 1`] = `
         className="assigned-roles-header"
       >
         <h2>
+          <OrderedRolesTooltip />
           Assigned Ansible Roles
         </h2>
       </div>
       <AssignedRolesList
-        allAssignedRoles={Array []}
         assignedRoles={Array []}
-        itemCount={2}
-        onPaginationChange={[Function]}
+        onMoveRole={[Function]}
         onRemoveRole={[Function]}
-        pagination={
-          Object {
-            "page": 1,
-            "perPage": 12,
-          }
-        }
         resourceName=""
+        toDestroyRoles={Array []}
+        unassignedRoles={Array []}
       />
     </Col>
   </Row>

data/webpack/components/AnsibleRolesSwitcher/__tests__/__snapshots__/AnsibleRolesSwitcherReducer.test.js.snap

@@ -82,87 +82,7 @@ Object {
       "name": "anonymous.something",
     },
   ],
-}
-`;
-
-exports[`AnsibleRolesSwitcherReducer should change pagination for assigned roles 1`] = `
-Object {
-  "assignedPagination": Object {
-    "page": 20,
-    "perPage": 5,
-  },
-  "assignedRoles": Array [
-    Object {
-      "id": 4,
-      "inherited": true,
-      "name": "geerlingguy.java",
-    },
-    Object {
-      "id": 5,
-      "name": "naftulikay.golang",
-    },
-    Object {
-      "id": 6,
-      "name": "theforeman.foreman_scap_client",
-    },
-  ],
-  "error": Object {
-    "errorMsg": "",
-    "status": "",
-    "statusText": "",
-  },
-  "itemCount": 11,
-  "loading": false,
-  "pagination": Object {
-    "page": 1,
-    "perPage": 5,
-  },
-  "results": Array [
-    Object {
-      "id": 1,
-      "name": "sthirugn.motd",
-    },
-    Object {
-      "id": 2,
-      "name": "jtyr.ntp",
-    },
-    Object {
-      "id": 3,
-      "name": "rvm.ruby",
-    },
-    Object {
-      "id": 4,
-      "name": "geerlingguy.java",
-    },
-    Object {
-      "id": 5,
-      "name": "naftulikay.golang",
-    },
-    Object {
-      "id": 6,
-      "name": "theforeman.foreman_scap_client",
-    },
-    Object {
-      "id": 7,
-      "name": "ansible.ansible",
-    },
-    Object {
-      "id": 8,
-      "name": "puppet.puppet",
-    },
-    Object {
-      "id": 9,
-      "name": "chef.chef",
-    },
-    Object {
-      "id": 10,
-      "name": "salt.salt",
-    },
-    Object {
-      "id": 11,
-      "name": "anonymous.something",
-    },
-  ],
+  "toDestroyRoles": Array [],
 }
 `;
 
@@ -239,7 +159,10 @@ Object {
       "id": 11,
       "name": "anonymous.something",
     },
+  ],
+  "toDestroyRoles": Array [
     Object {
+      "destroy": true,
       "id": 6,
       "name": "theforeman.foreman_scap_client",
     },
@@ -249,10 +172,6 @@ Object {
 
 exports[`AnsibleRolesSwitcherReducer should return initial state 1`] = `
 Object {
-  "assignedPagination": Object {
-    "page": 1,
-    "perPage": 10,
-  },
   "assignedRoles": Array [],
   "error": Object {
     "errorMsg": "",
@@ -267,15 +186,12 @@ Object {
     "perPage": 10,
   },
   "results": Array [],
+  "toDestroyRoles": Array [],
 }
 `;
 
 exports[`AnsibleRolesSwitcherReducer should start loading on Ansible roles request 1`] = `
 Object {
-  "assignedPagination": Object {
-    "page": 1,
-    "perPage": 10,
-  },
   "assignedRoles": Array [],
   "error": Object {
     "errorMsg": "",
@@ -290,15 +206,12 @@ Object {
     "perPage": 10,
   },
   "results": Array [],
+  "toDestroyRoles": Array [],
 }
 `;
 
 exports[`AnsibleRolesSwitcherReducer should stop loading on Ansible roles error 1`] = `
 Object {
-  "assignedPagination": Object {
-    "page": 1,
-    "perPage": 10,
-  },
   "assignedRoles": Array [],
   "error": Object {
     "errorMsg": "Failed to fetch Ansible Roles from server.",
@@ -312,15 +225,12 @@ Object {
     "perPage": 10,
   },
   "results": Array [],
+  "toDestroyRoles": Array [],
 }
 `;
 
 exports[`AnsibleRolesSwitcherReducer should stop loading on Ansible roles success 1`] = `
 Object {
-  "assignedPagination": Object {
-    "page": 1,
-    "perPage": 10,
-  },
   "assignedRoles": Array [
     Object {
       "id": 4,
@@ -395,5 +305,6 @@ Object {
       "name": "anonymous.something",
     },
   ],
+  "toDestroyRoles": Array [],
 }
 `;

data/webpack/components/AnsibleRolesSwitcher/__tests__/__snapshots__/AnsibleRolesSwitcherSelectors.test.js.snap

@@ -3,8 +3,8 @@
 exports[`AnsibleRolesSwitcherSelectors should return all roles when no roles assigned 1`] = `
 Array [
   Object {
-    "id": 4,
-    "name": "geerlingguy.java",
+    "id": 1,
+    "name": "sthirugn.motd",
   },
   Object {
     "id": 2,
@@ -15,46 +15,21 @@ Array [
     "name": "rvm.ruby",
   },
   Object {
-    "id": 1,
-    "name": "sthirugn.motd",
+    "id": 4,
+    "name": "geerlingguy.java",
   },
 ]
 `;
 
-exports[`AnsibleRolesSwitcherSelectors should return requested page 1`] = `
+exports[`AnsibleRolesSwitcherSelectors should return unassigned roles 1`] = `
 Array [
-  Object {
-    "id": 5,
-    "name": "naftulikay.golang",
-  },
-  Object {
-    "id": 8,
-    "name": "puppet.puppet",
-  },
-  Object {
-    "id": 3,
-    "name": "rvm.ruby",
-  },
-  Object {
-    "id": 10,
-    "name": "salt.salt",
-  },
   Object {
     "id": 1,
     "name": "sthirugn.motd",
   },
-]
-`;
-
-exports[`AnsibleRolesSwitcherSelectors should return unassigned roles 1`] = `
-Array [
   Object {
     "id": 3,
     "name": "rvm.ruby",
   },
-  Object {
-    "id": 1,
-    "name": "sthirugn.motd",
-  },
 ]
 `;

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/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;