foreman_ansible 2.3.2 → 2.3.3

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

@@ -0,0 +1,9 @@
+import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
+import AnsiblePermissionDenied from './AnsiblePermissionDenied';
+
+jest.mock('foremanReact/components/common/EmptyState');
+
+describe('AnsiblePermissionDenied', () =>
+  testComponentSnapshotsWithFixtures(AnsiblePermissionDenied, {
+    'should render': {},
+  }));

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { ListView, Tooltip, OverlayTrigger } from 'patternfly-react';
+import classNames from 'classnames';
+
+import AnsibleRoleActionButton from './AnsibleRoleActionButton';
+import '../AnsibleRolesSwitcher.scss';
+
+const AnsibleRole = ({ role, icon, onClick, resourceName }) => {
+  const text =
+    resourceName === 'hostgroup'
+      ? __('This Ansible role is inherited from parent host group')
+      : __('This Ansible role is inherited from host group');
+
+  const tooltip = (
+    <Tooltip id={role.id}>
+      <span>{text}</span>
+    </Tooltip>
+  );
+
+  const clickHandler = (onClickFn, ansibleRole) => event => {
+    event.preventDefault();
+    onClickFn(ansibleRole);
+  };
+
+  const listItem = (click = undefined) => (
+    <ListView.Item
+      id={role.id}
+      className={classNames('listViewItem--listItemVariants', {
+        'ansible-role-disabled': role.inherited,
+        'ansible-role-movable': !role.inherited,
+      })}
+      heading={role.name}
+      actions={
+        role.inherited ? (
+          ''
+        ) : (
+          <AnsibleRoleActionButton icon={icon} role={role} />
+        )
+      }
+      stacked
+      onClick={typeof click === 'function' ? click(onClick, role) : click}
+    />
+  );
+
+  if (role.inherited) {
+    return (
+      <OverlayTrigger overlay={tooltip} placement="top">
+        {listItem()}
+      </OverlayTrigger>
+    );
+  }
+
+  return listItem(clickHandler);
+};
+
+export default AnsibleRole;

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

@@ -0,0 +1,26 @@
+import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
+
+import AnsibleRole from './AnsibleRole';
+
+const noop = () => {};
+
+const fixtures = {
+  'should render a role to add': {
+    role: { name: 'test.role', id: 5 },
+    icon: 'fa fa-plus-circle',
+    onClick: noop,
+  },
+  'should render a role to remove': {
+    role: { name: 'test.role', id: 5 },
+    icon: 'fa fa-minus-circle',
+    onClick: noop,
+  },
+  'should render inherited role to remove': {
+    role: { name: 'test.role', id: 5, inherited: true },
+    icon: 'fa fa-minus-circle',
+    onClick: noop,
+  },
+};
+
+describe('AnsibleRole', () =>
+  testComponentSnapshotsWithFixtures(AnsibleRole, fixtures));

data/webpack/components/AnsibleRolesSwitcher/components/AnsibleRoleActionButton.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Icon } from 'patternfly-react';
+
+const AnsibleRoleActionButton = ({ icon }) => (
+  <button href="#" className="role-add-remove-btn">
+    <Icon className="fa-2x" type="fa" name={icon} />
+  </button>
+);
+
+AnsibleRoleActionButton.propTypes = {
+  icon: PropTypes.string.isRequired,
+};
+
+export default AnsibleRoleActionButton;

