Conditionally hide UI components and enable inventory sync in IOP mode

- Enable inventory synchronization in local advisor engine environments
- Hide cloud-specific UI elements when use_iop_mode is true
- Conditionally display settings based on iop mode

This allows inventory sync to run in IOP mode while hiding cloud-specific
UI components that are not relevant in local advisor engine environments.

Author: nofaralfasi

lib/inventory_sync/async/inventory_hosts_sync.rb

@@ -8,8 +8,6 @@ class InventoryHostsSync < QueryInventoryJob
       set_callback :step, :around, :create_missing_hosts
 
       def plan(organizations)
-        # Do not run for local advisor, since we use sub-man id to identify hosts.
-        return if ForemanRhCloud.with_iop_smart_proxy?
         # by default the tasks will be executed concurrently
         super(organizations)
         plan_self_host_sync

webpack/ForemanInventoryUpload/Components/PageHeader/PageHeader.js

@@ -6,26 +6,33 @@ import InventoryFilter from '../InventoryFilter';
 import ToolbarButtons from './components/ToolbarButtons';
 import SettingsWarning from './components/SettingsWarning';
 import PageTitle from './PageTitle';
+import { useAdvisorEngineConfig } from '../../../common/Hooks/ConfigHooks';
 import './PageHeader.scss';
 
-const PageHeader = () => (
-  <div className="inventory-upload-header">
-    <SettingsWarning />
-    <PageTitle />
-    <div className="inventory-upload-header-description">
-      <InventorySettings />
-      <PageDescription />
+const PageHeader = () => {
+  const useIopMode = useAdvisorEngineConfig();
+
+  return (
+    <div className="inventory-upload-header">
+      <SettingsWarning />
+      <PageTitle />
+      {!useIopMode && (
+        <div className="inventory-upload-header-description">
+          <InventorySettings />
+          <PageDescription />
+        </div>
+      )}
+      <Grid.Row>
+        <Grid.Col xs={4}>
+          <InventoryFilter />
+        </Grid.Col>
+        <Grid.Col xs={7} xsOffset={1}>
+          <ToolbarButtons />
+        </Grid.Col>
+      </Grid.Row>
     </div>
-    <Grid.Row>
-      <Grid.Col xs={4}>
-        <InventoryFilter />
-      </Grid.Col>
-      <Grid.Col xs={7} xsOffset={1}>
-        <ToolbarButtons />
-      </Grid.Col>
-    </Grid.Row>
-  </div>
-);
+  );
+};
 
 PageHeader.propTypes = {};
 

webpack/ForemanInventoryUpload/Components/PageHeader/__tests__/PageHeader.test.js

@@ -1,13 +1,114 @@
-import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
-
+import React from 'react';
+import { screen } from '@testing-library/react';
+import { rtlHelpers } from 'foremanReact/common/rtlTestHelpers';
 import PageHeader from '../PageHeader';
+import { useAdvisorEngineConfig } from '../../../../common/Hooks/ConfigHooks';
+
+// Mock the config hook
+jest.mock('../../../../common/Hooks/ConfigHooks', () => ({
+  useAdvisorEngineConfig: jest.fn(),
+}));
+
+const { renderWithStore } = rtlHelpers;
 
