foreman_ansible 6.4.1 → 7.0.0

data/webpack/components/AnsibleHostDetail/components/RolesTab/AllRolesModal/AllRolesTable.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { usePaginationOptions } from 'foremanReact/components/Pagination/PaginationHooks';
+
+import {
+  TableComposable,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+} from '@patternfly/react-table';
+
+import { Flex, FlexItem, Pagination } from '@patternfly/react-core';
+import withLoading from '../../../../withLoading';
+import {
+  preparePerPageOptions,
+  refreshPage,
+} from '../../../../../helpers/paginationHelper';
+
+const AllRolesTable = ({
+  allAnsibleRoles,
+  totalCount,
+  pagination,
+  history,
+}) => {
+  const columns = [__('Name'), __('Source')];
+
+  const handlePerPageSelected = (event, allPerPage) => {
+    refreshPage(history, { allPage: 1, allPerPage });
+  };
+
+  const handlePageSelected = (event, allPage) => {
+    refreshPage(history, { ...pagination, allPage });
+  };
+
+  const perPageOptions = preparePerPageOptions(usePaginationOptions());
+
+  return (
+    <React.Fragment>
+      <Flex className="pf-u-pt-md">
+        <FlexItem align={{ default: 'alignRight' }}>
+          <Pagination
+            itemCount={totalCount}
+            page={pagination.allPage}
+            perPage={pagination.allPerPage}
+            onSetPage={handlePageSelected}
+            onPerPageSelect={handlePerPageSelected}
+            perPageOptions={perPageOptions}
+            variant="top"
+          />
+        </FlexItem>
+      </Flex>
+      <TableComposable variant="compact">
+        <Thead>
+          <Tr>
+            <Th />
+            {columns.map(col => (
+              <Th key={`${col}-all`}>{col}</Th>
+            ))}
+          </Tr>
+        </Thead>
+        <Tbody>
+          {allAnsibleRoles.map(role => (
+            <Tr key={`${role.id}-all`} id={role.id}>
+              <Td />
+              <Td>{role.name}</Td>
+              <Td>
+                {role.inherited
+                  ? __('Inherited from Hostgroup')
+                  : __('Directly assigned to Host')}
+              </Td>
+            </Tr>
+          ))}
+        </Tbody>
+      </TableComposable>
+    </React.Fragment>
+  );
+};
+
+AllRolesTable.propTypes = {
+  allAnsibleRoles: PropTypes.array.isRequired,
+  totalCount: PropTypes.number.isRequired,
+  pagination: PropTypes.object.isRequired,
+  history: PropTypes.object.isRequired,
+};
+
+export default withLoading(AllRolesTable);

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

@@ -0,0 +1,80 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useQuery } from '@apollo/client';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+import { Modal, Button, ModalVariant } from '@patternfly/react-core';
+
+import allAnsibleRolesQuery from '../../../../../graphql/queries/allAnsibleRoles.gql';
+import AllRolesTable from './AllRolesTable';
+
+import {
+  useParamsToVars,
+  useCurrentPagination,
+} from '../../../../../helpers/pageParamsHelper';
+
+const AllRolesModal = ({ hostGlobalId, onClose, history }) => {
+  const baseModalProps = {
+    variant: ModalVariant.large,
+    isOpen: true,
+    className: 'foreman-modal',
+    showClose: false,
+    title: __('All Ansible Roles'),
+    disableFocusTrap: true,
+  };
+
+  const paginationKeys = { page: 'allPage', perPage: 'allPerPage' };
+
+  const actions = [
+    <Button variant="link" onClick={onClose} key="close">
+      {__('Close')}
+    </Button>,
+  ];
+
+  const wrapper = child => (
+    <Modal {...baseModalProps} actions={actions}>
+      {child}
+    </Modal>
+  );
+
+  const loadingWrapper = child => <Modal {...baseModalProps}>{child}</Modal>;
+
+  const useFetchFn = () =>
+    useQuery(allAnsibleRolesQuery, {
+      variables: {
+        id: hostGlobalId,
+        ...useParamsToVars(history, paginationKeys),
+      },
+      fetchPolicy: 'network-only',
+    });
+
+  const renameData = data => ({
+    allAnsibleRoles: data.host.allAnsibleRoles.nodes,
+    totalCount: data.host.allAnsibleRoles.totalCount,
+  });
+
+  const pagination = useCurrentPagination(history, paginationKeys);
+
+  return (
+    <AllRolesTable
+      wrapper={wrapper}
+      loadingWrapper={loadingWrapper}
+      emptyWrapper={loadingWrapper}
+      fetchFn={useFetchFn}
+      renameData={renameData}
+      renamedDataPath="allAnsibleRoles"
+      hostGlobalId={hostGlobalId}
+      emptyStateTitle={__('No Ansible roles assigned')}
+      history={history}
+      pagination={pagination}
+    />
+  );
+};
+
+AllRolesModal.propTypes = {
+  hostGlobalId: PropTypes.string.isRequired,
+  onClose: PropTypes.func.isRequired,
+  history: PropTypes.object.isRequired,
+};
+
+export default AllRolesModal;

