katello 4.2.1 → 4.3.0.rc1

data/webpack/components/Table/EmptyStateMessage.js

@@ -6,39 +6,58 @@ import { EmptyState,
   Bullseye,
   Title } from '@patternfly/react-core';
 import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
 import { CubeIcon, ExclamationCircleIcon, SearchIcon } from '@patternfly/react-icons';
 import { global_danger_color_200 as dangerColor } from '@patternfly/react-tokens';
 
-const KatelloEmptyStateIcon = ({ error, search }) => {
+const KatelloEmptyStateIcon = ({ error, search, customIcon }) => {
   if (error) return <EmptyStateIcon icon={ExclamationCircleIcon} color={dangerColor.value} />;
   if (search) return <EmptyStateIcon icon={SearchIcon} />;
+  if (customIcon) return <EmptyStateIcon icon={customIcon} />;
   return <EmptyStateIcon icon={CubeIcon} />;
 };
 
 const EmptyStateMessage = ({
-  title, body, error, search,
-}) => (
-  <Bullseye>
-    <EmptyState variant={EmptyStateVariant.small}>
-      <KatelloEmptyStateIcon error={!!error} search={search} />
-      <Title headingLevel="h2" size="lg">
-        {title}
-      </Title>
-      <EmptyStateBody>
-        {body}
-      </EmptyStateBody>
-    </EmptyState>
-  </Bullseye>
-);
+  title, body, error, search, customIcon,
+}) => {
+  let emptyStateTitle = title;
+  let emptyStateBody = body;
+  if (error) {
+    if (error?.response?.data?.error) {
+      const { response: { data: { error: { message, details } } } } = error;
+      emptyStateTitle = message;
+      emptyStateBody = details;
+    } else if (error?.response?.status) {
+      const { response: { status } } = error;
+      emptyStateTitle = status;
+      emptyStateBody = error?.response?.data?.displayMessage || __('Something went wrong! Please check server logs!');
+    }
+  }
+  return (
+    <Bullseye>
+      <EmptyState variant={EmptyStateVariant.small}>
+        <KatelloEmptyStateIcon error={!!error} search={search} customIcon={customIcon} />
+        <Title headingLevel="h2" size="lg">
+          {emptyStateTitle}
+        </Title>
+        <EmptyStateBody>
+          {emptyStateBody}
+        </EmptyStateBody>
+      </EmptyState>
+    </Bullseye>
+  );
+};
 
 KatelloEmptyStateIcon.propTypes = {
   error: PropTypes.bool,
   search: PropTypes.bool,
+  customIcon: PropTypes.elementType,
 };
 
 KatelloEmptyStateIcon.defaultProps = {
   error: false,
   search: false,
+  customIcon: undefined,
 };
 
 EmptyStateMessage.propTypes = {
@@ -49,13 +68,15 @@ EmptyStateMessage.propTypes = {
     PropTypes.string,
   ]),
   search: PropTypes.bool,
+  customIcon: PropTypes.elementType,
 };
 
 EmptyStateMessage.defaultProps = {
-  title: 'Unable to connect',
-  body: 'There was an error retrieving data from the server. Check your connection and try again.',
+  title: __('Unable to connect'),
+  body: __('There was an error retrieving data from the server. Check your connection and try again.'),
   error: undefined,
   search: false,
+  customIcon: undefined,
 };
 
 export default EmptyStateMessage;

data/webpack/components/Table/MainTable.js

@@ -3,9 +3,12 @@ import {
   Table,
   TableHeader,
   TableBody,
+  TableComposable,
 } from '@patternfly/react-table';
 import { STATUS } from 'foremanReact/constants';
+import { isEqual } from 'lodash';
 import PropTypes from 'prop-types';
+import './MainTable.scss';
 
 import EmptyStateMessage from './EmptyStateMessage';
 import Loading from '../../components/Loading';
