Merge pull request #30 from livMatS/master

Polished webapp

Author: jotelha

.github/workflows/build-and-test.yml

@@ -16,10 +16,10 @@ jobs:
     name: Node ${{ matrix.node-version }} 
     steps:
       - name: Check out
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Set up node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
 
@@ -29,13 +29,12 @@ jobs:
 
       - name: Lint
         working-directory: ./dtool-lookup-webapp
-        run: npm run lint
+        run: npm run lint src
 
       - name: Build
         working-directory: ./dtool-lookup-webapp
         run: npm run build
 
-      # needs true tests first:
-      # - name: Run tests
-      #  working-directory: ./dtool-lookup-webapp
-      #  run: npm test
+      - name: Run tests
+        working-directory: ./dtool-lookup-webapp
+        run: npm run test:unit

CHANGELOG.rst

@@ -10,11 +10,21 @@ This change log uses principles from `keep a changelog <http://keepachangelog.co
 Added
 ^^^^^
 
+- Customizable landing page.
+- Logout button.
+- Search result pagniation.
+- Selection of entry number per page.
+- Version-dependent display of pagination.
+- Version-dependent display of README.yml content as clear text or as processed YAML/JSON.
+- A few simple unit tests.
 
 
 Changed
 ^^^^^^^
 
+- Updated from bootstrap-vue-3 to bootstap-vue-next
+- Adapted routes to remodeled dserver REST API.
+
 
 Deprecated
 ^^^^^^^^^^
@@ -27,6 +37,7 @@ Removed
 Fixed
 ^^^^^
 
+- No search box on login screen.
 
 Security
 ^^^^^^^^

CONTRIBUTORS.rst

@@ -1,5 +1,19 @@
 Contributors
 ============
 
-- Lars Pastewka added the ability to configure the dtool-lookup-server and
-  token-generator URLs from environment variables 
+- **Ashwin Vazhappilly**:
+  - Implemented direct MongoDB query functionality.
+  - Added a logout button to the user interface.
+  - Introduced pagination to improve data handling.
+  - Contributed several unit tests to ensure reliability.
+  - Adapted the web application to the remodeled dserver REST API for enhanced compatibility.
+  - Enhanced user experience by allowing customizable landing pages.
+
+- **Johannes L. Hörmann**:
+  - Updated the initial codebase from Vue.js version 2 to Vue.js version 3, ensuring the application leverages the latest Vue.js features and improvements.
+
+- **Lars Pastewka**:
+  - Integrated the ability to configure dtool-lookup-server and token-generator URLs through environment variables, adding flexibility in deployment and configuration.
+
+- **Tjelvar S. G. Olsson**:
+  - Authored the initial version of the web application using Vue.js version 2, laying the foundation for further development and enhancements.

README.rst

@@ -1,61 +1,138 @@
 dtool lookup webapp
 ===================
 
-- GitHub: https://github.com/jic-dtool/dtool-lookup-webapp
-- Free software: MIT License
+.. image:: https://github.com/livMatS/dtool-lookup-webapp/actions/workflows/build-and-test.yml/badge.svg
+    :target: https://github.com/livMatS/dtool-lookup-webapp/actions/workflows/build-and-test.yml
+    :alt: dtool-lookup-webapp build and test
 
-Web application to query and display information about datasets stored in one
-or more base URIs.
+.. image:: https://img.shields.io/badge/License-MIT-yellow.svg
+    :target: https://opensource.org/licenses/MIT
+    :alt: License: MIT
+
+- GitHub repository: https://github.com/jic-dtool/dtool-lookup-webapp
+- License: MIT License (https://opensource.org/licenses/MIT)
+
+This web application allows querying and displaying information about datasets stored in one or more base URIs.
 
 Dependencies
 ------------
 
-This web application depends on having two other web services to talk to:
+The web application requires two other web services:
 
-1. `dtool-lookup-server <https://github.com/jic-dtool/dtool-lookup-server>`_
-2. `token-generator-ldap <https://github.com/jic-dtool/token-generator-ldap>`_
+1. dtool-lookup-server: https://github.com/jic-dtool/dtool-lookup-server - Provides a means to search and display dataset metadata.
+2. token-generator-ldap: https://github.com/jic-dtool/token-generator-ldap - Facilitates user authentication.
 
-The first provides a means to search and display dataset metadata.
-The latter provides a means to authenticate users.
+Setup
+-----
 
-Preamble
--------
+Navigate to the `dtool-lookup-webapp` directory:
 
-::
+.. code-block:: bash
 
     cd dtool-lookup-webapp
 
+Create a `.env` file in the `dtool-lookup-webapp` directory with the following contents:
 
-Create a file `.env` in the `dtool-lookup-webapp` directory with the following contents:
+.. code-block:: bash
 
