DEV: experimental outlet for navigation filter (#22897)

Temporary outlet for navigation filter for /filter page. In addition, copy button and reset button were added to core.

app/assets/javascripts/discourse/app/controllers/navigation/filter.js

@@ -1,12 +1,48 @@
 import Controller, { inject as controller } from "@ember/controller";
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
+import { bind } from "discourse-common/utils/decorators";
+import discourseDebounce from "discourse-common/lib/debounce";
 
 export default class extends Controller {
   @controller("discovery/filter") discoveryFilter;
 
-  queryString = "";
+  @tracked copyIcon = "link";
+  @tracked copyClass = "btn-default";
+  @tracked newQueryString = "";
 
   constructor() {
     super(...arguments);
-    this.queryString = this.discoveryFilter.q;
+    this.newQueryString = this.discoveryFilter.q;
+  }
+
+  @bind
+  updateQueryString(string) {
+    this.newQueryString = string;
+  }
+
+  @action
+  clearInput() {
+    this.newQueryString = "";
+    this.discoveryFilter.updateTopicsListQueryParams(this.newQueryString);
+  }
+
+  @action
+  copyQueryString() {
+    this.copyIcon = "check";
+    this.copyClass = "btn-default ok";
+
+    navigator.clipboard.writeText(window.location);
+
+    discourseDebounce(this._restoreButton, 3000);
+  }
+
+  @bind
+  _restoreButton() {
+    if (this.isDestroying || this.isDestroyed) {
+      return;
+    }
+    this.copyIcon = "link";
+    this.copyClass = "btn-default";
   }
 }

app/assets/javascripts/discourse/app/templates/navigation/filter.hbs

@@ -4,13 +4,41 @@
       {{d-icon "filter" class="topic-query-filter__icon"}}
       <Input
         class="topic-query-filter__filter-term"
-        @value={{this.queryString}}
+        @value={{this.newQueryString}}
         @enter={{action
           this.discoveryFilter.updateTopicsListQueryParams
-          this.queryString
+          this.newQueryString
         }}
         @type="text"
+        id="queryStringInput"
+        autocomplete="off"
+      />
+      {{! EXPERIMENTAL OUTLET - don't use because it will be removed soon  }}
+      <PluginOutlet
+        @name="below-filter-input"
+        @outletArgs={{hash
+          updateQueryString=this.updateQueryString
+          newQueryString=this.newQueryString
+        }}
       />
     </div>
+    {{#if this.newQueryString}}
+      <div class="topic-query-filter__controls">
+        <DButton
+          @icon="times"
+          @action={{action this.clearInput}}
+          @disabled={{unless this.newQueryString "true"}}
+        />
+
+        {{#if this.discoveryFilter.q}}
+          <DButton
+            @icon={{this.copyIcon}}
+            @class={{this.copyClass}}
+            @action={{this.copyQueryString}}
+            @disabled={{unless this.newQueryString "true"}}
+          />
+        {{/if}}
+      </div>
+    {{/if}}
   </div>
 </DSection>