All files / modules/20-rbac/components/MenuItem MenuItem.tsx

100% Statements 21/21
95.83% Branches 23/24
100% Functions 2/2
100% Lines 21/21

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76              208x 208x 208x 208x 208x     208x 208x             208x 940x   940x     940x 24x               940x           940x   940x 940x   940x 922x     18x                         1x                 208x  
/*
 * Copyright 2021 Harness Inc. All rights reserved.
 * Use of this source code is governed by the PolyForm Shield 1.0.0 license
 * that can be found in the licenses directory at the root of this repository, also available at
 * https://polyformproject.org/wp-content/uploads/2020/06/PolyForm-Shield-1.0.0.txt.
 */
 
import React from 'react'
import { IMenuItemProps, Menu, MenuItem, PopoverInteractionKind } from '@blueprintjs/core'
import { Popover } from '@wings-software/uicore'
import { usePermission, PermissionsRequest } from '@rbac/hooks/usePermission'
import { useGetFirstDisabledFeature } from '@common/hooks/useFeatures'
import type { FeaturesProps } from 'framework/featureStore/featureStoreUtil'
import type { PermissionIdentifier } from '@rbac/interfaces/PermissionIdentifier'
import { getPermissionRequestFromProps, getTooltip } from '@rbac/utils/utils'
import css from './MenuItem.module.scss'
 
export interface RbacMenuItemProps extends IMenuItemProps {
  permission?: Omit<PermissionsRequest, 'permissions'> & { permission: PermissionIdentifier }
  featuresProps?: FeaturesProps
}
 
const RbacMenuItem: React.FC<RbacMenuItemProps> = ({ permission: permissionRequest, featuresProps, ...restProps }) => {
  const [canDoAction] = usePermission(getPermissionRequestFromProps(permissionRequest), [permissionRequest])
 
  const { featureEnabled, disabledFeatureName } = useGetFirstDisabledFeature(featuresProps?.featuresRequest)
 
  let disabledFeatureProps
  if (disabledFeatureName) {
    disabledFeatureProps = {
      isPermissionPrioritized: featuresProps?.isPermissionPrioritized,
      featureRequest: {
        featureName: disabledFeatureName
      }
    }
  }
 
  const tooltipProps = getTooltip({
    permissionRequest,
    featureProps: disabledFeatureProps,
    canDoAction,
    featureEnabled
  })
  const { tooltip } = tooltipProps
 
  const noRequest = !featuresProps?.featuresRequest && !permissionRequest
  const enabled = canDoAction && featureEnabled
 
  if (noRequest || enabled) {
    return <Menu.Item {...restProps} />
  }
 
  return (
    <Popover
      openOnTargetFocus={false}
      fill
      usePortal
      hoverCloseDelay={50}
      interactionKind={featureEnabled ? PopoverInteractionKind.HOVER_TARGET_ONLY : PopoverInteractionKind.HOVER}
      content={tooltip}
      className={css.popover}
      inheritDarkTheme={false}
    >
      <div
        onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
          event.stopPropagation()
        }}
      >
        <MenuItem {...restProps} disabled />
      </div>
    </Popover>
  )
}
 
export default RbacMenuItem