-```
-VUE_APP_DTOOL_LOOKUP_SERVER_URL="http://localhost:5000"
-VUE_APP_DTOOL_LOOKUP_SERVER_TOKEN_GENERATOR_URL="http://localhost:5001/token"
-```
+    VUE_APP_DTOOL_LOOKUP_SERVER_URL="http://localhost:5000"
+    VUE_APP_DTOOL_LOOKUP_SERVER_TOKEN_GENERATOR_URL="http://localhost:5001/token"
 
 For deployment, replace these URLs with the actual endpoints of the lookup server and the token generator.
 
+Customization options for the landing page are available through the following environment variables in the `.env` file:
+
+.. code-block:: text
+
+   VUE_APP_FIRST_CONTAINER_TITLE=Log in
+   VUE_APP_SECOND_CONTAINER_TITLE=dserver
+   VUE_APP_SECOND_CONTAINER_MESSAGE=Welcome to <b>dserver</b>'s webapp.
+   VUE_APP_THIRD_CONTAINER_HEADING=Access
+   VUE_APP_THIRD_CONTAINER_MESSAGE=Some notes on how to gain access.
+   VUE_APP_FOURTH_CONTAINER_HEADING=Docs
+   VUE_APP_FOURTH_CONTAINER_INTRO=Some notes on how to find help. The following list may contain an arbitrary number of links.
+   VUE_APP_FOURTH_CONTAINER_RESOURCES=[{"text": "dtool-lookup-webapp repository", "url": "https://github.com/jic-dtool/dtool-lookup-webapp"}]
+   VUE_APP_LANDING_PAGE_ICON_PATH=/icons/128x128/dtool_logo.png
+
+Customization options for the upper right corner drop-down menu in the app are available through the following environment variables in the `.env` file:
+
+.. code-block:: text
 
-Start a development server
---------------------------
+   VUE_APP_OFFER_DTOOL_README_YAML_DOWNLOAD=true
+   VUE_APP_OFFER_DTOOL_JSON_DOWNLOAD=true
+   VUE_APP_SHOW_INFO_MENU_ENTRY=true
+   VUE_APP_DTOOL_JSON_PATH=/data/templates/dtool.json
+   VUE_APP_DTOOL_README_YAML_PATH=/data/templates/dtool_readme.yml
+   VUE_APP_INFO_CONTENT="<tt>dtool.json</tt> is you local <i>dtool</i> client's configuration file. Place it at <tt>~/.config/dtool/dtool.json</tt>, where <tt>~</tt> is your home directoy, and create the directories if they do not exist.<br /><br /><tt>dtool_readme.yml</tt> is the metadata template used for documenting your datasets. Place it anywhere, but make sure that the entry <tt>DTOOL_README_TEMPLATE_FPATH</tt> within above's dtool.json points to the correct absolute path of your <tt>dtool_readme.yml</tt>. See <a href="https://dtool.readthedocs.io/en/latest/configuring_a_custom_readme_template.html" target="_blank" rel="noopener noreferrer">Configuring a custom README template</a> of <a href="https://dtool.readthedocs.io" target="_blank" rel="noopener noreferrer"></i>dtool</i>'s documentation</a>."
 
-::
+All paths provided in these environment variables must be relative to this
+repository's `dtool-lookup-webapp/public` as root. 
+Setting any of the `VUE_APP_OFFER_DTOOL_README_YAML_DOWNLOAD`,
+`VUE_APP_OFFER_DTOOL_JSON_DOWNLOAD`, `VUE_APP_SHOW_INFO_MENU_ENTRY` to `true`
+will show a download button for a `dtool_readme.yml` template, for a
+`dtool.json` configuration file, and a button for displaying arbitrary
+textual information configured with `VUE_APP_INFO_CONTENT`.
+Per default, all these buttons are hidden.
+
+To apply changes to the `.env` file, execute:
+
+.. code-block:: bash
+
+    npm install
+
+Development Server
+------------------
+
+To start a development server:
+
+.. code-block:: bash
 
     cd dtool-lookup-webapp
     npm run serve
 
+Building for Production
+-----------------------
 
-Compile into a static single page website
------------------------------------------
+To compile the application into a static single-page website:
 
-::
+.. code-block:: bash
 
     cd dtool-lookup-webapp
     npm run build
 
+Fixing Broken Installations
+---------------------------
+
+To address issues with dependencies in a broken installation:
+
+.. code-block:: bash
+
+    rm -rf dist/ node_modules/
+    rm package-lock.json
+
+Then, reinstall the Vue CLI service and rebuild:
+
+.. code-block:: bash
+
+    npm install @vue/cli-service
+    npm run build
+
+Testing
+-------
+
+Testing requires the `jest.config.js` configuration file, which can be auto-generated by:
+
+.. code-block:: bash
+
+    vue add unit-jest
+
+This step follows the global installation of the Vue CLI:
+
+.. code-block:: bash
+
+    npm install -g @vue/cli
 
