foreman_ansible 17.0.9 → 18.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cd2541b943e7880fe2ba5e0d324201353404cd66c4c5a290ea9674998587114b
-  data.tar.gz: 50c6e9be97dce5a43db62fb490c2acaa4919c4ed0696beb6d24fa0b99bfdff5e
+  metadata.gz: '087d3ebdcf70f8891bf6de236413f46c971950589ecc7a9b32aa781b747f0d64'
+  data.tar.gz: 11d10eeff06402af8baaeda250d021c44db0fc21bd86450a1123f47d19083353
 SHA512:
-  metadata.gz: af34bb1ff7a20d37a84ceb972efcd4f7ff4468e979a1f5fbe992b43c88c426e18e2696aa54b828212ca6ceecdbadf8ff7f1b3b0b4e16c09ce8dc23766e36bdb7
-  data.tar.gz: 7d354aad703f47f77404adb10effe366c42dc141d4dffb8dd4018a429f18410dc0e842dd655bf6cdf430fee8c366b66963c68ac6702764695b45370535bda7f5
+  metadata.gz: 550e5075d68631d646f73b56b370d7816dc2f59a784cc1d828c04b453fde61871d14293aba62fbdca70aa063eec4d74cbe77d5b8d2b1eedd9bafd12c0f24d610
+  data.tar.gz: 4b459dcf5991a72248fe82f8bc348a28f10593834fb5c3b352fbebc55a22020efee2af4fe593cd2a67d161f7b197ef4fd0e96682b0e0f5a5de93184a9f0149da

data/lib/foreman_ansible/register.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 Foreman::Plugin.register :foreman_ansible do
-  requires_foreman '>= 3.16.0'
+  requires_foreman '>= 5.0'
   register_gettext
 
   settings do

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.9'
+  VERSION = '18.0.0'
 end

data/webpack/components/AnsibleRolesAndVariables/AnsibleRolesAndVariablesActions.js

@@ -9,6 +9,8 @@ import {
   ANSIBLE_ROLES_INDEX,
 } from './AnsibleRolesAndVariablesConstants';
 