@@ -13,24 +16,41 @@ import Loading from '../../components/Loading';
 const MainTable = ({
   status, cells, rows, error, emptyContentTitle, emptyContentBody,
   emptySearchTitle, emptySearchBody, searchIsActive, activeFilters,
-  ...extraTableProps
+  defaultFilters, actionButtons, rowsCount, children, ...extraTableProps
 }) => {
-  const isFiltering = activeFilters || searchIsActive;
+  const tableHasNoRows = () => {
+    if (children) return rowsCount === 0;
+    return rows.length === 0;
+  };
+  const filtersAreActive = activeFilters?.length &&
+    !isEqual(new Set(activeFilters), new Set(defaultFilters));
+  const isFiltering = searchIsActive || filtersAreActive;
   if (status === STATUS.PENDING) return (<Loading />);
   // Can we display the error message?
   if (status === STATUS.ERROR) return (<EmptyStateMessage error={error} />);
-  if (status === STATUS.RESOLVED && isFiltering && rows.length === 0) {
+  if (status === STATUS.RESOLVED && isFiltering && tableHasNoRows()) {
     return (<EmptyStateMessage
       title={emptySearchTitle}
       body={emptySearchBody}
       search
     />);
   }
-  if (status === STATUS.RESOLVED && rows.length === 0) {
+  if (status === STATUS.RESOLVED && tableHasNoRows()) {
     return (<EmptyStateMessage title={emptyContentTitle} body={emptyContentBody} />);
   }
 
   const tableProps = { cells, rows, ...extraTableProps };
+  if (children) {
+    return (
+      <TableComposable
+        aria-label="Content View Table"
+        className="katello-pf4-table"
+        {...extraTableProps}
+      >
+        {children}
+      </TableComposable>
+    );
+  }
   return (
     <Table
       aria-label="Content View Table"
@@ -46,11 +66,11 @@ const MainTable = ({
 MainTable.propTypes = {
   status: PropTypes.string.isRequired,
   cells: PropTypes.arrayOf(PropTypes.oneOfType([
-    PropTypes.shape({}),
-    PropTypes.string])).isRequired,
-  rows: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+    PropTypes.shape({ }),
+    PropTypes.string])),
+  rows: PropTypes.arrayOf(PropTypes.shape({ })),
   error: PropTypes.oneOfType([
-    PropTypes.shape({}),
+    PropTypes.shape({ }),
     PropTypes.string,
   ]),
   emptyContentTitle: PropTypes.string.isRequired,
@@ -58,13 +78,32 @@ MainTable.propTypes = {
   emptySearchTitle: PropTypes.string.isRequired,
   emptySearchBody: PropTypes.string.isRequired,
   searchIsActive: PropTypes.bool,
-  activeFilters: PropTypes.bool,
+  activeFilters: PropTypes.arrayOf(PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string),
+  ])),
+  defaultFilters: PropTypes.arrayOf(PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string),
+  ])),
+  actionButtons: PropTypes.bool,
+  rowsCount: PropTypes.number,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]),
 };
 
 MainTable.defaultProps = {
   error: null,
   searchIsActive: false,
-  activeFilters: false,
+  activeFilters: [],
+  defaultFilters: [],
+  actionButtons: false,
+  children: null,
+  cells: undefined,
+  rows: undefined,
+  rowsCount: undefined,
 };
 
 export default MainTable;

data/webpack/components/Table/MainTable.scss

@@ -0,0 +1,11 @@
+.pf-c-dropdown.pf-m-align-right{
+  width: 100%;
+  justify-content: flex-end;
+  display: flex;
+}
+.pf-c-dropdown__menu {
+  min-width: 0;
+}
+.pf-c-wizard__footer {
+  z-index: 1;
+}

