katello 4.10.0 → 4.11.0.rc1

data/webpack/components/Table/TableHooks.js

@@ -1,315 +0,0 @@
-import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
-import { isEmpty } from 'lodash';
-import { useLocation } from 'react-router-dom';
-import { translate as __ } from 'foremanReact/common/I18n';
-import { friendlySearchParam } from '../../utils/helpers';
-
-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(Date.now());
-  // needed because mutating a Ref won't cause React to rerender
-  const forceRender = () => setToggle(Date.now());
-  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 = useMemo(() => results?.filter(result =>
-    isSelectable(result)) ?? [], [results, isSelectable]);
-  const selectedResults = useRef({}); // { id: result }
-  const canSelect = useCallback((id) => {
-    const selectableIds = new Set(selectableResults.map(result => result[idColumn]));
-    return selectableIds.has(id);
-  }, [idColumn, selectableResults]);
-  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 = () => {
-    const selectablePageIds = pageIds.filter(canSelect);
-    selectionSet.addAll(selectablePageIds);
-    // eslint-disable-next-line no-restricted-syntax
-    for (const result of selectableResults) {
-      selectedResults.current[result[idColumn]] = result;
-    }
-  };
-  const clearSelectedResults = () => {
-    selectedResults.current = {};
-  };
-  const selectNone = () => {
-    selectionSet.clear();
-    clearSelectedResults();
-  };
-  const selectOne = (isSelected, id, data) => {
-    if (canSelect(id)) {
-      if (isSelected) {
-        if (data) selectedResults.current[id] = data;
-        selectionSet.add(id);
-      } else {
-        delete selectedResults.current[id];
-        selectionSet.delete(id);
-      }
-    }
-  };
-
-  const selectedCount = selectionSet.size;
-
-  const isSelected = useCallback(id =>
-    canSelect(id) && selectionSet.has(id), [canSelect, selectionSet]);
-
-  return {
-    selectOne,
-    selectedCount,
-    areAllRowsOnPageSelected,
-    areAllRowsSelected,
-    selectPage,
-    selectNone,
-    isSelected,
-    isSelectable: canSelect,
-    selectionSet,
-    selectedResults: Object.values(selectedResults.current),
-    clearSelectedResults,
-  };
-};
-
-const usePrevious = (value) => {
-  const ref = useRef();
-  useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
-};
-
-export const useBulkSelect = ({
-  results,
-  metadata,
-  initialArry = [],
-  initialSearchQuery = '',
-  idColumn = 'id',
-  filtersQuery = '',
-  isSelectable,
-}) => {
-  const { selectionSet: inclusionSet, ...selectOptions } =
-    useSelectionSet({
-      results, metadata, initialArry, idColumn, isSelectable,
-    });
-  const exclusionSet = useSet([]);
-  const [searchQuery, updateSearchQuery] = useState(initialSearchQuery);
-  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 = useCallback((id) => {
-    if (!selectOptions.isSelectable(id)) {
-      return false;
-    }
-    if (selectAllMode) {
-      return !exclusionSet.has(id);
-    }
-    return inclusionSet.has(id);
-  }, [exclusionSet, inclusionSet, selectAllMode, selectOptions]);
-
-  const selectPage = () => {
-    setSelectAllMode(false);
-    selectOptions.selectPage();
-  };
-
-  const selectNone = useCallback(() => {
-    setSelectAllMode(false);
-    exclusionSet.clear();
-    inclusionSet.clear();
-    selectOptions.clearSelectedResults();
-  }, [exclusionSet, inclusionSet, selectOptions]);
-
-  const selectOne = (isRowSelected, id, data) => {
-    if (selectAllMode) {
-      if (isRowSelected) {
-        exclusionSet.delete(id);
-      } else {
-        exclusionSet.add(id);
-      }
-    } else {
-      selectOptions.selectOne(isRowSelected, id, data);
-    }
-  };
-
-  const selectAll = (checked) => {
-    setSelectAllMode(checked);
-    if (checked) {
-      exclusionSet.clear();
-    } else {
-      inclusionSet.clear();
-    }
-  };
-
-  const fetchBulkParams = (idColumnName = idColumn) => {
-    const searchQueryWithExclusionSet = () => {
-      const query = [searchQuery, filtersQuery,
-        !isEmpty(exclusionSet) && `${idColumnName} !^ (${[...exclusionSet].join(',')})`];
-      return query.filter(item => item).join(' and ');
-    };
-
-    const searchQueryWithInclusionSet = () => {
-      if (isEmpty(inclusionSet)) throw new Error('Cannot build a search query with no items selected');
-      return `${idColumnName} ^ (${[...inclusionSet].join(',')})`;
-    };
-
-    return selectAllMode ? searchQueryWithExclusionSet() : searchQueryWithInclusionSet();
-  };
-
-  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,
-    selectAllMode,
-    isSelected,
-    selectedCount,
-    fetchBulkParams,
-    searchQuery,
-    updateSearchQuery,
-    selectOne,
-    areAllRowsOnPageSelected,
-    areAllRowsSelected,
-  };
-};
-
-// takes a url query like ?type=security&search=name+~+foo
-// and returns an object
-// {
-//   type: 'security',
-//   searchParam: 'name ~ foo'
-// }
-export const useUrlParams = () => {
-  const location = useLocation();
-  const { search: urlSearchParam, ...urlParams }
-    = Object.fromEntries(new URLSearchParams(location.search).entries());
-  const searchParam = urlSearchParam ? friendlySearchParam(urlSearchParam) : '';
-  return {
-    searchParam,
-    ...urlParams,
-  };
-};
-
-export const useTableSort = ({
-  allColumns,
-  columnsToSortParams,
-  initialSortColumnName,
-}) => {
-  const translatedInitialSortColumnName = initialSortColumnName
-    ? __(initialSortColumnName)
-    : allColumns[0];
-  if (!Object.keys(columnsToSortParams).includes(translatedInitialSortColumnName)) {
-    throw new Error(`translatedInitialSortColumnName '${translatedInitialSortColumnName}' must also be defined in columnsToSortParams`);
-  }
-  const [activeSortColumn, setActiveSortColumn] = useState(translatedInitialSortColumnName);
-  const [activeSortDirection, setActiveSortDirection] = useState('asc');
-
-  if (!allColumns.includes(activeSortColumn)) {
-    setActiveSortColumn(translatedInitialSortColumnName);
-  }
-
-  // Patternfly sort function
-  const onSort = (_event, index, direction) => {
-    setActiveSortColumn(allColumns?.[index]);
-    setActiveSortDirection(direction);
-  };
-
-  // Patternfly sort params to pass to the <Th> component.
-  // (but you should probably just use <SortableColumnHeaders> instead)
-  const pfSortParams = (columnName, newSortColIndex) => ({
-    columnIndex: newSortColIndex ?? allColumns?.indexOf(columnName),
-    sortBy: {
-      defaultDirection: 'asc',
-      direction: activeSortDirection,
-      index: allColumns?.indexOf(activeSortColumn),
-    },
-    onSort,
-  });
-
-  return {
-    pfSortParams,
-    apiSortParams: { // scoped_search params to pass to the Katello API
-      sort_by: columnsToSortParams[activeSortColumn],
-      sort_order: activeSortDirection,
-    },
-    activeSortColumn, // state values to pass as additionalListeners
-    activeSortDirection,
-  };
-};