+const REDIRECT_DELAY_MS = 500;
+
 export const foremanUrl = path => `${window.URL_PREFIX}${path}`;
 
 export const onSubmit = (rows, proxy) => dispatch => {
@@ -19,7 +21,10 @@ export const onSubmit = (rows, proxy) => dispatch => {
       url: ANSIBLE_ROLE_CONFIRM_IMPORT_PATH,
       params: { changed: params, proxy },
       handleSuccess: () => {
-        setTimeout(() => dispatch(push(ANSIBLE_ROLES_INDEX)), 500);
+        setTimeout(
+          () => dispatch(push(ANSIBLE_ROLES_INDEX)),
+          REDIRECT_DELAY_MS
+        );
       },
       successToast: response => (
         <span>

data/webpack/components/AnsibleRolesSwitcher/AnsibleRolesSwitcher.scss

@@ -6,19 +6,12 @@
   }
 
   .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);
-    }
-
-    .pf-v5-c-dual-list-selector__title-text {
-      font-weight: var(--pf-v5-c-dual-list-selector__title-text--FontWeight);
+    .ansible-inherited-roles-title {
+      margin: 0 0 var(--pf-v5-global--spacer--sm);
+      font-family: var(--pf-v5-global--FontFamily--text);
+      font-size: var(--pf-v5-global--FontSize--sm);
+      font-weight: var(--pf-v5-global--FontWeight--bold);
+      line-height: var(--pf-v5-global--LineHeight--md);
     }
 
     ul {

data/webpack/components/AnsibleRolesSwitcher/AnsibleRolesSwitcherReducer.js

@@ -34,6 +34,7 @@ const ansibleRoles = (state = initialState, action) => {
       return state.merge({ error: payload.error, loading: false });
     case ANSIBLE_ROLES_DUAL_LIST_CHANGE: {
       const { chosenNames } = payload;
+      const chosenNamesUnique = [...new Set(chosenNames)];
       const inherited = state.assignedRoles.filter(role =>
         state.inheritedRoleIds.includes(role.id)
       );
@@ -42,20 +43,24 @@ const ansibleRoles = (state = initialState, action) => {
       );
       const roleByName = name =>
         currentOwn.find(role => role.name === name) ||
-        state.results.find(role => role.name === name) ||
-        state.toDestroyRoles.find(role => role.name === name);
+        state.toDestroyRoles.find(role => role.name === name) ||
+        state.results.find(role => role.name === name);
 
       const removed = currentOwn.filter(
-        role => !chosenNames.includes(role.name)
+        role => !chosenNamesUnique.includes(role.name)
       );
-      const newOwn = chosenNames
+      const newOwn = chosenNamesUnique
         .map(name => roleByName(name))
-        .filter(role => role && !state.inheritedRoleIds.includes(role.id));
+        .filter(role => role && !state.inheritedRoleIds.includes(role.id))
+        .map(role => ({ ...role, destroy: false }));
+
+      const isSameRole = (left, right) =>
+        left.name === right.name || String(left.id) === String(right.id);
 
       return state.merge({
         assignedRoles: inherited.concat(newOwn),
         toDestroyRoles: state.toDestroyRoles
-          .filter(item => !newOwn.some(role => role.id === item.id))
+          .filter(item => !newOwn.some(role => isSameRole(role, item)))
           .concat(removed.map(role => ({ ...role, destroy: true }))),
       });
     }

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

@@ -72,4 +72,45 @@ describe('AnsibleRolesSwitcherReducer', () => {
     expect(state.inheritedRoleIds).toEqual([4]);
     expect(state.results).toEqual(ansibleRolesLong);
   });
+
+  it('restores removed roles without duplicating destroy entries', () => {
+    const ownRole = {
+      ...ansibleRolesLong[4],
+      host_ansible_role_id: 42,
+    };
+    const stateAfterRemoveAll = reducer(
+      successState.set('assignedRoles', [
+        ansibleRolesLong[3],
+        ownRole,
+        ansibleRolesLong[5],
+      ]),
+      {
+        type: ANSIBLE_ROLES_DUAL_LIST_CHANGE,
+        payload: { chosenNames: [] },
+      }
+    );
+
+    expect(stateAfterRemoveAll.toDestroyRoles).toEqual([
+      { ...ownRole, destroy: true },
+      { ...ansibleRolesLong[5], destroy: true },
+    ]);
+
+    const stateAfterReAdd = reducer(stateAfterRemoveAll, {
+      type: ANSIBLE_ROLES_DUAL_LIST_CHANGE,
+      payload: {
+        chosenNames: [ownRole.name, ansibleRolesLong[5].name],
+      },
+    });
+
+    expect(stateAfterReAdd.assignedRoles.map(role => role.name)).toEqual([
+      ansibleRolesLong[3].name,
+      ownRole.name,
+      ansibleRolesLong[5].name,
+    ]);
+    expect(stateAfterReAdd.assignedRoles[1]).toEqual({
+      ...ownRole,
+      destroy: false,
+    });
+    expect(stateAfterReAdd.toDestroyRoles).toEqual([]);
+  });
 });

data/webpack/components/AnsibleRolesSwitcher/components/InheritedRolesList.js

@@ -1,10 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Tooltip } from '@patternfly/react-core';
+import { Title, Tooltip } from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
 
