[UI] Use PowerSelect for campaigns & lists

ui/.stylelintrc.js

@@ -10,5 +10,6 @@ module.exports = {
 
     // Support for SCSS, Tailwind, etc
     'at-rule-no-unknown': [true, { ignoreAtRules: ['tailwind'] }],
+    'import-notation': [null], // To allow SCSS imports
   },
 };

ui/app/controllers/preview/index.js

@@ -8,13 +8,13 @@ export default class PreviewIndexController extends Controller {
   @service router;
 
   // Form fields
-  @tracked listID = '';
-  @tracked campaignID = '';
+  @tracked selectedList;
+  @tracked selectedCampaign;
 
   // Process manual preview form
   @action startPreview() {
-    const c = this.campaignID,
-      l = this.listID;
+    const l = this.selectedList?.param;
+    const c = this.selectedCampaign?.param;
     if (isPresent(c) && isPresent(l)) {
       this.router.transitionTo('preview.render', c, l);
     }

ui/app/gql/queries/index.graphql

@@ -0,0 +1,10 @@
+query index {
+  campaigns {
+    subject
+    param
+  }
+  lists {
+    name
+    param
+  }
+}

ui/app/routes/index.js

@@ -0,0 +1,10 @@
+import Route from '@ember/routing/route';
+import { service } from '@ember/service';
+
+export default class IndexRoute extends Route {
+  @service router;
+
+  beforeModel(/* transition */) {
+    this.router.transitionTo('preview');
+  }
+}

ui/app/routes/preview/index.js

@@ -0,0 +1,13 @@
+import query from 'preview/gql/queries/index.graphql';
+import { queryManager } from 'ember-apollo-client';
+import Route from '@ember/routing/route';
+
+export default class PreviewIndexRoute extends Route {
+  @queryManager apollo;
+
+  model() {
+    return this.apollo.query({
+      query,
+    });
+  }
+}

ui/app/styles/app.scss

@@ -1,5 +1,8 @@
 @charset "UTF-8";
 
+// ember-power-select & ember-basic-dropdown
+@import "ember-power-select/ember-power-select";
+
 // TailwindCSS
 @tailwind base;
 @tailwind components;

ui/app/templates/application.hbs

@@ -3,3 +3,5 @@
 <div class="min-h-screen bg-white">
   {{outlet}}
 </div>
+
+<BasicDropdownWormhole />

ui/app/templates/preview/index.hbs

@@ -27,22 +27,30 @@
         </thead>
         <tbody>
         <tr>
-          <td>
-          <Input
-            aria-label="Campaign ID"
-            @value={{ this.campaignID }}
-            placeholder="See content directory"
-            class="max-w-lg block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md"
-          /></td>
-          <td>
-           <Input
-            aria-label="List ID"
-            @value={{ this.listID }}
-            placeholder="See lists directory"
-            class="max-w-lg block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md" />
+          <td class="w-2/5 not-prose px-1">
+          <PowerSelect
+            @searchField="param"
+            @searchEnabled={{ true }}
+            @options={{ this.model.campaigns }}
+            @onChange={{ fn (mut this.selectedCampaign) }}
+            @selected={{ this.selectedCampaign }}
+          as |camp|>
+            {{ camp.param }}
+          </PowerSelect>
           </td>
-          <td>
-            <button type="submit" class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" {{ on 'click' this.startPreview }}>
+          <td class="w-2/5 not-prose px-1">
+          <PowerSelect
+            @searchField="param"
+            @searchEnabled={{ true }}
+            @options={{ this.model.lists }}
+            @onChange={{ fn (mut this.selectedList) }}
+            @selected={{ this.selectedList }}
+          as |list|>
+            {{ list.param }}
+          </PowerSelect>
+          </td>
+          <td class="w-1/5">
+            <button type="submit" class="ml-3 inline-flex justify-center py-1 px-3 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" {{ on 'click' this.startPreview }}>
               Preview
             </button>
         </td>

ui/config/tailwind.js

@@ -1,11 +1,13 @@
 const isProduction = process.env.EMBER_ENV === 'production';
 
 module.exports = {
-  mode: isProduction ? 'jit' : undefined,
   purge: ['./app/**/*.{html,hbs,js,ts}', './public/**/*.html'],
-  theme: {
-    extend: {},
-  },
-  variants: {},
   plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
+
+  // Disable JIT in devo. Faster to import all classes.
+  safelist: isProduction ? undefined : [{ pattern: /.*/ }],
+
+  // Do we need these?
+  theme: { extend: {} },
+  variants: {},
 };

ui/package.json

@@ -44,8 +44,9 @@
     "concurrently": "^8.2.2",
     "ember-apollo-client": "^4.0.2",
     "ember-auto-import": "^2.7.3",
+    "ember-basic-dropdown": "^8.1.0",
     "ember-cli": "~5.9.0",
-    "ember-cli-app-version": "^6.0.1",
+    "ember-cli-app-version": "^7.0.0",
     "ember-cli-babel": "^8.2.0",
     "ember-cli-clean-css": "^3.0.0",
     "ember-cli-dependency-checker": "^3.3.2",
@@ -54,13 +55,15 @@
     "ember-cli-postcss": "^8.0.0",
     "ember-cli-sri": "^2.1.1",
     "ember-cli-terser": "^4.0.2",
+    "ember-concurrency": "^4.0.2",
     "ember-fetch": "^8.1.2",
     "ember-load-initializers": "^2.1.2",
     "ember-modifier": "^4.1.0",
     "ember-page-title": "^8.2.3",
+    "ember-power-select": "^8.2.0",
     "ember-qunit": "^8.0.2",
     "ember-resize-observer-service": "^1.0.0",
-    "ember-resolver": "^11.0.1",
+    "ember-resolver": "^12.0.0",
     "ember-source": "~5.9.0",
     "ember-template-lint": "^6.0.0",
     "ember-truth-helpers": "^4.0.0",