foreman_rh_cloud 14.6.2 → 15.0.0

data/webpack/common/IopIframe/IopHostDetailsIframe.js

@@ -0,0 +1,66 @@
+import React, { useRef } from 'react';
+import PropTypes from 'prop-types';
+import { useInsightsPermissions } from '../Hooks/PermissionsHooks';
+import { useIopIframeChrome } from './useIopIframeChrome';
+import { useIopIframeHeight } from './useIopIframeHeight';
+import './IopHostDetailsIframe.scss';
+
+/**
+ * Host-details tab iframe for an IoP app (chrome post + READY re-sync).
+ * App-specific wrappers supply src, appRoute, title, and styles.
+ */
+const IopHostDetailsIframe = ({
+  inventoryId,
+  iframeSrc,
+  appRoute,
+  title,
+  readyMessageType,
+  className = '',
+  iframeClassName = 'rh-cloud-iop-host-details-iframe',
+  testId = 'iop-host-details-iframe',
+}) => {
+  const iframeRef = useRef(null);
+  const permissions = useInsightsPermissions();
+  const sendChromeContext = useIopIframeChrome({
+    iframeRef,
+    permissions,
+    appRoute,
+    embedded: 'host-tab',
+    readyMessageType,
+  });
+  useIopIframeHeight({ iframeRef });
+
+  return (
+    <div className={className}>
+      <iframe
+        key={inventoryId}
+        ref={iframeRef}
+        className={iframeClassName}
+        data-testid={testId}
+        src={iframeSrc}
+        title={title}
+        aria-label={title}
+        onLoad={sendChromeContext}
+      />
+    </div>
+  );
+};
+
+IopHostDetailsIframe.propTypes = {
+  inventoryId: PropTypes.string.isRequired,
+  iframeSrc: PropTypes.string.isRequired,
+  appRoute: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  readyMessageType: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  iframeClassName: PropTypes.string,
+  testId: PropTypes.string,
+};
+
+IopHostDetailsIframe.defaultProps = {
+  className: '',
+  iframeClassName: 'rh-cloud-iop-host-details-iframe',
+  testId: 'iop-host-details-iframe',
+};
+
+export default IopHostDetailsIframe;

data/webpack/common/IopIframe/IopHostDetailsIframe.scss

@@ -0,0 +1,6 @@
+.rh-cloud-iop-host-details-iframe {
+  border: 0;
+  display: block;
+  width: 100%;
+  min-height: 70vh;
+}

data/webpack/common/IopIframe/IopHostDetailsIframeTab.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  isNotRhelHost,
+  hasNoInsightsFacet,
+  useTabRedirect,
+} from '../../ForemanRhCloudHelpers';
+import IopHostDetailsIframe from './IopHostDetailsIframe';
+
+/**
+ * Host-details fill wrapper: hide/redirect for non-RHEL / no Insights facet,
+ * then render an IoP app iframe for the subscription UUID.
+ */
+const IopHostDetailsIframeTab = ({
+  response = {},
+  iframeSrc,
+  buildAppRoute,
+  title,
+  readyMessageType,
+  className = '',
+  iframeClassName = 'rh-cloud-iop-host-details-iframe',
+  testId = 'iop-host-details-iframe',
+}) => {
+  const isHostDataLoaded = Boolean(response?.id);
+  const shouldHideTab = useTabRedirect(
+    isHostDataLoaded &&
+      (isNotRhelHost({ hostDetails: response }) ||
+        hasNoInsightsFacet({ response, hostDetails: response }))
+  );
+
+  if (shouldHideTab) {
+    return null;
+  }
+
+  // eslint-disable-next-line camelcase
+  const inventoryId = response?.subscription_facet_attributes?.uuid;
+
+  if (!inventoryId) {
+    return null;
+  }
+
+  return (
+    <IopHostDetailsIframe
+      inventoryId={inventoryId}
+      iframeSrc={iframeSrc}
+      appRoute={buildAppRoute(inventoryId)}
+      title={title}
+      readyMessageType={readyMessageType}
+      className={className}
+      iframeClassName={iframeClassName}
+      testId={testId}
+    />
+  );
+};
+
+IopHostDetailsIframeTab.propTypes = {
+  response: PropTypes.shape({
+    id: PropTypes.number,
+    operatingsystem_name: PropTypes.string,
+    insights_attributes: PropTypes.object,
+    subscription_facet_attributes: PropTypes.shape({
+      uuid: PropTypes.string,
+    }),
+  }),
+  iframeSrc: PropTypes.string.isRequired,
+  buildAppRoute: PropTypes.func.isRequired,
+  title: PropTypes.string.isRequired,
+  readyMessageType: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  iframeClassName: PropTypes.string,
+  testId: PropTypes.string,
+};
+
+IopHostDetailsIframeTab.defaultProps = {
+  response: {},
+  className: '',
+  iframeClassName: 'rh-cloud-iop-host-details-iframe',
+  testId: 'iop-host-details-iframe',
+};
+
+export default IopHostDetailsIframeTab;

