FEATURE: Warning when component is added and not assigned (#8482)

When a component is installed and not assigned to any theme and the user is changing page, we should display a warning.

If the user decides to skip warning or come back later, a warning should not be shown anymore.

Also, when the user clicks "delete" button right after installation, warning about forgotten themes should not be shown.

app/assets/javascripts/admin/controllers/admin-customize-themes-show.js.es6

@@ -324,6 +324,7 @@ export default Controller.extend({
         result => {
           if (result) {
             const model = this.model;
+            model.setProperties({ recentlyInstalled: false });
             model.destroyRecord().then(() => {
               this.allThemes.removeObject(model);
               this.transitionToRoute("adminCustomizeThemes");

app/assets/javascripts/admin/routes/admin-customize-themes-show.js.es6

@@ -51,6 +51,23 @@ export default Route.extend({
   actions: {
     didTransition() {
       scrollTop();
+    },
+    willTransition(transition) {
+      const model = this.controller.model;
+      if (model.recentlyInstalled && !model.hasParents && model.component) {
+        transition.abort();
+        bootbox.confirm(
+          I18n.t("admin.customize.theme.unsaved_parent_themes"),
+          I18n.t("admin.customize.theme.discard"),
+          I18n.t("admin.customize.theme.stay"),
+          result => {
+            if (!result) {
+              this.controller.model.setProperties({ recentlyInstalled: false });
+              transition.retry();
+            }
+          }
+        );
+      }
     }
   }
 });

app/assets/javascripts/admin/routes/admin-customize-themes.js.es6

@@ -18,6 +18,7 @@ export default Route.extend({
 
     addTheme(theme) {
       this.refresh();
+      theme.setProperties({ recentlyInstalled: true });
       this.transitionTo("adminCustomizeThemes.show", theme.get("id"));
     }
   }

config/locales/client.en.yml

@@ -3648,6 +3648,7 @@ en:
           upload: "Upload"
           select_component: "Select a component..."
           unsaved_changes_alert: "You haven't saved your changes yet, do you want to discard them and move on?"
+          unsaved_parent_themes: "You haven't assigned the component to themes, do you want to move on?"
           discard: "Discard"
           stay: "Stay"
           css_html: "Custom CSS/HTML"