foreman_ansible 17.0.7 → 17.0.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dd645b6ec753e8ce92665fe3066bf1dd0e75958b469ee59bef46a1cd5849fb13
-  data.tar.gz: 9214229a5415d6053ee2cd6c67b89c86313bfec3003ae0c90cd9bd9063625d2e
+  metadata.gz: b6cd8765eae0204e9dec617d7d3e267abfffc55d402d87026812deadcb720049
+  data.tar.gz: 47d5ba9efc868bcf4164dc28106a67ee42010a74017bf70551e00b856a696b33
 SHA512:
-  metadata.gz: bf7b0ba966b2d6b5112d974562b8a9e738ed969aa7dc615dc89c96f8a4b7772d3618b5b6fa4e6567570bac5f066fce34d27f684cd2d5730326289015f8887c54
-  data.tar.gz: 0f34a19864d03600031014666d6edc8f5f151abdbb1e4046eccc32935eeac7a1daa6f81b54837793f832daf96adb747228364237259b09c5ddfe3be02d8f4208
+  metadata.gz: 3aac0662ea3b05bcdae57b8aa80a5bc51b7008b775686c39f024e24c1c294ea51404965e5bf699b888a7a436862255162b9085e8fdd706e5297177e732ad13a9
+  data.tar.gz: 4feef7c8a25d8688d24d5e05826d994050bfbfbc6407480ccd773eaae862fdde5a30ba899f0c9e85e51c5cd3a788313cf6802d39be1cdd225e5391247de3de3c

data/lib/foreman_ansible/version.rb

@@ -4,5 +4,5 @@
 # This way other parts of Foreman can just call ForemanAnsible::VERSION
 # and detect what version the plugin is running.
 module ForemanAnsible
-  VERSION = '17.0.7'
+  VERSION = '17.0.8'
 end

data/webpack/components/AnsibleRolesSwitcher/AnsibleRolesSwitcher.js

@@ -1,107 +1,93 @@
-import React from 'react';
-import { Grid, Row, Col } from 'patternfly-react';
+import React, { useEffect } from 'react';
 import { lowerCase } from 'lodash';
 import PropTypes from 'prop-types';
