katello 5.0.0.rc2 → 5.0.0

data/webpack/scenes/Subscriptions/SubscriptionsPage.scss

@@ -1,5 +1,3 @@
-@import 'foremanReact/common/variables';
-
 h1[data-ouia-component-id="subscriptions-title"] {
   margin: 0;
   display: flex;
@@ -13,6 +11,7 @@ h1[data-ouia-component-id="subscriptions-title"] {
 #subscriptions-toolbar {
   .subscriptions-filter-group {
     flex-grow: 0;
+    margin-inline-end: var(--pf-v5-global--spacer--md);
   }
 
   [data-ouia-component-id="subscriptions-kebab-dropdown"] {
@@ -54,41 +53,52 @@ h1[data-ouia-component-id="subscriptions-title"] {
   }
 }
 
-#subscriptions-table {
-  .editable {
-    &.changed {
-      font-weight: bold;
-    }
+.table-index-page #subscriptions-toolbar {
+  width: 100%;
+  padding-left: var(--pf-v5-global--spacer--lg);
+  padding-right: var(--pf-v5-global--spacer--lg);
+
+  .subscriptions-toolbar-content {
+    padding-left: 0;
+    padding-right: 0;
   }
 
-  .pf-table-inline-edit {
-    tbody {
-      .form-group {
-        margin-bottom: 0;
-      }
+  .subscriptions-filter-group {
+    width: auto;
+  }
+}
 
-      tr.open-grouped-row {
-        background-color: $table-bg-hover;
+#subscriptions-table {
+  .editable.changed {
+    font-weight: var(--pf-v5-global--FontWeight--bold);
+  }
 
-        td {
-          border-bottom-color: $table-border-hover;
-        }
-      }
-    }
+  .subscriptions-table-select {
+    width: 1%;
+    white-space: nowrap;
+    vertical-align: middle;
+  }
 
-    .table-view-pf-select {
-      width: 50px;
+  .subscriptions-table-select-cell {
+    display: flex;
+    align-items: center;
+    gap: var(--pf-v5-global--spacer--sm);
+    min-height: var(--pf-v5-global--FontSize--xl);
+  }
 
-      .collapse-subscription-group-button {
-        margin-top: 4px;
-        cursor: pointer;
-        float: left;
-        font-weight: bold;
-      }
+  .collapse-subscription-group-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    line-height: 1;
+  }
 
-      input[type='checkbox'] {
-        float: right;
-      }
+  tr.open-grouped-row {
+    background-color: var(--pf-v5-global--BackgroundColor--200);
+
+    td {
+      border-bottom-color: var(--pf-v5-global--BorderColor--100);
     }
   }
 }

data/webpack/scenes/Subscriptions/UpstreamSubscriptions/UpstreamSubscriptionsActions.js

@@ -6,7 +6,6 @@ import api, { orgId } from '../../../services/api';
 import { apiError, getResponseErrorMsgs } from '../../../utils/helpers';
 import {
   SAVE_UPSTREAM_SUBSCRIPTIONS_KEY,
-  PING_UPSTREAM_SUBSCRIPTIONS_KEY,
   PING_UPSTREAM_SUBSCRIPTIONS_SUCCESS,
   PING_UPSTREAM_SUBSCRIPTIONS_FAILURE,
 } from './UpstreamSubscriptionsConstants';
@@ -34,12 +33,16 @@ export const saveUpstreamSubscriptions = (params, handleSuccess) =>
     handleSuccess,
   });
 
-const pingUpstreamSubscriptions = () => dispatch =>
-  dispatch(APIActions.get({
-    key: PING_UPSTREAM_SUBSCRIPTIONS_KEY,
-    url: api.getApiUrl(`/organizations/${orgId()}/upstream_subscriptions/ping`),
-    handleSuccess: () => dispatch({ type: PING_UPSTREAM_SUBSCRIPTIONS_SUCCESS }),
-    handleError: error => dispatch(apiError(PING_UPSTREAM_SUBSCRIPTIONS_FAILURE, error)),
-  }));
+const pingUpstreamSubscriptions = () => async (dispatch) => {
+  try {
+    const { data } = await api.get(`/organizations/${orgId()}/upstream_subscriptions/ping`);
+    return dispatch({
+      type: PING_UPSTREAM_SUBSCRIPTIONS_SUCCESS,
+      payload: data,
+    });
+  } catch (error) {
+    return dispatch(apiError(PING_UPSTREAM_SUBSCRIPTIONS_FAILURE, error));
+  }
+};
 
 export default pingUpstreamSubscriptions;

