foreman_scc_manager 4.0.0 → 5.0.0

data/webpack/components/SCCProductPage/components/SCCProductPicker/components/SCCGenericPicker/index.js

@@ -1,79 +1,267 @@
+// Reference: https://v5-archive.patternfly.org/components/menus/select#typeahead
+
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { ContextSelector, ContextSelectorItem } from '@patternfly/react-core';
+import {
+  Select,
+  SelectOption,
+  SelectList,
+  MenuToggle,
+  TextInputGroup,
+  TextInputGroupMain,
+  TextInputGroupUtilities,
+  Button,
+} from '@patternfly/react-core';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import { translate as __ } from 'foremanReact/common/I18n';
 
 const GenericSelector = ({
-  selectionItems,
-  setGlobalSelected,
-  screenReaderLabel,
+  initialSelectOptions,
+  setSelected,
   initialLabel,
+  selected,
+  inputValue,
+  setInputValue,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
-  const [selected, setSelected] = useState(initialLabel);
-  const [searchValue, setSearchValue] = useState('');
-  const [filteredItems, setFilteredItems] = useState(selectionItems);
+  const [filterValue, setFilterValue] = useState('');
+  const [selectOptions, setSelectOptions] = useState(
+    initialSelectOptions.map((option) => ({
+      children: option,
+      value: option,
+    }))
+  );
+  const [focusedItemIndex, setFocusedItemIndex] = useState(null);
+  const [activeItemId, setActiveItemId] = useState(null);
+  const NO_RESULTS = __('no results');
 
   useEffect(() => {
-    setFilteredItems(selectionItems);
-    setSelected(initialLabel);
-  }, [selectionItems, initialLabel]);
-
-  const onToggle = (selectorOpen) => {
-    setIsOpen(selectorOpen);
+    let newSelectOptions = initialSelectOptions.map((option) => ({
+      children: option,
+      value: option,
+    }));
+    if (filterValue) {
+      newSelectOptions = newSelectOptions.filter((menuItem) =>
+        String(menuItem.children)
+          .toLowerCase()
+          .includes(filterValue.toLowerCase())
+      );
+      if (!newSelectOptions.length) {
+        newSelectOptions = [
+          {
+            isAriaDisabled: true,
+            children: `No results found for "${filterValue}"`,
+            value: NO_RESULTS,
+          },
+        ];
+      }
+      if (!isOpen) {
+        setIsOpen(true);
+      }
+    }
+    setSelectOptions(newSelectOptions);
+  }, [filterValue, initialSelectOptions]);
+  const createItemId = (value) =>
+    `select-typeahead-${value?.replace(' ', '-')}`;
+  const setActiveAndFocusedItem = (itemIndex) => {
+    setFocusedItemIndex(itemIndex);
+    const focusedItem = selectOptions[itemIndex];
+    setActiveItemId(createItemId(focusedItem.value));
   };
-
-  const onSelect = (event, value) => {
-    setSelected(value);
-    setIsOpen(!isOpen);
-    setGlobalSelected(value);
+  const resetActiveAndFocusedItem = () => {
+    setFocusedItemIndex(null);
+    setActiveItemId(null);
   };
-
-  const onSearchInputChange = (value) => {
-    setSearchValue(value);
+  const closeMenu = () => {
+    setIsOpen(false);
+    resetActiveAndFocusedItem();
   };
-
-  const onSearchButtonClick = (event) => {
-    const filtered =
-      searchValue === ''
-        ? selectionItems
-        : selectionItems.filter((item) => {
-            const str = item.text ? item.text : item;
-            return str.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1;
-          });
-
-    setFilteredItems(filtered || []);
+  const onInputClick = () => {
+    if (!isOpen) {
+      setIsOpen(true);
+    } else if (!inputValue) {
+      closeMenu();
+    }
+  };
+  const selectOption = (value, content) => {
+    setInputValue(String(content));
+    setFilterValue('');
+    setSelected(String(value));
+    closeMenu();
   };
+  const onSelect = (_event, value) => {
+    if (value && value !== NO_RESULTS) {
+      const optionText = selectOptions.find((option) => option.value === value)
+        ?.children;
+      selectOption(value, optionText);
+    }
+  };
+  const onTextInputChange = (_event, value) => {
+    setInputValue(value);
+    setFilterValue(value);
+    resetActiveAndFocusedItem();
+    if (value !== selected) {
+      setSelected('');
+    }
+  };
+  const handleMenuArrowKeys = (key) => {
+    let indexToFocus = 0;
+    if (!isOpen) {
+      setIsOpen(true);
+    }
+    if (selectOptions.every((option) => option.isDisabled)) {
+      return;
+    }
+    if (key === 'ArrowUp') {
+      if (focusedItemIndex === null || focusedItemIndex === 0) {
+        indexToFocus = selectOptions.length - 1;
+      } else {
+        indexToFocus = focusedItemIndex - 1;
+      }
+      while (selectOptions[indexToFocus].isDisabled) {
+        indexToFocus--;
+        if (indexToFocus === -1) {
+          indexToFocus = selectOptions.length - 1;
+        }
+      }
+    }
+    if (key === 'ArrowDown') {
+      if (
+        focusedItemIndex === null ||
+        focusedItemIndex === selectOptions.length - 1
+      ) {
+        indexToFocus = 0;
+      } else {
+        indexToFocus = focusedItemIndex + 1;
+      }
+      while (selectOptions[indexToFocus].isDisabled) {
+        indexToFocus++;
+        if (indexToFocus === selectOptions.length) {
+          indexToFocus = 0;
+        }
+      }
+    }
+    setActiveAndFocusedItem(indexToFocus);
+  };
+  const onInputKeyDown = (event) => {
+    const focusedItem =
+      focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;
+    switch (event.key) {
+      case 'Enter':
+        if (
+          isOpen &&
+          focusedItem &&
+          focusedItem.value !== NO_RESULTS &&
+          !focusedItem.isAriaDisabled
+        ) {
+          selectOption(focusedItem.value, focusedItem.children);
+        }
+        if (!isOpen) {
+          setIsOpen(true);
+        }
+        break;
+      case 'ArrowUp':
+      case 'ArrowDown':
+        event.preventDefault();
+        handleMenuArrowKeys(event.key);
+        break;
+      default:
+        break;
+    }
+  };
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+  const onClearButtonClick = () => {
+    setSelected('');
+    setInputValue('');
+    setFilterValue('');
+    resetActiveAndFocusedItem();
+  };
+  const toggle = (toggleRef) => (
+    <MenuToggle
+      ref={toggleRef}
+      variant="typeahead"
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      isFullWidth
+    >
+      <TextInputGroup isPlain>
+        <TextInputGroupMain
+          value={inputValue}
+          onClick={onInputClick}
+          onChange={onTextInputChange}
+          onKeyDown={onInputKeyDown}
+          id={initialLabel.concat('typeahead-select-input')}
+          autoComplete="off"
+          placeholder={initialLabel}
+          {...(activeItemId && {
+            'aria-activedescendant': activeItemId,
+          })}
+          role="combobox"
+          isExpanded={isOpen}
+        />
 
+        <TextInputGroupUtilities
+          {...(!inputValue
+            ? {
+                style: {
+                  display: 'none',
+                },
+              }
+            : {})}
+        >
+          <Button
+            variant="plain"
+            ouiaId={initialLabel.concat('scc-product-picker-button')}
+            onClick={onClearButtonClick}
+          >
+            <TimesIcon aria-hidden />
+          </Button>
+        </TextInputGroupUtilities>
+      </TextInputGroup>
+    </MenuToggle>
+  );
   return (
-    <ContextSelector
-      toggleText={selected}
-      onSearchInputChange={onSearchInputChange}
+    <Select
+      id={initialLabel}
+      ouiaId={initialLabel.concat('scc-product-picker-select')}
       isOpen={isOpen}
-      searchInputValue={searchValue}
-      onToggle={onToggle}
+      selected={selected}
       onSelect={onSelect}
-      onSearchButtonClick={onSearchButtonClick}
-      screenReaderLabel={screenReaderLabel}
+      onOpenChange={(isOpenSelect) => {
+        !isOpenSelect && closeMenu();
+      }}
+      toggle={toggle}
+      shouldFocusFirstItemOnOpen={false}
     >
-      {filteredItems.map((item, index) => (
-        <ContextSelectorItem key={index}>
-          {item || 'no arch'}
-        </ContextSelectorItem>
-      ))}
-    </ContextSelector>
+      <SelectList id={initialLabel.concat('select-typeahead-listbox')}>
+        {selectOptions.map((option, index) => (
+          <SelectOption
+            key={option.value || option.children}
+            isFocused={focusedItemIndex === index}
+            id={createItemId(option.value)}
+            className={option.className}
+            {...option}
+            ref={null}
+          />
+        ))}
+      </SelectList>
+    </Select>
   );
 };
 
 GenericSelector.propTypes = {
-  selectionItems: PropTypes.array,
-  setGlobalSelected: PropTypes.func.isRequired,
-  screenReaderLabel: PropTypes.string,
+  initialSelectOptions: PropTypes.array,
   initialLabel: PropTypes.string,
+  selected: PropTypes.string.isRequired,
+  setSelected: PropTypes.func.isRequired,
+  inputValue: PropTypes.string.isRequired,
+  setInputValue: PropTypes.func.isRequired,
 };
 
 GenericSelector.defaultProps = {
-  selectionItems: [],
-  screenReaderLabel: '',
+  initialSelectOptions: [],
   initialLabel: '',
 };
 

data/webpack/components/SCCProductPage/components/SCCProductPicker/components/SCCTreePicker/components/SCCRepoPicker/index.js

@@ -1,16 +1,25 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { sprintf, translate as __ } from 'foremanReact/common/I18n';
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import {
+  Select,
+  SelectOption,
+  SelectList,
+  MenuToggle,
+} from '@patternfly/react-core';
 
 import './styles.scss';
 
-const createRepoSelectOption = (repo, disableRepos) => (
+const createRepoSelectOption = (repo, disableRepos, selectedItems) => (
   <SelectOption
+    hasCheckbox
     key={repo.id}
     isDisabled={repo.katello_repository_id !== null || disableRepos}
     value={repo.name}
-  />
+    isSelected={selectedItems.includes(repo.name)}
+  >
+    {repo.name}
+  </SelectOption>
 );
 
 const setRepoSelection = (
@@ -63,8 +72,9 @@ const SCCRepoPicker = ({
       productAlreadySynced
     )
   );
-  const onToggle = (toggle) => {
-    setIsOpen(toggle);
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
   };
 
   useEffect(() => {
@@ -135,21 +145,25 @@ const SCCRepoPicker = ({
   };
 
   const selectOptions = sccRepos.map((repo) =>
-    createRepoSelectOption(repo, disableRepos)
+    createRepoSelectOption(repo, disableRepos, selected)
+  );
+
+  const toggle = (toggleRef) => (
+    <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
+      {sprintf(__('%s/%s'), selected.length, sccRepos.length)}
+    </MenuToggle>
   );
 
   return (
     <Select
-      variant={SelectVariant.checkbox}
-      isCheckboxSelectionBadgeHidden
-      onToggle={onToggle}
+      ouiaId={sccProductId.toString().concat('scc-manager-repo-picker')}
+      toggle={toggle}
       onSelect={onSelect}
       selections={selected}
       isOpen={isOpen}
-      isDisabled={disableRepos}
-      placeholderText={sprintf(__('%s/%s'), selected.length, sccRepos.length)}
+      onOpenChange={(nextOpen) => setIsOpen(nextOpen)}
     >
-      {selectOptions}
+      <SelectList>{selectOptions}</SelectList>
     </Select>
   );
 };

data/webpack/components/SCCProductPage/components/SCCProductPicker/components/SCCTreePicker/components/SCCRepoPicker/styles.scss

@@ -1,3 +1,3 @@
-.pf-c-tree-view__node .pf-c-tree-view__node-count .pf-c-badge.pf-m-read {
-    --pf-c-badge--m-read--BackgroundColor: transparent;
+.pf-v5-c-tree-view__node .pf-v5-c-tree-view__node-count .pf-v5-c-badge.pf-m-read {
+    --pf-v5-c-badge--m-read--BackgroundColor: transparent;
  }

data/webpack/components/SCCProductPage/components/SCCProductPicker/components/SCCTreePicker/index.js

@@ -38,7 +38,7 @@ const addSCCRepoPickerToTree = (
 ) => {
   tree.customBadgeContent = [];
   tree.customBadgeContent.push(
-    <Tooltip content={__('Filter repositories')}>
+    <Tooltip aria="none" aria-live="polite" content={__('Filter repositories')}>
       <SCCRepoPicker
         sccRepos={tree.scc_repositories}
         disableRepos={tree.product_id === null && !tree.checkProps.checked}
@@ -234,7 +234,7 @@ const SCCTreePicker = ({
   };
 
   return (
-    <Card>
+    <Card ouiaId="scc-manager-product-picker-card">
       <CardBody>
         <Flex direction={{ default: 'column' }}>
           <Flex>
@@ -249,6 +249,7 @@ const SCCTreePicker = ({
               >
                 <Switch
                   id="filter-debug-switch"
+                  ouiaId="scc-manager-filter-debug-switch"
                   onChange={debugFilterChange}
                   isChecked={activateDebugFilter}
                   label={__('Include Debug and Source Pool repositories')}
@@ -261,13 +262,14 @@ const SCCTreePicker = ({
               data={sccProductTree}
               allExpanded={expandAll}
               onCheck={onCheck}
-              hasChecks
+              hasCheckboxes
               hasBadges
               hasGuides
             />
           </Flex>
           <Flex>
             <Button
+              ouiaId="scc-manager-add-products-button"
               variant="primary"
               onClick={submitForm}
               isDisabled={Object.keys(selectedRepos).length === 0}

data/webpack/components/SCCProductPage/components/SCCProductPicker/index.js

@@ -24,9 +24,6 @@ const resetSelectionStringArch = __(' -- Select Architecture --');
 const genericFilter = (object, comparator) =>
   // we can have architectures that are not set
   comparator === '' ||
-  comparator === resetSelectionStringProduct ||
-  comparator === resetSelectionStringVersion ||
-  comparator === resetSelectionStringArch ||
   object === comparator ||
   (object === null && comparator === 'no arch');
 
@@ -61,6 +58,9 @@ const SCCProductPicker = ({
   const [filteredSccProducts, setFilteredSccProducts] = useState([]);
   const [showSearchTree, setShowSearchTree] = useState(false);
   const [isExpanded, setIsExpanded] = useState(false);
+  const [searchInputProduct, setSearchInputProduct] = useState('');
+  const [searchInputVersion, setSearchInputVersion] = useState('');
+  const [searchInputArch, setSearchInputArch] = useState('');
 
   useEffect(() => {
     if (editProductId !== 0) {
@@ -78,10 +78,12 @@ const SCCProductPicker = ({
   }, [editProductId, sccProducts]);
 
   const onProductSelectionChange = (value) => {
-    if (value !== resetSelectionStringProduct) {
-      setVersionItems(filterVersionByProduct(sccProducts, value));
-    } else {
+    if (value === '') {
       setVersionItems([]);
+      setSearchInputVersion('');
+      setSearchInputArch('');
+    } else {
+      setVersionItems(filterVersionByProduct(sccProducts, value));
     }
     setSelectedProduct(value);
     setArchItems([]);
@@ -90,8 +92,9 @@ const SCCProductPicker = ({
   };
 
   const onVersionSelectionChange = (value) => {
-    if (value === resetSelectionStringVersion) {
+    if (value === '') {
       setArchItems([]);
+      setSearchInputArch('');
     } else {
       setArchItems(
         filterArchByVersionAndProduct(sccProducts, selectedProduct, value)
@@ -102,6 +105,9 @@ const SCCProductPicker = ({
   };
 
   const onArchSelectionChange = (value) => {
+    if (value === '') {
+      setArchItems([]);
+    }
     setSelectedArch(value);
   };
 
@@ -126,10 +132,20 @@ const SCCProductPicker = ({
     setSelectedProduct('');
     setSelectedVersion('');
     setSelectedArch('');
+    setVersionItems([]);
+    setArchItems([]);
+    setSearchInputProduct('');
+    setSearchInputVersion('');
+    setSearchInputArch('');
   };
 
   return (
-    <Card border="dark" id="product-selection-card" isExpanded={isExpanded}>
+    <Card
+      border="dark"
+      ouiaId="scc-manager-product-selection-card"
+      id="product-selection-card"
+      isExpanded={isExpanded}
+    >
       <CardHeader onExpand={onExpand}>
         <CardTitle>{__('Select SUSE products')}</CardTitle>
       </CardHeader>
@@ -139,62 +155,61 @@ const SCCProductPicker = ({
             <Flex>
               <FlexItem>
                 <SCCGenericPicker
-                  key="prod-select"
-                  selectionItems={
-                    selectedProduct === ''
-                      ? productItems
-                      : [resetSelectionStringProduct].concat(productItems)
-                  }
-                  setGlobalSelected={onProductSelectionChange}
-                  screenReaderLabel={resetSelectionStringProduct}
+                  key="scc-prod-select"
+                  initialSelectOptions={productItems}
+                  setSelected={onProductSelectionChange}
                   initialLabel={
                     selectedProduct === ''
                       ? resetSelectionStringProduct
                       : selectedProduct
                   }
+                  selected={selectedProduct}
+                  inputValue={searchInputProduct}
+                  setInputValue={setSearchInputProduct}
                 />
               </FlexItem>
               <FlexItem>
                 <SCCGenericPicker
-                  key="vers-select"
-                  selectionItems={
-                    selectedVersion === ''
-                      ? versionItems
-                      : [resetSelectionStringVersion].concat(versionItems)
-                  }
-                  setGlobalSelected={onVersionSelectionChange}
-                  screenReaderLabel={resetSelectionStringVersion}
+                  key="scc-vers-select"
+                  initialSelectOptions={versionItems}
+                  setSelected={onVersionSelectionChange}
                   initialLabel={
                     selectedVersion === ''
                       ? resetSelectionStringVersion
                       : selectedVersion
                   }
+                  selected={selectedVersion}
+                  inputValue={searchInputVersion}
+                  setInputValue={setSearchInputVersion}
                 />
               </FlexItem>
               <FlexItem>
                 <SCCGenericPicker
-                  key="arch-select"
-                  selectionItems={
-                    selectedArch === ''
-                      ? archItems
-                      : [resetSelectionStringArch].concat(archItems)
-                  }
-                  setGlobalSelected={onArchSelectionChange}
-                  screenReaderLabel={resetSelectionStringArch}
+                  key="scc-arch-select"
+                  initialSelectOptions={archItems}
+                  setSelected={onArchSelectionChange}
                   initialLabel={
                     selectedArch === ''
                       ? resetSelectionStringArch
                       : selectedArch
                   }
+                  selected={selectedArch}
+                  inputValue={searchInputArch}
+                  setInputValue={setSearchInputArch}
                 />
               </FlexItem>
               <FlexItem>
-                <Button variant="primary" onClick={filterProducts}>
+                <Button
+                  ouiaId="scc-manager-product-search-button"
+                  variant="primary"
+                  onClick={filterProducts}
+                >
                   {__('Search')}
                 </Button>
               </FlexItem>
               <FlexItem>
                 <Button
+                  ouiaId="scc-manager-product-search-reset-button"
                   variant="link"
                   icon={<TimesIcon />}
                   onClick={resetTreeForm}

data/webpack/components/SCCProductPage/components/SCCProductPicker/styles.scss

@@ -1,10 +1,10 @@
 @import '~@theforeman/vendor/scss/variables';
 
-.pf-c-select__toggle {
-  font-size: var(--pf-global--FontSize--xs);
-  font-weight: var(--pf-global--FontWeight--bold);
+.pf-v5-c-select__toggle {
+  font-size: var(--pf-v5-global--FontSize--xs);
+  font-weight: var(--pf-v5-global--FontWeight--bold);
 };
 
-.pf-c-switch__input ~ .pf-c-switch__label {
-    font-size: var(--pf-global--FontSize--xs);
+.pf-v5-c-switch__input ~ .pf-v5-c-switch__label {
+    font-size: var(--pf-v5-global--FontSize--xs);
 };

data/webpack/components/SCCProductPage/components/SCCProductPickerModal/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import ForemanModal from 'foremanReact/components/ForemanModal';
 
@@ -15,14 +15,14 @@ import {
 } from '@patternfly/react-core';
 
 const generateRepoList = (repoNames, productName) => (
-  <>
+  <Fragment key={productName}>
     <TextListItem key={productName}>{productName}</TextListItem>
     <TextList key={repoNames}>
       {repoNames.map((repo) => (
         <TextListItem key={repo}>{repo}</TextListItem>
       ))}
     </TextList>
-  </>
+  </Fragment>
 );
 
 const generateProductList = (reposToSubscribe) => (
@@ -41,12 +41,16 @@ const SCCProductPickerModal = ({ id, taskId, reposToSubscribe }) => (
       title={__('Summary of SCC product subscription')}
       enforceFocus
     >
-      <Card>
+      <Card ouiaId="scc-product-picker-modal">
         <CardBody>
           <TextContent key={taskId}>
-            <Text key={'modal1'.concat(taskId)}>
+            <Text
+              ouiaId={'modal1'.concat(taskId)}
+              key={'modal1'.concat(taskId)}
+            >
               {__('The subscription task with id ')}
               <Text
+                ouiaId={'modal2'.concat(taskId)}
                 key={'modal2'.concat(taskId)}
                 component={TextVariants.a}
                 target="_blank"
@@ -56,7 +60,10 @@ const SCCProductPickerModal = ({ id, taskId, reposToSubscribe }) => (
               </Text>
               {__(' has started successfully.')}
             </Text>
-            <Text key={'modal3'.concat(taskId)}>
+            <Text
+              ouiaId={'modal3'.concat(taskId)}
+              key={'modal3'.concat(taskId)}
+            >
               {__('The following products will be imported:')}
             </Text>
             {generateProductList(reposToSubscribe)}