foreman_theme_satellite 16.4.1 → 16.4.3

data/webpack/components/SatelliteWelcomeEnv.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { foremanUrl, getManualURL } from 'foremanReact/common/helpers';
+import EmptyState from 'foremanReact/components/common/EmptyState';
+
+export const SatelliteWelcomeEnv = ({ canCreate }) => {
+  const action = canCreate && {
+    title: __('Create Puppet Environment'),
+    url: foremanUrl('/foreman_puppet/environments/new'),
+  };
+
+  const description = (
+    <FormattedMessage
+      id="puppetenv-welcome"
+      defaultMessage={__(
+        'If you are planning to use Foreman as an external node classifier you should provide information about one or more environments.{newLine}This information is commonly imported from a pre-existing Puppet configuration by the use of the {puppetClassesLinkToDocs} and environment importer.'
+      )}
+      values={{
+        newLine: <br />,
+        puppetClassesLinkToDocs: (
+          <a
+            target="_blank"
+            href={getManualURL('4.2.2Classes')}
+            rel="noreferrer"
+          >
+            {__('Puppet classes')}
+          </a>
+        ),
+      }}
+    />
+  );
+
+  return (
+    <EmptyState
+      icon="th"
+      iconType="fa"
+      header={__('Puppet Environments')}
+      description={description}
+      action={action}
+    />
+  );
+};
+
+SatelliteWelcomeEnv.propTypes = {
+  canCreate: PropTypes.bool,
+};
+
+SatelliteWelcomeEnv.defaultProps = {
+  canCreate: false,
+};
+
+export default SatelliteWelcomeEnv;

data/webpack/components/fills/UpgradePage/SatelliteUpgradeHelperCard.js

@@ -1,6 +1,12 @@
 import React from 'react';
 
-import { Card, CardBody, CardTitle, CardFooter, Button } from '@patternfly/react-core';
+import {
+  Card,
+  CardBody,
+  CardTitle,
+  CardFooter,
+  Button,
+} from '@patternfly/react-core';
 import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
 
 import { translate as __ } from 'foremanReact/common/I18n';