data/webpack/common/IopIframe/__tests__/IopAppIframe.test.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import { MemoryRouter, Route } from 'react-router-dom';
+import IopAppIframe from '../IopAppIframe';
+
+const mockHistoryPush = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useHistory: () => ({
+    push: mockHistoryPush,
+  }),
+}));
+
+jest.mock('foremanReact/Root/Context/ForemanContext', () => ({
+  useForemanContext: () => ({
+    metadata: {
+      permissions: new Set(['view_hosts']),
+    },
+  }),
+  useForemanPermissions: () => new Set(['view_hosts']),
+}));
+
+const mockPostChrome = jest.fn();
+jest.mock('../postIopChromeToIframe', () => ({
+  postIopChromeToIframe: (...args) => mockPostChrome(...args),
+}));
+
+const routePrefix = '/foreman_rh_cloud/insights_example';
+
+const defaultProps = {
+  appName: 'Example',
+  iframeSrc: 'https://example.test/assets/apps/example/index.html',
+  getAppRoute: pathname =>
+    pathname.startsWith(routePrefix)
+      ? pathname.slice(routePrefix.length).replace(/^\//, '') || 'dashboard'
+      : 'dashboard',
+  getForemanPath: appRoute => `${routePrefix}/${appRoute}`,
+  defaultAppRoute: 'dashboard',
+  readyMessageType: 'IOP_EXAMPLE_READY',
+  navigateMessageType: 'IOP_EXAMPLE_NAVIGATE',
+  className: 'example-iframe',
+  testId: 'example-iframe',
+};
+
+describe('IopAppIframe', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('posts chrome context derived from the Foreman pathname', () => {
+    const { getByTestId } = render(
+      <MemoryRouter initialEntries={[`${routePrefix}/cves`]}>
+        <Route path="*">
+          <IopAppIframe {...defaultProps} />
+        </Route>
+      </MemoryRouter>
+    );
+
+    fireEvent.load(getByTestId('example-iframe'));
+
+    expect(mockPostChrome).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining({
+        appRoute: 'cves',
+        pathname: `${routePrefix}/cves`,
+      })
+    );
+  });
+
+  it('pushes Foreman path when the iframe sends NAVIGATE', () => {
+    render(
+      <MemoryRouter initialEntries={[`${routePrefix}/dashboard`]}>
+        <Route path="*">
+          <IopAppIframe {...defaultProps} />
+        </Route>
+      </MemoryRouter>
+    );
+
+    window.dispatchEvent(
+      new MessageEvent('message', {
+        origin: window.location.origin,
+        data: {
+          type: 'IOP_EXAMPLE_NAVIGATE',
+          payload: { appRoute: 'cves/cve-1' },
+        },
+      })
+    );
+
+    expect(mockHistoryPush).toHaveBeenCalledWith(`${routePrefix}/cves/cve-1`);
+  });
+});

