foreman_scc_manager 5.0.4 → 5.2.0

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

@@ -2,6 +2,18 @@ import componentRegistry from 'foremanReact/components/componentRegistry';
 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',

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: foreman_scc_manager
 version: !ruby/object:Gem::Version
-  version: 5.0.4
+  version: 5.2.0
 platform: ruby
 authors:
 - ATIX AG
 bindir: bin
 cert_chain: []
-date: 2025-09-16 00:00:00.000000000 Z
+date: 2025-11-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rdoc
@@ -57,20 +57,6 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
-- !ruby/object:Gem::Dependency
-  name: coffee-rails
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 5.0.0
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 5.0.0
 - !ruby/object:Gem::Dependency
   name: katello
   requirement: !ruby/object:Gem::Requirement
@@ -104,7 +90,6 @@ files:
 - app/assets/javascripts/foreman_scc_manager/locale/ka/foreman_scc_manager.js
 - app/assets/javascripts/foreman_scc_manager/locale/ko/foreman_scc_manager.js
 - app/assets/javascripts/foreman_scc_manager/locale/zh_CN/foreman_scc_manager.js
-- app/assets/javascripts/foreman_scc_manager/scc_accounts.js.coffee
 - app/controllers/api/v2/scc_accounts_controller.rb
 - app/controllers/api/v2/scc_products_controller.rb
 - app/controllers/scc_accounts_controller.rb
@@ -133,7 +118,6 @@ files:
 - app/views/api/v2/scc_products/main.json.rabl
 - app/views/api/v2/scc_products/show.json.rabl
 - app/views/scc_account_sync_plan_task_groups/_scc_account_sync_plan_task_groups.html.erb
-- app/views/scc_accounts/_form.html.erb
 - app/views/scc_accounts/edit.html.erb
 - app/views/scc_accounts/index.html.erb
 - app/views/scc_accounts/new.html.erb
@@ -212,6 +196,18 @@ files:
 - test/support/fixtures_support.rb
 - test/test_plugin_helper.rb
 - test/unit/foreman_scc_manager_test.rb
+- webpack/components/SCCAccountForm/SCCAccountForm.scss
+- webpack/components/SCCAccountForm/SCCAccountFormActions.js
+- webpack/components/SCCAccountForm/components/DateTimeField.js
+- webpack/components/SCCAccountForm/components/SCCCredentialsCard.js
+- 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