Webdav details followup

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))