Merge pull request #4965 from nextcloud/feature/bring-back-rich-works…

…pace-creation

cypress/support/commands.js

@@ -451,8 +451,16 @@ Cypress.Commands.add('showHiddenFiles', (value = true) => {
 })
 
 Cypress.Commands.add('createDescription', (folder) => {
-	cy.uploadFile('empty.md', 'text/markdown', `${folder}/Readme.md`)
+	const url = '**/remote.php/dav/files/**'
+	cy.intercept({ method: 'PUT', url })
+		.as('addDescription')
+
 	cy.visit(`apps/files?dir=/${encodeURIComponent(folder)}`)
+	cy.get('[data-cy-files-list] tr[data-cy-files-list-row-name="Readme.md"]').should('not.exist')
+	cy.get('[data-cy-upload-picker] button.action-item__menutoggle').click()
+	cy.get('li.upload-picker__menu-entry button').contains('Add description').click()
+
+	cy.wait('@addDescription')
 })
 
 Cypress.on(

src/components/Menu/ActionList.vue

@@ -37,8 +37,8 @@
 			<component :is="icon" :key="iconKey" />
 		</template>
 		<ActionSingle v-for="child in children"
-			:key="`child-${child.key}`"
 			:id="`${$menuID}-child-${child.key}`"
+			:key="`child-${child.key}`"
 			is-item
 			:action-entry="child"
 			v-on="$listeners"

src/helpers/files.js

@@ -32,6 +32,7 @@ import store from '../store/index.js'
 import { getCurrentUser } from '@nextcloud/auth'
 import { showSuccess, showError } from '@nextcloud/dialogs'
 import axios from '@nextcloud/axios'
+import { dirname } from 'path'
 
 import FilePlusSvg from '@mdi/svg/svg/file-plus.svg'
 
@@ -147,7 +148,9 @@ const registerFileActionFallback = () => {
 
 }
 
-const addMenuRichWorkspace = () => {
+let newWorkspaceCreated = false
+
+export const addMenuRichWorkspace = () => {
 	const descriptionFile = t('text', 'Readme') + '.' + loadState('text', 'default_file_extension')
 	addNewFileMenuEntry({
 		id: 'rich-workspace-init',
@@ -177,19 +180,23 @@ const addMenuRichWorkspace = () => {
 			})
 			const fileid = parseInt(response.headers['oc-fileid'])
 			const file = new File({
-				source,
+				source: context.source + '/' + encodeURIComponent(descriptionFile),
 				id: fileid,
 				mtime: new Date(),
 				mime: 'text/markdown',
 				owner: getCurrentUser()?.uid || null,
 				permissions: Permission.ALL,
 				root: context?.root || '/files/' + getCurrentUser()?.uid,
 			})
-			context._children.push(file.fileid)
 
 			showSuccess(t('text', 'Created "{name}"', { name: descriptionFile }))
+
+			if (contentNames.length === 0) {
+				// We currently have no way to reliably trigger the filelist header rendering
+				// When starting off in a new empty folder the header will only be rendered on a new PROPFIND
+				newWorkspaceCreated = file
+			}
 			emit('files:node:created', file)
-			emit('Text::showRichWorkspace', { autofocus: true })
 		},
 	})
 }
@@ -205,8 +212,9 @@ export const FilesWorkspaceHeader = new Header({
 	},
 
 	render(el, folder, view) {
-		addMenuRichWorkspace()
-		const hasRichWorkspace = !!folder.attributes['rich-workspace-file']
+		const hasRichWorkspace = !!folder.attributes['rich-workspace-file'] || !!newWorkspaceCreated
+		const path = newWorkspaceCreated ? dirname(newWorkspaceCreated.path) : folder.path
+		const content = newWorkspaceCreated ? '' : folder.attributes['rich-workspace']
 
 		import('vue').then((module) => {
 			el.id = 'files-workspace-wrapper'
@@ -220,16 +228,17 @@ export const FilesWorkspaceHeader = new Header({
 			const View = Vue.extend(RichWorkspace)
 			vm = new View({
 				propsData: {
-					path: folder.path,
+					path,
 					hasRichWorkspace,
-					content: folder.attributes['rich-workspace'],
+					content,
 				},
 				store,
 			}).$mount(el)
 		})
 	},
 
 	updated(folder, view) {
+		newWorkspaceCreated = false
 		const hasRichWorkspace = !!folder.attributes['rich-workspace-file']
 		vm.path = folder.path
 		vm.hasRichWorkspace = hasRichWorkspace

src/init.js

@@ -1,6 +1,6 @@
 import { registerFileListHeaders, registerDavProperty } from '@nextcloud/files'
 import { loadState } from '@nextcloud/initial-state'
-import { FilesWorkspaceHeader } from './helpers/files.js'
+import { addMenuRichWorkspace, FilesWorkspaceHeader } from './helpers/files.js'
 import { linkTo } from '@nextcloud/router'
 
 __webpack_nonce__ = window.btoa(OC.requestToken) // eslint-disable-line
@@ -12,5 +12,6 @@ registerDavProperty('nc:rich-workspace', { nc: 'http://nextcloud.org/ns' })
 registerDavProperty('nc:rich-workspace-file', { nc: 'http://nextcloud.org/ns' })
 
 if (workspaceAvailable) {
+	addMenuRichWorkspace()
 	registerFileListHeaders(FilesWorkspaceHeader)
 }

src/views/RichWorkspace.vue

@@ -21,8 +21,7 @@
   -->
 
 <template>
-	<div v-if="enabled"
-		v-show="hasRichWorkspace"
+	<div v-if="enabled && file !== null"
 		id="rich-workspace"
 		:class="{'focus': focus, 'dark': darkTheme }">
 		<RichTextReader v-if="!loaded || !ready" :content="content" class="rich-workspace--preview" />
@@ -108,11 +107,12 @@ export default {
 		},
 	},
 	mounted() {
-		if (this.enabled) {
+		if (this.enabled && this.hasRichWorkspace) {
 			this.getFileInfo()
 		}
 		subscribe('Text::showRichWorkspace', this.showRichWorkspace)
 		subscribe('Text::hideRichWorkspace', this.hideRichWorkspace)
+		subscribe('files:node:created', this.onFileCreated)
 		subscribe('files:node:deleted', this.onFileDeleted)
 		subscribe('files:node:renamed', this.onFileRenamed)
 
@@ -122,6 +122,7 @@ export default {
 	beforeDestroy() {
 		unsubscribe('Text::showRichWorkspace', this.showRichWorkspace)
 		unsubscribe('Text::hideRichWorkspace', this.hideRichWorkspace)
+		unsubscribe('files:node:created', this.onFileCreated)
 		unsubscribe('files:node:deleted', this.onFileDeleted)
 		unsubscribe('files:node:renamed', this.onFileRenamed)
 
@@ -144,9 +145,10 @@ export default {
 			})
 		},
 		getFileInfo(autofocus) {
-			if (!this.hasRichWorkspace) {
+			if (!this.enabled) {
 				return
 			}
+			this.file = null
 			this.ready = false
 			this.loaded = true
 			this.autofocus = false
@@ -208,6 +210,11 @@ export default {
 			// schedule to normal behaviour
 			this.$_timeoutAutohide = setTimeout(this.onTimeoutAutohide, 7000) // 7s
 		},
+		onFileCreated(node) {
+			if (SUPPORTED_STATIC_FILENAMES.includes(node.basename)) {
+				this.showRichWorkspace()
+			}
+		},
 		onFileDeleted(node) {
 			if (node.path === this.file.path) {
 				this.hideRichWorkspace()