Added content to help menu (closes #76) (#101)

* Added mail and chat links to help dropdown * Added the "About" page * Added configuration for help resources
SUSE · Oct 4, 2022 · 68447a4 · 68447a4
1 parent bd290d6
commit 68447a4
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 2 deletions.
diff --git a/backend/config.py b/backend/config.py
@@ -30,6 +30,17 @@ class Config:
         env_prefix = 'LDAP_'
 
 
+class HelpSettings(BaseSettings):
+    source_url: str = "https://github.com/SUSE/aimaas"
+    chat_url: Optional[str] = None
+    tracker_url: str = "https://github.com/SUSE/aimaas/issues"
+    email: Optional[str] = None
+
+    class Config:
+        env_file = '.env'
+        env_prefix = 'HELP_'
+
+
 class Settings(BaseSettings):
     pg_user: str
     pg_password: str
@@ -47,6 +58,7 @@ class Settings(BaseSettings):
     token_exp_minutes: int = 120
 
     ldap: LdapSettings = LdapSettings()
+    help: HelpSettings = HelpSettings()
 
     class Config:
         env_file = '.env'

diff --git a/backend/general_routes.py b/backend/general_routes.py
@@ -44,7 +44,8 @@ def get_info():
         "filters": [FilterModel(name=f.value.name, description=f.value.description)
                     for f in FilterEnum],
         "filters_per_type": {atype.name: [filter.value.name for filter in atype.value.filters]
-                             for atype in AttrType}
+                             for atype in AttrType},
+        "help": settings.help
     }
 
 

diff --git a/backend/schemas/info.py b/backend/schemas/info.py
@@ -12,3 +12,4 @@ class InfoModel(BaseModel):
     version: str
     filters: typing.List[FilterModel]
     filters_per_type: typing.Dict[str, typing.List[str]]
+    help: typing.Dict[str, typing.Optional[str]]
diff --git a/frontend/src/components/help/About.vue b/frontend/src/components/help/About.vue
@@ -0,0 +1,91 @@
+<template>
+  <h1>Abstract Information Management and Authority Service</h1>
+  <p>
+    <em>aimaas</em> is a web application for information management with a focus on dynamic data
+    structures and change management.
+  </p>
+  <div class="row mt-5">
+    <div class="col-lg-4">
+      <h3><i class="eos-icons me-2">namespace</i>Dynamic data structures</h3>
+    </div>
+    <div class="col-lg-8">
+      <p>
+        The primary intention of <em>aimaas</em> is to enable users to define table-like data
+        structures without the hassle of dealing with a database.
+      </p>
+      <p>
+        In <em>aimaas</em> we call those structures <b>schemas</b>. The data sets contained in
+        these schemas are referred to as <b>entities</b>.
+      </p>
+      <div class="gap-3 d-md-flex d-grid">
+        <router-link :to="{name: 'schema-list'}" class="btn btn-cta flex-fill">
+          <i class="eos-icons me-2">explore</i> Explore existing schemas
+        </router-link>
+        <router-link :to="{name: 'schema-new'}" class="btn btn-cta flex-fill">
+          <i class="eos-icons me-2">add_circle</i> Create a new schema
+        </router-link>
+      </div>
+    </div>
+  </div>
+  <div class="row mt-5">
+    <div class="col-lg-4">
+      <h3><i class="eos-icons me-2">thumbs_up_down</i>Change Management</h3>
+    </div>
+    <div class="col-lg-8">
+      <p>
+        An important part of managing information is to keep track of changes. For this purpose,
+        <em>aimaas</em> not only keeps a detailed log of changes applied to entities, but also
+        allows to enable a review system.
+      </p>
+      <p>
+        The review system allows users to propose changes and review them. During this process other
+        clients will receive the unchanged information; until the changes are approved.
+      </p>
+    </div>
+  </div>
+  <div class="row mt-5">
+    <div class="col-lg-4">
+      <h3><i class="eos-icons me-2">groups</i>Permission Management</h3>
+    </div>
+    <div class="col-lg-8">
+      <p>
+        <em>aimaas</em> does not allow anybody to do anything. Users need <b>permissions</b> for
+        actions.
+      </p>
+      <p>
+        Permissions can be granted to users or groups of users on a schema level (applicable to all
+        entities in the schema) and even the entity level.
+      </p>
+    </div>
+  </div>
+  <div class="row mt-5">
+    <div class="col-lg-4">
+      <h3><i class="eos-icons me-2">network</i> Further resources</h3>
+    </div>
+    <div class="col-lg-8">
+      <div class="d-flex justify-content-between">
+        <a :href="`mailto:${apiInfo?.help.email}`" v-if="apiInfo?.help.email">
+          <i class="eos-icons me-1">email</i> Mail
+        </a>
+        <a :href="apiInfo?.help.chat_url" v-if="apiInfo?.help.chat_url">
+          <i class="eos-icons me-1">chat</i> Chat
+        </a>
+        <a :href="apiInfo?.help.tracker_url">
+          <i class="eos-icons me-1">bug_report</i> Report issues
+        </a>
+        <a :href="apiInfo?.help.source_url"><i class="eos-icons me-1">source</i> Source code</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "About",
+  inject: ["apiInfo"]
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/components/help/HelpNav.vue b/frontend/src/components/help/HelpNav.vue
@@ -10,6 +10,21 @@
         <i class="eos-icons me-1">api</i>
         API Specification
       </a>
+      <router-link :to="{name: 'help-about'}" class="dropdown-item">
+        <i class="eos-icons me-1">help</i>
+        About
+      </router-link>
+      <div class="dropdown-divider"></div>
+      <div class="d-flex justify-content-between text-center">
+        <a :href="`mailto:${apiInfo?.help.email}`" v-if="apiInfo?.help.email"
+           title="Write your admins" class="dropdown-item">
+          <i class="eos-icons me-1">email</i>
+        </a>
+        <a :href="apiInfo?.help.chat_url" v-if="apiInfo?.help.chat_url"
+           title="Chat with your admins" class="dropdown-item">
+          <i class="eos-icons me-1">chat</i>
+        </a>
+      </div>
       <div class="dropdown-divider"></div>
       <div class="dropdown-item d-flex justify-content-between">
         <span>Backend version:</span>

diff --git a/frontend/src/router.js b/frontend/src/router.js
@@ -5,6 +5,7 @@ import Entity from "@/components/Entity.vue"
 import Schema from "@/components/Schema";
 import SchemaList from "@/components/SchemaList";
 import AuthManager from "@/components/auth/AuthManager";
+import About from "@/components/help/About";
 
 export const router = createRouter({
     history: createWebHistory(),
@@ -39,5 +40,10 @@ export const router = createRouter({
             component: SchemaList,
             name: 'schema-list'
         },
+        {
+            path: '/help/about',
+            component: About,
+            name: 'help-about'
+        }
     ],
-});
+});