Merge pull request #137 from fleetbase/dev-v0.3.36

v0.3.36

Author: roncodes

addon/components/layout/resource/tabular-actions.hbs

@@ -25,10 +25,11 @@
     @buttonWrapperClass={{@filterPickerButtonClass}}
     @gridCols={{@filterPickerGridCols}}
     @width={{@filterPickerWidth}}
+    @size={{@filterPickerSize}}
     @iconOnly={{true}}
 />
 {{#unless @hideColumnsPicker}}
-    <VisibleColumnPicker @columns={{@columns}} @onChange={{fn (mut @columns)}} @iconOnly={{true}} class={{@columnPickerButtonClass}} />
+    <VisibleColumnPicker @columns={{@columns}} @onChange={{fn (mut @columns)}} @iconOnly={{true}} @size={{@columnPickerSize}} class={{@columnPickerButtonClass}} />
 {{/unless}}
 {{#if (safe-has @table "selectedRows")}}
     <DropdownButton
@@ -68,8 +69,14 @@
             @icon={{actionButton.icon}}
             @size={{actionButton.size}}
             @iconPrefix={{actionButton.prefix}}
+            @buttonClass={{actionButton.buttonClass}}
+            @buttonWrapperClass={{actionButton.wrapperClass}}
             @triggerClass={{actionButton.triggerClass}}
-            @renderInPlace={{or actionButton.renderInPlace true}}
+            @renderInPlace={{actionButton.renderInPlace}}
+            @isLoading={{actionButton.isLoading}}
+            @disabled={{actionButton.disabled}}
+            @helpText={{actionButton.helpText}}
+            @tooltipPlacement={{actionButton.tooltipPlacement}}
             as |dd|
         >
             <div class="next-dd-menu mt-1 mx-0" aria-labelledby="user-menu">
@@ -150,4 +157,4 @@
 {{/if}}
 {{#if (has-block "end")}}
     {{yield to="end"}}
-{{/if}}
+{{/if}}

addon/components/layout/resource/tabular.hbs

@@ -162,6 +162,7 @@
             @paginationMeta={{@data.meta}}
             @page={{@page}}
             @onPageChange={{@onPageChange}}
+            @wrapperClass={{@tableWrapperClass}}
             @tfootVerticalOffset={{@tfootVerticalOffset}}
             @tfootVerticalOffsetElements={{@tfootVerticalOffsetElements}}
             @onSort={{this.handleSort}}

addon/components/table/cell/dropdown.js

@@ -56,13 +56,16 @@ export default class TableCellDropdownComponent extends Component {
         }
     }
 
-    @action calculatePosition(trigger) {
-        let { width } = trigger.getBoundingClientRect();
+    @action calculatePosition(trigger, content) {
+        const triggerRect = trigger.getBoundingClientRect();
+        const contentRect = content?.getBoundingClientRect?.();
+        const contentWidth = contentRect?.width || 224;
 
         let style = {
+            position: 'fixed',
             marginTop: '0px',
-            right: width + 3,
-            top: 0,
+            left: `${triggerRect.left - contentWidth - 3}px`,
+            top: `${triggerRect.top}px`,
         };
 
         return { style };

addon/services/sidebar-navigator.js

@@ -106,6 +106,16 @@ export default class SidebarNavigatorService extends Service {
     }
 
     isActive(item = {}, routeName = this.router?.currentRouteName, currentURL = this.router?.currentURL) {
+        if (typeof item.activeWhen === 'function') {
+            try {
+                if (item.activeWhen({ routeName, currentURL, router: this.router })) {
+                    return true;
+                }
+            } catch (_) {
+                // Fall back to normal route/url matching below.
+            }
+        }
+
         if (item.route && routeName?.startsWith(item.route)) {
             return true;
         }

addon/styles/addon.css

@@ -1,5 +1,8 @@
 /** Layout */
 @import 'layout/reset.css';
+@import "ember-basic-dropdown/vendor/ember-basic-dropdown.css";
+@import 'ember-power-select/vendor/ember-power-select.css';
+@import 'air-datepicker/air-datepicker.css';
 @import 'layout/next.css';
 @import 'layout/legacy.css';
 @import 'layout/mobile.css';
@@ -57,10 +60,6 @@
 @import 'components/template-builder.css';
 @import 'components/fleetbase-attribution.css';
 
-/** Third party */
-@import "ember-basic-dropdown/vendor/ember-basic-dropdown.css";
-@import 'ember-power-select/vendor/ember-power-select.css';
-@import 'air-datepicker/air-datepicker.css';
 .fleetbase-docs-panel-body {
     position: relative;
     height: 100%;

addon/styles/components/basic-dropdown.css

@@ -55,6 +55,10 @@ body.fleetbase-console .ember-basic-dropdown-content {
     margin: 0 !important;
 }
 
+.ember-basic-dropdown-content-wormhole-origin {
+    display: contents;
+}
+
 body.fleetbase-console .ember-power-select-trigger {
     padding: 0.5rem 2.5rem 0.5rem 0.75rem;
-}
+}

addon/styles/components/table.css

@@ -153,6 +153,14 @@
     @apply bg-blue-700;
 }
 
+.next-table-wrapper.no-table-extra-spacing.has-floating-pagination {
+    padding-bottom: 0;
+}
+
+.next-table-wrapper.no-table-extra-spacing > table > tbody:after {
+    height: 0;
+}
+
 .next-table-wrapper table tbody tr td .next-table-empty-state span.btn-wrapper > button.btn {
     height: auto;
     min-height: unset;

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/ember-ui",
-    "version": "0.3.35",
+    "version": "0.3.36",
     "description": "Fleetbase UI provides all the interface components, helpers, services and utilities for building a Fleetbase extension into the Console.",
     "keywords": [
         "fleetbase-ui",

tests/integration/components/layout/resource/tabular-test.js

@@ -23,4 +23,19 @@ module('Integration | Component | layout/resource/tabular', function (hooks) {
 
         assert.dom().hasText('template block text');
     });
+
+    test('it forwards table wrapper class to the table component', async function (assert) {
+        this.set('columns', [{ label: 'Name', valuePath: 'name' }]);
+        this.set('rows', [{ name: 'Ada' }]);
+
+        await render(hbs`
+            <Layout::Resource::Tabular
+                @data={{this.rows}}
+                @columns={{this.columns}}
+                @tableWrapperClass="no-table-extra-spacing"
+            />
+        `);
+
+        assert.dom('.next-table-wrapper').hasClass('no-table-extra-spacing');
+    });
 });

tests/integration/components/layout/sidebar/navigator-test.js

@@ -106,6 +106,40 @@ module('Integration | Component | layout/sidebar/navigator', function (hooks) {
         assert.dom('.next-sidebar-navigator-back').includesText('Settings');
     });
 
+    test('it uses item activeWhen callbacks for nested route sync and active state', async function (assert) {
+        class RouterStub extends Service {
+            currentRouteName = 'console.virtual';
+            currentURL = '/fleet-ops/management/contracts';
+
+            on() {}
+            off() {}
+        }
+
+        this.owner.register('service:router', RouterStub);
+        this.set('items', [
+            {
+                label: 'Resources',
+                children: [
+                    {
+                        label: 'Contracts',
+                        activeWhen: ({ routeName, currentURL }) => routeName === 'console.virtual' && currentURL === '/fleet-ops/management/contracts',
+                        onClick: () => this.set('selected', 'contracts'),
+                    },
+                ],
+            },
+            {
+                label: 'Settings',
+                route: 'console.settings',
+            },
+        ]);
+
+        await render(hbs`<Layout::Sidebar::Navigator @items={{this.items}} />`);
+
+        assert.dom('.next-sidebar-navigator-back').includesText('Resources');
+        assert.dom('.next-sidebar-navigator-view-in .next-sidebar-navigator-item').includesText('Contracts');
+        assert.dom('.next-sidebar-navigator-view-in .next-sidebar-navigator-item').hasClass('is-active');
+    });
+
     test('it yields nested footer state', async function (assert) {
         await render(hbs`
             <Layout::Sidebar::Navigator @items={{this.items}}>