Add Support dropdown

ComPlat · Oct 18, 2024 · 2b81966 · 2b81966
1 parent b67c52b
commit 2b81966
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 0 deletions.
diff --git a/app/api/chemotion/ui_api.rb b/app/api/chemotion/ui_api.rb
@@ -31,6 +31,7 @@ class UiAPI < Grape::API
           molecule_viewer: Matrice.molecule_viewer,
           collector_address: collector_address.presence,
           third_party_apps: Entities::ThirdPartyAppEntity.represent(ThirdPartyApp.all),
+          version: Chemotion::Application.config.version,
         }
       end
     end

diff --git a/app/packs/src/apps/mydb/layout/Topbar.js b/app/packs/src/apps/mydb/layout/Topbar.js
@@ -7,6 +7,7 @@ import SplitElementButton from 'src/components/contextActions/SplitElementButton
 import ReportUtilButton from 'src/components/contextActions/ReportUtilButton';
 import ExportImportButton from 'src/components/contextActions/ExportImportButton';
 import ScanCodeButton from 'src/components/contextActions/ScanCodeButton';
+import SupportMenuButton from 'src/components/navigation/SupportMenuButton';
 import UserAuth from 'src/components/navigation/UserAuth';
 
 export default function Topbar() {
@@ -24,6 +25,7 @@ export default function Topbar() {
         <ReportUtilButton />
         <ScanCodeButton />
 
+        <SupportMenuButton />
         <UserAuth />
       </div>
     </div>

diff --git a/app/packs/src/components/navigation/SupportMenuButton.js b/app/packs/src/components/navigation/SupportMenuButton.js
@@ -0,0 +1,54 @@
+import React, { useState, useEffect } from 'react';
+import { Dropdown, DropdownButton } from 'react-bootstrap';
+
+import UIStore from 'src/stores/alt/stores/UIStore';
+
+function ExternalItem({ title, href }) {
+  return (
+    <Dropdown.Item
+      className="d-flex gap-3 align-items-baseline justify-content-between"
+      href={href}
+      target="_blank"
+    >
+      {title}
+      <i className="fa fa-external-link" />
+    </Dropdown.Item>
+  );
+}
+
+export default function SupportMenuButton() {
+  const [version, setVersion] = useState({});
+  const onUiStoreChange = ({ version }) => setVersion(version);
+  useEffect(() => {
+    UIStore.listen(onUiStoreChange);
+    onUiStoreChange(UIStore.getState());
+    return () => UIStore.unlisten(onUiStoreChange);
+  }, []);
+  const hasVersions = version && Object.keys(version).length > 1;
+
+  return (
+    <DropdownButton title="Info & Support" variant="light">
+      <ExternalItem title="Chemotion.net" href="https://www.chemotion.net" />
+      <ExternalItem title="Chemotion-Repository.net" href="https://www.chemotion-repository.net" />
+      <Dropdown.Divider />
+      <ExternalItem title="Search documentation" href="https://chemotion.net/search" />
+      <ExternalItem title="Helpdesk - Contact Us" href="https://chemotion.net/helpdesk" />
+      <ExternalItem title="Report an issue on Github" href="https://github.com/ComPlat/chemotion_ELN/issues" />
+      {hasVersions && (
+        <>
+          <Dropdown.Divider />
+          <Dropdown.ItemText className="d-flex flex-column text-muted">
+            {Object.entries(version).map(([k, v]) => (
+              <span key={k} className="d-flex justify-content-between">
+                <span>{k}:</span>
+                <span style={{ userSelect: 'text' }}>
+                  {k == 'version' ? v : v.substring(0, 8)}
+                </span>
+              </span>
+            ))}
+          </Dropdown.ItemText>
+        </>
+      )}
+    </DropdownButton>
+  );
+}
diff --git a/app/packs/src/stores/alt/stores/UIStore.js b/app/packs/src/stores/alt/stores/UIStore.js
@@ -77,6 +77,7 @@ class UIStore {
       hasNmriumWrapper: false,
       matrices: {},
       thirdPartyApps: [],
+      version: {},
     };
 
     this.bindListeners({