foreman_openscap 4.3.2 → 5.2.0

data/webpack/components/IndexTable/index.js

@@ -6,13 +6,21 @@ import { usePaginationOptions } from 'foremanReact/components/Pagination/Paginat
 
 import { preparePerPageOptions, refreshPage } from './IndexTableHelper';
 
-const IndexTable = props => {
+const IndexTable = ({
+  history,
+  pagination,
+  totalCount,
+  toolbarBtns,
+  ariaTableLabel,
+  columns,
+  ...rest
+}) => {
   const handlePerPageSelected = (event, perPage) => {
-    refreshPage(props.history, { page: 1, perPage });
+    refreshPage(history, { page: 1, perPage });
   };
 
   const handlePageSelected = (event, page) => {
-    refreshPage(props.history, { ...props.pagination, page });
+    refreshPage(history, { ...pagination, page });
   };
 
   const perPageOptions = preparePerPageOptions(usePaginationOptions());
@@ -20,12 +28,12 @@ const IndexTable = props => {
   return (
     <React.Fragment>
       <Flex className="pf-u-pt-md">
-        <FlexItem>{props.toolbarBtns}</FlexItem>
+        <FlexItem>{toolbarBtns}</FlexItem>
         <FlexItem align={{ default: 'alignRight' }}>
           <Pagination
-            itemCount={props.totalCount}
-            page={props.pagination.page}
-            perPage={props.pagination.perPage}
+            itemCount={totalCount}
+            page={pagination.page}
+            perPage={pagination.perPage}
             onSetPage={handlePageSelected}
             onPerPageSelect={handlePerPageSelected}
             perPageOptions={perPageOptions}
@@ -34,10 +42,10 @@ const IndexTable = props => {
         </FlexItem>
       </Flex>
       <Table
-        aria-label={props.ariaTableLabel}
-        cells={props.columns}
-        rows={props.rows}
-        actions={props.actions}
+        aria-label={ariaTableLabel}
+        cells={columns}
+        {...rest}
+        variant="compact"
       >
         <TableHeader />
         <TableBody />
@@ -49,17 +57,14 @@ const IndexTable = props => {
 IndexTable.propTypes = {
   history: PropTypes.object.isRequired,
   pagination: PropTypes.object.isRequired,
-  toolbarBtns: PropTypes.array,
+  toolbarBtns: PropTypes.node,
   totalCount: PropTypes.number.isRequired,
   ariaTableLabel: PropTypes.string.isRequired,
   columns: PropTypes.array.isRequired,
-  rows: PropTypes.array.isRequired,
-  actions: PropTypes.array,
 };
 
 IndexTable.defaultProps = {
-  toolbarBtns: [],
-  actions: [],
+  toolbarBtns: null,
 };
 
 export default IndexTable;

data/webpack/components/LinkButton.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Button } from '@patternfly/react-core';
+import PropTypes from 'prop-types';
+
+const LinkButton = ({
+  path,
+  btnVariant,
+  btnText,
+  isDisabled,
+  btnAriaLabel,
+}) => (
+  <Link to={path}>
+    <Button
+      variant={btnVariant}
+      isDisabled={isDisabled}
+      aria-label={btnAriaLabel}
+    >
+      {btnText}
+    </Button>
+  </Link>
+);
+
+LinkButton.propTypes = {
+  path: PropTypes.string.isRequired,
+  btnText: PropTypes.string.isRequired,
+  btnVariant: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  btnAriaLabel: PropTypes.string,
+};
+
+LinkButton.defaultProps = {
+  btnVariant: 'primary',
+  isDisabled: false,
+  btnAriaLabel: null,
+};
+
+export default LinkButton;

data/webpack/components/withDeleteModal.js

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { translate as __, sprintf } from 'foremanReact/common/I18n';
+import ConfirmModal from './ConfirmModal';
+
+const withDelete = Component => {
+  const Subcomponent = ({
+    confirmDeleteTitle,
+    submitDelete,
+    prepareMutation,
+    ...rest
+  }) => {
+    const [toDelete, setToDelete] = useState(null);
+
+    const toggleModal = (item = null) => {
+      setToDelete(item);
+    };
+
+    return (
+      <React.Fragment>
+        <Component {...rest} toggleModal={toggleModal} />
+        <ConfirmModal
+          title={confirmDeleteTitle}
+          text={
+            toDelete
+              ? sprintf(
+                  __('Are you sure you want to delete %s?'),
+                  toDelete.name
+                )
+              : ''
+          }
+          onClose={toggleModal}
+          isOpen={!!toDelete}
+          onConfirm={submitDelete}
+          prepareMutation={() => prepareMutation(toggleModal)}
+          record={toDelete}
+        />
+      </React.Fragment>
+    );
+  };
+
+  Subcomponent.propTypes = {
+    confirmDeleteTitle: PropTypes.string.isRequired,
+    submitDelete: PropTypes.func.isRequired,
+    prepareMutation: PropTypes.func.isRequired,
+  };
+
+  return Subcomponent;
+};
+
+export default withDelete;

data/webpack/components/withLoading.js

@@ -1,12 +1,15 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
-
 import Loading from 'foremanReact/components/Loading';
+import {
+  permissionCheck,
+  permissionDeniedMsg,
+} from '../helpers/permissionsHelper';
+
 import EmptyState from './EmptyState';
 
 const errorStateTitle = __('Error!');
-const emptyStateBody = '';
 
 const pluckData = (data, path) => {
   const split = path.split('.');
@@ -24,9 +27,19 @@ const withLoading = Component => {
     resultPath,
     renameData,
     emptyStateTitle,
+    emptyStateBody,
+    permissions,
+    primaryButton,
+    shouldRefetch,
     ...rest
   }) => {
-    const { loading, error, data } = fetchFn(rest);
+    const { loading, error, data, refetch } = fetchFn(rest);
+
+    useEffect(() => {
+      if (shouldRefetch) {
+        refetch();
+      }
+    }, [shouldRefetch, refetch]);
 
     if (loading) {
       return <Loading />;
@@ -42,10 +55,28 @@ const withLoading = Component => {
       );
     }
 
+    const check = permissionCheck(data.currentUser, permissions);
+
+    if (!check.allowed) {
+      return (
+        <EmptyState
+          lock
+          title={__('Permission denied')}
+          body={permissionDeniedMsg(check.permissions.map(item => item.name))}
+        />
+      );
+    }
+
     const result = pluckData(data, resultPath);
 
     if ((Array.isArray(result) && result.length === 0) || !result) {
-      return <EmptyState title={emptyStateTitle} body={emptyStateBody} />;
+      return (
+        <EmptyState
+          title={emptyStateTitle}
+          body={emptyStateBody}
+          primaryButton={primaryButton}
+        />
+      );
     }
 
     return <Component {...rest} {...renameData(data)} />;
@@ -56,10 +87,18 @@ const withLoading = Component => {
     resultPath: PropTypes.string.isRequired,
     renameData: PropTypes.func,
     emptyStateTitle: PropTypes.string.isRequired,
+    emptyStateBody: PropTypes.string,
+    permissions: PropTypes.array,
+    primaryButton: PropTypes.node,
+    shouldRefetch: PropTypes.bool,
   };
 
   Subcomponent.defaultProps = {
     renameData: data => data,
+    permissions: [],
+    primaryButton: null,
+    shouldRefetch: false,
+    emptyStateBody: '',
   };
 
   return Subcomponent;

data/webpack/graphql/mutations/createOvalPolicy.gql

@@ -0,0 +1,22 @@
+mutation CreateOvalPolicy($name: String!, $period: String!, $cronLine: String, $ovalContentId: Int!, $hostgroupIds: [Int!]) {
+  createOvalPolicy(input: {name: $name, period: $period, cronLine: $cronLine, ovalContentId: $ovalContentId, hostgroupIds: $hostgroupIds}) {
+    ovalPolicy {
+      name
+      id
+      period
+      cronLine
+      hostgroups {
+        nodes {
+          name
+          id
+        }
+      }
+    }
+    checkCollection {
+      id
+      errors
+      failMsg
+      result
+    }
+  }
+}

data/webpack/graphql/mutations/deleteOvalContent.gql

@@ -0,0 +1,9 @@
+mutation DeleteOvalContent($id: ID!) {
+  deleteOvalContent(input: { id: $id }) {
+    id
+    errors {
+      path
+      message
+    }
+  }
+}

data/webpack/graphql/mutations/deleteOvalPolicy.gql

@@ -0,0 +1,9 @@
+mutation DeleteOvalPolicy($id: ID!) {
+  deleteOvalPolicy(input: { id: $id }) {
+    id
+    errors {
+      path
+      message
+    }
+  }
+}

data/webpack/graphql/mutations/updateOvalPolicy.gql

@@ -0,0 +1,14 @@
+mutation UpdateOvalPolicy($id: ID!, $name: String, $description: String, $cronLine: String) {
+  updateOvalPolicy(input:{ id:$id, name:$name, description: $description, cronLine: $cronLine }) {
+    ovalPolicy {
+      id
+      name
+      description
+      cronLine
+    }
+    errors {
+      path
+      message
+    }
+  }
+}

data/webpack/graphql/queries/currentUserAttributes.gql

@@ -0,0 +1,11 @@
+fragment CurrentUserAttributes on User {
+  id
+  login
+  admin
+  permissions {
+    nodes {
+      id
+      name
+    }
+  }
+}

data/webpack/graphql/queries/cves.gql

@@ -1,3 +1,5 @@
+#import "./currentUserAttributes.gql"
+
 query($search: String, $first: Int, $last: Int) {
   cves(search: $search, first: $first, last: $last) {
     totalCount
@@ -15,4 +17,7 @@ query($search: String, $first: Int, $last: Int) {
       }
     }
   }
+  currentUser {
+    ...CurrentUserAttributes
+  }
 }

data/webpack/graphql/queries/hostgroups.gql

@@ -0,0 +1,14 @@
+#import "./currentUserAttributes.gql"
+
+query($search: String, $first: Int, $last: Int) {
+  hostgroups(search: $search, first: $first, last: $last) {
+    totalCount
+    nodes {
+      id
+      name
+    }
+  }
+  currentUser {
+    ...CurrentUserAttributes
+  }
+}

data/webpack/graphql/queries/ovalContent.gql

@@ -0,0 +1,8 @@
+query($id: String!) {
+  ovalContent(id: $id) {
+    id
+    name
+    url
+    originalFilename
+  }
+}

data/webpack/graphql/queries/ovalContents.gql

@@ -1,3 +1,5 @@
+#import "./currentUserAttributes.gql"
+
 query($first: Int, $last: Int) {
   ovalContents(first: $first, last: $last) {
     totalCount
@@ -6,6 +8,12 @@ query($first: Int, $last: Int) {
       name
       url
       originalFilename
+      meta {
+        canDestroy
+      }
     }
   }
+  currentUser {
+    ...CurrentUserAttributes
+  }
 }

data/webpack/graphql/queries/ovalPolicies.gql

@@ -1,12 +1,20 @@
+#import "./currentUserAttributes.gql"
+
 query($first: Int, $last: Int) {
   ovalPolicies(first: $first, last: $last) {
     totalCount
     nodes {
       id
       name
+      meta {
+        canDestroy
+      }
       ovalContent {
         name
       }
     }
   }
+  currentUser {
+    ...CurrentUserAttributes
+  }
 }

data/webpack/graphql/queries/ovalPolicy.gql

@@ -1,3 +1,5 @@
+#import "./currentUserAttributes.gql"
+
 query($id: String!) {
   ovalPolicy(id: $id) {
     id
@@ -7,6 +9,9 @@ query($id: String!) {
     weekday
     dayOfMonth
     description
+    meta {
+      canEdit
+    }
     hostgroups {
       nodes {
         id
@@ -18,4 +23,7 @@ query($id: String!) {
       }
     }
   }
+  currentUser {
+    ...CurrentUserAttributes
+  }
 }

data/webpack/helpers/formFieldsHelper.js

@@ -0,0 +1,113 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  FormGroup,
+  TextInput,
+  TextArea,
+  FormSelect,
+  FormSelectOption,
+} from '@patternfly/react-core';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
+
+export const SelectField = props => {
+  const { selectItems, field, form } = props;
+  const fieldProps = wrapFieldProps(field);
+
+  const valid = shouldValidate(form, field.name);
+
+  return (
+    <FormGroup
+      label={props.label}
+      isRequired={props.isRequired}
+      helperTextInvalid={form.errors[field.name]}
+      helperTextInvalidIcon={<ExclamationCircleIcon />}
+      validated={valid}
+    >
+      <FormSelect
+        {...fieldProps}
+        className="without_select2"
+        aria-label={fieldProps.name}
+        validated={valid}
+        isDisabled={form.isSubmitting}
+      >
+        <FormSelectOption key={0} value="" label={props.blankLabel} />
+        {selectItems.map((item, idx) => (
+          <FormSelectOption key={idx + 1} value={item.id} label={item.name} />
+        ))}
+      </FormSelect>
+    </FormGroup>
+  );
+};
+
+SelectField.propTypes = {
+  selectItems: PropTypes.array,
+  label: PropTypes.string.isRequired,
+  isRequired: PropTypes.bool,
+  field: PropTypes.object.isRequired,
+  form: PropTypes.object.isRequired,
+  blankLabel: PropTypes.string.isRequired,
+};
+SelectField.defaultProps = {
+  selectItems: [],
+  isRequired: false,
+};
+
+const wrapFieldProps = fieldProps => {
+  const { onChange } = fieldProps;
+  // modify onChange args to correctly wire formik with pf4 input handlers
+  const wrappedOnChange = (value, event) => {
+    onChange(event);
+  };
+
+  return { ...fieldProps, onChange: wrappedOnChange };
+};
+
+const shouldValidate = (form, fieldName) => {
+  if (form.touched[fieldName]) {
+    return form.errors[fieldName] ? 'error' : 'success';
+  }
+
+  return 'noval';
+};
+
+const fieldWithHandlers = Component => {
+  const Subcomponent = ({ label, form, field, isRequired, ...rest }) => {
+    const fieldProps = wrapFieldProps(field);
+    const valid = shouldValidate(form, field.name);
+
+    return (
+      <FormGroup
+        label={label}
+        isRequired={isRequired}
+        helperTextInvalid={form.errors[field.name]}
+        helperTextInvalidIcon={<ExclamationCircleIcon />}
+        validated={valid}
+      >
+        <Component
+          aria-label={fieldProps.name}
+          {...fieldProps}
+          {...rest}
+          validated={valid}
+          isDisabled={form.isSubmitting}
+        />
+      </FormGroup>
+    );
+  };
+
+  Subcomponent.propTypes = {
+    form: PropTypes.object.isRequired,
+    field: PropTypes.object.isRequired,
+    label: PropTypes.string.isRequired,
+    isRequired: PropTypes.bool,
+  };
+
+  Subcomponent.defaultProps = {
+    isRequired: false,
+  };
+
+  return Subcomponent;
+};
+
+export const TextField = fieldWithHandlers(TextInput);
+export const TextAreaField = fieldWithHandlers(TextArea);

data/webpack/helpers/globalIdHelper.js

@@ -4,8 +4,10 @@ const idSeparator = '-';
 const versionSeparator = ':';
 const defaultVersion = '01';
 
-export const decodeId = model => {
-  const split = atob(model.id).split(idSeparator);
+export const decodeModelId = model => decodeId(model.id);
+
+export const decodeId = globalId => {
+  const split = atob(globalId).split(idSeparator);
   return parseInt(last(split), 10);
 };
 

data/webpack/helpers/mutationHelper.js

@@ -0,0 +1,68 @@
+import { useMutation } from '@apollo/client';
+import { translate as __, sprintf } from 'foremanReact/common/I18n';
+
+import { useCurrentPagination, pageToVars } from './pageParamsHelper';
+
+const formatError = (error, name) =>
+  sprintf(__('There was a following error when deleting %(name)s: %(error)s'), {
+    name,
+    error,
+  });
+
+const joinErrors = errors => errors.map(err => err.message).join(', ');
+
+const onError = (showToast, resourceName) => error => {
+  showToast({ type: 'error', message: formatError(error, resourceName) });
+};
+
+const onCompleted = (
+  toggleModal,
+  showToast,
+  mutationName,
+  successMsg,
+  resourceName
+) => data => {
+  toggleModal();
+  const { errors } = data[mutationName];
+  if (Array.isArray(errors) && errors.length > 0) {
+    showToast({
+      type: 'error',
+      message: formatError(joinErrors(errors), resourceName),
+    });
+  } else {
+    showToast({
+      type: 'success',
+      message: successMsg,
+    });
+  }
+};
+
+export const prepareMutation = (
+  history,
+  showToast,
+  refetchQuery,
+  mutationName,
+  successMsg,
+  mutation,
+  resourceName
+) => toggleModal => {
+  const pagination = pageToVars(useCurrentPagination(history));
+
+  const options = {
+    refetchQueries: [{ query: refetchQuery, variables: pagination }],
+    onCompleted: onCompleted(
+      toggleModal,
+      showToast,
+      mutationName,
+      successMsg,
+      resourceName
+    ),
+    onError: onError(showToast, resourceName),
+  };
+
+  return useMutation(mutation, options);
+};
+
+export const submitDelete = (mutation, id) => {
+  mutation({ variables: { id } });
+};

data/webpack/helpers/pathsHelper.js

@@ -1,10 +1,12 @@
-import { decodeId } from './globalIdHelper';
+import { decodeModelId } from './globalIdHelper';
 
 const experimental = path => `/experimental${path}`;
 
 const showPath = path => `${path}/:id`;
+const newPath = path => `${path}/new`;
 
-export const modelPath = (basePath, model) => `${basePath}/${decodeId(model)}`;
+export const modelPath = (basePath, model) =>
+  `${basePath}/${decodeModelId(model)}`;
 
 // react-router uses path-to-regexp, should we use it as well in a future?
 // https://github.com/pillarjs/path-to-regexp/tree/v1.7.0#compile-reverse-path-to-regexp
@@ -14,9 +16,14 @@ export const resolvePath = (path, params) =>
     path
   );
 
+export const ovalContentsApiPath = '/api/v2/compliance/oval_contents';
+
 export const ovalContentsPath = experimental('/compliance/oval_contents');
+export const ovalContentsShowPath = showPath(ovalContentsPath);
+export const ovalContentsNewPath = newPath(ovalContentsPath);
 export const ovalPoliciesPath = experimental('/compliance/oval_policies');
 export const ovalPoliciesShowPath = `${showPath(ovalPoliciesPath)}/:tab?`;
+export const ovalPoliciesNewPath = newPath(ovalPoliciesPath);
 export const hostsPath = '/hosts';
-export const newJobPath = '/job_invocations/new';
+export const newJobPath = newPath('/job_invocations');
 export const hostsShowPath = showPath(hostsPath);