B4aSidebar.react.js

/*
 * Copyright (c) 2016-present, Parse, LLC
 * All rights reserved.
 *
 * This source code is licensed under the license found in the LICENSE file in
 * the root directory of this source tree.
 */
import AppsManager from 'lib/AppsManager';
import FooterMenu from 'components/Sidebar/FooterMenu.react';
import React, { useEffect, useState, useContext, useRef } from 'react';
// import SidebarHeader  from 'components/Sidebar/SidebarHeader.react';
import B4aSidebarSection from 'components/Sidebar/B4aSidebarSection.react';
import SidebarSubItem from 'components/Sidebar/SidebarSubItem.react';
import styles from 'components/Sidebar/B4aSidebar.scss';
import Icon from 'components/Icon/Icon.react';
import { isMobile } from 'lib/browserUtils';
import B4aBadge from 'components/B4aBadge/B4aBadge.react';
import AppsMenu from 'components/Sidebar/AppsMenu.react';
import AppName from 'components/Sidebar/AppName.react';
import { CurrentApp } from 'context/currentApp';
import { canAccess } from 'lib/serverInfo';
import { Link } from 'react-router-dom';
// let isSidebarFixed = !isMobile();
let isSidebarCollapsed = undefined;

const B4aSidebar = ({
  showTour,
  prefix,
  action,
  actionHandler,
  children,
  subsection,
  sections,
  section,
  appSelector,
  contentStyle,
  primaryBackgroundColor,
  secondaryBackgroundColor,
  footerMenuButtons
}) => {
  const currentApp = useContext(CurrentApp);
  const [appsMenuOpen, setAppsMenuOpen] = useState(false);
  const [aiToolsMenuOpen, setAiToolsMenuOpen] = useState(false);
  const [collapsed, setCollapsed] = useState(() => {
    return isSidebarCollapsed !== undefined ? isSidebarCollapsed : isMobile();
  });
  // const [fixed, setFixed] = useState(() => isSidebarFixed);
  const [mobileFriendly, setMobileFriendly] = useState(() => isMobile());
  const prevShowTour = useRef(showTour);

  const windowResizeHandler = () => {
    if (isMobile()) {
      if (document.body.className.indexOf(' sidebarCollapsed') === -1) {
        document.body.className += ' sidebarCollapsed';
      }
      setMobileFriendly(true);
      setCollapsed(true);
      // setFixed(false);
    } else {
      document.body.className = document.body.className.replace(' sidebarCollapsed', '');
      setMobileFriendly(false);
      setCollapsed(false);
      // setFixed(true);
    }
  }

  const checkExternalClick = ({ target }) => {
    if (mobileFriendly && !collapsed) {
      for (let current = target; current && current.id !== 'browser_mount'; current = current.parentNode) {
        if (/^sidebar/g.test(current.className) || /^introjs-tooltipReferenceLayer/g.test(current.className) || /^fixed_wrapper/g.test(current.id)) {
          return;
        }
      }
      setCollapsed(true);
    }
  }

  useEffect(() => {
    window.addEventListener('resize', windowResizeHandler);
    document.body.addEventListener('click', checkExternalClick);

    return () => {
      window.removeEventListener('resize', windowResizeHandler);
      document.body.removeEventListener('click', checkExternalClick);
    }
  }, []);

  useEffect(() => {
    isSidebarCollapsed = collapsed;
  }, [collapsed]);

  useEffect(() => {
    if (!!showTour && collapsed) {
      // if showing tour then open sidebar
      setMobileFriendly(false);
      setCollapsed(false);
      // setFixed(true);
    }

    if (prevShowTour.current && !showTour && isMobile()) {
      // Tour is over and on mobile device
      setMobileFriendly(true);
      setCollapsed(true);
      // setFixed(false);
    }
  }, [showTour]);

  useEffect(() => {
    if (collapsed && document.body.className.indexOf(' sidebarCollapsed') === -1) {
      document.body.className += ' sidebarCollapsed';
    } else if (!collapsed && document.body.className.indexOf(' sidebarCollapsed') !== -1 && !mobileFriendly) {
      document.body.className = document.body.className.replace(' sidebarCollapsed', '')
    }
  }, [collapsed])

  const _subMenu = subsections => {
    if (!subsections) {
      return null;
    }
    return (
      <div className={styles.submenu}>
        {subsections.map(({ name, link, badge, children: groupChildren }) => {
          if (groupChildren) {
            const isGroupActive = subsection === name || groupChildren.some(c => c.name === subsection);
            const groupLink = link.startsWith('/') ? prefix + link : link;
            const groupRoute = link.replace(/^\//, '');
            const groupDisabled = !canAccess(currentApp.serverInfo, groupRoute);
            return (
              <div key={name} className={styles.subgroup}>
                {groupDisabled ? (
                  <span
                    className={`${styles.subgroupHeader}`}
                    style={{ pointerEvents: 'none', color: '#C1E2FF', opacity: 0.4 }}
                  >
                    {name}
                  </span>
                ) : (
                  <Link
                    className={`${styles.subgroupHeader} ${isGroupActive ? styles.subgroupHeaderActive : ''}`}
                    to={{ pathname: groupLink }}
                  >
                    {name}
                  </Link>
                )}
                <div className={styles.subgroupChildren}>
                  {groupChildren.map(child => {
                    const childActive = subsection === child.name;
                    const childLink = child.link.startsWith('/') ? prefix + child.link : child.link;
                    const childRoute = child.link.replace(/^\//, '');
                    const childDisabled = !canAccess(currentApp.serverInfo, childRoute);
                    return (
                      <SidebarSubItem
                        key={child.name}
                        name={child.name}
                        link={childLink}
                        action={action || null}
                        actionHandler={childActive ? actionHandler : null}
                        active={childActive}
                        badge={child.badge}
                        disabled={childDisabled}
                      >
                        {childActive ? children : null}
                      </SidebarSubItem>
                    );
                  })}
                </div>
              </div>
            );
          }

          const active = subsection === name;
          link = link.startsWith('/') ? prefix + link : link;
          return (
            <SidebarSubItem
              key={name}
              name={name}
              link={link}
              action={action || null}
              actionHandler={active ? actionHandler : null}
              active={active}
              badge={badge}
            >
              {active ? children : null}
            </SidebarSubItem>
          );
        })}
      </div>
    );
  }

  const sidebarClasses = [styles.sidebar];

  if (collapsed) {
    sidebarClasses.push(styles.collapsed);

    return <div className={sidebarClasses.join(' ')}>
      <div className={styles.pinContainer} onClick={() => setCollapsed(false)}>
        <Icon className={styles.sidebarPin}
          name="b4a-collapse-sidebar"
          width={20}
          height={20}
        />
      </div>
      <div className={styles.content} style={contentStyle}>
        {sections.map(({
          name,
          icon,
          style,
          link,
          subsections
        }) => {
          const active = name === section;
          // If link points to another component, adds the prefix
          link = link.startsWith('/') ? prefix + link : link;
          return (
            <B4aSidebarSection
              key={name}
              name={name}
              link={link}
              icon={icon}
              style={style}
              active={active}
              primaryBackgroundColor={primaryBackgroundColor}
              isCollapsed={true}
              onClick={() => {}}
              locked={!canAccess(currentApp.serverInfo, name)}
            >
              {_subMenu(subsections)}
            </B4aSidebarSection>
          );
        })}
      </div>
      <div className={styles.footer} onClick={() => setCollapsed(false)}>
        <Icon height={18} width={18} name='ellipses' fill='white' />
      </div>
    </div>
  }

  const apps = [].concat(AppsManager.apps()).sort((a, b) => (a.name.toLowerCase() < b.name.toLowerCase() ? -1 : (a.name.toLowerCase() > b.name.toLowerCase() ? 1 : 0)));
  const footerButtons = [
    <button className={styles.supportBtn}
      // eslint-disable-next-line no-undef
      onClick={() => zE && zE.activate()}
      key={0}
    >Support <Icon width={20} height={20} name="support-icon" fill="#C1E2FF" /></button>
  ];
  if (footerMenuButtons) {
    footerButtons.push(<FooterMenu key={1}>{footerMenuButtons}</FooterMenu>);
  }

  const pinClasses = [styles.sidebarPin];

  const onPinClick = () => setCollapsed(prev => !prev);
  if (mobileFriendly) {
    pinClasses.push(styles.inverseIcon);
  }

  let sidebarContent;
  if (appsMenuOpen) {
    sidebarContent = (
      <AppsMenu
        apps={apps}
        current={currentApp}
        onPinClick={onPinClick}
        onSelect={() => setAppsMenuOpen(false)}
        isAiToolsOpen={aiToolsMenuOpen}
      />
    );
  } else {
    sidebarContent = (
      <>
        {appSelector && (
          <div className={styles.apps}>
            <AppName
              name={currentApp.name}
              onClick={() => setAppsMenuOpen(true)}
              onPinClick={onPinClick}
            />
          </div>
        )}
        <div className={styles.content + ' ' + (aiToolsMenuOpen ? styles.aiToolsOpen : '')} style={contentStyle}>
          {sections.map(({
            name,
            icon,
            style,
            link,
            subsections,
            badgeParams
          }) => {
            const active = name === section;
            const badge = badgeParams && <B4aBadge {...badgeParams} /> || ''
            // If link points to another component, adds the prefix
            link = link.startsWith('/') ? prefix + link : link;
            return (
              <B4aSidebarSection
                key={name}
                name={name}
                icon={icon}
                style={style}
                link={link}
                active={active}
                primaryBackgroundColor={primaryBackgroundColor}
                secondaryBackgroundColor={secondaryBackgroundColor}
                badge={badge}
                locked={!canAccess(currentApp.serverInfo, name)}
              >
                {active ? _subMenu(subsections) : null}
              </B4aSidebarSection>
            );
          })}
        </div>
      </>
    )
  }

  return <div className={sidebarClasses.join(' ')} id="sidebar">
    {sidebarContent}
    <div className={`${styles.aiTools} ${aiToolsMenuOpen ? styles.open : ''}`}>
      <div className={styles.aiToolsContainer}>
        <div className={styles.aiToolsHeader} onClick={() => setAiToolsMenuOpen(!aiToolsMenuOpen)}>
          <span>AI Tools</span>
          <Icon name="b4a-chevron-down" width={16} height={16} />
        </div>
        <div className={`${styles.aiToolsMenu} ${aiToolsMenuOpen ? styles.visible : ''}`}>
          <a href={`${b4aSettings.CONTAINERS_DASHBOARD_PATH}/agents`} className={styles.aiToolItem}>
            <Icon name="b4a-agent" width={20} height={20} />
            <span>AI Agent</span>
          </a>
          <a href={`${b4aSettings.BACK4APP_SITE_PATH}/docs/mcp`} target="_blank" rel="noopener noreferrer" className={styles.aiToolItem + ' ' + styles.mcp}>
            <Icon name="b4a-mcp" width={20} height={20} />
            <span>Model Context Protocol</span>
          </a>
        </div>
      </div>
    </div>
    <div className={styles.footer + ' footer'}>{footerButtons}</div>
  </div>

}

export default B4aSidebar;