data/webpack/scenes/Subscriptions/UpstreamSubscriptions/UpstreamSubscriptionsConstants.js

@@ -1,6 +1,5 @@
 export const UPSTREAM_SUBSCRIPTIONS_KEY = 'UPSTREAM_SUBSCRIPTIONS';
 export const SAVE_UPSTREAM_SUBSCRIPTIONS_KEY = 'SAVE_UPSTREAM_SUBSCRIPTIONS';
-export const PING_UPSTREAM_SUBSCRIPTIONS_KEY = 'PING_UPSTREAM_SUBSCRIPTIONS';
 
 export const PING_UPSTREAM_SUBSCRIPTIONS_SUCCESS = 'PING_UPSTREAM_SUBSCRIPTIONS_SUCCESS';
 export const PING_UPSTREAM_SUBSCRIPTIONS_FAILURE = 'PING_UPSTREAM_SUBSCRIPTIONS_FAILURE';

data/webpack/scenes/Subscriptions/__tests__/SubscriptionsPage.test.js

@@ -1,85 +1,112 @@
 import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { act } from 'react-dom/test-utils';
+import { useSelector } from 'react-redux';
 import SubscriptionsPage from '../SubscriptionsPage';
-import { successState, permissionDeniedState } from './subscriptions.fixtures';
-import { loadAvailableQuantities, updateQuantity } from '../SubscriptionActions';
-import pingUpstreamSubscriptions from '../UpstreamSubscriptions/UpstreamSubscriptionsActions';
+
+const mockDispatch = jest.fn();
+const mockSelectorState = {
+  organization: { id: 1, owner_details: { upstreamConsumer: {} } },
+  missingPermissionsFromApi: null,
+};
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useDispatch: () => mockDispatch,
+  useSelector: jest.fn(),
+}));
 
 jest.mock('foremanReact/components/PermissionDenied', () => ({
-  __esModule: true, default: ({ missingPermissions }) => <div>PermissionDenied: {missingPermissions.join(', ')}</div>,
+  __esModule: true,
+  default: ({ missingPermissions }) => (
+    <div>{`PermissionDenied: ${missingPermissions.join(', ')}`}</div>
+  ),
+}));
+jest.mock('foremanReact/components/ForemanModal', () => ({
+  __esModule: true,
+  default: () => <div>ForemanModal Mock</div>,
 }));
-jest.mock('foremanReact/components/ForemanModal', () => (<div>ForemanModal Mock</div>));
 jest.mock('../Manifest/', () => ({
   __esModule: true, default: () => <div>ManageManifestModal Mock</div>,
 }));
-jest.mock('../components/SubscriptionsTable', () => ({
-  SubscriptionsTable: () => <div>SubscriptionsTable Mock</div>,
-}));
+jest.mock('../components/SubscriptionsTable/SubscriptionsTable', () => {
+  /* eslint-disable global-require, react/prop-types */
+  const MockReact = require('react');
+  const MockSubscriptionsTable = ({ customHeader, customToolbar, onApiResponse }) => {
+    MockReact.useEffect(() => {
+      if (!onApiResponse) return undefined;
+      if (mockSelectorState.missingPermissionsFromApi) {
+        onApiResponse({
+          results: [],
+          loading: false,
+          missingPermissions: mockSelectorState.missingPermissionsFromApi,
+          activePermissions: {},
+        });
+        return undefined;
+      }
+      onApiResponse({
+        results: [],
+        loading: false,
+        itemCount: 0,
+        page: 1,
+        perPage: 20,
+        searchIsActive: false,
+        activePermissions: {
+          can_import_manifest: true,
+          can_delete_manifest: true,
+          can_manage_subscription_allocations: true,
+          can_edit_organizations: true,
+        },
+      });
+      return undefined;
+    }, [onApiResponse]);
+
+    return (
+      <div>
+        {customHeader}
+        {customToolbar}
+        <div>SubscriptionsTable Mock</div>
+      </div>
+    );
+  };
+  /* eslint-enable global-require, react/prop-types */
+  return {
+    __esModule: true,
+    default: MockSubscriptionsTable,
+  };
+});
 jest.mock('../components/SubscriptionsToolbar', () => ({
   __esModule: true, default: () => <div>SubscriptionsToolbar Mock</div>,
 }));
