foreman_openscap 4.3.2 → 5.2.0

data/webpack/routes/OvalPolicies/OvalPoliciesShow/DetailsTab.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useMutation } from '@apollo/client';
+
+import {
+  TextList,
+  TextContent,
+  TextArea,
+  TextListItem,
+  TextListVariants,
+  TextListItemVariants,
+  TextInput,
+} from '@patternfly/react-core';
+
+import { translate as __ } from 'foremanReact/common/I18n';
+
+import EditableInput from '../../../components/EditableInput';
+
+import { onAttrUpdate, policySchedule } from './OvalPoliciesShowHelper';
+import updateOvalPolicyMutation from '../../../graphql/mutations/updateOvalPolicy.gql';
+
+const DetailsTab = props => {
+  const { policy, showToast } = props;
+
+  const [callMutation] = useMutation(updateOvalPolicyMutation);
+
+  return (
+    <TextContent className="pf-u-pt-md">
+      <TextList component={TextListVariants.dl}>
+        <TextListItem component={TextListItemVariants.dt}>
+          {__('Name')}
+        </TextListItem>
+        <TextListItem
+          aria-label="label text value"
+          component={TextListItemVariants.dd}
+          className="foreman-spaced-list"
+        >
+          <EditableInput
+            value={policy.name}
+            onConfirm={onAttrUpdate('name', policy, callMutation, showToast)}
+            component={TextInput}
+            attrName="name"
+            allowed={policy.meta.canEdit}
+          />
+        </TextListItem>
+        <TextListItem component={TextListItemVariants.dt}>
+          {__('Period')}
+        </TextListItem>
+        <TextListItem
+          aria-label="label text value"
+          component={TextListItemVariants.dd}
+          className="foreman-spaced-list"
+        >
+          {policySchedule(policy)}
+        </TextListItem>
+        <TextListItem component={TextListItemVariants.dt}>
+          {__('Description')}
+        </TextListItem>
+        <TextListItem
+          aria-label="label text value"
+          component={TextListItemVariants.dd}
+          className="foreman-spaced-list"
+        >
+          <EditableInput
+            value={policy.description}
+            onConfirm={onAttrUpdate(
+              'description',
+              policy,
+              callMutation,
+              showToast
+            )}
+            component={TextArea}
+            attrName="description"
+            allowed={policy.meta.canEdit}
+          />
+        </TextListItem>
+      </TextList>
+    </TextContent>
+  );
+};
+
+DetailsTab.propTypes = {
+  policy: PropTypes.object.isRequired,
+  showToast: PropTypes.func.isRequired,
+};
+
+export default DetailsTab;

data/webpack/routes/OvalPolicies/OvalPoliciesShow/HostgroupsTab.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+import { useQuery } from '@apollo/client';
+
+import HostgroupsTable from './HostgroupsTable';
+
+import hostgroups from '../../../graphql/queries/hostgroups.gql';
+import {
+  useParamsToVars,
+  useCurrentPagination,
+} from '../../../helpers/pageParamsHelper';
+
+const HostgroupsTab = props => {
+  const useFetchFn = componentProps =>
+    useQuery(hostgroups, {
+      variables: {
+        search: `oval_policy_id = ${componentProps.match.params.id}`,
+        ...useParamsToVars(componentProps.history),
+      },
+    });
+
+  const renameData = data => ({
+    hostgroups: data.hostgroups.nodes,
+    totalCount: data.hostgroups.totalCount,
+  });
+
+  const pagination = useCurrentPagination(props.history);
+
+  return (
+    <HostgroupsTable
+      {...props}
+      fetchFn={useFetchFn}
+      renameData={renameData}
+      resultPath="hostgroups.nodes"
+      pagination={pagination}
+      emptyStateTitle={__('No Hostgroups found.')}
+      permissions={['view_hostgroups']}
+    />
+  );
+};
+
+HostgroupsTab.propTypes = {
+  match: PropTypes.object.isRequired,
+  history: PropTypes.object.isRequired,
+};
+
+export default HostgroupsTab;

data/webpack/routes/OvalPolicies/OvalPoliciesShow/HostgroupsTable.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+import withLoading from '../../../components/withLoading';
+import IndexTable from '../../../components/IndexTable';
+
+const CvesTable = props => {
+  const columns = [{ title: __('Name') }];
+
+  const rows = props.hostgroups.map(hostgroup => ({
+    cells: [{ title: hostgroup.name }],
+    hostgroup,
+  }));
+
+  const actions = [];
+
+  return (
+    <IndexTable
+      columns={columns}
+      rows={rows}
+      actions={actions}
+      pagination={props.pagination}
+      totalCount={props.totalCount}
+      history={props.history}
+      ariaTableLabel={__('Table of hostgroups for OVAL policy')}
+    />
+  );
+};
+
+CvesTable.propTypes = {
+  hostgroups: PropTypes.array.isRequired,
+  pagination: PropTypes.object.isRequired,
+  totalCount: PropTypes.number.isRequired,
+  history: PropTypes.object.isRequired,
+};
+
+export default withLoading(CvesTable);

