All files / modules/10-common/components/UserGroupsInput FormMultitypeUserGroupInput.tsx

100% Statements 13/13
75% Branches 3/4
100% Functions 2/2
100% Lines 12/12

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              110x 110x   110x           110x 110x 110x                       110x 39x   39x     39x   39x                       8x                    
/*
 * 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, { useState } from 'react'
import { get } from 'lodash-es'
import type { FormikContext } from 'formik'
import {
  DataTooltipInterface,
  ExpressionAndRuntimeTypeProps,
  getMultiTypeFromValue,
  MultiTypeInputType
} from '@wings-software/uicore'
import MultiTypeFieldSelector from '@common/components/MultiTypeFieldSelector/MultiTypeFieldSelector'
import { ExpressionsListInput } from '@common/components/ExpressionsListInput/ExpressionsListInput'
import UserGroupsInput, { FormikUserGroupsInput } from './UserGroupsInput'
 
export interface FormMultiTypeUserGroupInputProps
  extends Omit<ExpressionAndRuntimeTypeProps, 'fixedTypeComponent' | 'fixedTypeComponentProps'> {
  label: string
  tooltipProps?: DataTooltipInterface
  formik?: FormikContext<any>
  expressions?: string[]
}
 
export type Extended = FormikUserGroupsInput & FormMultiTypeUserGroupInputProps
 
export const FormMultiTypeUserGroupInput: React.FC<Extended> = props => {
  const { disabled, children, label, tooltipProps, formik, name, expressions, allowableTypes } = props
 
  const value = get(formik?.values, name)
 
  // Don't show formError if type is fixed, as that is handled inside UserGroupInput.tsx
  const [multiType, setMultiType] = useState<MultiTypeInputType>(getMultiTypeFromValue(value, allowableTypes, true))
 
  return (
    <MultiTypeFieldSelector
      name={name}
      label={label}
      defaultValueToReset={[]}
      onTypeChange={setMultiType}
      hideError={multiType === MultiTypeInputType.FIXED}
      skipRenderValueInExpressionLabel
      allowedTypes={allowableTypes}
      supportListOfExpressions={true}
      disableMultiSelectBtn={disabled}
      expressionRender={() => (
        <ExpressionsListInput name={name} value={value} readOnly={disabled} expressions={expressions} />
      )}
      style={{ flexGrow: 1, marginBottom: 0 }}
    >
      <UserGroupsInput label="" tooltipProps={tooltipProps} name={name} disabled={disabled}>
        {children}
      </UserGroupsInput>
    </MultiTypeFieldSelector>
  )
}