foreman_ansible 6.3.3 → 7.0.0

data/webpack/components/AnsibleHostDetail/components/RolesTab/__test__/RolesTab.test.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import {
+  tick,
+  withMockedProvider,
+  withReactRouter,
+} from '../../../../../testHelper';
+
+import {
+  mocks,
+  hostId,
+  allRolesMocks,
+  unauthorizedMocks,
+  authorizedMocks,
+} from './RolesTab.fixtures';
+
+import RolesTab from '../';
+
+const TestComponent = withReactRouter(withMockedProvider(RolesTab));
+
+describe('RolesTab', () => {
+  it('should load Ansible Roles as admin', async () => {
+    render(<TestComponent hostId={hostId} mocks={mocks} canEditHost />);
+    await waitFor(tick);
+    expect(screen.getByText('aardvaark.cube')).toBeInTheDocument();
+    expect(screen.getByText('aardvaark.sphere')).toBeInTheDocument();
+    expect(screen.getByText('another.role')).toBeInTheDocument();
+  });
+  it('should show all Ansible roles modal', async () => {
+    render(
+      <TestComponent
+        hostId={hostId}
+        mocks={mocks.concat(allRolesMocks)}
+        canEditHost
+      />
+    );
+    await waitFor(tick);
+    expect(screen.getByText('view all assigned roles')).toBeInTheDocument();
+    expect(screen.queryByText('All Ansible Roles')).not.toBeInTheDocument();
+    userEvent.click(screen.getByText('view all assigned roles'));
+    await waitFor(tick);
+    expect(screen.getByText('All Ansible Roles')).toBeInTheDocument();
+    expect(screen.getByText('Inherited from Hostgroup')).toBeInTheDocument();
+    userEvent.click(screen.getByRole('button', { name: 'Close' }));
+    await waitFor(tick);
+    expect(screen.queryByText('All Ansible Roles')).not.toBeInTheDocument();
+  });
+  it('should load Ansible Roles as viewer', async () => {
+    render(
+      <TestComponent
+        hostId={hostId}
+        mocks={authorizedMocks}
+        canEditHost={false}
+      />
+    );
+    await waitFor(tick);
+    expect(screen.getByText('aardvaark.cube')).toBeInTheDocument();
+    expect(screen.queryByText('Edit Ansible Roles')).not.toBeInTheDocument();
+  });
+  it('should not load Ansible Roles for unauthorized user', async () => {
+    render(
+      <TestComponent hostId={hostId} mocks={unauthorizedMocks} canEditHost />
+    );
+    await waitFor(tick);
+    expect(screen.queryByText('aardvaark.cube')).not.toBeInTheDocument();
+    expect(screen.getByText('Permission denied')).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        'You are not authorized to view the page. Request the following permissions from administrator: view_ansible_roles.'
+      )
+    ).toBeInTheDocument();
+  });
+});

data/webpack/components/AnsibleHostDetail/components/RolesTab/index.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useQuery } from '@apollo/client';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+import ansibleRolesQuery from '../../../../graphql/queries/hostAnsibleRoles.gql';
+import { encodeId } from '../../../../globalIdHelper';
+import RolesTable from './RolesTable';
+import {
+  useParamsToVars,
+  useCurrentPagination,
+} from '../../../../helpers/pageParamsHelper';
+
+const RolesTab = ({ hostId, history, canEditHost }) => {
+  const hostGlobalId = encodeId('Host', hostId);
+  const pagination = useCurrentPagination(history);
+
+  const renameData = data => ({
+    ansibleRoles: data.host.ownAnsibleRoles.nodes,
+    totalCount: data.host.ownAnsibleRoles.totalCount,
+  });
+
+  const useFetchFn = () =>
+    useQuery(ansibleRolesQuery, {
+      variables: { id: hostGlobalId, ...useParamsToVars(history) },
+      fetchPolicy: 'network-only',
+    });
+
+  return (
+    <RolesTable
+      fetchFn={useFetchFn}
+      renamedDataPath="ansibleRoles"
+      renameData={renameData}
+      permissions={['view_ansible_roles']}
+      history={history}
+      hostGlobalId={hostGlobalId}
+      emptyStateProps={{ title: __('No Ansible roles assigned') }}
+      pagination={pagination}
+      canEditHost={canEditHost}
+      hostId={hostId}
+    />
+  );
+};
+
+RolesTab.propTypes = {
+  hostId: PropTypes.number.isRequired,
+  history: PropTypes.object.isRequired,
+  canEditHost: PropTypes.bool.isRequired,
+};
+
+export default RolesTab;