-import ListHeader from '../../DualList/ListHeader';
-
 const InheritedRolesList = ({ roles, resourceName }) => {
   if (roles.length === 0) {
     return null;
@@ -17,7 +15,14 @@ const InheritedRolesList = ({ roles, resourceName }) => {
 
   return (
     <div className="ansible-inherited-roles">
-      <ListHeader title={__('Inherited Ansible Roles')} />
+      <Title
+        headingLevel="h2"
+        size="md"
+        className="ansible-inherited-roles-title"
+        ouiaId="inherited-ansible-roles-title"
+      >
+        {__('Inherited Ansible Roles')}
+      </Title>
       <ul>
         {roles.map(role => (
           <li key={role.id}>

data/webpack/components/DualList/DualList.test.js

@@ -0,0 +1,101 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+
+import DualList from './index';
+
+const defaultProps = {
+  availableOptions: ['role.a', 'role.b'],
+  chosenOptions: ['role.c'],
+  onListChange: jest.fn(),
+};
+
+describe('DualList', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders available and chosen options', () => {
+    render(<DualList {...defaultProps} />);
+
+    expect(screen.getByText('Available Ansible roles')).toBeInTheDocument();
+    expect(screen.getByText('Assigned Ansible roles')).toBeInTheDocument();
+    expect(screen.getByText('role.a')).toBeInTheDocument();
+    expect(screen.getByText('role.b')).toBeInTheDocument();
+    expect(screen.getByText('role.c')).toBeInTheDocument();
+  });
+
+  it('moves selected available options to chosen', () => {
+    render(<DualList {...defaultProps} />);
+
+    fireEvent.click(screen.getByRole('option', { name: 'role.a' }));
+    userEvent.click(screen.getByRole('button', { name: 'Add selected' }));
+
+    expect(defaultProps.onListChange).toHaveBeenCalledWith(
+      ['role.b'],
+      ['role.c', 'role.a']
+    );
+  });
+
+  it('moves selected chosen options to available', () => {
+    render(<DualList {...defaultProps} />);
+
+    fireEvent.click(screen.getByRole('option', { name: 'role.c' }));
+    userEvent.click(screen.getByRole('button', { name: 'Remove selected' }));
+
+    expect(defaultProps.onListChange).toHaveBeenCalledWith(
+      ['role.a', 'role.b', 'role.c'],
+      []
+    );
+  });
+
+  it('moves all available options to chosen', () => {
+    render(<DualList {...defaultProps} />);
+
+    userEvent.click(screen.getByRole('button', { name: 'Add all' }));
+
+    expect(defaultProps.onListChange).toHaveBeenCalledWith(
+      [],
+      ['role.c', 'role.a', 'role.b']
+    );
+  });
+
+  it('moves all chosen options to available', () => {
+    render(<DualList {...defaultProps} />);
+
+    userEvent.click(screen.getByRole('button', { name: 'Remove all' }));
+
+    expect(defaultProps.onListChange).toHaveBeenCalledWith(
+      ['role.a', 'role.b', 'role.c'],
+      []
+    );
+  });
+
+  it('disables move controls when nothing is selected or lists are empty', () => {
+    render(
+      <DualList
+        availableOptions={[]}
+        chosenOptions={[]}
+        onListChange={jest.fn()}
+      />
+    );
+
+    expect(screen.getByRole('button', { name: 'Add selected' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Add all' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Remove all' })).toBeDisabled();
+    expect(
+      screen.getByRole('button', { name: 'Remove selected' })
+    ).toBeDisabled();
+  });
+
+  it('shows selection status for each pane', () => {
+    render(<DualList {...defaultProps} />);
+
+    fireEvent.click(screen.getByRole('option', { name: 'role.a' }));
+    fireEvent.click(screen.getByRole('option', { name: 'role.c' }));
+
+    expect(screen.getByText('1 of 2 items selected')).toBeInTheDocument();
+    expect(screen.getByText('1 of 1 items selected')).toBeInTheDocument();
+  });
+});

data/webpack/components/DualList/index.js

@@ -1,103 +1,47 @@
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
+import OrderableDualListSelector from 'foremanReact/components/common/OrderableDualListSelector/OrderableDualListSelector';
 import { translate as __ } from 'foremanReact/common/I18n';
 
-import ListControls from './ListControls';
-import ListPane from './ListPane';
-import './DualList.scss';
-
-const DualList = props => {
-  const defaultSelectState = { availableSelected: [], chosenSelected: [] };
-  const [selectState, setSelectState] = useState(defaultSelectState);
-
-  const onItemClick = stateName => itemName => (...args) => {
-    if (isItemSelected(stateName)(itemName)) {
-      setSelectState({
-        ...selectState,
-        [stateName]: selectState[stateName].filter(item => item !== itemName),
-      });
-    } else {
-      setSelectState({
-        ...selectState,
-        [stateName]: [...selectState[stateName], itemName],
-      });
-    }
-  };
-
-  const isItemSelected = stateName => item =>
-    selectState[stateName].includes(item);
-
-  const onAddAll = () =>
-    props.onListChange([], [...props.chosenOptions, ...props.availableOptions]);
-  const onRemoveAll = () =>
-    props.onListChange([...props.availableOptions, ...props.chosenOptions], []);
-
-  const onAddSelected = () => {
-    const [newAvailable, newChosen] = moveItems(
-      props.availableOptions,
-      props.chosenOptions,
-      selectState.availableSelected
-    );
-    setSelectState(defaultSelectState);
-    props.onListChange(newAvailable, newChosen);
-  };
-
-  const onRemoveSelected = () => {
-    const [newChosen, newAvailable] = moveItems(
-      props.chosenOptions,
-      props.availableOptions,
-      selectState.chosenSelected
-    );
-    setSelectState(defaultSelectState);
-    props.onListChange(newAvailable, newChosen);
-  };
-
-  const moveItems = (removeFrom, addTo, selected) => {
-    const newRemoveFrom = removeFrom.filter(item => !selected.includes(item));
-    return [newRemoveFrom, [...addTo, ...selected]];
-  };
-
-  const onChosenSetOrder = items =>
-    props.onListChange(props.availableOptions, items);
-
-  return (
-    <div className="pf-v5-c-dual-list-selector">
-      <ListPane
-        title={__('Available Ansible roles')}
-        items={props.availableOptions}
-        paneClass="pf-m-available"
-        onItemClick={onItemClick('availableSelected')}
-        selected={selectState.availableSelected}
-        isItemSelected={isItemSelected('availableSelected')}
-      />
-      <ListControls
-        onAddSelected={onAddSelected}
-        onRemoveSelected={onRemoveSelected}
-        onRemoveAll={onRemoveAll}
-        onAddAll={onAddAll}
-        addAllDisabled={props.availableOptions.length === 0}
-        removeAllDisabled={props.chosenOptions.length === 0}
-        addSelectedDisabled={selectState.availableSelected.length === 0}
-        removeSelectedDisabled={selectState.chosenSelected.length === 0}
-      />
-      <ListPane
-        title={__('Assigned Ansible roles')}
-        items={props.chosenOptions}
-        paneClass="pf-m-chosen"
-        draggable
-        onItemClick={onItemClick('chosenSelected')}
-        selected={selectState.chosenSelected}
-        isItemSelected={isItemSelected('chosenSelected')}
-        onSetOrderedItems={onChosenSetOrder}
-      />
-    </div>
-  );
-};
+const DualList = ({
+  availableOptions,
+  chosenOptions,
+  onListChange,
+  id,
+  availableOptionsTitle,
+  chosenOptionsTitle,
+  isDisabled,
+  showTooltips,
+}) => (
+  <OrderableDualListSelector
+    id={id}
+    availableOptions={availableOptions}
+    chosenOptions={chosenOptions}
+    onListChange={onListChange}
+    availableOptionsTitle={availableOptionsTitle}
+    chosenOptionsTitle={chosenOptionsTitle}
+    isDisabled={isDisabled}
+    showTooltips={showTooltips}
+  />
+);
 
 DualList.propTypes = {
   onListChange: PropTypes.func.isRequired,
   chosenOptions: PropTypes.array.isRequired,
   availableOptions: PropTypes.array.isRequired,
+  id: PropTypes.string,
+  availableOptionsTitle: PropTypes.string,
+  chosenOptionsTitle: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  showTooltips: PropTypes.bool,
+};
+
+DualList.defaultProps = {
+  id: 'ansible-roles-dual-list',
+  availableOptionsTitle: __('Available Ansible roles'),
+  chosenOptionsTitle: __('Assigned Ansible roles'),
+  isDisabled: false,
+  showTooltips: true,
 };
 
 export default DualList;

data/webpack/global_index.js

@@ -8,11 +8,13 @@ import AnsibleHostDetail from './components/AnsibleHostDetail';
 
 import { ANSIBLE_KEY } from './components/AnsibleHostDetail/constants';
 
+const ANSIBLE_TAB_WEIGHT = 500;
+
 addGlobalFill(
   'host-details-page-tabs',
   ANSIBLE_KEY,
   <AnsibleHostDetail key="ansible-host-detail" />,
-  500
+  ANSIBLE_TAB_WEIGHT
 );
 
 registerRoutes('foreman_ansible', routes);

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: foreman_ansible
 version: !ruby/object:Gem::Version
-  version: 17.0.9
+  version: 18.0.0
 platform: ruby
 authors:
 - Daniel Lobato Garcia
@@ -416,12 +416,7 @@ files:
 - webpack/components/AnsibleRolesSwitcher/components/InheritedRolesList.test.js
 - webpack/components/AnsibleRolesSwitcher/components/withProtectedView.js
 - webpack/components/AnsibleRolesSwitcher/index.js
-- webpack/components/DualList/DualList.scss
-- webpack/components/DualList/ListControls.js
-- webpack/components/DualList/ListHeader.js
-- webpack/components/DualList/ListItem.js
-- webpack/components/DualList/ListPane.js
-- webpack/components/DualList/SelectedStatus.js
+- webpack/components/DualList/DualList.test.js
 - webpack/components/DualList/index.js
 - webpack/components/ErrorState.js
 - webpack/components/ReportJsonViewer.js
@@ -470,7 +465,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.10
+rubygems_version: 4.0.16
 specification_version: 4
 summary: Ansible integration with Foreman (theforeman.org)
 test_files:

data/webpack/components/DualList/DualList.scss

@@ -1,3 +0,0 @@
-.foreman-dual-list-order {
-  padding-right: var(--pf-global--spacer--sm);
-}

data/webpack/components/DualList/ListControls.js

@@ -1,65 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { translate as __ } from 'foremanReact/common/I18n';
-
-const ListControls = props => (
-  <div className="pf-v5-c-dual-list-selector__controls">
-    <div className="pf-v5-c-dual-list-selector__controls-item">
-      <button
-        className="pf-v5-c-button pf-m-plain"
-        type="button"
-        disabled={props.addSelectedDisabled}
-        onClick={props.onAddSelected}
-        aria-label={__('Add selected')}
-      >
-        <i className="fas fa-fw fa-angle-right" />
-      </button>
-    </div>
-    <div className="pf-v5-c-dual-list-selector__controls-item">
-      <button
-        className="pf-v5-c-button pf-m-plain"
-        type="button"
-        disabled={props.addAllDisabled}
-        onClick={props.onAddAll}
-        aria-label={__('Add all')}
-      >
-        <i className="fas fa-fw fa-angle-double-right" />
-      </button>
-    </div>
-    <div className="pf-v5-c-dual-list-selector__controls-item">
-      <button
-        className="pf-v5-c-button pf-m-plain"
-        type="button"
-        disabled={props.removeAllDisabled}
-        onClick={props.onRemoveAll}
-        aria-label={__('Remove all')}
-      >
-        <i className="fas fa-fw fa-angle-double-left" />
-      </button>
-    </div>
-    <div className="pf-v5-c-dual-list-selector__controls-item">
-      <button
-        className="pf-v5-c-button pf-m-plain"
-        type="button"
-        disabled={props.removeSelectedDisabled}
-        onClick={props.onRemoveSelected}
-        aria-label={__('Remove selected')}
-      >
-        <i className="fas fa-fw fa-angle-left" />
-      </button>
-    </div>
-  </div>
-);
-
-ListControls.propTypes = {
-  addSelectedDisabled: PropTypes.bool.isRequired,
-  onAddSelected: PropTypes.func.isRequired,
-  addAllDisabled: PropTypes.bool.isRequired,
-  onAddAll: PropTypes.func.isRequired,
-  removeAllDisabled: PropTypes.bool.isRequired,
-  onRemoveAll: PropTypes.func.isRequired,
-  removeSelectedDisabled: PropTypes.bool.isRequired,
-  onRemoveSelected: PropTypes.func.isRequired,
-};
-
-export default ListControls;

data/webpack/components/DualList/ListHeader.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const ListHeader = props => (
-  <div className="pf-v5-c-dual-list-selector__header">
-    <div className="pf-v5-c-dual-list-selector__title">
-      <div className="pf-v5-c-dual-list-selector__title-text">
-        {props.title}
-      </div>
-    </div>
-  </div>
-);
-
-ListHeader.propTypes = {
-  title: PropTypes.string.isRequired,
-};
-
-export default ListHeader;

data/webpack/components/DualList/ListItem.js

@@ -1,69 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-
-const ListItem = props => {
-  const draggableBtn = (
-    <div className="pf-v5-c-dual-list-selector__draggable">
-      <button
-        className="pf-v5-c-button pf-m-plain"
-        type="button"
-        aria-pressed="false"
-        aria-label="Reorder"
-        id="draggable-list-item-2-draggable-button"
-        aria-labelledby="draggable-list-item-2-draggable-button draggable-list-item-2-item-text"
-        aria-describedby="draggable-help"
-      >
-        <i className="fas fa-grip-vertical" aria-hidden="true" />
-      </button>
-    </div>
-  );
-
-  const orderBtn = (
-    <span className="foreman-dual-list-order">{`${props.index + 1}. `}</span>
-  );
-
-  return (
-    <li className="pf-v5-c-dual-list-selector__list-item">
-      <div
-        className={classNames('pf-v5-c-dual-list-selector__list-item-row ', {
-          'pf-m-selected': props.selected,
-          'pf-m-ghost-row': props.dragging,
-        })}
-      >
-        {props.draggable && draggableBtn}
-        <button
-          className="pf-v5-c-dual-list-selector__item"
-          type="button"
-          onClick={props.onClick}
-        >
-          <span className="pf-v5-c-dual-list-selector__item-main">
-            <span className="pf-v5-c-dual-list-selector__item-text">
-              {props.draggable && orderBtn}
-              <span>{props.name}</span>
-            </span>
-          </span>
-          <span className="pf-v5-c-dual-list-selector__item-count">
-            <span className="pf-v5-c-badge pf-m-read" />
-          </span>
-        </button>
-      </div>
-    </li>
-  );
-};
-
-ListItem.propTypes = {
-  selected: PropTypes.bool.isRequired,
-  dragging: PropTypes.bool,
-  draggable: PropTypes.bool,
-  onClick: PropTypes.func.isRequired,
-  name: PropTypes.string.isRequired,
-  index: PropTypes.number.isRequired,
-};
-
-ListItem.defaultProps = {
-  draggable: false,
-  dragging: false,
-};
-
-export default ListItem;

data/webpack/components/DualList/ListPane.js

@@ -1,95 +0,0 @@
-import React from 'react';
-import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
-import PropTypes from 'prop-types';
-
-import {
-  orderable,
-  orderDragged,
-} from 'foremanReact/components/common/forms/OrderableSelect/helpers';
-
-import ListItem from './ListItem';
-import ListHeader from './ListHeader';
-import SelectedStatus from './SelectedStatus';
-
-const OrderableListItem = orderable(ListItem, {
-  type: 'orderableItem',
-  getItem: props => ({ id: props.name }),
-  direction: 'vertical',
-});
-
-const ListPane = ({
-  items,
-  isItemSelected,
-  draggable,
-  onItemClick,
-  paneClass,
-  title,
-  selected,
-  onSetOrderedItems,
-}) => {
-  const moveValue = (dragIndex, hoverIndex) => {
-    onSetOrderedItems(orderDragged(items, dragIndex, hoverIndex));
-  };
-
-  const renderOrderableItem = (item, idx) => (
-    <OrderableListItem
-      key={item}
-      name={item}
-      index={idx}
-      moveValue={moveValue}
-      onClick={onItemClick(item)}
-      selected={isItemSelected(item)}
-      draggable={draggable}
-    />
-  );
-
-  const renderListItem = (item, idx) => (
-    <ListItem
-      key={item}
-      name={item}
-      index={idx}
-      onClick={onItemClick(item)}
-      selected={isItemSelected(item)}
-    />
-  );
-
-  const renderItem = draggable ? renderOrderableItem : renderListItem;
-
-  return (
-    <div
-      className={`pf-v5-c-dual-list-selector__pane pf-m-available ${paneClass}`}
-    >
-      <ListHeader title={title} />
-      <SelectedStatus
-        selectedCount={selected.length}
-        totalCount={items.length}
-      />
-      <div className="pf-v5-c-dual-list-selector__menu">
-        <DndProvider backend={HTML5Backend}>
-          <ul className="pf-v5-c-dual-list-selector__list">
-            {items.map(renderItem)}
-          </ul>
-        </DndProvider>
-      </div>
-    </div>
-  );
-};
-
-ListPane.propTypes = {
-  items: PropTypes.array.isRequired,
-  isItemSelected: PropTypes.func.isRequired,
-  draggable: PropTypes.bool,
-  onItemClick: PropTypes.func.isRequired,
-  paneClass: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  selected: PropTypes.array.isRequired,
-  onSetOrderedItems: PropTypes.func,
-};
-
-ListPane.defaultProps = {
-  draggable: false,
-  onSetOrderedItems: () => {},
-};
-
-export default ListPane;

data/webpack/components/DualList/SelectedStatus.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { translate as __, sprintf } from 'foremanReact/common/I18n';
-
-const SelectedStatus = ({ selectedCount, totalCount }) => (
-  <div className="pf-v5-c-dual-list-selector__status">
-    <span className="pf-v5-c-dual-list-selector__status-text">
-      {sprintf(__('%(selectedCount)s of %(totalCount)s items selected'), {
-        selectedCount,
-        totalCount,
-      })}
-    </span>
-  </div>
-);
-
-SelectedStatus.propTypes = {
-  selectedCount: PropTypes.number.isRequired,
-  totalCount: PropTypes.number.isRequired,
-};
-
-export default SelectedStatus;