foreman_scc_manager 5.1.0 → 5.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 66db45e88535e30e524e6d0feeaea5b3c8201114d7f3f7186de0d5ac433a32e4
-  data.tar.gz: b2c384f798b80b401b6b2c9d485af93fcab9bff0c3f5d3fd6e4e2b8f0fdadc21
+  metadata.gz: 4712a817369b23dadf22e9d9e0590e89b671d0f2fd80e4dd815f520dd116ab99
+  data.tar.gz: 86222d85800bd462624453f0c3740c1f420465806d7a4d6504f6bf9a41dd0585
 SHA512:
-  metadata.gz: 0f6fb512bb9b69e28280d0936e60dd2d8d08425985ea38a5cf3a236cc368bc6d627d5f0deec659e544d52fb58746f8f75b1a3cedaa3c068acb297d191429266e
-  data.tar.gz: bc2ba0220c793b06eea16239fe585fbec3613ae847f0db6f918e39cbc0d4a09193c29eceb8c2eeeff33f15152954bc639205ef33e5b7fe10b12d08a303f9c288
+  metadata.gz: 33c055ee8e13998d7e9c7742c25f48942002e329d22dae4a382c7cd69501401407e400c0dcf5bb57898a2f9d0b6b8705a7c39f4b2eccbc790be3c9a32152cf9e
+  data.tar.gz: 6e9b07ca8d97f35653d9d21fa68ba28ab64baff7c3f13731b8f9fde03c90b88c981f9e51c6ebbe66ea37fccefedc9337e174f94501396895da0868fa7ec91366

data/app/controllers/scc_accounts_controller.rb

@@ -4,13 +4,10 @@ class SccAccountsController < ApplicationController
   before_action :find_organization
   before_action :find_resource, only: %i[show edit update destroy sync]
   before_action :find_available_gpg_keys, only: %i[new edit update create]
-  include Foreman::Controller::AutoCompleteSearch
 
   # GET /scc_accounts
   def index
     @scc_accounts = resource_base.where(organization: @organization)
-                                 .search_for(params[:search], order: params[:order])
-                                 .paginate(:page => params[:page], :per_page => params[:per_page])
     # overwrite the product list with filtered products that do not include products with empty repositories
     @scc_accounts.each do |scc_account|
       scc_account.scc_products_with_repos_count = scc_account.scc_products.only_products_with_repos.count

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

@@ -1,37 +1,18 @@
-<% javascript 'foreman_scc_manager/scc_accounts'  %>
 <% title _("SUSE subscriptions") %>
-<% title_actions new_link(_("Add SCC account")) %>
 
-<table class="<%= table_css_classes 'table-two-pane table_fixed' %>">
-  <thead>
-    <tr>
-      <th class="col-md-4"><%= sort :name %></th>
-      <th class="col-md-3"><%= _("Products") %></th>
-      <th class="col-md-3"><%= _("Last synced") %></th>
-      <th class="col-md-2"><%= _("Actions") %></th>
-    </tr>
-  </thead>
-  <tbody>
-    <% @scc_accounts.each do |scc_account| %>
-      <tr>
-        <td class="display-two-pane ellipsis">
-          <%= link_to_if_authorized(scc_account.name, hash_for_edit_scc_account_path(:id => scc_account).merge(:auth_object => scc_account, :authorizer => authorizer)) %>
-        </td>
-        <td><%= scc_account.scc_products_with_repos_count.to_s %></td>
-        <td><%= link_to_if(scc_account.sync_task, scc_account.sync_status, scc_account.sync_task) %></td>
-        <td>
-          <%= action_buttons(
-            display_link_if_authorized(_("Select products"), hash_for_scc_account_path(:id => scc_account).merge(:auth_object => scc_account, :authorizer => authorizer, :permission => 'view_scc_accounts')),
-            display_link_if_authorized(_("Sync"), hash_for_sync_scc_account_path(:id => scc_account).merge(:auth_object => scc_account, :authorizer => authorizer),
-                                       :method => :put),
-            display_delete_if_authorized(hash_for_scc_account_path(:id => scc_account).merge(:auth_object => scc_account, :authorizer => authorizer, :permission => 'delete_scc_accounts'),
-                                         :data => { :confirm => _("WARNING: If you want to switch SCC accounts and retain the synchronized content, DO NOT delete your old SCC account, even if it is expired. Please change the login and password of your SCC account, instead.\n\nIf you delete your old SCC account, you CANNOT reuse existing repositories, products, content views, and composite content views.\n\nReally delete SCC account %s?") % scc_account.to_s })
+<%= webpacked_plugins_js_for :foreman_scc_manager %>
+<%= webpacked_plugins_css_for :foreman_scc_manager %>
 
-          ) %>
-        </td>
-      </tr>
-    <% end %>
-  </tbody>
-</table>
+<% initial_accounts = @scc_accounts.map do |a|
+  {
+    id: a.id,
+    name: a.name,
+    scc_products_with_repos_count: a.scc_products_with_repos_count,
+    sync_status: a.sync_status,
+    sync_task: a.sync_task
+  }
+end %>
+<%= react_component('SCCAccountIndex', {
+  initialAccounts: initial_accounts,
+}) %>
 
