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 | 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 9x 13x 9x 9x 9x 9x 9x 10x 9x 9x 2x 9x 9x 9x 1x 1x 8x 32x 3x | /*
* 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, { useCallback, useMemo } from 'react'
import { useParams } from 'react-router-dom'
import { connect } from 'formik'
import { Container, FormInput, PageError, RUNTIME_INPUT_VALUE, SelectOption } from '@wings-software/uicore'
import { get } from 'lodash-es'
import { useStrings } from 'framework/strings'
import { Feature, useGetAllFeatures } from 'services/cf'
import type { StepViewType } from '@pipeline/components/AbstractSteps/Step'
import { getErrorMessage } from '@cf/utils/CFUtils'
import type { FlagConfigurationStepData } from './types'
import FlagChanges from './FlagChanges/FlagChanges'
export interface FlagConfigurationInputSetStepProps {
existingValues?: FlagConfigurationStepData
stepViewType?: StepViewType
readonly?: boolean
template?: FlagConfigurationStepData
pathPrefix: string
}
const FlagConfigurationInputSetStep = connect<FlagConfigurationInputSetStepProps, FlagConfigurationStepData>(
({ existingValues, template, pathPrefix, readonly, formik }) => {
const prefix = useCallback<(fieldName: string) => string>(
fieldName => (pathPrefix ? `${pathPrefix}.${fieldName}` : fieldName),
[pathPrefix]
)
const { accountId: accountIdentifier, orgIdentifier, projectIdentifier } = useParams<Record<string, string>>()
const { getString } = useStrings()
const queryParams = {
accountIdentifier,
orgIdentifier,
projectIdentifier,
environmentIdentifier: existingValues?.spec.environment || '',
pageSize: 1000
}
const {
data: featuresData,
error: errorFeatures,
refetch: refetchFeatures
} = useGetAllFeatures({ queryParams: { ...queryParams, sortByField: 'name' }, debounce: 250 })
const featureItems = useMemo<SelectOption[]>(
() => featuresData?.features?.map(({ identifier: value, name: label }) => ({ value, label })) || [],
[featuresData?.features]
)
let selectedFeatureId = get(formik.values, prefix('spec.feature'))
if (existingValues?.spec?.feature && existingValues.spec.feature !== RUNTIME_INPUT_VALUE) {
selectedFeatureId = existingValues.spec.feature
}
const selectedFeature = useMemo<Feature | undefined>(
() => featuresData?.features?.find(({ identifier }) => identifier === selectedFeatureId),
[featuresData?.features, selectedFeatureId]
)
if (errorFeatures) {
return (
<Container padding={{ top: 'huge' }}>
<PageError
message={getErrorMessage(errorFeatures)}
width={450}
onClick={() => {
refetchFeatures()
}}
/>
</Container>
)
}
return (
<>
{template?.spec?.feature === RUNTIME_INPUT_VALUE && (
<FormInput.Select
label={getString('cf.pipeline.flagConfiguration.selectFlag')}
name={prefix('spec.feature')}
items={featureItems}
disabled={readonly}
onQueryChange={name => refetchFeatures({ queryParams: { ...queryParams, name } })}
/>
)}
{template?.spec?.instructions === RUNTIME_INPUT_VALUE && (
<FlagChanges
selectedFeature={selectedFeature}
selectedEnvironmentId={existingValues?.spec.environment}
initialInstructions={existingValues?.spec?.instructions}
clearField={fieldName => formik?.setFieldValue(prefix(fieldName), undefined)}
setField={(fieldName, value) => formik?.setFieldValue(prefix(fieldName), value)}
fieldValues={formik.values}
pathPrefix={pathPrefix}
/>
)}
</>
)
}
)
export default FlagConfigurationInputSetStep
|