@@ -10,8 +16,10 @@ const SatelliteUpgradeHelperCard = () => (
   <Card ouiaId="upgrade-docs-satellite-helper" isFlat>
     <CardTitle component="h4">{__('Satellite upgrade helper')}</CardTitle>
     <CardBody>
-      {__('Generate a customized upgrade plan based on your current Satellite environment.' +
-      ' This tool will guide you through the upgrade process and provide additional steps to avoid known issues specific to your upgrade scenario.')}
+      {__(
+        'Generate a customized upgrade plan based on your current Satellite environment.' +
+          ' This tool will guide you through the upgrade process and provide additional steps to avoid known issues specific to your upgrade scenario.'
+      )}
     </CardBody>
     <CardFooter>
       <Button

data/webpack/documentation/documentationMenuKeyboard.js

@@ -0,0 +1,89 @@
+// PatternFly's legacy dropdown keeps references to CSS-hidden items. Handle
+// navigation in affected menus before its handler attempts to focus those refs.
+const navigationKeys = ['ArrowDown', 'ArrowUp', 'Home', 'End'];
+const openingKeys = [...navigationKeys, 'Enter', ' '];
+const dropdownSelector = '.pf-v5-c-dropdown';
+const menuSelector = '.pf-v5-c-dropdown__menu';
+const itemSelector = '[role="menuitem"]';
+
+const isVisible = node => {
+  const { defaultView } = node.ownerDocument;
+  for (let ancestor = node; ancestor; ancestor = ancestor.parentElement) {
+    const style = defaultView.getComputedStyle(ancestor);
+    if (
+      ancestor.hidden ||
+      style.display === 'none' ||
+      style.visibility === 'hidden'
+    ) {
+      return false;
+    }
+  }
+  return true;
+};
+
+export default function installMenuKeyboard(doc, isDocumentationControl) {
+  const frames = new Set();
+  const navigate = (dropdown, key, current) => {
+    const menu = dropdown.querySelector(menuSelector);
+    if (!menu || !isVisible(menu)) return false;
+    const items = [...menu.querySelectorAll(itemSelector)];
+    if (!items.some(isDocumentationControl)) return false;
+    const available = items.filter(
+      item =>
+        !isDocumentationControl(item) &&
+        !item.hasAttribute('disabled') &&
+        item.getAttribute('aria-disabled') !== 'true' &&
+        isVisible(item)
+    );
+    const lastIndex = available.length - 1;
+    const currentIndex = available.indexOf(current);
+    let nextIndex = 0;
+    if (key === 'End' || (key === 'ArrowUp' && currentIndex <= 0)) {
+      nextIndex = lastIndex;
+    } else if (key === 'ArrowUp') {
+      nextIndex = currentIndex - 1;
+    } else if (key === 'ArrowDown' && currentIndex >= 0) {
+      nextIndex = (currentIndex + 1) % available.length;
+    }
+    const target =
+      available[nextIndex] || dropdown.querySelector('[aria-expanded]');
+    if (target) target.focus();
+    return true;
+  };
+
+  const handleEvent = event => {
+    const dropdown = event.target.closest(dropdownSelector);
+    if (!dropdown) return;
+    const toggle = event.target.closest('[aria-expanded]');
+    const key = event.type === 'click' ? 'Enter' : event.key;
+    if (event.type === 'keydown' && navigationKeys.includes(key)) {
+      const current = event.target.closest(itemSelector);
+      if (navigate(dropdown, key, current)) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        return;
+      }
+    }
+    if (!toggle || !openingKeys.includes(key)) return;
+    // Let React open the menu and PatternFly finish its initial focus first.
+    // This also handles menus whose first item is hidden documentation.
+    const frame = doc.defaultView.requestAnimationFrame(() => {
+      frames.delete(frame);
+      if (
+        toggle.isConnected &&
+        toggle.getAttribute('aria-expanded') === 'true'
+      ) {
+        navigate(dropdown, key, null);
+      }
+    });
+    frames.add(frame);
+  };
+
+  doc.addEventListener('keydown', handleEvent, true);
+  doc.addEventListener('click', handleEvent, true);
+  return () => {
+    doc.removeEventListener('keydown', handleEvent, true);
+    doc.removeEventListener('click', handleEvent, true);
+    frames.forEach(frame => doc.defaultView.cancelAnimationFrame(frame));
+  };
+}

data/webpack/documentation/documentationMenuKeyboard.test.js

