foreman_openscap 5.0.0 → 5.1.0

data/webpack/components/EmptyState.js

@@ -29,7 +29,7 @@ const EmptyStateIcon = ({ error, search, lock }) => {
   return <PfEmptyStateIcon icon={CubeIcon} />;
 };
 
-const EmptyState = ({ title, body, error, search, lock }) => (
+const EmptyState = ({ title, body, error, search, lock, primaryButton }) => (
   <Bullseye>
     <PfEmptyState variant={EmptyStateVariant.small}>
       <EmptyStateIcon error={!!error} search={search} lock={lock} />
@@ -37,6 +37,7 @@ const EmptyState = ({ title, body, error, search, lock }) => (
         {title}
       </Title>
       <EmptyStateBody>{body}</EmptyStateBody>
+      {primaryButton}
     </PfEmptyState>
   </Bullseye>
 );
@@ -59,6 +60,7 @@ EmptyState.propTypes = {
   error: PropTypes.oneOfType([PropTypes.shape({}), PropTypes.string]),
   search: PropTypes.bool,
   lock: PropTypes.bool,
+  primaryButton: PropTypes.node,
 };
 
 EmptyState.defaultProps = {
@@ -68,6 +70,7 @@ EmptyState.defaultProps = {
   error: undefined,
   search: false,
   lock: false,
+  primaryButton: null,
 };
 
 export default EmptyState;

data/webpack/components/IndexLayout.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
+import ToastsList from 'foremanReact/components/ToastsList';
 import {
   Grid,
   GridItem,
@@ -11,25 +12,31 @@ import {
 
 import './IndexLayout.scss';
 
-const IndexLayout = ({ pageTitle, children }) => (
+const IndexLayout = ({ pageTitle, children, contentWidthSpan }) => (
   <React.Fragment>
     <Helmet>
       <title>{pageTitle}</title>
     </Helmet>
+    <ToastsList />
     <Grid className="scap-page-grid">
-      <GridItem span={12}>
+      <GridItem span={12} className="pf-u-pb-xl">
         <TextContent>
           <Text component={TextVariants.h1}>{pageTitle}</Text>
         </TextContent>
       </GridItem>
-      <GridItem span={12}>{children}</GridItem>
+      <GridItem span={contentWidthSpan}>{children}</GridItem>
     </Grid>
   </React.Fragment>
 );
 
 IndexLayout.propTypes = {
   pageTitle: PropTypes.string.isRequired,
-  children: PropTypes.object.isRequired,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.object]).isRequired,
+  contentWidthSpan: PropTypes.number,
+};
+
+IndexLayout.defaultProps = {
+  contentWidthSpan: 12,
 };
 
 export default IndexLayout;

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}
@@ -33,12 +41,7 @@ const IndexTable = props => {
           />
         </FlexItem>
       </Flex>
-      <Table
-        aria-label={props.ariaTableLabel}
-        cells={props.columns}
-        rows={props.rows}
-        actions={props.actions}
-      >
+      <Table aria-label={ariaTableLabel} cells={columns} {...rest}>
         <TableHeader />
         <TableBody />
       </Table>
@@ -49,17 +52,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: [],
 };
 
 export default IndexTable;

data/webpack/components/LinkButton.js

@@ -0,0 +1,26 @@
+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 }) => (
+  <Link to={path}>
+    <Button variant={btnVariant} isDisabled={isDisabled}>
+      {btnText}
+    </Button>
+  </Link>
+);
+
+LinkButton.propTypes = {
+  path: PropTypes.string.isRequired,
+  btnText: PropTypes.string.isRequired,
+  btnVariant: PropTypes.string,
+  isDisabled: PropTypes.bool,
+};
+
+LinkButton.defaultProps = {
+  btnVariant: 'primary',
+  isDisabled: false,
+};
+
+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,4 +1,4 @@
-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';
@@ -29,9 +29,17 @@ const withLoading = Component => {
     renameData,
     emptyStateTitle,
     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 />;
@@ -62,7 +70,13 @@ const withLoading = Component => {
     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)} />;
@@ -74,11 +88,15 @@ const withLoading = Component => {
     renameData: PropTypes.func,
     emptyStateTitle: PropTypes.string.isRequired,
     permissions: PropTypes.array,
+    primaryButton: PropTypes.node,
+    shouldRefetch: PropTypes.bool,
   };
 
   Subcomponent.defaultProps = {
     renameData: data => data,
     permissions: [],
+    primaryButton: null,
+    shouldRefetch: false,
   };
 
   return Subcomponent;

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/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

@@ -8,6 +8,9 @@ query($first: Int, $last: Int) {
       name
       url
       originalFilename
+      meta {
+        canDestroy
+      }
     }
   }
   currentUser {

data/webpack/graphql/queries/ovalPolicies.gql

@@ -6,6 +6,9 @@ query($first: Int, $last: Int) {
     nodes {
       id
       name
+      meta {
+        canDestroy
+      }
       ovalContent {
         name
       }

data/webpack/helpers/formFieldsHelper.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { FormGroup, TextInput } from '@patternfly/react-core';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
+
+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);

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

@@ -3,6 +3,7 @@ import { decodeId } 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)}`;
 
@@ -14,7 +15,11 @@ 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 hostsPath = '/hosts';

data/webpack/helpers/toastHelper.js

@@ -0,0 +1,3 @@
+import { addToast } from 'foremanReact/components/ToastsList';
+
+export const showToast = dispatch => toast => dispatch(addToast(toast));

data/webpack/routes/OvalContents/OvalContentsIndex/OvalContentsIndex.js

@@ -4,12 +4,17 @@ import { useQuery } from '@apollo/client';
 import { translate as __ } from 'foremanReact/common/I18n';
 
 import IndexLayout from '../../../components/IndexLayout';
+import LinkButton from '../../../components/LinkButton';
 import OvalContentsTable from './OvalContentsTable';
+import { ovalContentsNewPath } from '../../../helpers/pathsHelper';
 import {
   useParamsToVars,
   useCurrentPagination,
 } from '../../../helpers/pageParamsHelper';
+
+import { submitDelete, prepareMutation } from '../../../helpers/mutationHelper';
 import ovalContentsQuery from '../../../graphql/queries/ovalContents.gql';
+import deleteOvalContentMutation from '../../../graphql/mutations/deleteOvalContent.gql';
 
 const OvalContentsIndex = props => {
   const useFetchFn = componentProps =>
@@ -34,6 +39,24 @@ const OvalContentsIndex = props => {
         pagination={pagination}
         emptyStateTitle={__('No OVAL Contents found.')}
         permissions={['view_oval_contents']}
+        confirmDeleteTitle={__('Delete OVAL Content')}
+        submitDelete={submitDelete}
+        prepareMutation={prepareMutation(
+          props.history,
+          props.showToast,
+          ovalContentsQuery,
+          'deleteOvalContent',
+          __('OVAL Content successfully deleted.'),
+          deleteOvalContentMutation,
+          __('OVAL Content')
+        )}
+        primaryButton={
+          <LinkButton
+            path={ovalContentsNewPath}
+            btnText={__('Create OVAL Content')}
+          />
+        }
+        shouldRefetch={props.location?.state?.refreshOvalContents}
       />
     </IndexLayout>
   );
@@ -41,6 +64,8 @@ const OvalContentsIndex = props => {
 
 OvalContentsIndex.propTypes = {
   history: PropTypes.object.isRequired,
+  showToast: PropTypes.func.isRequired,
+  location: PropTypes.object.isRequired,
 };
 
 export default OvalContentsIndex;

data/webpack/routes/OvalContents/OvalContentsIndex/OvalContentsTable.js

@@ -1,9 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
+import { Button } from '@patternfly/react-core';
 
 import withLoading from '../../../components/withLoading';
+import withDeleteModal from '../../../components/withDeleteModal';
 import IndexTable from '../../../components/IndexTable';
+import {
+  ovalContentsNewPath,
+  ovalContentsPath,
+  modelPath,
+} from '../../../helpers/pathsHelper';
+
+import { linkCell } from '../../../helpers/tableHelper';
 
 const OvalContentsTable = props => {
   const columns = [
@@ -14,24 +23,51 @@ const OvalContentsTable = props => {
 
   const rows = props.ovalContents.map(ovalContent => ({
     cells: [
-      { title: ovalContent.name },
+      {
+        title: linkCell(
+          modelPath(ovalContentsPath, ovalContent),
+          ovalContent.name
+        ),
+      },
       { title: ovalContent.url || '' },
       { title: ovalContent.originalFilename || '' },
     ],
     ovalContent,
   }));
 
-  const actions = [];
+  const actionResolver = (rowData, rest) => {
+    const actions = [];
+    if (rowData.ovalContent.meta.canDestroy) {
+      actions.push({
+        title: __('Delete OVAL Content'),
+        onClick: (event, rowId, rData, extra) => {
+          props.toggleModal(rData.ovalContent);
+        },
+      });
+    }
+    return actions;
+  };
+
+  const createBtn = (
+    <Button
+      onClick={() => props.history.push(ovalContentsNewPath)}
+      variant="primary"
+      aria-label="create_oval_content"
+    >
+      {__('Create OVAL Content')}
+    </Button>
+  );
 
   return (
     <IndexTable
       columns={columns}
       rows={rows}
-      actions={actions}
+      actionResolver={actionResolver}
       pagination={props.pagination}
       totalCount={props.totalCount}
       history={props.history}
       ariaTableLabel={__('OVAL Contents table')}
+      toolbarBtns={createBtn}
     />
   );
 };
@@ -41,6 +77,7 @@ OvalContentsTable.propTypes = {
   pagination: PropTypes.object.isRequired,
   totalCount: PropTypes.number.isRequired,
   history: PropTypes.object.isRequired,
+  toggleModal: PropTypes.func.isRequired,
 };
 
-export default withLoading(OvalContentsTable);
+export default withLoading(withDeleteModal(OvalContentsTable));