foreman_scc_manager 4.0.1 → 5.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5307af5cb7f7122f8b8da70689196f3581fe1cc5f4c2f7d6cd1c810de9e31edf
-  data.tar.gz: 7ca7452f2537fc702da58bf28343bf3ccf22ae41e86b4a3b579eb68f5571e00d
+  metadata.gz: f5923a02d6b72dbf102333663649e450179368e8b0d6a1566b0d7d213d95109b
+  data.tar.gz: 86fd3c0181f90d5d2c216e10392b5923785424feb8a3b4c11d3a4cf1fe98ba20
 SHA512:
-  metadata.gz: 52ad207e5912f9f12413c108f0040e4aeb3c7489ad5b7d85e661d5272db07251d121455581ea63e0b8db7792d4b7d5583001772395cb3aa7b2c3643748bc0d4b
-  data.tar.gz: 69abae49566440f0720ef7b32dd655130826b570a014cbfc328ef6c26a9912bef1272c1337e8f66505a2f9e62bd7d273c216b8a18404a74ad66cdbf770013d82
+  metadata.gz: 75a87ef0e985142ddd8613158fe033c0ed2019657384877d405b337d53016d221db3e78d1db3ac87269bb91592d8044e0d60d264303b565e9e584295136c8016
+  data.tar.gz: 35702ad2e304588c68273bab350d12ec1e1c676b02a0767edeaecc75a9cc199c7087bd22970edddad76f10463c0602a957f3e0b647effc81ca3f040958781ced

data/app/views/scc_accounts/_form.html.erb

@@ -15,8 +15,8 @@
         <%= password_f f, :password %>
         <%= text_f f, :base_url, label: _('Base URL') %>
         <%= selectable_f f, :interval, SccAccount::TYPES, {},
-            { :label => _('Sync interval'), :help_block => _("The sync interval is used to periodically update the SCC authentication tokens of any imported products.") } %>
-        <%= field f, :sync_date, label: _('Sync Date') do
+            { :label => _('Token refresh interval'), :help_block => _("The token refresh interval is used to periodically update the SCC authentication tokens of any imported products.") } %>
+        <%= field f, :sync_date, label: _('Token refresh time'), :help_block => _("Specifies the daily time when the SCC authentication token refresh process starts. Set this to a time outside of business hours (e.g., during the night) to minimize disruption.") do
           f.datetime_field :sync_date, placeholder: Time.now
         end %>
        <%= selectable_f f, :katello_gpg_key_id, @selectable_gpg_keys, {},

data/lib/foreman_scc_manager/version.rb

@@ -1,3 +1,3 @@
 module ForemanSccManager
-  VERSION = '4.0.1'.freeze
+  VERSION = '5.0.1'.freeze
 end

data/package.json

@@ -22,16 +22,16 @@
   "devDependencies": {
     "@babel/core": "^7.7.0",
     "babel-eslint": ">= 10.0.3",
-    "@theforeman/builder": ">= 10.0",
-    "@theforeman/eslint-plugin-foreman": ">= 10.0",
-    "@theforeman/find-foreman": ">= 10.0",
-    "@theforeman/test": ">= 10.0",
-    "@theforeman/vendor-dev": ">= 10.0",
+    "@theforeman/builder": "^15.0.0",
+    "@theforeman/eslint-plugin-foreman": "^15.0.0",
+    "@theforeman/find-foreman": "^15.0.0",
+    "@theforeman/test": "^15.0.0",
+    "@theforeman/vendor-dev": "^15.0.0",
     "eslint": "^6.7.2",
     "eslint-plugin-spellcheck": ">= 0.0.17",
     "eslint-plugin-react": ">= 7.27.1",
     "eslint-plugin-react-hooks": ">= 4.3.0",
-    "prettier": "^2.5.1"
+    "prettier": "^1.19.1"
   },
   "keywords": [
     "SUSE",

data/webpack/components/SCCProductPage/EmptySccProducts.js

@@ -23,10 +23,15 @@ export const EmptySccProducts = ({ canCreate, sccAccountId }) => {
         header={__('SUSE Customer Center')}
         description={<div dangerouslySetInnerHTML={{ __html: content }} />}
         documentation={{
-          url: 'https://docs.orcharhino.com/or/docs/sources/usage_guides/managing_sles_systems_guide.html#mssg_adding_scc_accounts',
+          url:
+            'https://docs.orcharhino.com/or/docs/sources/usage_guides/managing_sles_systems_guide.html#mssg_adding_scc_accounts',
         }}
       />
-      <Button onClick={onSyncStart} className="btn btn-primary">
+      <Button
+        onClick={onSyncStart}
+        ouiaId="scc-manager-welcome-sync-products"
+        className="btn btn-primary"
+      >
         {__('Synchronize SUSE Account')}
       </Button>
     </>

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';
+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)}