-jest.mock('foremanReact/components/PF4/TableIndexPage/Table/TableIndexHooks', () => ({
-  useCurrentUserTablePreferences: jest.fn(() => ({
+jest.mock('foremanReact/components/PF4/TableIndexPage/Table/TableIndexHooks', () => {
+  const mockPrefs = {
     columns: [],
     hasPreference: false,
     currentUserId: 1,
-  })),
-}));
-
-
-const pollTasks = jest.fn();
-const handleStartTask = jest.fn();
-const handleFinishedTask = jest.fn();
-const mockLoadSubscriptions = jest.fn();
-const mockLoadTableColumns = jest.fn();
+  };
+  return {
+    useCurrentUserTablePreferences: jest.fn(() => mockPrefs),
+  };
+});
 
-afterEach(() => {
-  pollTasks.mockClear();
-  handleStartTask.mockClear();
-  handleFinishedTask.mockClear();
-  mockLoadSubscriptions.mockClear();
-  mockLoadTableColumns.mockClear();
+const buildReduxState = () => ({
+  katello: {
+    organization: mockSelectorState.organization,
+  },
+  intervals: {},
+  API: {},
 });
 
 describe('subscriptions page', () => {
-  const noop = () => {
-  };
-  const organization = { owner_details: { upstreamConsumer: {} } };
-
-  const getDefaultProps = (subscriptionState = successState) => ({
-    setModalOpen: noop,
-    setModalClosed: noop,
-    organization,
-    subscriptions: subscriptionState,
-    loadTableColumns: mockLoadTableColumns,
-    loadSubscriptions: mockLoadSubscriptions,
-    loadAvailableQuantities,
-    pingUpstreamSubscriptions,
-    updateQuantity,
-    handleStartTask,
-    handleFinishedTask,
-    pollTaskUntilDone: noop,
-    pollBulkSearch: noop,
-    pollTasks,
-    cancelPollTasks: noop,
-    deleteSubscriptions: () => {},
-    resetTasks: noop,
-    uploadManifest: noop,
-    deleteManifest: noop,
-    refreshManifest: noop,
-    updateSearchQuery: noop,
-    openManageManifestModal: noop,
-    closeManageManifestModal: noop,
-    openDeleteModal: noop,
-    closeDeleteModal: noop,
-    disableDeleteButton: noop,
-    enableDeleteButton: noop,
+  beforeEach(() => {
+    mockDispatch.mockClear();
+    mockSelectorState.organization = { id: 1, owner_details: { upstreamConsumer: {} } };
+    mockSelectorState.missingPermissionsFromApi = null;
+    useSelector.mockImplementation(selector => selector(buildReduxState()));
   });
 
-  it('should render', async () => {
-    render(<SubscriptionsPage {...getDefaultProps()} />);
+  it('should render', () => {
+    render(<SubscriptionsPage />);
 
     expect(screen.getByText('Subscriptions')).toBeInTheDocument();
     expect(screen.getByText('SubscriptionsToolbar Mock')).toBeInTheDocument();
@@ -87,170 +114,42 @@ describe('subscriptions page', () => {
     expect(screen.getByText('ManageManifestModal Mock')).toBeInTheDocument();
   });
 
-  it('should render <PermissionDenied /> when permissions are missing', async () => {
-    render(<SubscriptionsPage {...getDefaultProps(permissionDeniedState)} />);
+  it('should render <PermissionDenied /> when subscription permissions are missing', () => {
+    mockSelectorState.missingPermissionsFromApi = ['view_subscriptions'];
+    render(<SubscriptionsPage />);
 
-    // Check that PermissionDenied is rendered
     expect(screen.getByText(/PermissionDenied:/)).toBeInTheDocument();
-
-    // Should not render the normal subscriptions page content
-    expect(screen.queryByText('SubscriptionsTable Mock')).not.toBeInTheDocument();
+    expect(screen.getByText(/view_subscriptions/)).toBeInTheDocument();
   });
 
-  it('should render <PermissionDenied /> when organization load fails with 403', async () => {
-    const orgWith403Error = {
+  it('should render <PermissionDenied /> when organization load fails with 403', () => {
+    mockSelectorState.organization = {
       loading: false,
-      error: {
-        response: {
-          status: 403,
-        },
-      },
+      error: { response: { status: 403 } },
     };
-
-    render(<SubscriptionsPage
-      {...getDefaultProps()}
-      organization={orgWith403Error}
-    />);
+    render(<SubscriptionsPage />);
 
     expect(screen.getByText(/PermissionDenied:/)).toBeInTheDocument();
     expect(screen.getByText(/You do not have permission to view this organization/)).toBeInTheDocument();
   });
 
-  it('should render <PermissionDenied /> when organization load fails with 404', async () => {
-    const orgWith404Error = {
+  it('should render <PermissionDenied /> when organization load fails with 404', () => {
+    mockSelectorState.organization = {
       loading: false,
-      error: {
-        response: {
-          status: 404,
-        },
-      },
+      error: { response: { status: 404 } },
     };
-
-    render(<SubscriptionsPage
-      {...getDefaultProps()}
-      organization={orgWith404Error}
-    />);
+    render(<SubscriptionsPage />);
 
     expect(screen.getByText(/PermissionDenied:/)).toBeInTheDocument();
-    expect(screen.getByText(/You do not have permission to view this organization/)).toBeInTheDocument();
   });
 
-  it('should not render <PermissionDenied /> when organization is still loading', async () => {
-    const orgStillLoading = {
+  it('should not render <PermissionDenied /> when organization is still loading', () => {
+    mockSelectorState.organization = {
       loading: true,
-      error: {
-        response: {
-          status: 403,
-        },
-      },
+      error: { response: { status: 403 } },
     };
+    render(<SubscriptionsPage />);
 
-    render(<SubscriptionsPage
-      {...getDefaultProps()}
-      organization={orgStillLoading}
-    />);
-
-    // Should not show PermissionDenied while organization is still loading
     expect(screen.queryByText(/PermissionDenied:/)).not.toBeInTheDocument();
   });
-
-  it('should render loading state when subscriptions are loading', () => {
-    const loadingSubscriptionsState = {
-      ...successState,
-      loading: true,
-      results: [],
-    };
-
-    render(<SubscriptionsPage
-      {...getDefaultProps(loadingSubscriptionsState)}
-    />);
-
-    expect(screen.getByText('SubscriptionsTable Mock')).toBeInTheDocument();
-  });
-
-  it('should render empty state when manifest is imported but no subscriptions', () => {
-    const emptySubscriptionsState = {
-      ...successState,
-      loading: false,
-      results: [],
-    };
-
-    render(<SubscriptionsPage
-      {...getDefaultProps(emptySubscriptionsState)}
-      isManifestImported
-    />);
-
-    // SubscriptionsTable should be rendered (emptyState is passed as prop)
-    expect(screen.getByText('SubscriptionsTable Mock')).toBeInTheDocument();
-  });
-
-  it('should render empty state prompting manifest import when no manifest', () => {
-    const emptySubscriptionsState = {
-      ...successState,
-      loading: false,
-      results: [],
-    };
-
-    render(<SubscriptionsPage
-      {...getDefaultProps(emptySubscriptionsState)}
-      isManifestImported={false}
-    />);
-
-    // SubscriptionsTable should be rendered
-    expect(screen.getByText('SubscriptionsTable Mock')).toBeInTheDocument();
-  });
-
-  it('should poll tasks when org changes', async () => {
-    const { rerender } = render(<SubscriptionsPage {...getDefaultProps()} />);
-
-    await act(async () => {
-      rerender(<SubscriptionsPage {...getDefaultProps()} organization={{ id: 1 }} />);
-    });
-
-    await waitFor(() => {
-      expect(pollTasks).toHaveBeenCalled();
-      expect(mockLoadSubscriptions).toHaveBeenCalled();
-      expect(mockLoadTableColumns).toHaveBeenCalled();
-    });
-  });
-
-  it('should not poll tasks if org has not changed', async () => {
-    const { rerender } = render(<SubscriptionsPage {...getDefaultProps()} />);
-
-    pollTasks.mockClear(); // Clear calls from mount
-
-    await act(async () => {
-      rerender(<SubscriptionsPage {...getDefaultProps()} />);
-    });
-
-    expect(pollTasks).not.toHaveBeenCalled();
-  });
-
-  it('should handle its task', async () => {
-    const mockTask = {
-      id: '12345',
-      humanized: {
-        action: 'Manifest Refresh',
-      },
-    };
-
-    const { rerender } = render(<SubscriptionsPage
-      {...getDefaultProps()}
-      isTaskPending
-      isPollingTask
-    />);
-
-    await act(async () => {
-      rerender(<SubscriptionsPage
-        {...getDefaultProps()}
-        task={mockTask}
-        isPollingTask
-        isTaskPending={false}
-      />);
-    });
-
-    await waitFor(() => {
-      expect(handleFinishedTask).toHaveBeenCalledWith(mockTask);
-    });
-  });
 });

data/webpack/scenes/Subscriptions/__tests__/subscriptions.fixtures.js

@@ -1,5 +1,9 @@
 import Immutable from 'seamless-immutable';
 import { toastErrorAction, failureAction } from '../../../services/api/testHelpers';
+import {
+  UPDATE_QUANTITY_KEY,
+  SUBSCRIPTIONS_QUANTITIES_KEY,
+} from '../SubscriptionConstants';
 
 export const initialState = Immutable({
   loading: true,
@@ -368,27 +372,27 @@ export const poolsUpdate = [{
 
 export const updateQuantitySuccessActions = [
   {
-    type: 'UPDATE_QUANTITY_REQUEST',
+    type: `${UPDATE_QUANTITY_KEY}_REQUEST`,
   },
   {
-    type: 'UPDATE_QUANTITY_SUCCESS',
+    type: `${UPDATE_QUANTITY_KEY}_SUCCESS`,
     response: requestSuccessResponse,
   },
 ];
 
 export const updateQuantityFailureActions = [
   {
-    type: 'UPDATE_QUANTITY_REQUEST',
+    type: `${UPDATE_QUANTITY_KEY}_REQUEST`,
   },
-  failureAction('UPDATE_QUANTITY_FAILURE'),
+  failureAction(`${UPDATE_QUANTITY_KEY}_FAILURE`),
   toastErrorAction(),
 ];
 
 export const loadQuantitiesFailureActions = [
   {
-    type: 'SUBSCRIPTIONS_QUANTITIES_REQUEST',
+    type: `${SUBSCRIPTIONS_QUANTITIES_KEY}_REQUEST`,
   },
-  failureAction('SUBSCRIPTIONS_QUANTITIES_FAILURE', 'Request failed with status code 500'),
+  failureAction(`${SUBSCRIPTIONS_QUANTITIES_KEY}_FAILURE`, 'Request failed with status code 500'),
   toastErrorAction('Request failed with status code 500'),
 ];
 
@@ -396,10 +400,10 @@ export const loadQuantitiesSuccessActionPayload = { 4: 100, 5: 100, 6: 40 };
 
 export const loadQuantitiesSuccessActions = [
   {
-    type: 'SUBSCRIPTIONS_QUANTITIES_REQUEST',
+    type: `${SUBSCRIPTIONS_QUANTITIES_KEY}_REQUEST`,
   },
   {
-    type: 'SUBSCRIPTIONS_QUANTITIES_SUCCESS',
+    type: `${SUBSCRIPTIONS_QUANTITIES_KEY}_SUCCESS`,
     payload: loadQuantitiesSuccessActionPayload,
   },
 ];