+import { Spinner } from '@patternfly/react-core';
+import { InfoCircleIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
 
-import AvailableRolesList from './components/AvailableRolesList';
-import AssignedRolesList from './components/AssignedRolesList';
+import DualList from '../DualList';
 import AnsibleRolesSwitcherError from './components/AnsibleRolesSwitcherError';
-import OrderedRolesTooltip from './components/OrderedRolesTooltip';
-import { excludeAssignedRolesSearch } from './AnsibleRolesSwitcherHelpers';
+import AnsibleRoleInputs from './components/AnsibleRoleInputs';
+import InheritedRolesList from './components/InheritedRolesList';
+import { roleNames } from './AnsibleRolesSwitcherHelpers';
+import './AnsibleRolesSwitcher.scss';
 
-class AnsibleRolesSwitcher extends React.Component {
-  componentDidMount() {
-    const {
-      initialAssignedRoles,
-      availableRolesUrl,
-      inheritedRoleIds,
-      resourceId,
-      resourceName,
-    } = this.props;
-
-    this.props.getAnsibleRoles(
+const AnsibleRolesSwitcher = ({
+  initialAssignedRoles,
+  availableRolesUrl,
+  inheritedRoleIds,
+  resourceId,
+  resourceName,
+  getAnsibleRoles,
+  loading,
+  assignedRoles,
+  unassignedRoles,
+  toDestroyRoles,
+  dualListChange,
+  error,
+}) => {
+  useEffect(() => {
+    getAnsibleRoles(
       availableRolesUrl,
       initialAssignedRoles,
       inheritedRoleIds,
       resourceId,
       resourceName,
-      excludeAssignedRolesSearch(initialAssignedRoles)
+      { perPage: 'all' }
     );
-  }
-
-  render() {
-    const {
-      loading,
-      pagination,
-      itemCount,
-      addAnsibleRole,
-      removeAnsibleRole,
-      moveAnsibleRole,
-      getAnsibleRoles,
-      assignedRoles,
-      unassignedRoles,
-      toDestroyRoles,
-      error,
-    } = this.props;
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-    const {
-      availableRolesUrl,
-      inheritedRoleIds,
-      resourceId,
-      resourceName,
-    } = this.props;
+  const inheritedRoles = assignedRoles.filter(role => role.inherited);
+  const ownAssignedRoles = assignedRoles.filter(role => !role.inherited);
+  const resourceNameLower = lowerCase(resourceName || '');
 
-    const onListingChange = paginationArgs =>
-      getAnsibleRoles(
-        availableRolesUrl,
-        assignedRoles,
-        inheritedRoleIds,
-        resourceId,
-        resourceName,
-        paginationArgs,
-        excludeAssignedRolesSearch(assignedRoles)
-      );
+  const onListChange = (_availableNames, chosenNames) =>
+    dualListChange(chosenNames);
 
-    return (
-      <Grid bsClass="container-fluid" id="ansibleRolesSwitcher">
-        <Row className="row-eq-height">
-          <AnsibleRolesSwitcherError error={error} />
-          <Col sm={6} className="available-roles-container">
-            <div className="available-roles-header">
-              <h2>{__('Available Ansible Roles')}</h2>
-            </div>
-            <AvailableRolesList
-              unassignedRoles={unassignedRoles}
-              pagination={pagination}
-              itemCount={itemCount}
-              onListingChange={onListingChange}
-              onAddRole={addAnsibleRole}
-              loading={loading}
-            />
-          </Col>
+  const ownRolesForInputs = ownAssignedRoles.concat(toDestroyRoles);
 
-          <Col sm={6} className="assigned-roles-container">
-            <div className="assigned-roles-header">
-              <h2>
-                <OrderedRolesTooltip />
-                {__('Assigned Ansible Roles')}
-              </h2>
-            </div>
-            <AssignedRolesList
-              assignedRoles={assignedRoles}
-              unassignedRoles={unassignedRoles}
-              onRemoveRole={removeAnsibleRole}
-              onMoveRole={moveAnsibleRole}
-              resourceName={lowerCase(resourceName || '')}
-              toDestroyRoles={toDestroyRoles}
+  return (
+    <div id="ansibleRolesSwitcher">
+      <AnsibleRolesSwitcherError error={error} />
+      {loading ? (
+        <Spinner size="lg" />
+      ) : (
+        <>
+          <InheritedRolesList
+            roles={inheritedRoles}
+            resourceName={resourceNameLower}
+          />
+          <DualList
+            availableOptions={roleNames(unassignedRoles)}
+            chosenOptions={roleNames(ownAssignedRoles)}
+            onListChange={onListChange}
+          />
+          <p className="ansible-roles-order-info">
+            <InfoCircleIcon
+              className="ansible-roles-order-info-icon"
+              aria-hidden
             />
-          </Col>
-        </Row>
-      </Grid>
-    );
-  }
-}
+            <span>
+              {__(
+                'Use drag and drop to change order of the assigned roles. Ordering of roles is respected for Ansible runs, inherited roles are always before those assigned directly'
+              )}
+            </span>
+          </p>
+          <div className="ansible-roles-hidden-inputs">
+            {ownRolesForInputs.map((role, idx) => (
+              <AnsibleRoleInputs
+                key={role.id}
+                role={role}
+                idx={idx}
+                resourceName={resourceNameLower}
+              />
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
 
 AnsibleRolesSwitcher.propTypes = {
   initialAssignedRoles: PropTypes.arrayOf(PropTypes.object),
@@ -110,15 +96,8 @@ AnsibleRolesSwitcher.propTypes = {
   resourceId: PropTypes.number,
   resourceName: PropTypes.string,
   getAnsibleRoles: PropTypes.func.isRequired,
+  dualListChange: PropTypes.func.isRequired,
   loading: PropTypes.bool.isRequired,
-  pagination: PropTypes.shape({
-    page: PropTypes.number,
-    perPage: PropTypes.number,
-  }).isRequired,
-  itemCount: PropTypes.number.isRequired,
-  addAnsibleRole: PropTypes.func.isRequired,
-  removeAnsibleRole: PropTypes.func.isRequired,
-  moveAnsibleRole: PropTypes.func.isRequired,
   assignedRoles: PropTypes.arrayOf(PropTypes.object).isRequired,
   toDestroyRoles: PropTypes.arrayOf(PropTypes.object).isRequired,
   unassignedRoles: PropTypes.arrayOf(PropTypes.object).isRequired,

data/webpack/components/AnsibleRolesSwitcher/AnsibleRolesSwitcher.scss

@@ -1,43 +1,55 @@
 @import 'foremanReact/common/variables';
 
 #ansibleRolesSwitcher {
-  .list-view-pf {
-    .list-group-item.ansible-role-disabled {
-      background-color: $color-pf-black-200;
-      color: $color-pf-black-500;
-      border-left-color: $color-pf-black-200;
-      border-right-color: $color-pf-black-200;
+  .pf-v5-c-dual-list-selector {
+    margin: var(--pf-v5-global--spacer--md) 0;
+  }
+
+  .ansible-inherited-roles {
+    --pf-v5-c-dual-list-selector__title-text--FontWeight: var(
+      --pf-v5-global--FontWeight--bold
+    );
+    --pf-v5-c-dual-list-selector__header--MarginBottom: var(
+      --pf-v5-global--spacer--sm
+    );
+
+    .pf-v5-c-dual-list-selector__header {
+      margin-block-end: var(--pf-v5-c-dual-list-selector__header--MarginBottom);
     }
 
-    .list-group-item.ansible-role-movable:hover {
-      cursor: grab;
+    .pf-v5-c-dual-list-selector__title-text {
+      font-weight: var(--pf-v5-c-dual-list-selector__title-text--FontWeight);
     }
-  }
 
-  .loading-state-pf {
-    padding-top: 5%;
-    background-color: $color-pf-white;
-  }
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
 
-  .role-add-remove-btn {
-    background-color: initial;
-    border: none;
-    color: #0388ce;
+    li {
+      padding: 0.5rem 0.75rem;
+      margin-bottom: 0.25rem;
+      background-color: var(--pf-v5-global--BackgroundColor--200);
+      color: var(--pf-v5-global--Color--200);
+      border-radius: 3px;
+    }
   }
 
-  .list-view-pf-main-info {
-    padding-top: 10px;
-    padding-bottom: 10px;
-  }
+  .ansible-roles-order-info {
+    display: flex;
+    gap: var(--pf-v5-global--spacer--sm);
+    margin: 0;
+    font-size: var(--pf-v5-global--FontSize--sm);
+    color: var(--pf-v5-global--Color--200);
 
-  .list-view-pf-actions {
-    margin-top: 0;
-    margin-bottom: 0;
+    .ansible-roles-order-info-icon {
+      flex-shrink: 0;
+      margin-top: 0.15rem;
+    }
   }
 
-  .list-group-item-heading {
-    margin-bottom: 0;
-    font-size: 12px;
-    font-weight: normal;
+  .ansible-roles-hidden-inputs {
+    display: none;
   }
 }

data/webpack/components/AnsibleRolesSwitcher/AnsibleRolesSwitcherActions.js

@@ -9,10 +9,7 @@ import {
   ANSIBLE_ROLES_REQUEST,
   ANSIBLE_ROLES_SUCCESS,
   ANSIBLE_ROLES_FAILURE,
-  ANSIBLE_ROLES_ADD,
-  ANSIBLE_ROLES_REMOVE,
-  ANSIBLE_ROLES_MOVE,
-  ANSIBLE_ROLES_ASSIGNED_PAGE_CHANGE,
+  ANSIBLE_ROLES_DUAL_LIST_CHANGE,
 } from './AnsibleRolesSwitcherConstants';
 
 export const getAnsibleRoles = (
@@ -21,14 +18,12 @@ export const getAnsibleRoles = (
   inheritedRoleIds,
   resourceId,
   resourceName,
-  pagination,
-  search
+  pagination
 ) => async dispatch => {
   dispatch({ type: ANSIBLE_ROLES_REQUEST });
 
   const params = {
     ...propsToSnakeCase(pagination || {}),
-    ...(search || {}),
     ...propsToSnakeCase({ resourceId, resourceName }),
   };
 
@@ -43,34 +38,18 @@ export const getAnsibleRoles = (
       },
     });
   } catch (error) {
-    return dispatch(errorHandler(ANSIBLE_ROLES_FAILURE, error));
+    const err = {
+      errorMsg: __('Failed to fetch Ansible Roles from server.'),
+      statusText: error.response?.statusText,
+    };
+    return dispatch({
+      type: ANSIBLE_ROLES_FAILURE,
+      payload: { error: err },
+    });
   }
 };
 
-const errorHandler = (msg, err) => {
-  const error = {
-    errorMsg: __('Failed to fetch Ansible Roles from server.'),
-    statusText: err.response.statusText,
-  };
-  return { type: msg, payload: { error } };
-};
-
-export const addAnsibleRole = role => ({
-  type: ANSIBLE_ROLES_ADD,
-  payload: { role },
-});
-
-export const removeAnsibleRole = role => ({
-  type: ANSIBLE_ROLES_REMOVE,
-  payload: { role },
-});
-
-export const moveAnsibleRole = roles => ({
-  type: ANSIBLE_ROLES_MOVE,
-  payload: { roles },
-});
-
-export const changeAssignedPage = pagination => ({
-  type: ANSIBLE_ROLES_ASSIGNED_PAGE_CHANGE,
-  payload: { pagination },
+export const dualListChange = chosenNames => ({
+  type: ANSIBLE_ROLES_DUAL_LIST_CHANGE,
+  payload: { chosenNames },
 });

data/webpack/components/AnsibleRolesSwitcher/AnsibleRolesSwitcherConstants.js

@@ -1,6 +1,4 @@
 export const ANSIBLE_ROLES_REQUEST = 'ANSIBLE_ROLES_REQUEST';
 export const ANSIBLE_ROLES_SUCCESS = 'ANSIBLE_ROLES_SUCCESS';
 export const ANSIBLE_ROLES_FAILURE = 'ANSIBLE_ROLES_FAILURE';
-export const ANSIBLE_ROLES_ADD = 'ANSIBLE_ROLES_ADD';
-export const ANSIBLE_ROLES_REMOVE = 'ANSIBLE_ROLES_REMOVE';
-export const ANSIBLE_ROLES_MOVE = 'ANSIBLE_ROLE_MOVE';
+export const ANSIBLE_ROLES_DUAL_LIST_CHANGE = 'ANSIBLE_ROLES_DUAL_LIST_CHANGE';

data/webpack/components/AnsibleRolesSwitcher/AnsibleRolesSwitcherHelpers.js

@@ -1,7 +1 @@
-export const excludeAssignedRolesSearch = assignedRoles => {
-  const searchString =
-    assignedRoles.length === 0
-      ? ''
-      : `id !^ (${assignedRoles.map(role => role.id).join(', ')})`;
-  return { search: searchString };
-};
+export const roleNames = roles => roles.map(role => role.name);

data/webpack/components/AnsibleRolesSwitcher/AnsibleRolesSwitcherReducer.js

@@ -4,18 +4,11 @@ import {
   ANSIBLE_ROLES_REQUEST,
   ANSIBLE_ROLES_SUCCESS,
   ANSIBLE_ROLES_FAILURE,
-  ANSIBLE_ROLES_ADD,
-  ANSIBLE_ROLES_REMOVE,
-  ANSIBLE_ROLES_MOVE,
+  ANSIBLE_ROLES_DUAL_LIST_CHANGE,
 } from './AnsibleRolesSwitcherConstants';
 
 export const initialState = Immutable({
   loading: false,
-  itemCount: 0,
-  pagination: {
-    page: 1,
-    perPage: 10,
-  },
   assignedRoles: [],
   toDestroyRoles: [],
   inheritedRoleIds: [],
@@ -32,40 +25,40 @@ const ansibleRoles = (state = initialState, action) => {
     case ANSIBLE_ROLES_SUCCESS:
       return state.merge({
         loading: false,
-        itemCount: Number(payload.subtotal),
-        pagination: {
-          page: Number(payload.page),
-          perPage: Number(payload.perPage),
-        },
         results: payload.results,
         assignedRoles: payload.initialAssignedRoles,
         inheritedRoleIds: payload.inheritedRoleIds,
+        error: { errorMsg: '', status: '', statusText: '' },
       });
     case ANSIBLE_ROLES_FAILURE:
       return state.merge({ error: payload.error, loading: false });
-    case ANSIBLE_ROLES_ADD:
-      return state.merge({
-        assignedRoles: state.assignedRoles.concat([payload.role]),
-        toDestroyRoles: state.toDestroyRoles.filter(
-          item => item.id !== payload.role.id
-        ),
-        itemCount: state.itemCount - 1,
-      });
-    case ANSIBLE_ROLES_REMOVE:
+    case ANSIBLE_ROLES_DUAL_LIST_CHANGE: {
+      const { chosenNames } = payload;
+      const inherited = state.assignedRoles.filter(role =>
+        state.inheritedRoleIds.includes(role.id)
+      );
+      const currentOwn = state.assignedRoles.filter(
+        role => !state.inheritedRoleIds.includes(role.id)
+      );
+      const roleByName = name =>
+        currentOwn.find(role => role.name === name) ||
+        state.results.find(role => role.name === name) ||
+        state.toDestroyRoles.find(role => role.name === name);
+
+      const removed = currentOwn.filter(
+        role => !chosenNames.includes(role.name)
+      );
+      const newOwn = chosenNames
+        .map(name => roleByName(name))
+        .filter(role => role && !state.inheritedRoleIds.includes(role.id));
+
       return state.merge({
-        assignedRoles: Immutable.flatMap(state.assignedRoles, item =>
-          item.id === payload.role.id ? [] : item
-        ),
-        results: state.results.find(item => payload.role.id === item.id)
-          ? state.results
-          : state.results.concat([payload.role]),
-        toDestroyRoles: state.toDestroyRoles.concat([
-          { ...payload.role, destroy: true },
-        ]),
-        itemCount: state.itemCount + 1,
+        assignedRoles: inherited.concat(newOwn),
+        toDestroyRoles: state.toDestroyRoles
+          .filter(item => !newOwn.some(role => role.id === item.id))
+          .concat(removed.map(role => ({ ...role, destroy: true }))),
       });
-    case ANSIBLE_ROLES_MOVE:
-      return state.set('assignedRoles', payload.roles);
+    }
     default:
       return state;
   }

data/webpack/components/AnsibleRolesSwitcher/AnsibleRolesSwitcherSelectors.js

@@ -10,13 +10,11 @@ const markInheritedRoles = (roles, inheritedRoleIds) =>
     includes(inheritedRoleIds, role.id) ? { ...role, inherited: true } : role
   );
 
-export const selectResults = state =>
+const selectResults = state =>
   Immutable(
     Immutable.asMutable(switcherState(state).results.map(propsToCamelCase))
   );
 
-export const selectItemCount = state => switcherState(state).itemCount;
-
 export const selectAssignedRoles = state =>
   Immutable.asMutable(
     markInheritedRoles(
@@ -26,20 +24,12 @@ export const selectAssignedRoles = state =>
   );
 
 export const selectToDestroyRoles = state =>
-  switcherState(state).toDestroyRoles;
+  Immutable.asMutable(
+    switcherState(state).toDestroyRoles.map(propsToCamelCase)
+  );
 
 export const selectLoading = state => switcherState(state).loading;
 export const selectError = state => switcherState(state).error;
-export const selectPagination = state => switcherState(state).pagination;
-
-export const selectPaginationMemoized = createSelector(
-  selectPagination,
-  selectResults,
-  (pagination, results) =>
-    results.length > pagination.perPage
-      ? { ...pagination, perPage: results.length }
-      : pagination
-);
 
 export const selectUnassignedRoles = createSelector(
   selectResults,

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

@@ -3,9 +3,6 @@ import Immutable from 'seamless-immutable';
 import { ansibleRolesLong } from './ansibleRolesData.fixtures';
 
 export const successPayload = {
-  page: 1,
-  perPage: 5,
-  subtotal: 11,
   results: ansibleRolesLong,
   initialAssignedRoles: ansibleRolesLong.slice(3, 6),
   inheritedRoleIds: [4],
@@ -13,21 +10,13 @@ export const successPayload = {
 
 export const successState = Immutable({
   loading: false,
-  itemCount: 11,
-  pagination: {
-    page: 1,
-    perPage: 5,
-  },
   assignedRoles: [
     { ...ansibleRolesLong[3], inherited: true },
     ...ansibleRolesLong.slice(4, 6),
   ],
   results: ansibleRolesLong,
   toDestroyRoles: [],
-  assignedPagination: {
-    page: 1,
-    perPage: 20,
-  },
+  inheritedRoleIds: [4],
   error: { errorMsg: '', status: '', statusText: '' },
 });