Merge pull request #890 from nextcloud/feat/365

Feat: File action to import from Files to Tables

.github/workflows/cypress.yml

@@ -139,6 +139,7 @@ jobs:
           COMMIT_INFO_MESSAGE: ${{ github.event.pull_request.title }}
           COMMIT_INFO_SHA: ${{ github.event.pull_request.head.sha }}
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          CYPRESS_ncVersion: ${{ matrix.server-versions }}
           npm_package_name: ${{ env.APP_NAME }}
 
       - name: Print logs

cypress/e2e/tables-import.cy.js

@@ -5,6 +5,8 @@ describe('Import csv', () => {
 	before(function() {
 		cy.createRandomUser().then(user => {
 			localUser = user
+			cy.login(localUser)
+			cy.uploadFile('test-import.csv', 'text/csv')
 		})
 	})
 
@@ -14,19 +16,20 @@ describe('Import csv', () => {
 	})
 
 	it('Import csv from Files', () => {
-		cy.uploadFile('test-import.csv', 'text/csv')
 		cy.loadTable('Tutorial')
 		cy.clickOnTableThreeDotMenu('Import')
 		cy.get('.modal__content button').contains('Select from Files').click()
 		cy.get('.file-picker__files').contains('test-import').click()
 		cy.get('.file-picker button span').contains('Choose test-import.csv').click()
+		cy.get('.modal__content .import-filename', { timeout: 5000 }).should('be.visible')
 		cy.get('.modal__content button').contains('Import').click()
+
 		cy.get('[data-cy="importResultColumnsFound"]').should('contain.text', '4')
 		cy.get('[data-cy="importResultColumnsMatch"]').should('contain.text', '4')
 		cy.get('[data-cy="importResultColumnsCreated"]').should('contain.text', '0')
 		cy.get('[data-cy="importResultRowsInserted"]').should('contain.text', '3')
-		cy.get('[data-cy="importResultParsingErrors"]').should('not.exist')
-		cy.get('[data-cy="importResultRowErrors"]').should('not.exist')
+		cy.get('[data-cy="importResultParsingErrors"]').should('contain.text', '0')
+		cy.get('[data-cy="importResultRowErrors"]').should('contain.text', '0')
 	})
 
 	it('Import csv from device', () => {
@@ -35,12 +38,70 @@ describe('Import csv', () => {
 		cy.get('.modal__content button').contains('Upload from device').click()
 		cy.get('input[type="file"]').selectFile('cypress/fixtures/test-import.csv', { force: true })
 		cy.get('.modal__content button').contains('Import').click()
-		cy.get('[data-cy="importResultColumnsFound"]').should('contain.text', '4')
+
+		cy.get('[data-cy="importResultColumnsFound"]', { timeout: 20000 }).should('contain.text', '4')
 		cy.get('[data-cy="importResultColumnsMatch"]').should('contain.text', '4')
 		cy.get('[data-cy="importResultColumnsCreated"]').should('contain.text', '0')
 		cy.get('[data-cy="importResultRowsInserted"]').should('contain.text', '3')
-		cy.get('[data-cy="importResultParsingErrors"]').should('not.exist')
-		cy.get('[data-cy="importResultRowErrors"]').should('not.exist')
+		cy.get('[data-cy="importResultParsingErrors"]').should('contain.text', '0')
+		cy.get('[data-cy="importResultRowErrors"]').should('contain.text', '0')
 	})
 
 })
+
+// only run the following tests if not testing on v26 or v27
+// the files api in use is only supported on v28+
+if (!['stable26', 'stable27'].includes(Cypress.env('ncVersion'))) {
+	describe('Import csv from Files file action', () => {
+
+		before(function() {
+			cy.createRandomUser().then(user => {
+				localUser = user
+				cy.login(localUser)
+				cy.uploadFile('test-import.csv', 'text/csv')
+			})
+		})
+
+		beforeEach(function() {
+			cy.login(localUser)
+			cy.visit('apps/files/files')
+		})
+
+		it('Import to new table', () => {
+			cy.get('[data-cy-files-list-row-name="test-import.csv"] [data-cy-files-list-row-actions] .action-item button').click()
+			cy.get('[data-cy-files-list-row-action="import-to-tables"]').click()
+
+			cy.intercept({ method: 'POST', url: '**/apps/tables/import/table/*'}).as('importNewTableReq')
+			cy.get('[data-cy="fileActionImportButton"]').click()
+			cy.wait('@importNewTableReq').its('response.statusCode').should('equal', 200)
+
+			cy.get('[data-cy="importResultColumnsFound"]').should('contain.text', '4')
+			cy.get('[data-cy="importResultColumnsMatch"]').should('contain.text', '0')
+			cy.get('[data-cy="importResultColumnsCreated"]').should('contain.text', '4')
+			cy.get('[data-cy="importResultRowsInserted"]').should('contain.text', '3')
+			cy.get('[data-cy="importResultParsingErrors"]').should('contain.text', '0')
+			cy.get('[data-cy="importResultRowErrors"]').should('contain.text', '0')
+		})
+
+		it('Import to existing table', () => {
+			cy.get('[data-cy-files-list-row-name="test-import.csv"] [data-cy-files-list-row-actions] .action-item button').click()
+			cy.get('[data-cy-files-list-row-action="import-to-tables"]').click()
+
+			cy.get('[data-cy="importAsNewTableSwitch"]').click()
+			cy.get('[data-cy="selectExistingTableDropdown"]').type('tutorial')
+			cy.get('.name-parts').click()
+
+			cy.intercept({ method: 'POST', url: '**/apps/tables/import/table/*'}).as('importExistingTableReq')
+			cy.get('[data-cy="fileActionImportButton"]').click()
+			cy.wait('@importExistingTableReq').its('response.statusCode').should('equal', 200)
+
+			cy.get('[data-cy="importResultColumnsFound"]').should('contain.text', '4')
+			cy.get('[data-cy="importResultColumnsMatch"]').should('contain.text', '4')
+			cy.get('[data-cy="importResultColumnsCreated"]').should('contain.text', '0')
+			cy.get('[data-cy="importResultRowsInserted"]').should('contain.text', '3')
+			cy.get('[data-cy="importResultParsingErrors"]').should('contain.text', '0')
+			cy.get('[data-cy="importResultRowErrors"]').should('contain.text', '0')
+		})
+
+	})
+}

lib/AppInfo/Application.php

@@ -6,6 +6,7 @@
 use OCA\Analytics\Datasource\DatasourceEvent;
 use OCA\Tables\Capabilities;
 use OCA\Tables\Listener\AnalyticsDatasourceListener;
+use OCA\Tables\Listener\LoadAdditionalListener;
 use OCA\Tables\Listener\TablesReferenceListener;
 use OCA\Tables\Listener\UserDeletedListener;
 use OCA\Tables\Reference\ContentReferenceProvider;
@@ -17,10 +18,12 @@
 use OCP\AppFramework\Bootstrap\IBootstrap;
 use OCP\AppFramework\Bootstrap\IRegistrationContext;
 use OCP\Collaboration\Reference\RenderReferenceEvent;
+use OCP\Collaboration\Resources\LoadAdditionalScriptsEvent;
 use OCP\IConfig;
 use OCP\Server;
 use OCP\User\Events\BeforeUserDeletedEvent;
 use Psr\Container\ContainerExceptionInterface;
+
 use Psr\Container\NotFoundExceptionInterface;
 
 class Application extends App implements IBootstrap {
@@ -45,6 +48,8 @@ public function register(IRegistrationContext $context): void {
 		$context->registerEventListener(DatasourceEvent::class, AnalyticsDatasourceListener::class);
 		$context->registerEventListener(RenderReferenceEvent::class, TablesReferenceListener::class);
 
+		$context->registerEventListener(LoadAdditionalScriptsEvent::class, LoadAdditionalListener::class);
+
 		$context->registerSearchProvider(SearchTablesProvider::class);
 
 		try {

lib/Listener/LoadAdditionalListener.php

@@ -0,0 +1,20 @@
+<?php
+
+namespace OCA\Tables\Listener;
+
+use OCA\Tables\AppInfo\Application;
+use OCP\Collaboration\Resources\LoadAdditionalScriptsEvent;
+use OCP\EventDispatcher\Event;
+use OCP\EventDispatcher\IEventListener;
+use OCP\Util;
+
+/** @template-implements IEventListener<LoadAdditionalScriptsEvent> */
+class LoadAdditionalListener implements IEventListener {
+	public function handle(Event $event): void {
+		if (!($event instanceof LoadAdditionalScriptsEvent)) {
+			return;
+		}
+
+		Util::addInitScript(Application::APP_ID, 'tables-files');
+	}
+}

package.json

@@ -24,10 +24,12 @@
     "stylelint:fix": "stylelint 'css/*.css' 'css/*.scss' 'src/**/*.scss' 'src/**/*.vue' --fix"
   },
   "dependencies": {
+    "@mdi/svg": "^7.4.47",
     "@nextcloud/auth": "^2.2.1",
     "@nextcloud/axios": "^2.4.0",
     "@nextcloud/dialogs": "^4.2.6",
     "@nextcloud/event-bus": "^3.1.0",
+    "@nextcloud/files": "^3.1.0",
     "@nextcloud/l10n": "^2.2.0",
     "@nextcloud/moment": "^1.3.1",
     "@nextcloud/router": "^3.0.0",

src/file-actions.js

@@ -0,0 +1,34 @@
+import { FileAction, registerFileAction } from '@nextcloud/files'
+import { spawnDialog } from '@nextcloud/dialogs'
+// eslint-disable-next-line import/no-unresolved
+import tablesIcon from '@mdi/svg/svg/table-large.svg?raw'
+
+__webpack_nonce__ = btoa(OC.requestToken) // eslint-disable-line
+__webpack_public_path__ = OC.linkTo('tables', 'js/') // eslint-disable-line
+
+const validMimeTypes = [
+	'text/csv',
+	'text/html',
+	'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+	'application/vnd.ms-excel',
+]
+
+const fileAction = new FileAction({
+	id: 'import-to-tables',
+	displayName: () => t('tables', 'Import into Tables'),
+	iconSvgInline: () => tablesIcon,
+
+	enabled: (files) => {
+		const file = files[0]
+
+		return file.type === 'file' && validMimeTypes.includes(file.mime)
+	},
+
+	exec: async (file) => {
+		const { default: FileActionImport } = await import('./modules/modals/FileActionImport.vue')
+		spawnDialog(FileActionImport, { file })
+		return null
+	},
+})
+
+registerFileAction(fileAction)