data/webpack/common/IopIframe/__tests__/IopHostDetailsIframeTab.test.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import IopHostDetailsIframeTab from '../IopHostDetailsIframeTab';
+import { OVERVIEW_TAB_PATH } from '../../../ForemanRhCloudHelpers';
+
+const mockHistoryReplace = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useHistory: () => ({
+    replace: mockHistoryReplace,
+  }),
+}));
+
+jest.mock('foremanReact/Root/Context/ForemanContext', () => ({
+  useForemanContext: () => ({
+    metadata: {
+      permissions: new Set(['view_hosts']),
+    },
+  }),
+  useForemanPermissions: () => new Set(['view_hosts']),
+}));
+
+const mockPostChrome = jest.fn();
+jest.mock('../postIopChromeToIframe', () => ({
+  postIopChromeToIframe: (...args) => mockPostChrome(...args),
+}));
+
+const defaultResponse = {
+  id: 1,
+  operatingsystem_name: 'Red Hat Enterprise Linux 8',
+  insights_attributes: { uuid: 'insights-1' },
+  subscription_facet_attributes: { uuid: 'inv-123' },
+};
+
+const defaultProps = {
+  response: defaultResponse,
+  iframeSrc: 'https://example.test/assets/apps/example/index.html',
+  buildAppRoute: inventoryId => `systems/${inventoryId}`,
+  title: 'Example',
+  readyMessageType: 'IOP_EXAMPLE_READY',
+  className: 'example-host-tab',
+  iframeClassName: 'example-host-iframe',
+  testId: 'example-host-iframe',
+};
+
+describe('IopHostDetailsIframeTab', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders iframe and posts host-tab chrome on load', () => {
+    const { getByTestId, container } = render(
+      <MemoryRouter>
+        <IopHostDetailsIframeTab {...defaultProps} />
+      </MemoryRouter>
+    );
+
+    expect(container.querySelector('.example-host-tab')).toBeTruthy();
+    const iframe = getByTestId('example-host-iframe');
+    expect(iframe.getAttribute('src')).toBe(defaultProps.iframeSrc);
+
+    fireEvent.load(iframe);
+
+    expect(mockPostChrome).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining({
+        appRoute: 'systems/inv-123',
+        embedded: 'host-tab',
+      })
+    );
+  });
+
+  it('redirects to Overview when tab should be hidden', () => {
+    const { container } = render(
+      <MemoryRouter>
+        <IopHostDetailsIframeTab
+          {...defaultProps}
+          response={{
+            id: 2,
+            operatingsystem_name: 'Ubuntu 20.04',
+            insights_attributes: { uuid: 'insights-1' },
+            subscription_facet_attributes: { uuid: 'inv-123' },
+          }}
+        />
+      </MemoryRouter>
+    );
+
+    expect(mockHistoryReplace).toHaveBeenCalledWith(OVERVIEW_TAB_PATH);
+    expect(container.querySelector('.example-host-tab')).toBeNull();
+  });
+});

data/webpack/common/IopIframe/__tests__/iopIframeHelpers.test.js

@@ -0,0 +1,63 @@
+import {
+  getIopAppRoute,
+  getIopForemanPath,
+  getIopIframeSrc,
+} from '../iopIframeHelpers';
+
+describe('iopIframeHelpers', () => {
+  const options = {
+    routePrefix: '/foreman_rh_cloud/insights_example',
+    fallbackRoute: 'dashboard',
+  };
+
+  describe('getIopAppRoute', () => {
+    it('maps foreman paths under the prefix to app routes', () => {
+      expect(
+        getIopAppRoute('/foreman_rh_cloud/insights_example/dashboard', options)
+      ).toBe('dashboard');
+      expect(
+        getIopAppRoute('/foreman_rh_cloud/insights_example/cves/cve-1', options)
+      ).toBe('cves/cve-1');
+    });
+
+    it('returns fallbackRoute for paths outside the prefix', () => {
+      expect(getIopAppRoute('/foreman_rh_cloud/other', options)).toBe(
+        'dashboard'
+      );
+    });
+
+    it('returns fallbackRoute when pathname is only the prefix', () => {
+      expect(
+        getIopAppRoute('/foreman_rh_cloud/insights_example', options)
+      ).toBe('dashboard');
+      expect(
+        getIopAppRoute('/foreman_rh_cloud/insights_example/', options)
+      ).toBe('dashboard');
+    });
+  });
+
+  describe('getIopForemanPath', () => {
+    it('maps app routes to foreman paths', () => {
+      expect(getIopForemanPath('dashboard', options)).toBe(
+        '/foreman_rh_cloud/insights_example/dashboard'
+      );
+      expect(getIopForemanPath('cves/cve-1', options)).toBe(
+        '/foreman_rh_cloud/insights_example/cves/cve-1'
+      );
+    });
+
+    it('uses fallbackRoute when appRoute is empty', () => {
+      expect(getIopForemanPath('', options)).toBe(
+        '/foreman_rh_cloud/insights_example/dashboard'
+      );
+    });
+  });
+
+  describe('getIopIframeSrc', () => {
+    it('returns origin + static app path', () => {
+      expect(getIopIframeSrc('/assets/apps/example/index.html')).toBe(
+        `${window.location.origin}/assets/apps/example/index.html`
+      );
+    });
+  });
+});

data/webpack/common/IopIframe/__tests__/postIopChromeToIframe.test.js