data/webpack/components/Table/__test__/useBulkSelect.test.js

@@ -1,99 +0,0 @@
-import { act, renderHook } from '@testing-library/react-hooks';
-import { useBulkSelect } from '../TableHooks';
-
-const isSelectable = () => true;
-const idColumn = 'errata_id';
-const metadata = {
-  error: null, selectable: 2, subtotal: 2, total: 2,
-};
-const results = [
-  {
-    errata_id: 'RHSA-2022:2031',
-    id: 311,
-    severity: 'Low',
-    type: 'security',
-  },
-  {
-    errata_id: 'RHSA-2022:2110',
-    id: 17,
-    severity: 'Low',
-    type: 'security',
-  },
-];
-
-it('returns a scoped search string based on inclusionSet', () => {
-  const { result } = renderHook(() => useBulkSelect({
-    results,
-    metadata,
-    idColumn,
-    isSelectable,
-  }));
-
-  act(() => {
-    result.current.selectOne(true, 'RHSA-2022:2031');
-  });
-
-  expect(result.current.fetchBulkParams()).toBe('errata_id ^ (RHSA-2022:2031)');
-});
-
-it('returns a scoped search string based on exclusionSet', () => {
-  const { result } = renderHook(() => useBulkSelect({
-    results,
-    metadata,
-    idColumn,
-    isSelectable,
-  }));
-
-  act(() => {
-    result.current.selectAll(true);
-  });
-
-  act(() => {
-    result.current.selectOne(false, 'RHSA-2022:2031');
-  });
-
-  expect(result.current.fetchBulkParams()).toBe('errata_id !^ (RHSA-2022:2031)');
-});
-
-it('adds search query to scoped search string based on exclusionSet', () => {
-  const { result } = renderHook(() => useBulkSelect({
-    results,
-    metadata,
-    idColumn,
-    isSelectable,
-  }));
-
-  act(() => {
-    result.current.updateSearchQuery('type=security');
-  });
-
-  act(() => {
-    result.current.selectAll(true);
-  });
-
-  act(() => {
-    result.current.selectOne(false, 'RHSA-2022:2031');
-  });
-
-  expect(result.current.fetchBulkParams()).toBe('type=security and errata_id !^ (RHSA-2022:2031)');
-});
-
-it('adds filter dropdown query to scoped search string', () => {
-  const { result } = renderHook(() => useBulkSelect({
-    results,
-    metadata,
-    idColumn,
-    isSelectable,
-    filtersQuery: 'severity=Low',
-  }));
-
-  act(() => {
-    result.current.selectAll(true);
-  });
-
-  act(() => {
-    result.current.selectOne(false, 'RHSA-2022:2031');
-  });
-
-  expect(result.current.fetchBulkParams()).toBe('severity=Low and errata_id !^ (RHSA-2022:2031)');
-});

