Refactore icons

app/components/button.hbs

@@ -20,7 +20,7 @@
   ...attributes
 >
   {{#if this.icon}}
-    <MdIcon @icon={{this.icon}} class="mx-1"/>
+    <this.icon class="mx-1"/>
   {{/if}}
   {{#if this.text}}
     <span class="mx-1">{{this.text}}</span>

app/components/button.js

@@ -1,6 +1,9 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
+import ClockOutline from 'ember-mdi/components/md-icon/clock-outline';
+import Check from 'ember-mdi/components/md-icon/check';
+import AlertCircleOutline from 'ember-mdi/components/md-icon/alert-circle-outline';
 
 export default class ButtonComponent extends Component {
   @tracked _state = 'default';
@@ -26,13 +29,13 @@ export default class ButtonComponent extends Component {
   }
 
   get icon() {
-    if (this.isPending && this.args.pendingIcon) {
-      return this.args.pendingIcon;
-    } else if (this.isFulfilled && this.args.fulfilledIcon) {
-      return this.args.fulfilledIcon;
-    } else if (this.isRejected && this.args.rejectedIcon) {
-      return this.args.rejectedIcon;
-    } else if (this.isSettled && this.args.settledIcon) {
+    if (this.isPending) {
+      return this.args.pendingIcon ?? ClockOutline;
+    } else if (this.isFulfilled) {
+      return this.args.fulfilledIcon ?? Check;
+    } else if (this.isRejected) {
+      return this.args.rejectedIcon ?? AlertCircleOutline;
+    } else if (this.isSettled) {
       return this.args.settledIcon;
     }
 

app/components/input-checkbox.hbs

@@ -1,4 +1,8 @@
 <label class="flex items-center cursor-pointer" {{on "click" this.onChange}} ...attributes>
-  <MdIcon @icon={{if @checked "check-box-outline" "checkbox-blank-outline"}} @size={{22}}/>
+  {{#if @checked}}
+    <MdIcon::CheckboxOutline @size={{22}}/>
+  {{else}}
+    <MdIcon::CheckboxBlankOutline @size={{22}}/>
+  {{/if}}
   <span class="ml-1">{{@label}}</span>
 </label>

app/components/input-text.hbs

@@ -1,15 +1,13 @@
 <div class="mb-4">
   {{#if @label}}
-    <label for={{this.id}} class="block font-medium mb-1 text-dark">{{@label}}</label>
+    <label for={{this.id}} class="block font-medium mb-1 text-dark">
+      {{@label}}
+    </label>
   {{/if}}
   <div class="relative flex items-center border rounded-md border-gray">
     {{#if @prefixIcon}}
-      <MdIcon
-        @icon={{@prefixIcon}}
-        class="h-8 w-8 pl-2"
-      />
+      <@prefixIcon class="h-8 w-8 pl-2" />
     {{/if}}
-
     <input
       type="text"
       name={{@name}}
@@ -18,9 +16,11 @@
       placeholder={{@placeholder}}
       value={{@value}}
       {{on 'input' this.onChange}}
-    >
+    />
   </div>
   {{#if @helper}}
-    <div class="mt-1 text-sm">{{@helper}}</div>
+    <div class="mt-1 text-sm">
+      {{@helper}}
+    </div>
   {{/if}}
 </div>

app/components/input-textarea.hbs

@@ -1,15 +1,13 @@
 <div class="mb-4">
   {{#if @label}}
-    <label for={{this.id}} class="block font-medium mb-1 text-dark">{{@label}}</label>
+    <label for={{this.id}} class="block font-medium mb-1 text-dark">
+      {{@label}}
+    </label>
   {{/if}}
   <div class="relative flex items-center border rounded-md border-gray">
     {{#if @prefixIcon}}
-      <MdIcon
-        @icon={{@prefixIcon}}
-        class="h-8 w-8 pl-2"
-      />
+      <@prefixIcon class="h-8 w-8 pl-2" />
     {{/if}}
-
     <textarea
       type="text"
       name={{@name}}
@@ -17,9 +15,13 @@
       class="block w-full p-2 bg-transparent focus:outline-none"
       placeholder={{@placeholder}}
       {{on 'change' this.onChange}}
-    >{{@value}}</textarea>
+    >
+      {{@value}}
+    </textarea>
   </div>
   {{#if @helper}}
-    <div class="mt-1 text-sm">{{@helper}}</div>
+    <div class="mt-1 text-sm">
+      {{@helper}}
+    </div>
   {{/if}}
 </div>

app/components/menu-item.hbs

@@ -1,6 +1,6 @@
 <LinkTo @route={{@route}} @model={{@model}} @activeClass="bg-text" class="flex items-center px-4 py-2 rounded-md text-gray hover:bg-text">
   {{#if @icon}}
-    <MdIcon @icon={{@icon}} />
+    <@icon />
   {{/if}}
   <span class="{{if @icon 'mx-4'}} font-medium">{{@name}}</span>
 </LinkTo>

app/components/pagination.hbs

@@ -1,6 +1,8 @@
 {{#if (gt this.totalPages 1)}}
   <nav class="flex justify-center relative z-0 my-4" aria-label="Pagination">
-    {{#let "inline-flex items-center justify-center px-2 mx-1 font-display text-lg" as |commonClasses|}}
+    {{#let
+      'inline-flex items-center justify-center px-2 mx-1 font-display text-lg' as |commonClasses|
+    }}
       {{#if this.previousPage}}
         <LinkTo
           @route={{this.router.currentRouteName}}
@@ -9,15 +11,18 @@
           class={{commonClasses}}
           title="Previous page"
         >
-          <MdIcon @icon="chevron-left" />
+          <MdIcon::ChevronLeft />
         </LinkTo>
       {{/if}}
-
       {{#each this.availablePages as |i|}}
         {{#if (eq @current i)}}
-          <span class="{{commonClasses}} border rounded">{{i}}</span>
-        {{else if (eq "..." i)}}
-          <span class={{commonClasses}}>{{i}}</span>
+          <span class="{{commonClasses}} border rounded">
+            {{i}}
+          </span>
+        {{else if (eq '...' i)}}
+          <span class={{commonClasses}}>
+            {{i}}
+          </span>
         {{else}}
           <LinkTo
             @route={{this.router.currentRouteName}}
@@ -29,7 +34,6 @@
           </LinkTo>
         {{/if}}
       {{/each}}
-
       {{#if this.nextPage}}
         <LinkTo
           @route={{this.router.currentRouteName}}
@@ -38,7 +42,7 @@
           class={{commonClasses}}
           title="Next page"
         >
-          <MdIcon @icon="chevron-right" />
+          <MdIcon::ChevronRight />
         </LinkTo>
       {{/if}}
     {{/let}}

app/components/royal-table/column.hbs

@@ -9,11 +9,10 @@
     {{! DOTO: align is depricated, use styles align instead }}
   >
     {{#if @sortable}}
-      {{! TODO: add ensure-safe-component }}
       {{#let
         (if
           @sortingIconComponent
-          (component @sortingIconComponent)
+          @sortingIconComponent
           (component 'royal-table/column/sorting-icon')
         ) as |SortingIcon|
       }}
@@ -36,7 +35,7 @@
     {{#if (has-block)}}
       {{yield}}
     {{else if @bodyComponent}}
-      {{#let (component @bodyComponent) as |BodyComponent|}}
+      {{#let @bodyComponent as |BodyComponent|}}
         <BodyComponent @data={{@data}} />
       {{/let}}
     {{else}}

app/components/tab.hbs

@@ -5,7 +5,7 @@
   class="flex items-center h-10 px-4 py-2 -mb-px text-center bg-transparent border-gray border-b-2 -px-1 whitespace-nowrap focus:outline-none"
 >
   {{#if @icon}}
-    <MdIcon @icon={{@icon}} class="mr-2" />
+    <@icon class="mr-2" />
   {{/if}}
   {{@text}}
 </LinkTo>

app/controllers/admin/indexes/item.js

@@ -0,0 +1,8 @@
+import Controller from '@ember/controller';
+import DatabaseOutline from 'ember-mdi/components/md-icon/database-outline';
+import CogOutline from 'ember-mdi/components/md-icon/cog-outline';
+
+export default class AdminIndexesItemController extends Controller {
+  DatabaseOutline = DatabaseOutline;
+  CogOutline = CogOutline;
+}

app/controllers/admin/indexes/item/data.js

@@ -1,6 +1,9 @@
 import Controller from '@ember/controller';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
+import Magnify from 'ember-mdi/components/md-icon/magnify';
+import Table from 'ember-mdi/components/md-icon/table';
+import MapOutline from 'ember-mdi/components/md-icon/map-outline';
 
 export default class AdminIndexesItemDataController extends Controller {
   @tracked q = null;
@@ -11,6 +14,10 @@ export default class AdminIndexesItemDataController extends Controller {
 
   queryParams = ['q', 'page', 'limit', 'sort'];
 
+  Magnify = Magnify;
+  Table = Table;
+  MapOutline = MapOutline;
+
   get sortedFields() {
     const fields = Object.keys(this.model.stats.fieldDistribution);
     const primaryKey = this.model.index.primaryKey ?? 'id';

app/controllers/admin/indexes/item/settings.js

@@ -1,9 +1,11 @@
 import Controller from '@ember/controller';
 import { action, get } from '@ember/object';
 import arrayEquals from 'meilisearch-admin/utils/array-equals';
+import DatabaseArrowUpOutline from 'ember-mdi/components/md-icon/database-arrow-up-outline';
 
 export default class AdminIndexesItemSettingsController extends Controller {
   emptyObj = {};
+  DatabaseArrowUpOutline = DatabaseArrowUpOutline;
 
   get rankingRulesFields() {
     const arr = [];

app/styles/app.css

@@ -3,10 +3,6 @@
 @tailwind utilities;
 @import 'ember-basic-dropdown';
 
-.md-icon {
-  fill: currentColor;
-}
-
 .royal-table {
   @apply table-auto border border-gray text-left mb-4;
 

app/templates/admin/indexes/item.hbs

@@ -3,8 +3,8 @@
 <h1 class="text-2xl mb-4">{{capitalize @model.uid}}</h1>
 
 <div class="flex mb-4">
-  <Tab @route="admin.indexes.item.data" @text="Data" @icon="database-outline" @model={{@model}} />
-  <Tab @route="admin.indexes.item.settings" @text="Settings" @icon="cog-outline" @model={{@model}} />
+  <Tab @route="admin.indexes.item.data" @text="Data" @icon={{this.DatabaseOutline}} @model={{@model}} />
+  <Tab @route="admin.indexes.item.settings" @text="Settings" @icon={{this.CogOutline}} @model={{@model}} />
 </div>
 
 {{outlet}}

app/templates/admin/indexes/item/data.hbs

@@ -1,15 +1,15 @@
 {{page-title 'Data'}}
 <InputText
   @placeholder="Search"
-  @prefixIcon="magnify"
+  @prefixIcon={{this.Magnify}}
   @value={{this.q}}
   @onChange={{this.searchTextChanged}}
 />
 <div class="mb-4 flex items-center">
-  <MdIcon @icon="check" class="mr-1" @size="18" />
+  <MdIcon::Check class="mr-1" @size="18" />
   Hits:
   {{@model.data.nbHits}}
-  <MdIcon @icon="clock-outline" class="ml-6 mr-1" @size="18" />
+  <MdIcon::ClockOutline class="ml-6 mr-1" @size="18" />
   Time spent:
   {{@model.data.processingTimeMs}}
   ms
@@ -20,8 +20,8 @@
       @value={{this.dataView}}
       @onClick={{set this 'dataView'}} as |bg|
     >
-      <bg.button @text="Table" @icon="table" @value="table" />
-      <bg.button @text="Map" @icon="map-outline" @value="map" />
+      <bg.button @text="Table" @icon={{this.Table}} @value="table" />
+      <bg.button @text="Map" @icon={{this.MapOutline}} @value="map" />
     </ButtonGroup>
   </div>
   {{#if (eq this.dataView 'table')}}

app/templates/admin/indexes/item/settings.hbs

@@ -93,9 +93,6 @@
   @pendingText="Saving"
   @fulfilledText="Done"
   @rejectedText="Error"
-  @icon="database-arrow-up-outline"
-  @pendingIcon="clock-outline"
-  @fulfilledIcon="check"
-  @rejectedIcon="alert-circle-outline"
+  @icon={{this.DatabaseArrowUpOutline}}
   @onClick={{this.save}}
 />

ember-cli-build.js

@@ -25,7 +25,7 @@ module.exports = function (defaults) {
     // staticAddonTrees: true,
     // staticHelpers: true,
     // staticModifiers: true,
-    // staticComponents: true,
+    staticComponents: true,
     // splitAtRoutes: ['route.name'],
     // packagerOptions: {
     //    webpackConfig: { }

package.json

@@ -55,6 +55,7 @@
     "autoprefixer": "^10.4.4",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
+    "els-addon-typed-templates": "^4.2.4",
     "ember-auto-import": "^2.4.0",
     "ember-cli": "~4.2.0",
     "ember-cli-app-version": "^5.0.0",
@@ -70,7 +71,7 @@
     "ember-export-application-global": "^2.0.1",
     "ember-fetch": "^8.1.1",
     "ember-load-initializers": "^2.1.2",
-    "ember-mdi": "github:kaermorchen/ember-mdi#feature/addon-v2",
+    "ember-mdi": "file:../ember-mdi-0.10.0.tgz",
     "ember-page-title": "^7.0.0",
     "ember-power-select": "^5.0.4",
     "ember-qunit": "^5.1.5",

tests/unit/controllers/admin/indexes/item-test.js

@@ -0,0 +1,12 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Controller | admin/indexes/item', function (hooks) {
+  setupTest(hooks);
+
+  // TODO: Replace this with your real tests.
+  test('it exists', function (assert) {
+    let controller = this.owner.lookup('controller:admin/indexes/item');
+    assert.ok(controller);
+  });
+});