argo-cd

1
import {Tooltip} from 'argo-ui';
2
import {Boundary, Placement} from 'popper.js';
3
import {useData} from 'argo-ui/v2';
4
import * as React from 'react';
5
import {Context} from '../shared/context';
6
import {services, ViewPreferences} from '../shared/services';
7

8
require('./sidebar.scss');
9

10
interface SidebarProps {
11
    onVersionClick: () => void;
12
    navItems: {path: string; iconClassName: string; title: string; tooltip?: string}[];
13
    pref: ViewPreferences;
14
}
15

16
export const SIDEBAR_TOOLS_ID = 'sidebar-tools';
17

18
export const useSidebarTarget = () => {
19
    const sidebarTarget = React.useRef(document.createElement('div'));
20

21
    React.useEffect(() => {
22
        const sidebar = document.getElementById(SIDEBAR_TOOLS_ID);
23
        sidebar.appendChild(sidebarTarget?.current);
24
        return () => {
25
            sidebarTarget.current?.remove();
26
        };
27
    }, []);
28

29
    return sidebarTarget;
30
};
31

32
export const Sidebar = (props: SidebarProps) => {
33
    const context = React.useContext(Context);
34
    const [version, loading, error] = useData(() => services.version.version());
35
    const locationPath = context.history.location.pathname;
36

37
    const tooltipProps = {
38
        placement: 'right' as Placement,
39
        popperOptions: {
40
            modifiers: {
41
                preventOverflow: {
42
                    boundariesElement: 'window' as Boundary
43
                }
44
            }
45
        }
46
    };
47

48
    return (
49
        <div className={`sidebar ${props.pref.hideSidebar ? 'sidebar--collapsed' : ''}`}>
50
            <div className='sidebar__container'>
51
                <div className='sidebar__logo'>
52
                    <div onClick={() => services.viewPreferences.updatePreferences({...props.pref, hideSidebar: !props.pref.hideSidebar})} className='sidebar__collapse-button'>
53
                        <i className={`fas fa-arrow-${props.pref.hideSidebar ? 'right' : 'left'}`} />
54
                    </div>
55
                    {!props.pref.hideSidebar && (
56
                        <div className='sidebar__logo-container'>
57
                            <img src='assets/images/argologo.svg' alt='Argo' className='sidebar__logo__text-logo' />
58
                            <div className='sidebar__version' onClick={props.onVersionClick}>
59
                                {loading ? 'Loading...' : error?.state ? 'Unknown' : version?.Version || 'Unknown'}
60
                            </div>
61
                        </div>
62
                    )}
63
                    <img src='assets/images/logo.png' alt='Argo' className='sidebar__logo__character' />{' '}
64
                </div>
65

66
                {(props.navItems || []).map(item => (
67
                    <Tooltip key={item.path} content={<div className='sidebar__tooltip'>{item?.tooltip || item.title}</div>} {...tooltipProps}>
68
                        <div
69
                            key={item.title}
70
                            className={`sidebar__nav-item ${locationPath === item.path || locationPath.startsWith(`${item.path}/`) ? 'sidebar__nav-item--active' : ''}`}
71
                            onClick={() => context.history.push(item.path)}>
72
                            <React.Fragment>
73
                                <div>
74
                                    <i className={item?.iconClassName || ''} />
75
                                    {!props.pref.hideSidebar && item.title}
76
                                </div>
77
                            </React.Fragment>
78
                        </div>
79
                    </Tooltip>
80
                ))}
81

82
                {props.pref.hideSidebar && (
83
                    <Tooltip content='Show Filters' {...tooltipProps}>
84
                        <div
85
                            onClick={() => services.viewPreferences.updatePreferences({...props.pref, hideSidebar: !props.pref.hideSidebar})}
86
                            className='sidebar__nav-item sidebar__filter-button'>
87
                            <div>
88
                                <i className={`fas fa-filter`} />
89
                            </div>
90
                        </div>
91
                    </Tooltip>
92
                )}
93
            </div>
94
            <div id={SIDEBAR_TOOLS_ID} />
95
        </div>
96
    );
97
};
98