data/webpack/routes/OvalPolicies/OvalPoliciesShow/OvalPoliciesShow.js

@@ -7,7 +7,6 @@ import {
   Button,
   Grid,
   GridItem,
-  TextContent,
   Text,
   TextVariants,
   Tabs,
@@ -16,10 +15,11 @@ import {
 } from '@patternfly/react-core';
 
 import withLoading from '../../../components/withLoading';
-
 import CvesTab from './CvesTab';
+import HostgroupsTab from './HostgroupsTab';
+import DetailsTab from './DetailsTab';
 
-import { policySchedule, newJobFormPath } from './OvalPoliciesShowHelper';
+import { newJobFormPath } from './OvalPoliciesShowHelper';
 import { resolvePath } from '../../../helpers/pathsHelper';
 
 const OvalPoliciesShow = props => {
@@ -50,18 +50,22 @@ const OvalPoliciesShow = props => {
           <Tabs mountOnEnter activeKey={activeTab} onSelect={handleTabSelect}>
             <Tab
               eventKey="details"
-              title={<TabTitleText>Details</TabTitleText>}
+              title={<TabTitleText>{__('Details')}</TabTitleText>}
             >
-              <TextContent className="pf-u-pt-md">
-                <Text component={TextVariants.h3}>Period</Text>
-                <Text component={TextVariants.p}>{policySchedule(policy)}</Text>
-                <Text component={TextVariants.h3}>Description</Text>
-                <Text component={TextVariants.p}>{policy.description}</Text>
-              </TextContent>
+              <DetailsTab {...props} />
             </Tab>
-            <Tab eventKey="cves" title={<TabTitleText>CVEs</TabTitleText>}>
+            <Tab
+              eventKey="cves"
+              title={<TabTitleText>{__('CVEs')}</TabTitleText>}
+            >
               <CvesTab {...props} />
             </Tab>
+            <Tab
+              eventKey="hostgroups"
+              title={<TabTitleText>{__('Hostgroups')}</TabTitleText>}
+            >
+              <HostgroupsTab {...props} />
+            </Tab>
           </Tabs>
         </GridItem>
       </Grid>

data/webpack/routes/OvalPolicies/OvalPoliciesShow/OvalPoliciesShowHelper.js

@@ -1,4 +1,5 @@
-import { decodeId } from '../../../helpers/globalIdHelper';
+import { translate as __, sprintf } from 'foremanReact/common/I18n';
+import { decodeModelId } from '../../../helpers/globalIdHelper';
 import { addSearch } from '../../../helpers/pageParamsHelper';
 import { newJobPath } from '../../../helpers/pathsHelper';
 
@@ -17,7 +18,9 @@ export const policySchedule = policy => {
 
 const targetingScopedSearchQuery = policy => {
   const hgIds = policy.hostgroups.nodes.reduce((memo, hg) => {
-    const ids = [decodeId(hg)].concat(hg.descendants.nodes.map(decodeId));
+    const ids = [decodeModelId(hg)].concat(
+      hg.descendants.nodes.map(decodeModelId)
+    );
     return ids.reduce(
       (acc, id) => (acc.includes(id) ? acc : [...acc, id]),
       memo
@@ -37,3 +40,78 @@ export const newJobFormPath = (policy, policyId) =>
     host_ids: targetingScopedSearchQuery(policy),
     'inputs[oval_policies]': policyId,
   });
+
+const policyToAttrs = (policy, attrs) =>
+  Object.entries(policy).reduce((memo, [key, value]) => {
+    if (attrs.includes(key)) {
+      memo[key] = value;
+    }
+    return memo;
+  }, {});
+
+const onUpdateSuccess = (
+  closeEditable,
+  stopSubmitting,
+  showToast,
+  attr,
+  onValidationError
+) => result => {
+  const { errors } = result.data.updateOvalPolicy;
+  if (Array.isArray(errors) && errors.length > 0) {
+    stopSubmitting();
+    if (
+      errors.length === 1 &&
+      errors[0].path.join(' ') === `attributes ${attr}`
+    ) {
+      onValidationError(errors[0].message);
+    } else {
+      showToast({
+        type: 'error',
+        message: formatError(joinErrors(errors)),
+      });
+    }
+  } else {
+    closeEditable();
+    showToast({
+      type: 'success',
+      message: __('OVAL policy was successfully updated.'),
+    });
+  }
+};
+
+const formatError = error =>
+  sprintf(
+    __('There was a following error when updating OVAL policy: %s'),
+    error
+  );
+
+const joinErrors = errors => errors.map(err => err.message).join(', ');
+
+const onUpdateError = (showToast, stopSubmitting) => error => {
+  stopSubmitting();
+  showToast({ type: 'error', message: formatError(error.message) });
+};
+
+export const onAttrUpdate = (attr, policy, callMutation, showToast) => (
+  newValue,
+  closeEditable,
+  stopSubmitting,
+  onValidationError
+) => {
+  const vars = policyToAttrs(policy, ['id', 'name', 'description', 'cronLine']);
+  vars[attr] = newValue;
+  return (
+    callMutation({ variables: vars })
+      // eslint-disable-next-line promise/prefer-await-to-then
+      .then(
+        onUpdateSuccess(
+          closeEditable,
+          stopSubmitting,
+          showToast,
+          attr,
+          onValidationError
+        )
+      )
+      .catch(onUpdateError(showToast, stopSubmitting))
+  );
+};

data/webpack/routes/OvalPolicies/OvalPoliciesShow/__tests__/OvalPoliciesEdit.fixtures.js

@@ -0,0 +1,48 @@
+import { mockFactory } from '../../../../testHelper';
+import updateOvalPolicyMutation from '../../../../graphql/mutations/updateOvalPolicy.gql';
+import { ovalPolicy } from './OvalPoliciesShow.fixtures';
+
+const updateOvalPolicyMockFactory = mockFactory(
+  'updateOvalPolicy',
+  updateOvalPolicyMutation
+);
+
+export const updatedName = 'updated policy name';
+
+const variables = {
+  id: ovalPolicy.id,
+  name: updatedName,
+  cronLine: ovalPolicy.cronLine,
+  description: ovalPolicy.description,
+};
+const responsePolicy = {
+  ovalPolicy: {
+    __typename: 'ForemanOpenscap::OvalPolicy',
+    id: ovalPolicy.id,
+    name: updatedName,
+    description: ovalPolicy.description,
+    cronLine: ovalPolicy.cronLine,
+  },
+  errors: [],
+};
+
+export const policyUpdateMock = updateOvalPolicyMockFactory(
+  variables,
+  responsePolicy
+);
+
+export const policyUpdateErrorMock = updateOvalPolicyMockFactory(
+  variables,
+  responsePolicy,
+  { errors: [{ message: 'This is an unexpected failure.' }] }
+);
+
+export const policyUpdateValidationMock = updateOvalPolicyMockFactory(
+  variables,
+  {
+    ovalPolicy,
+    errors: [
+      { path: ['attributes', 'name'], message: 'has already been taken' },
+    ],
+  }
+);

data/webpack/routes/OvalPolicies/OvalPoliciesShow/__tests__/OvalPoliciesEdit.test.js

@@ -0,0 +1,202 @@
+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 OvalPoliciesShow from '../';
+import {
+  historyMock,
+  ovalPolicyId,
+  policyDetailMock,
+  policyEditPermissionsMock,
+  ovalPolicy,
+} from './OvalPoliciesShow.fixtures';
+import {
+  policyUpdateMock,
+  policyUpdateErrorMock,
+  policyUpdateValidationMock,
+  updatedName,
+} from './OvalPoliciesEdit.fixtures';
+import { ovalPoliciesShowPath } from '../../../../helpers/pathsHelper';
+
+import {
+  withMockedProvider,
+  tick,
+  withRouter,
+  withRedux,
+} from '../../../../testHelper';
+
+import * as toasts from '../../../../helpers/toastHelper';
+
+const TestComponent = withRouter(
+  withRedux(withMockedProvider(OvalPoliciesShow))
+);
+
+describe('OvalPoliciesShow', () => {
+  it('should open and close inline edit for name', async () => {
+    render(
+      <TestComponent
+        history={historyMock}
+        match={{
+          params: { id: ovalPolicyId, tab: 'details' },
+          path: ovalPoliciesShowPath,
+        }}
+        mocks={policyDetailMock}
+      />
+    );
+    await waitFor(tick);
+    userEvent.click(screen.getByRole('button', { name: 'edit name' }));
+    userEvent.clear(screen.getByLabelText(/name text input/));
+    userEvent.type(screen.getByLabelText(/name text input/), 'foo');
+    expect(screen.getByLabelText(/name text input/)).toHaveAttribute(
+      'value',
+      'foo'
+    );
+    userEvent.click(
+      screen.getByRole('button', { name: 'cancel editing name' })
+    );
+    expect(screen.queryByText('foo')).not.toBeInTheDocument();
+  });
+  it('should update policy name', async () => {
+    const showToast = jest.fn();
+    jest.spyOn(toasts, 'showToast').mockImplementation(() => showToast);
+
+    const { container } = render(
+      <TestComponent
+        history={historyMock}
+        match={{
+          params: { id: ovalPolicyId, tab: 'details' },
+          path: ovalPoliciesShowPath,
+        }}
+        mocks={policyDetailMock.concat(policyUpdateMock)}
+      />
+    );
+    await waitFor(tick);
+    const editBtn = screen.getByRole('button', { name: 'edit name' });
+    expect(editBtn).toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: 'submit name' })
+    ).not.toBeInTheDocument();
+
+    userEvent.click(editBtn);
+    expect(
+      screen.queryByRole('button', { name: 'edit name' })
+    ).not.toBeInTheDocument();
+    const inputField = screen.getByLabelText(/name text input/);
+    const submitBtn = screen.getByRole('button', { name: 'submit name' });
+    const cancelBtn = screen.getByRole('button', {
+      name: 'cancel editing name',
+    });
+
+    userEvent.clear(inputField);
+    userEvent.type(inputField, updatedName);
+    userEvent.click(submitBtn);
+    expect(inputField).toBeDisabled();
+    expect(submitBtn).toBeDisabled();
+    expect(cancelBtn).toBeDisabled();
+    const spinner = container.querySelector('#edit-name-spinner');
+    expect(spinner).toBeInTheDocument();
+    await waitFor(tick);
+    expect(showToast).toHaveBeenCalledWith({
+      type: 'success',
+      message: 'OVAL policy was successfully updated.',
+    });
+
+    expect(inputField).not.toBeInTheDocument();
+    expect(editBtn).toBeInTheDocument();
+    expect(cancelBtn).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: 'submit name' })
+    ).not.toBeInTheDocument();
+    await waitFor(tick);
+    expect(screen.getAllByText(updatedName).pop()).toBeInTheDocument();
+  });
+  it('should show unexpected errors', async () => {
+    const showToast = jest.fn();
+    jest.spyOn(toasts, 'showToast').mockImplementation(() => showToast);
+
+    render(
+      <TestComponent
+        history={historyMock}
+        match={{
+          params: { id: ovalPolicyId, tab: 'details' },
+          path: ovalPoliciesShowPath,
+        }}
+        mocks={policyDetailMock.concat(policyUpdateErrorMock)}
+      />
+    );
+    await waitFor(tick);
+    const editBtn = screen.getByRole('button', { name: 'edit name' });
+    userEvent.click(editBtn);
+    const inputField = screen.getByLabelText(/name text input/);
+    userEvent.clear(inputField);
+    userEvent.type(inputField, updatedName);
+    userEvent.click(screen.getByRole('button', { name: 'submit name' }));
+    await waitFor(tick);
+    expect(showToast).toHaveBeenCalledWith({
+      type: 'error',
+      message:
+        'There was a following error when updating OVAL policy: This is an unexpected failure.',
+    });
+    expect(inputField).toBeInTheDocument();
+    expect(inputField).not.toBeDisabled();
+    expect(screen.getByText(ovalPolicy.name)).toBeInTheDocument();
+  });
+  it('should show validation errors', async () => {
+    const showToast = jest.fn();
+    jest.spyOn(toasts, 'showToast').mockImplementation(() => showToast);
+
+    const { container } = render(
+      <TestComponent
+        history={historyMock}
+        match={{
+          params: { id: ovalPolicyId, tab: 'details' },
+          path: ovalPoliciesShowPath,
+        }}
+        mocks={policyDetailMock.concat(policyUpdateValidationMock)}
+      />
+    );
+    await waitFor(tick);
+    const editBtn = screen.getByRole('button', { name: 'edit name' });
+    userEvent.click(editBtn);
+    const inputField = screen.getByLabelText(/name text input/);
+    userEvent.clear(inputField);
+    userEvent.type(inputField, updatedName);
+    userEvent.click(screen.getByRole('button', { name: 'submit name' }));
+    await waitFor(tick);
+    expect(inputField).toBeInTheDocument();
+    expect(inputField).not.toBeDisabled();
+    expect(
+      container.querySelector('#edit-name-spinner')
+    ).not.toBeInTheDocument();
+    expect(screen.getByText(ovalPolicy.name)).toBeInTheDocument();
+    expect(screen.getByText('has already been taken')).toBeInTheDocument();
+    userEvent.click(
+      screen.getByRole('button', { name: 'cancel editing name' })
+    );
+    userEvent.click(editBtn);
+    expect(
+      screen.queryByText('has already been taken')
+    ).not.toBeInTheDocument();
+  });
+  it('should not show edit btns when user is not allowed to edit', async () => {
+    render(
+      <TestComponent
+        history={historyMock}
+        match={{
+          params: { id: ovalPolicyId, tab: 'details' },
+          path: ovalPoliciesShowPath,
+        }}
+        mocks={policyEditPermissionsMock}
+      />
+    );
+    await waitFor(tick);
+    expect(
+      screen.queryByRole('button', { name: 'edit name' })
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: 'edit description' })
+    ).not.toBeInTheDocument();
+  });
+});

