Add key route

app/components/form-element.hbs

@@ -0,0 +1,19 @@
+<div class="mb-4">
+  {{#if @label}}
+    <label for={{this.id}} class="block font-medium mb-1 text-dark {{if @required "after:content-['*'] after:text-red-500"}}">
+      {{~ capitalize @label ~}}
+    </label>
+  {{/if}}
+
+  {{#if (has-block)}}
+    {{yield}}
+  {{else}}
+    {{@value}}
+  {{/if}}
+
+  {{#if @helper}}
+    <div class="mt-1 text-sm">
+      {{@helper}}
+    </div>
+  {{/if}}
+</div>

app/router.js

@@ -16,7 +16,7 @@ Router.map(function () {
       });
     });
     this.route('keys', function () {
-      this.route('key');
+      this.route('key', { path: '/:uid' });
     });
   });
   this.route('login');

app/routes/admin/keys.js

@@ -1,10 +1,3 @@
 import Route from '@ember/routing/route';
-import { inject as service } from '@ember/service';
 
-export default class AdminKeysRoute extends Route {
-  @service meilisearch;
-
-  model() {
-    return this.meilisearch.getKeys();
-  }
-}
+export default class AdminKeysRoute extends Route {}

app/routes/admin/keys/index.js

@@ -0,0 +1,10 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+export default class AdminKeysIndexRoute extends Route {
+  @service meilisearch;
+
+  model() {
+    return this.meilisearch.getKeys();
+  }
+}

app/routes/admin/keys/key.js

@@ -1,3 +1,10 @@
 import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
 
-export default class AdminKeysKeyRoute extends Route {}
+export default class AdminKeysKeyRoute extends Route {
+  @service meilisearch;
+
+  model({ uid }) {
+    return this.meilisearch.getKey(uid);
+  }
+}

app/services/meilisearch.js

@@ -24,4 +24,8 @@ export default class MeilisearchService extends Service {
   getKeys() {
     return query('keys');
   }
+
+  getKey(uid) {
+    return query(`keys/${uid}`);
+  }
 }

app/templates/admin/keys.hbs

@@ -1,13 +1 @@
-<h1 class='text-3xl mb-4'>Keys</h1>
-
-<RoyalTable @data={{@model.results}} class='w-full' as |Row data|>
-  <Row as |Column|>
-    <Column @prop='name'>
-      <LinkTo @route='admin.keys.key' @model={{data.uid}}>
-        {{data.name}}
-      </LinkTo>
-    </Column>
-    <Column @prop='actions' />
-    <Column @prop='indexes' />
-  </Row>
-</RoyalTable>
+{{outlet}}

app/templates/admin/keys/index.hbs

@@ -0,0 +1,13 @@
+<h1 class='text-3xl mb-4'>Keys</h1>
+
+<RoyalTable @data={{@model.results}} class='w-full' as |Row data|>
+  <Row as |Column|>
+    <Column @prop='name'>
+      <LinkTo @route='admin.keys.key' @model={{data.uid}}>
+        {{data.name}}
+      </LinkTo>
+    </Column>
+    <Column @prop='actions' />
+    <Column @prop='indexes' />
+  </Row>
+</RoyalTable>

app/templates/admin/keys/key.hbs

@@ -1,2 +1,40 @@
-{{page-title "Key"}}
-{{outlet}}
+<h1 class='text-3xl mb-4'>{{@model.name}}</h1>
+
+<FormElement @label='description' @value={{@model.description}} />
+<FormElement @label='key' @value={{@model.key}} />
+<FormElement @label='uid' @value={{@model.uid}} />
+<FormElement @label='actions' @value={{@model.actions}} />
+<FormElement @label='indexes' @value={{@model.indexes}} />
+<FormElement @label='expiresAt'>
+  {{date-time-format
+    @model.expiresAt
+    year='numeric'
+    month='numeric'
+    day='numeric'
+    hour='numeric'
+    minute='numeric'
+    second='numeric'
+  }}
+</FormElement>
+<FormElement @label='createdAt'>
+  {{date-time-format
+    @model.createdAt
+    year='numeric'
+    month='numeric'
+    day='numeric'
+    hour='numeric'
+    minute='numeric'
+    second='numeric'
+  }}
+</FormElement>
+<FormElement @label='updatedAt'>
+  {{date-time-format
+    @model.updatedAt
+    year='numeric'
+    month='numeric'
+    day='numeric'
+    hour='numeric'
+    minute='numeric'
+    second='numeric'
+  }}
+</FormElement>

tests/integration/components/form-element-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'meiliadmin/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | form-element', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<FormElement />`);
+
+    assert.dom(this.element).hasText('');
+
+    // Template block usage:
+    await render(hbs`
+      <FormElement>
+        template block text
+      </FormElement>
+    `);
+
+    assert.dom(this.element).hasText('template block text');
+  });
+});

tests/unit/routes/admin/keys/index-test.js

@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'meiliadmin/tests/helpers';
+
+module('Unit | Route | admin/keys/index', function (hooks) {
+  setupTest(hooks);
+
+  test('it exists', function (assert) {
+    let route = this.owner.lookup('route:admin/keys/index');
+    assert.ok(route);
+  });
+});