enh(offline): disable file uploads when offline

Signed-off-by: Max <max@nextcloud.com>

src/apis/connect.ts

@@ -6,6 +6,7 @@
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 import type { Connection } from '../composables/useConnection.js'
+import type { Document, Session } from '../services/SyncService.js'
 
 export interface OpenParams {
 	fileId?: number
@@ -16,7 +17,13 @@ export interface OpenParams {
 }
 
 export interface OpenData {
-	document: { baseVersionEtag: string }
+	document: Document
+	session: Session
+	readOnly: boolean
+	content: string
+	documentState?: string
+	lock?: object
+	hasOwner: boolean
 }
 
 /**

src/components/Menu/ActionAttachmentUpload.vue

@@ -67,8 +67,9 @@ import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActions from '@nextcloud/vue/components/NcActions'
 import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
+import { useConnection } from '../../composables/useConnection.ts'
 import { useEditorFlags } from '../../composables/useEditorFlags.ts'
-import { useSyncService } from '../../composables/useSyncService.ts'
+import { useNetworkState } from '../../composables/useNetworkState.ts'
 import { useEditorUpload } from '../Editor.provider.ts'
 import {
 	useActionAttachmentPromptMixin,
@@ -103,8 +104,9 @@ export default {
 	],
 	setup() {
 		const { isPublic } = useEditorFlags()
-		const { syncService } = useSyncService()
-		return { ...BaseActionEntry.setup(), isPublic, syncService }
+		const { openData } = useConnection()
+		const { networkOnline } = useNetworkState()
+		return { ...BaseActionEntry.setup(), isPublic, networkOnline, openData }
 	},
 	computed: {
 		icon() {
@@ -117,15 +119,19 @@ export default {
 			return loadState('files', 'templates', [])
 		},
 		isUploadDisabled() {
-			return !this.syncService.hasOwner
+			return !this.openData?.hasOwner || !this.networkOnline
 		},
 		menuTitle() {
-			return this.isUploadDisabled
-				? t(
-						'text',
-						'Attachments cannot be created or uploaded because this file is shared from another cloud.',
-					)
-				: this.actionEntry.label
+			if (!this.networkOnline) {
+				return t('text', 'Disabled because you are currently offline.')
+			}
+			if (!this.openData?.hasOwner) {
+				return t(
+					'text',
+					'Attachments cannot be created or uploaded because this file is shared from another cloud.',
+				)
+			}
+			return this.actionEntry.label
 		},
 	},
 	methods: {

src/components/SuggestionsBar.vue

@@ -62,8 +62,9 @@ import { generateUrl } from '@nextcloud/router'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import { getLinkWithPicker } from '@nextcloud/vue/dist/Components/NcRichText.js'
 import { Document, Shape, Table as TableIcon, Upload } from '../components/icons.js'
+import { useConnection } from '../composables/useConnection.ts'
 import { useEditor } from '../composables/useEditor.ts'
-import { useSyncService } from '../composables/useSyncService.ts'
+import { useNetworkState } from '../composables/useNetworkState.ts'
 import { buildFilePicker } from '../helpers/filePicker.js'
 import { isMobileDevice } from '../helpers/isMobileDevice.js'
 import { useFileMixin } from './Editor.provider.ts'
@@ -83,12 +84,13 @@ export default {
 
 	setup() {
 		const { editor } = useEditor()
-		const { syncService } = useSyncService()
+		const { openData } = useConnection()
+		const { networkOnline } = useNetworkState()
 		return {
 			editor,
 			isMobileDevice,
-			syncService,
-			t,
+			networkOnline,
+			openData,
 		}
 	},
 
@@ -104,16 +106,19 @@ export default {
 			return this.$file?.relativePath ?? '/'
 		},
 		isUploadDisabled() {
-			return !this.syncService.hasOwner
+			return !this.openData?.hasOwner || !this.networkOnline
 		},
 		uploadTitle() {
-			return (
-				this.isUploadDisabled
-				&& t(
+			if (!this.networkOnline) {
+				return t('text', 'Disabled because you are currently offline.')
+			}
+			if (this.isUploadDisabled) {
+				return t(
 					'text',
 					'Uploading attachments is disabled because the file is shared from another cloud.',
 				)
-			)
+			}
+			return ''
 		},
 	},
 
@@ -204,6 +209,7 @@ export default {
 			const EMPTY_DOCUMENT_SIZE = 4
 			this.isEmptyContent = editor.state.doc.nodeSize <= EMPTY_DOCUMENT_SIZE
 		},
+		t,
 	},
 }
 </script>

src/composables/useConnection.ts

@@ -4,7 +4,7 @@
  */
 
 import { inject, provide, shallowRef, type InjectionKey, type ShallowRef } from 'vue'
-import { open } from '../apis/connect'
+import { open, type OpenData } from '../apis/connect'
 import type { Document, Session } from '../services/SyncService.js'
 
 export interface Connection {
@@ -30,6 +30,10 @@ export const connectionKey = Symbol('text:connection') as InjectionKey<
 	ShallowRef<Connection | undefined>
 >
 
+export const openDataKey = Symbol('text:opendata') as InjectionKey<
+	ShallowRef<OpenData | undefined>
+>
+
 /**
  * Handle the connection to the text api and provide it to child components
  * @param props Props of the editor component.
@@ -46,6 +50,7 @@ export function provideConnection(props: {
 }) {
 	const baseVersionEtag = shallowRef<string | undefined>(undefined)
 	const connection = shallowRef<Connection | undefined>(undefined)
+	const openData = shallowRef<OpenData | undefined>(undefined)
 	const openConnection = async () => {
 		const guestName = localStorage.getItem('nick') ?? ''
 		const { connection: opened, data } =
@@ -59,15 +64,18 @@ export function provideConnection(props: {
 			}))
 		baseVersionEtag.value = data.document.baseVersionEtag
 		connection.value = opened
+		openData.value = data
 		return data
 	}
 	provide(connectionKey, connection)
-	return { connection, openConnection, baseVersionEtag }
+	provide(openDataKey, openData)
+	return { connection, openConnection, openData }
 }
 
 export const useConnection = () => {
 	const connection = inject(connectionKey)
-	return { connection }
+	const openData = inject(openDataKey)
+	return { connection, openData }
 }
 
 /**

src/services/SessionConnection.js

@@ -21,18 +21,15 @@ export class SessionConnection {
 	#document
 	#session
 	#readOnly
-	#hasOwner
 	connection
 
 	constructor(data, connection) {
-		const { document, session, readOnly, content, documentState, hasOwner } =
-			data
+		const { document, session, readOnly, content, documentState } = data
 		this.#document = document
 		this.#session = session
 		this.#readOnly = readOnly
 		this.#content = content
 		this.#documentState = documentState
-		this.#hasOwner = hasOwner
 		this.connection = connection
 		this.isPublic = !!connection.shareToken
 		this.closed = false
@@ -63,10 +60,6 @@ export class SessionConnection {
 		return this.closed
 	}
 
-	get hasOwner() {
-		return this.#hasOwner
-	}
-
 	get #defaultParams() {
 		return {
 			documentId: this.#document.id,

src/services/SyncService.ts

@@ -141,10 +141,6 @@ class SyncService {
 		return this.sessionConnection?.state.document.readOnly
 	}
 
-	get hasOwner() {
-		return this.sessionConnection?.hasOwner
-	}
-
 	get guestName() {
 		return this.sessionConnection?.session.guestName
 	}

src/tests/services/SyncService.spec.ts

@@ -16,30 +16,46 @@ const connection = {
 	baseVersionEtag: 'etag',
 }
 const initialData = {
-	session: { id: 345 },
-	document: { id: 123, baseVersionEtag: 'etag' },
+	session: {
+		id: 345,
+		userId: 'me',
+		token: 'shareToken',
+		color: '#abcabc',
+		lastContact: Date.now(),
+		documentId: 123,
+		displayName: 'My Name',
+		lastAwarenessMessage: 'hi',
+		clientId: 1,
+	},
+	document: {
+		id: 123,
+		baseVersionEtag: 'etag',
+		initialVersion: 0,
+		lastSavedVersion: 345,
+		lastSavedVersionTime: Date.now(),
+	},
 	readOnly: false,
 	content: '',
 	hasOwner: true,
 }
 
-const openData = { connection, data: initialData }
+const openResult = { connection, data: initialData }
 
 describe('Sync service', () => {
 	it('opens a connection', async () => {
-		const { connection, openConnection } = provideConnection({
+		const { connection, openConnection, openData } = provideConnection({
 			fileId: 123,
 			relativePath: './',
 		})
 		vi.mock('../../apis/connect')
-		vi.mocked(connect.open).mockResolvedValue(openData)
+		vi.mocked(connect.open).mockResolvedValue(openResult)
 		const openHandler = vi.fn()
 		const service = new SyncService({ connection, openConnection })
 		service.on('opened', openHandler)
 		await service.open()
 		expect(openHandler).toHaveBeenCalledWith(
 			expect.objectContaining({ session: initialData.session }),
 		)
-		expect(service.hasOwner).toBe(true)
+		expect(openData.value?.hasOwner).toBe(true)
 	})
 })