weseek__growi/apps/app/src/components-universal/Admin/Common/AdminNavigation.tsx

import React, { useCallback } from 'react';

import { pathUtils } from '@growi/core/dist/utils';
import { useTranslation } from 'next-i18next';
import Link from 'next/link';
import urljoin from 'url-join';

import { useGrowiCloudUri, useGrowiAppIdForGrowiCloud } from '~/stores-universal/context';

import styles from './AdminNavigation.module.scss';

const moduleClass = styles['admin-navigation'];


// eslint-disable-next-line react/prop-types
const MenuLabel = ({ menu }: { menu: string }) => {
  const { t } = useTranslation(['admin', 'commons']);

  switch (menu) {
    /* eslint-disable no-multi-spaces, max-len */
    case 'app':                      return <><span className="material-symbols-outlined me-1">settings</span>{        t('headers.app_settings', { ns: 'commons' }) }</>;
    case 'security':                 return <><span className="material-symbols-outlined me-1">shield</span>{          t('security_settings.security_settings') }</>;
    case 'markdown':                 return <><span className="material-symbols-outlined me-1">note</span>{            t('markdown_settings.markdown_settings') }</>;
    case 'customize':                return <><span className="material-symbols-outlined me-1">construction</span>{          t('customize_settings.customize_settings') }</>;
    case 'importer':                 return <><span className="material-symbols-outlined me-1">cloud_upload</span>{    t('importer_management.import_data') }</>;
    case 'export':                   return <><span className="material-symbols-outlined me-1">cloud_download</span>{  t('export_management.export_archive_data') }</>;
    case 'data-transfer':            return <><span className="material-symbols-outlined me-1">flight</span>{           t('g2g_data_transfer.data_transfer', { ns: 'commons' })}</>;
    case 'notification':             return <><span className="material-symbols-outlined me-1">notifications</span>{            t('external_notification.external_notification')}</>;
    case 'slack-integration':        return <><span className="material-symbols-outlined me-1">shuffle</span>{         t('slack_integration.slack_integration') }</>;
    case 'slack-integration-legacy': return <><span className="material-symbols-outlined me-1">shuffle</span>{         t('slack_integration_legacy.slack_integration_legacy')}</>;
    case 'users':                    return <><span className="material-symbols-outlined me-1">person</span>{            t('user_management.user_management') }</>;
    case 'user-groups':              return <><span className="material-symbols-outlined me-1">group</span>{          t('user_group_management.user_group_management') }</>;
    case 'audit-log':                return <><span className="material-symbols-outlined me-1">feed</span>{            t('audit_log_management.audit_log')}</>;
    case 'plugins':                  return <><span className="material-symbols-outlined me-1">extension</span>{          t('plugins.plugins')}</>;
    case 'search':                   return <><span className="material-symbols-outlined me-1">search</span>{       t('full_text_search_management.full_text_search_management') }</>;
    case 'cloud':                    return <><span className="material-symbols-outlined me-1">share</span>{       t('cloud_setting_management.to_cloud_settings')} </>;
    default:                         return <><span className="material-symbols-outlined me-1">home</span>{            t('wiki_management_homepage') }</>;
      /* eslint-enable no-multi-spaces, max-len */
  }
};

type MenuLinkProps = {
  menu: string,
  isListGroupItems: boolean,
  isRoot?: boolean,
  isActive?: boolean,
}

const MenuLink = ({
  menu, isRoot, isListGroupItems, isActive,
}: MenuLinkProps) => {

  const pageTransitionClassName = isListGroupItems
    ? 'list-group-item list-group-item-action rounded border-0'
    : 'dropdown-item px-3 py-2';

  const href = isRoot ? '/admin' : urljoin('/admin', menu);

  return (
    <Link
      href={href}
      className={`${pageTransitionClassName} ${isActive ? 'active' : ''}`}
    >
      <MenuLabel menu={menu} />
    </Link>
  );
};

