Show introduction text instead of executing query when opening app

.gitignore

@@ -25,4 +25,4 @@ dist-ssr
 
 pods*
 
-lintPush.sh
+lintPush.sh

README.md

@@ -53,6 +53,7 @@ The configuration file follows a simple structure.
     "defaultIDP": "The default value used for IDP when logging in, this IDP can be manually changed in the Web app as well. ",
     "queryFolder": "The base location of the queries, all query locations will start from this folder (relative to public folder.)",
     "httpProxy": "The http proxy through which the requests will be rerouted. When left empty, the Comunica query engine will handle it. This is useful when CORS headers are not set (correctly) on the queried source.",
+    "introductionText": "The text that the app shows on the dashboard, which the app also shows when you first open it.",
     "queries": [
         {
             "queryLocation": "path to the query location, relative to "queryFolder"",

src/App.jsx

@@ -11,6 +11,7 @@ import ListResultTable from "./components/ListResultTable/ListResultTable";
 import authenticationProvider from "./authenticationProvider/authenticationProvider";
 import SolidLoginForm from "./components/LoginPage/LoginPage";
 import {QueryClient} from "react-query";
+import Dashboard from "./components/Dashboard/Dashboard";
 import InteractionLayout from "./components/InteractionLayout/InteractionLayout";
 
 const queryClient = new QueryClient({
@@ -57,6 +58,9 @@ function App() {
       authProvider={authenticationProvider}
       loginPage={SolidLoginForm}
       requireAuth={false}
+      dashboard={() => {
+        return Dashboard({text: config.introductionText})
+      }}
     >
       {config.queries.map((query) => {
         return (

src/components/Dashboard/Dashboard.css

@@ -0,0 +1,3 @@
+#main-content {
+    margin-top: 30px;
+}

src/components/Dashboard/Dashboard.jsx

@@ -0,0 +1,29 @@
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import {Title} from 'react-admin';
+import PropTypes from 'prop-types';
+import './Dashboard.css';
+
+/**
+ * This function returns a function that creates a dashboard with an introduction for <Admin>.
+ * @param {object} props - This has one property `text` with the introduction text.
+ * @returns {function(): *} - A function that creates a dashboard with an introduction for <Admin>.
+ */
+function Dashboard(props) {
+  let {text} = props;
+
+  text = text || 'You change this text via the config file.';
+
+  return (
+    <Card>
+      <Title title="Introduction"/>
+      <CardContent>{text}</CardContent>
+    </Card>
+  );
+}
+
+Dashboard.propTypes = {
+  text: PropTypes.string
+};
+
+export default Dashboard;

src/config.json

@@ -2,15 +2,16 @@
     "title": "Generic Data Viewer",
     "logoLocation": "images/IDLab-logo.png",
     "logoRedirectURL": "https://idlab.technology/",
-    "mainAppColor": "lightgray", 
+    "mainAppColor": "lightgray",
     "backgroundColor": "#fff",
     "titleColor": "black",
     "textColor": "#1976D2",
     "queryFolder": "queries",
     "httpProxy": "http://localhost:8000/",
-    "showMilliseconds": false, 
+    "showMilliseconds": false,
     "defaultIDP": "https://pod.playground.solidlab.be/",
     "footer": "<p><a href='https://idlab.technology/'>IDLab</a> - <a href='https://www.imec.be/nl'>imec</a> - <a href='https://www.ugent.be/'>UGent</a></p>",
+    "introductionText": "Please select a query from the menu on the left.",
     "queries": [
         {
             "queryLocation": "test.rq",
@@ -69,4 +70,4 @@
             "sources": ["http://localhost:8080/example/wish-list"]
         }
     ]
-}
+}