@@ -0,0 +1,60 @@
+import { postIopChromeToIframe } from '../postIopChromeToIframe';
+import { IOP_CHROME_INIT } from '../iopIframeConstants';
+
+describe('postIopChromeToIframe', () => {
+  it('posts appRoute and embedded mode', () => {
+    const postMessage = jest.fn();
+    const iframe = { contentWindow: { postMessage } };
+
+    postIopChromeToIframe(iframe, {
+      permissions: [{ permission: 'compliance:policies:read' }],
+      pathname: '/new/hosts/demo.example.com',
+      appRoute: 'systems/uuid-1',
+      embedded: 'host-tab',
+    });
+
+    expect(postMessage).toHaveBeenCalledWith(
+      {
+        type: IOP_CHROME_INIT,
+        payload: {
+          user: expect.any(Object),
+          permissions: [{ permission: 'compliance:policies:read' }],
+          appRoute: 'systems/uuid-1',
+          pathname: '/new/hosts/demo.example.com',
+          embedded: 'host-tab',
+        },
+      },
+      window.location.origin
+    );
+  });
+
+  it('omits embedded from payload when not provided', () => {
+    const postMessage = jest.fn();
+    const iframe = { contentWindow: { postMessage } };
+
+    postIopChromeToIframe(iframe, {
+      permissions: [],
+      pathname: '/foreman_rh_cloud/insights_compliance/scappolicies',
+      appRoute: 'scappolicies',
+    });
+
+    expect(postMessage).toHaveBeenCalledWith(
+      {
+        type: IOP_CHROME_INIT,
+        payload: {
+          user: expect.any(Object),
+          permissions: [],
+          appRoute: 'scappolicies',
+          pathname: '/foreman_rh_cloud/insights_compliance/scappolicies',
+        },
+      },
+      window.location.origin
+    );
+  });
+
+  it('no-ops when iframe has no contentWindow', () => {
+    expect(() =>
+      postIopChromeToIframe(null, { appRoute: 'reports' })
+    ).not.toThrow();
+  });
+});

data/webpack/common/IopIframe/__tests__/useIopIframeHeight.test.js

@@ -0,0 +1,37 @@
+import React, { useRef } from 'react';
+import { render } from '@testing-library/react';
+import { useIopIframeHeight } from '../useIopIframeHeight';
+import { IOP_IFRAME_HEIGHT } from '../iopIframeConstants';
+
+const HostTabIframe = () => {
+  const iframeRef = useRef(null);
+  useIopIframeHeight({ iframeRef });
+
+  return (
+    <iframe
+      ref={iframeRef}
+      data-testid="height-iframe"
+      title="height-iframe"
+      src="about:blank"
+    />
+  );
+};
+
+describe('useIopIframeHeight', () => {
+  it('sizes the iframe from a HEIGHT message', () => {
+    const { getByTestId } = render(<HostTabIframe />);
+    const iframe = getByTestId('height-iframe');
+
+    window.dispatchEvent(
+      new MessageEvent('message', {
+        origin: window.location.origin,
+        data: {
+          type: IOP_IFRAME_HEIGHT,
+          payload: { height: 2100 },
+        },
+      })
+    );
+
+    expect(iframe.style.height).toBe('2100px');
+  });
+});

data/webpack/common/IopIframe/iopIframeConstants.js

@@ -0,0 +1,5 @@
+// Shared postMessage types for IoP iframes.
+export const IOP_CHROME_INIT = 'IOP_CHROME_INIT';
+export const IOP_IFRAME_READY = 'IOP_IFRAME_READY';
+export const IOP_IFRAME_NAVIGATE = 'IOP_IFRAME_NAVIGATE';
+export const IOP_IFRAME_HEIGHT = 'IOP_IFRAME_HEIGHT';

data/webpack/common/IopIframe/iopIframeHelpers.js

