From 67e5ad804d6948cb0e863f1d2c66de8af54b7875 Mon Sep 17 00:00:00 2001
From: Raghavi <rshirur@redhat.com>
Date: Wed, 6 Mar 2024 18:18:03 +0530
Subject: [PATCH] feat(gui): Added GUI support for destinationServiceAccount
 field (#6)

* Changes for new DestinationServiceAccount changes in AppProject

Signed-off-by: anandf <anjoseph@redhat.com>

* feat(gui): Added GUI support for destinationServiceAccount field

Signed-off-by: Raghavi Shirur <rshirur@redhat.com>

* Revert "Changes for new DestinationServiceAccount changes in AppProject"

This reverts commit 8d36c2217c1eb7fd9edf4d01576a62472a641c5a.

---------

Signed-off-by: anandf <anjoseph@redhat.com>
Signed-off-by: Raghavi Shirur <rshirur@redhat.com>
Co-authored-by: anandf <anjoseph@redhat.com>
Signed-off-by: anandf <anjoseph@redhat.com>
---
 .../project-details/project-details.tsx       | 101 ++++++++++++++++++
 .../project-details/resource-lists-panel.tsx  |  43 +++++++-
 ui/src/app/shared/models.ts                   |   7 ++
 3 files changed, 150 insertions(+), 1 deletion(-)

diff --git a/ui/src/app/settings/components/project-details/project-details.tsx b/ui/src/app/settings/components/project-details/project-details.tsx
index 8b00c8590edb75..7b239d9ef1e165 100644
--- a/ui/src/app/settings/components/project-details/project-details.tsx
+++ b/ui/src/app/settings/components/project-details/project-details.tsx
@@ -63,6 +63,15 @@ function reduceGlobal(projs: Project[]): ProjectSpec & {count: number} {
                 );
             });
 
