Merge pull request #6750 from owncloud/add-contextual-helpers

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>