feat(UI): Added link for docs to add clusters (argoproj#17395)

* cluster-add-link Signed-off-by: Surajyadav <harrypotter1108@gmail.com> * docs Signed-off-by: Surajyadav <harrypotter1108@gmail.com> * docs-panel Signed-off-by: Surajyadav <harrypotter1108@gmail.com> * added Signed-off-by: Surajyadav <harrypotter1108@gmail.com> * fixed Signed-off-by: Surajyadav <harrypotter1108@gmail.com> --------- Signed-off-by: Surajyadav <harrypotter1108@gmail.com>
mkieweg · Jun 11, 2024 · 8f204cc · 8f204cc
1 parent e650e55
commit 8f204cc
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 3 deletions.
diff --git a/ui/src/app/settings/components/clusters-list/cluster-list.scss b/ui/src/app/settings/components/clusters-list/cluster-list.scss
@@ -0,0 +1,25 @@
+@import 'node_modules/argo-ui/src/styles/config';
+@import 'node_modules/argo-ui/src/styles/theme';
+
+
+.help-text {
+    color: $argo-color-gray-8;
+    @include themify($themes) {
+        color: themed('text-2');
+    }
+    a {
+        color: #007bff; /* Blue color for the link */
+        @include themify($themes) {
+            color: themed('light-argo-teal-7');
+        }
+        text-decoration: none; /* Remove default underline */
+        transition: color 0.3s ease; /* Smooth transition for color change */
+
+        &:hover {
+            color: #0056b3; /* Darker blue color on hover */
+            @include themify($themes) {
+                color: themed('light-argo-teal-5');
+            }
+        }
+    }
+}
diff --git a/ui/src/app/settings/components/clusters-list/clusters-list.tsx b/ui/src/app/settings/components/clusters-list/clusters-list.tsx
@@ -1,19 +1,59 @@
 import {DropDownMenu, ErrorNotification, NotificationType} from 'argo-ui';
-import {Tooltip} from 'argo-ui';
+import {Tooltip, Toolbar} from 'argo-ui';
 import * as React from 'react';
 import {RouteComponentProps} from 'react-router-dom';
 import {clusterName, ConnectionStateIcon, DataLoader, EmptyState, Page} from '../../../shared/components';
-import {Consumer} from '../../../shared/context';
+import {Consumer, Context} from '../../../shared/context';
 import * as models from '../../../shared/models';
 import {services} from '../../../shared/services';
+import {AddAuthToToolbar} from '../../../shared/components';
+import {Observable} from 'rxjs';
+
+import './cluster-list.scss';
+
+// CustomTopBar component similar to FlexTopBar in application-list panel
+const CustomTopBar = (props: {toolbar?: Toolbar | Observable<Toolbar>}) => {
+    const ctx = React.useContext(Context);
+    const loadToolbar = AddAuthToToolbar(props.toolbar, ctx);
+    return (
+        <React.Fragment>
+            <div className='top-bar row top-bar' key='tool-bar'>
+                <DataLoader load={() => loadToolbar}>
+                    {toolbar => (
+                        <React.Fragment>
+                            <div className='column small-11 flex-top-bar_center'>
+                                <div className='top-bar'>
+                                    <div className='text-center'>
+                                        <span className='help-text'>
+                                            Refer to CLI{' '}
+                                            <a
+                                                href='https://argo-cd.readthedocs.io/en/stable/operator-manual/cluster-management/#adding-a-cluster'
+                                                target='_blank'
+                                                rel='noopener noreferrer'>
+                                                <i className='fa fa-external-link-alt' /> Documentation{' '}
+                                            </a>{' '}
+                                            for adding clusters.
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className='columns small-1 top-bar__right-side'>{toolbar.tools}</div>
+                        </React.Fragment>
+                    )}
+                </DataLoader>
+            </div>
+        </React.Fragment>
+    );
+};
 
 export const ClustersList = (props: RouteComponentProps<{}>) => {
     const clustersLoaderRef = React.useRef<DataLoader>();
     return (
         <Consumer>
             {ctx => (
                 <React.Fragment>
-                    <Page title='Clusters' toolbar={{breadcrumbs: [{title: 'Settings', path: '/settings'}, {title: 'Clusters'}]}}>
+                    <Page title='Clusters' toolbar={{breadcrumbs: [{title: 'Settings', path: '/settings'}, {title: 'Clusters'}]}} hideAuth={true}>
+                        <CustomTopBar />
                         <div className='repos-list'>
                             <div className='argo-container'>
                                 <DataLoader