data/webpack/components/AnsibleRolesSwitcher/components/AnsibleRolesSwitcherError.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Col, Alert } from 'patternfly-react';
+import PropTypes from 'prop-types';
+
+const ErrorMsg = ({ error }) => {
+  const status = error.statusText ? `${error.statusText}: ` : '';
+  return `${status}${error.errorMsg}`;
+};
+
+const AnsibleRolesSwitcherError = ({ error }) =>
+  error && error.errorMsg ? (
+    <Col sm={12}>
+      <Alert type="error">
+        <ErrorMsg error={error} />
+      </Alert>
+    </Col>
+  ) : (
+    ''
+  );
+
+AnsibleRolesSwitcherError.propTypes = {
+  error: PropTypes.shape({
+    errorMsg: PropTypes.string,
+    statusText: PropTypes.string,
+  }),
+};
+
+AnsibleRolesSwitcherError.defaultProps = {
+  error: {},
+};
+
+export default AnsibleRolesSwitcherError;

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import { ListView } from 'patternfly-react';
+import PaginationWrapper from 'foremanReact/components/Pagination/PaginationWrapper';
+import { reject } from 'lodash';
+import PropTypes from 'prop-types';
+
+import AnsibleRole from './AnsibleRole';
+
+const AssignedRolesList = ({
+  assignedRoles,
+  pagination,
+  itemCount,
+  onPaginationChange,
+  onRemoveRole,
+  resourceName,
+}) => {
+  const directlyAssignedRoles = reject(assignedRoles, role => role.inherited);
+
+  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>
+      <div>
+        {directlyAssignedRoles.map(role => (
+          <input
+            key={role.id}
+            type="hidden"
+            name={`${resourceName}[ansible_role_ids][]`}
+            value={role.id}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+AssignedRolesList.propTypes = {
+  assignedRoles: 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,
+  resourceName: PropTypes.string.isRequired,
+};
+
+export default AssignedRolesList;

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

@@ -0,0 +1,19 @@
+import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
+
+import AssignedRolesList from './AssignedRolesList';
+
+const noop = () => {};
+
+const fixtures = {
+  'should render': {
+    assignedRoles: [{ id: 1, name: 'fake.role' }, { id: 2, name: 'test.role' }],
+    pagination: { page: 1, perPage: 25 },
+    itemCount: 2,
+    onPaginationChange: noop,
+    onRemoveRole: noop,
+    resourceName: 'host',
+  },
+};
+
+describe('AssignedRolesList', () =>
+  testComponentSnapshotsWithFixtures(AssignedRolesList, fixtures));

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { ListView, LoadingState } from 'patternfly-react';
+import PaginationWrapper from 'foremanReact/components/Pagination/PaginationWrapper';
+
+import AnsibleRole from './AnsibleRole';
+
+const AvailableRolesList = ({
+  unassignedRoles,
+  pagination,
+  itemCount,
+  onListingChange,
+  onAddRole,
+  loading,
+}) => (
+  <ListView>
+    <div className="sticky-pagination">
+      <PaginationWrapper
+        viewType="list"
+        itemCount={itemCount}
+        pagination={pagination}
+        onChange={onListingChange}
+        dropdownButtonId="available-ansible-roles-pagination-row-dropdown"
+      />
+    </div>
+    <LoadingState loading={loading}>
+      {unassignedRoles.map(role => (
+        <AnsibleRole
+          key={role.id}
+          role={role}
+          icon="fa fa-plus-circle"
+          onClick={onAddRole}
+        />
+      ))}
+    </LoadingState>
+  </ListView>
+);
+
+AvailableRolesList.propTypes = {
+  unassignedRoles: PropTypes.arrayOf(PropTypes.object).isRequired,
+  pagination: PropTypes.shape({
+    page: PropTypes.number,
+    perPage: PropTypes.number,
+  }).isRequired,
+  itemCount: PropTypes.number.isRequired,
+  onListingChange: PropTypes.func.isRequired,
+  onAddRole: PropTypes.func.isRequired,
+  loading: PropTypes.bool.isRequired,
+};
+
+export default AvailableRolesList;

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

@@ -0,0 +1,22 @@
+import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
+
+import AvailableRolesList from './AvailableRolesList';
+
+const noop = () => {};
+
+const fixtures = {
+  'should render': {
+    unassignedRoles: [
+      { id: 1, name: 'fake.role' },
+      { id: 2, name: 'test.role' },
+    ],
+    pagination: { page: 1, perPage: 25 },
+    itemCount: 2,
+    onListingChange: noop,
+    onAddRole: noop,
+    loading: false,
+  },
+};
+
+describe('AvailableRolesList', () =>
+  testComponentSnapshotsWithFixtures(AvailableRolesList, fixtures));

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

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AnsiblePermissionDenied should render 1`] = `
+<EmptyStatePattern
+  description={
+    <span>
+      You are not authorized to perform this action.
+      <br />
+      Please request one of the required permissions listed below from a Foreman administrator:
+      <br />
+    </span>
+  }
+  documentation={
+    <ul
+      className="list-unstyled"
+    >
+      <li>
+        view_ansible_roles
+      </li>
+    </ul>
+  }
+  header="Permission Denied"
+  icon="lock"
+  iconType="fa"
+/>
+`;

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

@@ -0,0 +1,108 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AnsibleRole should render a role to add 1`] = `
+<ListViewItem
+  actions={
+    <AnsibleRoleActionButton
+      icon="fa fa-plus-circle"
+      role={
+        Object {
+          "id": 5,
+          "name": "test.role",
+        }
+      }
+    />
+  }
+  additionalInfo={null}
+  checkboxInput={null}
+  className="listViewItem--listItemVariants ansible-role-movable"
+  compoundExpand={false}
+  compoundExpanded={false}
+  description={null}
+  heading="test.role"
+  hideCloseIcon={false}
+  id={5}
+  initExpanded={false}
+  leftContent={null}
+  onClick={[Function]}
+  onCloseCompoundExpand={[Function]}
+  onExpand={[Function]}
+  onExpandClose={[Function]}
+  stacked={true}
+/>
+`;
+
+exports[`AnsibleRole should render a role to remove 1`] = `
+<ListViewItem
+  actions={
+    <AnsibleRoleActionButton
+      icon="fa fa-minus-circle"
+      role={
+        Object {
+          "id": 5,
+          "name": "test.role",
+        }
+      }
+    />
+  }
+  additionalInfo={null}
+  checkboxInput={null}
+  className="listViewItem--listItemVariants ansible-role-movable"
+  compoundExpand={false}
+  compoundExpanded={false}
+  description={null}
+  heading="test.role"
+  hideCloseIcon={false}
+  id={5}
+  initExpanded={false}
+  leftContent={null}
+  onClick={[Function]}
+  onCloseCompoundExpand={[Function]}
+  onExpand={[Function]}
+  onExpandClose={[Function]}
+  stacked={true}
+/>
+`;
+
+exports[`AnsibleRole should render inherited role to remove 1`] = `
+<OverlayTrigger
+  defaultOverlayShown={false}
+  overlay={
+    <Tooltip
+      bsClass="tooltip"
+      id={5}
+      placement="right"
+    >
+      <span>
+        This Ansible role is inherited from host group
+      </span>
+    </Tooltip>
+  }
+  placement="top"
+  trigger={
+    Array [
+      "hover",
+      "focus",
+    ]
+  }
+>
+  <ListViewItem
+    actions=""
+    additionalInfo={null}
+    checkboxInput={null}
+    className="listViewItem--listItemVariants ansible-role-disabled"
+    compoundExpand={false}
+    compoundExpanded={false}
+    description={null}
+    heading="test.role"
+    hideCloseIcon={false}
+    id={5}
+    initExpanded={false}
+    leftContent={null}
+    onCloseCompoundExpand={[Function]}
+    onExpand={[Function]}
+    onExpandClose={[Function]}
+    stacked={true}
+  />
+</OverlayTrigger>
+`;

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

@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AssignedRolesList should render 1`] = `
+<div>
+  <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
+      icon="fa fa-minus-circle"
+      key="1"
+      onClick={[Function]}
+      resourceName="host"
+      role={
+        Object {
+          "id": 1,
+          "name": "fake.role",
+        }
+      }
+    />
+    <AnsibleRole
+      icon="fa fa-minus-circle"
+      key="2"
+      onClick={[Function]}
+      resourceName="host"
+      role={
+        Object {
+          "id": 2,
+          "name": "test.role",
+        }
+      }
+    />
+  </ListView>
+  <div>
+    <input
+      key="1"
+      name="host[ansible_role_ids][]"
+      type="hidden"
+      value={1}
+    />
+    <input
+      key="2"
+      name="host[ansible_role_ids][]"
+      type="hidden"
+      value={2}
+    />
+  </div>
+</div>
+`;

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

@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AvailableRolesList should render 1`] = `
+<ListView
+  className=""
+>
+  <div
+    className="sticky-pagination"
+  >
+    <PaginationWrapper
+      dropdownButtonId="available-ansible-roles-pagination-row-dropdown"
+      itemCount={2}
+      onChange={[Function]}
+      pagination={
+        Object {
+          "page": 1,
+          "perPage": 25,
+        }
+      }
+      viewType="list"
+    />
+  </div>
+  <LoadingState
+    additionalClasses=""
+    loading={false}
+    loadingText="Loading"
+    size="lg"
+    timeout={300}
+  >
+    <AnsibleRole
+      icon="fa fa-plus-circle"
+      key="1"
+      onClick={[Function]}
+      role={
+        Object {
+          "id": 1,
+          "name": "fake.role",
+        }
+      }
+    />
+    <AnsibleRole
+      icon="fa fa-plus-circle"
+      key="2"
+      onClick={[Function]}
+      role={
+        Object {
+          "id": 2,
+          "name": "test.role",
+        }
+      }
+    />
+  </LoadingState>
+</ListView>
+`;

data/webpack/components/AnsibleRolesSwitcher/components/withProtectedView.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const withProtectedView = (
+  ProtectedComponent,
+  ProtectionComponent,
+  protectionFn
+) => props =>
+  protectionFn(props) ? (
+    <ProtectedComponent {...props} />
+  ) : (
+    <ProtectionComponent {...props} />
+  );
+
+export default withProtectedView;

data/webpack/components/AnsibleRolesSwitcher/index.js

@@ -0,0 +1,44 @@
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import AnsibleRolesSwitcher from './AnsibleRolesSwitcher';
+import * as AnsibleRolesSwitcherActions from './AnsibleRolesSwitcherActions';
+import AnsiblePermissionDenied from './components/AnsiblePermissionDenied';
+import withProtectedView from './components/withProtectedView';
+import {
+  selectUnassignedRoles,
+  selectAssignedRolesPage,
+  selectAssignedRoles,
+  selectAssignedRolesCount,
+  selectResults,
+  selectPaginationMemoized,
+  selectItemCount,
+  selectLoading,
+  selectAssignedPagination,
+  selectError,
+} from './AnsibleRolesSwitcherSelectors';
+
+const mapStateToProps = state => ({
+  results: selectResults(state),
+  pagination: selectPaginationMemoized(state),
+  itemCount: selectItemCount(state),
+  loading: selectLoading(state),
+  error: selectError(state),
+  assignedPagination: selectAssignedPagination(state),
+  assignedRolesCount: selectAssignedRolesCount(state),
+  assignedRoles: selectAssignedRolesPage(state),
+  allAssignedRoles: selectAssignedRoles(state),
+  unassignedRoles: selectUnassignedRoles(state),
+});
+
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(AnsibleRolesSwitcherActions, dispatch);
+
+export default withProtectedView(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(AnsibleRolesSwitcher),
+  AnsiblePermissionDenied,
+  props => props.data && props.data.canView
+);

data/webpack/components/ReportJsonViewer.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import JSONTree from 'react-json-tree';
+import PropTypes from 'prop-types';
 
 const theme = {
   scheme: 'foreman',
@@ -7,11 +8,14 @@ const theme = {
   base00: 'rgba(0, 0, 0, 0)',
 };
 
-class ReportJsonViewer extends React.Component {
-  render() {
-    return <div className="report-json-viewer">
-      <JSONTree data={this.props.data} hideRoot theme={theme} />
-    </div>;
-  }
-}
+const ReportJsonViewer = ({ data }) => (
+  <div className="report-json-viewer">
+    <JSONTree data={this.props.data} hideRoot theme={theme} />
+  </div>
+);
+
+ReportJsonViewer.propTypes = {
+  data: PropTypes.object.isRequired,
+};
+
 export default ReportJsonViewer;

data/webpack/index.js

@@ -1,4 +1,17 @@
 import componentRegistry from 'foremanReact/components/componentRegistry';
+import injectReducer from 'foremanReact/redux/reducers/registerReducer';
 import ReportJsonViewer from './components/ReportJsonViewer';
+import AnsibleRolesSwitcher from './components/AnsibleRolesSwitcher';
 
-componentRegistry.register({ name: 'ReportJsonViewer', type: ReportJsonViewer });
+import reducer from './reducer';
+
+componentRegistry.register({
+  name: 'ReportJsonViewer',
+  type: ReportJsonViewer,
+});
+componentRegistry.register({
+  name: 'AnsibleRolesSwitcher',
+  type: AnsibleRolesSwitcher,
+});
+
+injectReducer('foremanAnsible', reducer);

data/webpack/reducer.js

@@ -0,0 +1,7 @@
+import { combineReducers } from 'redux';
+
+import ansibleRolesSwitcher from './components/AnsibleRolesSwitcher/AnsibleRolesSwitcherReducer';
+
+export default combineReducers({
+  ansibleRolesSwitcher,
+});

data/webpack/test_setup.js

@@ -0,0 +1,11 @@
+import 'babel-polyfill';
+
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });
+
+// Mocking translation function
+global.__ = str => str;
+global.n__ = str => str;
+global.Jed = { sprintf: str => str };