About box and version file (#180)

Author: mvanbrab

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Collections of known configurations are gathered in subdirectories of main/configs (#175).
 - Templated queries: variables shown in title of result table (#163).
 - Templated queries: changing variables dialogue is preloaded with previous values (#167).
+- About dialog, reachable from the application bar (#171).
 
 ## [1.5.0] - 2025-01-02
 

README.md

@@ -28,6 +28,7 @@ Table of contents:
     * [Additional prerequisites](#additional-prerequisites)
     * [Testing the production version](#testing-the-production-version)
     * [Testing the development version](#testing-the-development-version)
+  * [Setting the version string](#setting-the-version-string)
 
 ## Preface
 
@@ -442,3 +443,8 @@ The procedure is the same as for testing the production version, except for step
    ```bash
    npm run dev-with-path
    ```
+
+### Setting the version string
+
+Before every merge to the main branch and before every release, set the version string [here](./main/src/version.js)
+according to the rules in that file.

main/src/components/InteractionLayout/NavigationBar/AboutDialog.jsx

@@ -0,0 +1,37 @@
+import { Component } from "react";
+import CloseIcon from "@mui/icons-material/Close";
+import { IconButton, Dialog, DialogTitle, DialogContent, DialogContentText } from "@mui/material";
+
+import version from "../../../version";
+
+/**
+ * 
+ * @param {boolean} props.open - forwarded to Dialog open
+ * @param {function} props.close - forwarded to Dialog onClose and the close button
+ * @returns {Component}
+ */
+function AboutDialog(props) {
+  return (
+    <Dialog open={props.open} onClose={props.close} fullWidth maxWidth="sm">
+      <DialogTitle sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+        <div>Generic Data Viewer</div>
+        <IconButton onClick={props.close} size="small">
+          <CloseIcon />
+        </IconButton>
+      </DialogTitle>
+      <DialogContent>
+        <DialogContentText>
+          <p>Version: {version}</p>
+          <p>Questions? Remarks?
+            Please create an issue at our <a href="https://github.com/SolidLabResearch/generic-data-viewer-react-admin" target="_blank">Repository</a><br />
+            or mail to <a href="mailto:ben.demeester@ugent.be" target="_blank">ben.demeester@ugent.be</a>.</p>
+          <p>Powered by <a href="https://comunica.dev/" target="_blank">Comunica</a> and <a href="https://marmelab.com/react-admin/" target="_blank">React-Admin</a>.</p>
+          <p>Initial development funded by <a href="https://ontodeside.eu/" target="_blank">Onto-DESIDE</a> and <a href="https://solidlab.be/" target="_blank">SolidLab</a>.</p>
+          <p>&copy; <a href="https://idlab.ugent.be/">IDLab</a> 2025</p>
+        </DialogContentText>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default AboutDialog;

main/src/components/InteractionLayout/NavigationBar/NavigationBar.jsx

@@ -1,15 +1,26 @@
 import { AppBar, TitlePortal, useRefresh } from "react-admin";
 import "./NavigationBar.css";
 import AuthenticationMenu from "../AuthenticationMenu/AuthenticationMenu";
-import { Component } from "react";
-import SparqlDataProvider from "./../../../dataProvider/SparqlDataProvider";
+import { Component, useState } from "react";
 import CleaningServicesIcon from '@mui/icons-material/CleaningServices';
 import { IconButton } from '@mui/material';
 import { Tooltip } from '@mui/material';
+import HelpIcon from '@mui/icons-material/Help';
+import AboutDialog from "./AboutDialog";
 
 import configManager from "../../../configManager/configManager";
 import comunicaEngineWrapper from "../../../comunicaEngineWrapper/comunicaEngineWrapper";
 
+function AboutButton(props) {
+  return (
+    <Tooltip title="About">
+      <IconButton color="inherit" onClick={props.click}>
+        <HelpIcon />
+      </IconButton>
+    </Tooltip>
+  )
+}
+
 function InvalidateButton() {
   const refresh = useRefresh();
   const handleClick = () => {
@@ -32,16 +43,26 @@ function InvalidateButton() {
  */
 function NavigationBar(props) {
   const config = configManager.getConfig();
+
+  const [aboutOpen, setAboutOpen] = useState(false);
+
+  const handleAboutOpen = () => setAboutOpen(true);
+  const handleAboutClose = () => setAboutOpen(false);
+
   return (
-    <AppBar {...props} userMenu={<AuthenticationMenu />}>
-      <img
-        id="app-logo"
-        src={config.logoLocation}
-        alt="Web application logo"
-      ></img>
-      <TitlePortal/>
-      <InvalidateButton/>
-    </AppBar>
+    <>
+      <AppBar {...props} userMenu={<AuthenticationMenu />}>
+        <img
+          id="app-logo"
+          src={config.logoLocation}
+          alt="Web application logo"
+        ></img>
+        <TitlePortal/>
+        <AboutButton click={handleAboutOpen} />
+        <InvalidateButton/>
+      </AppBar>
+      <AboutDialog open={aboutOpen} close={handleAboutClose} />
+    </>
   );
 }
 

main/src/version.js

@@ -0,0 +1,5 @@
+// Set to a next intermediate version string vX.Y.Z-tttt when merging an unreleased version to the main branch.
+// Set to the new release version string vX.Y.Z right before make a new release tag vX.Y.Z (see https://github.com/SolidLabResearch/generic-data-viewer-react-admin/tags).
+// ... All in accordance with https://semver.org/spec/v2.0.0.html.
+const version = "v1.6.0.0003";
+export default version;