-<%= will_paginate_with_info @scc_accounts %>

data/lib/foreman_scc_manager/version.rb

@@ -1,3 +1,3 @@
 module ForemanSccManager
-  VERSION = '5.1.0'.freeze
+  VERSION = '5.2.0'.freeze
 end

data/webpack/components/SCCAccountIndex/SCCAccountIndex.scss

@@ -0,0 +1,26 @@
+.scc-account-add-container {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: -8px;
+  margin-bottom: 8px;
+}
+
+.scc-account-delete-warning {
+  background-color: #f9f9f9;
+  border-radius: 4px;
+  padding: 12px 16px;
+  white-space: pre-wrap;
+  overflow-x: auto;
+  font-size: 0.9rem;
+  max-height: 300px;
+}
+
+.scc-account-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.pf-v5-c-page__main-section.pf-m-light {
+  margin-top: -1rem;
+}

data/webpack/components/SCCAccountIndex/SCCAccountIndex.test.js

@@ -0,0 +1,291 @@
+/* eslint-disable react/prop-types, global-require */
+import React from 'react';
+import '@testing-library/jest-dom';
+import {
+  render,
+  screen,
+  within,
+  fireEvent,
+  waitFor,
+} from '@testing-library/react';
+
+import SccAccountsIndex from './index';
+import { deleteSccAccountAction } from './SCCAccountIndexActions';
+
+jest.mock('foremanReact/common/I18n', () => ({ translate: (s) => s }), {
+  virtual: true,
+});
+jest.mock('foremanReact/common/helpers', () => ({ foremanUrl: (p) => p }), {
+  virtual: true,
+});
+jest.mock('react-redux', () => ({ useDispatch: () => jest.fn() }), {
+  virtual: true,
+});
+
+jest.mock(
+  './SCCAccountIndexActions',
+  () => ({
+    deleteSccAccountAction: jest.fn(),
+  }),
+  { virtual: true }
+);
+
+jest.mock(
+  '@patternfly/react-core',
+  () => {
+    const { forwardRef } = require('react');
+    const PageSection = ({ children }) => <section>{children}</section>;
+
+    const Button = ({
+      children,
+      onClick,
+      component,
+      href,
+      'aria-label': ariaLabel,
+    }) => {
+      if (component === 'a') {
+        return (
+          <a href={href} onClick={onClick} aria-label={ariaLabel}>
+            {children}
+          </a>
+        );
+      }
+      return (
+        <button type="button" onClick={onClick} aria-label={ariaLabel}>
+          {children}
+        </button>
+      );
+    };
+
+    const Dropdown = ({ isOpen, onSelect, onOpenChange, toggle, children }) => (
+      <div>
+        {typeof toggle === 'function' ? toggle({ current: null }) : null}
+        {isOpen ? (
+          <div data-testid="menu">
+            {children}
+            <button
+              type="button"
+              aria-label="Close menu"
+              onClick={() => {
+                if (onSelect) onSelect();
+                if (onOpenChange) onOpenChange(false);
+              }}
+            />
+          </div>
+        ) : null}
+      </div>
+    );
+
+    const DropdownList = ({ children }) => <div role="menu">{children}</div>;
+
+    const DropdownItem = ({ children, onClick, isDisabled }) => (
+      <div
+        role="menuitem"
+        aria-disabled={!!isDisabled}
+        onClick={(e) => {
+          if (!isDisabled && onClick) onClick(e);
+        }}
+      >
+        {children}
+      </div>
+    );
+
+    const MenuToggle = forwardRef(
+      ({ children, onClick, 'aria-label': ariaLabel }, ref) => (
+        <button
+          ref={ref}
+          type="button"
+          aria-label={ariaLabel}
+          onClick={onClick}
+        >
+          {children}
+        </button>
+      )
+    );
+
+    const Modal = ({ title, isOpen, children, actions }) =>
+      isOpen ? (
+        <div role="dialog" aria-label={title}>
+          <h2>{title}</h2>
+          {children}
+          {Array.isArray(actions) &&
+            actions.map((node, i) => <div key={i}>{node}</div>)}
+        </div>
+      ) : null;
+
+    return {
+      __esModule: true,
+      PageSection,
+      Button,
+      Dropdown,
+      DropdownList,
+      DropdownItem,
+      MenuToggle,
+      Modal,
+    };
+  },
+  { virtual: true }
+);
+
+jest.mock(
+  '@patternfly/react-table',
+  () => ({
+    __esModule: true,
+    Table: ({ children, ..._rest }) => <table>{children}</table>,
+    Thead: ({ children }) => <thead>{children}</thead>,
+    Tbody: ({ children }) => <tbody>{children}</tbody>,
+    Tr: ({ children }) => <tr>{children}</tr>,
+    Th: ({ children }) => <th>{children}</th>,
+    Td: ({ children }) => <td>{children}</td>,
+  }),
+  { virtual: true }
+);
+
+// Helpers
+const renderComponent = (initialAccounts = []) =>
+  render(<SccAccountsIndex initialAccounts={initialAccounts} />);
+
+const openActionsMenu = () => {
+  fireEvent.click(screen.getByLabelText('Actions menu'));
+  return screen.getByTestId('menu');
+};
+
+const getRowByAccountName = (name) =>
+  screen.getByRole('row', { name: new RegExp(name, 'i') });
+
+// Tests
+describe('SccAccountsIndex', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders without crashing and shows the Add button', () => {
+    renderComponent();
+    expect(screen.getByText('Add SCC account')).toBeInTheDocument();
+  });
+
+  it('shows expected table headers', () => {
+    renderComponent();
+    ['Name', 'Products', 'Last synced', 'Actions'].forEach((h) => {
+      expect(screen.getByText(h)).toBeInTheDocument();
+    });
+  });
+
+  it('renders rows from props (names + product counts) with edit links', () => {
+    const data = [
+      { id: 1, name: 'Acc A', scc_products_with_repos_count: 2 },
+      { id: 2, name: 'Acc B', scc_products_with_repos_count: 5 },
+    ];
+    renderComponent(data);
+
+    expect(screen.getByRole('link', { name: 'Acc A' })).toHaveAttribute(
+      'href',
+      '/scc_accounts/1/edit'
+    );
+    expect(screen.getByRole('link', { name: 'Acc B' })).toHaveAttribute(
+      'href',
+      '/scc_accounts/2/edit'
+    );
+
+    const rowA = getRowByAccountName('Acc A');
+    const rowB = getRowByAccountName('Acc B');
+    expect(within(rowA).getByText('2')).toBeInTheDocument();
+    expect(within(rowB).getByText('5')).toBeInTheDocument();
+  });
+
+  it('shows correct "Last synced" content: link when task exists, "never synced" otherwise', () => {
+    const data = [
+      {
+        id: 10,
+        name: 'Successful Sync',
+        scc_products_with_repos_count: 1,
+        sync_status: 'success',
+        sync_task: { id: 'task-123' },
+      },
+      {
+        id: 11,
+        name: 'Failed Sync',
+        scc_products_with_repos_count: 0,
+        sync_status: 'error',
+        sync_task: { id: 'task-456' },
+      },
+      {
+        id: 12,
+        name: 'No Sync',
+        scc_products_with_repos_count: 0,
+        sync_status: null,
+      },
+    ];
+    renderComponent(data);
+
+    const successRow = getRowByAccountName('Successful Sync');
+    expect(
+      within(successRow).getByRole('link', { name: 'success' })
+    ).toHaveAttribute('href', '/foreman_tasks/tasks/task-123');
+
+    const errorRow = getRowByAccountName('Failed Sync');
+    expect(
+      within(errorRow).getByRole('link', { name: 'error' })
+    ).toHaveAttribute('href', '/foreman_tasks/tasks/task-456');
+
+    const noSyncRow = getRowByAccountName('No Sync');
+    expect(within(noSyncRow).getByText('never synced')).toBeInTheDocument();
+  });
+
+  it('delete flow: open modal, confirm calls action, cancel closes modal', async () => {
+    const data = [
+      {
+        id: 5,
+        name: 'ToDelete',
+        scc_products_with_repos_count: 0,
+        sync_status: 'never synced',
+      },
+    ];
+    renderComponent(data);
+
+    const menu = openActionsMenu();
+    fireEvent.click(within(menu).getByRole('menuitem', { name: 'Delete' }));
+
+    const dialog = screen.getByRole('dialog');
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Delete' }));
+
+    expect(deleteSccAccountAction).toHaveBeenCalledWith(
+      expect.any(Function), // dispatch
+      5, // accountId
+      expect.any(Function), // setAccounts
+      expect.any(Function), // setDeleteOpen
+      expect.any(Object) // deletingIdRef
+    );
+
+    fireEvent.click(
+      within(screen.getByRole('dialog')).getByRole('button', { name: 'Cancel' })
+    );
+    await waitFor(() =>
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+    );
+
+    const menu2 = openActionsMenu();
+    fireEvent.click(within(menu2).getByRole('menuitem', { name: 'Delete' }));
+    fireEvent.click(
+      within(screen.getByRole('dialog')).getByRole('button', { name: 'Cancel' })
+    );
+    await waitFor(() =>
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+    );
+  });
+
+  it('empty state: renders headers and no data rows', () => {
+    renderComponent([]);
+
+    ['Name', 'Products', 'Last synced', 'Actions'].forEach((h) => {
+      expect(screen.getByText(h)).toBeInTheDocument();
+    });
+
+    expect(screen.getAllByRole('row')).toHaveLength(1);
+
+    expect(screen.queryByLabelText('Actions menu')).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: 'Select Products' })
+    ).not.toBeInTheDocument();
+  });
+});