-More information
-----------------
+Additional Information
+----------------------
 
-See dtool-lookup-webapp/README.md for more information about how to develop and build.
-See provision/README.rst for instructions on how to deploy using Ansibl.e
+For more details on development and build processes, refer to the `README.md` file within the `dtool-lookup-webapp` directory. For deployment instructions using Ansible, consult the `provision/README.rst`.

dtool-lookup-webapp/jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  preset: '@vue/cli-plugin-unit-jest'
+}

dtool-lookup-webapp/package.json

@@ -5,19 +5,21 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
+    "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@popperjs/core": "^2.11.7",
     "@soerenmartius/vue3-clipboard": "^0.1.2",
-    "@vue/compat": "^3.2.31",
+    "@vue/compat": "^3.4.15",
     "axios": "^1.1.3",
-    "bootstrap": "^5.1.3",
-    "bootstrap-vue-3": "^0.3.12",
+    "bootstrap": "^5.3.2",
+    "bootstrap-vue-next": "^0.16.6",
     "core-js": "^3.21.1",
-    "filesize": "^8.0.7",
+    "filesize": "9.0.11",
     "json2yaml": "^1.1.0",
     "moment": "^2.24.0",
-    "vue": "^3.2.31",
+    "vue": "^3.2.26",
     "vue-axios": "^3.4.1",
     "vuex": "^4.0.2"
   },
@@ -26,11 +28,20 @@
     "@babel/preset-react": "^7.16.7",
     "@vue/cli-plugin-babel": "^5.0.3",
     "@vue/cli-plugin-eslint": "^5.0.4",
+    "@vue/cli-plugin-unit-jest": "~5.0.0",
     "@vue/cli-service": "^5.0.4",
-    "@vue/compiler-sfc": "^3.2.31",
-    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/compiler-sfc": "^3.4.15",
+    "@vue/eslint-config-prettier": "^8.0.0",
+    "@vue/test-utils": "^2.0.0-0",
+    "@vue/vue3-jest": "^27.0.0-alpha.1",
+    "babel-jest": "^27.0.6",
+    "deepmerge": "^4.3.1",
     "eslint": "^8.11.0",
     "eslint-plugin-vue": "^9.6.0",
+    "flush-promises": "^1.0.2",
+    "jest": "^27.0.5",
+    "sass": "^1.71.1",
+    "sass-loader": "^14.1.1",
     "webpack": "^5.7.0"
   }
 }

dtool-lookup-webapp/public/data/templates/dtool.json

@@ -0,0 +1,21 @@
+
+{
+  "DSERVER_TOKEN_GENERATOR_URL": "https://demo.dtool.dev/token",
+  "DSERVER_URL": "https://demo.dtool.dev/lookup",
+  "DSERVER_USERNAME": "testuser",
+  "DSERVER_VERIFY_SSL": "true",
+  "DTOOL_README_TEMPLATE_FPATH": "/path/to/.dtool_readme.yml",
+  "DTOOL_S3_ACCESS_KEY_ID_test-bucket": "testuser_access_key",
+  "DTOOL_S3_DATASET_PREFIX": "u/testuser/",
+  "DTOOL_S3_ENDPOINT_test-bucket": "http://demo.dtool.dev:9000",
+  "DTOOL_S3_SECRET_ACCESS_KEY_test-bucket": "testuser_secret_key",
+  "DTOOL_SMB_DOMAIN_test-share": "WORKGROUP",
+  "DTOOL_SMB_PASSWORD_test-share": "a-guest-needs-no-password",
+  "DTOOL_SMB_PATH_test-share": "dtool",
+  "DTOOL_SMB_SERVER_NAME_test-share": "demo.dtool.dev",
+  "DTOOL_SMB_SERVER_PORT_test-share": 445,
+  "DTOOL_SMB_SERVICE_NAME_test-share": "sambashare",
+  "DTOOL_SMB_USERNAME_test-share": "guest",
+  "DTOOL_USER_EMAIL": "[email protected]",
+  "DTOOL_USER_FULL_NAME": "Your full name"
+}

dtool-lookup-webapp/public/data/templates/dtool_readme.yml

@@ -0,0 +1,12 @@
+project: Project name
+description: Short description
+owners:
+  - name: {DTOOL_USER_FULL_NAME}
+    email: {DTOOL_USER_EMAIL}
+    username: {username}
+    orcid: Your orcid
+funders:
+  - organization: Your funding organization
+    program: Your program
+    code: Program code
+creation_date: '{date}'