Refactor help UI

rsconcept/frontend/src/components/Help/InfoConstituenta.tsx

@@ -1,12 +1,12 @@
 import { IConstituenta } from '../../utils/models';
 import { getCstTypificationLabel } from '../../utils/staticUI';
 
-interface ConstituentaInfoProps
+interface InfoConstituentaProps
 extends React.HTMLAttributes<HTMLDivElement> {
   data: IConstituenta
 }
 
-function ConstituentaInfo({ data, ...props }: ConstituentaInfoProps) {
+function InfoConstituenta({ data, ...props }: InfoConstituentaProps) {
   return (
     <div {...props}>
       <h1>Конституента {data.alias}</h1>
@@ -19,4 +19,4 @@ function ConstituentaInfo({ data, ...props }: ConstituentaInfoProps) {
   );
 }
 
-export default ConstituentaInfo;
+export default InfoConstituenta;

rsconcept/frontend/src/components/Help/InfoCstClass.tsx

@@ -1,11 +1,11 @@
 import { prefixes } from '../../utils/constants';
 import { mapCstClassInfo } from '../../utils/staticUI';
 
-interface CstClassInfoProps {
+interface InfoCstClassProps {
   title?: string
 }
 
-function CstClassInfo({ title }: CstClassInfoProps) {
+function InfoCstClass({ title }: InfoCstClassProps) {
   return (
     <div className='flex flex-col gap-1'>
       { title && <h1>{title}</h1>}
@@ -26,4 +26,4 @@ function CstClassInfo({ title }: CstClassInfoProps) {
   );
 }
 
-export default CstClassInfo;
+export default InfoCstClass;

rsconcept/frontend/src/components/Help/InfoCstStatus.tsx

@@ -1,11 +1,11 @@
 import { prefixes } from '../../utils/constants';
 import { mapStatusInfo } from '../../utils/staticUI';
 
-interface CstStatusInfoProps {
+interface InfoCstStatusProps {
   title?: string
 }
 
-function CstStatusInfo({ title }: CstStatusInfoProps) {
+function InfoCstStatus({ title }: InfoCstStatusProps) {
   return (
     <div className='flex flex-col gap-1'>
       { title && <h1>{title}</h1>}
@@ -26,4 +26,4 @@ function CstStatusInfo({ title }: CstStatusInfoProps) {
   );
 }
 
-export default CstStatusInfo;
+export default InfoCstStatus;

rsconcept/frontend/src/components/Navigation/Navigation.tsx

@@ -1,6 +1,5 @@
 import { useNavigate } from 'react-router-dom';
 
-import { useAuth } from '../../context/AuthContext';
 import { useConceptTheme } from '../../context/ThemeContext';
 import { EducationIcon, LibraryIcon } from '../Icons';
 import Logo from './Logo'
@@ -10,7 +9,6 @@ import UserMenu from './UserMenu';
 import UserTools from './UserTools';
 
 function Navigation () {
-  const { user } = useAuth();
   const navigate = useNavigate();
   const { noNavigation, toggleNoNavigation } = useConceptTheme();
 
@@ -42,7 +40,7 @@ function Navigation () {
           <TopSearch />
         </div>
         <div className='flex items-center'>
-          {user && <UserTools/>}
+          <UserTools/>
           <div className='flex items-center pl-2'>
             <NavigationButton icon={<LibraryIcon />} description='Общие схемы' onClick={navigateCommon} />
             <NavigationButton icon={<EducationIcon />} description='Справка' onClick={navigateHelp} />

rsconcept/frontend/src/components/Navigation/NavigationButton.tsx

@@ -1,15 +1,17 @@
 interface NavigationButtonProps {
+  id?: string
   icon: React.ReactNode
-  description: string
+  description?: string
   colorClass?: string
-  onClick: () => void
+  onClick?: () => void
 }
 
 const defaultColors = 'text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white'
 
-function NavigationButton({ icon, description, colorClass = defaultColors, onClick }: NavigationButtonProps) {
+function NavigationButton({ id, icon, description, colorClass = defaultColors, onClick }: NavigationButtonProps) {
   return (
-    <button title={description}
+    <button id={id}
+      title={description}
       type='button'
       onClick={onClick}
       className={'min-w-fit p-2 mr-1 focus:ring-4 rounded-lg focus:ring-gray-300 dark:focus:ring-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 ' + colorClass}

rsconcept/frontend/src/components/Navigation/UserTools.tsx

@@ -2,6 +2,8 @@ import { useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
 
 import { useAuth } from '../../context/AuthContext';
+import ConceptTooltip from '../Common/ConceptTooltip';
+import TextURL from '../Common/TextURL';
 import { BellIcon, PlusIcon, SquaresIcon } from '../Icons';
 import NavigationButton from './NavigationButton';
 
@@ -19,13 +21,30 @@ function UserTools() {
   return (
     <div className='flex items-center px-2 border-r-2 border-gray-400 dark:border-gray-300'>
       <span>
-        <NavigationButton description='Новая схема'
+        { user && 
+        <NavigationButton 
+          description='Новая схема'
           icon={<PlusIcon />}
           onClick={navigateCreateRSForm}
           colorClass='text-blue-500 hover:text-blue-700 dark:text-orange-500 dark:hover:text-orange-300'
-        />
+        />}
+        { !user &&
+        <NavigationButton id='items-nav-help'
+          description='Невозможно создать новую схему. Войдите в систему'
+          icon={<PlusIcon />}
+        />}
+        <ConceptTooltip anchorSelect='#items-nav-help' clickable>
+          <div className='flex flex-col cursor-default'>
+            <p>Создание и редактирование концептуальных схем</p>
+            <p>доступно только <b>зарегистрированным пользователям</b></p>
+            <div className='flex flex-col self-center'>
+              <TextURL text='Войти в систему' href='/login'/>
+              <TextURL text='Зарегистрироваться' href='/signup'/>
+            </div>
+          </div>
+        </ConceptTooltip>
       </span>
-      <NavigationButton icon={<SquaresIcon />} description='Мои схемы' onClick={navigateMyWork} />
+      { user && <NavigationButton icon={<SquaresIcon />} description='Мои схемы' onClick={navigateMyWork} /> }
       { user && user.is_staff && <NavigationButton icon={<BellIcon />} description='Уведомления' onClick={handleNotifications} />}
     </div>
   );

rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx

@@ -6,7 +6,7 @@ import Divider from '../../components/Common/Divider';
 import MiniButton from '../../components/Common/MiniButton';
 import SubmitButton from '../../components/Common/SubmitButton';
 import TextArea from '../../components/Common/TextArea';
-import CstStatusInfo from '../../components/Help/CstStatusInfo';
+import CstStatusInfo from '../../components/Help/InfoCstStatus';
 import { DumpBinIcon, HelpIcon, SaveIcon, SmallPlusIcon } from '../../components/Icons';
 import { useRSForm } from '../../context/RSFormContext';
 import { type CstType, EditMode, ICstUpdateData, SyntaxTree } from '../../utils/models';

rsconcept/frontend/src/pages/RSFormPage/EditorItems.tsx

@@ -5,7 +5,7 @@ import Button from '../../components/Common/Button';
 import ConceptDataTable from '../../components/Common/ConceptDataTable';
 import ConceptTooltip from '../../components/Common/ConceptTooltip';
 import Divider from '../../components/Common/Divider';
-import CstStatusInfo from '../../components/Help/CstStatusInfo';
+import CstStatusInfo from '../../components/Help/InfoCstStatus';
 import { ArrowDownIcon, ArrowsRotateIcon, ArrowUpIcon, DumpBinIcon, HelpIcon, SmallPlusIcon } from '../../components/Icons';
 import { useRSForm } from '../../context/RSFormContext';
 import { useConceptTheme } from '../../context/ThemeContext';

rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx

@@ -9,9 +9,9 @@ import ConceptSelect from '../../components/Common/ConceptSelect';
 import ConceptTooltip from '../../components/Common/ConceptTooltip';
 import Divider from '../../components/Common/Divider';
 import MiniButton from '../../components/Common/MiniButton';
-import ConstituentaInfo from '../../components/Help/ConstituentaInfo';
+import InfoConstituenta from '../../components/Help/InfoConstituenta';
-import CstClassInfo from '../../components/Help/CstClassInfo';
+import InfoCstClass from '../../components/Help/InfoCstClass';
-import CstStatusInfo from '../../components/Help/CstStatusInfo';
+import CstStatusInfo from '../../components/Help/InfoCstStatus';
 import { ArrowsRotateIcon, FilterCogIcon, HelpIcon } from '../../components/Icons';
 import { useRSForm } from '../../context/RSFormContext';
 import { useConceptTheme } from '../../context/ThemeContext';
@@ -304,7 +304,7 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
     <div className='flex flex-col py-2 border-t border-r w-[14.7rem] pr-2 text-sm' style={{height: canvasHeight}}>
       {hoverCst && 
       <div className='relative'>
-        <ConstituentaInfo 
+        <InfoConstituenta 
           data={hoverCst}
           className='absolute top-0 left-0 z-50 w-[25rem] min-h-[11rem] overflow-y-auto border h-fit clr-app px-3' 
         />
@@ -405,7 +405,7 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
 
           <Divider margins='mt-2' />
 
-          <CstClassInfo title='Классы конституент' />
+          <InfoCstClass title='Классы конституент' />
 
           <Divider margins='mt-2' />
           

rsconcept/frontend/src/pages/RSFormPage/elements/ConstituentaTooltip.tsx

@@ -1,5 +1,5 @@
 import ConceptTooltip from '../../../components/Common/ConceptTooltip';
-import ConstituentaInfo from '../../../components/Help/ConstituentaInfo';
+import InfoConstituenta from '../../../components/Help/InfoConstituenta';
 import { IConstituenta } from '../../../utils/models';
 
 interface ConstituentaTooltipProps {
@@ -13,7 +13,7 @@ function ConstituentaTooltip({ data, anchor }: ConstituentaTooltipProps) {
       anchorSelect={anchor}
       className='max-w-[25rem] min-w-[25rem]'
     >
-      <ConstituentaInfo data={data} />
+      <InfoConstituenta data={data} />
     </ConceptTooltip>
   );
 }