@@ -0,0 +1,229 @@
+import React, { useState } from 'react';
+import fs from 'fs';
+import path from 'path';
+import {
+  render,
+  fireEvent,
+  screen,
+  waitFor,
+  cleanup,
+} from '@testing-library/react';
+import '@testing-library/jest-dom';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownToggle,
+  DropdownGroup,
+} from '@patternfly/react-core/deprecated';
+import { ActionButtons } from 'foremanReact/components/PF4/TableIndexPage/ActionButtons';
+import DocumentationLink from 'foremanReact/components/PF4/DocumentationLink';
+import { installDocumentationHiding } from './hideDocumentation';
+
+const styles = fs
+  .readFileSync(
+    path.join(
+      __dirname,
+      '../../app/assets/stylesheets/foreman_theme_satellite/documentation.scss'
+    ),
+    'utf8'
+  )
+  .replace(/^\/\/.*$/gm, '');
+let installation;
+
+beforeEach(() => {
+  const style = document.createElement('style');
+  style.textContent = styles;
+  style.id = 'documentation-test-style';
+  document.head.appendChild(style);
+  installation = installDocumentationHiding(document);
+});
+afterEach(() => {
+  installation.disconnect();
+  cleanup();
+  document.getElementById('documentation-test-style').remove();
+});
+
+// Use the same grouped PatternFly menu and documentation component as bookmarks.
+const BookmarksMenu = () => {
+  const [isOpen, setOpen] = useState(false);
+  return (
+    <Dropdown
+      ouiaId="test-bookmarks"
+      isOpen={isOpen}
+      isGrouped
+      toggle={
+        <DropdownToggle onToggle={(_event, open) => setOpen(open)}>
+          Bookmarks
+        </DropdownToggle>
+      }
+    >
+      <DropdownGroup>
+        <DocumentationLink href="/links/manual" />
+        <DropdownItem ouiaId="saved-bookmark" href="/hosts?search=saved">
+          Saved bookmark
+        </DropdownItem>
+        <DropdownItem ouiaId="disabled-bookmark" isDisabled>
+          Unavailable bookmark
+        </DropdownItem>
+        <DropdownItem ouiaId="manage-bookmarks">Manage bookmarks</DropdownItem>
+      </DropdownGroup>
+    </Dropdown>
+  );
+};
+
+const press = (element, key) =>
+  fireEvent.keyDown(element, {
+    key,
+    keyCode: {
+      ArrowDown: 40,
+      ArrowUp: 38,
+      Home: 36,
+      End: 35,
+      Enter: 13,
+      Escape: 27,
+    }[key],
+  });
+
+test('table dropdown skips documentation and wraps between functional actions', async () => {
+  const refresh = jest.fn();
+  render(
+    <ActionButtons
+      buttons={[
+        { title: 'Create', action: { href: '/hosts/new' } },
+        { title: 'Export', action: { href: '/hosts.csv' } },
+        { title: 'Documentation', action: { href: '/hosts/help' } },
+        { title: 'Refresh', action: { onClick: refresh } },
+      ]}
+    />
+  );
+  const toggle = screen.getByRole('button', { name: 'toggle action dropdown' });
+  toggle.focus();
+  press(toggle, 'Enter');
+  const first = await screen.findByRole('menuitem', { name: 'Export' });
+  const last = screen.getByRole('menuitem', { name: 'Refresh' });
+  await waitFor(() => expect(first).toHaveFocus());
+  await waitFor(() =>
+    expect(
+      screen.queryByRole('menuitem', { name: 'Documentation' })
+    ).not.toBeInTheDocument()
+  );
+  press(first, 'ArrowDown');
+  expect(last).toHaveFocus();
+  press(last, 'ArrowDown');
+  expect(first).toHaveFocus();
+  press(first, 'ArrowUp');
+  expect(last).toHaveFocus();
+  press(last, 'Home');
+  expect(first).toHaveFocus();
+  press(first, 'End');
+  expect(last).toHaveFocus();
+  press(last, 'Enter');
+  expect(refresh).toHaveBeenCalledTimes(1);
+  press(last, 'Escape');
+  await waitFor(() => expect(toggle).toHaveFocus());
+  expect(toggle).toHaveAttribute('aria-expanded', 'false');
+});
+
+test.each(['Enter', ' '])(
+  'opening with %s skips a hidden first item',
+  async (key) => {
+    render(<BookmarksMenu />);
+    const toggle = screen.getByRole('button', { name: 'Bookmarks' });
+    toggle.focus();
+    press(toggle, key);
+    const first = await screen.findByRole('menuitem', {
+      name: 'Saved bookmark',
+    });
+    await waitFor(() => expect(first).toHaveFocus());
+    expect(
+      screen.queryByRole('menuitem', { name: 'Documentation' })
+    ).not.toBeInTheDocument();
+    press(first, 'ArrowDown');
+    expect(
+      screen.getByRole('menuitem', { name: 'Manage bookmarks' })
+    ).toHaveFocus();
+    press(document.activeElement, 'ArrowDown');
+    expect(first).toHaveFocus();
+  }
+);
+
+test('ArrowUp from the open toggle focuses the last available action', async () => {
+  render(<BookmarksMenu />);
+  const toggle = screen.getByRole('button', { name: 'Bookmarks' });
+  toggle.focus();
+  fireEvent.click(toggle);
+  await waitFor(() =>
+    expect(
+      screen.getByRole('menuitem', { name: 'Saved bookmark' })
+    ).toHaveFocus()
+  );
+  toggle.focus();
+  press(toggle, 'ArrowUp');
+  const last = await screen.findByRole('menuitem', {
+    name: 'Manage bookmarks',
+  });
+  await waitFor(() => expect(last).toHaveFocus());
+});
+
+test('mouse opening also avoids a hidden initial focus target', async () => {
+  render(<BookmarksMenu />);
+  fireEvent.click(screen.getByRole('button', { name: 'Bookmarks' }));
+  await waitFor(() =>
+    expect(
+      screen.getByRole('menuitem', { name: 'Saved bookmark' })
+    ).toHaveFocus()
+  );
+});
+
+test('menus without documentation retain native keyboard handling', async () => {
+  render(
+    <ActionButtons
+      buttons={[
+        { title: 'Create', action: {} },
+        { title: 'Export', action: { href: '/hosts.csv' } },
+        { title: 'Refresh', action: {} },
+      ]}
+    />
+  );
+  const toggle = screen.getByRole('button', { name: 'toggle action dropdown' });
+  fireEvent.click(toggle);
+  const first = await screen.findByRole('menuitem', { name: 'Export' });
+  first.focus();
+  press(first, 'ArrowDown');
+  expect(screen.getByRole('menuitem', { name: 'Refresh' })).toHaveFocus();
+});
+
+test('disconnect removes the theme keyboard listener', async () => {
+  render(<BookmarksMenu />);
+  fireEvent.click(screen.getByRole('button', { name: 'Bookmarks' }));
+  const first = await screen.findByRole('menuitem', { name: 'Saved bookmark' });
+  await waitFor(() => expect(first).toHaveFocus());
+  installation.disconnect();
+  const bubble = jest.fn();
+  document.addEventListener('keydown', bubble);
+  press(first, 'Home');
+  expect(bubble).toHaveBeenCalled();
+  document.removeEventListener('keydown', bubble);
+});
+
+test('a documentation-only menu keeps focus on its toggle and can close', async () => {
+  render(
+    <ActionButtons
+      buttons={[
+        { title: 'Create', action: {} },
+        { title: 'Documentation', action: { href: '/hosts/help' } },
+      ]}
+    />
+  );
+  const toggle = screen.getByRole('button', { name: 'toggle action dropdown' });
+  toggle.focus();
+  press(toggle, 'Enter');
+  await waitFor(() => expect(toggle).toHaveAttribute('aria-expanded', 'true'));
+  await waitFor(() =>
+    expect(screen.queryByRole('menuitem')).not.toBeInTheDocument()
+  );
+  press(toggle, 'ArrowDown');
+  expect(toggle).toHaveFocus();
+  press(toggle, 'Escape');
+  expect(toggle).toHaveAttribute('aria-expanded', 'false');
+});

