github.com/argoproj/argo-cd/v2@v2.10.9/ui/src/app/sidebar/sidebar.tsx (about)

     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  };