data/webpack/components/Table/PageControls.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Pagination, PaginationVariant, FlexItem } from '@patternfly/react-core';
+import { usePaginationOptions } from 'foremanReact/components/Pagination/PaginationHooks';
+
+import { getPageStats } from './helpers';
+
+const PageControls = ({
+  variant, total, page, perPage, onPaginationUpdate,
+}) => {
+  const { firstIndex, lastIndex } = getPageStats({ total, page, perPage });
+  return (
+    <FlexItem align={{ default: 'alignRight' }}>
+      <Pagination
+        key={variant}
+        itemCount={total}
+        itemsStart={firstIndex}
+        itemsEnd={lastIndex}
+        page={page}
+        perPage={perPage}
+        isCompact={variant === PaginationVariant.top}
+        onSetPage={(_evt, updated) => onPaginationUpdate({ page: updated })}
+        onPerPageSelect={(_evt, updated) => onPaginationUpdate({ per_page: updated })}
+        perPageOptions={usePaginationOptions().map(p => ({ title: p.toString(), value: p }))}
+        variant={variant}
+      />
+    </FlexItem>
+  );
+};
+
+export default PageControls;
+
+PageControls.propTypes = {
+  variant: PropTypes.string.isRequired,
+  total: PropTypes.number,
+  page: PropTypes.number,
+  perPage: PropTypes.number,
+  onPaginationUpdate: PropTypes.func.isRequired,
+};
+
+PageControls.defaultProps = {
+  total: 0,
+  page: 1,
+  perPage: 20,
+};

data/webpack/components/Table/TableHooks.js

