All files / modules/72-templates-library/pages/TemplatesPage/views/NewTemplatePopover NewTemplatePopover.tsx

100% Statements 38/38
100% Branches 8/8
100% Functions 6/6
100% Lines 38/38

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 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111              28x 28x 28x 28x 28x 28x 28x 28x   28x       28x 28x 28x 28x 28x 28x 28x 28x 28x 28x     17x 17x 17x 17x 17x 17x 17x         17x         17x       17x   1x                           17x 17x 119x 1x         17x   17x               17x                                             28x  
/*
 * 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 { Position } from '@blueprintjs/core'
import { Button, ButtonVariation } from '@wings-software/uicore'
import { useHistory, useParams } from 'react-router-dom'
import { merge, noop } from 'lodash-es'
import { useStrings } from 'framework/strings'
import { getAllowedTemplateTypes, TemplateType } from '@templates-library/utils/templatesUtils'
import routes from '@common/RouteDefinitions'
import type { ModulePathParams, ProjectPathProps } from '@common/interfaces/RouteInterfaces'
import {
  TemplateMenuItem,
  TemplatesActionPopover
} from '@templates-library/components/TemplatesActionPopover/TemplatesActionPopover'
import { DefaultNewTemplateId } from 'framework/Templates/templates'
import { PermissionIdentifier } from '@rbac/interfaces/PermissionIdentifier'
import { ResourceType } from '@rbac/interfaces/ResourceType'
import { usePermission } from '@rbac/hooks/usePermission'
import RBACTooltip from '@rbac/components/RBACTooltip/RBACTooltip'
import { FeatureIdentifier } from 'framework/featureStore/FeatureIdentifier'
import { useFeature } from '@common/hooks/useFeatures'
import { FeatureWarningTooltip } from '@common/components/FeatureWarning/FeatureWarningWithTooltip'
import { useFeatureFlag } from '@common/hooks/useFeatureFlag'
import { FeatureFlag } from '@common/featureFlags'
 
function NewTemplatePopoverWrapper(): React.ReactElement {
  const { getString } = useStrings()
  const history = useHistory()
  const { projectIdentifier, orgIdentifier, accountId, module } = useParams<ProjectPathProps & ModulePathParams>()
  const pipelineTemplatesFeatureFlagEnabled = useFeatureFlag(FeatureFlag.NG_PIPELINE_TEMPLATE)
  const allowedTemplateTypes = getAllowedTemplateTypes(getString, module, pipelineTemplatesFeatureFlagEnabled)
  const [menuOpen, setMenuOpen] = React.useState(false)
  const { enabled: templatesEnabled } = useFeature({
    featureRequest: {
      featureName: FeatureIdentifier.TEMPLATE_SERVICE
    }
  })
  const rbacResourcePermission = {
    resource: {
      resourceType: ResourceType.TEMPLATE
    }
  }
  const [canEdit] = usePermission({
    ...rbacResourcePermission,
    permissions: [PermissionIdentifier.EDIT_TEMPLATE]
  })
  const goToTemplateStudio = React.useCallback(
    (templateType: TemplateType) => {
      history.push(
        routes.toTemplateStudio({
          projectIdentifier,
          orgIdentifier,
          accountId,
          module,
          templateType,
          templateIdentifier: DefaultNewTemplateId
        })
      )
    },
    [projectIdentifier, orgIdentifier, accountId, module]
  )
 
  const getMenu = (): TemplateMenuItem[] => {
    return allowedTemplateTypes.map(templateType => {
      return merge(templateType, {
        onClick: () => goToTemplateStudio(templateType.value as TemplateType)
      })
    })
  }
 
  const tooltipBtn = React.useCallback(
    () =>
      !canEdit ? (
        <RBACTooltip permission={PermissionIdentifier.EDIT_TEMPLATE} resourceType={ResourceType.TEMPLATE} />
      ) : !templatesEnabled ? (
        <FeatureWarningTooltip featureName={FeatureIdentifier.TEMPLATE_SERVICE} />
      ) : undefined,
    [canEdit, templatesEnabled]
  )
 
  return (
    <TemplatesActionPopover
      open={menuOpen}
      minimal={true}
      items={getMenu()}
      position={Position.BOTTOM}
      disabled={!canEdit || !templatesEnabled}
      setMenuOpen={setMenuOpen}
      usePortal={false}
    >
      <Button
        variation={ButtonVariation.PRIMARY}
        icon="plus"
        rightIcon="chevron-down"
        text={getString('templatesLibrary.addNewTemplate')}
        onClick={noop}
        disabled={!canEdit || !templatesEnabled}
        tooltip={tooltipBtn()}
      />
    </TemplatesActionPopover>
  )
}
 
export const NewTemplatePopover = React.memo(NewTemplatePopoverWrapper)