Add Contextual Helpers

changelog/unreleased/enhancement-add-contextual-help

@@ -0,0 +1,7 @@
+Enhancement: Add OcContextualHelper
+
+We've added contextual helpers to provide more information
+based on the context
+
+https://github.com/owncloud/web/issues/6590
+https://github.com/owncloud/web/pull/6750

changelog/unreleased/enhancement-bump-ods-13.1.0-rc.5

@@ -0,0 +1,5 @@
+Enhancement: Bump ODS to 13.1.0 RC.5
+
+We've bumped the version of the design system to v13.1.0-rc.5
+
+https://github.com/owncloud/web/pull/6750

config/config.json.dist

@@ -15,5 +15,8 @@
     "search",
     "text-editor"
   ],
-  "applications" : []
+  "applications" : [],
+  "options": {
+    "contextHelpers": true
+  },
 }

config/config.json.sample-oc10

@@ -14,5 +14,8 @@
     "search",
     "text-editor",
     "draw-io"
-  ]
+  ],
+  "options": {
+    "contextHelpers": true
+  },
 }

config/config.json.sample-ocis

@@ -28,5 +28,8 @@
       "id": "accounts",
       "path": "https://localhost:9200/accounts.js"
     }
-  ]
+  ],
+  "options": {
+    "contextHelpers": true
+  },
 }

packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue

@@ -35,11 +35,15 @@
         <span />
       </template>
     </oc-select>
-    <p
-      id="files-share-invite-hint"
-      class="oc-mt-xs oc-text-meta"
-      v-text="inviteDescriptionMessage"
-    />
+    <p>
+      <span
+        id="files-share-invite-hint"
+        class="oc-mt-xs oc-text-meta"
+        v-text="inviteDescriptionMessage"
+      />
+      <oc-contextual-helper v-if="resourceIsSpace && helpersEnabled" v-bind="spaceAddMemberHelp" />
+      <oc-contextual-helper v-else-if="helpersEnabled" v-bind="inviteCollaboratorHelp" />
+    </p>
     <div class="oc-flex oc-flex-middle oc-flex-between oc-mb-l">
       <role-dropdown
         :resource="highlightedFile"
@@ -89,6 +93,10 @@ import {
 } from '../../../../../helpers/share'
 import { clientService } from 'web-pkg/src/services'
 import { useCapabilityFilesSharingResharing } from 'web-pkg/src/composables'
