Webdav details followup (#10062)

changelog/unreleased/enhancement-show-webdav-information-in-details

@@ -0,0 +1,9 @@
+Enhancement: Show webdav information in details view
+
+We've added WebDav path and WebDav url information to the details view,
+this might be usefully when the user wants to add an external WebDav client.
+
+By default this view option is disabled but can be enabled via account->preferences view.
+
+https://github.com/owncloud/web/pull/10062
+https://github.com/owncloud/web/issues/9714

packages/web-app-files/src/components/SideBar/Details/FileDetails.vue

@@ -83,7 +83,7 @@
           <th scope="col" class="oc-pr-s oc-font-semibold" v-text="$gettext('Size')" />
           <td v-text="resourceSize" />
         </tr>
-        <web-dav-details />
+        <web-dav-details v-if="showWebDavDetails" />
         <tr v-if="showVersions" data-testid="versionsInfo">
           <th scope="col" class="oc-pr-s oc-font-semibold" v-text="$gettext('Versions')" />
           <td>
@@ -217,6 +217,9 @@ export default defineComponent({
         matchingSpace: unref(space) || getMatchingSpace(unref(resource))
       })
     })
+    const showWebDavDetails = computed(() => {
+      return store.getters['Files/areWebDavDetailsShown']
+    })
     const formatDateRelative = (date) => {
       return formatRelativeDateFromJSDate(new Date(date), language.current)
     }
@@ -248,7 +251,8 @@ export default defineComponent({
       sharedAncestor,
       sharedAncestorRoute,
       formatDateRelative,
-      contextualHelper
+      contextualHelper,
+      showWebDavDetails
     }
   },
   computed: {

packages/web-app-files/src/store/getters.ts

@@ -67,5 +67,14 @@ export default {
   },
   versions: (state) => {
     return state.versions
+  },
+  areHiddenFilesShown: (state) => {
+    return state.areHiddenFilesShown
+  },
+  areFileExtensionsShown: (state) => {
+    return state.areFileExtensionsShown
+  },
+  areWebDavDetailsShown: (state) => {
+    return state.areWebDavDetailsShown
   }
 }

packages/web-app-files/src/store/mutations.ts

@@ -214,6 +214,12 @@ export default {
     state.areFileExtensionsShown = value
 
     window.localStorage.setItem('oc_fileExtensionsShown', value)
+  },
+
+  SET_FILE_WEB_DAV_DETAILS_VISIBILITY(state, value) {
+    state.areWebDavDetailsShown = value
+
+    window.localStorage.setItem('oc_webDavDetailsShown', value)
   }
 }
 

packages/web-app-files/src/store/state.ts

@@ -19,5 +19,6 @@ export default {
    * View settings
    */
   areHiddenFilesShown: true,
-  areFileExtensionsShown: true
+  areFileExtensionsShown: true,
+  areWebDavDetailsShown: false
 }

packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceDetails.spec.ts.snap

@@ -54,32 +54,7 @@ exports[`ResourceDetails component renders resource details correctly 1`] = `
               <th class="oc-pr-s oc-font-semibold" scope="col">Size</th>
               <td>24 kB</td>
             </tr>
-            <tr>
-              <th class="oc-pr-s oc-font-semibold" scope="col">WebDav path</th>
-              <td class="oc-flex oc-flex-middle">
-                <div class="oc-text-truncate"></div>
-                <button aria-label="Copy WebDAV path to clipboard" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-ml-s" type="button">
-                  <!--v-if-->
-                  <!-- @slot Content of the button -->
-                  <span class="oc-icon oc-icon-m oc-icon-passive">
-                    <!---->
-                  </span>
-                </button>
-              </td>
-            </tr>
-            <tr>
-              <th class="oc-pr-s oc-font-semibold" scope="col">WebDav url</th>
-              <td class="oc-flex oc-flex-middle">
-                <div class="oc-text-truncate">/</div>
-                <button aria-label="Copy WebDAV url to clipboard" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-ml-s" type="button">
-                  <!--v-if-->
-                  <!-- @slot Content of the button -->
-                  <span class="oc-icon oc-icon-m oc-icon-passive">
-                    <!---->
-                  </span>
-                </button>
-              </td>
-            </tr>
+            <!--v-if-->
             <!--v-if-->
 
             <!--v-if-->

packages/web-pkg/src/components/AppBar/AppBar.vue

@@ -75,7 +75,7 @@
 <script lang="ts">
 import last from 'lodash-es/last'
 import { computed, defineComponent, inject, PropType, ref, Ref, unref, useSlots } from 'vue'
-import { mapGetters, mapState, mapMutations } from 'vuex'
+import { mapGetters } from 'vuex'
 import { Resource } from '@ownclouders/web-client'
 import {
   isPersonalSpaceResource,
@@ -296,7 +296,6 @@ export default defineComponent({
   },
   computed: {
     ...mapGetters('Files', ['files', 'selectedFiles']),
-    ...mapState('Files', ['areHiddenFilesShown', 'areFileExtensionsShown']),
 
     showContextActions() {
       return last<BreadcrumbItem>(this.breadcrumbs).allowContextActions
@@ -331,27 +330,7 @@ export default defineComponent({
     window.removeEventListener('resize', this.onResize)
   },
 
-  created() {
-    // Storage returns a string so we need to convert it into a boolean
-    const areHiddenFilesShown = window.localStorage.getItem('oc_hiddenFilesShown') || 'false'
-    const areHiddenFilesShownBoolean = areHiddenFilesShown === 'true'
-
-    if (areHiddenFilesShownBoolean !== this.areHiddenFilesShown) {
-      this.SET_HIDDEN_FILES_VISIBILITY(areHiddenFilesShownBoolean)
-    }
-
-    // Storage returns a string so we need to convert it into a boolean
-    const areFileExtensionsShown = window.localStorage.getItem('oc_fileExtensionsShown') || 'true'
-    const areFileExtensionsShownBoolean = areFileExtensionsShown === 'true'
-
-    if (areFileExtensionsShownBoolean !== this.areFileExtensionsShown) {
-      this.SET_FILE_EXTENSIONS_VISIBILITY(areFileExtensionsShownBoolean)
-    }
-  },
-
   methods: {
-    ...mapMutations('Files', ['SET_HIDDEN_FILES_VISIBILITY', 'SET_FILE_EXTENSIONS_VISIBILITY']),
-
     onResize() {
       const totalContentWidth =
         document.getElementById('web-content-main')?.getBoundingClientRect().width || 0

packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetails.vue

@@ -66,7 +66,7 @@
           <space-quota :space-quota="resource.spaceQuota" />
         </td>
       </tr>
-      <web-dav-details />
+      <web-dav-details v-if="showWebDavDetails" />
       <portal-target
         name="app.files.sidebar.space.details.table"
         :slot-props="{ space: resource, resource }"
@@ -135,11 +135,16 @@ export default defineComponent({
       return store.getters['Files/outgoingLinks'].length
     })
 
+    const showWebDavDetails = computed(() => {
+      return store.getters['Files/areWebDavDetailsShown']
+    })
+
     return {
       loadImageTask,
       spaceImage,
       resource,
-      linkShareCount
+      linkShareCount,
+      showWebDavDetails
     }
   },
   computed: {

packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/__snapshots__/SpaceDetails.spec.ts.snap

@@ -11,7 +11,6 @@ exports[`Details SideBar Panel displays the details side panel 1`] = `
     <p>This space has 1 member.</p>
     <oc-button-stub appearance="raw" arialabel="Open share panel" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="small" submit="button" type="button" variation="passive"></oc-button-stub>
   </div>
