Add support for table-actions named block (#227)

* add support for table-actions named block * update the radius of the manage fields dropdown * fix issue when the click-outside target also triggers a dropdown * typo fix * fix tests
upfluence · Jan 22, 2025 · 6bfa4d7 · 6bfa4d7
1 parent 23e2afa
commit 6bfa4d7
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 4 deletions.
diff --git a/addon/components/hyper-table-v2/index.hbs b/addon/components/hyper-table-v2/index.hbs
@@ -29,6 +29,11 @@
           @loading={{this.loadingResetFilters}}
           data-control-name="hypertable_reset_filters_button"
         />
+
+        {{#if (has-block "table-actions")}}
+          {{yield to="table-actions"}}
+        {{/if}}
+
         <HyperTableV2::ManageColumns @handler={{@handler}} @didInsertColumn={{this.scrollToEnd}} />
       </div>
     </div>

diff --git a/addon/components/hyper-table-v2/manage-columns.hbs b/addon/components/hyper-table-v2/manage-columns.hbs
@@ -1,4 +1,4 @@
-<div class="hypertable__manage-fields" {{on-click-outside this.closeAvailableFields}}>
+<div class="hypertable__manage-fields" {{on-click-outside this.closeAvailableFields useCapture=true}}>
   <OSS::Button
     @icon="fas fa-columns"
     @label={{t "hypertable.features.manage_fields.title"}}

diff --git a/app/styles/header.less b/app/styles/header.less
@@ -164,7 +164,7 @@
   .table-views-wrapper {
     background-color: var(--color-white);
     box-shadow: 0 0 1.2rem rgba(0, 0, 0, 0.2);
-    border-radius: var(--border-radius-sm);
+    border-radius: var(--border-radius-md);
     margin-top: 7px;
     display: flex;
     position: absolute;

diff --git a/tests/integration/components/hyper-table-v2-test.ts b/tests/integration/components/hyper-table-v2-test.ts
@@ -492,6 +492,20 @@ module('Integration | Component | hyper-table-v2', function (hooks) {
     });
   });
 
+  module('Table Actions named-block is displayed if defined', () => {
+    test('if a <:table-actions> named-block is passed to the component, then it should be visible in the table', async function (assert: Assert) {
+      await render(hbs`
+        <HyperTableV2 @handler={{this.handler}}>
+          <:table-actions>
+            <div id="example-table-action-named-block"></div>
+          </:table-actions>
+        </HyperTableV2>
+      `);
+
+      assert.dom('#example-table-action-named-block').exists();
+    });
+  });
+
   function stubFetchMultipleRows(handler: TableHandler): void {
     sinon
       .stub(handler.rowsFetcher, 'fetch')

diff --git a/tests/integration/components/hyper-table-v2/filtering-renderers/common/facets-loader-test.ts b/tests/integration/components/hyper-table-v2/filtering-renderers/common/facets-loader-test.ts
@@ -174,7 +174,7 @@ module('Integration | Component | hyper-table-v2/facets-loader', function (hooks
 
       assert
         .dom('.hypertable__facetting .upf-align--center .text-color-default')
-        .hasText('There are no result for your current search.');
+        .hasText(this.intl.t('hypertable.column.facetting.empty_state.tagline'));
       assert
         .dom('.hypertable__facetting .upf-align--center .text-color-default-light')
         .hasText('Please update your filters.');

diff --git a/translations/en-us.yaml b/translations/en-us.yaml
@@ -34,7 +34,7 @@ hypertable:
           placeholder: Date Range
     facetting:
       empty_state:
-        tagline: There are no result for your current search.
+        tagline: There are no results for your current search.
         tagline_1: Please update your filters.
   rows:
     empty_content: Nothing here