From ec536340df8def88b78474a6f22f2ca899745957 Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Wed, 9 Mar 2022 08:29:27 +0000
Subject: [PATCH] ui: Remove Settings Ember Route (#12488)

---
 .../consul-ui/app/routes/application.js       | 23 +++++++++++++++++++
 ui/packages/consul-ui/app/routes/settings.js  | 23 -------------------
 .../consul-ui/app/templates/application.hbs   |  7 ++++++
 .../consul-ui/app/templates/settings.hbs      | 14 ++++++++++-
 .../tests/acceptance/settings/show.feature    |  4 ++--
 .../tests/unit/routes/settings-test.js        | 11 ---------
 .../consul-ui/vendor/consul-ui/routes.js      | 12 +++++++++-
 7 files changed, 56 insertions(+), 38 deletions(-)
 delete mode 100644 ui/packages/consul-ui/app/routes/settings.js
 delete mode 100644 ui/packages/consul-ui/tests/unit/routes/settings-test.js

diff --git a/ui/packages/consul-ui/app/routes/application.js b/ui/packages/consul-ui/app/routes/application.js
index 013699ab06..89eb67c532 100644
--- a/ui/packages/consul-ui/app/routes/application.js
+++ b/ui/packages/consul-ui/app/routes/application.js
@@ -1,9 +1,32 @@
 import Route from 'consul-ui/routing/route';
 import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
 
 import WithBlockingActions from 'consul-ui/mixins/with-blocking-actions';
 
 export default class ApplicationRoute extends Route.extend(WithBlockingActions) {
+  @service('client/http') client;
+
+  data;
+
+  @action
+  onClientChanged(e) {
+    let data = e.data;
+    if(data === '') {
+      data = { blocking: true };
+    }
+    // this.data is always undefined first time round and its the 'first read'
+    // of the value so we don't need to abort anything
+    if(typeof this.data === 'undefined') {
+      this.data = Object.assign({}, data);
+      return;
+    }
+    if(this.data.blocking === true && data.blocking === false) {
+      this.client.abort();
+    }
+    this.data = Object.assign({}, data);
+  }
+
   @action
   error(e, transition) {
     // TODO: Normalize all this better
diff --git a/ui/packages/consul-ui/app/routes/settings.js b/ui/packages/consul-ui/app/routes/settings.js
deleted file mode 100644
index 406b4a5a23..0000000000
--- a/ui/packages/consul-ui/app/routes/settings.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import Route from 'consul-ui/routing/route';
-import { inject as service } from '@ember/service';
-import { action } from '@ember/object';
-
-export default class SettingsRoute extends Route {
-  @service('client/http') client;
-  @service('settings') repo;
-
-  @action
-  change(slug, item) {
-    switch (slug) {
-      case 'client':
-        item.blocking = !item.blocking;
-        if (!item.blocking) {
-          this.client.abort();
-        }
-        break;
-    }
-    this.repo.persist({
-      [slug]: item,
-    });
-  }
-}
diff --git a/ui/packages/consul-ui/app/templates/application.hbs b/ui/packages/consul-ui/app/templates/application.hbs
index 6ac2423ea2..c5ab38f892 100644
--- a/ui/packages/consul-ui/app/templates/application.hbs
+++ b/ui/packages/consul-ui/app/templates/application.hbs
@@ -17,6 +17,12 @@ as |route|>
   {{document-attrs class="has-partitions"}}
 {{/if}}
 
+{{! Listen out for blocking query/client setting changes }}
+<DataSource
+  @src={{uri 'settings://consul:client'}}
+  @onchange={{route-action "onClientChanged"}}
+/>
+
 {{! Tell CSS about our theme }}
 <DataSource
   @src={{uri 'settings://consul:theme'}}
@@ -36,6 +42,7 @@ as |source|>
 />
 {{/if}}
 
+
 {{#if (not-eq route.currentName 'oauth-provider-debug')}}
 
 {{! redirect if we aren't on a URL with dc information }}
diff --git a/ui/packages/consul-ui/app/templates/settings.hbs b/ui/packages/consul-ui/app/templates/settings.hbs
index a9904b6a36..4493bb936e 100644
--- a/ui/packages/consul-ui/app/templates/settings.hbs
+++ b/ui/packages/consul-ui/app/templates/settings.hbs
@@ -40,21 +40,33 @@ as |item|}}
       </Notice>
       <form>
       {{#if (not (env 'CONSUL_UI_DISABLE_REALTIME'))}}
+      <Disclosure as |disclosure|>
+        <disclosure.Details>
+          <DataSink
+            @data={{item}}
+            @sink='settings://consul:client'
+            @onchange={{action (fn disclosure.close)}}
+          />
+        </disclosure.Details>
         <fieldset data-test-blocking-queries>
           <h2>Blocking Queries</h2>
           <p>Keep catalog info up-to-date without refreshing the page. Any changes made to services, nodes and intentions would be reflected in real time.</p>
           <div class="type-toggle">
             <label>
               <input
+                {{on 'change' (queue
+                  (set item 'blocking' (not item.blocking))
+                  (fn disclosure.open)
+                )}}
                 type="checkbox"
                 name="client[blocking]"
                 checked={{if item.blocking 'checked'}}
-                onchange={{route-action 'change' 'client' item}}
               />
               <span>{{if item.blocking 'On' 'Off'}}</span>
             </label>
           </div>
         </fieldset>
+      </Disclosure>
       {{/if}}
       </form>
     </BlockSlot>
diff --git a/ui/packages/consul-ui/tests/acceptance/settings/show.feature b/ui/packages/consul-ui/tests/acceptance/settings/show.feature
index 2b1e3ef1e6..56480d360d 100644
--- a/ui/packages/consul-ui/tests/acceptance/settings/show.feature
+++ b/ui/packages/consul-ui/tests/acceptance/settings/show.feature
@@ -5,7 +5,7 @@ Feature: settings / show: Show Settings Page
   Scenario: I see the Blocking queries
     Given 1 datacenter model with the value "dc1"
     When I visit the settings page
-    Then the url should be /setting
+    Then the url should be /settings
     # FIXME
     # And the title should be "Settings - Consul"
     And I see blockingQueries
@@ -20,7 +20,7 @@ Feature: settings / show: Show Settings Page
       CONSUL_UI_DISABLE_REALTIME: "1"
     ---
     When I visit the settings page
-    Then the url should be /setting
+    Then the url should be /settings
     # FIXME
     # And the title should be "Settings - Consul"
     And I don't see blockingQueries
diff --git a/ui/packages/consul-ui/tests/unit/routes/settings-test.js b/ui/packages/consul-ui/tests/unit/routes/settings-test.js
deleted file mode 100644
index d4762ed827..0000000000
--- a/ui/packages/consul-ui/tests/unit/routes/settings-test.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { module, test } from 'qunit';
-import { setupTest } from 'ember-qunit';
-
-module('Unit | Route | settings', function(hooks) {
-  setupTest(hooks);
-
-  test('it exists', function(assert) {
-    let route = this.owner.lookup('route:settings');
-    assert.ok(route);
-  });
-});
diff --git a/ui/packages/consul-ui/vendor/consul-ui/routes.js b/ui/packages/consul-ui/vendor/consul-ui/routes.js
index 151180491f..01cb9b67e3 100644
--- a/ui/packages/consul-ui/vendor/consul-ui/routes.js
+++ b/ui/packages/consul-ui/vendor/consul-ui/routes.js
@@ -397,7 +397,17 @@
       _options: { path: '/' },
     },
     settings: {
-      _options: { path: '/setting' },
+      _options: {
+        path: '/settings',
+      },
+    },
+    /* This was introduced in 1.12. By the time we get to 1.15 */
+    /* I'd say we are safe to remove, feel free to delete for 1.15 */
+    setting: {
+      _options: {
+        path: '/setting',
+        redirect: '../settings',
+      },
     },
     notfound: {
       _options: { path: '/*notfound' },