katello 4.4.2.2 → 4.5.0.rc1

data/webpack/components/extensions/HostDetails/Tabs/RepositorySetsTab/RepositorySetsActions.js

@@ -1,13 +1,16 @@
 import { translate as __ } from 'foremanReact/common/I18n';
-import { API_OPERATIONS, get, put } from 'foremanReact/redux/API';
-import katelloApi, { foremanApi } from '../../../../../services/api';
-import { REPOSITORY_SETS_KEY, CONTENT_OVERRIDES_KEY } from './RepositorySetsConstants';
-import { getResponseErrorMsgs } from '../../../../../utils/helpers';
+import {
+  API_OPERATIONS,
+  get,
+  put,
+} from 'foremanReact/redux/API';
+import { errorToast } from '../../../../../scenes/Tasks/helpers';
 
-const errorToast = (error) => {
-  const message = getResponseErrorMsgs(error.response);
-  return message;
-};
+import katelloApi, { foremanApi } from '../../../../../services/api';
+import {
+  CONTENT_OVERRIDES_KEY,
+  REPOSITORY_SETS_KEY,
+} from './RepositorySetsConstants';
 
 export const getHostRepositorySets = params => get({
   type: API_OPERATIONS.GET,
@@ -17,57 +20,33 @@ export const getHostRepositorySets = params => get({
   params,
 });
 
-export const enableRepoSetRepo = ({ hostId, labels, updateResults }) => put({
-  type: API_OPERATIONS.PUT,
-  key: CONTENT_OVERRIDES_KEY,
-  url: foremanApi.getApiUrl(`/hosts/${hostId}/subscriptions/content_override`),
-  params: {
-    content_overrides: labels.map(label => ({
-      content_label: label,
-      name: 'enabled',
-      value: true,
-    })),
-  },
-  updateData: () => {
-    updateResults({ labels, enabled: true });
-  },
-  successToast: () => (labels.length === 1 ? __('Repository set enabled') : __('Repository sets enabled')),
-  errorToast: error => errorToast(error),
-});
-
-export const disableRepoSetRepo = ({ hostId, labels, updateResults }) => put({
-  type: API_OPERATIONS.PUT,
-  key: CONTENT_OVERRIDES_KEY,
-  url: foremanApi.getApiUrl(`/hosts/${hostId}/subscriptions/content_override`),
-  params: {
-    content_overrides: labels.map(label => ({
-      content_label: label,
-      name: 'enabled',
-      value: false,
-    })),
-  },
-  updateData: () => {
-    updateResults({ labels, enabled: false });
-  },
-  successToast: () => (labels.length === 1 ? __('Repository set disabled') : __('Repository sets disabled')),
-  errorToast: error => errorToast(error),
-});
-
-export const resetRepoSetRepo = ({ hostId, labels, updateResults }) => put({
+export const setContentOverrides = ({
+  hostId,
+  search,
+  enabled,
+  remove = false,
+  updateResults,
+  singular,
+}) => put({
   type: API_OPERATIONS.PUT,
   key: CONTENT_OVERRIDES_KEY,
   url: foremanApi.getApiUrl(`/hosts/${hostId}/subscriptions/content_override`),
   params: {
-    content_overrides: labels.map(label => ({
-      content_label: label,
-      name: 'enabled',
-      value: false,
-      remove: true,
-    })),
+    content_overrides_search: {
+      search,
+      enabled,
+      remove,
+    },
   },
-  updateData: (_, resp) => {
-    updateResults({ labels, enabled: null, newResponse: resp });
+  updateData: (_, resp) => updateResults(resp),
+  successToast: () => {
+    if (enabled) {
+      return singular ? __('Repository set enabled') :
+        __('Repository sets enabled');
+    } else if (remove) {
+      return singular ? __('Repository set reset to default') : __('Repository sets reset to default');
+    }
+    return singular ? __('Repository set disabled') : __('Repository sets disabled');
   },
-  successToast: () => (labels.length === 1 ? __('Repository set reset to default') : __('Repository sets reset to default')),
   errorToast: error => errorToast(error),
 });

data/webpack/components/extensions/HostDetails/Tabs/RepositorySetsTab/RepositorySetsConstants.js

@@ -1,2 +1,22 @@
+import { translate as __ } from 'foremanReact/common/I18n';
+
 export const REPOSITORY_SETS_KEY = 'HOST_DETAIL_REPOSITORY_SETS';
 export const CONTENT_OVERRIDES_KEY = 'HOST_DETAIL_CONTENT_OVERRIDES';
+
+export const STATUSES = {
+  ENABLED: __('Enabled'),
+  DISABLED: __('Disabled'),
+  OVERRIDDEN: __('Overridden'),
+};
+
+export const STATUS_TO_PARAM = {
+  [STATUSES.ENABLED]: 'enabled',
+  [STATUSES.DISABLED]: 'disabled',
+  [STATUSES.OVERRIDDEN]: 'overridden',
+};
+
+export const PARAM_TO_FRIENDLY_NAME = {
+  enabled: __('Enabled'),
+  disabled: __('Disabled'),
+  overridden: __('Overridden'),
+};

data/webpack/components/extensions/HostDetails/Tabs/RepositorySetsTab/RepositorySetsTab.js

@@ -1,29 +1,64 @@
-import React, { useCallback, useState, useEffect } from 'react';
-import { FormattedMessage } from 'react-intl';
+import React, {
+  useCallback,
+  useEffect,
+  useState,
+  useMemo,
+} from 'react';
+
+import { propsToCamelCase } from 'foremanReact/common/helpers';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { selectAPIResponse } from 'foremanReact/redux/API/APISelectors';
 import PropTypes from 'prop-types';
-import { useSelector, useDispatch } from 'react-redux';
-import { Skeleton, ToggleGroup, ToggleGroupItem, Label, Tooltip, Alert, AlertActionCloseButton } from '@patternfly/react-core';
+import { FormattedMessage } from 'react-intl';
+import { STATUS } from 'foremanReact/constants';
+import {
+  useDispatch,
+  useSelector,
+} from 'react-redux';
+
+import {
+  ActionList,
+  ActionListItem,
+  Alert,
+  AlertActionCloseButton,
+  Dropdown,
+  DropdownItem,
+  KebabToggle,
+  Label,
+  Skeleton,
+  Split,
+  SplitItem,
+  ToggleGroup,
+  ToggleGroupItem,
+  Tooltip,
+} from '@patternfly/react-core';
+import { FlagIcon } from '@patternfly/react-icons';
 import {
   TableVariant,
-  Thead,
   Tbody,
-  Tr,
-  Th,
   Td,
+  Th,
+  Thead,
+  Tr,
 } from '@patternfly/react-table';
-import { FlagIcon } from '@patternfly/react-icons';
-import { translate as __ } from 'foremanReact/common/I18n';
-import { propsToCamelCase } from 'foremanReact/common/helpers';
-import { selectAPIResponse } from 'foremanReact/redux/API/APISelectors';
-import { STATUS } from 'foremanReact/constants';
+
+import {
+  useBulkSelect,
+  useTableSort,
+  useUrlParams,
+} from '../../../../../components/Table/TableHooks';
 import TableWrapper from '../../../../../components/Table/TableWrapper';
-import { enableRepoSetRepo, disableRepoSetRepo, resetRepoSetRepo, getHostRepositorySets } from './RepositorySetsActions';
-import { selectRepositorySetsStatus } from './RepositorySetsSelectors';
+import hostIdNotReady from '../../HostDetailsActions';
 import { selectHostDetailsStatus } from '../../HostDetailsSelectors.js';
-import { useBulkSelect, useUrlParams } from '../../../../../components/Table/TableHooks';
-import { REPOSITORY_SETS_KEY } from './RepositorySetsConstants.js';
+import {
+  getHostRepositorySets,
+  setContentOverrides,
+} from './RepositorySetsActions';
+import { REPOSITORY_SETS_KEY, STATUSES, STATUS_TO_PARAM, PARAM_TO_FRIENDLY_NAME } from './RepositorySetsConstants.js';
+import { selectRepositorySetsStatus } from './RepositorySetsSelectors';
 import './RepositorySetsTab.scss';
-import hostIdNotReady from '../../HostDetailsActions';
+import SortableColumnHeaders from '../../../../Table/components/SortableColumnHeaders';
+import SelectableDropdown from '../../../../SelectableDropdown';
 
 const getEnabledValue = ({ enabled, enabledContentOverride }) => {
   const isOverridden = (enabledContentOverride !== null);
@@ -68,6 +103,8 @@ const RepositorySetsTab = () => {
     subscription_status: subscriptionStatus,
     content_facet_attributes: contentFacetAttributes,
   } = hostDetails;
+  const STATUS_LABEL = __('Status');
+
   const contentFacet = propsToCamelCase(contentFacetAttributes ?? {});
   const {
     contentViewDefault,
@@ -75,48 +112,80 @@ const RepositorySetsTab = () => {
     contentViewName,
     lifecycleEnvironmentName,
   } = contentFacet;
-  const nonLibraryHost = contentViewDefault === false ||
+  const nonLibraryHost = contentViewDefault === false &&
     lifecycleEnvironmentLibrary === false;
   const simpleContentAccess = (Number(subscriptionStatus) === 5);
+  const [isBulkActionOpen, setIsBulkActionOpen] = useState(false);
+  const toggleBulkAction = () => setIsBulkActionOpen(prev => !prev);
   const dispatch = useDispatch();
-  const { searchParam, show } = useUrlParams();
+  const { searchParam, show, status: initialStatus } = useUrlParams();
+
   const toggleGroupStates = ['noLimit', 'limitToEnvironment'];
   const [noLimit, limitToEnvironment] = toggleGroupStates;
   const defaultToggleGroupState = nonLibraryHost ? limitToEnvironment : noLimit;
   const [toggleGroupState, setToggleGroupState] =
     useState(show ?? defaultToggleGroupState);
+  const [statusSelected, setStatusSelected]
+    = useState(PARAM_TO_FRIENDLY_NAME[initialStatus] ?? STATUS_LABEL);
+  const activeFilters = [statusSelected, toggleGroupState];
+  const defaultFilters = [STATUS_LABEL, defaultToggleGroupState];
+
   const [alertShowing, setAlertShowing] = useState(false);
   const emptyContentTitle = __('No repository sets to show.');
   const emptyContentBody = __('Repository sets will appear here when available.');
   const emptySearchTitle = __('No matching repository sets found');
   const emptySearchBody = __('Try changing your search query.');
-  const columnHeaders = [
+  const errorSearchTitle = __('Problem searching repository sets');
+  const columnHeaders = useMemo(() => [
     __('Repository'),
     __('Product'),
     __('Repository path'),
     __('Status'),
-  ];
+  ], []);
+
+  const COLUMNS_TO_SORT_PARAMS = {
+    [columnHeaders[0]]: 'name',
+    [columnHeaders[1]]: 'product',
+    [columnHeaders[3]]: 'enabled_by_default',
+  };
+
+  const {
+    pfSortParams, apiSortParams,
+    activeSortColumn, activeSortDirection,
+  } = useTableSort({
+    allColumns: columnHeaders,
+    columnsToSortParams: COLUMNS_TO_SORT_PARAMS,
+  });
+
   const fetchItems = useCallback(
-    params => (hostId ?
-      getHostRepositorySets({
+    (params) => {
+      if (!hostId) return hostIdNotReady;
+      const modifiedParams = { ...params };
+      if (statusSelected !== STATUS_LABEL) {
+        modifiedParams.status = STATUS_TO_PARAM[statusSelected];
+      }
+      return getHostRepositorySets({
         content_access_mode_env: toggleGroupState === limitToEnvironment,
         content_access_mode_all: simpleContentAccess,
         host_id: hostId,
-        ...params,
-      }) : hostIdNotReady),
-    [hostId, toggleGroupState, limitToEnvironment, simpleContentAccess],
+        ...apiSortParams,
+        ...modifiedParams,
+      });
+    },
+    [hostId, toggleGroupState, limitToEnvironment,
+      simpleContentAccess, apiSortParams, statusSelected, STATUS_LABEL],
   );
 
   const response = useSelector(state => selectAPIResponse(state, REPOSITORY_SETS_KEY));
-  const { results, ...metadata } = response;
+  const { results, error: errorSearchBody, ...metadata } = response;
   const status = useSelector(state => selectRepositorySetsStatus(state));
+  const repoSetSearchQuery = label => `cp_content_id = ${label}`;
   const {
     selectOne, isSelected, searchQuery, selectedCount, isSelectable,
     updateSearchQuery, selectNone, fetchBulkParams, ...selectAll
   } = useBulkSelect({
     results,
     metadata,
-    isSelectable: () => false,
     initialSearchQuery: searchParam || '',
   });
 
@@ -130,66 +199,130 @@ const RepositorySetsTab = () => {
   }, [hostDetailsStatus, nonLibraryHost]);
 
   if (!hostId) return <Skeleton />;
-
-  const updateResults = ({ labels, enabled, newResponse }) => dispatch({
+  const updateResults = newResponse => dispatch({
     type: `${REPOSITORY_SETS_KEY}_SUCCESS`,
     key: REPOSITORY_SETS_KEY,
     response: {
       ...response,
       results: results.map((result) => {
-        if (labels.includes(result.label)) {
-          const isEnabled = enabled === null ?
-            newResponse.results.find(r => r.id === result.id).enabled :
-            enabled;
-          return { ...result, enabled: isEnabled, enabled_content_override: enabled };
+        const {
+          enabled,
+          enabled_content_override: enabledContentOverride,
+        } = newResponse.results.find(r => r.id === result.id);
+        if (enabled !== null) {
+          return { ...result, enabled, enabled_content_override: enabledContentOverride };
         }
         return result;
       }),
     },
   });
-  const overrideToEnabled = ({ labels }) =>
-    dispatch(enableRepoSetRepo({ hostId, labels, updateResults }));
-  const overrideToDisabled = ({ labels }) =>
-    dispatch(disableRepoSetRepo({ hostId, labels, updateResults }));
-  const resetToDefault = ({ labels }) =>
-    dispatch(resetRepoSetRepo({ hostId, labels, updateResults }));
 
-  // uncomment (and remove rule disablement) when Select All is added
-  /* eslint-disable max-len */
-  // const dropdownItems = [
-  //   <DropdownItem aria-label="bulk_enable" key="bulk_enable" component="button" onClick={overrideToEnabled}>
-  //     {__('Override to enabled')}
-  //   </DropdownItem>,
-  //   <DropdownItem aria-label="bulk_disable" key="bulk_disable" component="button" onClick={overrideToDisabled}>
-  //     {__('Override to disabled')}
-  //   </DropdownItem>,
-  //   <DropdownItem aria-label="bulk_disable" key="bulk_disable" component="button" onClick={resetToDefault}>
-  //     {__('Reset to default')}
-  //   </DropdownItem>,
-  // ];
-  /* eslint-enable max-len */
+  const handleStatusSelected = newType => setStatusSelected((prevType) => {
+    if (prevType === newType) {
+      return STATUS_LABEL;
+    }
+    return newType;
+  });
 
-  let toggleGroup;
-  if (nonLibraryHost) {
-    toggleGroup = (
-      <ToggleGroup aria-label="Repository Set toggle">
-        <ToggleGroupItem
-          text={__('Show all')}
-          buttonId="no-limit-toggle"
-          aria-label="No limit"
-          isSelected={toggleGroupState === noLimit}
-          onChange={() => setToggleGroupState(noLimit)}
-        />
-        <ToggleGroupItem
-          text={__('Limit to environment')}
-          buttonId="limit-to-env-toggle"
-          aria-label="Limit to environment"
-          isSelected={toggleGroupState === limitToEnvironment}
-          onChange={() => setToggleGroupState(limitToEnvironment)}
+  const updateOverrides = ({
+    enabled, remove = false, search, singular = false,
+  }) => {
+    setIsBulkActionOpen(false);
+    selectNone();
+
+    dispatch(setContentOverrides({
+      hostId,
+      search,
+      enabled,
+      remove,
+      updateResults: resp => updateResults(resp),
+      singular: singular || selectedCount === 1,
+    }));
+  };
+  const bulkParams = () => fetchBulkParams('cp_content_id');
+  const enableRepoSets = () => updateOverrides({ enabled: true, search: bulkParams() });
+  const disableRepoSets = () => updateOverrides({ enabled: false, search: bulkParams() });
+  const resetToDefaultRepoSets = () => updateOverrides({ remove: true, search: bulkParams() });
+
+  const enableRepoSet = id => updateOverrides({
+    enabled: true,
+    search: repoSetSearchQuery(id),
+    singular: true,
+  });
+  const disableRepoSet = id => updateOverrides({
+    enabled: false,
+    search: repoSetSearchQuery(id),
+    singular: true,
+  });
+  const resetToDefaultRepoSet = id => updateOverrides({
+    remove: true,
+    search: repoSetSearchQuery(id),
+    singular: true,
+  });
+
+  const dropdownItems = [
+    <DropdownItem aria-label="bulk_enable" key="bulk_enable" component="button" onClick={enableRepoSets} isDisabled={selectedCount === 0}>
+      {__('Override to enabled')}
+    </DropdownItem>,
+    <DropdownItem aria-label="bulk_disable" key="bulk_disable" component="button" onClick={disableRepoSets} isDisabled={selectedCount === 0}>
+      {__('Override to disabled')}
+    </DropdownItem>,
+    <DropdownItem aria-label="bulk_reset_default" key="bulk_reset_default" component="button" onClick={resetToDefaultRepoSets} isDisabled={selectedCount === 0}>
+      {__('Reset to default')}
+    </DropdownItem>,
+  ];
+
+  const toggleGroup = (
+    <Split hasGutter>
+      {nonLibraryHost &&
+        <SplitItem>
+          <ToggleGroup aria-label="Repository Set toggle">
+            <ToggleGroupItem
+              text={__('Show all')}
+              buttonId="no-limit-toggle"
+              aria-label="No limit"
+              isSelected={toggleGroupState === noLimit}
+              onChange={() => setToggleGroupState(noLimit)}
+            />
+            <ToggleGroupItem
+              text={__('Limit to environment')}
+              buttonId="limit-to-env-toggle"
+              aria-label="Limit to environment"
+              isSelected={toggleGroupState === limitToEnvironment}
+              onChange={() => setToggleGroupState(limitToEnvironment)}
+            />
+          </ToggleGroup>
+        </SplitItem>
+      }
+      <SplitItem>
+        <SelectableDropdown
+          id="status-dropdown"
+          title={STATUS_LABEL}
+          showTitle={false}
+          items={Object.values(STATUSES)}
+          selected={statusSelected}
+          setSelected={handleStatusSelected}
         />
-      </ToggleGroup>
-    );
-  }
+      </SplitItem>
+    </Split>
+  );
+
+  const actionButtons = (
+    <Split hasGutter>
+      <SplitItem>
+        <ActionList isIconList>
+          <ActionListItem>
+            <Dropdown
+              toggle={<KebabToggle aria-label="bulk_actions" onToggle={toggleBulkAction} />}
+              isOpen={isBulkActionOpen}
+              isPlain
+              dropdownItems={dropdownItems}
+            />
+          </ActionListItem>
+        </ActionList>
+      </SplitItem>
+    </Split>
+  );
 
   const hostEnvText = 'the "{contentViewName}" content view and "{lifecycleEnvironmentName}" environment';
 
@@ -207,7 +340,6 @@ const RepositorySetsTab = () => {
   } else {
     alertText = nonScaAlert;
   }
-
   return (
     <div>
       <div id="repo-sets-tab">
@@ -247,41 +379,48 @@ const RepositorySetsTab = () => {
             metadata,
             emptyContentTitle,
             emptyContentBody,
-            emptySearchTitle,
-            emptySearchBody,
             status,
             searchQuery,
             updateSearchQuery,
             selectedCount,
             selectNone,
             toggleGroup,
+            actionButtons,
+            emptySearchTitle,
+            emptySearchBody,
+            activeFilters,
+            defaultFilters,
           }
           }
-          activeFilters={[toggleGroupState]}
-          defaultFilters={[defaultToggleGroupState]}
-          additionalListeners={[hostId, toggleGroupState]}
+          ouiaId="host-repository-sets-table"
+          errorSearchTitle={errorSearchTitle}
+          errorSearchBody={errorSearchBody}
+          additionalListeners={[hostId, toggleGroupState, statusSelected,
+            activeSortColumn, activeSortDirection]}
           fetchItems={fetchItems}
           autocompleteEndpoint="/repository_sets/auto_complete_search"
           bookmarkController="katello_product_contents" // Katello::ProductContent.table_name
           rowsCount={results?.length}
           variant={TableVariant.compact}
           {...selectAll}
-          displaySelectAllCheckbox={false}
+          displaySelectAllCheckbox
         >
           <Thead>
             <Tr>
               <Th key="select-all" />
-              {columnHeaders.map(col =>
-                <Th key={col}>{col}</Th>)}
+              <SortableColumnHeaders
+                columnHeaders={columnHeaders}
+                pfSortParams={pfSortParams}
+                columnsToSortParams={COLUMNS_TO_SORT_PARAMS}
+              />
               <Th />
               <Th key="action-menu" />
             </Tr>
           </Thead>
-          <>
+          <Tbody>
             {results?.map((repoSet, rowIndex) => {
               const {
                 id,
-                label,
                 content: { name: repoName },
                 enabled,
                 enabled_content_override: enabledContentOverride,
@@ -291,56 +430,54 @@ const RepositorySetsTab = () => {
               const { isEnabled, isOverridden } =
                 getEnabledValue({ enabled, enabledContentOverride });
               return (
-                <Tbody key={`${id}_${repoPath}`}>
-                  <Tr>
-                    <Td select={{
-                      disable: !isSelectable(id),
-                      isSelected: isSelected(id),
-                      onSelect: (event, selected) => selectOne(selected, id),
-                      rowIndex,
-                      variant: 'checkbox',
+                <Tr key={id}>
+                  <Td select={{
+                    disable: !isSelectable(id),
+                    isSelected: isSelected(id),
+                    onSelect: (event, selected) => selectOne(selected, id),
+                    rowIndex,
+                    variant: 'checkbox',
+                  }}
+                  />
+                  <Td>
+                    <span>{repoName}</span>
+                  </Td>
+                  <Td>
+                    <a href={`/products/${productId}`}>{productName}</a>
+                  </Td>
+                  <Td>
+                    <span>{repoPath}</span>
+                  </Td>
+                  <Td>
+                    <span><EnabledIcon key={`enabled-icon-${id}`} {...{ isEnabled, isOverridden }} /></span>
+                  </Td>
+                  <Td
+                    key={`rowActions-${id}`}
+                    actions={{
+                      items: [
+                        {
+                          title: __('Override to disabled'),
+                          isDisabled: isOverridden && !isEnabled,
+                          onClick: () => disableRepoSet(id),
+                        },
+                        {
+                          title: __('Override to enabled'),
+                          isDisabled: isOverridden && isEnabled,
+                          onClick: () => enableRepoSet(id),
+                        },
+                        {
+                          title: __('Reset to default'),
+                          isDisabled: !isOverridden,
+                          onClick: () => resetToDefaultRepoSet(id),
+                        },
+                      ],
                     }}
-                    />
-                    <Td>
-                      <span>{repoName}</span>
-                    </Td>
-                    <Td>
-                      <a href={`/products/${productId}`}>{productName}</a>
-                    </Td>
-                    <Td>
-                      <span>{repoPath}</span>
-                    </Td>
-                    <Td>
-                      <span><EnabledIcon key={`enabled-icon-${id}`} {...{ isEnabled, isOverridden }} /></span>
-                    </Td>
-                    <Td
-                      key={`rowActions-${id}`}
-                      actions={{
-                        items: [
-                          {
-                            title: __('Override to disabled'),
-                            isDisabled: isOverridden && !isEnabled,
-                            onClick: () => overrideToDisabled({ labels: [label] }),
-                          },
-                          {
-                            title: __('Override to enabled'),
-                            isDisabled: isOverridden && isEnabled,
-                            onClick: () => overrideToEnabled({ labels: [label] }),
-                          },
-                          {
-                            title: __('Reset to default'),
-                            isDisabled: !isOverridden,
-                            onClick: () => resetToDefault({ labels: [label] }),
-                          },
-                        ],
-                      }}
-                    />
-                  </Tr>
-                </Tbody>
+                  />
+                </Tr>
               );
             })
             }
-          </>
+          </Tbody>
         </TableWrapper>
       </div>
     </div>