fix: Log limitation of adding new styles while switching themes (#10894)

If there are more than one theme available in themes folder, user can switch between them in development mode by changing the name of the theme in @theme. As having a watch for adding new styles in component folder is 'static', at least a log about this limitation is needed.

Fixes #10680

flow-server/src/main/resources/plugins/application-theme-plugin/theme-handle.js

@@ -26,6 +26,9 @@ const {copyStaticAssets, copyThemeResources} = require('./theme-copy');
 // matches theme name in './theme-my-theme.generated.js'
 const nameRegex = /theme-(.*)\.generated\.js/;
 
+let prevThemeName = undefined;
+let firstThemeName = undefined;
+
 /**
  * Looks up for a theme resources in a current project and in jar dependencies,
  * copies the found resources and generates/updates meta data for webpack
@@ -39,8 +42,36 @@ const nameRegex = /theme-(.*)\.generated\.js/;
 function processThemeResources(options, logger) {
   const themeName = extractThemeName(options.frontendGeneratedFolder);
   if (themeName) {
+    if (!prevThemeName && !firstThemeName) {
+      firstThemeName = themeName;
+    } else if ((prevThemeName && prevThemeName !== themeName && firstThemeName !== themeName)
+        || (!prevThemeName && firstThemeName !== themeName)) {
+      // Warning message is shown to the developer when:
+      // 1. He is switching to any theme, which is differ from one being set up
+      // on application startup, by changing theme name in `@Theme()`
+      // 2. He removes or comments out `@Theme()` to see how the app
+      // looks like without theming, and then again brings `@Theme()` back
+      // with a themeName which is differ from one being set up on application
+      // startup.
+      const warning = `Attention: Active theme is switched to '${themeName}'.`
+      const description = `
+      Note that adding new style sheet files to '/themes/${themeName}/components', 
+      may not be taken into effect until the next application restart.
+      Changes to already existing style sheet files are being reloaded as before.`;
+      logger.warn("*******************************************************************");
+      logger.warn(warning);
+      logger.warn(description);
+      logger.warn("*******************************************************************");
+    }
+    prevThemeName = themeName;
+
     findThemeFolderAndHandleTheme(themeName, options, logger);
   } else {
+    // This is needed in the situation that the user decides to comment or
+    // remove the @Theme(...) completely to see how the application looks
+    // without any theme. Then when the user brings back one of the themes,
+    // the previous theme should be undefined to enable us to detect the change.
+    prevThemeName = undefined;
     logger.debug("Skipping Vaadin application theme handling.");
     logger.trace("Most likely no @Theme annotation for application or only themeClass used.");
   }