feat: Move About and Terms into separate modal

client/src/components/common/Core/Core.jsx

@@ -16,6 +16,7 @@ import Toaster from '../Toaster';
 import Fixed from '../Fixed';
 import Static from '../Static';
 import AdministrationModal from '../AdministrationModal';
+import InformationModal from '../InformationModal';
 import UserSettingsModal from '../../users/UserSettingsModal';
 import ProjectBackground from '../../projects/ProjectBackground';
 import AddProjectModal from '../../projects/AddProjectModal';
@@ -61,6 +62,10 @@ const Core = React.memo(() => {
       case ModalTypes.ADMINISTRATION:
         modalNode = <AdministrationModal />;
 
+        break;
+      case ModalTypes.INFORMATION:
+        modalNode = <InformationModal />;
+
         break;
       case ModalTypes.USER_SETTINGS:
         modalNode = <UserSettingsModal />;

client/src/components/common/Header/Header.jsx

@@ -15,7 +15,7 @@ import entryActions from '../../../entry-actions';
 import Paths from '../../../constants/Paths';
 import { BoardMembershipRoles, BoardViews, UserRoles } from '../../../constants/Enums';
 import UserAvatar from '../../users/UserAvatar';
-import UserStep from '../../users/UserStep';
+import UserActionsStep from '../../users/UserActionsStep';
 import NotificationsStep from '../../notifications/NotificationsStep';
 
 import styles from './Header.module.scss';
@@ -90,7 +90,7 @@ const Header = React.memo(() => {
   }, [canEditProject, dispatch]);
 
   const NotificationsPopup = usePopup(NotificationsStep, POPUP_PROPS);
-  const UserPopup = usePopup(UserStep, POPUP_PROPS);
+  const UserActionsPopup = usePopup(UserActionsStep, POPUP_PROPS);
 
   return (
     <div className={styles.wrapper}>
@@ -152,12 +152,12 @@ const Header = React.memo(() => {
               )}
             </Menu.Item>
           </NotificationsPopup>
-          <UserPopup>
+          <UserActionsPopup>
             <Menu.Item className={classNames(styles.item, styles.itemHoverable)}>
               <span className={styles.userName}>{user.name}</span>
               <UserAvatar id={user.id} size="small" />
             </Menu.Item>
-          </UserPopup>
+          </UserActionsPopup>
         </Menu.Menu>
       </Menu>
     </div>

client/src/components/common/InformationModal/AboutPane.jsx

@@ -0,0 +1,24 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React from 'react';
+import { Image, Tab } from 'semantic-ui-react';
+
+import version from '../../../version';
+
+import aboutLogo from '../../../assets/images/about-logo.png';
+
+import styles from './AboutPane.module.scss';
+
+const AboutPane = React.memo(() => (
+  <Tab.Pane attached={false} className={styles.wrapper}>
+    <a href="https://github.com/plankanban/planka" target="_blank" rel="noreferrer">
+      <Image centered src={aboutLogo} size="large" />
+    </a>
+    <div className={styles.version}>{version}</div>
+  </Tab.Pane>
+));
+
+export default AboutPane;

client/src/components/common/InformationModal/AboutPane.module.scss

@@ -0,0 +1,16 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .version {
+    font-weight: bold;
+    text-align: center;
+  }
+
+  .wrapper {
+    border: none;
+    box-shadow: none;
+  }
+}

client/src/components/common/InformationModal/InformationModal.jsx

@@ -0,0 +1,56 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React, { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { Tab } from 'semantic-ui-react';
+
+import entryActions from '../../../entry-actions';
+import { useClosableModal } from '../../../hooks';
+import TermsPane from './TermsPane';
+import AboutPane from './AboutPane';
+
+const InformationModal = React.memo(() => {
+  const dispatch = useDispatch();
+  const [t] = useTranslation();
+
+  const handleClose = useCallback(() => {
+    dispatch(entryActions.closeModal());
+  }, [dispatch]);
+
+  const [ClosableModal] = useClosableModal();
+
+  const panes = [
+    {
+      menuItem: t('common.aboutPlanka', {
+        context: 'title',
+      }),
+      render: () => <AboutPane />,
+    },
+    {
+      menuItem: t('common.termsOfService', {
+        context: 'title',
+      }),
+      render: () => <TermsPane />,
+    },
+  ];
+
+  return (
+    <ClosableModal open closeIcon size="small" centered={false} onClose={handleClose}>
+      <ClosableModal.Content>
+        <Tab
+          menu={{
+            secondary: true,
+            pointing: true,
+          }}
+          panes={panes}
+        />
+      </ClosableModal.Content>
+    </ClosableModal>
+  );
+});
+
+export default InformationModal;

client/src/components/common/InformationModal/TermsPane.jsx

@@ -0,0 +1,49 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React, { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { Loader, Tab } from 'semantic-ui-react';
+
+import selectors from '../../../selectors';
+import api from '../../../api';
+import Markdown from '../Markdown';
+
+import styles from './TermsPane.module.scss';
+
+const TermsPane = React.memo(() => {
+  const type = useSelector((state) => selectors.selectCurrentUser(state).termsType);
+
+  const { i18n } = useTranslation();
+  const [content, setContent] = useState(null);
+
+  useEffect(() => {
+    async function fetchTerms() {
+      let terms;
+      try {
+        ({ item: terms } = await api.getTerms(type, i18n.resolvedLanguage));
+      } catch {
+        return;
+      }
+
+      setContent(terms.content);
+    }
+
+    fetchTerms();
+  }, [type, i18n.resolvedLanguage]);
+
+  return (
+    <Tab.Pane attached={false} className={styles.wrapper}>
+      {content ? (
+        <Markdown>{content}</Markdown>
+      ) : (
+        <Loader active inverted inline="centered" size="small" />
+      )}
+    </Tab.Pane>
+  );
+});
+
+export default TermsPane;

client/src/components/common/InformationModal/TermsPane.module.scss

@@ -0,0 +1,11 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .wrapper {
+    border: none;
+    box-shadow: none;
+  }
+}

client/src/components/common/InformationModal/index.js

@@ -0,0 +1,8 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import InformationModal from './InformationModal';
+
+export default InformationModal;