@@ -0,0 +1,230 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { isEmpty } from 'lodash';
+
+class ReactConnectedSet extends Set {
+  constructor(initialValue, forceRender) {
+    super();
+    this.forceRender = forceRender;
+    // The constructor would normally call add() with the initial value, but since we
+    // must call super() at the top, this.forceRender() isn't defined yet.
+    // So, we call super() above with no argument, then call add() manually below
+    // after forceRender is defined
+    if (initialValue) {
+      if (initialValue.constructor.name === 'Array') {
+        initialValue.forEach(id => super.add(id));
+      } else {
+        super.add(initialValue);
+      }
+    }
+  }
+
+  add(value) {
+    const result = super.add(value); // ensuring these methods have the same API as the superclass
+    this.forceRender();
+    return result;
+  }
+
+  clear() {
+    const result = super.clear();
+    this.forceRender();
+    return result;
+  }
+
+  delete(value) {
+    const result = super.delete(value);
+    this.forceRender();
+    return result;
+  }
+
+  onToggle(isOpen, id) {
+    if (isOpen) {
+      this.add(id);
+    } else {
+      this.delete(id);
+    }
+  }
+
+  addAll(ids) {
+    ids.forEach(id => super.add(id));
+    this.forceRender();
+  }
+}
+
+export const useSet = (initialArry) => {
+  const [, setToggle] = useState(0);
+  // needed because mutating a Ref won't cause React to rerender
+  const forceRender = () => setToggle(prev => prev + 1);
+  const set = useRef(new ReactConnectedSet(initialArry, forceRender));
+  return set.current;
+};
+
+export const useSelectionSet = ({
+  results, metadata,
+  initialArry = [],
+  idColumn = 'id',
+  isSelectable = () => true,
+}) => {
+  const selectionSet = useSet(initialArry);
+  const pageIds = results?.map(result => result[idColumn]) ?? [];
+  const selectableResults = results?.filter(result => isSelectable(result)) ?? [];
+  const selectableIds = new Set(selectableResults.map(result => result[idColumn]));
+  const canSelect = id => selectableIds.has(id);
+  const areAllRowsOnPageSelected = () =>
+    Number(pageIds?.length) > 0 &&
+        pageIds.every(result => selectionSet.has(result) || !canSelect(result));
+
+  const areAllRowsSelected = () =>
+    Number(selectionSet.size) > 0 && selectionSet.size === Number(metadata.selectable);
+
+  const selectPage = () => selectionSet.addAll(pageIds.filter(canSelect));
+  const selectNone = () => selectionSet.clear();
+  const selectOne = (isSelected, id) => {
+    if (canSelect(id)) {
+      if (isSelected) {
+        selectionSet.add(id);
+      } else {
+        selectionSet.delete(id);
+      }
+    }
+  };
+
+  const selectedCount = selectionSet.size;
+
+  const isSelected = id => canSelect(id) && selectionSet.has(id);
+
+  return {
+    selectOne,
+    selectedCount,
+    areAllRowsOnPageSelected,
+    areAllRowsSelected,
+    selectPage,
+    selectNone,
+    isSelected,
+    isSelectable: canSelect,
+    selectionSet,
+  };
+};
+
+const usePrevious = (value) => {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+};
+
+export const useBulkSelect = ({
+  results,
+  metadata,
+  initialArry = [],
+  idColumn = 'id',
+  isSelectable,
+}) => {
+  const { selectionSet: inclusionSet, ...selectOptions } =
+                useSelectionSet({
+                  results, metadata, initialArry, idColumn, isSelectable,
+                });
+  const exclusionSet = useSet([]);
+  const [searchQuery, updateSearchQuery] = useState('');
+  const [selectAllMode, setSelectAllMode] = useState(false);
+  const selectedCount = selectAllMode ?
+    Number(metadata.selectable) - exclusionSet.size : selectOptions.selectedCount;
+
+  const areAllRowsOnPageSelected = () => selectAllMode ||
+                                         selectOptions.areAllRowsOnPageSelected();
+
+  const areAllRowsSelected = () => (selectAllMode && exclusionSet.size === 0) ||
+                                   selectOptions.areAllRowsSelected();
+
+  const isSelected = (id) => {
+    if (!selectOptions.isSelectable(id)) {
+      return false;
+    }
+    if (selectAllMode) {
+      return !exclusionSet.has(id);
+    }
+    return inclusionSet.has(id);
+  };
+
+  const selectPage = () => {
+    setSelectAllMode(false);
+    selectOptions.selectPage();
+  };
+
+  const selectNone = useCallback(() => {
+    setSelectAllMode(false);
+    exclusionSet.clear();
+    inclusionSet.clear();
+  }, [exclusionSet, inclusionSet]);
+
+  const selectOne = (isRowSelected, id) => {
+    if (selectAllMode) {
+      if (isRowSelected) {
+        exclusionSet.delete(id);
+      } else {
+        exclusionSet.add(id);
+      }
+    } else {
+      selectOptions.selectOne(isRowSelected, id);
+    }
+  };
+
+  const selectAll = (checked) => {
+    setSelectAllMode(checked);
+    if (checked) {
+      exclusionSet.clear();
+    } else {
+      inclusionSet.clear();
+    }
+  };
+
+  const fetchBulkParams = () => {
+    const selected = {
+      included: {
+        ids: [],
+        search: null,
+      },
+      excluded: {
+        ids: [],
+      },
+      all: false,
+    };
+
+    if (selectAllMode) {
+      selected.included.search = searchQuery;
+      selected.excluded.ids = [...exclusionSet];
+      selected.all = true;
+    } else if (!isEmpty(inclusionSet)) {
+      selected.included.ids = [...inclusionSet];
+    } else {
+      return {};
+    }
+    return selected;
+  };
+
+  const prevSearchRef = usePrevious({ searchQuery });
+
+  useEffect(() => {
+    // if search value changed and cleared from a string to empty value
+    // And it was select all -> then reset selections
+    if ((prevSearchRef && !isEmpty(prevSearchRef.searchQuery)) &&
+        isEmpty(searchQuery) && selectAllMode) {
+      selectNone();
+    }
+  }, [searchQuery, selectAllMode, prevSearchRef, selectNone]);
+
+  return {
+    ...selectOptions,
+    selectPage,
+    selectNone,
+    selectAll,
+    isSelected,
+    selectedCount,
+    fetchBulkParams,
+    searchQuery,
+    updateSearchQuery,
+    selectOne,
+    areAllRowsOnPageSelected,
+    areAllRowsSelected,
+  };
+};