+import {
+  shareInviteCollaboratorHelp,
+  shareSpaceAddMemberHelp
+} from '../../../../../helpers/contextualHelpers.js'
 
 export default {
   name: 'InviteCollaboratorForm',
@@ -120,6 +128,18 @@ export default {
     ...mapGetters('Files', ['currentFileOutgoingCollaborators', 'highlightedFile']),
     ...mapGetters(['configuration', 'getToken', 'user']),
 
+    helpersEnabled() {
+      return this.configuration.options.contextHelpers
+    },
+
+    inviteCollaboratorHelp() {
+      return shareInviteCollaboratorHelp
+    },
+
+    spaceAddMemberHelp() {
+      return shareSpaceAddMemberHelp
+    },
+
     inviteDescriptionMessage() {
       return this.$gettext('Add new person by name, email or federation IDs')
     },

packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue

@@ -9,9 +9,12 @@
       <template v-else>
         <h3 class="oc-text-bold oc-m-rm oc-text-initial" v-text="linksHeading" />
         <div v-if="canCreatePublicLinks" class="oc-my-s">
-          <p v-translate class="oc-text-muted">
-            Any external person with the respective link can access this resource. No sign-in
-            required. Assign a password to avoid unintended document exposure.
+          <p class="oc-text-muted">
+            <span v-translate
+              >Any external person with the respective link can access this resource. No sign-in
+              required. Assign a password to avoid unintended document exposure.</span
+            >
+            <oc-contextual-helper v-if="helpersEnabled" v-bind="viaLinkHelp" />
           </p>
           <oc-button
             id="files-file-link-add"
@@ -66,6 +69,7 @@ import { useStore, useCapabilitySpacesEnabled } from 'web-pkg/src/composables'
 import { clientService } from 'web-pkg/src/services'
 import { dirname } from 'path'
 import { defineComponent } from '@vue/composition-api'
+import { shareViaLinkHelp } from '../../../helpers/contextualHelpers'
 
 const VIEW_SHOW = 'showLinks'
 const VIEW_EDIT = 'editPublicLink'
@@ -105,10 +109,18 @@ export default defineComponent({
       'currentFileOutgoingSharesLoading',
       'sharesTreeLoading'
     ]),
-    ...mapGetters(['capabilities']),
+    ...mapGetters(['capabilities', 'configuration']),
     ...mapState('Files', ['sharesTree']),
     ...mapState(['user']),
 
+    helpersEnabled() {
+      return this.configuration.options.contextHelpers
+    },
+
+    viaLinkHelp() {
+      return shareViaLinkHelp
+    },
+
     canCreatePublicLinks() {
       return this.highlightedFile.canShare({ user: this.user })
     },

packages/web-app-files/src/helpers/contextualHelpers.js

@@ -0,0 +1,51 @@
+// just a dummy function to trick gettext tools
+function $gettext(msg) {
+  return msg
+}
+export const empty = {
+  text: $gettext(''),
+  list: [$gettext(''), $gettext(''), $gettext('')]
+}
+export const shareInviteCollaboratorHelp = {
+  text: $gettext('Invite persons or groups to access this file or folder.'),
+  list: [
+    $gettext('Enter a name or group to share this item'),
+    $gettext(
+      'If you share a folder,  all of its contents and subfolders will be shared with the entered persons or groups'
+    ),
+    $gettext('Invited persons or groups will be notified via e-mail or in-app notification'),
+    $gettext('Invited persons can not see who else has access')
+  ]
+}
+export const shareSpaceAddMemberHelp = {
+  text: $gettext('Add persons or groups as members to this Space. Members are allowed to:'),
+  list: [
+    $gettext('see who else is member of this space'),
+    $gettext('view all files in this space'),
+    $gettext('(if permitted) edit or delete files in this Space'),
+    $gettext('(if permitted) share folders of this Space with non-Members'),
+    $gettext('see with whom a folder is shared')
+  ],
+  endText: 'Members can only be added or removed by a Space Manager.'
+}
+export const shareViaLinkHelp = {
+  text: $gettext('Share a file or folder by link. Choose how access is granted:'),
+  list: [
+    $gettext(
+      'Only invited people can access: Only people from the list "Invited people" can access. If there is no list, no people are invited yet.'
+    ),
+    $gettext(
+      'Everyone with the link: Everyone with the link can access. Note: If you share this link with people from the list "Invited people", they need to login-in so that their individual assigned permissions can take effect. If they are not logged-in, the permissions of the link take effect.'
+    )
+  ]
+}
+export const shareQuickLinkHelp = {
+  text: $gettext('The Quick link is the link that is always copied if you'),
+  list: [
+    $gettext('right click on a file and choose "Get link" or'),
+    $gettext('click on the quickaction "Get link"')
+  ]
+}
+export const shareAddLinkHelp = {
+  text: $gettext('Add and manage multiple links for the same file or folder.')
+}

packages/web-app-files/src/views/shares/SharedViaLink.vue

@@ -11,6 +11,7 @@
       >
         <template #message>
           <span v-translate>There are no resources with a public link at the moment</span>
+          <oc-contextual-helper v-if="helpersEnabled" v-bind="quickLinkHelp" />
         </template>
       </no-content-message>
       <resource-table
@@ -70,6 +71,7 @@ import { createLocationSpaces } from '../../router'
 import { useResourcesViewDefaults } from '../../composables'
 import { defineComponent } from '@vue/composition-api'
 import { Resource } from '../../helpers/resource'
+import { shareQuickLinkHelp } from '../../helpers/contextualHelpers'
 
 const visibilityObserver = new VisibilityObserver()
 
@@ -101,6 +103,14 @@ export default defineComponent({
     ...mapGetters(['configuration']),
     ...mapState('Files/sidebar', { sidebarClosed: 'closed' }),
 
+    helpersEnabled() {
+      return this.configuration.options.contextHelpers
+    },
+
+    quickLinkHelp() {
+      return shareQuickLinkHelp
+    },
+
     isEmpty() {
       return this.paginatedResources.length < 1
     },

packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.spec.js

@@ -114,6 +114,9 @@ function getWrapper({ selectedCollaborators = [], storageId, highlightedFile = f
       getters: {
         getToken: jest.fn(() => 'GFwHKXdsMgoFwt'),
         configuration: jest.fn(() => ({
+          options: {
+            contextHelpers: true
+          },
           server: 'http://example.com/'
         }))
       }

packages/web-app-files/tests/unit/components/SideBar/Shares/FileLinks.spec.js

@@ -191,6 +191,17 @@ describe('FileLinks', () => {
   } = {}) {
     return new Vuex.Store({
       getters: {
+        configuration: jest.fn(() => ({
+          options: {
+            contextHelpers: true
+          },
+          server: 'http://example.com/',
+          currentTheme: {
+            general: {
+              name: 'some-company'
+            }
+          }
+        })),
         capabilities: jest.fn(() => {
           return {
             files: {

packages/web-app-files/tests/unit/components/SideBar/Shares/FileShares.spec.js

@@ -247,6 +247,9 @@ const storeOptions = (data) => {
     getters: {
       getToken: jest.fn(() => 'GFwHKXdsMgoFwt'),
       configuration: jest.fn(() => ({
+        options: {
+          contextHelpers: true
+        },
         server: 'http://example.com/'
       })),
       user: () => user,

packages/web-app-files/tests/unit/components/SideBar/Shares/SpaceMembers.spec.js

@@ -164,6 +164,17 @@ const storeOptions = (data, isInLoadingState) => {
       }
     },
     getters: {
+      configuration: jest.fn(() => ({
+        options: {
+          contextHelpers: true
+        },
+        server: 'http://example.com/',
+        currentTheme: {
+          general: {
+            name: 'some-company'
+          }
+        }
+      })),
       user: () => user,
       capabilities: () => {
         return {

packages/web-app-files/tests/unit/views/shares/__snapshots__/SharedViaLink.spec.js.snap

@@ -7,7 +7,9 @@ exports[`SharedViaLink view when the view is not loading anymore when there are
     <div class="oc-icon oc-icon-xxl oc-icon-passive">
       <!---->
     </div>
-    <div class="oc-text-muted oc-text-large"><span>There are no resources with a public link at the moment</span></div>
+    <div class="oc-text-muted oc-text-large"><span>There are no resources with a public link at the moment</span>
+      <!---->
+    </div>
     <div class="oc-text-muted"></div>
   </div>
 </div>

packages/web-app-files/tests/unit/views/shares/__snapshots__/SharedWithOthers.spec.js.snap

@@ -28,7 +28,7 @@ exports[`SharedWithOthers view when the wrapper is not loading anymore when leng
       </td>
       <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-text-truncate oc-table-data-cell oc-table-data-cell-name">
         <div class="resource-table-resource-wrapper">
-          <oc-resource-stub folderlink="[object Object]" parentfolderlink="[object Object]" resource="[object Object]" parentfoldernamedefault="All files and folders" ispathdisplayed="true" isresourceclickable="true"></oc-resource-stub>
+          <oc-resource-stub folderlink="[object Object]" parentfolderlink="[object Object]" resource="[object Object]" parentfoldernamedefault="All files and folders" ispathdisplayed="true" isextensiondisplayed="true" isresourceclickable="true"></oc-resource-stub>
           <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="resource-table-edit-name"><span class="oc-icon oc-icon-s oc-icon-passive"><!----></span></oc-button-stub>
         </div>
       </td>
@@ -51,7 +51,7 @@ exports[`SharedWithOthers view when the wrapper is not loading anymore when leng
       </td>
       <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-text-truncate oc-table-data-cell oc-table-data-cell-name">
         <div class="resource-table-resource-wrapper">
-          <oc-resource-stub folderlink="[object Object]" parentfolderlink="[object Object]" resource="[object Object]" parentfoldernamedefault="All files and folders" ispathdisplayed="true" isresourceclickable="true"></oc-resource-stub>
+          <oc-resource-stub folderlink="[object Object]" parentfolderlink="[object Object]" resource="[object Object]" parentfoldernamedefault="All files and folders" ispathdisplayed="true" isextensiondisplayed="true" isresourceclickable="true"></oc-resource-stub>
           <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="resource-table-edit-name"><span class="oc-icon oc-icon-s oc-icon-passive"><!----></span></oc-button-stub>
         </div>
       </td>
@@ -74,7 +74,7 @@ exports[`SharedWithOthers view when the wrapper is not loading anymore when leng
       </td>
       <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-text-truncate oc-table-data-cell oc-table-data-cell-name">
         <div class="resource-table-resource-wrapper">
-          <oc-resource-stub folderlink="[object Object]" parentfolderlink="[object Object]" resource="[object Object]" parentfoldernamedefault="All files and folders" ispathdisplayed="true" isresourceclickable="true"></oc-resource-stub>
+          <oc-resource-stub folderlink="[object Object]" parentfolderlink="[object Object]" resource="[object Object]" parentfoldernamedefault="All files and folders" ispathdisplayed="true" isextensiondisplayed="true" isresourceclickable="true"></oc-resource-stub>
           <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="resource-table-edit-name"><span class="oc-icon oc-icon-s oc-icon-passive"><!----></span></oc-button-stub>
         </div>
       </td>
@@ -97,7 +97,7 @@ exports[`SharedWithOthers view when the wrapper is not loading anymore when leng
       </td>
       <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-text-truncate oc-table-data-cell oc-table-data-cell-name">
         <div class="resource-table-resource-wrapper">
-          <oc-resource-stub folderlink="[object Object]" parentfolderlink="[object Object]" resource="[object Object]" parentfoldernamedefault="All files and folders" ispathdisplayed="true" isresourceclickable="true"></oc-resource-stub>
+          <oc-resource-stub folderlink="[object Object]" parentfolderlink="[object Object]" resource="[object Object]" parentfoldernamedefault="All files and folders" ispathdisplayed="true" isextensiondisplayed="true" isresourceclickable="true"></oc-resource-stub>
           <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="resource-table-edit-name"><span class="oc-icon oc-icon-s oc-icon-passive"><!----></span></oc-button-stub>
         </div>
       </td>

packages/web-runtime/package.json

@@ -18,7 +18,7 @@
     "luxon": "^2.3.0",
     "marked": "^4.0.12",
     "oidc-client": "1.11.5",
-    "owncloud-design-system": "^13.1.0-rc.3",
+    "owncloud-design-system": "^13.1.0-rc.5",
     "owncloud-sdk": "~3.0.0-alpha.4",
     "p-queue": "^6.1.1",
     "popper-max-size-modifier": "^0.2.0",

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

@@ -13,7 +13,7 @@ exports[`ApplicationsMenu component should render navigation with button and men
         </oc-button-stub>
       </li>
       <li>
-        <oc-button-stub type="a" size="medium" href="http://some.org" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" target="_blank" class=""><span class="icon-box"><oc-icon-stub name="some-icon" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub></span> <span>External</span>
+        <oc-button-stub type="a" size="medium" href="http://some.org" target="_blank" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class=""><span class="icon-box"><oc-icon-stub name="some-icon" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub></span> <span>External</span>
           <!---->
         </oc-button-stub>
       </li>

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FeedbackLink component has no accessibility violations 1`] = `
-<div class="oc-flex"><a aria-label="ownCloud feedback survey" href="https://owncloud.com/web-design-feedback" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw" target="_blank" aria-describedby="oc-feedback-link-description"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></a>
+<div class="oc-flex"><a aria-label="ownCloud feedback survey" href="https://owncloud.com/web-design-feedback" target="_blank" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw" aria-describedby="oc-feedback-link-description"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></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>
 `;

yarn.lock

@@ -9671,9 +9671,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"owncloud-design-system@npm:^13.1.0-rc.3":
-  version: 13.1.0-rc.3
-  resolution: "owncloud-design-system@npm:13.1.0-rc.3"
+"owncloud-design-system@npm:^13.1.0-rc.5":
+  version: 13.1.0-rc.5
+  resolution: "owncloud-design-system@npm:13.1.0-rc.5"
   peerDependencies:
     "@popperjs/core": ^2.4.0
     "@vue/composition-api": ^1.4.3
@@ -9690,7 +9690,7 @@ __metadata:
     vue-inline-svg: ^2.0.0
     vue-select: ^3.12.0
     webfontloader: ^1.6.28
-  checksum: 43119c863273b0dde35aa9c854386a4ebf731104ae6a7541788d89760abc576b6bba6a7cc8962cc1c2053797982250149fdf9c79bb892e91403221b7441ca636
+  checksum: 452d75d01bf0793cc9f4a1f611607fd2e71566c75413cc62dba4196d9d0a69a929c6b36a368f520de96a914c32853167bbdaf1dfeec8529f0b3846abe59963f9
   languageName: node
   linkType: hard
 
@@ -13821,7 +13821,7 @@ __metadata:
     luxon: ^2.3.0
     marked: ^4.0.12
     oidc-client: 1.11.5
-    owncloud-design-system: ^13.1.0-rc.3
+    owncloud-design-system: ^13.1.0-rc.5
     owncloud-sdk: ~3.0.0-alpha.4
     p-queue: ^6.1.1
     popper-max-size-modifier: ^0.2.0