feat: Provide Edit support in Sources tab for multi-source app (argop…

…roj#17588)

Signed-off-by: Keith Chong <kykchong@redhat.com>

ui/src/app/applications/components/application-parameters/application-parameters.tsx

@@ -154,9 +154,6 @@ export const ApplicationParameters = (props: {
     const appSources = app?.spec.sources;
     const [removedOverrides, setRemovedOverrides] = React.useState(new Array<boolean>());
     const collapsible = props.collapsedSources !== undefined && props.handleCollapse !== undefined;
-
-    const attributes: EditablePanelItem[] = [];
-
     const [appParamsDeletedState, setAppParamsDeletedState] = React.useState([]);
 
     if (app.spec.sources?.length > 0) {
@@ -183,22 +180,32 @@ export const ApplicationParameters = (props: {
         );
     } else {
         // For the other old/existings references of ApplicationParameters that have details already loaded. They are single source
+        let attributes: EditablePanelItem[] = [];
         if (props.details) {
             return getEditablePanel(
                 gatherDetails(0, props.details, attributes, source, app, setRemovedOverrides, removedOverrides, appParamsDeletedState, setAppParamsDeletedState, false),
-                props.details,
-                app.spec.source
+                props.details
             );
         } else {
+            // For single source field, for resource details where we have to do the load.
             return (
-                <DataLoader key='appDetails' input={app} load={appSource => getSingleSource(appSource)}>
-                    {(details: models.RepoAppDetails) =>
-                        getEditablePanel(
-                            gatherDetails(0, details, attributes, source, app, setRemovedOverrides, removedOverrides, appParamsDeletedState, setAppParamsDeletedState, false),
+                <DataLoader input={app} load={application => getSingleSource(application)}>
+                    {(details: models.RepoAppDetails) => {
+                        attributes = [];
+                        const attr = gatherDetails(
+                            0,
                             details,
-                            app.spec.source
-                        )
-                    }
+                            attributes,
+                            source,
+                            app,
+                            setRemovedOverrides,
+                            removedOverrides,
+                            appParamsDeletedState,
+                            setAppParamsDeletedState,
+                            false
+                        );
+                        return getEditablePanel(attr, details);
+                    }}
                 </DataLoader>
             );
         }
@@ -240,15 +247,15 @@ export const ApplicationParameters = (props: {
                             </div>
                         </React.Fragment>
                     )}
-                    <DataLoader key={'app_params_source_' + index} input={app} load={application => getSourceFromSources(application, index)}>
+                    <DataLoader input={app} load={application => getSourceFromSources(application, index)}>
                         {(details: models.RepoAppDetails) => getEditablePanelForOneSource(details, index, source)}
                     </DataLoader>
                 </div>
             </div>
         );
     }
 
-    function getEditablePanel(items: EditablePanelItem[], repoAppDetails: models.RepoAppDetails, src: models.ApplicationSource): any {
+    function getEditablePanel(items: EditablePanelItem[], repoAppDetails: models.RepoAppDetails): any {
         return (
             <div className='application-parameters'>
                 <EditablePanel
@@ -557,6 +564,11 @@ function gatherCoreSourceDetails(i: number, attributes: EditablePanelItem[], sou
                 ),
                 edit: (formApi: FormApi) => <FormField formApi={formApi} field={sourcesPathField} component={Text} />
             });
+            attributes.push({
+                title: 'REF',
+                view: <span>{source.ref}</span>,
+                edit: (formApi: FormApi) => <FormField formApi={formApi} field='spec.source.ref' component={Text} />
+            });
         }
     }
     return attributes;