data/webpack/components/AnsibleHostDetail/components/RolesTab/EditRolesModal/EditRolesForm.js

@@ -0,0 +1,90 @@
+import React, { useState, useEffect } from 'react';
+import { translate as __ } from 'foremanReact/common/I18n';
+import PropTypes from 'prop-types';
+
+import { useMutation } from '@apollo/client';
+
+import { Button, Modal, Spinner } from '@patternfly/react-core';
+import { encodeId } from '../../../../../globalIdHelper';
+import assignAnsibleRoles from '../../../../../graphql/mutations/assignAnsibleRoles.gql';
+import withLoading from '../../../../withLoading';
+import { onCompleted, onError, roleNamesToIds } from './EditRolesModalHelper';
+import DualList from '../../../../DualList';
+
+const EditRolesForm = props => {
+  const {
+    assignedRoles,
+    availableRoles,
+    closeModal,
+    hostId,
+    baseModalProps,
+    actions,
+  } = props;
+
+  const [formState, setFormState] = useState({
+    availableOptions: [],
+    chosenOptions: [],
+  });
+
+  useEffect(() => {
+    setFormState({
+      availableOptions: availableRoles.map(item => item.name),
+      chosenOptions: assignedRoles.map(item => item.name) || [],
+    });
+  }, [availableRoles, assignedRoles]);
+
+  const [callMutation, { loading }] = useMutation(assignAnsibleRoles, {
+    onCompleted: onCompleted(closeModal),
+    onError,
+  });
+
+  const allRoles = (availableRoles || []).concat(assignedRoles || []);
+
+  const variables = {
+    id: encodeId('Host', hostId),
+    ansibleRoleIds: roleNamesToIds(allRoles, formState.chosenOptions),
+  };
+
+  const formActions = [
+    <Button
+      key="confirm"
+      variant="primary"
+      onClick={() => callMutation({ variables })}
+      isDisabled={loading}
+      aria-label="submit ansible roles"
+    >
+      {__('Confirm')}
+    </Button>,
+    ...actions,
+  ];
+
+  if (loading) {
+    formActions.push(<Spinner key="spinner" size="lg" />);
+  }
+
+  return (
+    <Modal {...baseModalProps} actions={formActions}>
+      <DualList
+        availableOptions={formState.availableOptions}
+        chosenOptions={formState.chosenOptions}
+        onListChange={(newAvailable, newChosen) =>
+          setFormState({
+            availableOptions: newAvailable,
+            chosenOptions: newChosen,
+          })
+        }
+      />
+    </Modal>
+  );
+};
+
+EditRolesForm.propTypes = {
+  closeModal: PropTypes.func.isRequired,
+  assignedRoles: PropTypes.array.isRequired,
+  availableRoles: PropTypes.array.isRequired,
+  actions: PropTypes.array.isRequired,
+  hostId: PropTypes.number.isRequired,
+  baseModalProps: PropTypes.object.isRequired,
+};
+
+export default withLoading(EditRolesForm);

data/webpack/components/AnsibleHostDetail/components/RolesTab/EditRolesModal/EditRolesModal.scss

@@ -0,0 +1,3 @@
+.pf-c-backdrop {
+  z-index: 1040;
+}

data/webpack/components/AnsibleHostDetail/components/RolesTab/EditRolesModal/EditRolesModalHelper.js

@@ -0,0 +1,40 @@
+import { sprintf, translate as __ } from 'foremanReact/common/I18n';
+import { decodeModelId } from '../../../../../globalIdHelper';
+import { showToast } from '../../../../../toastHelper';
+
+export const roleNamesToIds = (roles, names) =>
+  names.reduce((memo, name) => {
+    const role = roles.find(item => item.name === name);
+    if (role) {
+      memo.push(decodeModelId(role));
+    }
+    return memo;
+  }, []);
+
+const joinErrors = errors => errors.map(err => err.message).join(', ');
+
+const formatError = error =>
+  sprintf(
+    __('There was a following error when assigning Ansible Roles: %s'),
+    error
+  );
+
+export const onCompleted = closeModal => data => {
+  const { errors } = data.assignAnsibleRoles;
+  if (Array.isArray(errors) && errors.length > 0) {
+    showToast({
+      type: 'error',
+      message: formatError(joinErrors(errors)),
+    });
+  } else {
+    closeModal();
+    showToast({
+      type: 'success',
+      message: __('Ansible Roles were successfully assigned.'),
+    });
+  }
+};
+
+export const onError = error => {
+  showToast({ type: 'error', message: formatError(error) });
+};

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

