foreman_scc_manager 5.0.4 → 5.2.0

data/webpack/components/SCCAccountForm/index.js

@@ -0,0 +1,306 @@
+import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { foremanUrl } from 'foremanReact/common/helpers';
+import PropTypes from 'prop-types';
+import {
+  PageSection,
+  Title,
+  Form,
+  Button,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+
+import { formatDateTime } from './components/DateTimeField';
+import SCCCredentialsCard from './components/SCCCredentialsCard';
+import SCCTokenRefreshCard from './components/SCCTokenRefreshCard';
+import SCCSyncSettingsCard from './components/SCCSyncSettingsCard';
+import {
+  testSccConnectionAction,
+  submitSccAccountAction,
+} from './SCCAccountFormActions';
+import './SCCAccountForm.scss';
+
+const SCCAccountForm = ({
+  organizationId,
+  intervalOptions,
+  downloadPolicyOptions,
+  mirroringPolicyOptions,
+  gpgKeyOptions,
+  selectedGpgKeyId,
+  initial,
+}) => {
+  const isEdit = Boolean(initial?.id);
+  const dispatch = useDispatch();
+
+  const [openInterval, setOpenInterval] = useState(false);
+  const [openGpg, setOpenGpg] = useState(false);
+  const [openDownload, setOpenDownload] = useState(false);
+  const [openMirroring, setOpenMirroring] = useState(false);
+
+  const [name, setName] = useState(initial?.name ?? '');
+  const [login, setLogin] = useState(initial?.login ?? '');
+  const [password, setPassword] = useState(isEdit ? '********' : '');
+
+  const [baseUrl, setBaseUrl] = useState(
+    initial?.baseUrl ?? 'https://scc.suse.com'
+  );
+
+  const [refreshDate, setRefreshDate] = useState(initial?.refreshDate ?? '');
+  const [refreshTime, setRefreshTime] = useState(initial?.refreshTime ?? '');
+
+  const [testing, setTesting] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+
+  const [interval, setInterval] = useState(
+    initial?.interval ?? intervalOptions?.[0] ?? ''
+  );
+
+  const [gpgKey, setGpgKey] = useState(
+    initial?.gpgKey ?? selectedGpgKeyId ?? gpgKeyOptions?.[0]?.[0] ?? ''
+  );
+
+  const [downloadPolicy, setDownloadPolicy] = useState(
+    initial?.downloadPolicy ?? downloadPolicyOptions?.[0]?.[0] ?? ''
+  );
+
+  const [mirroringPolicy, setMirroringPolicy] = useState(
+    initial?.mirroringPolicy ?? mirroringPolicyOptions?.[0]?.[0] ?? ''
+  );
+
+  const handleUrl = (url) => {
+    if (!url) return;
+    try {
+      const parsed = new URL(url);
+      if (parsed.protocol === 'http:' || parsed.protocol === 'https:') {
+        setBaseUrl(url);
+        return;
+      }
+    } catch {
+      // ignore parse errors
+    }
+    setBaseUrl(url);
+  };
+
+  const buildPayload = () => {
+    const downloadPolicyValue =
+      downloadPolicyOptions.find(([label]) => label === downloadPolicy)?.[1] ??
+      downloadPolicy;
+
+    const mirroringPolicyValue =
+      mirroringPolicyOptions.find(
+        ([label]) => label === mirroringPolicy
+      )?.[1] ?? mirroringPolicy;
+
+    const katelloGpgKeyId = !gpgKey
+      ? null
+      : gpgKeyOptions.find(([label]) => label === gpgKey)?.[1] ?? null;
+
+    const payload = {
+      name,
+      login,
+      password: isEdit && password === '********' ? null : password,
+      base_url: baseUrl,
+      interval,
+      download_policy: downloadPolicyValue,
+      mirroring_policy: mirroringPolicyValue,
+      organization_id: organizationId,
+      katello_gpg_key_id: katelloGpgKeyId,
+    };
+    const sync = formatDateTime(refreshDate, refreshTime);
+    if (sync) payload.sync_date = sync;
+
+    return payload;
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (submitting) return;
+
+    setSubmitting(true);
+    const payload = buildPayload();
+
+    const action = submitSccAccountAction({
+      isEdit,
+      organizationId,
+      updateUrl: `/api/v2/scc_accounts/${initial?.id}`,
+      payload,
+      onSuccess: (redirect) => {
+        setSubmitting(false);
+        window.location.href = redirect;
+      },
+      onError: () => setSubmitting(false),
+    });
+
+    dispatch(action);
+  };
+  const handleTestConnection = () => {
+    setTesting(true);
+
+    const action = testSccConnectionAction({
+      login: isEdit && login === initial?.login ? '' : login,
+      password: isEdit && password === '********' ? '' : password,
+      baseUrl: isEdit && baseUrl === initial?.baseUrl ? '' : baseUrl,
+      isEdit,
+      id: initial?.id,
+      onFinally: () => setTesting(false),
+    });
+
+    const dispatchedAction = dispatch(action);
+    if (dispatchedAction?.finally)
+      dispatchedAction.finally(() => setTesting(false));
+  };
+
+  return (
+    <PageSection
+      isFilled
+      className="scc-account-form-section"
+      ouiaId="scc-account-form-page-section"
+    >
+      <Title
+        headingLevel="h1"
+        className="scc-account-form-title"
+        ouiaId="scc-account-form-title"
+      >
+        SUSE Customer Center Account
+      </Title>
+
+      <Form
+        isWidthLimited
+        className="scc-account-form"
+        onSubmit={handleSubmit}
+        ouiaId="scc-account-form"
+      >
+        <Stack hasGutter ouiaId="scc-account-form-stack">
+          <StackItem ouiaId="scc-credentials-stack-item">
+            <SCCCredentialsCard
+              name={name}
+              login={login}
+              password={password}
+              baseUrl={baseUrl}
+              testing={testing}
+              onNameChange={setName}
+              onLoginChange={setLogin}
+              onPasswordChange={setPassword}
+              onBaseUrlChange={handleUrl}
+              onTestConnection={handleTestConnection}
+            />
+          </StackItem>
+
+          <StackItem ouiaId="scc-token-refresh-stack-item">
+            <SCCTokenRefreshCard
+              interval={interval}
+              intervalOptions={intervalOptions}
+              openInterval={openInterval}
+              refreshDate={refreshDate}
+              refreshTime={refreshTime}
+              onIntervalChange={setInterval}
+              onIntervalOpenChange={setOpenInterval}
+              onRefreshDateChange={setRefreshDate}
+              onRefreshTimeChange={setRefreshTime}
+            />
+          </StackItem>
+
+          <StackItem ouiaId="scc-sync-settings-stack-item">
+            <SCCSyncSettingsCard
+              gpgKey={gpgKey}
+              gpgKeyOptions={gpgKeyOptions}
+              openGpg={openGpg}
+              downloadPolicy={downloadPolicy}
+              downloadPolicyOptions={downloadPolicyOptions}
+              openDownload={openDownload}
+              mirroringPolicy={mirroringPolicy}
+              mirroringPolicyOptions={mirroringPolicyOptions}
+              openMirroring={openMirroring}
+              onGpgKeyChange={setGpgKey}
+              onGpgOpenChange={setOpenGpg}
+              onDownloadPolicyChange={setDownloadPolicy}
+              onDownloadOpenChange={setOpenDownload}
+              onMirroringPolicyChange={setMirroringPolicy}
+              onMirroringOpenChange={setOpenMirroring}
+            />
+          </StackItem>
+
+          <StackItem ouiaId="scc-form-actions-stack-item">
+            <Button
+              variant="primary"
+              type="submit"
+              isDisabled={submitting}
+              ouiaId="scc-form-submit-button"
+            >
+              {__('Submit')}
+            </Button>{' '}
+            <Button
+              variant="link"
+              component="a"
+              href={foremanUrl('/scc_accounts')}
+              isDisabled={submitting}
+              ouiaId="scc-form-cancel-button"
+            >
+              {__('Cancel')}
+            </Button>
+          </StackItem>
+        </Stack>
+      </Form>
+    </PageSection>
+  );
+};
+
+SCCAccountForm.propTypes = {
+  organizationId: PropTypes.number.isRequired,
+  intervalOptions: PropTypes.arrayOf(PropTypes.string),
+  downloadPolicyOptions: PropTypes.arrayOf(
+    PropTypes.oneOfType([
+      PropTypes.exact({
+        label: PropTypes.string.isRequired,
+        value: PropTypes.string.isRequired,
+      }),
+      PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string])),
+    ])
+  ),
+  mirroringPolicyOptions: PropTypes.arrayOf(
+    PropTypes.oneOfType([
+      PropTypes.exact({
+        label: PropTypes.string.isRequired,
+        value: PropTypes.string.isRequired,
+      }),
+      PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string])),
+    ])
+  ),
+  gpgKeyOptions: PropTypes.arrayOf(
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number,
+        PropTypes.oneOf([null]),
+      ])
+    )
+  ),
+  selectedGpgKeyId: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.oneOf(['', null]),
+  ]),
+  initial: PropTypes.shape({
+    id: PropTypes.number,
+    name: PropTypes.string,
+    login: PropTypes.string,
+    baseUrl: PropTypes.string,
+    interval: PropTypes.string,
+    downloadPolicy: PropTypes.string,
+    mirroringPolicy: PropTypes.string,
+    gpgKey: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['None'])]),
+    refreshDate: PropTypes.string,
+    refreshTime: PropTypes.string,
+  }),
+};
+
+SCCAccountForm.defaultProps = {
+  intervalOptions: [],
+  downloadPolicyOptions: [],
+  mirroringPolicyOptions: [],
+  gpgKeyOptions: [],
+  selectedGpgKeyId: '',
+  initial: {},
+};
+export default SCCAccountForm;

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