Add external link icon to open console VM action

christianaranda · Aug 31, 2020 · 31694b9 · 31694b9
1 parent bdfbf9b
commit 31694b9
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 7 deletions.
diff --git a/frontend/packages/dev-console/src/components/topology/components/nodeContextMenu.tsx b/frontend/packages/dev-console/src/components/topology/components/nodeContextMenu.tsx
@@ -24,14 +24,14 @@ const onKebabOptionClick = (option: KebabOption) => {
 };
 
 export const createMenuItems = (actions: KebabMenuOption[]) =>
- actions.map((option) =>
+ actions.map((option, index) =>
  isKebabSubMenu(option) ? (
  <ContextSubMenuItem label={option.label} key={option.label}>
  {createMenuItems(option.children)}
  </ContextSubMenuItem>
  ) : (
  <ContextMenuItem
- key={option.label}
+ key={index} // eslint-disable-line react/no-array-index-key
  component={<KebabItem option={option} onClick={() => onKebabOptionClick(option)} />}
  />
  ),

diff --git a/frontend/packages/kubevirt-plugin/src/components/vms/menu-actions.scss b/frontend/packages/kubevirt-plugin/src/components/vms/menu-actions.scss
@@ -0,0 +1,3 @@
+.kubevirt-menu-actions__ext-link-icon {
+ margin-left: var(--pf-global--spacer--sm);
+}
diff --git a/frontend/packages/kubevirt-plugin/src/components/vms/menu-actions.tsx b/frontend/packages/kubevirt-plugin/src/components/vms/menu-actions.tsx
@@ -1,5 +1,6 @@
 import * as _ from 'lodash';
 import * as React from 'react';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { asAccessReview, Kebab, KebabOption } from '@console/internal/components/utils';
 import {
  K8sKind,
@@ -35,6 +36,8 @@ import { StatusGroup } from '../../constants/status-group';
 import { cancelVMImport } from '../../k8s/requests/vmimport';
 import { getActionMessage } from './constants';
 
+import './menu-actions.scss';
+
 type ActionArgs = {
  vmi?: VMIKind;
  vmStatusBundle?: VMStatusBundle;
@@ -284,7 +287,14 @@ export const menuActionDeleteVMI = (kindObj: K8sKind, vmi: VMIKind): KebabOption
 });
 
 export const menuActionOpenConsole = (kindObj: K8sKind, vmi: VMIKind): KebabOption => ({
- label: `Open Console`,
+ label: (
+ <>
+ Open Console
+ <span className="kubevirt-menu-actions__ext-link-icon">
+ <ExternalLinkAltIcon />
+ </span>
+ </>
+ ),
  callback: () =>
  window.open(
  `/k8s/ns/${getNamespace(vmi)}/virtualmachineinstances/${getName(vmi)}/standaloneconsole`,

diff --git a/frontend/public/components/utils/kebab.tsx b/frontend/public/components/utils/kebab.tsx
@@ -4,7 +4,7 @@ import * as classNames from 'classnames';
 import * as FocusTrap from 'focus-trap-react';
 import { connect } from 'react-redux';
 import { KEY_CODES, Tooltip } from '@patternfly/react-core';
-import { EllipsisVIcon, AngleRightIcon } from '@patternfly/react-icons';
+import { AngleRightIcon, EllipsisVIcon } from '@patternfly/react-icons';
 import Popper from '@console/shared/src/components/popper/Popper';
 import {
  annotationsModal,
@@ -222,8 +222,8 @@ export const KebabMenuItems: React.FC<KebabMenuItemsProps> = ({
  className={classNames('pf-c-dropdown__menu pf-m-align-right', className)}
  data-test-id="action-items"
  >
- {_.map(options, (o) => (
- <li key={o.label}>
+ {_.map(options, (o, index) => (
+ <li key={index}>
  {isKebabSubMenu(o) ? (
  <KebabSubMenu option={o} onClick={onClick} />
  ) : (
@@ -516,7 +516,7 @@ export class Kebab extends React.Component<any, { active: boolean }> {
 
 export type KebabOption = {
  hidden?: boolean;
- label: string;
+ label: React.ReactNode;
  href?: string;
  callback?: () => any;
  accessReview?: AccessReviewResourceAttributes;