katello 4.1.4 → 4.2.0.rc1

data/webpack/scenes/ContentViews/Details/ComponentContentViews/ComponentContentViewAddModal.js

@@ -0,0 +1,153 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalVariant, FormSelect,
+  FormSelectOption, Checkbox, Form, FormGroup,
+  ActionGroup, Button } from '@patternfly/react-core';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { STATUS } from 'foremanReact/constants';
+import { selectCVDetails,
+  selectCVDetailStatus,
+  selectCVDetailError } from '../../Details/ContentViewDetailSelectors';
+import { addComponent } from '../ContentViewDetailActions';
+
+const ComponentContentViewAddModal = ({
+  cvId, componentCvId, componentId, latest, show, setIsOpen,
+}) => {
+  const dispatch = useDispatch();
+  const componentDetails = useSelector(
+    state => selectCVDetails(state, componentCvId),
+    shallowEqual,
+  );
+  const componentStatus = useSelector(
+    state => selectCVDetailStatus(state, componentCvId),
+    shallowEqual,
+  );
+  const componentError = useSelector(
+    state => selectCVDetailError(state, componentCvId),
+    shallowEqual,
+  );
+  const [cvName, setCvName] = useState('');
+  const [options, setOptions] = useState([]);
+  const [formLatest, setFormLatest] = useState(componentId ? latest : false);
+  const [selected, setSelected] = useState(null);
+  const versionsLoading = componentStatus === STATUS.PENDING;
+
+  useEffect(() => {
+    if (!versionsLoading && componentDetails) {
+      const { name, versions } = componentDetails;
+      const versionMutable = versions;
+      setCvName(name);
+      const opt = versionMutable.map(item => ({ value: item.id, label: __(`Version ${item.version}`) }));
+      setOptions([...opt].reverse());
+      setSelected(opt.slice(-1)[0].value);
+    }
+  }, [componentDetails, componentStatus, componentError, versionsLoading]);
+
+  const getAddParams = () => {
+    if (formLatest) {
+      return [{ latest: true, content_view_id: componentCvId }];
+    }
+    return [{ content_view_version_id: selected }];
+  };
+
+  const getUpdateParams = () => {
+    if (formLatest) {
+      return { id: componentId, latest: formLatest, compositeContentViewId: cvId };
+    }
+    return { id: componentId, compositeContentViewId: cvId, content_view_version_id: selected };
+  };
+
+  const updateLatest = (checked) => {
+    setFormLatest(checked);
+    if (checked) setSelected(options[0]);
+  };
+
+  const onSubmit = () => {
+    if (componentId) {
+      dispatch(addComponent({
+        compositeContentViewId: cvId,
+        components: getUpdateParams(),
+      }));
+    } else {
+      dispatch(addComponent({
+        compositeContentViewId: cvId,
+        components: getAddParams(),
+      }));
+    }
+    setIsOpen(false);
+  };
+
+  if (show && versionsLoading) return null;
+
+  return (
+    <Modal
+      title={componentId ? __('Update version') : __('Add component')}
+      variant={ModalVariant.small}
+      isOpen={show}
+      description={__(`Select available version of ${cvName} to use`)}
+      onClose={() => {
+        setIsOpen(false);
+      }}
+      appendTo={document.body}
+    >
+      <Form>
+        <FormGroup label={__('Version')} isRequired fieldId="version">
+          <FormSelect
+            value={selected}
+            isDisabled={formLatest || options.length === 1}
+            onChange={value => setSelected(value)}
+            id="horzontal-form-title"
+            name="horizontal-form-title"
+            aria-label="CvVersion"
+          >
+            {options.map((option, index) => (
+              // eslint-disable-next-line react/no-array-index-key
+              <FormSelectOption key={index} value={option.value} label={option.label} />
+          ))}
+          </FormSelect>
+        </FormGroup>
+        <FormGroup fieldId="latest">
+          <Checkbox
+            style={{ marginTop: 0 }}
+            id="latest"
+            name="latest"
+            label={__('Always update to latest version')}
+            isChecked={formLatest}
+            onChange={checked => updateLatest(checked)}
+          />
+        </FormGroup>
+        <ActionGroup>
+          <Button aria-label="add_component" variant="primary" onClick={() => onSubmit()}>{__('Submit')}</Button>
+          <Button variant="link" onClick={() => setIsOpen(false)}>{__('Cancel')}</Button>
+        </ActionGroup>
+      </Form>
+    </Modal>);
+};
+
+ComponentContentViewAddModal.propTypes = {
+  cvId: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string,
+  ]).isRequired,
+  componentCvId: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string,
+  ]).isRequired,
+  componentId: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string,
+  ]),
+  latest: PropTypes.bool,
+  show: PropTypes.bool,
+  setIsOpen: PropTypes.func,
+};
+
+ComponentContentViewAddModal.defaultProps = {
+  componentId: null,
+  latest: false,
+  show: false,
+  setIsOpen: null,
+};
+
+export default ComponentContentViewAddModal;