data/webpack/components/SCCProductPage/components/SCCProductView/components/SCCRepoView/index.js

@@ -5,10 +5,11 @@ import { sprintf, translate as __ } from 'foremanReact/common/I18n';
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import {
+  Tooltip,
   Dropdown,
   DropdownItem,
-  BadgeToggle,
-  Tooltip,
+  DropdownList,
+  MenuToggle,
 } from '@patternfly/react-core';
 import { Icon } from 'patternfly-react';
 import { BrowserRouter, Link } from 'react-router-dom';
@@ -20,7 +21,10 @@ const createKatelloRepoLink = (repo, sccProductId) => {
     `/products/${sccProductId}/repositories/${repo.katello_repository_id}`
   );
   return (
-    <Tooltip content={__('Go to Repository page')}>
+    <Tooltip
+      key={'scc-manager-repo-view-tooltip-'.concat(repo.id)}
+      content={__('Go to Repository page')}
+    >
       <BrowserRouter>
         <Link to={url} target="_blank">
           {repo.name}
@@ -33,18 +37,25 @@ const createKatelloRepoLink = (repo, sccProductId) => {
 const createRepoDropDownItem = (repo, sccProductId) => (
   <DropdownItem
     key={repo.id}
+    ouiaId={repo.id}
     component="button"
     icon={
       repo.subscription_valid ? (
         repo.katello_repository_id !== null ? (
           <Icon name="check" type="fa" />
         ) : (
-          <Tooltip content={__('Repository not imported')}>
+          <Tooltip
+            key={'scc-manager-repo-link-tooltip-'.concat(repo.id)}
+            content={__('Repository not imported')}
+          >
             <Icon name="ban" type="fa" />
           </Tooltip>
         )
       ) : (
-        <Tooltip content={__('Please check your SUSE subscription')}>
+        <Tooltip
+          key={'scc-manager-repo-link-tooltip-'.concat(repo.id)}
+          content={__('Please check your SUSE subscription')}
+        >
           <Icon name="warning-triangle-o" type="pf" size="2x" />
         </Tooltip>
       )
@@ -58,8 +69,8 @@ const createRepoDropDownItem = (repo, sccProductId) => (
 
 const SCCRepoView = ({ sccRepos, sccProductId }) => {
   const [isOpen, setIsOpen] = useState(false);
-  const onToggle = (toggle) => {
-    setIsOpen(toggle);
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
   };
 
   const onFocus = () => {
@@ -70,7 +81,7 @@ const SCCRepoView = ({ sccRepos, sccProductId }) => {
   };
 
   const onSelect = (event) => {
-    setIsOpen(!isOpen);
+    setIsOpen(false);
     onFocus();
   };
 
@@ -78,25 +89,27 @@ const SCCRepoView = ({ sccRepos, sccProductId }) => {
     createRepoDropDownItem(repo, sccProductId)
   );
 
+  const toggle = (toggleRef) => (
+    <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
+      {sprintf(
+        __('Repositories (%s/%s)'),
+        sccRepos.filter((r) => r.katello_repository_id !== null).length,
+        sccRepos.length
+      )}
+    </MenuToggle>
+  );
+
   return (
     <Dropdown
+      ouiaId={sccProductId?.toString().concat('scc-manager-repo-view')}
+      onClick={onToggleClick}
       onSelect={onSelect}
-      toggle={
-        <BadgeToggle
-          id={sprintf('scc-repo-show-toggle-id-%s', sccProductId)}
-          key={sprintf('scc-repo-show-toggle-id-%s', sccProductId)}
-          onToggle={onToggle}
-        >
-          {sprintf(
-            __('Repositories (%s/%s)'),
-            sccRepos.filter((r) => r.katello_repository_id !== null).length,
-            sccRepos.length
-          )}
-        </BadgeToggle>
-      }
+      toggle={toggle}
       isOpen={isOpen}
-      dropdownItems={dropdownItems}
-    />
+      onOpenChange={(isOpenMenu) => setIsOpen(isOpenMenu)}
+    >
+      <DropdownList>{dropdownItems}</DropdownList>
+    </Dropdown>
   );
 };
 

data/webpack/components/SCCProductPage/components/SCCProductView/components/SCCRepoView/styles.scss

@@ -1,14 +1,14 @@
-.pf-c-button.pf-m-plain {
-  --pf-c-button--PaddingTop: var(--pf-global--spacer--xs);
-  --pf-c-button--PaddingRight: var(--pf-global--spacer--sm);
-  --pf-c-button--PaddingBottom: var(--pf-global--spacer--xs);
-  --pf-c-button--PaddingLeft: var(--pf-global--spacer--sm);
+.pf-v5-c-button.pf-m-plain {
+  --pf-v5-c-button--PaddingTop: var(--pf-v5-global--spacer--xs);
+  --pf-v5-c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-button--PaddingBottom: var(--pf-v5-global--spacer--xs);
+  --pf-v5-c-button--PaddingLeft: var(--pf-v5-global--spacer--sm);
 }
 
-.pf-c-dropdown__toggle::before {
-  --pf-c-button--PaddingTop: var(--pf-global--spacer--xs);
-  --pf-c-button--PaddingRight: var(--pf-global--spacer--xs);
-  --pf-c-button--PaddingBottom: var(--pf-global--spacer--xs);
-  --pf-c-button--PaddingLeft: var(--pf-global--spacer--xs);
+.pf-v5-c-dropdown__toggle::before {
+  --pf-v5-c-button--PaddingTop: var(--pf-v5-global--spacer--xs);
+  --pf-v5-c-button--PaddingRight: var(--pf-v5-global--spacer--xs);
+  --pf-v5-c-button--PaddingBottom: var(--pf-v5-global--spacer--xs);
+  --pf-v5-c-button--PaddingLeft: var(--pf-v5-global--spacer--xs);
 }
 

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

@@ -33,7 +33,13 @@ const addKatelloLinkToTree = (tree) => {
     <BrowserRouter>
       <Link to={url} target="_blank">
         <Tooltip content={__('Go to Product page')}>
-          <Button variant="plain" id="tt-ref">
+          <Button
+            ouiaId={tree.product_id
+              .toString()
+              .concat('scc-manager-product-page-link')}
+            variant="plain"
+            id="tt-ref"
+          >
             <Icon name="external-link" type="fa" />
           </Button>
         </Tooltip>
@@ -45,8 +51,14 @@ const addKatelloLinkToTree = (tree) => {
 
 const addEditIcon = (tree, editProductTree) => {
   tree.customBadgeContent.push(
-    <Tooltip content={__('Add more sub products to Product tree')}>
+    <Tooltip
+      key={'scc-manager-add-sub-tooltip'.concat(tree.id.toString())}
+      content={__('Add more sub products to Product tree')}
+    >
       <Button
+        ouiaId={tree.id
+          .toString()
+          .concat('scc-manager-add-sub-products-button')}
         variant="plain"
         id={tree.id.toString()}
         onClick={(evt) => editProductTree(evt, tree.id)}
@@ -61,7 +73,10 @@ const addEditIcon = (tree, editProductTree) => {
 
 const addReposToTree = (tree) => {
   tree.customBadgeContent.push(
-    <Tooltip content={__('Show currently added repositories')}>
+    <Tooltip
+      key="scc-manager-repoview-show-repos-tooltip"
+      content={__('Show currently added repositories')}
+    >
       <SCCRepoView
         sccRepos={tree.scc_repositories}
         sccProductId={tree.product_id}
@@ -74,7 +89,10 @@ const addReposToTree = (tree) => {
 const addValidationStatusToTree = (tree) => {
   tree.customBadgeContent.push(
     <Tooltip content={__('Please check your SUSE subscription')}>
-      <Button variant="plain">
+      <Button
+        ouiaId="scc-manager-check-suse-subscription-button"
+        variant="plain"
+      >
         <Icon name="warning-triangle-o" type="pf" size="2x" />
       </Button>
     </Tooltip>
@@ -157,7 +175,7 @@ const SCCProductView = ({
   };
 
   return (
-    <Card>
+    <Card ouiaId="scc-manager-select-suse-products-card">
       <CardTitle>{__('Selected SUSE Products')}</CardTitle>
       {sccProducts.length > 0 && (
         <CardBody>
@@ -173,7 +191,7 @@ const SCCProductView = ({
             <TreeView
               data={showAll ? allProducts : subscribedProducts}
               allExpanded={expandAll}
-              hasChecks
+              hasCheckboxes
               hasBadges
               hasGuides
             />
@@ -190,7 +208,7 @@ const SCCProductView = ({
       <Flex>
         {sccProducts.length > 0 && (
           <FlexItem>
-            <Button variant="link">
+            <Button ouiaId="scc-manager-show-all-tasks-button" variant="link">
               <BrowserRouter>
                 <Link
                   to="/foreman_tasks/tasks/?search=Subscribe+SCC+Product"
@@ -204,7 +222,7 @@ const SCCProductView = ({
         )}
         {subscriptionTaskId !== '' && (
           <FlexItem>
-            <Button variant="link">
+            <Button ouiaId="scc-manager-show-last-task-button" variant="link">
               <BrowserRouter>
                 <Link
                   to={sprintf('/foreman_tasks/tasks/%s', subscriptionTaskId)}

data/webpack/components/SCCProductPage/components/common/SCCGenericExpander/SCCGenericExpander.test.js

@@ -34,8 +34,8 @@ describe('SCCGenericExpander', () => {
     // Select
     const select = wrapper.find('Select');
     expect(select.exists()).toBe(true);
-    expect(select.props()).toHaveProperty('selections');
-    expect(select.prop('selections')).toContain('open/close');
+    expect(select.props()).toHaveProperty('selected');
+    expect(select.prop('selected')).toContain('open/close');
 
     // SelectOptions
     const selectOptions = wrapper.find('SelectOption');

data/webpack/components/SCCProductPage/components/common/SCCGenericExpander/index.js

@@ -1,6 +1,13 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Flex, FlexItem, Select, SelectOption } from '@patternfly/react-core';
+import {
+  Flex,
+  FlexItem,
+  Select,
+  SelectList,
+  MenuToggle,
+  SelectOption,
+} from '@patternfly/react-core';
 
 const SCCGenericExpander = ({
   setInParent,
@@ -11,12 +18,14 @@ const SCCGenericExpander = ({
   const [label, setLabel] = useState(initLabel);
   const [isOpen, setIsOpen] = useState(false);
 
-  const options = [
-    <SelectOption key={0} value={selectOptionOpen} />,
-    <SelectOption key={1} value={selectOptionClose} />,
-  ];
+  const options = (
+    <SelectList>
+      <SelectOption value={selectOptionOpen}>{selectOptionOpen}</SelectOption>
+      <SelectOption value={selectOptionClose}>{selectOptionClose}</SelectOption>
+    </SelectList>
+  );
 
-  const onSelect = (evt, selection) => {
+  const onSelect = (_evt, selection) => {
     if (selection === selectOptionOpen) {
       setInParent(true);
     } else {
@@ -26,18 +35,27 @@ const SCCGenericExpander = ({
     setIsOpen(false);
   };
 
-  const onToggle = (isOpenSelect) => {
-    setIsOpen(isOpenSelect);
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
   };
 
+  const toggle = (toggleRef) => (
+    <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
+      {label}
+    </MenuToggle>
+  );
+
   return (
     <Flex>
       <FlexItem>
         <Select
-          onToggle={onToggle}
+          ouiaId={initLabel.concat('scc-manager-generic-expander-select')}
+          toggle={toggle}
           onSelect={onSelect}
-          selections={label}
+          selected={label}
           isOpen={isOpen}
+          onOpenChange={(nextOpen) => setIsOpen(isOpen)}
+          shouldFocusToggleOnSelect
         >
           {options}
         </Select>

data/webpack/components/SCCProductPage/sccProductPage.scss

@@ -1,8 +1,8 @@
 @import '~@theforeman/vendor/scss/variables';
 
-.pf-c-tile {
-  --pf-c-tile--PaddingTop: var(--pf-global--spacer--xs);
-  --pf-c-tile--PaddingRight: var(--pf-global--spacer--xs);
-  --pf-c-tile--PaddingBottom: var(--pf-global--spacer--xs);
-  --pf-c-tile--PaddingLeft: var(--pf-global--spacer--xs);
+.pf-v5-c-tile {
+  --pf-v5-c-tile--PaddingTop: var(--pf-v5-global--spacer--xs);
+  --pf-v5-c-tile--PaddingRight: var(--pf-v5-global--spacer--xs);
+  --pf-v5-c-tile--PaddingBottom: var(--pf-v5-global--spacer--xs);
+  --pf-v5-c-tile--PaddingLeft: var(--pf-v5-global--spacer--xs);
 }

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: foreman_scc_manager
 version: !ruby/object:Gem::Version
-  version: 4.0.1
+  version: 5.0.1
 platform: ruby
 authors:
 - ATIX AG
 bindir: bin
 cert_chain: []
-date: 2025-05-08 00:00:00.000000000 Z
+date: 2025-08-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rdoc
@@ -254,7 +254,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.6.7
+rubygems_version: 3.6.9
 specification_version: 4
 summary: Suse Customer Center plugin for Foreman
 test_files: