UX: Rewrite param-input using FormKit

What does this PR do?
=====================

This PR refactors param-input to use FormKit. FormKit is a structured
form tool in the core. After the rewrite, we will be able to gradually
abandon custom validators, get semantic parameter error prompts, etc.

meta link: https://meta.discourse.org/t/wishlist-param-dropdown-for-data-explorer-query/253883/28?u=lhc_fl

app/serializers/discourse_data_explorer/query_serializer.rb

@@ -15,7 +15,7 @@ class QuerySerializer < ActiveModel::Serializer
                :user_id
 
     def param_info
-      object&.params&.map(&:to_hash)
+      object&.params&.uniq { |p| p.identifier }&.map(&:to_hash)
     end
 
     def username

assets/javascripts/discourse/components/param-input.hbs

@@ -1,83 +1,63 @@
 <div class="param {{if this.valid 'valid' 'invalid'}}">
-  {{#if (eq this.type "boolean")}}
-    {{#if @info.nullable}}
-      <ComboBox
-        @valueAttribute="id"
-        @value={{this.nullableBoolValue}}
-        @nameProperty="name"
-        @content={{this.boolTypes}}
-        @onChange={{this.updateNullableBoolValue}}
-        name={{@info.identifier}}
-      />
+  <this.form.Field
+    @name={{@info.identifier}}
+    @title={{@info.identifier}}
+    @validation={{this.validation}}
+    @validate={{this.validate}}
+    @onSet={{this.updateValue}}
+    as |field|
+  >
+    {{#if (eq this.type "boolean")}}
+      {{#if @info.nullable}}
+        <field.Select name={{@info.identifier}} as |select|>
+          {{#each this.boolTypes as |t|}}
+            <select.Option @value={{t.id}}> {{t.name}} </select.Option>
+          {{/each}}
+        </field.Select>
+      {{else}}
+        <field.Checkbox name={{@info.identifier}} />
+      {{/if}}
+    {{else if (eq this.type "int")}}
+      <field.Input @type="number" name={{@info.identifier}} />
+    {{else if (eq this.type "string")}}
+      <field.Input name={{@info.identifier}} />
+    {{else if (eq this.type "user_id")}}
+      <field.Custom id={{field.id}}>
+        <EmailGroupUserChooser
+          @value={{this.value}}
+          @options={{hash maximum=1}}
+          @onChange={{this.updateValue}}
+          name={{@info.identifier}}
+        />
+      </field.Custom>
+    {{else if (eq this.type "group_list")}}
+      <field.Custom id={{field.id}}>
+        <GroupChooser
+          @content={{this.allGroups}}
+          @value={{this.value}}
+          @labelProperty="name"
+          @valueProperty="name"
+          @onChange={{this.updateValue}}
+        />
+      </field.Custom>
+    {{else if (eq this.type "user_list")}}
+      <field.Custom id={{field.id}}>
+        <EmailGroupUserChooser
+          @value={{this.value}}
+          @onChange={{this.updateValue}}
+          name={{@info.identifier}}
+        />
+      </field.Custom>
+    {{else if (eq this.type "category_id")}}
+      <field.Custom id={{field.id}}>
+        <CategoryChooser
+          @value={{this.value}}
+          @onChange={{this.updateValue}}
+          name={{@info.identifier}}
+        />
+      </field.Custom>
     {{else}}
-      <Input
-        @type="checkbox"
-        @checked={{this.boolvalue}}
-        {{on "change" this.updateBoolValue}}
-        name={{@info.identifier}}
-      />
+      <field.Input name={{@info.identifier}} />
     {{/if}}
-    <span class="param-name">{{@info.identifier}}</span>
-
-  {{else if (eq this.type "int")}}
-    <Input
-      @type="number"
-      @value={{this.value}}
-      {{on "change" this.updateValue}}
-      name={{@info.identifier}}
-    />
-    <span class="param-name">{{@info.identifier}}</span>
-
-  {{else if (eq this.type "string")}}
-    <TextField
-      @value={{this.value}}
-      @type="text"
-      @onChange={{this.updateValue}}
-      name={{@info.identifier}}
-    />
-    <span class="param-name">{{@info.identifier}}</span>
-
-  {{else if (eq this.type "user_id")}}
-    <EmailGroupUserChooser
-      @value={{this.value}}
-      @options={{hash maximum=1}}
-      @onChange={{this.updateValue}}
-      name={{@info.identifier}}
-    />
-    <span class="param-name">{{@info.identifier}}</span>
-
-  {{else if (eq this.type "group_list")}}
-    <GroupChooser
-      @content={{this.allGroups}}
-      @value={{this.value}}
-      @labelProperty="name"
-      @valueProperty="name"
-      @onChange={{this.updateGroupValue}}
-    />
-    <span class="param-name">{{@info.identifier}}</span>
-
-  {{else if (eq this.type "user_list")}}
-    <EmailGroupUserChooser
-      @value={{this.value}}
-      @onChange={{this.updateValue}}
-      name={{@info.identifier}}
-    />
-    <span class="param-name">{{@info.identifier}}</span>
-
-  {{else if (eq this.type "category_id")}}
-    <CategoryChooser
-      @value={{this.value}}
-      @onChange={{this.updateValue}}
-      name={{@info.identifier}}
-    />
-    <span class="param-name">{{@info.identifier}}</span>
-
-  {{else}}
-    <TextField
-      @value={{this.value}}
-      @onChange={{this.updateValue}}
-      name={{@info.identifier}}
-    />
-    <span class="param-name">{{@info.identifier}}</span>
-  {{/if}}
+  </this.form.Field>
 </div>