Merge pull request #5468 from owncloud/feedback-link

Feedback link

changelog/unreleased/enhancement-feedback-link

@@ -0,0 +1,5 @@
+Enhancement: Feedback link
+
+We've added a feedback link in the topbar which opens a survey in a new tab. The intention is to gather feedback from users. There is a config option to disable the link (see docs "getting started").
+
+https://github.com/owncloud/web/pull/5468

docs/getting-started.md

@@ -33,6 +33,8 @@ substring of a value of the authenticated user. Examples are `/Shares`, `/{{.Id}
 - `options.disablePreviews` Set this option to `true` to disable previews in all the different file listing views. The only list view that is not affected
   by this is the trash bin, as that doesn't allow showing previews at all.
 - `options.previewFileExtensions` Specifies which filetypes will be previewed in the ui. For example to only preview jpg and txt files set this option to `["jpg", "txt"]`.
+- `options.disableFeedbackLink` Set this option to `true` to disable the feedback link in the topbar. Keeping it enabled (value `false` or absence of the option)
+  allows ownCloud to get feedback from your user base through a dedicated survey website.
 
 ## Setting up backend and running
 

packages/web-runtime/package.json

@@ -12,7 +12,7 @@
     "lodash-es": "^4.17.21",
     "luxon": "^1.27.0",
     "oidc-client": "1.10.1",
-    "owncloud-design-system": "^8.0.0-rc2",
+    "owncloud-design-system": "^8.0.0-rc3",
     "owncloud-sdk": "1.0.0-2296",
     "p-queue": "^6.1.1",
     "tippy.js": "^6.3.1",

packages/web-runtime/src/components/FeedbackLink.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <oc-button
+      v-oc-tooltip="description"
+      type="a"
+      :href="href"
+      target="_blank"
+      appearance="raw"
+      :aria-label="ariaLabel"
+      aria-describedby="oc-feedback-link-description"
+    >
+      <oc-icon name="feedback" />
+    </oc-button>
+    <p id="oc-feedback-link-description" class="oc-invisible-sr" v-text="description" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FeedbackLink',
+  computed: {
+    href() {
+      return 'https://owncloud.com/web-design-feedback'
+    },
+    ariaLabel() {
+      return this.$gettext('ownCloud feedback survey')
+    },
+    description() {
+      return this.$gettext(
+        "Provide your feedback: We'd like to improve the web design and would be happy to hear your feedback. Thank you! Your ownCloud team."
+      )
+    }
+  }
+}
+</script>

packages/web-runtime/src/components/TopBar.vue

@@ -17,6 +17,7 @@
       <search-bar v-if="!isSearchDisabled" />
     </oc-grid>
     <oc-grid flex gutter="small" class="uk-width-expand uk-flex-right oc-m-rm">
+      <feedback-link v-if="isFeedbackLinkEnabled" />
       <notifications v-if="activeNotifications.length" />
       <applications-menu v-if="applicationsList.length > 0" :applications-list="applicationsList" />
       <user-menu
@@ -34,9 +35,11 @@ import ApplicationsMenu from './ApplicationsMenu.vue'
 import UserMenu from './UserMenu.vue'
 import Notifications from './Notifications.vue'
 import SearchBar from './SearchBar.vue'
+import FeedbackLink from './FeedbackLink.vue'
 
 export default {
   components: {
+    FeedbackLink,
     Notifications,
     ApplicationsMenu,
     UserMenu,
@@ -76,6 +79,10 @@ export default {
       return (
         this.configuration.options.hideSearchBar === true || this.$route.meta.hideSearchBar === true
       )
+    },
+
+    isFeedbackLinkEnabled() {
+      return !this.configuration.options.disableFeedbackLink
     }
   },
   methods: {

packages/web-runtime/tests/unit/components/FeedbackLink.spec.js

@@ -0,0 +1,28 @@
+import FeedbackLink from '../../../src/components/FeedbackLink'
+import { createLocalVue, mount } from '@vue/test-utils'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import DesignSystem from 'owncloud-design-system'
+const localVue = createLocalVue()
+localVue.use(DesignSystem)
+const OcTooltip = jest.fn()
+expect.extend(toHaveNoViolations)
+
+describe('FeedbackLink component', () => {
+  it('has no accessibility violations', async () => {
+    const wrapper = mount(FeedbackLink, {
+      localVue,
+      directives: {
+        OcTooltip
+      }
+    })
+
+    expect(
+      await axe(wrapper.html(), {
+        rules: {
+          region: { enabled: false }
+        }
+      })
+    ).toHaveNoViolations()
+    expect(wrapper).toMatchSnapshot()
+  })
+})

packages/web-runtime/tests/unit/components/__snapshots__/FeedbackLink.spec.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FeedbackLink component has no accessibility violations 1`] = `
+<div><a aria-label="ownCloud feedback survey" href="https://owncloud.com/web-design-feedback" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" target="_blank" aria-describedby="oc-feedback-link-description"><span class="oc-icon oc-icon-m oc-icon-passive"><svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"> <path xmlns="http://www.w3.org/2000/svg" d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 12h-2v-2h2v2zm0-4h-2V6h2v4z"></path> </svg></span></a>
+  <p id="oc-feedback-link-description" class="oc-invisible-sr">Provide your feedback: We'd like to improve the web design and would be happy to hear your feedback. Thank you! Your ownCloud team.</p>
+</div>
+`;