@@ -0,0 +1,82 @@
+import React from 'react';
+import { translate as __ } from 'foremanReact/common/I18n';
+import PropTypes from 'prop-types';
+
+import { Modal, Button, ModalVariant } from '@patternfly/react-core';
+import { useQuery } from '@apollo/client';
+
+import EditRolesForm from './EditRolesForm';
+
+import availableAnsibleRoles from '../../../../../graphql/queries/hostAvailableAnsibleRoles.gql';
+import { encodeId } from '../../../../../globalIdHelper';
+
+import './EditRolesModal.scss';
+
+const EditRolesModal = ({
+  assignedRoles,
+  isOpen,
+  closeModal,
+  hostId,
+  canEditHost,
+}) => {
+  const baseModalProps = {
+    variant: ModalVariant.large,
+    isOpen,
+    className: 'foreman-modal',
+    showClose: false,
+    title: __('Edit Ansible Roles'),
+    disableFocusTrap: true,
+  };
+
+  const actions = [
+    <Button variant="link" onClick={event => closeModal()} key="close">
+      {__('Close')}
+    </Button>,
+  ];
+
+  const emptyWrapper = child => (
+    <Modal {...baseModalProps} actions={actions}>
+      {child}
+    </Modal>
+  );
+
+  const loadingWrapper = child => <Modal {...baseModalProps}>{child}</Modal>;
+
+  const variables = {
+    id: encodeId('Host', hostId),
+  };
+
+  const useFetchFn = () =>
+    useQuery(availableAnsibleRoles, { variables, fetchPolicy: 'network-only' });
+
+  const renameData = data => ({
+    availableRoles: data.host.availableAnsibleRoles.nodes,
+  });
+
+  return (
+    <EditRolesForm
+      emptyWrapper={emptyWrapper}
+      loadingWrapper={loadingWrapper}
+      actions={actions}
+      baseModalProps={baseModalProps}
+      fetchFn={useFetchFn}
+      renameData={renameData}
+      renamedDataPath="availableRoles"
+      assignedRoles={assignedRoles}
+      closeModal={closeModal}
+      hostId={hostId}
+      allowed={canEditHost}
+      requiredPermissions={['edit_hosts']}
+    />
+  );
+};
+
+EditRolesModal.propTypes = {
+  assignedRoles: PropTypes.array.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  closeModal: PropTypes.func.isRequired,
+  hostId: PropTypes.number.isRequired,
+  canEditHost: PropTypes.bool.isRequired,
+};
+
+export default EditRolesModal;

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

@@ -0,0 +1,129 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { Route, Link } from 'react-router-dom';
+import { usePaginationOptions } from 'foremanReact/components/Pagination/PaginationHooks';
+
+import {
+  TableComposable,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+} from '@patternfly/react-table';
+import { Flex, FlexItem, Button, Pagination } from '@patternfly/react-core';
+
+import EditRolesModal from './EditRolesModal';
+
+import withLoading from '../../../withLoading';
+import AllRolesModal from './AllRolesModal';
+import {
+  preparePerPageOptions,
+  refreshPage,
+} from '../../../../helpers/paginationHelper';
+
+const RolesTable = ({
+  totalCount,
+  pagination,
+  history,
+  ansibleRoles,
+  hostId,
+  hostGlobalId,
+  canEditHost,
+}) => {
+  const columns = [__('Name')];
+
+  const handlePerPageSelected = (event, perPage) => {
+    refreshPage(history, { page: 1, perPage });
+  };
+
+  const handlePageSelected = (event, page) => {
+    refreshPage(history, { ...pagination, page });
+  };
+
+  const perPageOptions = preparePerPageOptions(usePaginationOptions());
+
+  const editBtn = canEditHost ? (
+    <FlexItem>
+      <Link to="/Ansible/roles/edit">
+        <Button aria-label="edit ansible roles">
+          {__('Edit Ansible Roles')}
+        </Button>
+      </Link>
+    </FlexItem>
+  ) : null;
+
+  return (
+    <React.Fragment>
+      <Flex>
+        <FlexItem>
+          <h3>
+            <span>{__('Ansible roles assigned directly to host')}</span>
+            <span>{' - '}</span>
+            <Link to="/Ansible/roles/all">{__('view all assigned roles')}</Link>
+          </h3>
+        </FlexItem>
+      </Flex>
+      <Flex>
+        <FlexItem>{editBtn}</FlexItem>
+        <FlexItem align={{ default: 'alignRight' }}>
+          <Pagination
+            itemCount={totalCount}
+            page={pagination.page}
+            perPage={pagination.perPage}
+            onSetPage={handlePageSelected}
+            onPerPageSelect={handlePerPageSelected}
+            perPageOptions={perPageOptions}
+            variant="top"
+          />
+        </FlexItem>
+      </Flex>
+      <TableComposable variant="compact">
+        <Thead>
+          <Tr>
+            {columns.map(col => (
+              <Th key={col}>{col}</Th>
+            ))}
+          </Tr>
+        </Thead>
+        <Tbody>
+          {ansibleRoles.map(role => (
+            <Tr key={role.id}>
+              <Td>{role.name}</Td>
+            </Tr>
+          ))}
+        </Tbody>
+      </TableComposable>
+      <Route path="/Ansible/roles/edit">
+        <EditRolesModal
+          closeModal={() => history.goBack()}
+          isOpen
+          assignedRoles={ansibleRoles}
+          hostId={hostId}
+          canEditHost={canEditHost}
+        />
+      </Route>
+      <Route path="/Ansible/roles/all">
+        <AllRolesModal
+          onClose={() => history.push('/Ansible/roles')}
+          isOpen
+          hostGlobalId={hostGlobalId}
+          history={history}
+        />
+      </Route>
+    </React.Fragment>
+  );
+};
+
+RolesTable.propTypes = {
+  ansibleRoles: PropTypes.array.isRequired,
+  hostId: PropTypes.number.isRequired,
+  hostGlobalId: PropTypes.string.isRequired,
+  history: PropTypes.object.isRequired,
+  pagination: PropTypes.object.isRequired,
+  totalCount: PropTypes.number.isRequired,
+  canEditHost: PropTypes.bool.isRequired,
+};
+
+export default withLoading(RolesTable);

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

