feat: Add Sources tab to show all sources of a multi-source app (argo…

…proj#17274)

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

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

@@ -169,17 +169,18 @@ export const ApplicationSummary = (props: ApplicationSummaryProps) => {
             title: 'CREATED AT',
             view: formatCreationTimestamp(app.metadata.creationTimestamp)
         },
-        {
-            title: 'REPO URL',
-            view: <Repo url={source.repoURL} />,
-            edit: (formApi: FormApi) =>
-                hasMultipleSources ? (
-                    helpTip('REPO URL is not editable for applications with multiple sources. You can edit them in the "Manifest" tab.')
-                ) : (
-                    <FormField formApi={formApi} field='spec.source.repoURL' component={Text} />
-                )
-        },
-        ...(isHelm
+        !hasMultipleSources &&
+            {
+                title: 'REPO URL',
+                view: <Repo url={source.repoURL} />,
+                edit: (formApi: FormApi) =>
+                    hasMultipleSources ? (
+                        helpTip('REPO URL is not editable for applications with multiple sources. You can edit them in the "Manifest" tab.')
+                    ) : (
+                        <FormField formApi={formApi} field='spec.source.repoURL' component={Text} />
+                    )
+            },
+        ...(!hasMultipleSources ? (isHelm
             ? [
                   {
                       title: 'CHART',
@@ -259,8 +260,7 @@ export const ApplicationSummary = (props: ApplicationSummaryProps) => {
                               <FormField formApi={formApi} field='spec.source.path' component={Text} />
                           )
                   }
-              ]),
-
+            ]) : []),
         {
             title: 'REVISION HISTORY LIMIT',
             view: app.spec.revisionHistoryLimit,

ui/src/app/applications/components/resource-details/resource-details.tsx

@@ -40,6 +40,7 @@ export const ResourceDetails = (props: ResourceDetailsProps) => {
     const tab = new URLSearchParams(appContext.history.location.search).get('tab');
     const selectedNodeInfo = NodeInfo(new URLSearchParams(appContext.history.location.search).get('node'));
     const selectedNodeKey = selectedNodeInfo.key;
+    const [pageNumber, setPageNumber] = React.useState(0);
 
     const getResourceTabs = (
         node: ResourceNode,
@@ -161,23 +162,23 @@ export const ResourceDetails = (props: ResourceDetailsProps) => {
                 content: <ApplicationSummary app={application} updateApp={(app, query: {validate?: boolean}) => updateApp(app, query)} />
             },
             {
-                title: 'PARAMETERS',
-                key: 'parameters',
+                title: 'INPUTS/SOURCES',
+                key: 'sources',
                 content: (
                     <DataLoader
                         key='appDetails'
                         input={application}
-                        load={app =>
-                            services.repos.appDetails(AppUtils.getAppDefaultSource(app), app.metadata.name, app.spec.project).catch(() => ({
-                                type: 'Directory' as AppSourceType,
-                                path: AppUtils.getAppDefaultSource(app).path
-                            }))
-                        }>
-                        {(details: RepoAppDetails) => (
+                        load={app => (
+                            getSources(app)
+                        )}>
+                        {(details: RepoAppDetails[]) => (
                             <ApplicationParameters
                                 save={(app: models.Application, query: {validate?: boolean}) => updateApp(app, query)}
                                 application={application}
-                                details={details}
+                                details={details[0]}
+                                detailsList={details}
+                                pageNumber={pageNumber}
+                                setPageNumber={setPageNumber}
                             />
                         )}
                     </DataLoader>
@@ -368,3 +369,32 @@ export const ResourceDetails = (props: ResourceDetailsProps) => {
         </div>
     );
 };
+
+// Maintain compatibility with single source field. Remove else block when source field is removed
+async function getSources(app: models.Application) {
+    var listOfDetails = new Array<RepoAppDetails & {type: AppSourceType, path: string}>();
+    var sources : models.ApplicationSource[] = AppUtils.getAppSources(app);
+    if (sources) {
+        const length = sources.length;
+        for (var i = 0; i < length; i++) {
+            const aSource = sources[i];
+            var repoDetail = await services.repos.appDetails(aSource, app.metadata.name, app.spec.project).catch((e) => ({
+                type: 'Directory' as AppSourceType,
+                path: aSource.path
+            }));
+            if (repoDetail) {
+                listOfDetails.push(repoDetail);
+            }            
+        }
+        return listOfDetails;
+    } else {
+        var repoDetail = await services.repos.appDetails(AppUtils.getAppDefaultSource(app), app.metadata.name, app.spec.project).catch(() => ({
+            type: 'Directory' as AppSourceType,
+            path: AppUtils.getAppDefaultSource(app).path
+        }))
+        if (repoDetail) {
+            listOfDetails.push(repoDetail);
+        }
+        return listOfDetails;
+    }
+}

ui/src/app/applications/components/utils.tsx

@@ -1029,6 +1029,13 @@ export function getAppDefaultSource(app?: appModels.Application) {
     return app.spec.sources && app.spec.sources.length > 0 ? app.spec.sources[0] : app.spec.source;
 }
 
+export function getAppSources(app?: appModels.Application) : appModels.ApplicationSource[] {
+    if (!app) {
+        return null;
+    }
+    return app.spec.sources
+}
+
 export function getAppSpecDefaultSource(spec: appModels.ApplicationSpec) {
     return spec.sources && spec.sources.length > 0 ? spec.sources[0] : spec.source;
 }

ui/src/app/shared/components/editable-panel/editable-panel.scss

@@ -13,6 +13,12 @@
         right: 3em;
     }
 
+    &__collapsible-button {
+        position: absolute;
+        top: 30px;
+        right: 30px;
+    }
+
     .form-field__select {
         line-height: 15px;
         padding: 0;