Merge pull request #1162 from nextcloud/backport/1145/stable29

[stable29] feat: Add Nextcloud Hub changelog

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-	"extends": ["@nextcloud"]
+	"extends": ["@nextcloud/eslint-config/typescript"]
 }

README.md

@@ -24,3 +24,14 @@ Make sure you have `node`, `npm` and `make` installed on your system.
 3. 🏗 To build the Javascript after you have made changes, run `npm run build`
 4. ✅ Enable the app through the app management of your Nextcloud
 5. 🎉 Partytime! Help fix [some issues](https://github.com/nextcloud/firstrunwizard/issues) and [review pull requests](https://github.com/nextcloud/firstrunwizard/pulls) 👍
+
+### Add Nextcloud Hub release notes
+
+1. Open the `src/hub-release.ts` file
+2. Adjust the `version` property to reflect the new Hub release version
+3. Adjust the `link` (e.g. blog post)
+4. Add `releaseNotes`, this is an array of strings, for localization those are translated using `t('firstrunwizard', 'YOUR MESSAGE')`
+5. Change the `videoAltText` for the Hub release animation if needed (alternative text for accessibility)
+6. Adjust the `shareSubject` which is used when users share their thoughts about the release on social media
+7. Replace `img/nextcloudHub.mp4` and `img/nextcloudHub.webm` (VP9) with updated animations
+8. Update the current changelog version in `lib/Constants.php`

appinfo/info.xml

@@ -36,7 +36,7 @@ The First run wizard can be customized to meet specific design goals, or to chan
 	<navigations>
 		<navigation>
 			<id>firstrunwizard_about</id>
-			<name>About</name>
+			<name>About &amp; What's new</name>
 			<icon>info.svg</icon>
 			<order>99990</order>
 			<type>settings</type>

js/firstrunwizard-about.mjs

@@ -1,8 +1,8 @@
 function __vite__mapDeps(indexes) {
   if (!__vite__mapDeps.viteFileDeps) {
-    __vite__mapDeps.viteFileDeps = [OC.filePath('firstrunwizard', '', 'js/main-grmXwU92.mjs'),OC.filePath('firstrunwizard', '', 'css/firstrunwizard-main.css')]
+    __vite__mapDeps.viteFileDeps = [OC.filePath('firstrunwizard', '', 'js/main-rS92LHob.mjs'),OC.filePath('firstrunwizard', '', 'css/firstrunwizard-main.css')]
   }
   return indexes.map((i) => __vite__mapDeps.viteFileDeps[i])
 }
 /*! third party licenses: js/vendor.LICENSE.txt */
-import{_ as i}from"./modulepreload-polyfill-DDskOgo1.mjs";document.addEventListener("DOMContentLoaded",function(){const o=document.querySelector("#firstrunwizard_about button"),t=()=>{document.querySelector("#firstrunwizard_about button").addEventListener("click",async function(e){var n;e.stopPropagation(),e.preventDefault();const r=(n=document.querySelector('[aria-controls="header-menu-user-menu"]'))!=null?n:void 0,{open:u}=await i(()=>import("./main-grmXwU92.mjs"),__vite__mapDeps([0,1]),import.meta.url);u(r),OC.hideMenus(()=>!1)})};o?t():window._nc_event_bus.subscribe("core:user-menu:mounted",t)});
+import{_ as i}from"./modulepreload-polyfill-DDskOgo1.mjs";document.addEventListener("DOMContentLoaded",function(){const o=document.querySelector("#firstrunwizard_about button"),t=()=>{document.querySelector("#firstrunwizard_about button").addEventListener("click",async function(e){var n;e.stopPropagation(),e.preventDefault();const r=(n=document.querySelector('[aria-controls="header-menu-user-menu"]'))!=null?n:void 0,{open:u}=await i(()=>import("./main-rS92LHob.mjs"),__vite__mapDeps([0,1]),import.meta.url);u(r),OC.hideMenus(()=>!1)})};o?t():window._nc_event_bus.subscribe("core:user-menu:mounted",t)});

js/firstrunwizard-activate.mjs

@@ -1,8 +1,8 @@
 function __vite__mapDeps(indexes) {
   if (!__vite__mapDeps.viteFileDeps) {
-    __vite__mapDeps.viteFileDeps = [OC.filePath('firstrunwizard', '', 'js/main-grmXwU92.mjs'),OC.filePath('firstrunwizard', '', 'css/firstrunwizard-main.css')]
+    __vite__mapDeps.viteFileDeps = [OC.filePath('firstrunwizard', '', 'js/main-rS92LHob.mjs'),OC.filePath('firstrunwizard', '', 'css/firstrunwizard-main.css')]
   }
   return indexes.map((i) => __vite__mapDeps.viteFileDeps[i])
 }
 /*! third party licenses: js/vendor.LICENSE.txt */
-import{_ as t}from"./modulepreload-polyfill-DDskOgo1.mjs";document.addEventListener("DOMContentLoaded",async function(){(await t(()=>import("./main-grmXwU92.mjs"),__vite__mapDeps([0,1]),import.meta.url)).open()});
+import{_ as t}from"./modulepreload-polyfill-DDskOgo1.mjs";document.addEventListener("DOMContentLoaded",async function(){(await t(()=>import("./main-rS92LHob.mjs"),__vite__mapDeps([0,1]),import.meta.url)).open()});

js/vendor.LICENSE.txt

@@ -12,6 +12,10 @@ license: MIT
 version: 0.1.5
 license: Apache-2.0
 
+@mdi/js
+version: 7.4.47
+license: Apache-2.0
+
 @nextcloud/auth
 version: 2.2.1
 license: GPL-3.0-or-later
@@ -200,10 +204,6 @@ vue-demi
 version: 0.14.7
 license: MIT
 
-vue-material-design-icons
-version: 5.3.0
-license: MIT
-
 vue2-datepicker
 version: 3.11.1
 license: MIT

lib/Constants.php

@@ -0,0 +1,32 @@
+<?php
+/**
+ * @copyright Copyright (c) 2024 Ferdinand Thiessen <[email protected]>
+ *
+ * @author Ferdinand Thiessen <[email protected]>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+namespace OCA\FirstRunWizard;
+
+class Constants {
+	/**
+	 * Version for which the latest changelog entries are available
+	 * This is used to decide if we show the wizard for users on an update
+	 */
+	public const CHANGELOG_VERSION = '29.0.0';
+}

