chore: Migrate package to use vite for building and use Vue for UI

Signed-off-by: Ferdinand Thiessen <[email protected]>

.eslintrc.json

@@ -0,0 +1,12 @@
+{
+	"extends": [
+		"@nextcloud/eslint-config/typescript"
+	],
+	"rules": {
+		// Allow shallow import of @vue/test-utils in order to be able to use it in
+		// the src folder
+		"n/no-unpublished-import": ["error", {
+			"allowModules": ["@vue/test-utils", "@testing-library/vue", "regenerator-runtime"]
+		}]
+	}
+}

cypress.config.ts

@@ -1,13 +1,13 @@
-
 import {
 	configureNextcloud,
 	startNextcloud,
 	stopNextcloud,
 	waitOnNextcloud,
 } from './cypress/dockerNode'
+// eslint-disable-next-line n/no-extraneous-import
 import { defineConfig } from 'cypress'
 
-import browserify from '@cypress/browserify-preprocessor'
+import vitePreprocessor from 'cypress-vite'
 import getCompareSnapshotsPlugin from 'cypress-visual-regression/dist/plugin'
 
 export default defineConfig({
@@ -45,7 +45,7 @@ export default defineConfig({
 		// You may want to clean this up later by importing these.
 		async setupNodeEvents(on, config) {
 			// Fix browserslist extend https://github.com/cypress-io/cypress/issues/2983#issuecomment-570616682
-			on('file:preprocessor', browserify({ typescript: require.resolve('typescript') }))
+			on('file:preprocessor', vitePreprocessor({ configFile: false }))
 
 			// Enable the snapshot compare plugin
 			getCompareSnapshotsPlugin(on, config)

cypress/dockerNode.ts

@@ -27,12 +27,13 @@ import Docker from 'dockerode'
 import path from 'path'
 import waitOn from 'wait-on'
 
-import pkg from '../package.json'
+import { fileURLToPath } from 'url';
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
 
 export const docker = new Docker()
 
 const APP_PATH = path.resolve(__dirname, '../')
-const APP_NAME = pkg.name
+const APP_NAME = 'activity'
 
 const CONTAINER_NAME = 'nextcloud-cypress-tests-' + APP_NAME
 const SERVER_IMAGE = 'ghcr.io/nextcloud/continuous-integration-shallow-server'

cypress/tsconfig.json

@@ -1,4 +1,11 @@
 {
 	"extends": "../tsconfig.json",
 	"include": ["./**/*.ts"],
+	"compilerOptions": {
+		"types": [
+			"cypress",
+			"dockerode",
+			"node"
+		]
+	}
 }

lib/Controller/ActivitiesController.php

@@ -3,6 +3,7 @@
  * @copyright Copyright (c) 2016, ownCloud, Inc.
  *
  * @author Joas Schilling <[email protected]>
+ * @author Ferdinand Thiessen <[email protected]>
  *
  * @license AGPL-3.0
  *
@@ -24,24 +25,31 @@
 
 use OCA\Activity\Data;
 use OCA\Activity\Event\LoadAdditionalScriptsEvent;
-use OCA\Activity\Navigation;
+use OCP\Activity\IFilter;
+use OCP\Activity\IManager;
 use OCP\AppFramework\Controller;
 use OCP\AppFramework\Http\TemplateResponse;
+use OCP\AppFramework\Services\IInitialState;
 use OCP\EventDispatcher\IEventDispatcher;
 use OCP\IConfig;
 use OCP\IL10N;
 use OCP\IRequest;
+use OCP\IURLGenerator;
 
 class ActivitiesController extends Controller {
 
 	public function __construct(
 		string $appName,
 		IRequest $request,
-		protected IConfig $config,
-		protected Data $data,
-		protected Navigation $navigation,
-		protected IEventDispatcher $eventDispatcher,
-		private IL10N $l10n) {
+		private string $userId,
+		private IConfig $config,
+		private Data $data,
+		private IL10N $l10n,
+		private IEventDispatcher $eventDispatcher,
+		private IInitialState $initialState,
+		private IURLGenerator $urlGenerator,
+		private IManager $activityManager,
+		) {
 		parent::__construct($appName, $request);
 	}
 
@@ -59,11 +67,64 @@ public function showList(string $filter = 'all'): TemplateResponse {
 		$this->eventDispatcher->dispatchTyped($event);
 		$this->eventDispatcher->dispatch(LoadAdditionalScriptsEvent::EVENT_ENTITY, $event);
 
-		return new TemplateResponse('activity', 'stream.body', [
-			'appNavigation' => $this->navigation->getTemplate($filter),
-			'avatars' => $this->config->getSystemValue('enable_avatars', true) ? 'yes' : 'no',
-			'filter' => $filter,
-			'pageTitle' => $this->l10n->t('Activity')
+		$this->initialState->provideInitialState('settings', [
+			'enableAvatars' => $this->config->getSystemValue('enable_avatars', true),
+			'personalSettingsLink' => $this->getPersonalSettingsLink(),
+			'rssLink' => $this->getRSSLink(),
 		]);
+		$this->initialState->provideInitialState('filter', $filter);
+		$this->initialState->provideInitialState('navigationList', $this->getLinkList());
+
+		\OCP\Util::addScript($this->appName, 'activity-app');
+		\OCP\Util::addStyle($this->appName, 'style');
+
+		return new TemplateResponse($this->appName, 'app-main');
+	}
+
+	/**
+	 * Get link for personal settings
+	 */
+	protected function getPersonalSettingsLink(): string {
+		return $this->urlGenerator->linkToRouteAbsolute('settings.PersonalSettings.index', ['section' => 'notifications']);
+	}
+
+	/**
+	 * Link to RSS feed if there is a RSS token, empty string otherwise
+	 */
+	protected function getRSSLink(): string {
+		$rssToken = $this->config->getUserValue($this->userId, 'activity', 'rsstoken');
+		if ($rssToken) {
+			return $this->urlGenerator->linkToRouteAbsolute('activity.Feed.show', ['token' => $rssToken]);
+		} else {
+			return '';
+		}
+	}
+
+	/**
+	 * Get all items for the users we want to send an email to
+	 *
+	 * @return array Notification data (user => array of rows from the table)
+	 */
+	protected function getLinkList(): array {
+		$filters = $this->activityManager->getFilters();
+		usort($filters, static function (IFilter $a, IFilter $b) {
+			if ($a->getPriority() === $b->getPriority()) {
+				return (int) ($a->getIdentifier() > $b->getIdentifier());
+			}
+
+			return (int) ($a->getPriority() > $b->getPriority());
+		});
+
+		$entries = [];
+		foreach ($filters as $filter) {
+			$entries[] = [
+				'id' => $filter->getIdentifier(),
+				'icon' => $filter->getIcon(),
+				'name' => $filter->getName(),
+				'url' => $this->urlGenerator->linkToRoute('activity.Activities.showList', ['filter' => $filter->getIdentifier()]),
+			];
+		}
+
+		return $entries;
 	}
 }