packages/web-runtime/tests/unit/components/__snapshots__/TopBar.spec.js.snap

@@ -11,6 +11,7 @@ exports[`Top Bar component Displays applications menu 1`] = `
     <!---->
   </oc-grid-stub>
   <oc-grid-stub flex="" gutter="small" class="uk-width-expand uk-flex-right oc-m-rm">
+    <feedback-link-stub></feedback-link-stub>
     <!---->
     <applications-menu-stub applicationslist="testApp"></applications-menu-stub>
     <user-menu-stub userid="einstein" userdisplayname="Albert Einstein" applicationslist="testApp"></user-menu-stub>
@@ -29,6 +30,7 @@ exports[`Top Bar component when search bar hidden globally Hides search bar even
     <!---->
   </oc-grid-stub>
   <oc-grid-stub flex="" gutter="small" class="uk-width-expand uk-flex-right oc-m-rm">
+    <feedback-link-stub></feedback-link-stub>
     <!---->
     <!---->
     <user-menu-stub userid="einstein" userdisplayname="Albert Einstein" applicationslist=""></user-menu-stub>
@@ -47,6 +49,7 @@ exports[`Top Bar component when search bar hidden globally Hides the search bar
     <!---->
   </oc-grid-stub>
   <oc-grid-stub flex="" gutter="small" class="uk-width-expand uk-flex-right oc-m-rm">
+    <feedback-link-stub></feedback-link-stub>
     <!---->
     <!---->
     <user-menu-stub userid="einstein" userdisplayname="Albert Einstein" applicationslist=""></user-menu-stub>
@@ -65,6 +68,7 @@ exports[`Top Bar component when search bar visible globally Displays search bar
     <search-bar-stub></search-bar-stub>
   </oc-grid-stub>
   <oc-grid-stub flex="" gutter="small" class="uk-width-expand uk-flex-right oc-m-rm">
+    <feedback-link-stub></feedback-link-stub>
     <!---->
     <!---->
     <user-menu-stub userid="einstein" userdisplayname="Albert Einstein" applicationslist=""></user-menu-stub>
@@ -83,6 +87,7 @@ exports[`Top Bar component when search bar visible globally Hides the search bar
     <!---->
   </oc-grid-stub>
   <oc-grid-stub flex="" gutter="small" class="uk-width-expand uk-flex-right oc-m-rm">
+    <feedback-link-stub></feedback-link-stub>
     <!---->
     <!---->
     <user-menu-stub userid="einstein" userdisplayname="Albert Einstein" applicationslist=""></user-menu-stub>

yarn.lock

@@ -8150,10 +8150,10 @@ [email protected]:
   dependencies:
     glob "^7.1.3"
 
-owncloud-design-system@^8.0.0-rc2:
-  version "8.0.0-rc2"
-  resolved "https://registry.yarnpkg.com/owncloud-design-system/-/owncloud-design-system-8.0.0-rc2.tgz#e82f948ead4f9f6258cb6bf49556da4a2aa6503b"
-  integrity sha512-HJlI+UMN/F5cqU2KKeh0RqiLj6RLwB41xoTERUzet7hT48tDRRwBDsdXhjx4p1uqyasm2Gq1Kwqg/xe+rdJ+hg==
+owncloud-design-system@^8.0.0-rc3:
+  version "8.0.0-rc3"
+  resolved "https://registry.yarnpkg.com/owncloud-design-system/-/owncloud-design-system-8.0.0-rc3.tgz#3c471411e8b96a335f75707a6b4bf904b270015c"
+  integrity sha512-cWUNiL0fFbusxmbP24RN9MAri8Zcx4Hc/BQP3ZDaZ3dc482Qvmde22M7cqyD63s1uV7sLdaad8MAu0FZAXVdqQ==
 
 [email protected]:
   version "1.0.0-2296"