From 1526c1155699f4b3aa77030f2f37e67c65d74f3e Mon Sep 17 00:00:00 2001 From: schakradari Date: Fri, 27 Jan 2023 14:43:37 -0500 Subject: [PATCH] same prefix issue fixed Signed-off-by: schakradari --- .../application-parameters.tsx | 114 +++++--- .../components/array-input/array-input.tsx | 272 ++++++++++++++---- 2 files changed, 301 insertions(+), 85 deletions(-) diff --git a/ui/src/app/applications/components/application-parameters/application-parameters.tsx b/ui/src/app/applications/components/application-parameters/application-parameters.tsx index 794f8af38e01a..71f0be4011a3f 100644 --- a/ui/src/app/applications/components/application-parameters/application-parameters.tsx +++ b/ui/src/app/applications/components/application-parameters/application-parameters.tsx @@ -10,11 +10,12 @@ import { EditablePanelItem, Expandable, MapValueField, + // MapValueField1, NameValueEditor, StringValueField, NameValue, TagsInputField, - ValueEditor, + ValueEditor } from '../../../shared/components'; import * as models from '../../../shared/models'; import {ApplicationSourceDirectory, AuthSettings} from '../../../shared/models'; @@ -130,6 +131,8 @@ export const ApplicationParameters = (props: { const [removedOverrides, setRemovedOverrides] = React.useState(new Array()); let attributes: EditablePanelItem[] = []; + let [pluginState, setPluginState] = React.useState(false); + console.log('pluginState is', pluginState); if (props.details.type === 'Kustomize' && props.details.kustomize) { attributes.push({ @@ -269,7 +272,7 @@ export const ApplicationParameters = (props: { } else if (props.details.type === 'Plugin') { attributes.push({ title: 'NAME', - view:
{ValueEditor(app.spec.source.plugin && app.spec.source.plugin.name, null)}
, + view:
{ValueEditor(app.spec.source.plugin && app.spec.source.plugin.name, null)}
, edit: (formApi: FormApi) => ( services.authService.settings()}> {(settings: AuthSettings) => ( @@ -302,31 +305,35 @@ export const ApplicationParameters = (props: { parametersSet.add(appParameter.name); } } - parametersSet.forEach((name, dupName, parametersSet) => { const announcement = props.details.plugin.parametersAnnouncement?.find(param => param.name === name); const liveParam = app.spec.source.plugin.parameters?.find(param => param.name === name); const pluginIcon = 'This parameter is provided by the plugin.'; - const isPluginPar = announcement?true:false; - if ((announcement?.collectionType === undefined && liveParam?.array) || announcement?.collectionType === 'array') { - let liveParamArray; + const isPluginPar = announcement ? true : false; + // console.log("app.spec.source.plugin.parameters is ",app.spec.source.plugin.parameters); + if ((announcement?.collectionType === undefined && liveParam?.map) || announcement?.collectionType === 'map') { + let liveParamMap; if (liveParam) { - liveParamArray = liveParam?.array??[]; + liveParamMap = liveParam.map ?? new Map(); } + const map = concatMaps(liveParamMap ?? announcement?.map, new Map()); + const entries = map.entries(); + const items = new Array(); + Array.from(entries).forEach(([key, value]) => items.push({name: key, value: value})); attributes.push({ - title:announcement?.title ?? announcement?.name ?? name, + title: announcement?.title ?? announcement?.name ?? name, customTitle: ( - {isPluginPar && } + {isPluginPar && } {announcement?.title ?? announcement?.name ?? name} ), view: ( -
- {(liveParamArray ?? announcement?.array ?? []).length === 0 && -- NO ITEMS --} - {(liveParamArray ?? announcement?.array ?? []).map((val, index) => ( - - {ValueEditor(val, null)} +
+ {items.length == 0 && -- NO ITEMS --} + {items.map(val => ( + + {NameValueEditor(val)} ))}
@@ -334,35 +341,37 @@ export const ApplicationParameters = (props: { edit: (formApi: FormApi) => ( ) }); - } else if ((announcement?.collectionType === undefined && liveParam?.map) || announcement?.collectionType === 'map') { - let liveParamMap; + } else if ((announcement?.collectionType === undefined && liveParam?.array) || announcement?.collectionType === 'array') { + let liveParamArray; if (liveParam) { - liveParamMap = liveParam.map??new Map(); + liveParamArray = liveParam?.array ?? []; } - const map = concatMaps(liveParamMap ?? announcement?.map, new Map()); - const entries = map.entries(); - const items = new Array(); - Array.from(entries).forEach(([key, value]) => items.push({name: key, value: value})); attributes.push({ - title:announcement?.title ?? announcement?.name ?? name, + title: announcement?.title ?? announcement?.name ?? name, customTitle: ( - {isPluginPar && } + {isPluginPar && } {announcement?.title ?? announcement?.name ?? name} ), view: ( -
- {items.length == 0 && -- NO ITEMS --} - {items.map(val => ( - - {NameValueEditor(val)} +
+ {(liveParamArray ?? announcement?.array ?? []).length === 0 && -- NO ITEMS --} + {(liveParamArray ?? announcement?.array ?? []).map((val, index) => ( + + {ValueEditor(val, null)} ))}
@@ -370,9 +379,15 @@ export const ApplicationParameters = (props: { edit: (formApi: FormApi) => ( ) }); @@ -387,18 +402,24 @@ export const ApplicationParameters = (props: { liveParamString = liveParam?.string ?? ''; } attributes.push({ - title:announcement?.title ?? announcement?.name ?? name, + title: announcement?.title ?? announcement?.name ?? name, customTitle: ( {isPluginPar && } {announcement?.title ?? announcement?.name ?? name} ), - view:
{ValueEditor(liveParamString ?? announcement?.string, null)}
, + view:
{ValueEditor(liveParamString ?? announcement?.string, null)}
, edit: (formApi: FormApi) => ( @@ -407,6 +428,7 @@ export const ApplicationParameters = (props: { } }); } + if (pluginState) setPluginState(false); } else if (props.details.type === 'Directory') { const directory = source.directory || ({} as ApplicationSourceDirectory); attributes.push({ @@ -446,12 +468,17 @@ export const ApplicationParameters = (props: { }); } + // if(attributeList.length==0){ + // setAttributeList(attributes); + // } + // console.log("attributeList befor rendering is ",attributes) return ( { const src = getAppDefaultSource(input); + function isDefined(item: any) { return item !== null && item !== undefined; } @@ -465,6 +492,23 @@ export const ApplicationParameters = (props: { if (src.kustomize && src.kustomize.images) { src.kustomize.images = src.kustomize.images.filter(isDefinedWithVersion); } + + const params = input.spec?.source?.plugin?.parameters; + if (params) { + for (const param of params) { + if (param.array && (param.map || typeof param.array[0] !== 'string')) { + // if(param.array && (param.map)) { + // @ts-ignore + param.map = param.array.reduce((acc, {name, value}) => { + // @ts-ignore + acc[name] = value; + return acc; + }, {}); + delete param.array; + } + } + } + await props.save(input, {}); setRemovedOverrides(new Array()); }) diff --git a/ui/src/app/shared/components/array-input/array-input.tsx b/ui/src/app/shared/components/array-input/array-input.tsx index ef26ba45f9d0c..2602d9aeefeb2 100644 --- a/ui/src/app/shared/components/array-input/array-input.tsx +++ b/ui/src/app/shared/components/array-input/array-input.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import * as ReactForm from 'react-form'; import {FormValue} from 'react-form'; - /* This provide a way to may a form field to an array of items. It allows you to @@ -28,9 +27,41 @@ export interface NameValue { value: string; } +export const NameValueEditor = (item: NameValue, onChange?: (item: NameValue) => any) => { + return ( + + onChange({...item, name: e.target.value})} + // onBlur={e=>onChange({...item, name: e.target.value})} + title='Name' + readOnly={!onChange} + /> +   =   + onChange({...item, value: e.target.value})} + title='Value' + readOnly={!onChange} + /> +   + + ); +}; -export const NameValueEditor = (item: NameValue, onChange?: (item: NameValue) => any) => - ( +export const NameValueEditor1 = (item: NameValue, onChange?: (item: NameValue) => any) => { + const [val, setVal] = React.useState(item.name); + return ( className='argo-field' style={{width: '40%', borderColor: !onChange ? '#eff3f5' : undefined}} placeholder='Name' - value={item.name.split(' ')[0] || ''} - id="key" - onChange={e=>onChange({...item, name: e.target.value})} + value={val} + onChange={e => setVal(e.target.value)} + onBlur={e => onChange({...item, name: e.target.value})} title='Name' readOnly={!onChange} /> @@ -59,6 +90,7 @@ export const NameValueEditor = (item: NameValue, onChange?: (item: NameValue) =>   ); +}; export const ValueEditor = (item: string, onChange: (item: string) => any) => { return ( @@ -120,11 +152,59 @@ export function ArrayInput(props: Props) { ); } -export const ResetOrDeleteButton = (props: {isPluginPar: boolean; getValue: FormValue;name:string;emptyValue:any ;index: number; setValue: (value: FormValue) => void}) => { +// export const ResetOrDeleteButton = (props: {isPluginPar: boolean; getValue: FormValue; name: string; emptyValue: any; index: number; setValue: (value: FormValue) => void}) => { +// const handleResetChange = () => { +// if (props.index >= 0) { +// props.getValue.splice(props.index, 1); +// props.setValue([...props.getValue]); +// } +// }; +// +// let disabled = props.index === -1; +// +// let content = props.isPluginPar ? 'Reset' : 'Delete'; +// let tooltip = ''; +// if (content === 'Reset' && !disabled) { +// tooltip = 'Resets the parameter to the value provided by the plugin. This removes the parameter override from the application manifest'; +// } else if (content === 'Delete' && !disabled) { +// tooltip = 'Deletes this parameter values from the application manifest.'; +// } +// +// return ( +// +// ); +// }; + +export const ResetOrDeleteButton = (props: { + isPluginPar: boolean; + getValue: FormValue; + name: string; + index: number; + setValue: (value: FormValue) => void; + spec: any; + setPluginState: any; +}) => { const handleResetChange = () => { + if (props.index >= 0) { props.getValue.splice(props.index, 1); + + // const ind = props.spec.findIndex((x:any)=>x.name===props.name); + // console.log("ind is ",ind); + // if(ind>-1){ + // props.spec.splice(ind,1); + // } props.setValue([...props.getValue]); + props.setPluginState(true); + console.log("getValue is", props.getValue); + } }; @@ -157,7 +237,7 @@ export const ArrayInputField = ReactForm.FormField((props: {fieldApi: ReactForm. return ; }); -export const ArrayValueField = ReactForm.FormField((props: {fieldApi: ReactForm.FieldApi; name: string; defaultVal: string[]; isPluginPar: boolean}) => { +export const ArrayValueField = ReactForm.FormField((props: {fieldApi: ReactForm.FieldApi; name: string; defaultVal: string[]; isPluginPar: boolean;spec:any;setPluginState:any}) => { const { fieldApi: {getValue, setValue} } = props; @@ -168,11 +248,11 @@ export const ArrayValueField = ReactForm.FormField((props: {fieldApi: ReactForm. liveParamArray = liveParam?.array ?? []; } const index = getValue()?.findIndex((val: {name: String; array: Object}) => val.name === props.name) ?? -1; - let values = liveParamArray ?? props.defaultVal??[]; + let values = liveParamArray ?? props.defaultVal ?? []; return ( - + = 0) { getValue()[index].array = update; setValue([...getValue()]); + // console.log("spec in array is ",props.spec); } else { setValue([...(getValue() || []), {name: props.name, array: update}]); + // console.log("spec in array is ",props.spec); } }} /> @@ -190,21 +272,21 @@ export const ArrayValueField = ReactForm.FormField((props: {fieldApi: ReactForm. ); }); -export const StringValueField = ReactForm.FormField((props: {fieldApi: ReactForm.FieldApi; name: string; defaultVal: string; isPluginPar: boolean}) => { +export const StringValueField = ReactForm.FormField((props: {fieldApi: ReactForm.FieldApi; name: string; defaultVal: string; isPluginPar: boolean; spec: any; setPluginState: any}) => { const { fieldApi: {getValue, setValue} } = props; let liveParamString; const liveParam = getValue()?.find((val: {name: String; string: Object}) => val.name === props.name); if (liveParam) { - liveParamString = (liveParam?.string)? liveParam?.string :''; + liveParamString = liveParam?.string ? liveParam?.string : ''; } - let values = liveParamString ?? props.defaultVal??''; + let values = liveParamString ?? props.defaultVal ?? ''; const index = getValue()?.findIndex((val: {name: string; string: string}) => val.name === props.name) ?? -1; return ( - +
@@ -228,42 +311,42 @@ export const StringValueField = ReactForm.FormField((props: {fieldApi: ReactForm ); }); -export const MapValueField = ReactForm.FormField((props: {fieldApi: ReactForm.FieldApi; name: string; defaultVal: Map; isPluginPar: boolean}) => { - const { - fieldApi: {getValue, setValue} - } = props; - const items = new Array(); - let liveParamMap; - const liveParam = getValue()?.find((val: {name: String; map: Object}) => val.name === props.name); - if (liveParam) { - liveParamMap = liveParam.map? liveParam.map:new Map(); - } - const map = liveParamMap ?? props.defaultVal ?? new Map(); - Object.keys(map).forEach(item => items.push({name: item, value: map[item]})); - - const index = getValue()?.findIndex((val: {name: string; map: Object}) => val.name === props.name) ?? -1; - - return ( - - - { - const newMap = {} as any; - array.forEach(item => (newMap[(item.name||'') ] = item.value || '')); - const index = getValue()?.findIndex((val: {name: String; map: Object}) => val.name === props.name) ?? -1; - if (index >= 0) { - getValue()[index].map = newMap; - setValue([...getValue()]); - } else { - setValue([...(getValue() || []), {name: props.name, map: newMap}]); - } - }} - /> - - ); -}); +// export const MapValueField = ReactForm.FormField((props: {fieldApi: ReactForm.FieldApi; name: string; defaultVal: Map; isPluginPar: boolean}) => { +// const { +// fieldApi: {getValue, setValue} +// } = props; +// const items = new Array(); +// let liveParamMap; +// const liveParam = getValue()?.find((val: {name: String; map: Object}) => val.name === props.name); +// if (liveParam) { +// liveParamMap = liveParam.map ? liveParam.map : new Map(); +// } +// const map = liveParamMap ?? props.defaultVal ?? new Map(); +// Object.keys(map).forEach(item => items.push({name: item, value: map[item]})); +// +// const index = getValue()?.findIndex((val: {name: string; map: Object}) => val.name === props.name) ?? -1; +// +// return ( +// +// +// { +// const newMap = {} as any; +// array.forEach(item => (newMap[item.name || ''] = item.value || '')); +// const index = getValue()?.findIndex((val: {name: String; map: Object}) => val.name === props.name) ?? -1; +// if (index >= 0) { +// getValue()[index].map = newMap; +// setValue([...getValue()]); +// } else { +// setValue([...(getValue() || []), {name: props.name, map: newMap}]); +// } +// }} +// /> +// +// ); +// }); export const MapInputField = ReactForm.FormField((props: {fieldApi: ReactForm.FieldApi}) => { const { @@ -285,3 +368,92 @@ export const MapInputField = ReactForm.FormField((props: {fieldApi: ReactForm.Fi ); }); +export const MapValueField = ReactForm.FormField( + (props: {fieldApi: ReactForm.FieldApi; name: string; defaultVal: Map; isPluginPar: boolean; spec: any; setPluginState: any}) => { + const { + fieldApi: {getValue, setValue} + } = props; + let items = new Array(); + const liveParam = getValue()?.find((val: {name: string; map: Object}) => val.name === props.name); + const index = getValue()?.findIndex((val: {name: string; map: Object}) => val.name === props.name) ?? -1; + if (liveParam) { + liveParam.map = liveParam.map ? liveParam.map : new Map(); + } + if (liveParam?.array) { + items.push(...liveParam.array); + } else { + const map = liveParam?.map ?? props.defaultVal ?? new Map(); + Object.keys(map).forEach(item => items.push({name: item || '', value: map[item] || ''})); + if (liveParam?.map) { + getValue()[index].array = items; + } + } + + const removeItem = (i: number) => { + const locitems = items.slice(); + locitems.splice(i, 1); + items = locitems; + if (index >= 0) { + getValue()[index].array = locitems; + } else { + getValue().push({name: props.name, array: []}); + } + setValue([...getValue()]); + }; + + return ( + + + {items.length === 0 && } + {items.map((item, i) => { + return ( + + {NameValueEditor(item, (item: NameValue) => { + items[i] = item; + if (index === -1) { + getValue().push({ + name: props.name, + array: items + }); + } else { + const currentValue = getValue()[index]; + getValue()[index].array = currentValue?.array ? [...currentValue.array.slice(0, i), item, ...currentValue.array.slice(i + 1)] : items; + } + setValue([...getValue()]); + })} + {' '} + + ); + })} +
+ + + ); + } +);