data/webpack/scenes/ContentViews/Details/ComponentContentViews/ComponentVersion.js

@@ -10,33 +10,44 @@ import {
 } from '@patternfly/react-core';
 
 const ComponentVersion = ({ componentCV }) => {
-  const { latest, content_view_version: cvVersion, content_view: cv } = componentCV;
+  const {
+    id: componentId, latest, content_view_version: cvVersion, content_view: cv,
+  } = componentCV;
   const {
     id,
     latest_version: latestVersion,
   } = cv;
-  const { version } = cvVersion;
+  const { version } = cvVersion || {};
+  const noVersionText = __('Not yet published');
   const latestDescription = __('Latest (automatically updates)');
   const manualVersionText = (latestVersion === version) ? __('Latest version') : __(`New version is available: Version ${latestVersion}`);
+  if (componentId) {
+    return (
+      <>
+        <Link to={urlBuilder('labs/content_views', '', id)}>{version ? `Version ${version}` : noVersionText}</Link>
+        <TextContent>
+          <Text component={TextVariants.small}>
+            {latest ? latestDescription : manualVersionText}
+          </Text>
+        </TextContent>
+      </>
+    );
+  }
   return (
-    <>
-      <Link to={urlBuilder('labs/content_views', '', id)}> Version {version}</Link>
-      <TextContent>
-        <Text component={TextVariants.small}>{latest ? latestDescription : manualVersionText}</Text>
-      </TextContent>
-    </>
+    <Link to={urlBuilder('labs/content_views', '', id)}>{latestVersion ? `Version ${latestVersion}` : noVersionText}</Link>
   );
 };
 
 ComponentVersion.propTypes = {
   componentCV: PropTypes.shape({
+    id: PropTypes.number,
     latest: PropTypes.bool.isRequired,
     content_view_version: PropTypes.shape({
-      version: PropTypes.string.isRequired,
+      version: PropTypes.string,
     }),
     content_view: PropTypes.shape({
       id: PropTypes.number.isRequired,
-      latest_version: PropTypes.string.isRequired,
+      latest_version: PropTypes.string,
     }),
   }).isRequired,
 };

data/webpack/scenes/ContentViews/Details/ComponentContentViews/ContentViewComponents.js

@@ -1,10 +1,10 @@
-import React, { useState, useEffect } from 'react';
-import { useSelector } from 'react-redux';
-import {
-  Bullseye,
-} from '@patternfly/react-core';
+import React, { useState, useCallback } from 'react';
+import useDeepCompareEffect from 'use-deep-compare-effect';
+import { useDispatch, useSelector } from 'react-redux';
+import { Bullseye, Split, SplitItem, Button } from '@patternfly/react-core';
 import { Link } from 'react-router-dom';
 import { TableVariant, fitContent, TableText } from '@patternfly/react-table';
+import { PencilAltIcon } from '@patternfly/react-icons';
 import { STATUS } from 'foremanReact/constants';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { urlBuilder } from 'foremanReact/common/urlHelpers';
@@ -16,21 +16,39 @@ import {
   selectCVComponents,
   selectCVComponentsStatus,
   selectCVComponentsError,
+  selectCVComponentAddStatus,
+  selectCVComponentRemoveStatus,
 } from '../ContentViewDetailSelectors';
-import { getContentViewComponents } from '../ContentViewDetailActions';
+import getContentViewDetails, {
+  addComponent, getContentViewComponents,
+  removeComponent,
+} from '../ContentViewDetailActions';
 import AddedStatusLabel from '../../../../components/AddedStatusLabel';
 import ComponentVersion from './ComponentVersion';
 import ComponentEnvironments from './ComponentEnvironments';
 import ContentViewIcon from '../../components/ContentViewIcon';
