katello 4.17.0 → 4.18.0.rc1

data/webpack/components/extensions/Hosts/BulkActions/BulkRepositorySetsWizard/01_BulkRepositorySetsTable.js

@@ -0,0 +1,371 @@
+import React, { useState, useContext } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Alert, Dropdown, DropdownItem, DropdownList,
+  Divider, MenuToggle, MenuToggleAction, ToolbarItem,
+} from '@patternfly/react-core';
+import {
+  Tr, Td, Tbody,
+} from '@patternfly/react-table';
+import { STATUS } from 'foremanReact/constants';
+import { useForemanOrganization } from 'foremanReact/Root/Context/ForemanContext';
+import { getPageStats, getColumnHelpers } from 'foremanReact/components/PF4/TableIndexPage/Table/helpers';
+import { useSet } from 'foremanReact/components/PF4/TableIndexPage/Table/TableHooks';
+import TableIndexPage from 'foremanReact/components/PF4/TableIndexPage/TableIndexPage';
+import { Table } from 'foremanReact/components/PF4/TableIndexPage/Table/Table';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { RowSelectTd } from 'foremanReact/components/HostsIndex/RowSelectTd';
+import SelectAllCheckbox from 'foremanReact/components/PF4/TableIndexPage/Table/SelectAllCheckbox';
+import { noop } from 'foremanReact/common/helpers';
+
+import katelloApi from '../../../../../services/api';
+import { repoSetsUrlForOrg, BulkRepositorySetsWizardContext } from './BulkRepositorySetsWizard';
+
+export const dropdownValues = {
+  0: __('No change'),
+  1: __('Override to enabled'),
+  2: __('Override to disabled'),
+  3: __('Reset to default'),
+};
+
+const ContentOverrideDropdown =
+  ({
+    repoLabel, pendingOverrides, setPendingOverrides, setShouldValidateStep1,
+  }) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const currentValue = pendingOverrides[repoLabel] ?? 0;
+    const currentLabel = dropdownValues[currentValue];
+    const onToggleClick = () => {
+      setIsOpen(!isOpen);
+    };
+    const onSelect = (_event, value) => {
+      setIsOpen(false);
+      setShouldValidateStep1(true);
+      setPendingOverrides({
+        ...pendingOverrides,
+        [repoLabel]: value,
+      });
+    };
+    return (
+      <Dropdown
+        key={`pf-ContentOverrideDropdown-${repoLabel}`}
+        isOpen={isOpen}
+        onSelect={onSelect}
+        onOpenChange={openVal => setIsOpen(!openVal)}
+        toggle={toggleRef => (
+          <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
+            {currentLabel}
+          </MenuToggle>)}
+        ouiaId={`ContentOverrideDropdown-${repoLabel}`}
+        shouldFocusToggleOnSelect
+      >
+        <DropdownList>
+          <DropdownItem value={0} key={`content-override-dropdown-${repoLabel}-no-change`} ouiaId={`content-override-dropdown-${repoLabel}-no-change`}>
+            {__('No change')}
+          </DropdownItem>
+          <DropdownItem value={1} key={`content-override-dropdown-${repoLabel}-enable`} ouiaId={`content-override-dropdown-${repoLabel}-enable`}>
+            {__('Override to enabled')}
+          </DropdownItem>
+          <DropdownItem value={2} key={`content-override-dropdown-${repoLabel}-disable`} ouiaId={`content-override-dropdown-${repoLabel}-disable`}>
+            {__('Override to disabled')}
+          </DropdownItem>
+          <Divider key="divider" />
+          <DropdownItem value={3} key={`content-override-dropdown-${repoLabel}-reset-to-default`} ouiaId={`content-override-dropdown-${repoLabel}-reset-to-default`}>
+            {__('Reset to default')}
+          </DropdownItem>
+        </DropdownList>
+      </Dropdown>
+    );
+  };
+
+ContentOverrideDropdown.propTypes = {
+  repoLabel: PropTypes.string.isRequired,
+  pendingOverrides: PropTypes.shape({
+    [PropTypes.string]: PropTypes.number,
+  }).isRequired,
+  setPendingOverrides: PropTypes.func.isRequired,
+  setShouldValidateStep1: PropTypes.func.isRequired,
+};
+
+export const BulkRepositorySetsTable = ({
+  repoSetsBulkSelect,
+  repoSetsResults,
+  repoSetsMetadata,
+  repoSetsResponse,
+}) => {
+  const {
+    selectPage,
+    selectNone,
+    selectOne,
+    isSelected,
+    selectedCount,
+    selectedResults,
+    areAllRowsSelected,
+    areAllRowsOnPageSelected,
+    updateSearchQuery,
+  } = repoSetsBulkSelect;
+
+  const repoSetsWizardContext = useContext(BulkRepositorySetsWizardContext);
+  const {
+    pendingOverrides, setPendingOverrides, shouldValidateStep1,
+    setShouldValidateStep1, repoSetsSelectionIsValid,
+    setRepoSetsParamsAndAPI,
+  } = repoSetsWizardContext;
+  const orgId = useForemanOrganization()?.id;
+  const [actionDropdownValue, setActionDropdownValue] = useState(0);
+  const [actionToggleOpen, setActionToggleOpen] = useState(false);
+
+  const {
+    total, page, subtotal, per_page: perPage,
+  } = repoSetsMetadata;
+  const apiOptions = { key: 'BULK_HOST_REPO_SETS' };
+  const { status: repoSetsLoadingStatus } = repoSetsResponse;
+  const pageStats = getPageStats({ total: subtotal, page, perPage });
+
+  const expandedRepos = useSet([]);
+  const repoIsExpanded = id => expandedRepos.has(id);
+
+  const columns = {
+    name: {
+      title: __('Name'),
+      wrapper: (repo) => {
+        const productId = repo?.product?.id;
+        const href = `/products/${productId}/repositories/`;
+        return (
+          <a target="_blank" href={href} rel="noreferrer">{repo.name}</a>
+        );
+      },
+      isSorted: true,
+      weight: 50,
+    },
+    enabled_by_default: {
+      title: __('Status'),
+      wrapper: ({ label }) => (
+        <ContentOverrideDropdown
+          key={label ?? 'no-label'}
+          repoLabel={label}
+          pendingOverrides={pendingOverrides}
+          setPendingOverrides={setPendingOverrides}
+          setShouldValidateStep1={setShouldValidateStep1}
+        />
+      ),
+      isSorted: false,
+      weight: 100,
+    },
+  };
+
+  const selectionToolbar = (
+    <ToolbarItem key="selectAll">
+      <SelectAllCheckbox
+        {...{
+          selectAll: noop,
+          selectOne,
+          updateSearchQuery,
+          selectNone,
+          selectPage,
+          selectedCount,
+          pageRowCount: pageStats.pageRowCount,
+          areAllRowsSelected,
+          areAllRowsOnPageSelected,
+        }}
+        totalCount={total}
+        areAllRowsOnPageSelected={areAllRowsOnPageSelected()}
+        areAllRowsSelected={areAllRowsSelected()}
+      />
+    </ToolbarItem>
+  );
+
+  const onToggleClick = () => {
+    setActionToggleOpen(!actionToggleOpen);
+  };
+  const handleActionToggle = (value) => {
+    const result = {};
+    selectedResults.forEach((repo) => {
+      result[repo.label] = value;
+    });
+    setPendingOverrides({ ...pendingOverrides, ...result });
+    setShouldValidateStep1(true);
+  };
+  const onSelect = (_event, value) => {
+    handleActionToggle(value);
+    setActionToggleOpen(false);
+  };
+
+  const actionButton = (
+    <Dropdown
+      isOpen={actionToggleOpen}
+      onSelect={onSelect}
+      onOpenChange={val => setActionToggleOpen(!val)}
+      key="content-override-action-dropdown"
+      ouiaId="content-override-action-dropdown"
+      toggle={toggleRef => (
+        <MenuToggle
+          ref={toggleRef}
+          onClick={onToggleClick}
+          isExpanded={actionToggleOpen}
+          variant="primary"
+          splitButtonOptions={{
+            variant: 'action',
+            items: [
+              <MenuToggleAction
+                isDisabled={selectedCount === 0}
+                id="split-button-action-example-with-toggle-button"
+                key="split-action"
+                aria-label="Action"
+                onClick={() => handleActionToggle(actionDropdownValue)}
+              >
+                {dropdownValues[actionDropdownValue]}
+              </MenuToggleAction>],
+          }}
+          aria-label="Content override action to apply to all selected repositories"
+          isDisabled={selectedCount === 0}
+        />
+      )}
+    >
+      <DropdownList>
+        {Object.entries(dropdownValues).map(([key, value]) => (
+          <DropdownItem
+            key={key}
+            value={key}
+            ouiaId={`content-override-action-dropdown-${key}`}
+            onClick={() => setActionDropdownValue(key)}
+          >
+            {value}
+          </DropdownItem>
+        ))}
+      </DropdownList>
+    </Dropdown>
+  );
+
+  const [columnNamesKeys, keysToColumnNames] = getColumnHelpers(columns);
+
+  return (
+    <>
+      {shouldValidateStep1 && !repoSetsSelectionIsValid && (
+        <Alert
+          ouiaId="no-reposet-changes-alert"
+          variant="info"
+          isInline
+          title={__('Change the status of at least one repository.')}
+          style={{ marginBottom: '1rem' }}
+        />
+      )}
+      <TableIndexPage
+        customToolbarItems={[actionButton]}
+        selectionToolbar={selectionToolbar}
+        results={repoSetsResults}
+        metadata={repoSetsMetadata}
+        response={repoSetsResponse}
+        tableType="repository_sets"
+        apiUrl={repoSetsUrlForOrg(orgId)}
+        apiOptions={apiOptions}
+        selectedCount={selectedCount}
+        selectPage={selectPage}
+        selectNone={selectNone}
+        customSearchProps={{
+          autocomplete: {
+            url: katelloApi.getApiUrl('/repository_sets/auto_complete_search'),
+          },
+        }}
+        bulkSelect={repoSetsBulkSelect}
+        updateParamsByUrl={false}
+      >
+        <Table
+          childrenOutsideTbody
+          showCheckboxes
+          rowSelectTd={RowSelectTd}
+          selectOne={selectOne}
+          isSelected={isSelected}
+          isEmbedded
+          idColumn="label"
+          columns={columns}
+          refreshData={noop}
+          url=""
+          results={repoSetsResults}
+          isPending={repoSetsLoadingStatus === STATUS.PENDING}
+          params={{ ...repoSetsMetadata, perPage, page }}
+          setParams={setRepoSetsParamsAndAPI}
+          page={page}
+          perPage={perPage}
+          itemCount={subtotal}
+        >
+          {repoSetsResults.map((result, rowIndex) => {
+            const repoLabel = result.label;
+            const isExpanded = repoIsExpanded(repoLabel);
+            return (
+              <Tbody isExpanded={isExpanded} key={`tbody1-${repoLabel}`}>
+                <Tr
+                  key={repoLabel}
+                  ouiaId={`table-row-${rowIndex}`}
+                  isClickable
+                >
+                  <Td
+                    expand={{
+                      rowIndex,
+                      isExpanded,
+                      onToggle: (_event, _rInx, isOpen) =>
+                        expandedRepos.onToggle(isOpen, repoLabel),
+                    }}
+                  />
+                  <RowSelectTd
+                    rowData={result}
+                    selectOne={selectOne}
+                    isSelected={isSelected}
+                    idColumnName="label"
+                  />
+                  {columnNamesKeys.map(k => (
+                    <Td key={k} dataLabel={keysToColumnNames[k]}>
+                      {columns[k].wrapper
+                        ? columns[k].wrapper(result)
+                        : result[k]}
+                    </Td>
+                  ))}
+                </Tr>
+                <Tr key={`child-row-${repoLabel}`} ouiaId={`child-row-${repoLabel}`} isExpanded={isExpanded}>
+                  <Td />
+                  <Td />
+                  <Td colSpan={2}>
+                    <pre style={{ marginTop: '0.63rem' }} id={`pre-repo-label-${repoLabel}`}>{repoLabel}</pre>
+                  </Td>
+                </Tr>
+              </Tbody>
+            );
+          })}
+        </Table>
+      </TableIndexPage>
+    </>
+  );
+};
+
+BulkRepositorySetsTable.propTypes = {
+  repoSetsBulkSelect: PropTypes.shape({
+    selectAll: PropTypes.func.isRequired,
+    selectPage: PropTypes.func.isRequired,
+    selectNone: PropTypes.func.isRequired,
+    selectOne: PropTypes.func.isRequired,
+    isSelected: PropTypes.func.isRequired,
+    selectedCount: PropTypes.number.isRequired,
+    areAllRowsSelected: PropTypes.func.isRequired,
+    areAllRowsOnPageSelected: PropTypes.func.isRequired,
+    updateSearchQuery: PropTypes.func.isRequired,
+    selectedResults: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  }).isRequired,
+  repoSetsResults: PropTypes.arrayOf(PropTypes.shape({})),
+  repoSetsMetadata: PropTypes.shape({
+    total: PropTypes.number,
+    page: PropTypes.number,
+    subtotal: PropTypes.number,
+    per_page: PropTypes.number,
+  }).isRequired,
+  repoSetsResponse: PropTypes.shape({
+    response: PropTypes.shape({}),
+    status: PropTypes.string,
+  }).isRequired,
+};
+
+BulkRepositorySetsTable.defaultProps = {
+  repoSetsResults: [],
+};
+
+export default BulkRepositorySetsTable;

data/webpack/components/extensions/Hosts/BulkActions/BulkRepositorySetsWizard/03_Review.js

@@ -0,0 +1,79 @@
+import React, { useContext } from 'react';
+import {
+  Badge,
+  Button,
+  Flex,
+  FlexItem,
+  Text,
+  TextContent,
+  TextVariants,
+  Grid,
+  GridItem,
+  useWizardContext,
+} from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { BulkRepositorySetsWizardContext } from './BulkRepositorySetsWizard';
+import { dropdownValues } from './01_BulkRepositorySetsTable';
+
+export const BulkRepositorySetsReview = () => {
+  const { goToStepById } = useWizardContext();
+  const {
+    pendingOverrides,
+  } = useContext(BulkRepositorySetsWizardContext);
+  const overridesEntries = Object.entries(pendingOverrides);
+  const overridesTexts = overridesEntries
+    .filter(([_repoLabel, value]) => Number(value) !== 0)
+    .map(([repoLabel, value]) => [repoLabel, dropdownValues[value]]);
+
+  return (
+    <>
+      <TextContent>
+        <Text component={TextVariants.h3} ouiaId="bulk-repo-sets-wizard-review-header">
+          {__('Review')}
+        </Text>
+        <Text component={TextVariants.p} ouiaId="bulk-repo-sets-wizard-review-description">
+          {__('Review and then click \'Set content overrides.\' Status will be changed for the selected repository sets on the selected hosts.')}
+        </Text>
+      </TextContent>
+      <Grid>
+        <GridItem span={8}>
+          <Flex>
+            <FlexItem>
+              <Text component={TextVariants.h4} ouiaId="bulk-repo-sets-wizard-review-header">
+                <strong>{__('Changed status')}</strong>
+              </Text>
+            </FlexItem>
+            <FlexItem>
+              <Badge isRead>
+                {overridesTexts.length}
+              </Badge>
+            </FlexItem>
+          </Flex>
+        </GridItem>
+        <GridItem span={4}>
+          <Text component={TextVariants.p} ouiaId="brsw-review-step-edit-wrapper">
+            <Button variant="link" onClick={() => goToStepById('brsw-step-1')} ouiaId="brsw-review-step-edit-btn">
+              {__('Edit')}
+            </Button>
+          </Text>
+        </GridItem>
+        {overridesTexts.map(([repoLabel, actionText]) => (
+          <React.Fragment key={repoLabel}>
+            <GridItem span={8}>
+              <Text component={TextVariants.p} ouiaId="brsw-review-step-repo-label">
+                {repoLabel}
+              </Text>
+            </GridItem>
+            <GridItem span={4}>
+              <Text component={TextVariants.p} ouiaId="brsw-review-step-action-text">
+                {actionText}
+              </Text>
+            </GridItem>
+          </React.Fragment>
+        ))}
+      </Grid>
+    </>
+  );
+};
+
+export default BulkRepositorySetsReview;

data/webpack/components/extensions/Hosts/BulkActions/BulkRepositorySetsWizard/03_ReviewFooter.js

@@ -0,0 +1,73 @@
+import React, { useContext } from 'react';
+import { useDispatch } from 'react-redux';
+import { translate as __ } from 'foremanReact/common/I18n';
+import {
+  Button,
+  WizardFooterWrapper,
+  useWizardContext,
+} from '@patternfly/react-core';
+import { BulkRepositorySetsWizardContext } from './BulkRepositorySetsWizard';
+import { bulkUpdateHostContentOverrides } from './actions';
+import { pendingOverrideToApiParamItem } from './helpers';
+
+export const BulkRepositorySetsReviewFooter = () => {
+  const {
+    pendingOverrides,
+    finishButtonText,
+    allStepsValid,
+    finishButtonLoading,
+    setFinishButtonLoading,
+    closeModal,
+    hostsBulkSelect,
+  } = useContext(BulkRepositorySetsWizardContext);
+
+  const { goToStepById } = useWizardContext();
+  const dispatch = useDispatch();
+
+  const overridesEntries = Object.entries(pendingOverrides);
+  const apiParams = overridesEntries
+    .map(([repoLabel, value]) => pendingOverrideToApiParamItem({ repoLabel, value }))
+    .filter(item => item);
+
+  const saveContentOverrides = () => {
+    const requestBody = {
+      included: {
+        search: hostsBulkSelect.fetchBulkParams(),
+      },
+      content_overrides: apiParams,
+    };
+    dispatch(bulkUpdateHostContentOverrides(
+      requestBody,
+      closeModal, closeModal,
+    ));
+  };
+
+  const handleFinishButtonClick = () => {
+    setFinishButtonLoading(true);
+    saveContentOverrides();
+    closeModal();
+  };
+  return (
+    <WizardFooterWrapper>
+      <Button variant="secondary" onClick={() => goToStepById('brsw-step-2')} isDisabled={finishButtonLoading} ouiaId="bulk-reposets-wiz-step3-back">
+        {__('Back')}
+      </Button>
+      <Button
+        key="bulk-repo-sets-wizard-finish-button"
+        ouiaId="bulk-repo-sets-wizard-finish-button"
+        type="submit"
+        variant="primary"
+        isLoading={finishButtonLoading}
+        isDisabled={finishButtonLoading || !allStepsValid}
+        onClick={handleFinishButtonClick}
+      >
+        {finishButtonText}
+      </Button>
+      <Button variant="link" onClick={closeModal} isDisabled={finishButtonLoading} ouiaId="bulk-repo-sets-wiz-step3-cancel">
+        {__('Cancel')}
+      </Button>
+    </WizardFooterWrapper>
+  );
+};
+
+export default BulkRepositorySetsReviewFooter;

data/webpack/components/extensions/Hosts/BulkActions/BulkRepositorySetsWizard/BulkRepositorySetsWizard.js

@@ -0,0 +1,170 @@
+import React, { useState, createContext, useContext } from 'react';
+import {
+  Text,
+  TextVariants,
+  TextContent,
+  Wizard,
+  WizardHeader,
+  WizardStep,
+} from '@patternfly/react-core';
+
+import { translate as __ } from 'foremanReact/common/I18n';
+import { useForemanModal } from 'foremanReact/components/ForemanModal/ForemanModalHooks';
+import { useBulkSelect } from 'foremanReact/components/PF4/TableIndexPage/Table/TableHooks';
+import { useForemanOrganization } from 'foremanReact/Root/Context/ForemanContext';
+import { ForemanActionsBarContext } from 'foremanReact/components/HostDetails/ActionsBar';
+import { useTableIndexAPIResponse, useSetParamsAndApiAndSearch } from 'foremanReact/components/PF4/TableIndexPage/Table/TableIndexHooks';
+
+import { BulkRepositorySetsTable } from './01_BulkRepositorySetsTable';
+import { BulkRepositorySetsReview } from './03_Review';
+import HostReview from '../HostReview';
+import katelloApi from '../../../../../services/api';
+import { useHostsBulkSelect } from '../BulkPackagesWizard/BulkPackagesWizard';
+import { BulkRepositorySetsReviewFooter } from './03_ReviewFooter';
+
+const DEFAULT_PER_PAGE = 5;
+export const BulkRepositorySetsWizardContext = createContext({});
+export const repoSetsUrlForOrg = orgId =>
+  katelloApi.getApiUrl(`/repository_sets?per_page=${DEFAULT_PER_PAGE}&include_permissions=true&enabled=true&with_custom=true&organization_id=${orgId}`);
+
+const BulkRepositorySetsWizard = () => {
+  const { modalOpen, setModalClosed: closeModal } = useForemanModal({ id: 'bulk-repo-sets-wizard' });
+  const orgId = useForemanOrganization()?.id;
+  const [pendingOverrides, setPendingOverrides] = useState({}); // { repo_label: 1 }
+  const [shouldValidateStep2, setShouldValidateStep2] = useState(false);
+  const [shouldValidateStep1, setShouldValidateStep1] = useState(false);
+  const [, setCurrentStep] = useState();
+  const onStepChange = (_event, newStep) => setCurrentStep((oldStep) => {
+    setShouldValidateStep1(true);
+    if (oldStep === 'brsw-step-2') setShouldValidateStep2(true);
+    return newStep?.id;
+  });
+  const apiOptions = { key: 'BULK_HOST_REPO_SETS' };
+
+  const finishButtonText = __('Set content overrides');
+  const replacementResponse = !modalOpen ? { response: {} } : false;
+  const { selectedCount: initialSelectedHostCount, fetchBulkParams }
+      = useContext(ForemanActionsBarContext);
+  const repoSetsResponse = useTableIndexAPIResponse({
+    replacementResponse, // don't fetch data if modal is closed
+    apiUrl: repoSetsUrlForOrg(orgId),
+    apiOptions,
+    defaultParams: { per_page: DEFAULT_PER_PAGE },
+  });
+
+  const {
+    response: {
+      results: repoSetsResults,
+      ...repoSetsMetadata
+    },
+    setAPIOptions,
+  } = repoSetsResponse;
+
+  const { total, page, subtotal } = repoSetsMetadata;
+
+  const repoSetsBulkSelect = useBulkSelect({
+    results: repoSetsResults,
+    metadata: { total, page, selectable: subtotal },
+    idColumn: 'label',
+  });
+
+  const {
+    setParamsAndAPI: setRepoSetsParamsAndAPI,
+  } = useSetParamsAndApiAndSearch({
+    defaultParams: { search: '' },
+    apiOptions,
+    setAPIOptions,
+    updateSearchQuery: repoSetsBulkSelect.updateSearchQuery,
+    pushToHistory: false,
+  });
+
+  const initialSelectedHosts = fetchBulkParams();
+
+  const hostsBulkSelect =
+    useHostsBulkSelect({ initialSelectedHosts, modalIsOpen: modalOpen });
+
+  // eslint-disable-next-line no-restricted-globals
+  const selectionIsValid = count => count > 0 || isNaN(count);
+  const pendingOverridesCount =
+    Object.values(pendingOverrides).filter(val => Number(val) !== 0).length;
+  const repoSetsSelectionIsValid =
+    selectionIsValid(pendingOverridesCount);
+  const hostSelectionIsValid = selectionIsValid(hostsBulkSelect.hostsBulkSelect.selectedCount);
+  const step1Valid = shouldValidateStep1 ? repoSetsSelectionIsValid : true;
+  const step2Valid = shouldValidateStep2 ? hostSelectionIsValid : true;
+  const allStepsValid = step1Valid && step2Valid;
+  const [finishButtonLoading, setFinishButtonLoading] = useState(false);
+
+  const BulkRepositorySetsWizardContextData = {
+    pendingOverrides,
+    setPendingOverrides,
+    finishButtonText,
+    initialSelectedHostCount,
+    shouldValidateStep1,
+    setShouldValidateStep1,
+    setShouldValidateStep2,
+    allStepsValid,
+    repoSetsSelectionIsValid,
+    setRepoSetsParamsAndAPI,
+    finishButtonLoading,
+    setFinishButtonLoading,
+    closeModal,
+    repoSetsBulkSelect,
+    repoSetsResults,
+    repoSetsMetadata,
+    repoSetsResponse,
+    hostsBulkSelect: hostsBulkSelect.hostsBulkSelect,
+  };
+  return (
+    <BulkRepositorySetsWizardContext.Provider value={BulkRepositorySetsWizardContextData}>
+      <Wizard
+        header={<WizardHeader title={__('Manage repository sets')} onClose={closeModal} />}
+        onStepChange={onStepChange}
+      >
+        <WizardStep
+          name={__('Select repository sets')}
+          id="brsw-step-1"
+          footer={{ isNextDisabled: !step1Valid, onClose: closeModal }}
+          status={step1Valid ? 'default' : 'error'}
+        >
+          <TextContent>
+            <Text component={TextVariants.h3} ouiaId="bulk-repo-sets-wizard-header">
+              {__('Select repository sets')}
+            </Text>
+            <Text component={TextVariants.p} ouiaId="bulk-repo-sets-wizard-description">
+              {__('Below you can add content overrides, which change whether a repository is enabled or disabled. Change their state one by one, or use the checkboxes and select an action to perform.')}
+            </Text>
+          </TextContent>
+          <BulkRepositorySetsTable
+            repoSetsBulkSelect={repoSetsBulkSelect}
+            repoSetsResults={repoSetsResults}
+            repoSetsMetadata={repoSetsMetadata}
+            repoSetsResponse={repoSetsResponse}
+          />
+        </WizardStep>
+        <WizardStep
+          name={__('Review hosts')}
+          id="brsw-step-2"
+          footer={{ isNextDisabled: !step2Valid, onClose: closeModal }}
+          status={step2Valid ? 'default' : 'error'}
+        >
+          <HostReview
+            key={modalOpen}
+            hostsBulkSelect={hostsBulkSelect}
+            initialSelectedHosts={initialSelectedHosts}
+            setShouldValidateStep={setShouldValidateStep2}
+          />
+        </WizardStep>
+        <WizardStep
+          name={__('Review')}
+          id="brsw-step-3"
+          footer={<BulkRepositorySetsReviewFooter />}
+        >
+          <BulkRepositorySetsReview />
+        </WizardStep>
+      </Wizard>
+    </BulkRepositorySetsWizardContext.Provider>
+  );
+};
+
+export default BulkRepositorySetsWizard;