From be90cc04fb87048abfa9deb44fb6629857ac6e5e Mon Sep 17 00:00:00 2001
From: Tchoupinax <corentinfiloche@hotmail.fr>
Date: Sun, 8 Sep 2024 16:20:48 +0200
Subject: [PATCH] feat: add a button to show parameter details (#12183)
 (#16871)

---
 .../application-deployment-history.scss       |  5 +-
 .../application-deployment-history.tsx        | 92 +++++++++++--------
 2 files changed, 60 insertions(+), 37 deletions(-)

diff --git a/ui/src/app/applications/components/application-deployment-history/application-deployment-history.scss b/ui/src/app/applications/components/application-deployment-history/application-deployment-history.scss
index b370878a36520..abacf037f48e5 100644
--- a/ui/src/app/applications/components/application-deployment-history/application-deployment-history.scss
+++ b/ui/src/app/applications/components/application-deployment-history/application-deployment-history.scss
@@ -3,7 +3,6 @@
 
 .application-deployment-history {
     &__item {
-        cursor: pointer;
         position: relative;
         @include themify($themes) {
             background: themed('background-2');
@@ -34,6 +33,10 @@
         right: 1em;
     }
 
+    &__show-parameter-details {
+        margin: 20px 0px;
+    }
+
     .white-box {
         margin-top: 1em;
         padding: 0;
diff --git a/ui/src/app/applications/components/application-deployment-history/application-deployment-history.tsx b/ui/src/app/applications/components/application-deployment-history/application-deployment-history.tsx
index c81f2c41c55a0..c24fab22e00eb 100644
--- a/ui/src/app/applications/components/application-deployment-history/application-deployment-history.tsx
+++ b/ui/src/app/applications/components/application-deployment-history/application-deployment-history.tsx
@@ -26,6 +26,9 @@ export const ApplicationDeploymentHistory = ({
         const runEnd = nextDeployedAt ? moment(nextDeployedAt) : moment();
         return {...info, nextDeployedAt, durationMs: runEnd.diff(moment(info.deployedAt)) / 1000};
     });
+
+    const [showParameterDetails, setShowParameterDetails] = React.useState(Boolean);
+
     return (
         <div className='application-deployment-history'>
             {recentDeployments.map((info, index) => (
@@ -93,21 +96,30 @@ export const ApplicationDeploymentHistory = ({
                                         index={0}
                                         versionId={recentDeployments[index].id}
                                     />
-                                    <DataLoader
-                                        input={{...recentDeployments[index].source, targetRevision: recentDeployments[index].revision, appName: app.metadata.name}}
-                                        load={src => services.repos.appDetails(src, src.appName, app.spec.project, 0, recentDeployments[index].id)}>
-                                        {(details: models.RepoAppDetails) => (
-                                            <div>
-                                                <ApplicationParameters
-                                                    application={{
-                                                        ...app,
-                                                        spec: {...app.spec, source: recentDeployments[index].source}
-                                                    }}
-                                                    details={details}
-                                                />
-                                            </div>
-                                        )}
-                                    </DataLoader>
+                                    <button
+                                        type='button'
+                                        className='argo-button argo-button--base application-deployment-history__show-parameter-details'
+                                        onClick={() => setShowParameterDetails(!showParameterDetails)}>
+                                        {showParameterDetails ? 'Hide details' : 'Show details'}
+                                    </button>
+
+                                    {showParameterDetails && (
+                                        <DataLoader
+                                            input={{...recentDeployments[index].source, targetRevision: recentDeployments[index].revision, appName: app.metadata.name}}
+                                            load={src => services.repos.appDetails(src, src.appName, app.spec.project, 0, recentDeployments[index].id)}>
+                                            {(details: models.RepoAppDetails) => (
+                                                <div>
+                                                    <ApplicationParameters
+                                                        application={{
+                                                            ...app,
+                                                            spec: {...app.spec, source: recentDeployments[index].source}
+                                                        }}
+                                                        details={details}
+                                                    />
+                                                </div>
+                                            )}
+                                        </DataLoader>
+                                    )}
                                 </React.Fragment>
                             ) : (
                                 info.sources.map((source, i) => (
@@ -128,28 +140,36 @@ export const ApplicationDeploymentHistory = ({
                                             index={i}
                                             versionId={recentDeployments[index].id}
                                         />
+                                        <button
+                                            type='button'
+                                            className='argo-button argo-button--base application-deployment-history__show-parameter-details'
+                                            onClick={() => setShowParameterDetails(!showParameterDetails)}>
+                                            {showParameterDetails ? 'Hide details' : 'Show details'}
+                                        </button>
 
-                                        <DataLoader
-                                            input={{
-                                                ...source,
-                                                targetRevision: recentDeployments[index].revisions[i],
-                                                index: i,
-                                                versionId: recentDeployments[index].id,
-                                                appName: app.metadata.name
-                                            }}
-                                            load={src => services.repos.appDetails(src, src.appName, app.spec.project, i, recentDeployments[index].id)}>
-                                            {(details: models.RepoAppDetails) => (
-                                                <div>
-                                                    <ApplicationParameters
-                                                        application={{
-                                                            ...app,
-                                                            spec: {...app.spec, source}
-                                                        }}
-                                                        details={details}
-                                                    />
-                                                </div>
-                                            )}
-                                        </DataLoader>
+                                        {showParameterDetails && (
+                                            <DataLoader
+                                                input={{
+                                                    ...source,
+                                                    targetRevision: recentDeployments[index].revisions[i],
+                                                    index: i,
+                                                    versionId: recentDeployments[index].id,
+                                                    appName: app.metadata.name
+                                                }}
+                                                load={src => services.repos.appDetails(src, src.appName, app.spec.project, i, recentDeployments[index].id)}>
+                                                {(details: models.RepoAppDetails) => (
+                                                    <div>
+                                                        <ApplicationParameters
+                                                            application={{
+                                                                ...app,
+                                                                spec: {...app.spec, source}
+                                                            }}
+                                                            details={details}
+                                                        />
+                                                    </div>
+                                                )}
+                                            </DataLoader>
+                                        )}
                                     </React.Fragment>
                                 ))
                             )