data/webpack/routes/OvalPolicies/OvalPoliciesShow/__tests__/OvalPoliciesShow.fixtures.js

@@ -1,11 +1,14 @@
-import { mockFactory } from '../../../../testHelper';
+import { mockFactory, admin, intruder, viewer } from '../../../../testHelper';
 import ovalPolicyQuery from '../../../../graphql/queries/ovalPolicy.gql';
 import cvesQuery from '../../../../graphql/queries/cves.gql';
+import hostgroupsQuery from '../../../../graphql/queries/hostgroups.gql';
 
 const policyDetailMockFactory = mockFactory('ovalPolicy', ovalPolicyQuery);
 const cvesMockFactory = mockFactory('cves', cvesQuery);
+const hostgroupsMockFactory = mockFactory('hostgroups', hostgroupsQuery);
 
-const ovalPolicy = {
+export const ovalPolicy = {
+  __typename: 'ForemanOpenscap::OvalPolicy',
   id: 'MDE6Rm9yZW1hbk9wZW5zY2FwOjpPdmFsUG9saWN5LTM=',
   name: 'Third policy',
   period: 'weekly',
@@ -13,6 +16,9 @@ const ovalPolicy = {
   weekday: 'tuesday',
   dayOfMonth: null,
   description: 'A very strict policy',
+  meta: {
+    canEdit: true,
+  },
   hostgroups: {
     nodes: [
       {
@@ -30,6 +36,8 @@ const ovalPolicy = {
   },
 };
 
+const noEditPolicy = { ...ovalPolicy, meta: { canEdit: false } };
+
 const cvesResult = {
   totalCount: 1,
   nodes: [
@@ -51,6 +59,20 @@ const cvesResult = {
   ],
 };
 
+const hostgroupsResult = {
+  totalCount: 2,
+  nodes: [
+    {
+      id: 'MDE6SG9zdGdyb3VwLTQ=',
+      name: 'first hostgroup',
+    },
+    {
+      id: 'MDE6SG9zdGdyb3VwLTEy',
+      name: 'second hostgroup',
+    },
+  ],
+};
+
 export const ovalPolicyId = 3;
 
 export const pushMock = jest.fn();
@@ -70,9 +92,33 @@ export const historyWithSearch = {
 
 export const policyDetailMock = policyDetailMockFactory(
   { id: ovalPolicy.id },
-  ovalPolicy
+  ovalPolicy,
+  { currentUser: admin }
 );
+
+export const policyUnauthorizedMock = policyDetailMockFactory(
+  { id: ovalPolicy.id },
+  ovalPolicy,
+  { currentUser: intruder }
+);
+
 export const policyCvesMock = cvesMockFactory(
   { search: `oval_policy_id = ${ovalPolicyId}`, first: 5, last: 5 },
-  cvesResult
+  cvesResult,
+  { currentUser: admin }
+);
+export const policyHostgroupsMock = hostgroupsMockFactory(
+  { search: `oval_policy_id = ${ovalPolicyId}`, first: 5, last: 5 },
+  hostgroupsResult,
+  { currentUser: admin }
+);
+export const policyHostgroupsDeniedMock = hostgroupsMockFactory(
+  { search: `oval_policy_id = ${ovalPolicyId}`, first: 5, last: 5 },
+  { totalCount: 0, nodes: [] },
+  { currentUser: intruder }
+);
+export const policyEditPermissionsMock = policyDetailMockFactory(
+  { id: ovalPolicy.id },
+  noEditPolicy,
+  { currentUser: viewer }
 );