data/webpack/components/extensions/RegistrationCommands/__tests__/LifeCycleEnvironment.test.js

@@ -1,11 +0,0 @@
-import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
-import LifecycleEnvironment from '../fields/LifecycleEnvironment';
-
-const fixtures = {
-  renders: {
-    pluginValues: {}, isLoading: false, onChange: () => {}, hostGroupEnvironment: '', lifecycleEnvironments: [],
-  },
-};
-
-describe('LifecycleEnvironment', () =>
-  testComponentSnapshotsWithFixtures(LifecycleEnvironment, fixtures));

data/webpack/components/extensions/RegistrationCommands/__tests__/__snapshots__/LifeCycleEnvironment.test.js.snap

@@ -1,29 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`LifecycleEnvironment renders 1`] = `
-<FormGroup
-  fieldId="reg_katello_lce"
-  helperText=""
-  label="Lifecycle environment"
->
-  <FormSelect
-    className="without_select2"
-    id="reg_katello_lce"
-    isDisabled={true}
-    isIconSprite={false}
-    isRequired={false}
-    onBlur={[Function]}
-    onChange={[Function]}
-    onFocus={[Function]}
-    ouiaId="reg-katello-lce"
-    ouiaSafe={true}
-    validated="default"
-    value=""
-  >
-    <FormSelectOption
-      label="No Lifecycle environment to select"
-      value=""
-    />
-  </FormSelect>
-</FormGroup>
-`;

data/webpack/components/extensions/RegistrationCommands/fields/LifecycleEnvironment.js

@@ -1,57 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import {
-  FormGroup,
-  FormSelectOption, FormSelect,
-} from '@patternfly/react-core';
-
-import { sprintf, translate as __ } from 'foremanReact/common/I18n';
-import { noop } from 'foremanReact/common/helpers';
-
-const LifecycleEnvironment = ({
-  pluginValues, onChange, isLoading,
-  hostGroupEnvironment, lifecycleEnvironments,
-}) => (
-  <FormGroup
-    label={__('Lifecycle environment')}
-    fieldId="reg_katello_lce"
-    helperText={hostGroupEnvironment && sprintf('From host group: %s', hostGroupEnvironment)}
-  >
-    <FormSelect
-      ouiaId="reg-katello-lce"
-      value={pluginValues?.lifecycleEnvironmentId}
-      onChange={v => onChange({ lifecycleEnvironmentId: v })}
-      className="without_select2"
-      id="reg_katello_lce"
-      isDisabled={isLoading || lifecycleEnvironments.length === 0}
-    >
-      <FormSelectOption
-        value=""
-        label={lifecycleEnvironments.length === 0 ? __('No Lifecycle environment to select') : ''}
-      />
-      {lifecycleEnvironments.map(lce => (
-        <FormSelectOption key={lce.id} value={lce.id} label={lce.name} />
-      ))}
-    </FormSelect>
-  </FormGroup>
-);
-
-LifecycleEnvironment.propTypes = {
-  pluginValues: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-  onChange: PropTypes.func,
-  hostGroupEnvironment: PropTypes.string,
-  lifecycleEnvironments: PropTypes.array, // eslint-disable-line react/forbid-prop-types
-  isLoading: PropTypes.bool,
-};
-
-LifecycleEnvironment.defaultProps = {
-  onChange: noop,
-  isLoading: false,
-  hostGroupEnvironment: '',
-  lifecycleEnvironments: [],
-  pluginValues: {},
-
-};
-
-export default LifecycleEnvironment;

data/webpack/scenes/SmartProxy/SmartProxyContentTable.js

