From 2b8196610e9e6f473d4f22bf853f8183bff42ec0 Mon Sep 17 00:00:00 2001
From: Luciano Maiwald <mail@luciano-maiwald.de>
Date: Thu, 17 Oct 2024 16:02:08 +0200
Subject: [PATCH] Add Support dropdown

---
 app/api/chemotion/ui_api.rb                   |  1 +
 app/packs/src/apps/mydb/layout/Topbar.js      |  2 +
 .../navigation/SupportMenuButton.js           | 54 +++++++++++++++++++
 app/packs/src/stores/alt/stores/UIStore.js    |  1 +
 4 files changed, 58 insertions(+)
 create mode 100644 app/packs/src/components/navigation/SupportMenuButton.js

diff --git a/app/api/chemotion/ui_api.rb b/app/api/chemotion/ui_api.rb
index 28f9f4b9f1..3c56a7c545 100644
--- 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
index 84153541bd..af9d10d610 100644
--- 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
new file mode 100644
index 0000000000..01e665fae7
--- /dev/null
+++ 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
index 204b3e627c..def46f9204 100644
--- 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({