foreman_scc_manager 5.1.0 → 5.3.0

data/webpack/components/SCCAccountIndex/index.js

@@ -0,0 +1,262 @@
+import React, { useState, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import {
+  PageSection,
+  Modal,
+  Button,
+  Dropdown,
+  DropdownList,
+  DropdownItem,
+  MenuToggle,
+} from '@patternfly/react-core';
+import { Table, Thead, Tr, Th, Td, Tbody } from '@patternfly/react-table';
+import { EllipsisVIcon } from '@patternfly/react-icons';
+import { useDispatch } from 'react-redux';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { foremanUrl } from 'foremanReact/common/helpers';
+import { WARN_DELETE } from './SCCAccountIndexConstants';
+import {
+  syncSccAccountAction,
+  deleteSccAccountAction,
+} from './SCCAccountIndexActions';
+import './SCCAccountIndex.scss';
+
+function SccAccountsIndex({ initialAccounts }) {
+  const dispatch = useDispatch();
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [openMenuRow, setOpenMenuRow] = useState(null);
+  const [accounts, setAccounts] = useState(initialAccounts);
+  const [selectedAccountName, setSelectedAccountName] = useState(null);
+  const deletingIdRef = useRef(null);
+  const taskTimeoutRef = useRef({});
+  const lastStateRef = useRef({});
+
+  const handleSync = (accountId) => {
+    syncSccAccountAction(
+      dispatch,
+      accountId,
+      setAccounts,
+      taskTimeoutRef,
+      lastStateRef
+    );
+  };
+
+  const handleDelete = (id) => {
+    deleteSccAccountAction(
+      dispatch,
+      id,
+      setAccounts,
+      setDeleteOpen,
+      deletingIdRef
+    );
+  };
+
+  useEffect(
+    () => () => {
+      Object.values(taskTimeoutRef.current).forEach(clearTimeout);
+      taskTimeoutRef.current = {};
+    },
+    []
+  );
+
+  return (
+    <PageSection ouiaId="scc-accounts-index-page-section">
+      <div className="scc-account-add-container">
+        <Button
+          component="a"
+          href={foremanUrl('/scc_accounts/new')}
+          variant="primary"
+          ouiaId="scc-account-add-button"
+        >
+          {__('Add SCC account')}
+        </Button>
+      </div>
+
+      <Table
+        aria-label={__('SUSE subscriptions')}
+        ouiaId="scc-accounts-table"
+        variant="compact"
+      >
+        <Thead ouiaId="scc-accounts-table-head">
+          <Tr ouiaId="scc-accounts-table-header-row">
+            <Th ouiaId="scc-accounts-name-header">{__('Name')}</Th>
+            <Th ouiaId="scc-accounts-products-header">{__('Products')}</Th>
+            <Th ouiaId="scc-accounts-last-synced-header">
+              {__('Last synced')}
+            </Th>
+            <Th width={10} ouiaId="scc-accounts-actions-header">
+              {__('Actions')}
+            </Th>
+          </Tr>
+        </Thead>
+        <Tbody ouiaId="scc-accounts-table-body">
+          {accounts &&
+            accounts.map((acc) => {
+              const lastSynced = acc.sync_task ? (
+                <a
+                  target="_blank"
+                  href={foremanUrl(`/foreman_tasks/tasks/${acc.sync_task.id}`)}
+                  rel="noreferrer"
+                >
+                  {acc.sync_status}
+                </a>
+              ) : (
+                acc.sync_status || __('never synced')
+              );
+
+              return (
+                <Tr key={acc.id} ouiaId={`scc-account-row-${acc.id}`}>
+                  <Td
+                    dataLabel={__('Name')}
+                    ouiaId={`scc-account-name-${acc.id}`}
+                  >
+                    <a href={`/scc_accounts/${acc.id}/edit`}>{acc.name}</a>
+                  </Td>
+                  <Td
+                    dataLabel={__('Products')}
+                    ouiaId={`scc-account-products-${acc.id}`}
+                  >
+                    {acc.scc_products_with_repos_count}
+                  </Td>
+
+                  <Td
+                    dataLabel={__('Last synced')}
+                    ouiaId={`scc-account-last-synced-${acc.id}`}
+                  >
+                    {lastSynced}
+                  </Td>
+                  <Td
+                    dataLabel={__('Actions')}
+                    ouiaId={`scc-account-actions-${acc.id}`}
+                  >
+                    <div className="scc-account-actions">
+                      <Button
+                        variant="primary"
+                        size="sm"
+                        onClick={() => {
+                          window.location.href = `/scc_accounts/${acc.id}`;
+                        }}
+                        ouiaId={`scc-account-select-products-button-${acc.id}`}
+                      >
+                        {__('Select Products')}
+                      </Button>
+
+                      <Dropdown
+                        isOpen={openMenuRow === acc.id}
+                        onSelect={() => setOpenMenuRow(null)}
+                        onOpenChange={(isOpen) =>
+                          setOpenMenuRow(isOpen ? acc.id : null)
+                        }
+                        ouiaId={`scc-account-actions-dropdown-${acc.id}`}
+                        toggle={(toggleRef) => (
+                          <MenuToggle
+                            ref={toggleRef}
+                            aria-label={__('Actions menu')}
+                            variant="plain"
+                            isExpanded={openMenuRow === acc.id}
+                            onClick={() =>
+                              setOpenMenuRow(
+                                openMenuRow === acc.id ? null : acc.id
+                              )
+                            }
+                            ouiaId={`scc-account-actions-menu-toggle-${acc.id}`}
+                          >
+                            <EllipsisVIcon />
+                          </MenuToggle>
+                        )}
+                      >
+                        <DropdownList
+                          ouiaId={`scc-account-actions-dropdown-list-${acc.id}`}
+                        >
+                          <DropdownItem
+                            key="sync"
+                            isDisabled={
+                              acc.sync_status === 'running' ||
+                              acc.sync_status === 'planned'
+                            }
+                            onClick={() => {
+                              setOpenMenuRow(null);
+                              handleSync(acc.id);
+                            }}
+                            ouiaId={`scc-account-sync-item-${acc.id}`}
+                          >
+                            {acc.sync_status === 'running' ||
+                            acc.sync_status === 'planned'
+                              ? __('Syncing...')
+                              : __('Sync')}
+                          </DropdownItem>
+
+                          <DropdownItem
+                            key="delete"
+                            onClick={() => {
+                              setOpenMenuRow(null);
+                              deletingIdRef.current = acc.id;
+                              setDeleteOpen(true);
+                              setSelectedAccountName(acc.name);
+                            }}
+                            ouiaId={`scc-account-delete-item-${acc.id}`}
+                          >
+                            {__('Delete')}
+                          </DropdownItem>
+                        </DropdownList>
+                      </Dropdown>
+                    </div>
+                  </Td>
+                </Tr>
+              );
+            })}
+        </Tbody>
+      </Table>
+
+      <Modal
+        title={__('Delete SCC Account')}
+        isOpen={deleteOpen}
+        onClose={() => setDeleteOpen(false)}
+        variant="small"
+        ouiaId="scc-account-delete-modal"
+        actions={[
+          <Button
+            key="confirm"
+            variant="danger"
+            onClick={() => handleDelete(deletingIdRef.current)}
+            ouiaId="scc-account-delete-confirm-button"
+          >
+            {__('Delete')}
+          </Button>,
+          <Button
+            key="cancel"
+            variant="link"
+            onClick={() => setDeleteOpen(false)}
+            ouiaId="scc-account-delete-cancel-button"
+          >
+            {__('Cancel')}
+          </Button>,
+        ]}
+      >
+        <div className="scc-account-delete-warning">
+          {WARN_DELETE.replace('%acc_name', selectedAccountName || '')}
+        </div>
+      </Modal>
+    </PageSection>
+  );
+}
+
+SccAccountsIndex.propTypes = {
+  initialAccounts: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      name: PropTypes.string.isRequired,
+      sync_status: PropTypes.string,
+      sync_task: PropTypes.shape({
+        id: PropTypes.string,
+      }),
+      scc_products_with_repos_count: PropTypes.number,
+    })
+  ),
+};
+
+SccAccountsIndex.defaultProps = {
+  initialAccounts: [],
+};
+
+export default SccAccountsIndex;

