Skip to content

Commit 0239529

Browse files
arunjaindevarunjaindev
committed
Merge branch 'develop' of https://github.com/devtron-labs/devtron-fe-common-lib into feat/app-env-details
2 parents 177da95 + 5c41781 commit 0239529

File tree

12 files changed

+449
-539
lines changed

12 files changed

+449
-539
lines changed

‎src/Common/CIPipeline.Types.ts

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
* limitations under the License.
1515
*/
1616

17-
import { DynamicDataTableCellValidationState } from '@Shared/Components'
17+
import { DynamicDataTableCellValidationState, KeyValueTableData } from '@Shared/Components'
1818

1919
export interface MaterialType {
2020
name: string
@@ -158,7 +158,7 @@ export interface PortMapType {
158158
portOnLocal: number
159159
portOnContainer: number
160160
}
161-
interface ConditionDetails {
161+
export interface ConditionDetails {
162162
id: number
163163
conditionOnVariable: string
164164
conditionOperator: string
@@ -266,7 +266,7 @@ export enum WORKFLOW_CACHE_CONFIG_ENUM {
266266

267267
export interface FormType {
268268
name: string
269-
args: { key: string; value: string }[]
269+
args: KeyValueTableData[]
270270
materials: MaterialType[]
271271
gitHost: Githost
272272
webhookEvents: WebhookEvent[]
@@ -314,23 +314,29 @@ export enum InputOutputVariablesHeaderKeys {
314314
VALUE = 'val',
315315
}
316316

317-
export type InputOutputVariablesErrorObj = Record<InputOutputVariablesHeaderKeys, DynamicDataTableCellValidationState>
317+
export enum ConditionDataTableHeaderKeys {
318+
VARIABLE = 'variable',
319+
OPERATOR = 'operator',
320+
VALUE = 'val',
321+
}
322+
323+
type InputOutputVariablesErrorObj = Record<InputOutputVariablesHeaderKeys, DynamicDataTableCellValidationState>
324+
type ConditionDetailsErrorObj = Record<ConditionDataTableHeaderKeys, DynamicDataTableCellValidationState>
325+
326+
interface StepDetailTaskErrorObj {
327+
inputVariables?: Record<number, InputOutputVariablesErrorObj>
328+
outputVariables?: Record<number, InputOutputVariablesErrorObj>
329+
isInputVariablesValid?: boolean
330+
isOutputVariablesValid?: boolean
331+
conditionDetails?: Record<number, ConditionDetailsErrorObj>
332+
isConditionDetailsValid?: boolean
333+
}
318334

319335
export interface TaskErrorObj {
320336
isValid: boolean
321337
name: ErrorObj
322-
inlineStepDetail?: {
323-
inputVariables?: Record<number, InputOutputVariablesErrorObj>
324-
outputVariables?: Record<number, InputOutputVariablesErrorObj>
325-
isInputVariablesValid?: boolean
326-
isOutputVariablesValid?: boolean
327-
}
328-
pluginRefStepDetail?: {
329-
inputVariables?: Record<number, InputOutputVariablesErrorObj>
330-
outputVariables?: Record<number, InputOutputVariablesErrorObj>
331-
isInputVariablesValid?: boolean
332-
isOutputVariablesValid?: boolean
333-
}
338+
inlineStepDetail?: StepDetailTaskErrorObj
339+
pluginRefStepDetail?: StepDetailTaskErrorObj
334340
}
335341
export interface FormErrorObjectType {
336342
name: ErrorObj

‎src/Shared/Components/CMCS/constants.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,9 @@
1414
* limitations under the License.
1515
*/
1616

17-
import { CMSecretExternalType, CMSecretYamlData } from '@Shared/Services'
17+
import { CMSecretExternalType } from '@Shared/Services'
1818

19+
import { KeyValueTableData } from '../KeyValueTable'
1920
import { ConfigMapSecretDataTypeOptionType } from './types'
2021

2122
export const CONFIG_MAP_SECRET_YAML_PARSE_ERROR = 'Please provide valid YAML'
@@ -33,7 +34,7 @@ export const configMapDataTypeOptions: ConfigMapSecretDataTypeOptionType[] = [
3334
{ value: CMSecretExternalType.KubernetesConfigMap, label: 'Kubernetes External ConfigMap' },
3435
]
3536

36-
export const CONFIG_MAP_SECRET_DEFAULT_CURRENT_DATA: CMSecretYamlData[] = [{ k: '', v: '', id: 0 }]
37+
export const CONFIG_MAP_SECRET_DEFAULT_CURRENT_DATA: KeyValueTableData[] = [{ key: '', value: '', id: 0 }]
3738

3839
export const configMapSecretMountDataMap = {
3940
environment: { title: 'Environment Variable', value: 'environment' },

‎src/Shared/Components/CMCS/utils.ts

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ import {
2626
CMSecretConfigData,
2727
CMSecretExternalType,
2828
CMSecretPayloadType,
29-
CMSecretYamlData,
3029
CODE_EDITOR_RADIO_STATE,
3130
ConfigDatum,
3231
ConfigMapSecretUseFormProps,
@@ -36,6 +35,7 @@ import {
3635
} from '@Shared/Services'
3736
import { hasESO, OverrideMergeStrategyType } from '@Pages/index'
3837

38+
import { KeyValueTableData } from '../KeyValueTable'
3939
import { getSelectPickerOptionByValue } from '../SelectPicker'
4040
import {
4141
CONFIG_MAP_SECRET_DEFAULT_CURRENT_DATA,
@@ -93,7 +93,7 @@ export const getSecretDataTypeOptions = (
9393
return isJob ? kubernetesOptions : [...kubernetesOptions, ...esoOptions, ...(isHashiOrAWS ? kesOptions : [])]
9494
}
9595

96-
const secureValues = (data: Record<string, string>, decodeData: boolean): CMSecretYamlData[] => {
96+
const secureValues = (data: Record<string, string>, decodeData: boolean): KeyValueTableData[] => {
9797
let decodedData = data || DEFAULT_SECRET_PLACEHOLDER
9898

9999
if (decodeData) {
@@ -104,9 +104,9 @@ const secureValues = (data: Record<string, string>, decodeData: boolean): CMSecr
104104
}
105105
}
106106

107-
return Object.keys(decodedData).map((k, id) => ({
108-
k,
109-
v: typeof decodedData[k] === 'object' ? YAMLStringify(decodedData[k]) : decodedData[k],
107+
return Object.keys(decodedData).map((key, id) => ({
108+
key,
109+
value: typeof decodedData[key] === 'object' ? YAMLStringify(decodedData[key]) : decodedData[key],
110110
id,
111111
}))
112112
}
@@ -150,8 +150,8 @@ const processExternalSubPathValues = ({
150150
return ''
151151
}
152152

153-
export const convertKeyValuePairToYAML = (currentData: CMSecretYamlData[]) =>
154-
currentData.length ? YAMLStringify(currentData.reduce((agg, { k, v }) => ({ ...agg, [k]: v }), {})) : ''
153+
export const convertKeyValuePairToYAML = (currentData: KeyValueTableData[]) =>
154+
currentData.length ? YAMLStringify(currentData.reduce((agg, { key, value }) => ({ ...agg, [key]: value }), {})) : ''
155155

156156
const getSecretDataFromConfigData = ({
157157
secretData,
@@ -368,29 +368,30 @@ export const getConfigMapSecretReadOnlyValues = ({
368368
? [
369369
{
370370
displayName: 'Keys',
371-
value: currentData?.length > 0 ? currentData.map((d) => d.k).join(', ') : 'No keys available',
371+
value:
372+
currentData?.length > 0 ? currentData.map((d) => d.key).join(', ') : 'No keys available',
372373
key: 'keys',
373374
},
374375
]
375376
: []),
376377
],
377-
data: !mountExistingExternal ? (currentData?.[0]?.k && yaml) || esoSecretYaml || secretDataYaml : null,
378+
data: !mountExistingExternal ? (currentData?.[0]?.key && yaml) || esoSecretYaml || secretDataYaml : null,
378379
}
379380
}
380381

381-
export const convertYAMLToKeyValuePair = (yaml: string): CMSecretYamlData[] => {
382+
export const convertYAMLToKeyValuePair = (yaml: string): KeyValueTableData[] => {
382383
try {
383384
const obj = yaml && YAML.parse(yaml)
384385
if (typeof obj !== 'object') {
385386
throw new Error()
386387
}
387-
const keyValueArray: CMSecretYamlData[] = Object.keys(obj).reduce((agg, k, id) => {
388-
if (!k && !obj[k]) {
388+
const keyValueArray = Object.keys(obj).reduce<KeyValueTableData[]>((agg, key, id) => {
389+
if (!key && !obj[key]) {
389390
return CONFIG_MAP_SECRET_DEFAULT_CURRENT_DATA
390391
}
391-
const v = obj[k] && typeof obj[k] === 'object' ? YAMLStringify(obj[k]) : obj[k].toString()
392+
const value = obj[key] && typeof obj[key] === 'object' ? YAMLStringify(obj[key]) : obj[key].toString()
392393

393-
return [...agg, { k, v: v ?? '', id }]
394+
return [...agg, { key, value: value ?? '', id }]
394395
}, [])
395396
return keyValueArray
396397
} catch {
@@ -449,14 +450,14 @@ export const getConfigMapSecretPayload = ({
449450
const isESO = isSecret && hasESO(externalType)
450451
const _currentData = yamlMode ? convertYAMLToKeyValuePair(yaml) : currentData
451452
const data = _currentData.reduce((acc, curr) => {
452-
if (!curr.k) {
453+
if (!curr.key) {
453454
return acc
454455
}
455-
const value = curr.v ?? ''
456+
const value = curr.value ?? ''
456457

457458
return {
458459
...acc,
459-
[curr.k]: isSecret && externalType === '' ? btoa(value) : value,
460+
[curr.key]: isSecret && externalType === '' ? btoa(value) : value,
460461
}
461462
}, {})
462463

‎src/Shared/Components/CMCS/validations.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,11 @@ import YAML from 'yaml'
1919
import { PATTERNS } from '@Common/Constants'
2020
import { YAMLStringify } from '@Common/Helper'
2121
import { UseFormValidation, UseFormValidations } from '@Shared/Hooks'
22-
import { CMSecretExternalType, CMSecretYamlData, ConfigMapSecretUseFormProps } from '@Shared/Services'
22+
import { CMSecretExternalType, ConfigMapSecretUseFormProps } from '@Shared/Services'
2323
import { validateCMVolumeMountPath } from '@Shared/validations'
2424
import { hasESO } from '@Pages/index'
2525

26+
import { KeyValueTableData } from '../KeyValueTable'
2627
import { CONFIG_MAP_SECRET_YAML_PARSE_ERROR, SECRET_TOAST_INFO } from './constants'
2728
import { getESOSecretDataFromYAML } from './utils'
2829

@@ -310,7 +311,7 @@ export const getConfigMapSecretFormValidations: UseFormValidations<ConfigMapSecr
310311
},
311312
currentData: {
312313
custom: {
313-
isValid: (value: CMSecretYamlData[]) => !!value.filter(({ k }) => !!k).length,
314+
isValid: (value: KeyValueTableData[]) => !!value.filter(({ key }) => !!key).length,
314315
message: 'This is a required field',
315316
},
316317
},

‎src/Shared/Components/DynamicDataTable/DynamicDataTableHeader.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export const DynamicDataTableHeader = <K extends string, CustomStateType = Recor
2727
headers,
2828
rows,
2929
sortingConfig,
30+
addBtnTooltip = 'Add',
3031
onRowAdd,
3132
readOnly,
3233
isAdditionNotAllowed,
@@ -89,12 +90,11 @@ export const DynamicDataTableHeader = <K extends string, CustomStateType = Recor
8990
{shouldRenderAddRowButton && (
9091
<Button
9192
dataTestId="data-table-add-row-button"
92-
ariaLabel="Add"
93+
ariaLabel={addBtnTooltip}
9394
onClick={onRowAdd}
9495
icon={<ICAdd />}
9596
variant={ButtonVariantType.borderLess}
9697
size={ComponentSizeType.xs}
97-
showAriaLabelInTippy={false}
9898
/>
9999
)}
100100
{key === lastHeaderKey && headerComponent}

‎src/Shared/Components/DynamicDataTable/DynamicDataTableRow.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -290,16 +290,18 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
290290
? cellError[row.id][key]
291291
: { isValid: true, errorMessages: [] }
292292

293-
const isSelectText = row.data[key].type === DynamicDataTableRowDataType.SELECT_TEXT
293+
const isDropdown =
294+
row.data[key].type === DynamicDataTableRowDataType.SELECT_TEXT ||
295+
row.data[key].type === DynamicDataTableRowDataType.DROPDOWN
294296

295297
if (isValid) {
296298
return null
297299
}
298300

299-
// Adding 'no-error' class to hide error when SelectPickerTextArea is focused.
301+
// Adding 'no-error' class to hide error when SelectPicker or SelectPickerTextArea is focused.
300302
return (
301303
<div
302-
className={`dynamic-data-table__error bg__primary dc__border br-4 py-7 px-8 flexbox-col dc__gap-4 ${isSelectText ? 'no-error' : ''}`}
304+
className={`dynamic-data-table__error bg__primary dc__border br-4 py-7 px-8 flexbox-col dc__gap-4 ${isDropdown ? 'no-error' : ''}`}
303305
>
304306
{errorMessages.map((error) => renderErrorMessage(error))}
305307
</div>

‎src/Shared/Components/DynamicDataTable/types.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,10 @@ export type DynamicDataTableProps<K extends string, CustomStateType = Record<str
169169
isDeletionNotAllowed?: boolean
170170
/** When true, data add or update is disabled. */
171171
readOnly?: boolean
172+
/** Tooltip for add button.
173+
* @default 'Add'
174+
*/
175+
addBtnTooltip?: string
172176
/** Function to handle the addition of a new row to the table. */
173177
onRowAdd: () => void
174178
/**
@@ -233,6 +237,7 @@ export interface DynamicDataTableHeaderProps<K extends string, CustomStateType =
233237
| 'rows'
234238
| 'headerComponent'
235239
| 'sortingConfig'
240+
| 'addBtnTooltip'
236241
| 'onRowAdd'
237242
| 'readOnly'
238243
| 'isAdditionNotAllowed'

0 commit comments

Comments
 (0)