export const AdminNavigation = (): JSX.Element => {
  const pathname = window.location.pathname;

  const { data: growiCloudUri } = useGrowiCloudUri();
  const { data: growiAppIdForGrowiCloud } = useGrowiAppIdForGrowiCloud();

  const isActiveMenu = useCallback((path: string | string[]) => {
    const paths = Array.isArray(path) ? path : [path];

    return paths.some((path) => {
      const basisPath = pathUtils.normalizePath(urljoin('/admin', path));
      const basisParentPath = pathUtils.addTrailingSlash(basisPath);

      return (
        pathname === basisPath
        || pathname.startsWith(basisParentPath)
      );
    });

  }, [pathname]);

  const getListGroupItemOrDropdownItemList = useCallback((isListGroupItems: boolean) => {
    return (
      <>
        {/* eslint-disable no-multi-spaces */}
        <MenuLink menu="home" isListGroupItems={isListGroupItems} isActive={pathname === '/admin'} isRoot />
        <MenuLink menu="app" isListGroupItems={isListGroupItems} isActive={isActiveMenu('/app')} />
        <MenuLink menu="security" isListGroupItems={isListGroupItems} isActive={isActiveMenu('/security')} />
        <MenuLink menu="markdown" isListGroupItems={isListGroupItems} isActive={isActiveMenu('/markdown')} />
        <MenuLink menu="customize" isListGroupItems={isListGroupItems} isActive={isActiveMenu('/customize')} />
        <MenuLink menu="importer" isListGroupItems={isListGroupItems} isActive={isActiveMenu('/importer')} />
        <MenuLink menu="export" isListGroupItems={isListGroupItems} isActive={isActiveMenu('/export')} />
        <MenuLink menu="data-transfer" isListGroupItems={isListGroupItems} isActive={isActiveMenu('/data-transfer')} />
        <MenuLink menu="notification" isListGroupItems={isListGroupItems} isActive={isActiveMenu(['/notification', '/global-notification'])} />
        <MenuLink menu="slack-integration" isListGroupItems={isListGroupItems} isActive={isActiveMenu('/slack-integration')} />
        <MenuLink menu="slack-integration-legacy" isListGroupItems={isListGroupItems} isActive={isActiveMenu('/slack-integration-legacy')} />
        <MenuLink menu="users" isListGroupItems={isListGroupItems} isActive={isActiveMenu('/users')} />
        <MenuLink menu="user-groups" isListGroupItems={isListGroupItems} isActive={isActiveMenu(['/user-groups', 'user-group-detail'])} />
        <MenuLink menu="audit-log" isListGroupItems={isListGroupItems} isActive={isActiveMenu('/audit-log')} />
        <MenuLink menu="plugins" isListGroupItems={isListGroupItems} isActive={isActiveMenu('/plugins')} />
        <MenuLink menu="search" isListGroupItems={isListGroupItems} isActive={isActiveMenu('/search')} />
        {growiCloudUri != null && growiAppIdForGrowiCloud != null
          && (
            <a
              href={`${growiCloudUri}/my/apps/${growiAppIdForGrowiCloud}`}
              className="list-group-item list-group-item-action border-0 round-corner"
            >
              <MenuLabel menu="cloud" />
            </a>
          )
        }
        {/* eslint-enable no-multi-spaces */}
      </>
    );
  }, [growiAppIdForGrowiCloud, growiCloudUri, isActiveMenu, pathname]);

  return (
    <React.Fragment>
      {/* List group */}
      <div className={`list-group ${moduleClass} sticky-top d-none d-lg-block`}>
        {getListGroupItemOrDropdownItemList(true)}
      </div>

      {/* Dropdown */}
      <div className="dropdown d-block d-lg-none mb-5">
        <button
          className="btn btn-outline-primary btn-lg dropdown-toggle col-12 text-end"
          type="button"
          id="dropdown-admin-navigation"
          data-display="static"
          data-bs-toggle="dropdown"
          aria-haspopup="true"
          aria-expanded="false"
        >
          <span className="float-start">
            {/* eslint-disable no-multi-spaces */}
            {pathname === '/admin'                  && <MenuLabel menu="home" />}
            {isActiveMenu('/app')                   && <MenuLabel menu="app" />}
            {isActiveMenu('/security')              && <MenuLabel menu="security" />}
            {isActiveMenu('/markdown')              && <MenuLabel menu="markdown" />}
            {isActiveMenu('/customize')             && <MenuLabel menu="customize" />}
            {isActiveMenu('/importer')              && <MenuLabel menu="importer" />}
            {isActiveMenu('/export')                && <MenuLabel menu="export" />}
            {(isActiveMenu(['/notification', '/global-notification']))
                                                    && <MenuLabel menu="notification" />}
            {isActiveMenu('/slack-integration')     && <MenuLabel menu="slack-integration" />}
            {isActiveMenu('/users')                 && <MenuLabel menu="users" />}
            {isActiveMenu(['/user-groups', 'user-group-detail'])
                                                    && <MenuLabel menu="user-groups" />}
            {isActiveMenu('/search')                && <MenuLabel menu="search" />}
            {isActiveMenu('/audit-log')             && <MenuLabel menu="audit-log" />}
            {isActiveMenu('/plugins')               && <MenuLabel menu="plugins" />}
            {isActiveMenu('/data-transfer')         && <MenuLabel menu="data-transfer" />}
            {/* eslint-enable no-multi-spaces */}
          </span>
        </button>
        <div className="dropdown-menu" aria-labelledby="dropdown-admin-navigation">
          {getListGroupItemOrDropdownItemList(false)}
        </div>
      </div>

    </React.Fragment>
  );
};