data/webpack/components/AnsibleHostDetail/components/SecondaryTabRoutes.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Route, Switch, Redirect } from 'react-router-dom';
+
+import AnsibleVariableOverrides from './AnsibleVariableOverrides';
+import RolesTab from './RolesTab';
+import JobsTab from './JobsTab';
+import TabLayout from './TabLayout';
+
+import WrappedAnsibleHostInventory from './AnsibleHostInventory';
+import { ANSIBLE_KEY } from '../constants';
+import { route } from '../helpers';
+
+const SecondaryTabRoutes = ({ response, router, history }) => (
+  <Switch>
+    <Route exact path={`/${ANSIBLE_KEY}`}>
+      <Redirect to={route('roles')} />
+    </Route>
+    <Route path={route('roles')}>
+      <TabLayout>
+        <RolesTab
+          hostId={response.id}
+          history={history}
+          canEditHost={response.permissions.edit_hosts}
+        />
+      </TabLayout>
+    </Route>
+    <Route path={route('variables')}>
+      <TabLayout>
+        <AnsibleVariableOverrides
+          hostId={response.id}
+          hostAttrs={response}
+          history={history}
+        />
+      </TabLayout>
+    </Route>
+    <Route path={route('inventory')}>
+      <TabLayout>
+        <WrappedAnsibleHostInventory hostId={response.id} />
+      </TabLayout>
+    </Route>
+    <Route path={route('jobs')}>
+      <TabLayout>
+        <JobsTab
+          resourceId={response.id}
+          resourceName="host"
+          history={history}
+        />
+      </TabLayout>
+    </Route>
+  </Switch>
+);
+
+SecondaryTabRoutes.propTypes = {
+  response: PropTypes.object.isRequired,
+  router: PropTypes.object.isRequired,
+  history: PropTypes.object.isRequired,
+};
+
+export default SecondaryTabRoutes;

data/webpack/components/AnsibleHostDetail/components/TabLayout.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const TabLayout = props => (
+  <div className="ansible-host-detail">{props.children}</div>
+);
+
+TabLayout.propTypes = {
+  children: PropTypes.object.isRequired,
+};
+
+export default TabLayout;

data/webpack/components/AnsibleHostDetail/constants.js

@@ -0,0 +1,9 @@
+import { translate as __ } from 'foremanReact/common/I18n';
+
+export const ANSIBLE_KEY = 'Ansible';
+export const SECONDARY_TABS = [
+  { key: 'roles', title: __('Roles') },
+  { key: 'variables', title: __('Variables') },
+  { key: 'inventory', title: __('Inventory') },
+  { key: 'jobs', title: __('Jobs') },
+];

data/webpack/components/AnsibleHostDetail/helpers.js

@@ -0,0 +1,4 @@
+import { ANSIBLE_KEY } from './constants';
+
+export const hashRoute = subpath => `#/${ANSIBLE_KEY}/${subpath}`;
+export const route = subpath => hashRoute(subpath).substring(1);

data/webpack/components/AnsibleHostDetail/index.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import AnsibleHostDetail from './AnsibleHostDetail';
+
+const WrappedAnsibleHostDetail = props => <AnsibleHostDetail {...props} />;
+
+export default WrappedAnsibleHostDetail;

data/webpack/components/AnsibleRolesAndVariables/__test__/AnsibleRolesAndVariablesImport.test.js

@@ -1,4 +1,6 @@
-import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import ImportRolesAndVariablesTable from '../AnsibleRolesAndVariables';
 
 const rowsData = [
@@ -28,12 +30,15 @@ const columnsData = [
   { title: 'Hostgroups count' },
 ];
 
-const fixtures = {
-  'should render': {
-    rowsData,
-    columnsData,
-  },
-};
-
-describe('ImportRolesAndVariablesTable', () =>
-  testComponentSnapshotsWithFixtures(ImportRolesAndVariablesTable, fixtures));
+describe('ImportRolesAndVariablesTable', () => {
+  it('should render', () => {
+    render(
+      <ImportRolesAndVariablesTable
+        rowsData={rowsData}
+        columnsData={columnsData}
+      />
+    );
+    expect(screen.getByText('bennojoy.ntp')).toBeInTheDocument();
+    expect(screen.getByText('0ta2.git_role')).toBeInTheDocument();
+  });
+});

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { ListView, Tooltip, OverlayTrigger } from 'patternfly-react';
 import classNames from 'classnames';
 import { translate as __ } from 'foremanReact/common/I18n';
@@ -57,4 +58,32 @@ const AnsibleRole = ({ role, icon, onClick, resourceName, index }) => {
   return listItem(clickHandler);
 };
 
+AnsibleRole.propTypes = {
+  icon: PropTypes.string,
+  index: PropTypes.number,
+  onClick: PropTypes.func,
+  resourceName: PropTypes.string,
+  role: PropTypes.shape({
+    id: PropTypes.number,
+    inherited: PropTypes.bool,
+    name: PropTypes.string,
+  }),
+};
+
+AnsibleRole.defaultProps = {
+  icon: undefined,
+  index: undefined,
+  onClick: undefined,
+  resourceName: undefined,
+  role: {
+    id: undefined,
+    inherited: false,
+    name: '',
+  },
+};
+
+AnsibleRole.defaultProps = {
+  resourceName: 'host',
+};
+
 export default AnsibleRole;

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

@@ -9,16 +9,19 @@ const fixtures = {
     role: { name: 'test.role', id: 5 },
     icon: 'fa fa-plus-circle',
     onClick: noop,
+    index: 0,
   },
   'should render a role to remove': {
     role: { name: 'test.role', id: 5 },
     icon: 'fa fa-minus-circle',
     onClick: noop,
+    index: 0,
   },
   'should render inherited role to remove': {
     role: { name: 'test.role', id: 5, inherited: true },
     icon: 'fa fa-minus-circle',
     onClick: noop,
+    index: 0,
   },
 };
 

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