@@ -0,0 +1,49 @@
+/**
+ * Foreman browser path for an IoP app sub-route.
+ *
+ * @param {string} appRoute Path inside the iframe application page
+ * @param {{ routePrefix: string, fallbackRoute: string }} options
+ * @returns {string}
+ */
+export const getIopForemanPath = (
+  appRoute = '',
+  { routePrefix, fallbackRoute } = {}
+) => {
+  const subRoute = String(appRoute).replace(/^\/+/, '') || fallbackRoute;
+
+  return `${routePrefix}/${subRoute}`;
+};
+
+/**
+ * Path inside the iframe application page derived from a Foreman pathname.
+ *
+ * @param {string} pathname Foreman location pathname
+ * @param {{ routePrefix: string, fallbackRoute: string }} options
+ * @returns {string}
+ */
+export const getIopAppRoute = (
+  pathname = '',
+  { routePrefix, fallbackRoute } = {}
+) => {
+  if (!pathname.startsWith(routePrefix)) {
+    return fallbackRoute;
+  }
+
+  const subRoute = pathname.slice(routePrefix.length).replace(/^\//, '');
+
+  return subRoute || fallbackRoute;
+};
+
+/**
+ * Absolute URL for a static IoP app entry under Satellite assets.
+ *
+ * @param {string} staticAppPath e.g. /assets/apps/compliance/index.html
+ * @returns {string}
+ */
+export const getIopIframeSrc = staticAppPath => {
+  if (typeof window === 'undefined') {
+    return staticAppPath;
+  }
+
+  return `${window.location.origin}${staticAppPath}`;
+};

data/webpack/common/IopIframe/postIopChromeToIframe.js

@@ -0,0 +1,35 @@
+import { mockUser } from '../ScalprumModule/ScalprumContext';
+import { IOP_CHROME_INIT } from './iopIframeConstants';
+
+/**
+ * Sends chrome/RBAC context into an IoP app iframe after it loads.
+ *
+ * @param {HTMLIFrameElement} iframe
+ * @param {Object} options
+ * @param {Array} options.permissions Insights-format permissions from useInsightsPermissions
+ * @param {string} options.appRoute Path inside the iframe application page (e.g. reports, systems/<uuid>)
+ * @param {string} [options.pathname] Foreman pathname (informational; passed through to the child)
+ * @param {string} [options.embedded] Embedding mode for the iframe (e.g. 'host-tab')
+ */
+export const postIopChromeToIframe = (
+  iframe,
+  { permissions = [], pathname = '', appRoute = '', embedded } = {}
+) => {
+  if (!iframe?.contentWindow || typeof window === 'undefined') {
+    return;
+  }
+
+  iframe.contentWindow.postMessage(
+    {
+      type: IOP_CHROME_INIT,
+      payload: {
+        user: mockUser,
+        permissions,
+        appRoute,
+        pathname,
+        ...(embedded ? { embedded } : {}),
+      },
+    },
+    window.location.origin
+  );
+};

data/webpack/common/IopIframe/useIopIframeChrome.js

@@ -0,0 +1,54 @@
+import { useCallback, useEffect } from 'react';
+import { postIopChromeToIframe } from './postIopChromeToIframe';
+
+/**
+ * Posts IOP chrome context into an iframe and re-posts when the child signals READY.
+ *
+ * @param {Object} options
+ * @param {React.RefObject} options.iframeRef
+ * @param {Array} options.permissions
+ * @param {string} options.appRoute
+ * @param {string} [options.pathname]
+ * @param {string} [options.embedded]
+ * @param {string} options.readyMessageType postMessage type from the child (e.g. IOP_COMPLIANCE_READY)
+ * @returns {Function} sendChromeContext — also pass to iframe onLoad
+ */
+export const useIopIframeChrome = ({
+  iframeRef,
+  permissions,
+  appRoute,
+  pathname = '',
+  embedded,
+  readyMessageType,
+}) => {
+  const sendChromeContext = useCallback(() => {
+    postIopChromeToIframe(iframeRef.current, {
+      permissions,
+      appRoute,
+      pathname,
+      embedded,
+    });
+  }, [appRoute, embedded, iframeRef, pathname, permissions]);
+
+  useEffect(() => {
+    sendChromeContext();
+  }, [sendChromeContext]);
+
+  useEffect(() => {
+    const handleMessage = event => {
+      if (event.origin !== window.location.origin) {
+        return;
+      }
+
+      if (event.data?.type === readyMessageType) {
+        sendChromeContext();
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+
+    return () => window.removeEventListener('message', handleMessage);
+  }, [readyMessageType, sendChromeContext]);
+
+  return sendChromeContext;
+};

data/webpack/common/IopIframe/useIopIframeHeight.js

@@ -0,0 +1,35 @@
+import { useEffect } from 'react';
+import { IOP_IFRAME_HEIGHT } from './iopIframeConstants';
+
+/**
+ * Sizes a host-details iframe from IOP_IFRAME_HEIGHT messages sent by the child.
+ *
+ * @param {Object} options
+ * @param {React.RefObject} options.iframeRef
+ */
+export const useIopIframeHeight = ({ iframeRef }) => {
+  useEffect(() => {
+    const handleMessage = event => {
+      if (event.origin !== window.location.origin) {
+        return;
+      }
+
+      if (event.data?.type !== IOP_IFRAME_HEIGHT) {
+        return;
+      }
+
+      const iframe = iframeRef.current;
+      const height = event.data.payload?.height;
+
+      if (!iframe || !height) {
+        return;
+      }
+
+      iframe.style.height = `${height}px`;
+    };
+
+    window.addEventListener('message', handleMessage);
+
+    return () => window.removeEventListener('message', handleMessage);
+  }, [iframeRef]);
+};