Merge pull request #1241 from nextcloud-libraries/fix/public-shares

fix(FilePicker): Allow using on public shares

l10n/messages.pot

@@ -34,6 +34,12 @@ msgstr ""
 msgid "Could not create the new folder"
 msgstr ""
 
+msgid "Could not load files settings"
+msgstr ""
+
+msgid "Could not load files views"
+msgstr ""
+
 msgid "Create directory"
 msgstr ""
 

lib/components/FilePicker/FilePicker.vue

@@ -1,7 +1,17 @@
 <template>
-	<NcDialog v-bind="dialogProps" :open.sync="isOpen" @update:open="handleClose">
+	<NcDialog :container="container"
+		:buttons="dialogButtons"
+		:name="name"
+		size="large"
+		content-classes="file-picker__content"
+		dialog-classes="file-picker"
+		navigation-classes="file-picker__navigation"
+		:open.sync="isOpen"
+		@update:open="handleClose">
 		<template #navigation="{ isCollapsed }">
-			<FilePickerNavigation :is-collapsed="isCollapsed" :current-view.sync="currentView" :filter-string.sync="filterString" />
+			<FilePickerNavigation :is-collapsed="isCollapsed"
+				:current-view.sync="currentView"
+				:filter-string.sync="filterString" />
 		</template>
 
 		<div class="file-picker__main">
@@ -45,8 +55,9 @@
 </template>
 
 <script setup lang="ts">
-import type { IFilePickerButton, IFilePickerButtonFactory, IFilePickerFilter } from '../types'
 import type { Node } from '@nextcloud/files'
+import type { IFilePickerButton, IFilePickerButtonFactory, IFilePickerFilter } from '../types.ts'
+import type { IFilesViewId } from '../../composables/views.ts'
 
 import IconFile from 'vue-material-design-icons/File.vue'
 import FileList from './FileList.vue'
@@ -61,8 +72,9 @@ import { computed, onMounted, ref, toRef } from 'vue'
 import { showError } from '../../toast'
 import { useDAVFiles } from '../../composables/dav'
 import { useMimeFilter } from '../../composables/mime'
-import { t } from '../../utils/l10n'
 import { useFilesSettings } from '../../composables/filesSettings'