-const fixtures = {
-  'render without Props': {},
-  /** fixtures, props for the component */
-};
+// Mock child components to isolate PageHeader testing
+// This prevents child component complexity from affecting our tests
+jest.mock('../components/SettingsWarning', () => () => (
+  <div data-testid="settings-warning">SettingsWarning</div>
+));
+jest.mock('../PageTitle', () => () => (
+  <div data-testid="page-title">PageTitle</div>
+));
+jest.mock('../../InventorySettings', () => () => (
+  <div data-testid="inventory-settings">InventorySettings</div>
+));
+jest.mock('../components/PageDescription', () => () => (
+  <div data-testid="page-description">PageDescription</div>
+));
+jest.mock('../../InventoryFilter', () => () => (
+  <div data-testid="inventory-filter">InventoryFilter</div>
+));
+jest.mock('../components/ToolbarButtons', () => () => (
+  <div data-testid="toolbar-buttons">ToolbarButtons</div>
+));
 
 describe('PageHeader', () => {
-  describe('rendering', () =>
-    testComponentSnapshotsWithFixtures(PageHeader, fixtures));
+  describe('component behavior', () => {
+    test('renders all components when not in IoP mode', () => {
+      useAdvisorEngineConfig.mockReturnValue(false);
+
+      renderWithStore(<PageHeader />);
+
+      // All components should be present when not in IoP mode
+      expect(screen.getByTestId('settings-warning')).toBeTruthy();
+      expect(screen.getByTestId('page-title')).toBeTruthy();
+      expect(screen.getByTestId('inventory-settings')).toBeTruthy();
+      expect(screen.getByTestId('page-description')).toBeTruthy();
+      expect(screen.getByTestId('inventory-filter')).toBeTruthy();
+      expect(screen.getByTestId('toolbar-buttons')).toBeTruthy();
+    });
+
+    test('hides inventory settings and description when in IoP mode', () => {
+      useAdvisorEngineConfig.mockReturnValue(true);
+
+      renderWithStore(<PageHeader />);
+
+      // Core components should still be present
+      expect(screen.getByTestId('settings-warning')).toBeTruthy();
+      expect(screen.getByTestId('page-title')).toBeTruthy();
+      expect(screen.getByTestId('inventory-filter')).toBeTruthy();
+      expect(screen.getByTestId('toolbar-buttons')).toBeTruthy();
+
+      // These components should be hidden in IoP mode
+      expect(screen.queryByTestId('inventory-settings')).toBeNull();
+      expect(screen.queryByTestId('page-description')).toBeNull();
+    });
+
+    test('renders with correct CSS class', () => {
+      useAdvisorEngineConfig.mockReturnValue(false);
+
+      const { container } = renderWithStore(<PageHeader />);
+
+      expect(container.querySelector('.inventory-upload-header')).toBeTruthy();
+    });
+
+    test('renders grid layout with correct structure', () => {
+      useAdvisorEngineConfig.mockReturnValue(false);
+
+      const { container } = renderWithStore(<PageHeader />);
+
+      const gridRow = container.querySelector('.row');
+      expect(gridRow).toBeTruthy();
+
+      const filterColumn = container.querySelector('.col-xs-4');
+      expect(filterColumn).toBeTruthy();
+
+      const toolbarColumn = container.querySelector('.col-xs-7');
+      expect(toolbarColumn).toBeTruthy();
+    });
+
+    test('renders description section only when not in IoP mode', () => {
+      useAdvisorEngineConfig.mockReturnValue(false);
+
+      const { container } = renderWithStore(<PageHeader />);
+
+      // Description section should be present when not in IoP mode
+      const descriptionSection = container.querySelector(
+        '.inventory-upload-header-description'
+      );
+      expect(descriptionSection).toBeTruthy();
+    });
+
+    test('does not render description section when in IoP mode', () => {
+      useAdvisorEngineConfig.mockReturnValue(true);
+
+      const { container } = renderWithStore(<PageHeader />);
+
+      // Description section should not be present in IoP mode
+      const descriptionSection = container.querySelector(
+        '.inventory-upload-header-description'
+      );
+      expect(descriptionSection).toBeNull();
+    });
+  });
 });

webpack/ForemanInventoryUpload/Components/PageHeader/__tests__/__snapshots__/PageHeader.test.js.snap

@@ -4,19 +4,21 @@ import SyncButton from '../SyncButton';
 import CloudConnectorButton from '../CloudConnectorButton';
 import './toolbarButtons.scss';
 import { selectSubscriptionConnectionEnabled } from '../../../InventorySettings/InventorySettingsSelectors';