@@ -0,0 +1,85 @@
+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 RolesTab from '../';
+
+import * as toasts from '../../../../../toastHelper';
+
+import {
+  tick,
+  withMockedProvider,
+  withRedux,
+  withReactRouter,
+} from '../../../../../testHelper';
+import {
+  mocks,
+  hostId,
+  editModalOpenMocks,
+  assignRolesSuccessMock,
+  assignRolesErrorMock,
+} from './RolesTab.fixtures';
+
+const TestComponent = withReactRouter(withRedux(withMockedProvider(RolesTab)));
+
+describe('assigning Ansible roles', () => {
+  it('should assign Ansible roles', async () => {
+    const showToast = jest.fn();
+    jest.spyOn(toasts, 'showToast').mockImplementation(showToast);
+
+    render(
+      <TestComponent
+        hostId={hostId}
+        mocks={mocks.concat(editModalOpenMocks).concat(assignRolesSuccessMock)}
+        canEditHost
+      />
+    );
+    await waitFor(tick);
+    userEvent.click(screen.getByRole('button', { name: 'edit ansible roles' }));
+    await waitFor(tick);
+    await waitFor(tick);
+    expect(screen.getByText('Available options')).toBeInTheDocument();
+    userEvent.click(screen.getAllByText('another.role')[1]);
+    userEvent.click(screen.getByRole('button', { name: 'Remove selected' }));
+    userEvent.click(screen.getByText('geerlingguy.ceylon'));
+    userEvent.click(screen.getByRole('button', { name: 'Add selected' }));
+    userEvent.click(
+      screen.getByRole('button', { name: 'submit ansible roles' })
+    );
+    await waitFor(tick);
+    expect(showToast).toHaveBeenCalledWith({
+      type: 'success',
+      message: 'Ansible Roles were successfully assigned.',
+    });
+  }, 8000);
+  it('should show errors', async () => {
+    const showToast = jest.fn();
+    jest.spyOn(toasts, 'showToast').mockImplementation(showToast);
+
+    render(
+      <TestComponent
+        hostId={hostId}
+        mocks={mocks.concat(editModalOpenMocks).concat(assignRolesErrorMock)}
+        canEditHost
+      />
+    );
+    await waitFor(tick);
+    userEvent.click(screen.getByRole('button', { name: 'edit ansible roles' }));
+    await waitFor(tick);
+    expect(screen.getByText('Available options')).toBeInTheDocument();
+    userEvent.click(screen.getAllByText('another.role')[1]);
+    userEvent.click(screen.getByRole('button', { name: 'Remove selected' }));
+    userEvent.click(screen.getByText('geerlingguy.ceylon'));
+    userEvent.click(screen.getByRole('button', { name: 'Add selected' }));
+    userEvent.click(
+      screen.getByRole('button', { name: 'submit ansible roles' })
+    );
+    await waitFor(tick);
+    expect(showToast).toHaveBeenCalledWith({
+      type: 'error',
+      message:
+        'There was a following error when assigning Ansible Roles: is invalid',
+    });
+  }, 8000);
+});