+import { useIsPublic } from '../../composables/isPublic'
+import { t } from '../../utils/l10n'
 
 const props = withDefaults(defineProps<{
 	/** Buttons to be displayed */
@@ -120,20 +132,12 @@ const emit = defineEmits<{
 	(e: 'close', v?: Node[]): void
 }>()
 
-const isOpen = ref(true)
-
 /**
- * Props to be passed to the underlying Dialog component
+ * Whether we are on a public endpoint (e.g. public share)
  */
-const dialogProps = computed(() => ({
-	container: props.container,
-	name: props.name,
-	buttons: dialogButtons.value,
-	size: 'large',
-	contentClasses: ['file-picker__content'],
-	dialogClasses: ['file-picker'],
-	navigationClasses: ['file-picker__navigation'],
-}))
+const { isPublic } = useIsPublic()
+
+const isOpen = ref(true)
 
 /**
  * Map buttons to Dialog buttons by wrapping the callback function to pass the selected files
@@ -170,7 +174,7 @@ const handleButtonClick = async (callback: IFilePickerButton['callback']) => {
 /**
  * Name of the currently active view
  */
-const currentView = ref<'files' | 'favorites' | 'recent'>('files')
+const currentView = ref<IFilesViewId>('files')
 
 /**
  * Headline to be used on the current view
@@ -221,7 +225,7 @@ const filterString = ref('')
 
 const { isSupportedMimeType } = useMimeFilter(toRef(props, 'mimetypeFilter')) // vue 3.3 will allow cleaner syntax of toRef(() => props.mimetypeFilter)
 
-const { files, isLoading, loadFiles, getFile, client } = useDAVFiles(currentView, currentPath)
+const { files, isLoading, loadFiles, getFile, createDirectory } = useDAVFiles(currentView, currentPath, isPublic)
 
 onMounted(() => loadFiles())
 
@@ -271,9 +275,7 @@ const noFilesDescription = computed(() => {
  */
 const onCreateFolder = async (name: string) => {
 	try {
-		await client.createDirectory(join(davRootPath, currentPath.value, name))
-		// reload file list
-		await loadFiles()
+		await createDirectory(name)
 		// emit event bus to force files app to reload that file if needed
 		emitOnEventBus('files:node:created', files.value.filter((file) => file.basename === name)[0])
 	} catch (error) {

lib/components/FilePicker/FilePickerNavigation.vue

@@ -12,55 +12,42 @@
 				<IconClose :size="16" />
 			</template>
 		</NcTextField>
-		<!-- On non collapsed dialogs show the tablist, otherwise a dropdown is shown -->
-		<ul v-if="!isCollapsed"
-			class="file-picker__side">
-			<li v-for="view in allViews" :key="view.id">
-				<NcButton :type="currentView === view.id ? 'primary' : 'tertiary'"
-					:wide="true"
-					@click="$emit('update:currentView', view.id)">
-					<template #icon>
-						<component :is="view.icon" :size="20" />
-					</template>
-					{{ view.label }}
-				</NcButton>
-			</li>
-		</ul>
-		<NcSelect v-else
-			:aria-label="t('Current view selector')"
-			:clearable="false"
-			:searchable="false"
-			:options="allViews"
-			:value="currentViewObject"
-			@input="v => emit('update:currentView', v.id)" />
+		<template v-if="availableViews.length > 1">
+			<!-- On non collapsed dialogs show the tablist, otherwise a dropdown is shown -->
+			<ul v-if="!isCollapsed"
+				class="file-picker__side">
+				<li v-for="view in availableViews" :key="view.id">
+					<NcButton :type="currentView === view.id ? 'primary' : 'tertiary'"
+						:wide="true"
+						@click="$emit('update:currentView', view.id)">
+						<template #icon>
+							<NcIconSvgWrapper :path="view.icon" :size="20" />
+						</template>
+						{{ view.label }}
+					</NcButton>
+				</li>
+			</ul>
+			<NcSelect v-else
+				:aria-label="t('Current view selector')"
+				:clearable="false"
+				:searchable="false"
+				:options="availableViews"
+				:value="currentViewObject"
+				@input="(v) => emit('update:currentView', v.id)" />
+		</template>
 	</Fragment>
 </template>
 
 <script setup lang="ts">
-import IconFolder from 'vue-material-design-icons/Folder.vue'
-import IconClock from 'vue-material-design-icons/Clock.vue'
 import IconClose from 'vue-material-design-icons/Close.vue'
 import IconMagnify from 'vue-material-design-icons/Magnify.vue'
-import IconStar from 'vue-material-design-icons/Star.vue'
 
-import { NcButton, NcSelect, NcTextField } from '@nextcloud/vue'
-import { t } from '../../utils/l10n'
-import { computed } from 'vue'
+import { getCurrentUser } from '@nextcloud/auth'
+import { NcButton, NcIconSvgWrapper, NcSelect, NcTextField } from '@nextcloud/vue'
+import { computed, ref } from 'vue'
 import { Fragment } from 'vue-frag'
-
-const allViews = [{
-	id: 'files',
-	label: t('All files'),
-	icon: IconFolder,
-}, {
-	id: 'recent',
-	label: t('Recent'),
-	icon: IconClock,
-}, {
-	id: 'favorites',
-	label: t('Favorites'),
-	icon: IconStar,
-}]
+import { t } from '../../utils/l10n'
+import { useViews } from '../../composables/views'
 
 const props = defineProps<{
 	currentView: 'files' | 'recent' | 'favorites',
@@ -74,10 +61,12 @@ interface INavigationEvents {
 }
 const emit = defineEmits<INavigationEvents>()
 
+const { availableViews } = useViews(ref(getCurrentUser() === null))
+
 /**
  * The currently active view object
  */
-const currentViewObject = computed(() => allViews.filter(v => v.id === props.currentView)[0])
+const currentViewObject = computed(() => availableViews.filter(v => v.id === props.currentView)[0] ?? availableViews[0])
 
 /**
  * Propagate current filter value to paren

lib/composables/dav.spec.ts

@@ -28,6 +28,7 @@ import { useDAVFiles } from './dav'
 const nextcloudFiles = vi.hoisted(() => ({
 	davGetClient: vi.fn(),
 	davRootPath: '/root/uid',
+	davRemoteURL: 'https://localhost/remote.php/dav',
 	davResultToNode: vi.fn(),
 	davGetDefaultPropfind: vi.fn(),
 	davGetRecentSearch: (time: number) => `recent ${time}`,
@@ -44,9 +45,9 @@ const waitLoaded = (vue: ReturnType<typeof shallowMount>) => new Promise((resolv
 })
 
 const TestComponent = defineComponent({
-	props: ['currentView', 'currentPath'],
+	props: ['currentView', 'currentPath', 'isPublic'],
 	setup(props) {
-		const dav = useDAVFiles(toRef(props, 'currentView'), toRef(props, 'currentPath'))
+		const dav = useDAVFiles(toRef(props, 'currentView'), toRef(props, 'currentPath'), toRef(props, 'isPublic'))
 		return {
 			...dav,
 		}
@@ -67,6 +68,7 @@ describe('dav composable', () => {
 			propsData: {
 				currentView: 'files',
 				currentPath: '/',
+				isPublic: false,
 			},
 		})
 		// Loading is set to true
@@ -92,6 +94,7 @@ describe('dav composable', () => {
 			propsData: {
 				currentView: 'files',
 				currentPath: '/',
+				isPublic: false,
 			},
 		})
 
@@ -111,6 +114,7 @@ describe('dav composable', () => {
 			propsData: {
 				currentView: 'files',
 				currentPath: '/',
+				isPublic: false,
 			},
 		})
 
@@ -138,6 +142,7 @@ describe('dav composable', () => {
 			propsData: {
 				currentView: 'files',
 				currentPath: '/',
+				isPublic: false,
 			},
 		})
 
@@ -164,12 +169,28 @@ describe('dav composable', () => {
 		nextcloudFiles.davGetClient.mockImplementationOnce(() => client)
 		nextcloudFiles.davResultToNode.mockImplementationOnce((v) => v)
 
-		const { getFile } = useDAVFiles(ref('files'), ref('/'))
+		const { getFile } = useDAVFiles(ref('files'), ref('/'), ref(false))
 
 		const node = await getFile('/some/path')
 		expect(node).toEqual({ path: `${nextcloudFiles.davRootPath}/some/path` })
 		expect(client.stat).toBeCalledWith(`${nextcloudFiles.davRootPath}/some/path`, { details: true })
-		expect(nextcloudFiles.davResultToNode).toBeCalledWith({ path: `${nextcloudFiles.davRootPath}/some/path` })
+		expect(nextcloudFiles.davResultToNode).toBeCalledWith({ path: `${nextcloudFiles.davRootPath}/some/path` }, nextcloudFiles.davRootPath, nextcloudFiles.davRemoteURL)
+	})
+
+	it('createDirectory works', async () => {
+		const client = {
+			stat: vi.fn((v) => ({ data: { path: v } })),
+			createDirectory: vi.fn(() => {}),
+		}
+		nextcloudFiles.davGetClient.mockImplementationOnce(() => client)
+		nextcloudFiles.davResultToNode.mockImplementationOnce((v) => v)
+
+		const { createDirectory } = useDAVFiles(ref('files'), ref('/foo/'), ref(false))
+
+		const node = await createDirectory('my-name')
+		expect(node).toEqual({ path: `${nextcloudFiles.davRootPath}/foo/my-name` })
+		expect(client.stat).toBeCalledWith(`${nextcloudFiles.davRootPath}/foo/my-name`, { details: true })
+		expect(client.createDirectory).toBeCalledWith(`${nextcloudFiles.davRootPath}/foo/my-name`)
 	})
 
 	it('loadFiles work', async () => {
@@ -183,7 +204,7 @@ describe('dav composable', () => {
 
 		const view = ref<'files' | 'recent' | 'favorites'>('files')
 		const path = ref('/')
-		const { loadFiles, isLoading } = useDAVFiles(view, path)
+		const { loadFiles, isLoading } = useDAVFiles(view, path, ref(false))
 
 		expect(isLoading.value).toBe(true)
 		await loadFiles()