+import { useAdvisorEngineConfig } from '../../../../../common/Hooks/ConfigHooks';
 
 const ToolbarButtons = () => {
   const subscriptionConnectionEnabled = useSelector(
     selectSubscriptionConnectionEnabled
   );
+  const useIopMode = useAdvisorEngineConfig();
 
   if (!subscriptionConnectionEnabled) {
     return null;
   }
 
   return (
     <div className="inventory_toolbar_buttons">
-      <CloudConnectorButton />
+      {!useIopMode && <CloudConnectorButton />}
       <SyncButton />
     </div>
   );

webpack/ForemanInventoryUpload/Components/PageHeader/components/ToolbarButtons/ToolbarButtons.js

@@ -1,60 +1,78 @@
 import React from 'react';
-import { Provider } from 'react-redux';
-import configureMockStore from 'redux-mock-store';
-import thunk from 'redux-thunk';
-import { screen, render } from '@testing-library/react';
+import { screen } from '@testing-library/react';
+import { rtlHelpers } from 'foremanReact/common/rtlTestHelpers';
 import ToolbarButtons from '../ToolbarButtons';
+import { useAdvisorEngineConfig } from '../../../../../../common/Hooks/ConfigHooks';
+import { selectSubscriptionConnectionEnabled } from '../../../../InventorySettings/InventorySettingsSelectors';
 
-const middlewares = [thunk];
-const mockStore = configureMockStore(middlewares);
-
-const renderOptions = {
-  API: {
-    INVENTORY_SETTINGS: {
-      response: { subscriptionConnectionEnabled: true },
-    },
-  },
-  ForemanRhCloud: {
-    inventoryUpload: {
-      accountsList: {
-        CloudConnectorStatus: {},
-      },
-    },
-  },
-};
+// Mock the config hook
+jest.mock('../../../../../../common/Hooks/ConfigHooks', () => ({
+  useAdvisorEngineConfig: jest.fn(),
+}));
+
+// Mock the selector
+jest.mock('../../../../InventorySettings/InventorySettingsSelectors', () => ({
+  selectSubscriptionConnectionEnabled: jest.fn(),
+}));
+
+// Mock child components to isolate ToolbarButtons testing
+jest.mock(
+  '../../SyncButton',
+  () =>
+    function MockSyncButton() {
+      return <div data-testid="sync-button">Sync all inventory status</div>;
+    }
+);
+jest.mock(
+  '../../CloudConnectorButton',
+  () =>
+    function MockCloudConnectorButton() {
+      return (
+        <div data-testid="cloud-connector-button">
+          Configure cloud connector
+        </div>
+      );
+    }
+);
+
+const { renderWithStore } = rtlHelpers;
 
 describe('ToolbarButtons', () => {
-  test('when subscription connection is enabled', () => {
-    const store = mockStore(renderOptions);
-
-    render(
-      <Provider store={store}>
-        <ToolbarButtons />
-      </Provider>
-    );
-    expect(screen.queryAllByText('Configure cloud connector')).toHaveLength(1);
-    expect(screen.queryAllByText('Sync all inventory status')).toHaveLength(1);
+  test('renders both buttons when subscription connection is enabled and not in IOP mode', () => {
+    useAdvisorEngineConfig.mockReturnValue(false);
+    selectSubscriptionConnectionEnabled.mockReturnValue(true);
+
+    renderWithStore(<ToolbarButtons />);
+
+    expect(screen.getByTestId('cloud-connector-button')).toBeTruthy();
+    expect(screen.getByTestId('sync-button')).toBeTruthy();
   });
 
-  test('when subscription connection is not enabled', () => {
-    const localSetting = {
-      API: {
-        INVENTORY_SETTINGS: {
-          response: { subscriptionConnectionEnabled: false },
-        },
-      },
-    };
-    const store = mockStore({
-      ...renderOptions,
-      ...localSetting,
-    });
-
-    render(
-      <Provider store={store}>
-        <ToolbarButtons />
-      </Provider>
-    );
-    expect(screen.queryAllByText('Configure cloud connector')).toHaveLength(0);
-    expect(screen.queryAllByText('Sync all inventory status')).toHaveLength(0);
+  test('renders only sync button when in IOP mode', () => {
+    useAdvisorEngineConfig.mockReturnValue(true);
+    selectSubscriptionConnectionEnabled.mockReturnValue(true);
+
+    renderWithStore(<ToolbarButtons />);
+
+    expect(screen.queryByTestId('cloud-connector-button')).toBeNull();
+    expect(screen.getByTestId('sync-button')).toBeTruthy();
+  });
+
+  test('renders nothing when subscription connection is not enabled', () => {
+    useAdvisorEngineConfig.mockReturnValue(false);
+    selectSubscriptionConnectionEnabled.mockReturnValue(false);
+
+    const { container } = renderWithStore(<ToolbarButtons />);
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  test('renders toolbar buttons container with correct className when enabled', () => {
+    useAdvisorEngineConfig.mockReturnValue(false);
+    selectSubscriptionConnectionEnabled.mockReturnValue(true);
+
+    const { container } = renderWithStore(<ToolbarButtons />);
+
+    expect(container.querySelector('.inventory_toolbar_buttons')).toBeTruthy();
   });
 });