@@ -1,164 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import useDeepCompareEffect from 'use-deep-compare-effect';
-import PropTypes from 'prop-types';
-import { useSelector, useDispatch } from 'react-redux';
-import { wrappable } from '@patternfly/react-table';
-import { CheckCircleIcon, TimesCircleIcon } from '@patternfly/react-icons';
-import { STATUS } from 'foremanReact/constants';
-import { translate as __ } from 'foremanReact/common/I18n';
-import { urlBuilder } from 'foremanReact/common/urlHelpers';
-import LongDateTime from 'foremanReact/components/common/dates/LongDateTime';
-import MainTable from '../../components/Table/MainTable';
-import getSmartProxyContent from './SmartProxyContentActions';
-import ContentViewIcon from '../../scenes/ContentViews/components/ContentViewIcon';
-import {
-  selectSmartProxyContent,
-  selectSmartProxyContentStatus,
-  selectSmartProxyContentError,
-} from './SmartProxyContentSelectors';
-
-const SmartProxyContentTable = ({ smartProxyId }) => {
-  const dispatch = useDispatch();
-  const [rows, setRows] = useState([]);
-  const response = useSelector(state => selectSmartProxyContent(state));
-  const status = useSelector(state => selectSmartProxyContentStatus(state));
-  const error = useSelector(state => selectSmartProxyContentError(state));
-  const columnHeaders = [
-    {
-      title: __('Environment'),
-      transforms: [wrappable],
-    },
-    {
-      title: __('Content view'),
-      transforms: [wrappable],
-    },
-    {
-      title: __('Type'),
-      transforms: [wrappable],
-    },
-    {
-      title: __('Last published'),
-      transforms: [wrappable],
-    },
-    {
-      title: __('Repositories'),
-      transforms: [wrappable],
-    },
-    {
-      title: __('Synced to smart proxy'),
-      transforms: [wrappable],
-    },
-  ];
-
-  const buildrows = (results) => {
-    const newRows = [];
-    let envCount = 0;
-    results.forEach((env) => {
-      const { name, content_views: contentViews } = env;
-      const cellEnv = {
-        isOpen: false,
-        cells: [name, null, null, null, null, null],
-      };
-      newRows.push(cellEnv);
-      contentViews.forEach((cv) => {
-        const {
-          id, name: cvName, composite, last_published: lastPublished, up_to_date: upToDate, counts,
-        } = cv;
-        const { repositories } = counts;
-        const cvType = <ContentViewIcon composite={composite} />;
-        const upToDateVal = upToDate ? <CheckCircleIcon /> : <TimesCircleIcon />;
-        const cellCv =
-          {
-            parent: envCount,
-            cells: [
-              {
-                title: null,
-                props: {
-                  colSpan: 1,
-                },
-              },
-              {
-                title: <a href={cv.default ? urlBuilder('products', '') : urlBuilder('content_views', '', id)}>{cvName}</a>,
-                props: {
-                  colSpan: 1,
-                },
-              },
-              {
-                title: cvType,
-                props: {
-                  colSpan: 1,
-                },
-              },
-              {
-                title: <LongDateTime date={lastPublished} showRelativeTimeTooltip />,
-                props: {
-                  colSpan: 1,
-                },
-              },
-              {
-                title: repositories,
-                props: {
-                  colSpan: 1,
-                },
-              },
-              {
-                title: upToDateVal,
-                props: {
-                  colSpan: 1,
-                },
-              },
-            ],
-          };
-        newRows.push(cellCv);
-      });
-      envCount = newRows.length;
-    });
-    return newRows;
-  };
-
-  const onCollapse = (row, setRow) => (event, rowKey, isOpen) => {
-    const newRows = [...row];
-    newRows[rowKey].isOpen = isOpen;
-    setRow(newRows);
-  };
-
-  useEffect(
-    () => {
-      dispatch(getSmartProxyContent({ smartProxyId }));
-    }
-    , [dispatch, smartProxyId],
-  );
-
-  useDeepCompareEffect(() => {
-    if (status !== STATUS.PENDING && response) {
-      const { lifecycle_environments: env } = response;
-      setRows(buildrows(env));
-    }
-  }, [response, status, error]);
-
-
-  return (
-    <MainTable
-      onCollapse={onCollapse(rows, setRows)}
-      ouiaId="smart-proxy-content-table"
-      status={status}
-      cells={columnHeaders}
-      rows={rows}
-      error={error}
-      emptyContentTitle="No content synced"
-      emptyContentBody="No content synced to smart proxy"
-      emptySearchTitle="Empty"
-      emptySearchBody="Empty"
-    />
-  );
-};
-
-SmartProxyContentTable.propTypes = {
-  smartProxyId: PropTypes.number,
-};
-
-SmartProxyContentTable.defaultProps = {
-  smartProxyId: null,
-};
-
-export default SmartProxyContentTable;