data/webpack/components/SCCProductPage/EmptySccProducts.js

@@ -5,6 +5,7 @@ import { Button } from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
 import EmptyState from 'foremanReact/components/common/EmptyState';
 import { syncSccAccountAction } from './SCCProductPageActions';
+import './sccProductPage.scss';
 
 export const EmptySccProducts = ({ canCreate, sccAccountId }) => {
   const dispatch = useDispatch();
@@ -27,13 +28,15 @@ export const EmptySccProducts = ({ canCreate, sccAccountId }) => {
             'https://docs.orcharhino.com/or/docs/sources/usage_guides/managing_sles_systems_guide.html#mssg_adding_scc_accounts',
         }}
       />
-      <Button
-        onClick={onSyncStart}
-        ouiaId="scc-manager-welcome-sync-products"
-        className="btn btn-primary"
-      >
-        {__('Synchronize SUSE Account')}
-      </Button>
+      <div className="scc-sync-button-container">
+        <Button
+          onClick={onSyncStart}
+          ouiaId="scc-manager-welcome-sync-products"
+          className="btn btn-primary"
+        >
+          {__('Synchronize SUSE Account')}
+        </Button>
+      </div>
     </>
   );
 };

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

@@ -14,6 +14,7 @@ import {
 } from '@patternfly/react-core';
 import { TimesIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
+import '../../../SCCProductPicker/styles.scss';
 
 const GenericSelector = ({
   initialSelectOptions,
@@ -234,18 +235,31 @@ const GenericSelector = ({
       }}
       toggle={toggle}
       shouldFocusFirstItemOnOpen={false}
+      popperProps={{
+        direction: 'down',
+        appendTo: () => document.body,
+      }}
     >
-      <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
+        id={initialLabel.concat('select-typeahead-listbox')}
+        isAriaMultiselectable={false}
+        className="product-picker__select-list"
+      >
+        {selectOptions.length > 0 ? (
+          selectOptions.map((option, index) => (
+            <SelectOption
+              key={option.value || option.children}
+              isFocused={focusedItemIndex === index}
+              id={createItemId(option.value)}
+              className={option.className}
+              {...option}
+            />
+          ))
+        ) : (
+          <SelectOption isDisabled key="no-options">
+            {__('No options available')}
+          </SelectOption>
+        )}
       </SelectList>
     </Select>
   );

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

@@ -38,7 +38,7 @@ const setRepoSelection = (
       res = sccRepos.filter(
         (repo) =>
           (!repo.name.includes('Debug') &&
-            !repo.name.includes('Source-Pool') &&
+            !repo.name.includes('-Source') &&
             repo.katello_repository_id === null) ||
           repo.katello_repository_id !== null
       );

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

@@ -3,8 +3,13 @@
 .pf-v5-c-select__toggle {
   font-size: var(--pf-v5-global--FontSize--xs);
   font-weight: var(--pf-v5-global--FontWeight--bold);
-};
+}
 
 .pf-v5-c-switch__input ~ .pf-v5-c-switch__label {
-    font-size: var(--pf-v5-global--FontSize--xs);
-};
+  font-size: var(--pf-v5-global--FontSize--xs);
+}
+
+.product-picker__select-list {
+  max-height: 200px;
+  overflow-y: auto;
+}

data/webpack/components/SCCProductPage/sccProductPage.scss

@@ -6,3 +6,8 @@
   --pf-v5-c-tile--PaddingBottom: var(--pf-v5-global--spacer--xs);
   --pf-v5-c-tile--PaddingLeft: var(--pf-v5-global--spacer--xs);
 }
