feat: make https repo credentials editable in the UI (#9108) (#9782)

* fix: missing actions (#10327) (#10359) Signed-off-by: CI <michael@crenshaw.dev> Signed-off-by: CI <michael@crenshaw.dev> Signed-off-by: Yi Cai <yicai@redhat.com> * chore: infer managed resources health from redis instead of storing it in CRD (#10191) * chore: infer managed resources health from redis instead of storing it in CRD Signed-off-by: Alexander Matyushentsev <AMatyushentsev@gmail.com> * apply reviewer notes Signed-off-by: Alexander Matyushentsev <AMatyushentsev@gmail.com> Signed-off-by: Alexander Matyushentsev <AMatyushentsev@gmail.com> Signed-off-by: Yi Cai <yicai@redhat.com> * fix: Add logic to handle for fileHandle.Close() (#9963) (#10361) Signed-off-by: xin.li <xin.li@daocloud.io> Signed-off-by: xin.li <xin.li@daocloud.io> Signed-off-by: Yi Cai <yicai@redhat.com> * docs: fix typo in upgrade notes (#10377) Signed-off-by: Xijun Dai <daixijun1990@gmail.com> Signed-off-by: Xijun Dai <daixijun1990@gmail.com> Signed-off-by: Yi Cai <yicai@redhat.com> * fix: add space before prompt in CLI (#10362) Signed-off-by: xin.li <xin.li@daocloud.io> Signed-off-by: xin.li <xin.li@daocloud.io> Signed-off-by: Yi Cai <yicai@redhat.com> * docs: fix indentation of example AppProject in 'Sync Windows' documentation (#10388) Signed-off-by: Yi Cai <yicai@redhat.com> * fix: Correctly assume cluster-scoped resources to be self-referenced (#10390) Signed-off-by: jannfis <jann@mistrust.net> Signed-off-by: jannfis <jann@mistrust.net> Signed-off-by: Yi Cai <yicai@redhat.com> * ui-make-https-repo-credential-editable Signed-off-by: ciiay <yicai@redhat.com> Signed-off-by: Yi Cai <yicai@redhat.com> * Minor format fix Signed-off-by: ciiay <yicai@redhat.com> Signed-off-by: Yi Cai <yicai@redhat.com> * Minor fix for unclickable input field Signed-off-by: ciiay <yicai@redhat.com> Signed-off-by: Yi Cai <yicai@redhat.com> * Updates for comments Signed-off-by: ciiay <yicai@redhat.com> Signed-off-by: Yi Cai <yicai@redhat.com> * ui-make-https-repo-credential-editable Signed-off-by: ciiay <yicai@redhat.com> Signed-off-by: Yi Cai <yicai@redhat.com> * Minor format fix Signed-off-by: ciiay <yicai@redhat.com> Signed-off-by: Yi Cai <yicai@redhat.com> * Minor fix for unclickable input field Signed-off-by: ciiay <yicai@redhat.com> Signed-off-by: Yi Cai <yicai@redhat.com> * Updates for comments Signed-off-by: ciiay <yicai@redhat.com> Signed-off-by: Yi Cai <yicai@redhat.com> Signed-off-by: CI <michael@crenshaw.dev> Signed-off-by: Yi Cai <yicai@redhat.com> Signed-off-by: Alexander Matyushentsev <AMatyushentsev@gmail.com> Signed-off-by: xin.li <xin.li@daocloud.io> Signed-off-by: Xijun Dai <daixijun1990@gmail.com> Signed-off-by: jannfis <jann@mistrust.net> Signed-off-by: ciiay <yicai@redhat.com> Co-authored-by: Michael Crenshaw <michael@crenshaw.dev> Co-authored-by: Alexander Matyushentsev <AMatyushentsev@gmail.com> Co-authored-by: my-git9 <xin.li@daocloud.io> Co-authored-by: Xijun Dai <daixijun1990@gmail.com> Co-authored-by: Jun Duan <jun.duan@ibm.com> Co-authored-by: jannfis <jann@mistrust.net>
argoproj · Aug 19, 2022 · f93d678 · f93d678
1 parent 4e59f66
commit f93d678
Show file tree

Hide file tree

Showing 6 changed files with 413 additions and 192 deletions.
diff --git a/ui/src/app/settings/components/repo-details/repo-details.tsx b/ui/src/app/settings/components/repo-details/repo-details.tsx
@@ -0,0 +1,87 @@
+import * as React from 'react';
+import {FormField} from 'argo-ui';
+import {FormApi, Text} from 'react-form';
+import {EditablePanel, EditablePanelItem} from '../../../shared/components';
+import * as models from '../../../shared/models';
+import {NewHTTPSRepoParams} from '../repos-list/repos-list';
+
+export const RepoDetails = (props: {repo: models.Repository; save?: (params: NewHTTPSRepoParams) => Promise<void>}) => {
+    const {repo, save} = props;
+    const FormItems = (repository: models.Repository): EditablePanelItem[] => {
+        const items: EditablePanelItem[] = [
+            {
+                title: 'Type',
+                view: repository.type
+            },
+            {
+                title: 'Repository URL',
+                view: repository.repo
+            },
+            {
+                title: 'Username (optional)',
+                view: repository.username || '',
+                edit: (formApi: FormApi) => <FormField formApi={formApi} field='username' component={Text} />
+            },
+            {
+                title: 'Password (optional)',
+                view: repository.username ? '******' : '',
+                edit: (formApi: FormApi) => <FormField formApi={formApi} field='password' component={Text} componentProps={{type: 'password'}} />
+            }
+        ];
+
+        if (repository.name) {
+            items.splice(1, 0, {
+                title: 'NAME',
+                view: repository.name
+            });
+        }
+
+        if (repository.project) {
+            items.splice(repository.name ? 2 : 1, 0, {
+                title: 'Project',
+                view: repository.project
+            });
+        }
+
+        if (repository.proxy) {
+            items.push({
+                title: 'Proxy (optional)',
+                view: repository.proxy
+            });
+        }
+
+        return items;
+    };
+
+    const newRepo = {
+        type: repo.type,
+        name: repo.name || '',
+        url: repo.repo,
+        username: repo.username || '',
+        password: repo.password || '',
+        tlsClientCertData: repo.tlsClientCertData || '',
+        tlsClientCertKey: repo.tlsClientCertKey || '',
+        insecure: repo.insecure || false,
+        enableLfs: repo.enableLfs || false,
+        proxy: repo.proxy || '',
+        project: repo.project || ''
+    };
+
+    return (
+        <EditablePanel
+            values={repo}
+            validate={input => ({
+                username: !input.username && input.password && 'Username is required if password is given.',
+                password: !input.password && input.username && 'Password is required if username is given.'
+            })}
+            save={async input => {
+                const params: NewHTTPSRepoParams = {...newRepo};
+                params.username = input.username || '';
+                params.password = input.password || '';
+                save(params);
+            }}
+            title='CONNECTED REPOSITORY'
+            items={FormItems(repo)}
+        />
+    );
+};
diff --git a/ui/src/app/settings/components/repos-list/repos-list.scss b/ui/src/app/settings/components/repos-list/repos-list.scss
@@ -28,6 +28,13 @@
     }
 
     .argo-table-list {
+        .item-clickable {
+            cursor: pointer;
+
+            &:hover {
+                box-shadow: 1px 2px 3px rgba($argo-color-gray-9, 0.1), 0 0 0 1px rgba($argo-color-teal-5, 0.5);
+            }
+        }
         .argo-dropdown {
             float: right;
         }