From 9f13041aad402fecf7e71e5756d575fd8a84b0f0 Mon Sep 17 00:00:00 2001
From: Stanislav Romanov <kaermorchen@gmail.com>
Date: Fri, 9 Sep 2022 18:53:19 +0300
Subject: [PATCH] Add tabs wrapper

---
 app/components/tab.hbs                        |  4 +--
 app/components/tabs.hbs                       |  3 +++
 app/templates/admin/indexes/item.hbs          |  4 +--
 .../admin/indexes/item/documents/document.hbs |  4 +--
 tests/integration/components/tabs-test.js     | 26 +++++++++++++++++++
 5 files changed, 35 insertions(+), 6 deletions(-)
 create mode 100644 app/components/tabs.hbs
 create mode 100644 tests/integration/components/tabs-test.js

diff --git a/app/components/tab.hbs b/app/components/tab.hbs
index 9e94ade..175d6fb 100644
--- a/app/components/tab.hbs
+++ b/app/components/tab.hbs
@@ -1,8 +1,8 @@
 <LinkTo
   @route={{@route}}
   @models={{if @model (array @model) @models}}
-  @activeClass="text-primary border-primary"
-  class="flex items-center h-10 px-4 py-2 -mb-px text-center bg-transparent border-b-2 -px-1 whitespace-nowrap focus:outline-none"
+  @activeClass="text-primary border-b border-primary"
+  class="flex items-center h-10 px-4 py-2 text-center bg-transparent whitespace-nowrap focus:outline-none"
 >
   {{#if @icon}}
     <@icon class="mr-2" />
diff --git a/app/components/tabs.hbs b/app/components/tabs.hbs
new file mode 100644
index 0000000..3b97b89
--- /dev/null
+++ b/app/components/tabs.hbs
@@ -0,0 +1,3 @@
+<div class='flex mb-4 border-b overflow-x-auto overflow-y-hidden'>
+  {{yield}}
+</div>
diff --git a/app/templates/admin/indexes/item.hbs b/app/templates/admin/indexes/item.hbs
index b67100b..dd7d9bb 100644
--- a/app/templates/admin/indexes/item.hbs
+++ b/app/templates/admin/indexes/item.hbs
@@ -1,11 +1,11 @@
 <Headers::H1 @title={{capitalize @model.uid}}/>
 
-<div class="flex mb-4">
+<Tabs>
   <Tab @route="admin.indexes.item.documents" @text="Documents" @model={{@model}} />
   <Tab @route="admin.indexes.item.info" @text="Info" @model={{@model}} />
   <Tab @route="admin.indexes.item.settings" @text="Settings" @model={{@model}} />
   <Tab @route="admin.indexes.item.edit" @text="Edit" @model={{@model}} />
   <Tab @route="admin.indexes.item.delete" @text="Delete" @model={{@model}} />
-</div>
+</Tabs>
 
 {{outlet}}
diff --git a/app/templates/admin/indexes/item/documents/document.hbs b/app/templates/admin/indexes/item/documents/document.hbs
index c6aee27..02df3d1 100644
--- a/app/templates/admin/indexes/item/documents/document.hbs
+++ b/app/templates/admin/indexes/item/documents/document.hbs
@@ -1,9 +1,9 @@
 {{#let (array @model.index.uid (get @model.document @model.index.primaryKey)) as |models|}}
-  <div class="flex mb-4">
+  <Tabs>
     <Tab @route="admin.indexes.item.documents.document.index" @text="View" @models={{models}} />
     <Tab @route="admin.indexes.item.documents.document.edit" @text="Edit" @models={{models}} />
     <Tab @route="admin.indexes.item.documents.document.delete" @text="Delete" @models={{models}} />
-  </div>
+  </Tabs>
 {{/let}}
 
 {{outlet}}
diff --git a/tests/integration/components/tabs-test.js b/tests/integration/components/tabs-test.js
new file mode 100644
index 0000000..aed38a9
--- /dev/null
+++ b/tests/integration/components/tabs-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 | tabs', 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`<Tabs />`);
+
+    assert.dom(this.element).hasText('');
+
+    // Template block usage:
+    await render(hbs`
+      <Tabs>
+        template block text
+      </Tabs>
+    `);
+
+    assert.dom(this.element).hasText('template block text');
+  });
+});