@@ -25,12 +25,13 @@ const AvailableRolesList = ({
       />
     </div>
     <LoadingState loading={loading}>
-      {unassignedRoles.map(role => (
+      {unassignedRoles.map((role, index) => (
         <AnsibleRole
           key={role.id}
           role={role}
           icon="fa fa-plus-circle"
           onClick={onAddRole}
+          index={index}
         />
       ))}
     </LoadingState>

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__/AnsibleRole.test.js.snap

@@ -19,7 +19,7 @@ exports[`AnsibleRole should render a role to add 1`] = `
   compoundExpand={false}
   compoundExpanded={false}
   description={null}
-  heading="test.role"
+  heading="1. test.role"
   hideCloseIcon={false}
   id={5}
   initExpanded={false}
@@ -51,7 +51,7 @@ exports[`AnsibleRole should render a role to remove 1`] = `
   compoundExpand={false}
   compoundExpanded={false}
   description={null}
-  heading="test.role"
+  heading="1. test.role"
   hideCloseIcon={false}
   id={5}
   initExpanded={false}
@@ -94,7 +94,7 @@ exports[`AnsibleRole should render inherited role to remove 1`] = `
     compoundExpand={false}
     compoundExpanded={false}
     description={null}
-    heading="test.role"
+    heading="1. test.role"
     hideCloseIcon={false}
     id={5}
     initExpanded={false}

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

@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AssignedRolesList should render 1`] = `
-<DndProvider
+<Memo(DndProvider)
   backend={[Function]}
 >
   <ListView
     className=""
   >
-    <Component
+    <DropTarget(DragSource(Orderable(AnsibleRole)))
       icon="fa fa-minus-circle"
       index={0}
       key="1"
@@ -21,7 +21,7 @@ exports[`AssignedRolesList should render 1`] = `
         }
       }
     />
-    <Component
+    <DropTarget(DragSource(Orderable(AnsibleRole)))
       icon="fa fa-minus-circle"
       index={1}
       key="2"
@@ -60,5 +60,5 @@ exports[`AssignedRolesList should render 1`] = `
       }
     />
   </div>
-</DndProvider>
+</Memo(DndProvider)>
 `;

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

@@ -8,9 +8,14 @@ exports[`AvailableRolesList should render 1`] = `
     className="sticky-pagination"
   >
     <PaginationWrapper
+      className=""
+      disableNext={false}
+      disablePrev={false}
       dropdownButtonId="available-ansible-roles-pagination-row-dropdown"
       itemCount={2}
       onChange={[Function]}
+      onPageSet={[Function]}
+      onPerPageSelect={[Function]}
       pagination={
         Object {
           "page": 1,
@@ -29,8 +34,10 @@ exports[`AvailableRolesList should render 1`] = `
   >
     <AnsibleRole
       icon="fa fa-plus-circle"
+      index={0}
       key="1"
       onClick={[Function]}
+      resourceName="host"
       role={
         Object {
           "id": 1,
@@ -40,8 +47,10 @@ exports[`AvailableRolesList should render 1`] = `
     />
     <AnsibleRole
       icon="fa fa-plus-circle"
+      index={1}
       key="2"
       onClick={[Function]}
+      resourceName="host"
       role={
         Object {
           "id": 2,

data/webpack/components/DualList/DualList.scss

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

data/webpack/components/DualList/ListControls.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+const ListControls = props => (
+  <div className="pf-c-dual-list-selector__controls">
+    <div className="pf-c-dual-list-selector__controls-item">
+      <button
+        className="pf-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-c-dual-list-selector__controls-item">
+      <button
+        className="pf-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-c-dual-list-selector__controls-item">
+      <button
+        className="pf-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-c-dual-list-selector__controls-item">
+      <button
+        className="pf-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

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const ListHeader = props => (
+  <div className="pf-c-dual-list-selector__header">
+    <div className="pf-c-dual-list-selector__title">
+      <div className="pf-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

@@ -0,0 +1,69 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+const ListItem = props => {
+  const draggableBtn = (
+    <div className="pf-c-dual-list-selector__draggable">
+      <button
+        className="pf-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-c-dual-list-selector__list-item">
+      <div
+        className={classNames('pf-c-dual-list-selector__list-item-row ', {
+          'pf-m-selected': props.selected,
+          'pf-m-ghost-row': props.dragging,
+        })}
+      >
+        {props.draggable && draggableBtn}
+        <button
+          className="pf-c-dual-list-selector__item"
+          type="button"
+          onClick={props.onClick}
+        >
+          <span className="pf-c-dual-list-selector__item-main">
+            <span className="pf-c-dual-list-selector__item-text">
+              {props.draggable && orderBtn}
+              <span>{props.name}</span>
+            </span>
+          </span>
+          <span className="pf-c-dual-list-selector__item-count">
+            <span className="pf-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;