-  <web-dav-details-stub></web-dav-details-stub>
   <portal-target multiple="true" name="app.files.sidebar.space.details.table" slot-props="[object Object]"></portal-target>
   <table aria-label="Overview of the information about the selected space" class="details-table oc-width-1-1">
     <colgroup>
@@ -36,7 +35,7 @@ exports[`Details SideBar Panel displays the details side panel 1`] = `
           <space-quota-stub spacequota="[object Object]"></space-quota-stub>
         </td>
       </tr>
-
+      <!--v-if-->
 
     </tbody>
   </table>

packages/web-runtime/src/container/bootstrap.ts

@@ -659,3 +659,29 @@ export const registerSSEEventListeners = ({
     onSSEProcessingFinishedEvent({ store, msg, clientService, resourceQueue })
   )
 }
+
+export const setViewOptions = ({ store }: { store: Store<unknown> }): void => {
+  /**
+   *   Storage returns a string so we need to convert it into a boolean
+   */
+  const areHiddenFilesShown = window.localStorage.getItem('oc_hiddenFilesShown') || 'false'
+  const areHiddenFilesShownBoolean = areHiddenFilesShown === 'true'
+
+  if (areHiddenFilesShownBoolean !== store.getters['Files/areHiddenFilesShown']) {
+    store.commit('Files/SET_HIDDEN_FILES_VISIBILITY', areHiddenFilesShownBoolean)
+  }
+
+  const areFileExtensionsShown = window.localStorage.getItem('oc_fileExtensionsShown') || 'true'
+  const areFileExtensionsShownBoolean = areFileExtensionsShown === 'true'
+
+  if (areFileExtensionsShownBoolean !== store.getters['Files/areFileExtensionsShownBoolean']) {
+    store.commit('Files/SET_FILE_EXTENSIONS_VISIBILITY', areFileExtensionsShownBoolean)
+  }
+
+  const areWebDavDetailsShown = window.localStorage.getItem('oc_webDavDetailsShown') || 'false'
+  const areWebDavDetailsShownBoolean = areWebDavDetailsShown === 'true'
+
+  if (areWebDavDetailsShownBoolean !== store.getters['Files/areWebDavDetailsShown']) {
+    store.commit('Files/SET_FILE_WEB_DAV_DETAILS_VISIBILITY', areWebDavDetailsShownBoolean)
+  }
+}

packages/web-runtime/src/index.ts

@@ -26,7 +26,8 @@ import {
   announcePreviewService,
   announcePasswordPolicyService,
   announceAdditionalTranslations,
-  registerSSEEventListeners
+  registerSSEEventListeners,
+  setViewOptions
 } from './container/bootstrap'
 import { applicationStore } from './container/store'
 import {
@@ -133,6 +134,8 @@ export const bootstrapApp = async (configurationPath: string): Promise<void> =>
 
   app.mount('#owncloud')
 
+  setViewOptions({ store })
+
   const applications = Array.from(applicationStore.values())
   applications.forEach((application) => application.mounted(app))