lib/Controller/WizardController.php

@@ -42,7 +42,12 @@ public function __construct(
 	 * @return DataResponse
 	 */
 	public function disable() {
-		$this->config->setUserValue($this->userId, 'firstrunwizard', 'show', '0');
+		// get the current Nextcloud version
+		$version = \OCP\Util::getVersion();
+		// we only use major.minor.patch
+		array_splice($version, 3);
+		// Set "show" to current version to only show on update
+		$this->config->setUserValue($this->userId, 'firstrunwizard', 'show', implode('.', $version));
 		return new DataResponse();
 	}
 }

lib/Listener/BeforeTemplateRenderedListener.php

@@ -27,6 +27,7 @@
 namespace OCA\FirstRunWizard\Listener;
 
 use OCA\FirstRunWizard\AppInfo\Application;
+use OCA\FirstRunWizard\Constants;
 use OCA\FirstRunWizard\Notification\AppHint;
 use OCP\AppFramework\Http\Events\BeforeTemplateRenderedEvent;
 use OCP\AppFramework\Services\IAppConfig;
@@ -73,9 +74,19 @@ public function handle(Event $event): void {
 		}
 
 		if ($this->appConfig->getAppValueBool('wizard_enabled', true)) {
-			if ($this->config->getUserValue($user->getUID(), Application::APP_ID, 'show', '1') !== '0') {
+			$lastSeenVersion = $this->config->getUserValue($user->getUID(), Application::APP_ID, 'show', '0.0.0');
+
+			// If current is newer then last seen we activate the wizard
+			if (version_compare(Constants::CHANGELOG_VERSION, $lastSeenVersion, '>')) {
 				Util::addScript(Application::APP_ID, Application::APP_ID . '-activate');
+			}
 
+			// If the user was already seen before (compatibility with older wizard versions where the value was 1)
+			// then we only show the changelog
+			if (version_compare($lastSeenVersion, '1', '>')) {
+				$this->initialState->provideInitialState('changelogOnly', true);
+			} else {
+				// Otherwise if the user really uses Nextcloud for the very first time we create notifications for them
 				$this->jobList->add('OCA\FirstRunWizard\Notification\BackgroundJob', ['uid' => $this->userSession->getUser()->getUID()]);
 			}
 

package.json

@@ -16,13 +16,13 @@
     "stylelint:fix": "stylelint src/**/*.scss src/**/*.vue --fix"
   },
   "dependencies": {
+    "@mdi/js": "^7.4.47",
     "@nextcloud/axios": "^2.4.0",
     "@nextcloud/initial-state": "^2.1.0",
     "@nextcloud/l10n": "^2.2.0",
     "@nextcloud/router": "^3.0.0",
     "@nextcloud/vue": "^8.11.1",
-    "vue": "^2.7.16",
-    "vue-material-design-icons": "^5.3.0"
+    "vue": "^2.7.16"
   },
   "browserslist": [
     "extends @nextcloud/browserslist-config"
@@ -35,6 +35,7 @@
     "@nextcloud/browserslist-config": "^3.0.0",
     "@nextcloud/eslint-config": "^8.3.0",
     "@nextcloud/stylelint-config": "^2.4.0",
+    "@nextcloud/typings": "^1.8.0",
     "@nextcloud/vite-config": "^1.2.2",
     "sass": "^1.72.0",
     "vite": "^5.2.8"

src/components/AppStoreBadge.vue

@@ -3,8 +3,9 @@
   -
   - @author Simon Lindner <[email protected]>
   - @author Marco Ambrosini <[email protected]>
+  - @author Ferdinand Thiessen <[email protected]>
   -
-  - @license GNU AGPL version 3 or any later version
+  - @license AGPL-3.0-or-later
   -
   - This program is free software: you can redistribute it and/or modify
   - it under the terms of the GNU Affero General Public License as
@@ -22,78 +23,67 @@
   -->
 
 <template>
-	<a class="app-store-badge"
+	<a :class="$style.badge"
 		:aria-label="ariaLabel"
 		target="_blank"
 		rel="noreferrer"
-		:href="href"
-		:style="badgeStyle" />
+		:href="href" />
 </template>
 
-<script>
-import { imagePath } from '@nextcloud/router'
+<script setup lang="ts">
 import { loadState } from '@nextcloud/initial-state'
+import { translate as t } from '@nextcloud/l10n'
+import { imagePath } from '@nextcloud/router'
+import { computed } from 'vue'
 
-const android = loadState('firstrunwizard', 'android')
-const ios = loadState('firstrunwizard', 'ios')
-
-export default {
-	name: 'AppStoreBadge',
-
-	props: {
-		type: {
-			type: String,
-			required: true,
-			validator: type => ['ios', 'android'].includes(type),
-		},
-	},
+const props = defineProps<{
+	type: 'ios' | 'android'
+}>()
 
-	data() {
-		return {
-			android,
-			ios,
-		}
-	},
+const android = loadState<string>('firstrunwizard', 'android')
+const ios = loadState<string>('firstrunwizard', 'ios')
 
-	computed: {
-		imagePath() {
-			if (this.type === 'ios') {
-				return imagePath('firstrunwizard', 'iosBadge.png')
-			} else if (this.type === 'android') {
-				return imagePath('firstrunwizard', 'androidBadge.png')
-			}
-			return undefined
-		},
+/**
+ * Path to the app store badge image
+ */
+const badgeImagePath = computed(() => {
+	if (props.type === 'ios') {
+		return imagePath('firstrunwizard', 'iosBadge.png')
+	} else if (props.type === 'android') {
+		return imagePath('firstrunwizard', 'androidBadge.png')
+	}
+	return undefined
+})
 
-		badgeStyle() {
-			return { backgroundImage: 'url(' + this.imagePath + ')' }
-		},
+/**
+ * The badge image as CSS source URL
+ */
+const cssBackgroundImage = computed(() => `url('${badgeImagePath.value}')`)
 
-		href() {
-			if (this.type === 'ios') {
-				return this.ios
-			} else if (this.type === 'android') {
-				return this.android
-			}
-			return undefined
-		},
+const href = computed(() => {
+	if (props.type === 'ios') {
+		return ios
+	} else if (props.type === 'android') {
+		return android
+	}
+	return undefined
+})
 
-		ariaLabel() {
-			if (this.type === 'ios') {
-				return t('firstrunwizard', 'Download on Apple app store')
-			} else if (this.type === 'android') {
-				return t('firstrunwizard', 'Download on Google play store')
-			}
-			return undefined
-		},
-	},
-}
+const ariaLabel = computed(() => {
+	if (props.type === 'ios') {
+		return t('firstrunwizard', 'Download on Apple app store')
+	} else if (props.type === 'android') {
+		return t('firstrunwizard', 'Download on Google play store')
+	}
+	return undefined
+})
 </script>
 
-<style lang="scss" scoped>
-.app-store-badge {
+<style module lang="scss">
+.badge {
 	height: 74px;
 	width: 250px;
+	background-image: v-bind(cssBackgroundImage);
 	background-size: contain;
 	background-repeat: no-repeat;
 	&:focus-visible {