fix: ui add tooltips on repository url links and names (argoproj#9868) (

argoproj#10108) * fix: ui add tooltips on repository url links and names (argoproj#9868) Signed-off-by: XieYanke <xieyanke007@gmail.com> * fix: yarn lint failure Signed-off-by: XieYanke <xieyanke007@gmail.com> Signed-off-by: XieYanke <xieyanke007@gmail.com>
ashutosh16 · Oct 7, 2022 · fbd91f7 · fbd91f7
1 parent f3e464b
commit fbd91f7
Showing 1 changed file with 11 additions and 3 deletions.
diff --git a/ui/src/app/settings/components/repos-list/repos-list.tsx b/ui/src/app/settings/components/repos-list/repos-list.tsx
@@ -1,4 +1,4 @@
-import {AutocompleteField, DropDownMenu, FormField, FormSelect, HelpIcon, NotificationType, SlidingPanel} from 'argo-ui';
+import {AutocompleteField, DropDownMenu, FormField, FormSelect, HelpIcon, NotificationType, SlidingPanel, Tooltip} from 'argo-ui';
 import * as PropTypes from 'prop-types';
 import * as React from 'react';
 import {Form, FormValues, FormApi, Text, TextArea, FormErrors} from 'react-form';
@@ -266,9 +266,17 @@ export class ReposList extends React.Component<
                                                         <i className={'icon argo-icon-' + (repo.type || 'git')} />
                                                     </div>
                                                     <div className='columns small-1'>{repo.type || 'git'}</div>
-                                                    <div className='columns small-2'>{repo.name}</div>
+                                                    <div className='columns small-2'>
+                                                        <Tooltip content={repo.name}>
+                                                            <span>{repo.name}</span>
+                                                        </Tooltip>
+                                                    </div>
                                                     <div className='columns small-5'>
-                                                        <Repo url={repo.repo} />
+                                                        <Tooltip content={repo.repo}>
+                                                            <span>
+                                                                <Repo url={repo.repo} />
+                                                            </span>
+                                                        </Tooltip>
                                                     </div>
                                                     <div className='columns small-3'>
                                                         <ConnectionStateIcon state={repo.connectionState} /> {repo.connectionState.status}