+import { ADDED, ALL_STATUSES, NOT_ADDED } from '../../ContentViewsConstants';
+import SelectableDropdown from '../../../../components/SelectableDropdown/SelectableDropdown';
+import '../../../../components/EditableTextInput/editableTextInput.scss';
+import ComponentContentViewAddModal from './ComponentContentViewAddModal';
 
 const ContentViewComponents = ({ cvId, details }) => {
   const response = useSelector(state => selectCVComponents(state, cvId));
   const status = useSelector(state => selectCVComponentsStatus(state, cvId));
   const error = useSelector(state => selectCVComponentsError(state, cvId));
-
+  const componentAddedStatus = useSelector(state => selectCVComponentAddStatus(state, cvId));
+  const componentRemovedStatus = useSelector(state => selectCVComponentRemoveStatus(state, cvId));
   const [rows, setRows] = useState([]);
   const [metadata, setMetadata] = useState({});
   const [searchQuery, updateSearchQuery] = useState('');
+  const [statusSelected, setStatusSelected] = useState(ALL_STATUSES);
+  const [versionEditing, setVersionEditing] = useState(false);
+  const [compositeCvEditing, setCompositeCvEditing] = useState(null);
+  const [componentCvEditing, setComponentCvEditing] = useState(null);
+  const [componentLatest, setComponentLatest] = useState(false);
+  const [componentId, setComponentId] = useState(null);
+  const dispatch = useDispatch();
+
   const columnHeaders = [
     { title: __('Type'), transforms: [fitContent] },
     { title: __('Name') },
@@ -41,12 +59,53 @@ const ContentViewComponents = ({ cvId, details }) => {
     { title: __('Description') },
   ];
   const loading = status === STATUS.PENDING;
+  const addComponentsResolved = componentAddedStatus === STATUS.RESOLVED;
+  const removeComponentsResolved = componentRemovedStatus === STATUS.RESOLVED;
+
   const { label } = details || {};
 
-  const buildRows = (results) => {
+  const bulkRemoveEnabled = () => rows.some(row => row.selected && row.added);
+
+  const onAdd = useCallback(({
+    componentCvId, published, added, latest,
+  }) => {
+    if (published) {
+      dispatch(getContentViewDetails(componentCvId));
+      setVersionEditing(true);
+      setCompositeCvEditing(cvId);
+      setComponentCvEditing(componentCvId);
+      setComponentLatest(latest);
+      setComponentId(added);
+    } else {
+      dispatch(addComponent({
+        compositeContentViewId: cvId,
+        components: [{ latest: true, content_view_id: componentCvId }],
+      }));
+    }
+  }, [cvId, dispatch]);
+
+  const removeBulk = () => {
+    const componentIds = [];
+    rows.forEach(row => row.selected && componentIds.push(row.added));
+    dispatch(removeComponent({
+      compositeContentViewId: cvId,
+      component_ids: componentIds,
+    }));
+  };
+
+  const onRemove = (componentIdToRemove) => {
+    dispatch(removeComponent({
+      compositeContentViewId: cvId,
+      component_ids: [componentIdToRemove],
+    }));
+  };
+
+  const buildRows = useCallback((results) => {
     const newRows = [];
     results.forEach((componentCV) => {
-      const { content_view: cv, content_view_version: cvVersion } = componentCV;
+      const {
+        id: componentCvId, content_view: cv, content_view_version: cvVersion, latest,
+      } = componentCV;
       const { environments, repositories } = cvVersion || {};
       const {
         id,
@@ -57,25 +116,72 @@ const ContentViewComponents = ({ cvId, details }) => {
       const cells = [
         { title: <Bullseye><ContentViewIcon composite={false} /></Bullseye> },
         { title: <Link to={urlBuilder('labs/content_views', '', id)}>{name}</Link> },
-        { title: cvVersion ? <ComponentVersion {...{ componentCV }} /> : 'Not yet published' },
-        { title: environments ? <ComponentEnvironments {...{ environments }} /> : 'Not yet published' },
+        {
+          title:
+  <Split>
+    <SplitItem>
+      <ComponentVersion {...{ componentCV }} />
+    </SplitItem>
+    {componentCvId && cvVersion &&
+    <SplitItem>
+      <Button
+        className="foreman-edit-icon"
+        aria-label="edit_version"
+        variant="plain"
+        onClick={() => {
+                            onAdd({
+                              componentCvId: id, published: cvVersion, added: componentCvId, latest,
+                            });
+                          }}
+      >
+        <PencilAltIcon />
+      </Button>
+    </SplitItem>}
+  </Split>,
+        },
+        { title: environments ? <ComponentEnvironments {...{ environments }} /> : __('Not yet published') },
         { title: <Link to={urlBuilder(`labs/content_views/${id}#repositories`, '')}>{ repositories ? repositories.length : 0 }</Link> },
         {
-          title: <AddedStatusLabel added />,
+          title: <AddedStatusLabel added={componentCvId} />,
         },
-        { title: <TableText wrapModifier="truncate">{description || 'No description'}</TableText> },
+        { title: <TableText wrapModifier="truncate">{description || __('No description')}</TableText> },
       ];
-      newRows.push({ cells });
+      newRows.push({
+        componentCvId: id, added: componentCvId, published: cvVersion, latest, cells,
+      });
     });
     return newRows;
-  };
+  }, [onAdd]);
+
+  const actionResolver = (rowData, { _rowIndex }) => [
+    {
+      title: __('Add'),
+      isDisabled: rowData.added,
+      onClick: (_event, rowId, rowInfo) => {
+        onAdd({
+          componentCvId: rowInfo.componentCvId,
+          published: rowInfo.published,
+          added: rowInfo.added,
+          latest: rowInfo.latest,
+        });
+      },
+    },
+    {
+      title: __('Remove'),
+      isDisabled: !rowData.added,
+      onClick: (_event, rowId, rowInfo) => {
+        onRemove(rowInfo.added);
+      },
+    },
+  ];
 
   const emptyContentTitle = __(`No content views belong to ${label}`);
   const emptyContentBody = __('Please add some content views.');
   const emptySearchTitle = __('No matching content views found');
   const emptySearchBody = __('Try changing your search settings.');
+  const activeFilters = statusSelected && statusSelected !== ALL_STATUSES;
 
-  useEffect(() => {
+  useDeepCompareEffect(() => {
     const { results, ...meta } = response;
     setMetadata(meta);
 
@@ -83,7 +189,7 @@ const ContentViewComponents = ({ cvId, details }) => {
       const newRows = buildRows(results);
       setRows(newRows);
     }
-  }, [JSON.stringify(response)]);
+  }, [response, buildRows, loading]);
 
   return (
     <TableWrapper
@@ -98,13 +204,45 @@ const ContentViewComponents = ({ cvId, details }) => {
         updateSearchQuery,
         error,
         status,
+        activeFilters,
+        actionResolver,
       }}
       onSelect={onSelect(rows, setRows)}
       cells={columnHeaders}
       variant={TableVariant.compact}
       autocompleteEndpoint="/content_views/auto_complete_search"
-      fetchItems={params => getContentViewComponents(cvId, params)}
-    />
+      fetchItems={useCallback(params =>
+        getContentViewComponents(cvId, params, statusSelected), [cvId, statusSelected])}
+      additionalListeners={[statusSelected, addComponentsResolved, removeComponentsResolved]}
+    >
+      <Split hasGutter>
+        <SplitItem>
+          <SelectableDropdown
+            items={[ADDED, NOT_ADDED, ALL_STATUSES]}
+            title={__('Status')}
+            selected={statusSelected}
+            setSelected={setStatusSelected}
+            placeholderText={__('Status')}
+          />
+        </SplitItem>
+        <SplitItem>
+          <Button onClick={removeBulk} isDisabled={!(bulkRemoveEnabled())} variant="secondary" aria-label="remove_components">
+            {__('Remove content views')}
+          </Button>
+        </SplitItem>
+      </Split>
+      {versionEditing &&
+        <ComponentContentViewAddModal
+          cvId={compositeCvEditing}
+          componentCvId={componentCvEditing}
+          componentId={componentId}
+          latest={componentLatest}
+          show={versionEditing}
+          setIsOpen={setVersionEditing}
+          aria-label="copy_content_view_modal"
+        />
+      }
+    </TableWrapper>
   );
 };