Redesign settings page & Add doc links (#1997)

Closes #1935.

- Moves transformations to a new list for visual separaration, as it is
only second class configuration.
- Renames System Services to System Settings.
- Add Add-on Settings, which opens the same settings page as the add-on
store, i.e. provides log, service config and persistence config (if
persistence service). Add-ons that only provide log settings are
considered advanced and hidden by default.
- Consolidate the add-on store and the newly added add-on settings into
a single place (refactoring included).
- Add doc links to Things, Items, pages, rules, scenes & scripts list
pages.
- Make some system settings advanced.
- Use a third column for large screens.

---------

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>

bundles/org.openhab.ui/web/src/assets/addon-store.js

@@ -29,33 +29,6 @@ export const Formats = {
   'karaf': 'Karaf'
 }
 
-export const AddonStoreTabShortcuts = [
-  {
-    id: 'bindings',
-    label: 'Bindings',
-    icon: 'circle_grid_hex',
-    subtitle: 'Connect and control hardware and online services'
-  },
-  {
-    id: 'automation',
-    label: 'Automation',
-    icon: 'sparkles',
-    subtitle: 'Scripting languages, templates and module types'
-  },
-  {
-    id: 'ui',
-    label: 'User Interfaces',
-    icon: 'play_rectangle',
-    subtitle: 'Community widgets & alternative frontends'
-  },
-  {
-    id: 'other',
-    label: 'Other Add-ons',
-    icon: 'ellipsis',
-    subtitle: 'System integrations, persistence, voice & more'
-  }
-]
-
 export function compareAddons (a1, a2) {
   if (a1.installed && !a2.installed) return -1
   if (a2.installed && !a1.installed) return 1

bundles/org.openhab.ui/web/src/assets/i18n/common/en.json

@@ -34,6 +34,7 @@
   "sidebar.noPages": "No pages",
   "sidebar.administration": "Administration",
   "sidebar.settings": "Settings",
+  "sidebar.addOnStore": "Add-on Store",
   "sidebar.developerTools": "Developer Tools",
   "sidebar.helpAbout": "Help & About",
   "sidebar.unlockAdmin": "Unlock Administration",

bundles/org.openhab.ui/web/src/assets/i18n/empty-states/en.json

@@ -11,6 +11,9 @@
   "things.nobindings.title": "No bindings",
   "things.nobindings.text": "To add things to your system, you first need to install binding add-ons.",
 
+  "transformations.title": "No transformations yet",
+  "transformations.text": "Transformations are used to translate data from a cluttered or technical raw value to a processed human-readable representation.",
+
   "model.title": "Start modelling your home",
   "model.text": "Build a model from your items to organize them and relate them to each other semantically.<br><br>Begin with a hierarchy of locations: buildings, outside areas, floors and rooms, as needed. Then, insert equipment and points from your things (or manually).",
 

bundles/org.openhab.ui/web/src/components/app.vue

@@ -33,7 +33,7 @@
         <f7-block-title v-if="$store.getters.isAdmin" v-t="'sidebar.administration'" />
         <f7-list class="admin-links" v-if="$store.getters.isAdmin">
           <f7-list-item link="/settings/" :title="$t('sidebar.settings')" view=".view-main" panel-close :animate="false"
-                        :class="{ currentsection: currentUrl === '/settings/' || currentUrl.indexOf('/settings/addons/') >= 0 || currentUrl.indexOf('/settings/services/') >= 0 }">
+                        :class="{ currentsection: currentUrl === '/settings/' || currentUrl.indexOf('/settings/services/') >= 0 }">
             <f7-icon slot="media" ios="f7:gear_alt_fill" aurora="f7:gear_alt_fill" md="material:settings" color="gray" />
           </f7-list-item>
           <li v-if="showSettingsSubmenu">
@@ -73,6 +73,11 @@
             </ul>
           </li>
 
+          <f7-list-item link="/settings/addons/" :title="$t('sidebar.addOnStore')" panel-close :animate="false"
+                        :class="{ currentsection: currentUrl.indexOf('/settings/addons/') >= 0 }">
+            <f7-icon slot="media" ios="f7:bag" aurora="f7:bag" md="material:shopping_bag" color="gray" />
+          </f7-list-item>
+
           <f7-list-item link="/developer/" :title="$t('sidebar.developerTools')" panel-close :animate="false"
                         :class="{ currentsection: currentUrl.indexOf('/developer/') >= 0 && currentUrl.indexOf('/developer/widgets') < 0 &&
                           currentUrl.indexOf('/developer/blocks') < 0 && currentUrl.indexOf('/developer/api-explorer') < 0 }">
@@ -750,7 +755,7 @@ export default {
 
       this.$f7.on('pageBeforeIn', (page) => {
         if (page.route && page.route.url) {
-          this.showSettingsSubmenu = page.route.url.indexOf('/settings/') === 0
+          this.showSettingsSubmenu = page.route.url.indexOf('/settings/') === 0 && page.route.url.indexOf('addons') === -1
           this.showDeveloperSubmenu = page.route.url.indexOf('/developer/') === 0
           this.currentUrl = page.route.url
         }

bundles/org.openhab.ui/web/src/js/routes.js

@@ -9,7 +9,7 @@ import AnalyzerPopup from '../pages/analyzer/analyzer-popup.vue'
 const AboutPage = () => import(/* webpackChunkName: "about-page" */ '../pages/about.vue')
 const UserProfilePage = () => import(/* webpackChunkName: "profile-page" */ '../pages/profile.vue')
 
-const SettingsMenuPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/settings-menu.vue')
+const SettingsMenuPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/menu/settings-menu.vue')
 const ServiceSettingsPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/services/service-settings.vue')
 const AddonsListPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/addons/addons-list.vue')
 const AddonsAddPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/addons/addons-add.vue')

bundles/org.openhab.ui/web/src/pages/settings/items/items-list-vlist.vue

@@ -30,8 +30,9 @@
     <f7-list class="searchbar-not-found">
       <f7-list-item title="Nothing found" />
     </f7-list>
-    <!-- skeleton for not ready -->
+
     <f7-block class="block-narrow">
+      <!-- skeleton for not ready -->
       <f7-col v-show="!ready">
         <f7-block-title>&nbsp;Loading...</f7-block-title>
         <f7-list media-list class="col wide">
@@ -50,9 +51,11 @@
           </f7-list-group>
         </f7-list>
       </f7-col>
-      <f7-col v-show="ready">
+
+      <f7-col v-show="ready && items.length > 0">
         <f7-block-title class="searchbar-hide-on-search">
-          {{ items.length }} Items
+          {{ items.length }} Items -
+          <f7-link external :href="documentationLink" target="_blank" text="Open documentation" color="blue" />
         </f7-block-title>
         <f7-list
           v-show="items.length > 0"
@@ -88,9 +91,14 @@
         </f7-list>
       </f7-col>
     </f7-block>
+
     <f7-block v-if="ready && !items.length" class="service-config block-narrow">
       <empty-state-placeholder icon="square_on_circle" title="items.title" text="items.text" />
+      <f7-row class="display-flex justify-content-center">
+        <f7-button large fill color="blue" external :href="documentationLink" target="_blank" v-t="'home.overview.button.documentation'" />
+      </f7-row>
     </f7-block>
+
     <f7-fab v-show="!showCheckboxes" position="center-bottom" text="Refresh" slot="fixed" color="blue" @click="load()">
       <f7-icon ios="f7:arrow_clockwise" md="material:refresh" aurora="f7:arrow_clockwise" />
     </f7-fab>
@@ -281,6 +289,9 @@ export default {
     }
   },
   computed: {
+    documentationLink () {
+      return `https://${this.$store.state.runtimeInfo.buildString === 'Release Build' ? 'www' : 'next'}.openhab.org/link/items`
+    },
     searchPlaceholder () {
       return window.innerWidth >= 1280 ? 'Search (for advanced search, use the developer sidebar (Shift+Alt+D))' : 'Search'
     }

bundles/org.openhab.ui/web/src/pages/settings/menu/add-on-section.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <f7-block-title>
+      Add-on Settings
+    </f7-block-title>
+    <f7-list class="search-list">
+      <f7-list-item
+        v-for="a in addonsSettings"
+        :key="a.uid"
+        :link="'addons/' + a.uid + '/config'"
+        :title="a.label" />
+      <f7-list-button v-if="!expanded && addonsInstalled.length > addonsSettings.length" color="blue" @click="expanded = true">
+        Show All
+      </f7-list-button>
+    </f7-list>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['addonsInstalled', 'addonsServices'],
+  data () {
+    return {
+      ready: false,
+      expanded: false
+    }
+  },
+  computed: {
+    addonsSettings () {
+      if (this.expanded) return this.addonsInstalled
+      return this.addonsInstalled.filter((a) =>
+        a.type === 'persistence' ||
+        this.addonsServices.findIndex((as) => as.configDescriptionURI.split(':')[1] === a.id) > -1
+      )
+    }
+  }
+}
+</script>