data/webpack/documentation/hideDocumentation.js

@@ -0,0 +1,173 @@
+import installMenuKeyboard from './documentationMenuKeyboard';
+
+// Hide only identified documentation buttons and menu actions. Leave inline
+// links and their surrounding text intact; never remove nodes owned by React.
+export const hiddenClass = 'satellite-documentation-hidden';
+
+const controlIds = [
+  'doc-url-dropdown',
+  'action-buttons-documentation',
+  'register-host-documentation-button',
+  'audits-documentation-button',
+  'inventory-documentation-button',
+  'upgrade-docs-button',
+];
+
+const controlIdSet = new Set(controlIds);
+
+const controlSelector = controlIds
+  .map(id => `[data-ouia-component-id="${id}"]`)
+  .join(',');
+
+const dropdownItemSelector =
+  '[data-ouia-component-id="action-buttons-dropdown"] [data-ouia-component-id]';
+
+const httpHref = /^https?:\/\//i;
+
+const satelliteDocsPattern = /\/(?:[a-z]{2}(?:-[a-z]{2})?\/documentation|documentation\/[a-z]{2}(?:-[a-z]{2})?)\/red_hat_satellite(?:\/|$)/i;
+
+const isDocumentationControl = (node, documentationLabel) => {
+  const id = node.getAttribute('data-ouia-component-id');
+  if (!id) return false;
+  if (controlIdSet.has(id)) return true;
+  return (
+    id === `${documentationLabel}-dropdown-item` &&
+    node.closest('[data-ouia-component-id="action-buttons-dropdown"]') !== null
+  );
+};
+
+const syncDocumentationControl = (node, documentationLabel) => {
+  if (!node || node.nodeType !== 1) return;
+  if (isDocumentationControl(node, documentationLabel)) {
+    node.classList.add(hiddenClass);
+    return;
+  }
+  if (node.classList.contains(hiddenClass)) node.classList.remove(hiddenClass);
+};
+
+const hideDocumentationIn = (root, documentationLabel) => {
+  if (!root || root.nodeType !== 1) return;
+  syncDocumentationControl(root, documentationLabel);
+  root.querySelectorAll(controlSelector).forEach(node => {
+    node.classList.add(hiddenClass);
+  });
+  const itemId = `${documentationLabel}-dropdown-item`;
+  root.querySelectorAll(dropdownItemSelector).forEach(node => {
+    if (node.getAttribute('data-ouia-component-id') === itemId) {
+      node.classList.add(hiddenClass);
+    }
+  });
+};
+
+export const hideDocumentation = (
+  doc,
+  documentationLabel = 'Documentation'
+) => {
+  // Recalculate so a React node reused for a functional link becomes visible.
+  doc
+    .querySelectorAll(`.${hiddenClass}`)
+    .forEach(node => node.classList.remove(hiddenClass));
+  hideDocumentationIn(doc.documentElement || doc, documentationLabel);
+};
+
+const normalizeLink = (link, landingPath) => {
+  const href = link.getAttribute('href');
+  // A rewrite sets href to the landing path and the observer hears that
+  // write. Matching it here makes the follow-up a no-op.
+  if (!href || href === landingPath || !httpHref.test(href)) return;
+  let url;
+  try {
+    url = new URL(href);
+  } catch (error) {
+    return;
+  }
+  if (satelliteDocsPattern.test(url.pathname)) {
+    link.setAttribute('href', landingPath);
+  }
+};
+
+const normalizeIn = (root, landingPath) => {
+  if (!root || root.nodeType !== 1) return;
+  if (typeof root.matches === 'function' && root.matches('a[href]')) {
+    normalizeLink(root, landingPath);
+  }
+  root.querySelectorAll('a[href]').forEach(link => {
+    normalizeLink(link, landingPath);
+  });
+};
+
+// Direct Satellite documentation links bypass LinksController. Send them
+// through its landing redirect too, including links in stored notifications.
+export const normalizeSatelliteDocumentation = (doc, landingPath) => {
+  normalizeIn(doc.documentElement || doc, landingPath);
+};
+
+export const installDocumentationHiding = (
+  doc,
+  documentationLabel = 'Documentation',
+  landingPath
+) => {
+  hideDocumentation(doc, documentationLabel);
+  if (landingPath) normalizeSatelliteDocumentation(doc, landingPath);
+
+  const removeMenuKeyboard = installMenuKeyboard(doc, node =>
+    isDocumentationControl(node, documentationLabel)
+  );
+  const pending = [];
+  let scheduled = false;
+  const flush = () => {
+    scheduled = false;
+    const batch = pending.splice(0);
+    batch.forEach(change => {
+      if (change.type === 'childList') {
+        change.added.forEach(node => {
+          hideDocumentationIn(node, documentationLabel);
+          if (landingPath) normalizeIn(node, landingPath);
+        });
+        return;
+      }
+      if (change.name === 'href') {
+        if (
+          landingPath &&
+          change.target.nodeType === 1 &&
+          change.target.matches('a[href]')
+        ) {
+          normalizeLink(change.target, landingPath);
+        }
+        return;
+      }
+      syncDocumentationControl(change.target, documentationLabel);
+    });
+  };
+
+  const observer = new doc.defaultView.MutationObserver(mutations => {
+    mutations.forEach(mutation => {
+      if (mutation.type === 'childList') {
+        if (mutation.addedNodes.length === 0) return;
+        pending.push({ type: 'childList', added: [...mutation.addedNodes] });
+        return;
+      }
+      pending.push({
+        type: 'attributes',
+        name: mutation.attributeName,
+        target: mutation.target,
+      });
+    });
+    if (scheduled || pending.length === 0) return;
+    scheduled = true;
+    doc.defaultView.requestAnimationFrame(flush);
+  });
+  observer.observe(doc.body, {
+    subtree: true,
+    childList: true,
+    attributes: true,
+    attributeFilter: ['data-ouia-component-id', 'href'],
+  });
+  return {
+    disconnect: () => {
+      observer.disconnect();
+      pending.length = 0;
+      removeMenuKeyboard();
+    },
+  };
+};