data/webpack/components/SCCAccountIndex/SCCAccountIndexActions.js

@@ -0,0 +1,205 @@
+import { APIActions } from 'foremanReact/redux/API';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+import { INITIAL_DELAY, MAX_DELAY, BACKOFF } from './SCCAccountIndexConstants';
+
+const isDone = (state, result) =>
+  state === 'stopped' || result === 'success' || result === 'error';
+
+const nextDelay = (prevDelay, changed) => {
+  const base = changed ? INITIAL_DELAY : prevDelay;
+  const next = Math.min(Math.ceil(base * BACKOFF), MAX_DELAY);
+  return next;
+};
+
+const schedule = (taskTimeoutRef, taskId, ms, fn) => {
+  if (taskTimeoutRef.current[taskId])
+    clearTimeout(taskTimeoutRef.current[taskId]);
+  taskTimeoutRef.current[taskId] = setTimeout(fn, ms);
+};
+
+const deriveSyncStatus = (done, result, endedAt, state, fallback) => {
+  if (!done) return state || fallback;
+  return result === 'success' ? endedAt || __('finished') : __('error');
+};
+
+const checkUntilChanged = (
+  dispatch,
+  taskId,
+  accountId,
+  setAccounts,
+  taskTimeoutRef,
+  lastStateRef,
+  delay = INITIAL_DELAY
+) => {
+  if (!taskId) return;
+
+  dispatch(
+    APIActions.get({
+      key: `task_${taskId}`,
+      url: `/foreman_tasks/api/tasks/${taskId}`,
+      handleSuccess: (payload) => {
+        const task = payload?.data ?? payload;
+        const { state, result, ended_at: endedAt } = task || {};
+        const prev = lastStateRef.current[accountId];
+        const done = isDone(state, result);
+
+        setAccounts((prevState) =>
+          prevState.map((acc) => {
+            if (acc.id !== accountId) {
+              return acc;
+            }
+
+            const syncStatus = deriveSyncStatus(
+              done,
+              result,
+              endedAt,
+              state,
+              acc.sync_status
+            );
+            return {
+              ...acc,
+              sync_status: syncStatus,
+              sync_task: {
+                ...(acc.sync_task || {}),
+                id: taskId,
+                ended_at: endedAt,
+              },
+            };
+          })
+        );
+
+        lastStateRef.current[accountId] = state;
+
+        if (done) {
+          if (taskTimeoutRef.current[taskId])
+            clearTimeout(taskTimeoutRef.current[taskId]);
+          delete taskTimeoutRef.current[taskId];
+          delete lastStateRef.current[accountId];
+          return;
+        }
+
+        const changed = state !== prev;
+        const newDelay = nextDelay(delay, changed);
+
+        schedule(taskTimeoutRef, taskId, newDelay, () =>
+          checkUntilChanged(
+            dispatch,
+            taskId,
+            accountId,
+            setAccounts,
+            taskTimeoutRef,
+            lastStateRef,
+            newDelay
+          )
+        );
+      },
+      handleError: () => {
+        const newDelay = nextDelay(delay, false);
+        schedule(taskTimeoutRef, taskId, newDelay, () =>
+          checkUntilChanged(
+            dispatch,
+            taskId,
+            accountId,
+            setAccounts,
+            taskTimeoutRef,
+            lastStateRef,
+            newDelay
+          )
+        );
+      },
+      errorToast: () => null,
+    })
+  );
+};
+
+export const syncSccAccountAction = (
+  dispatch,
+  accountId,
+  setAccounts,
+  taskTimeoutRef,
+  lastStateRef
+) => {
+  if (!accountId) return;
+
+  dispatch(
+    APIActions.put({
+      key: `syncSccAccount_${accountId}`,
+      url: `/api/v2/scc_accounts/${accountId}/sync`,
+      successToast: () => __('Sync task started.'),
+      errorToast: () => __('Failed to start sync task.'),
+      handleSuccess: (resp) => {
+        const taskId = resp?.data?.id;
+        const initialState = resp?.data?.state || 'planned';
+
+        lastStateRef.current[accountId] = initialState;
+
+        setAccounts((prev) =>
+          prev.map((acc) =>
+            acc.id === accountId
+              ? {
+                  ...acc,
+                  sync_status: initialState || __('running'),
+                }
+              : acc
+          )
+        );
+
+        if (taskTimeoutRef.current[taskId]) {
+          clearTimeout(taskTimeoutRef.current[taskId]);
+        }
+        taskTimeoutRef.current[taskId] = setTimeout(() => {
+          checkUntilChanged(
+            dispatch,
+            taskId,
+            accountId,
+            setAccounts,
+            taskTimeoutRef,
+            lastStateRef
+          );
+        }, 15000);
+      },
+      handleError: () => {
+        setAccounts((prev) =>
+          prev.map((acc) =>
+            acc.id === accountId
+              ? {
+                  ...acc,
+                  sync_status: __('error'),
+                  taskId: null,
+                }
+              : acc
+          )
+        );
+      },
+    })
+  );
+};
+
+export const deleteSccAccountAction = (
+  dispatch,
+  id,
+  setAccounts,
+  setDeleteOpen,
+  deletingIdRef
+) => {
+  if (!id) return;
+
+  dispatch(
+    APIActions.delete({
+      key: `deleteSccAccount_${id}`,
+      url: `/api/v2/scc_accounts/${id}`,
+      successToast: () => __('SCC account deleted successfully.'),
+      errorToast: () => __('Failed to delete SCC account.'),
+      handleSuccess: () => {
+        setAccounts((prev) => prev.filter((acc) => acc.id !== id));
+        setDeleteOpen(false);
+        deletingIdRef.current = null;
+      },
+      handleError: () => {
+        setDeleteOpen(false);
+        deletingIdRef.current = null;
+      },
+    })
+  );
+};

data/webpack/components/SCCAccountIndex/SCCAccountIndexConstants.js

@@ -0,0 +1,9 @@
+import { translate as __ } from 'foremanReact/common/I18n';
+
+export const WARN_DELETE = __(
+  'WARNING: If you want to switch SCC accounts and retain the synchronized content, DO NOT delete your old SCC account, even if it is expired. Please change the login and password of your SCC account, instead.\n\nIf you delete your old SCC account, you CANNOT reuse existing repositories, products, content views, and composite content views.\n\n Do you Really want to delete this SCC account %acc_name?'
+);
+
+export const INITIAL_DELAY = 5000;
+export const MAX_DELAY = 30000;
+export const BACKOFF = 1.5;

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/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.2.0
 platform: ruby
 authors:
 - ATIX AG
 bindir: bin
 cert_chain: []
-date: 2025-10-15 00:00:00.000000000 Z
+date: 2025-11-03 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