+
+.scc-sync-button-container {
+  display: flex;
+  justify-content: center;
+}

data/webpack/index.js

@@ -3,12 +3,18 @@ import injectReducer from 'foremanReact/redux/reducers/registerReducer';
 import SCCProductPage from './components/SCCProductPage';
 import reducer from './reducer';
 import SCCAccountForm from './components/SCCAccountForm';
+import SCCAccountIndex from './components/SCCAccountIndex';
 
 componentRegistry.register({
   name: 'SCCAccountForm',
   type: SCCAccountForm,
 });
 
+componentRegistry.register({
+  name: 'SCCAccountIndex',
+  type: SCCAccountIndex,
+});
+
 componentRegistry.register({
   name: 'SCCProductPage',
   type: SCCProductPage,

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: foreman_scc_manager
 version: !ruby/object:Gem::Version
-  version: 5.1.0
+  version: 5.3.0
 platform: ruby
 authors:
 - ATIX AG
 bindir: bin
 cert_chain: []
-date: 2025-10-15 00:00:00.000000000 Z
+date: 2026-02-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rdoc
@@ -203,6 +203,11 @@ files:
 - webpack/components/SCCAccountForm/components/SCCSyncSettingsCard.js
 - webpack/components/SCCAccountForm/components/SCCTokenRefreshCard.js
 - webpack/components/SCCAccountForm/index.js
+- webpack/components/SCCAccountIndex/SCCAccountIndex.scss
+- webpack/components/SCCAccountIndex/SCCAccountIndex.test.js
+- webpack/components/SCCAccountIndex/SCCAccountIndexActions.js
+- webpack/components/SCCAccountIndex/SCCAccountIndexConstants.js
+- webpack/components/SCCAccountIndex/index.js
 - webpack/components/SCCProductPage/EmptySccProducts.js
 - webpack/components/SCCProductPage/SCCProductPage.js
 - webpack/components/SCCProductPage/SCCProductPageActions.js
@@ -245,7 +250,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.6.9
+rubygems_version: 4.0.3
 specification_version: 4
 summary: Suse Customer Center plugin for Foreman
 test_files: