katello 4.9.1 → 4.10.0.rc2

data/webpack/components/extensions/HostDetails/Tabs/__tests__/packageInstallModal.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { renderWithRedux, patientlyWaitFor, fireEvent, within } from 'react-testing-lib-wrapper';
 import { nockInstance, assertNockRequest, mockForemanAutocomplete } from '../../../../../test-utils/nockWrapper';
-import katelloApi, { foremanApi } from '../../../../../services/api';
+import katelloApi from '../../../../../services/api';
 import mockPackagesData from './yumInstallablePackages.fixtures.json';
 import PackageInstallModal from '../PackagesTab/PackageInstallModal';
 import { HOST_YUM_INSTALLABLE_PACKAGES_KEY } from '../PackagesTab/YumInstallablePackagesConstants';
@@ -39,9 +39,7 @@ const renderOptions = (facetAttributes = contentFacetAttributes) => ({
 });
 
 const hostYumInstallablePackages = katelloApi.getApiUrl('/packages');
-const hostPackages = foremanApi.getApiUrl('/hosts/1/packages/install');
 const autocompleteUrl = '/hosts/1/packages/auto_complete_search';
-const fakeTask = { id: '21c0f9e4-b27b-49aa-8774-6be66126043b' };
 
 const defaultQuery = {
   packages_restrict_not_installed: true,
@@ -53,11 +51,10 @@ const defaultQuery = {
 };
 
 let firstPackages;
-let secondPackages;
 
 beforeEach(() => {
   const { results } = mockPackagesData;
-  [firstPackages, secondPackages] = results;
+  [firstPackages] = results;
 });
 
 test('Can call API for installable packages and show on screen on page load', async (done) => {
@@ -74,7 +71,6 @@ test('Can call API for installable packages and show on screen on page load', as
        closeModal={jest.fn()}
        hostId={1}
        hostName="test-host"
-       showKatelloAgent={false}
        triggerPackageInstall={jest.fn()}
      />, renderOptions());
 
@@ -107,7 +103,6 @@ test('Can handle no installable packages being present', async (done) => {
       closeModal={jest.fn()}
       hostId={1}
       hostName="test-host"
-      showKatelloAgent={false}
       triggerPackageInstall={jest.fn()}
     />, renderOptions());
 
@@ -118,120 +113,6 @@ test('Can handle no installable packages being present', async (done) => {
   assertNockRequest(scope, done); // Pass jest callback to confirm test is done
 });
 
-test('Does not show katello-agent option when disabled', async (done) => {
-  const autocompleteScope = mockForemanAutocomplete(nockInstance, autocompleteUrl);
-
-  const scope = nockInstance
-    .get(hostYumInstallablePackages)
-    .query(defaultQuery)
-    .reply(200, mockPackagesData);
-
-  const {
-    getAllByText, getByText, getByRole, queryByText,
-  } = renderWithRedux(<PackageInstallModal
-    isOpen
-    closeModal={jest.fn()}
-    hostId={1}
-    hostName="test-host"
-    showKatelloAgent={false}
-    triggerPackageInstall={jest.fn()}
-  />, renderOptions());
-
-  // Assert that the packages are now showing on the screen, but wait for them to appear.
-  await patientlyWaitFor(() => expect(getAllByText(firstPackages.name)[0]).toBeInTheDocument());
-  // Assert request was made and completed, see helper function
-  // find the first table row's checkbox
-  const checkbox = getByRole('checkbox', { name: 'Select row 0' });
-  // click the checkbox to make sure the Install dropdown will be enabled
-  fireEvent.click(checkbox);
-  const footer = getByRole('contentinfo');
-  // find the dropdown to the right of the Install button
-  // (no, the other one! The one that's in the footer.)
-  const dropdown = await patientlyWaitFor(() => within(footer).getByRole('button', { name: 'Select' }));
-  fireEvent.click(dropdown);
-  expect(getByText('Install via remote execution')).toBeInTheDocument();
-  // Assert that the katello-agent option is not present
-  expect(queryByText('katello-agent')).not.toBeInTheDocument();
-
-  assertNockRequest(autocompleteScope);
-  assertNockRequest(scope, done); // Pass jest callback to confirm test is done
-});
-
-test('Shows the katello-agent option when enabled', async (done) => {
-  const autocompleteScope = mockForemanAutocomplete(nockInstance, autocompleteUrl);
-
-  const scope = nockInstance
-    .get(hostYumInstallablePackages)
-    .query(defaultQuery)
-    .reply(200, mockPackagesData);
-
-  const {
-    getAllByText, getByText, getByRole,
-  } = renderWithRedux(<PackageInstallModal
-    isOpen
-    closeModal={jest.fn()}
-    hostId={1}
-    hostName="test-host"
-    showKatelloAgent
-    triggerPackageInstall={jest.fn()}
-  />, renderOptions());
-
-  // Assert that the packages are now showing on the screen, but wait for them to appear.
-  await patientlyWaitFor(() => expect(getAllByText(firstPackages.name)[0]).toBeInTheDocument());
-  // Assert request was made and completed, see helper function
-  // find the first table row's checkbox
-  const checkbox = getByRole('checkbox', { name: 'Select row 0' });
-  // click the checkbox to make sure the Install dropdown will be enabled
-  fireEvent.click(checkbox);
-  const footer = getByRole('contentinfo');
-  const dropdown = await patientlyWaitFor(() => within(footer).getByRole('button', { name: 'Select' }));
-  fireEvent.click(dropdown);
-  expect(getByText('Install via remote execution')).toBeInTheDocument();
-  expect(getByText('Install via katello-agent')).toBeInTheDocument();
-
-  assertNockRequest(autocompleteScope);
-  assertNockRequest(scope, done); // Pass jest callback to confirm test is done
-});
-
-test('Can install packages via katello-agent', async (done) => {
-  const autocompleteScope = mockForemanAutocomplete(nockInstance, autocompleteUrl);
-
-  const scope = nockInstance
-    .get(hostYumInstallablePackages)
-    .query(defaultQuery)
-    .reply(200, mockPackagesData);
-  const installScope = nockInstance
-    .put(hostPackages, { packages: [secondPackages.name, firstPackages.name] })
-    .reply(202, fakeTask);
-  const {
-    getAllByText, getByText, getByRole,
-  } = renderWithRedux(<PackageInstallModal
-    isOpen
-    closeModal={jest.fn()}
-    hostId={1}
-    hostName="test-host"
-    showKatelloAgent
-    triggerPackageInstall={jest.fn()}
-  />, renderOptions());
-
-  await patientlyWaitFor(() => expect(getAllByText(firstPackages.name)[0]).toBeInTheDocument());
-  // find and select the first two packages
-  const checkbox1 = getByRole('checkbox', { name: 'Select row 0' });
-  const checkbox2 = getByRole('checkbox', { name: 'Select row 1' });
-  fireEvent.click(checkbox1);
-  fireEvent.click(checkbox2);
-  // click the Install dropdown
-  const footer = getByRole('contentinfo');
-  const dropdown = await patientlyWaitFor(() => within(footer).getByRole('button', { name: 'Select' }));
-  fireEvent.click(dropdown);
-  // click the katello-agent option
-  const katelloAgentOption = getByText('Install via katello-agent');
-  fireEvent.click(katelloAgentOption);
-
-  assertNockRequest(autocompleteScope);
-  assertNockRequest(scope);
-  assertNockRequest(installScope, done);
-});
 
 test('Can install a package via remote execution', async (done) => {
   const autocompleteScope = mockForemanAutocomplete(nockInstance, autocompleteUrl);
@@ -248,7 +129,6 @@ test('Can install a package via remote execution', async (done) => {
     closeModal={jest.fn()}
     hostId={1}
     hostName="test-host"
-    showKatelloAgent
     triggerPackageInstall={triggerPackageInstall}
   />, renderOptions());
 
@@ -345,38 +225,3 @@ test('Uses package_install_by_search_query template when in select all mode', as
   assertNockRequest(scope, done);
 });
 
-test('Disables the katello-agent option when in select all mode', async (done) => {
-  const autocompleteScope = mockForemanAutocomplete(nockInstance, autocompleteUrl);
-  const scope = nockInstance
-    .get(hostYumInstallablePackages)
-    .query(defaultQuery)
-    .reply(200, mockPackagesData);
-
-  const {
-    getAllByText, getByText, getByRole,
-  } = renderWithRedux(<PackageInstallModal
-    isOpen
-    closeModal={jest.fn()}
-    hostId={1}
-    hostName="test-host"
-    showKatelloAgent
-    triggerPackageInstall={jest.fn()}
-  />, renderOptions());
-
-  await patientlyWaitFor(() => expect(getAllByText(firstPackages.name)[0]).toBeInTheDocument());
-  // find and click the select all checkbox
-  const selectAllCheckbox = getByRole('checkbox', { name: 'Select all' });
-  fireEvent.click(selectAllCheckbox);
-  // find and deselect the first package
-  const checkbox1 = getByRole('checkbox', { name: 'Select row 0' });
-  fireEvent.click(checkbox1);
-  // click the Install dropdown
-  const footer = getByRole('contentinfo');
-  const dropdown = await patientlyWaitFor(() => within(footer).getByRole('button', { name: 'Select' }));
-  fireEvent.click(dropdown);
-  const katelloAgentOption = getByText('Install via katello-agent');
-  // expect the katello-agent option to be disabled
-  expect(katelloAgentOption).toHaveAttribute('aria-disabled', 'true');
-  assertNockRequest(autocompleteScope);
-  assertNockRequest(scope, done);
-});

data/webpack/components/extensions/HostDetails/hostDetailsHelpers.js

@@ -1,21 +1,3 @@
-import { propsToCamelCase } from 'foremanReact/common/helpers';
-
-export const REMOTE_EXECUTION = 'remoteExecution';
-export const KATELLO_AGENT = 'katelloAgent';
-
-export const defaultRemoteActionMethod = ({ hostDetails }) => {
-  const {
-    content_facet_attributes: contentFacetAttributes,
-  } = hostDetails;
-  const contentFacet = propsToCamelCase(contentFacetAttributes ?? {});
-  const katelloAgentAvailable = (contentFacet.katelloAgentInstalled &&
-    contentFacet.katelloAgentEnabled);
-  if (contentFacet.remoteExecutionByDefault || !katelloAgentAvailable) {
-    return REMOTE_EXECUTION;
-  }
-  return KATELLO_AGENT;
-};
-
 export const hostIsNotRegistered = ({ hostDetails }) => {
   const {
     subscription_facet_attributes: subscriptionFacetAttributes,
@@ -42,5 +24,3 @@ export const hasRequiredPermissions = (requiredPermissions = [], userPermissions
 
 export const missingRequiredPermissions = (requiredPermissions = [], userPermissions) =>
   !hasRequiredPermissions(requiredPermissions, userPermissions);
-
-export default defaultRemoteActionMethod;

data/webpack/containers/Application/config.js

@@ -3,6 +3,7 @@ import Repos from '../../scenes/RedHatRepositories';
 import Subscriptions from '../../scenes/Subscriptions';
 import UpstreamSubscriptions from '../../scenes/Subscriptions/UpstreamSubscriptions/index';
 import SubscriptionDetails from '../../scenes/Subscriptions/Details';
+import ActivationKeyDetails from '../../scenes/ActivationKeys/Details/ActivationKeyDetails';
 import SetOrganization from '../../components/SelectOrg/SetOrganization';
 import WithOrganization from '../../components/WithOrganization/withOrganization';
 import ModuleStreams from '../../scenes/ModuleStreams';
@@ -29,6 +30,10 @@ export const links = [
     path: 'subscriptions/add',
     component: WithOrganization(withHeader(UpstreamSubscriptions, { title: __('Add Subscriptions') })),
   },
+  {
+    path: 'labs/activation_keys/:id',
+    component: WithOrganization(withHeader(ActivationKeyDetails, { title: __('Activation key details') })),
+  },
   {
     // eslint-disable-next-line no-useless-escape
     path: 'subscriptions/:id([0-9]+)',

data/webpack/scenes/ActivationKeys/Details/ActivationKeyActions.js

@@ -0,0 +1,31 @@
+import { translate as __ } from 'foremanReact/common/I18n';
+import { APIActions, API_OPERATIONS, put, get } from 'foremanReact/redux/API';
+import { errorToast } from '../../Tasks/helpers';
+import katelloApi from '../../../services/api/index';
+import { ACTIVATION_KEY } from './ActivationKeyConstants';
+
+export const getActivationKey = akId => get({
+  type: API_OPERATIONS.GET,
+  key: `${ACTIVATION_KEY}_${akId}`,
+  url: katelloApi.getApiUrl(`/activation_keys/${akId}`),
+});
+
+export const putActivationKey = (akId, params, refreshActivationKeyDetails) => put({
+  type: API_OPERATIONS.PUT,
+  key: `ALTER_ACTIVATION_KEY_${akId}`,
+  url: katelloApi.getApiUrl(`/activation_keys/${akId}`),
+  successToast: () => __('Activation key details updated'),
+  errorToast,
+  params,
+  handleSuccess: refreshActivationKeyDetails,
+});
+
+export const deleteActivationKey = akId => APIActions.delete({
+  type: API_OPERATIONS.DELETE,
+  key: `${ACTIVATION_KEY}_${akId}`,
+  url: katelloApi.getApiUrl(`/activation_keys/${akId}`),
+  successToast: () => __('Activation key deleted'),
+  errorToast,
+});
+
+export default getActivationKey;

data/webpack/scenes/ActivationKeys/Details/ActivationKeyConstants.js

@@ -0,0 +1,3 @@
+export const ACTIVATION_KEY = 'ACTIVATION_KEY';
+
+export default ACTIVATION_KEY;

data/webpack/scenes/ActivationKeys/Details/ActivationKeyDetails.js

@@ -0,0 +1,127 @@
+import React, {
+  useEffect,
+  useState,
+} from 'react';
+import {
+  useDispatch,
+  useSelector,
+} from 'react-redux';
+import { translate as __ } from 'foremanReact/common/I18n';
+import PropTypes from 'prop-types';
+import { propsToCamelCase } from 'foremanReact/common/helpers';
+import { selectAPIResponse } from 'foremanReact/redux/API/APISelectors';
+import {
+  Title,
+  TextContent,
+  Text,
+  TextVariants,
+  Breadcrumb,
+  BreadcrumbItem,
+  Grid,
+  GridItem,
+  Label,
+  Split,
+  SplitItem,
+  Flex,
+  FlexItem,
+  Panel,
+} from '@patternfly/react-core';
+import './ActivationKeyDetails.scss';
+import EditModal from './components/EditModal';
+import DeleteMenu from './components/DeleteMenu';
+import { getActivationKey } from './ActivationKeyActions';
+import DeleteModal from './components/DeleteModal';
+import InactiveText from '../../ContentViews/components/InactiveText';
+
+const ActivationKeyDetails = ({ match }) => {
+  const dispatch = useDispatch();
+  const akId = match?.params?.id;
+  const akDetailsResponse = useSelector(state => selectAPIResponse(state, `ACTIVATION_KEY_${akId}`));
+  const akDetails = propsToCamelCase(akDetailsResponse);
+  const [isModalOpen, setModalOpen] = useState(false);
+
+  useEffect(() => {
+    if (akId) {
+      dispatch(getActivationKey(akId));
+    }
+  }, [akId, dispatch]);
+
+  const handleModalToggle = () => {
+    setModalOpen(!isModalOpen);
+  };
+
+  return (
+    <div >
+      <Panel className="ak-details-header">
+        <div className="breadcrumb-bar-pf4">
+          <Breadcrumb ouiaId="ak-breadcrumbs" className="breadcrumb-display">
+            <BreadcrumbItem className="breadcrumb-list" to="/activation_keys">
+              {__('Activation keys')}
+            </BreadcrumbItem>
+            <BreadcrumbItem to="#" isActive>
+              {akDetails.name}
+            </BreadcrumbItem>
+          </Breadcrumb>
+        </div>
+        <Grid>
+          <GridItem span={8} className="ak-name-wrapper">
+            <Flex justifyContent={{ default: 'jusifyContentSpaceBetween' }} alignItems={{ default: 'alignItemsCenter' }}>
+              <FlexItem>
+                <Title ouiaId="ak-title" headingLevel="h5" size="2xl" className="ak-name-truncate">
+                  {akDetails.name}
+                </Title>
+              </FlexItem>
+              <FlexItem>
+                <Split hasGutter style={{ display: 'inline-flex' }}>
+                  <SplitItem>
+                    <Label>
+                      {akDetails.usageCount ? akDetails.usageCount : 0}/{akDetails.unlimitedHosts ? __('Unlimited') : akDetails.maxHosts}
+                    </Label>
+                  </SplitItem>
+                </Split>
+              </FlexItem>
+            </Flex>
+          </GridItem>
+          <GridItem offset={8} span={4}>
+            <Flex>
+              <FlexItem align={{ default: 'align-right' }}>
+                <Split>
+                  <SplitItem>
+                    <EditModal akDetails={akDetails} akId={akId} />
+                  </SplitItem>
+                  <DeleteMenu handleModalToggle={handleModalToggle} akId={akId} />
+                </Split>
+              </FlexItem>
+            </Flex>
+          </GridItem>
+        </Grid>
+        <div className="ak-details-description">
+          {akDetails.description ?
+            <TextContent>
+              <Text ouiaId="ak-description" component={TextVariants.p}>
+                {akDetails.description}
+              </Text>
+            </TextContent> :
+            <InactiveText text={__('No description provided')} />
+          }
+        </div>
+      </Panel>
+      <DeleteModal isModalOpen={isModalOpen} handleModalToggle={handleModalToggle} akId={akId} />
+    </div>
+  );
+};
+
+export default ActivationKeyDetails;
+
+
+ActivationKeyDetails.propTypes = {
+  match: PropTypes.shape({
+    params: PropTypes.shape({
+      id: PropTypes.string,
+    }),
+  }),
+};
+
+ActivationKeyDetails.defaultProps = {
+  match: {},
+};

data/webpack/scenes/ActivationKeys/Details/ActivationKeyDetails.scss

@@ -0,0 +1,37 @@
+.ak-details-header {
+  margin: 0 24px 16px;
+  padding-top: 16px;
+}
+
+.ak-details-description {
+  padding-top: 16px;
+}
+
+.breadcrumb-bar-pf4 {
+  margin: 0 0 16px;
+}
+
+.breadcrumb-display {
+  display: block;
+}
+
+.breadcrumb-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.ak-name-truncate {
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  display: inline-block;
+  margin-right: 16px
+}
+
+.ak-name-wrapper {
+  display: inline-flex;
+  max-width: 60%;
+  margin-right: 8px;
+}

data/webpack/scenes/ActivationKeys/Details/ActivationKeyDetailsSelectors.js

@@ -0,0 +1,16 @@
+import {
+  selectAPIStatus,
+  selectAPIError,
+  selectAPIResponse,
+} from 'foremanReact/redux/API/APISelectors';
+import { STATUS } from 'foremanReact/constants';
+import { ACTIVATION_KEY } from './ActivationKeyConstants';
+
+export const selectAKDetails = state =>
+  selectAPIResponse(state, ACTIVATION_KEY) ?? {};
+
+export const selectAKDetailsStatus = state =>
+  selectAPIStatus(state, ACTIVATION_KEY) ?? STATUS.PENDING;
+
+export const selectAKDetailsError = state =>
+  selectAPIError(state, ACTIVATION_KEY);

data/webpack/scenes/ActivationKeys/Details/__tests__/activationKeyDetails.test.js

@@ -0,0 +1,117 @@
+import React from 'react';
+import { renderWithRedux, patientlyWaitFor, fireEvent } from 'react-testing-lib-wrapper';
+import { assertNockRequest, nockInstance } from '../../../../test-utils/nockWrapper';
+import ActivationKeyDetails from '../ActivationKeyDetails';
+import katelloApi from '../../../../services/api/index';
+
+const akDetails = katelloApi.getApiUrl('/activation_keys/1');
+
+const baseAKDetails = {
+  id: 1,
+  name: 'test',
+  description: 'test description',
+  unlimited_hosts: false,
+  usage_count: 1,
+  max_hosts: 4,
+};
+
+const renderOptions = {
+  initialState: {
+    // This is the API state that your tests depend on for their data
+    // You can cross reference the needed useSelectors from your tested components
+    // with the data found within the redux chrome add-on to help determine this fixture data.
+    katello: {
+      hostDetails: {},
+    },
+  },
+};
+
+test('Makes API call and displays AK details on screen', async (done) => {
+  const akScope = nockInstance
+    .get(akDetails)
+    .reply(200, baseAKDetails);
+  // eslint-disable-next-line max-len
+  const { getByText, getByRole } = renderWithRedux(<ActivationKeyDetails match={{ params: { id: '1' } }} />, renderOptions);
+  await patientlyWaitFor(() => expect(getByRole('heading', { name: 'test' })).toBeInTheDocument());
+  expect(getByText('test description')).toBeInTheDocument();
+  expect(getByText('1/4')).toBeInTheDocument();
+
+  assertNockRequest(akScope, done);
+});
+
+test('Displays placeholder when description is missing', async (done) => {
+  const akScope = nockInstance
+    .get(akDetails)
+    .reply(
+      200,
+      {
+        ...baseAKDetails,
+        description: '',
+      },
+    );
+  // eslint-disable-next-line max-len
+  const { getByText, getByRole } = renderWithRedux(<ActivationKeyDetails match={{ params: { id: '1' } }} />, renderOptions);
+  await patientlyWaitFor(() => expect(getByRole('heading', { name: 'test' })).toBeInTheDocument());
+  expect(getByText('No description provided')).toBeInTheDocument();
+
+  assertNockRequest(akScope, done);
+});
+
+test('Delete menu appears when toggle is clicked', async (done) => {
+  const akScope = nockInstance
+    .get(akDetails)
+    .reply(200, baseAKDetails);
+  // eslint-disable-next-line max-len
+  const { getByText, getByLabelText } = renderWithRedux(<ActivationKeyDetails match={{ params: { id: '1' } }} />, renderOptions);
+  const deleteToggle = getByLabelText('delete-toggle');
+  fireEvent.click(deleteToggle);
+  await patientlyWaitFor(() => expect(getByText('Delete')).toBeInTheDocument());
+
+  assertNockRequest(akScope, done);
+});
+
+test('Edit modal appears when button is clicked', async (done) => {
+  const akScope = nockInstance
+    .get(akDetails)
+    .reply(200, baseAKDetails);
+  const { getByLabelText, getByText } = renderWithRedux(<ActivationKeyDetails match={{ params: { id: '1' } }} />, renderOptions);
+  const editButton = getByLabelText('edit-button');
+  fireEvent.click(editButton);
+  await patientlyWaitFor(() => expect(getByText('Edit activation key')).toBeInTheDocument());
+
+  assertNockRequest(akScope, done);
+});
+
+test('Page displays 0 when usage count is null', async (done) => {
+  const akScope = nockInstance
+    .get(akDetails)
+    .reply(
+      200,
+      {
+        ...baseAKDetails,
+        usage_count: null,
+      },
+    );
+
+  const { getByText, getByRole } = renderWithRedux(<ActivationKeyDetails match={{ params: { id: '1' } }} />, renderOptions);
+  await patientlyWaitFor(() => expect(getByRole('heading', { name: 'test' })).toBeInTheDocument());
+  expect(getByText('0/4')).toBeInTheDocument();
+
+  assertNockRequest(akScope, done);
+});
+
+test('Delete modal appears when link is clicked', async (done) => {
+  const akScope = nockInstance
+    .get(akDetails)
+    .reply(200, baseAKDetails);
+  // eslint-disable-next-line max-len
+  const { getByText, getByLabelText } = renderWithRedux(<ActivationKeyDetails match={{ params: { id: '1' } }} />, renderOptions);
+  const deleteToggle = getByLabelText('delete-toggle');
+  fireEvent.click(deleteToggle);
+  await patientlyWaitFor(() => expect(getByText('Delete')).toBeInTheDocument());
+  const deleteLink = getByLabelText('delete-link');
+  fireEvent.click(deleteLink);
+  await patientlyWaitFor(() => expect(getByText('Activation Key will no longer be available for use. This operation cannot be undone.')).toBeInTheDocument());
+
+  assertNockRequest(akScope, done);
+});

data/webpack/scenes/ActivationKeys/Details/components/DeleteMenu.js

@@ -0,0 +1,77 @@
+import React, {
+  useState,
+} from 'react';
+import PropTypes from 'prop-types';
+import { Dropdown, DropdownItem, KebabToggle, DropdownPosition, Split, Icon, Text } from '@patternfly/react-core';
+import { UndoIcon, TrashIcon } from '@patternfly/react-icons';
+import { noop } from 'foremanReact/common/helpers';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+const DeleteMenu = ({ handleModalToggle, akId }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const onToggle = (isOpenValue) => {
+    setIsOpen(isOpenValue);
+  };
+  const onFocus = () => {
+    const element = document.getElementById('toggle-kebab');
+    element.focus();
+  };
+  const onSelect = () => {
+    setIsOpen(false);
+    onFocus();
+  };
+  const dropdownItems = [
+    <DropdownItem
+      ouiaId="delete-menu-option"
+      aria-label="delete-link"
+      key="delete-link"
+      component="button"
+      onClick={handleModalToggle}
+    >
+      <Split hasGutter>
+        <Icon>
+          <TrashIcon />
+        </Icon>
+        <Text ouiaId="delete-text">
+          {__('Delete')}
+        </Text>
+      </Split>
+    </DropdownItem>,
+    <DropdownItem
+      ouiaId="ak-legacy-ui"
+      key="ak-legacy-ui-link"
+      href={`../../../activation_keys/${akId}`}
+    >
+      <Split hasGutter>
+        <Icon>
+          <UndoIcon />
+        </Icon>
+        <Text ouiaId="delete-text">
+          {__('Legacy UI')}
+        </Text>
+      </Split>
+    </DropdownItem>];
+  return (
+    <Dropdown
+      ouiaId="dekete-action"
+      onSelect={onSelect}
+      position={DropdownPosition.right}
+      toggle={<KebabToggle id="toggle-kebab" aria-label="delete-toggle" onToggle={onToggle} />}
+      isOpen={isOpen}
+      isPlain
+      dropdownItems={dropdownItems}
+    />
+  );
+};
+
+DeleteMenu.propTypes = {
+  handleModalToggle: PropTypes.func,
+  akId: PropTypes.string.isRequired,
+};
+
+DeleteMenu.defaultProps = {
+  handleModalToggle: noop,
+};
+
+export default DeleteMenu;
+