+            merged.destinationServiceAccounts = merged.destinationServiceAccounts.filter((item, index) => {
+                return (
+                    index ===
+                    merged.destinationServiceAccounts.findIndex(obj => {
+                        return obj.server === item.server && obj.namespace === item.namespace && obj.defaultServiceAccount === item.defaultServiceAccount;
+                    })
+                );
+            });
+
             merged.destinations = merged.destinations.filter((item, index) => {
                 return (
                     index ===
@@ -130,6 +139,7 @@ function reduceGlobal(projs: Project[]): ProjectSpec & {count: number} {
             signatureKeys: [],
             destinations: [],
             description: '',
+            destinationServiceAccounts: [],
             roles: [],
             count: 0
         }
@@ -801,6 +811,97 @@ export class ProjectDetails extends React.Component<RouteComponentProps<{name: s
                     items={[]}
                 />
 
+                <EditablePanel
+                    save={item => this.saveProject(item)}
+                    values={proj}
+                    title={
+                        <React.Fragment>
+                            DESTINATION SERVICE ACCOUNTS{' '}
+                            {helpTip(
+                                'Destination Service Accounts holds information about the service accounts to be impersonated for the application sync operation for each destination.'
+                            )}
+                        </React.Fragment>
+                    }
+                    view={
+                        <React.Fragment>
+                            {proj.spec.destinationServiceAccounts ? (
+                                <React.Fragment>
+                                    <div className='row white-box__details-row'>
+                                        <div className='columns small-4'>Server</div>
+                                        <div className='columns small-3'>Namespace</div>
+                                        <div className='columns small-5'>DefaultServiceAccount</div>
+                                    </div>
+                                    {proj.spec.destinationServiceAccounts.map((dest, i) => (
+                                        <div className='row white-box__details-row' key={i}>
+                                            <div className='columns small-4'>{dest.server}</div>
+                                            <div className='columns small-3'>{dest.namespace}</div>
+                                            <div className='columns small-5'>{dest.defaultServiceAccount}</div>
+                                        </div>
+                                    ))}
+                                </React.Fragment>
+                            ) : (
+                                emptyMessage('destinationServiceAccount')
+                            )}
+                        </React.Fragment>
+                    }
+                    edit={formApi => (
+                        <DataLoader load={() => services.clusters.list()}>
+                            {clusters => (
+                                <React.Fragment>
+                                    <div className='row white-box__details-row'>
+                                        <div className='columns small-4'>Server</div>
+                                        <div className='columns small-3'>Namespace</div>
+                                        <div className='columns small-5'>DefaultServiceAccount</div>
+                                    </div>
+                                    {(formApi.values.spec.destinationServiceAccounts || []).map((_: Project, i: number) => (
+                                        <div className='row white-box__details-row' key={i}>
+                                            <div className='columns small-4'>
+                                                <FormField
+                                                    formApi={formApi}
+                                                    field={`spec.destinationServiceAccounts[${i}].server`}
+                                                    component={AutocompleteField}
+                                                    componentProps={{items: clusters.map(cluster => cluster.server)}}
+                                                />
+                                            </div>
+                                            <div className='columns small-3'>
+                                                <FormField formApi={formApi} field={`spec.destinationServiceAccounts[${i}].namespace`} component={AutocompleteField} />
+                                            </div>
+                                            <div className='columns small-5'>
+                                                <FormField
+                                                    formApi={formApi}
+                                                    field={`spec.destinationServiceAccounts[${i}].defaultServiceAccount`}
+                                                    component={AutocompleteField}
+                                                    componentProps={{items: clusters.map(cluster => cluster.name)}}
+                                                />
+                                            </div>
+                                            <i
+                                                className='fa fa-times'
+                                                onClick={() => formApi.setValue('spec.destinationServiceAccounts', removeEl(formApi.values.spec.destinationServiceAccounts, i))}
+                                            />
+                                        </div>
+                                    ))}
+
+                                    <button
+                                        className='argo-button argo-button--short'
+                                        onClick={() =>
+                                            formApi.setValue(
+                                                'spec.destinationServiceAccounts',
+                                                (formApi.values.spec.destinationServiceAccounts || []).concat({
+                                                    server: '*',
+                                                    namespace: '*',
+                                                    defaultServiceAccount: '*'
+                                                })
+                                            )
+                                        }>
+                                        ADD DESTINATION SERVICE ACCOUNTS
+                                    </button>
+                                </React.Fragment>
+                            )}
+                        </DataLoader>
+                    )}
+                    items={[]}
+                />
+
                 <ResourceListsPanel proj={proj} saveProject={item => this.saveProject(item)} />
                 {globalProj.count > 0 && (
                     <ResourceListsPanel
diff --git a/ui/src/app/settings/components/project-details/resource-lists-panel.tsx b/ui/src/app/settings/components/project-details/resource-lists-panel.tsx
index ec9e617ac9122d..504bea664e2960 100644
--- a/ui/src/app/settings/components/project-details/resource-lists-panel.tsx
+++ b/ui/src/app/settings/components/project-details/resource-lists-panel.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import {FormApi} from 'react-form';
 
 import {EditablePanel} from '../../../shared/components';
-import {ApplicationDestination, GroupKind, Groups, Project, ProjectSpec, ResourceKinds} from '../../../shared/models';
+import {ApplicationDestination, ApplicationDestinationServiceAccounts, GroupKind, Groups, Project, ProjectSpec, ResourceKinds} from '../../../shared/models';
 
 function removeEl(items: any[], index: number) {
     return items.slice(0, index).concat(items.slice(index + 1));
@@ -164,6 +164,43 @@ function viewDestinationsInfoList(type: field, proj: Project) {
     );
 }
 
+const destinationServiceAccountsInfoByField: {[type: string]: {title: string; helpText: string}} = {
+    destinationServiceAccounts: {
+        title: 'destination service accounts',
+        helpText: 'DestinationServiceAccounts holds information about the service accounts to be impersonated for the application sync operation for each destination.'
+    }
+};
+
+function viewDestinationServiceAccountsInfoList(type: field, proj: Project) {
+    const info = destinationServiceAccountsInfoByField[type];
+    const list = proj.spec[type] as Array<ApplicationDestinationServiceAccounts>;
+    return (
+        <React.Fragment>
+            <p className='project-details__list-title'>
+                {info.title} {helpTip(info.helpText)}
+            </p>
+            {(list || []).length > 0 ? (
+                <React.Fragment>
+                    <div className='row white-box__details-row'>
+                        <div className='columns small-4'>Server</div>
+                        <div className='columns small-8'>Namespace</div>
+                        <div className='columns small-12'>DefaultServiceAccount</div>
+                    </div>
+                    {list.map((destinationServiceAccounts, i) => (
+                        <div className='row white-box__details-row' key={i}>
+                            <div className='columns small-4'>{destinationServiceAccounts.server}</div>
+                            <div className='columns small-8'>{destinationServiceAccounts.namespace}</div>
+                            <div className='columns small-12'>{destinationServiceAccounts.defaultServiceAccount}</div>
+                        </div>
+                    ))}
+                </React.Fragment>
+            ) : (
+                <p>The {info.title} is empty</p>
+            )}
+        </React.Fragment>
+    );
+}
+
 function editList(type: field, formApi: FormApi) {
     const info = infoByField[type];
 
@@ -213,6 +250,10 @@ export const ResourceListsPanel = ({proj, saveProject, title}: {proj: Project; t
                 {!proj.metadata &&
                     Object.keys(sourceNamespacesInfoByField).map(key => <React.Fragment key={key}>{viewSourceNamespacesInfoList(key as field, proj)}</React.Fragment>)}
                 {!proj.metadata && Object.keys(destinationsInfoByField).map(key => <React.Fragment key={key}>{viewDestinationsInfoList(key as field, proj)}</React.Fragment>)}
+                {!proj.metadata &&
+                    Object.keys(destinationServiceAccountsInfoByField).map(key => (
+                        <React.Fragment key={key}>{viewDestinationServiceAccountsInfoList(key as field, proj)}</React.Fragment>
+                    ))}
             </React.Fragment>
         }
         edit={
diff --git a/ui/src/app/shared/models.ts b/ui/src/app/shared/models.ts
index 823c61c34dc9a7..f9acf3ab2b0e33 100644
--- a/ui/src/app/shared/models.ts
+++ b/ui/src/app/shared/models.ts
@@ -170,6 +170,12 @@ export interface ApplicationDestination {
     name: string;
 }
 
+export interface ApplicationDestinationServiceAccounts {
+    server: string;
+    namespace: string;
+    defaultServiceAccount: string;
+}
+
 export interface OrphanedResource {
     group: string;
     kind: string;
@@ -717,6 +723,7 @@ export interface ProjectSpec {
     sourceRepos: string[];
     sourceNamespaces: string[];
     destinations: ApplicationDestination[];
+    destinationServiceAccounts: ApplicationDestinationServiceAccounts[];
     description: string;
     roles: ProjectRole[];
     clusterResourceWhitelist: GroupKind[];