Merge pull request #33 from fleetbase/feature/patch-sidebar-content-p…

…anel-args added all arguments available from `<ContentPanel />` to be available…
fleetbase · Nov 24, 2023 · 219382b · 219382b
2 parents 7c0a522 + 9ed372d
commit 219382b
Show file tree

Hide file tree

Showing 9 changed files with 208 additions and 19 deletions.
diff --git a/addon/components/content-panel.hbs b/addon/components/content-panel.hbs
@@ -44,19 +44,61 @@
                     </div>
                 </a>
                 <div class="next-content-panel-header-right {{@panelHeaderRightClass}}">
-                    {{#if @prefixTitleRight}}
-                        <div class={{@prefixTitleRightContainerClass}}>
-                            <span class="text-xs {{@prefixTitleRightClass}}">{{@prefixTitleRight}}</span>
-                        </div>
-                    {{/if}}
-                    {{#if @titleStatusRight}}
-                        <span class="ml-2 {{@titleStatusRightContainerClass}}">
-                            <Badge @status={{@titleStatusRight}} @hideStatusDot={{@hideStatusDot}} class={{@titleStatusRightClass}} @disableHumanize={{@disableTitleStatusRightHumanize}} />
-                        </span>
+                    {{#if @titleRightSideComponent}}
+                        {{component @titleRightSideComponent context=@titleRightSideComponentContext}}
+                    {{else}}
+                        {{#if @prefixTitleRight}}
+                            <div class={{@prefixTitleRightContainerClass}}>
+                                <span class="text-xs {{@prefixTitleRightClass}}">{{@prefixTitleRight}}</span>
+                            </div>
+                        {{/if}}
+                        {{#if @titleStatusRight}}
+                            <span class="ml-2 {{@titleStatusRightContainerClass}}">
+                                {{#if @titleStatusRightText}}
+                                    <Badge @status={{@titleStatusRight}} @hideStatusDot={{@hideRightTitleStatusDot}} class={{@titleStatusRightClass}} @disableHumanize={{@disableTitleStatusRightHumanize}}>
+                                        {{@titleStatusRightText}}
+                                    </Badge>
+                                {{else}}
+                                    <Badge @status={{@titleStatusRight}} @hideStatusDot={{@hideRightTitleStatusDot}} class={{@titleStatusRightClass}} @disableHumanize={{@disableTitleStatusRightHumanize}} />
+                                {{/if}}
+                            </span>
+                        {{/if}}
+                        {{#each @actionButtons as |button|}}
+                            <Button @type={{button.type}} @text={{button.text}} @icon={{button.icon}} @size={{button.size}} @iconPrefix={{button.iconPrefix}} @onClick={{button.onClick}} />
+                        {{/each}}
+                        {{#if @dropdownButton}}
+                            <DropdownButton @icon={{or @dropdownButtonIcon "ellipsis"}} @iconPrefix={{@dropdownButtonIconPrefix}} @text={{@dropdownButtonText}} @size="xs" @horizontalPosition="left" @calculatePosition={{@dropdownButtonCalculatePosition}} @renderInPlace={{or @dropdownButtonRenderInPlace true}} as |dd|>
+                                <div class="next-dd-menu mt-0i" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
+                                    {{#if @dropdownButtonMenuLabel}}
+                                        <div class="px-1">
+                                            <div class="text-sm flex flex-row items-center px-3 py-1 rounded-md my-1 text-gray-800 dark:text-gray-300">
+                                                {{@dropdownButtonMenuLabel}}
+                                            </div>
+                                        </div>
+                                        <div class="next-dd-menu-seperator"></div>
+                                    {{/if}}
+                                    {{#each @dropdownButtonActions as |action|}}
+                                        {{#if action.separator}}
+                                            <div class="next-dd-menu-seperator"></div>
+                                        {{else}}
+                                            {{#if (is-dd-item-visible action.context action.isVisible)}}
+                                                <div role="group" class="px-1">
+                                                    <a href="javascript:;" role="menuitem" class="next-dd-item {{action.class}}" {{on "click" (fn this.onDropdownItemClick action dd)}}>
+                                                        {{#if action.icon}}
+                                                            <span class="mr-1">
+                                                                <FaIcon class={{action.iconClass}} @icon={{action.icon}} @prefix={{action.iconPrefix}} />
+                                                            </span>
+                                                        {{/if}}
+                                                        {{action.label}}
+                                                    </a>
+                                                </div>
+                                            {{/if}}
+                                        {{/if}}
+                                    {{/each}}
+                                </div>
+                            </DropdownButton>
+                        {{/if}}
                     {{/if}}
-                    {{#each @actionButtons as |button|}}
-                        <Button @type={{button.type}} @text={{button.text}} @icon={{button.icon}} @size={{button.size}} @iconPrefix={{button.iconPrefix}} @onClick={{button.onClick}} />
-                    {{/each}}
                 </div>
             </div>
             <div class="next-content-panel-body {{if this.isOpen 'next-content-panel-is-open' 'next-content-panel-is-closed'}} {{@panelBodyClass}} {{if @isLoading 'is-loading'}}">

diff --git a/addon/components/content-panel.js b/addon/components/content-panel.js
@@ -26,4 +26,18 @@ export default class ContentPanelComponent extends Component {
     @action close() {
         this.isOpen = false;
     }
+
+    @action onDropdownItemClick(action, dd) {
+        if (typeof dd.actions === 'object' && typeof dd.actions.close === 'function') {
+            dd.actions.close();
+        }
+
+        if (typeof action.fn === 'function') {
+            action.fn(action.context);
+        }
+
+        if (typeof action.onClick === 'function') {
+            action.onClick(action.context);
+        }
+    }
 }
diff --git a/addon/components/dropdown-button.hbs b/addon/components/dropdown-button.hbs
@@ -1,4 +1,4 @@
-<BasicDropdown class={{@wrapperClass}} @renderInPlace={{@renderInPlace}} @registerAPI={{@registerAPI}} @horizontalPosition={{@horizontalPosition}} @verticalPosition={{@verticalPosition}} @calculatePosition={{@calculatePosition}} @defaultClass={{@defaultClass}} @matchTriggerWidth={{@matchTriggerWidth}} @onOpen={{@onOpen}} @onClose={{@onClose}} as |dd|>
+<BasicDropdown class={{@wrapperClass}} @renderInPlace={{@renderInPlace}} @registerAPI={{@registerAPI}} @horizontalPosition={{@horizontalPosition}} @verticalPosition={{@verticalPosition}} @calculatePosition={{@calculatePosition}} @defaultClass={{@defaultClass}} @matchTriggerWidth={{@matchTriggerWidth}} @onOpen={{@onOpen}} @onClose={{@onClose}} {{did-insert this.onInsert}} as |dd|>
     <dd.Trigger class={{@triggerClass}}>
         {{#if @buttonComponent}}
             {{component @buttonComponent buttonComponentArgs=this.buttonComponentArgs text=@text class=(concat @buttonClass (if dd.isOpen ' dd-is-open')) wrapperClass=@buttonWrapperClass type=this.type active=@active size=this.buttonSize isLoading=@isLoading disabled=@disabled textClass=@textClass helpText=@helpText tooltipPlacement=@tooltipPlacement img=@img imgClass=@imgClass alt=@alt}}

diff --git a/addon/components/dropdown-button.js b/addon/components/dropdown-button.js
@@ -1,5 +1,5 @@
 import Component from '@glimmer/component';
-import { computed } from '@ember/object';
+import { computed, action } from '@ember/object';
 import { isBlank } from '@ember/utils';
 
 export default class DropdownButtonComponent extends Component {
@@ -32,4 +32,15 @@ export default class DropdownButtonComponent extends Component {
 
         return isBlank(buttonComponentArgs) || typeof buttonComponentArgs !== 'object' ? {} : buttonComponentArgs;
     }
+
+    /**
+     * Trigger callback when dropdown button node is inserted to dom.
+     *
+     * @memberof DropdownButtonComponent
+     */
+    @action onInsert() {
+        if (typeof this.args.onInsert === 'function') {
+            this.args.onInsert(...arguments);
+        }
+    }
 }
diff --git a/addon/components/layout/sidebar/item.hbs b/addon/components/layout/sidebar/item.hbs
@@ -1,8 +1,58 @@
-<a href="javascript:;" class="next-nav-item {{if this.active 'active'}}" {{on "click" this.onClick}} ...attributes>
+<a href="javascript:;" class="next-nav-item {{if this.active 'active'}} {{if @dropdownButton 'next-nav-item-with-dropdown'}}" {{on "click" this.onClick}} ...attributes>
     <div class="next-nav-item-icon-container {{@iconWrapperClass}}">
         {{#if @icon}}
             <FaIcon @prefix={{@iconPrefix}} @icon={{@icon}} @size={{or @iconSize "xs"}} class={{@iconClass}} />
         {{/if}}
     </div>
     <div class="truncate w-10/12 {{@itemWrapperClass}}">{{yield}}</div>
+    <div class="next-nav-item-right-side {{@itemRightSideContainerClass}}">
+        {{#if @rightSideComponent}}
+            {{component @rightSideComponent context=@rightSideComponentContext}}
+        {{else}}
+            {{#if @rightSideStatus}}
+                <span class="ml-2 {{@rightSideStatusContainerClass}}">
+                    {{#if @rightSideStatusText}}
+                        <Badge @status={{@rightSideStatus}} @hideStatusDot={{@hideRightSideStatusDot}} class={{@rightSideStatusClass}} @disableHumanize={{@disableRightSideStatusHumanize}}>
+                            {{@rightSideStatusText}}
+                        </Badge>
+                    {{else}}
+                        <Badge @status={{@rightSideStatus}} @hideStatusDot={{@hideRightSideStatusDot}} class={{@rightSideStatusClass}} @disableHumanize={{@disableRightSideStatusHumanize}} />
+                    {{/if}}
+                </span>
+            {{/if}}
+            {{#if @dropdownButton}}
+                <DropdownButton @icon={{or @dropdownButtonIcon "ellipsis"}} @iconPrefix={{@dropdownButtonIconPrefix}} @text={{@dropdownButtonText}} @size="xs" @horizontalPosition="left" @calculatePosition={{@dropdownButtonCalculatePosition}} @renderInPlace={{or @dropdownButtonRenderInPlace true}} @wrapperClass={{concat @dropdownButtonWrapperClass " " "next-nav-item-dropdown-button"}} @triggerClass={{@dropdownButtonTriggerClass}} @registerAPI={{@registerAPI}} @onInsert={{this.onInsert}} as |dd|>
+                    <div class="next-dd-menu mt-0i" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
+                        {{#if @dropdownButtonMenuLabel}}
+                            <div class="px-1">
+                                <div class="text-sm flex flex-row items-center px-3 py-1 rounded-md my-1 text-gray-800 dark:text-gray-300">
+                                    {{@dropdownButtonMenuLabel}}
+                                </div>
+                            </div>
+                            <div class="next-dd-menu-seperator"></div>
+                        {{/if}}
+                        {{#each @dropdownButtonActions as |action|}}
+                            {{#if action.separator}}
+                                <div class="next-dd-menu-seperator"></div>
+                            {{else}}
+                                {{#if (is-dd-item-visible action.context action.isVisible)}}
+                                    <div role="group" class="px-1">
+                                        {{!-- template-lint-disable no-nested-interactive --}}
+                                        <a href="javascript:;" role="menuitem" class="next-dd-item {{action.class}}" {{on "click" (fn this.onDropdownItemClick action dd)}}>
+                                            {{#if action.icon}}
+                                                <span class="mr-1">
+                                                    <FaIcon class={{action.iconClass}} @icon={{action.icon}} @prefix={{action.iconPrefix}} />
+                                                </span>
+                                            {{/if}}
+                                            {{action.label}}
+                                        </a>
+                                    </div>
+                                {{/if}}
+                            {{/if}}
+                        {{/each}}
+                    </div>
+                </DropdownButton>
+            {{/if}}
+        {{/if}}
+    </div>
 </a>
diff --git a/addon/components/layout/sidebar/item.js b/addon/components/layout/sidebar/item.js
@@ -9,6 +9,7 @@ export default class LayoutSidebarItemComponent extends Component {
     @service router;
     @service hostRouter;
     @tracked active;
+    @tracked dropdownButtonNode;
 
     constructor() {
         super(...arguments);
@@ -41,6 +42,11 @@ export default class LayoutSidebarItemComponent extends Component {
     }
 
     @action onClick(event) {
+        if (this.isPointerWithinDropdownButton(event)) {
+            event.preventDefault();
+            return;
+        }
+
         const { url, target, route, model, onClick, options } = this.args;
         const router = this.getRouter();
         const anchor = event.target?.closest('a');
@@ -78,6 +84,36 @@ export default class LayoutSidebarItemComponent extends Component {
         }
     }
 
+    @action onDropdownItemClick(action, dd) {
+        if (typeof dd.actions === 'object' && typeof dd.actions.close === 'function') {
+            dd.actions.close();
+        }
+
+        if (typeof action.fn === 'function') {
+            action.fn(action.context);
+        }
+
+        if (typeof action.onClick === 'function') {
+            action.onClick(action.context);
+        }
+    }
+
+    @action onInsert(dropdownButtonNode) {
+        this.dropdownButtonNode = dropdownButtonNode;
+
+        if (typeof this.args.onDropdownButtonInsert === 'function') {
+            this.args.onDropdownButtonInsert(...arguments);
+        }
+    }
+
+    isPointerWithinDropdownButton({ target }) {
+        if (this.dropdownButtonNode) {
+            return this.dropdownButtonNode.contains(target);
+        }
+
+        return false;
+    }
+
     getRouter() {
         return this.router ?? this.hostRouter;
     }

diff --git a/addon/components/layout/sidebar/panel.hbs b/addon/components/layout/sidebar/panel.hbs
@@ -1,3 +1,3 @@
-<ContentPanel @title={{@title}} @open={{@open}} @wrapperClass="next-sidebar-panel-container {{@wrapperClass}}" @containerClass="next-sidebar-panel {{@containerClass}}" @panelHeaderClass="next-sidebar-panel-toggle {{@panelHeaderClass}}">
+<ContentPanel @title={{@title}} @open={{@open}} @wrapperClass="next-sidebar-panel-container {{@wrapperClass}}" @containerClass="next-sidebar-panel {{@containerClass}}" @panelHeaderClass="next-sidebar-panel-toggle {{@panelHeaderClass}}" @prefixTitle={{@prefixTitle}} @titleComponent={{@titleComponent}} @titleComponentContext={{@titleComponentContext}} @titleContainerClass={{@titleContainerClass}} @panelTitleClass={{@panelTitleClass}} @titleStatusRight={{@titleStatusRight}} @titleStatusRightText={{@titleStatusRightText}} @titleStatusRightContainerClass={{@titleStatusRightContainerClass}} @hideRightTitleStatusDot={{@hideRightTitleStatusDot}} @titleStatusRightClass={{concat "next-content-panel-status-badge" " " @titleStatusRightClass}} @disableTitleStatusRightHumanize={{@disableTitleStatusRightHumanize}} @prefixTitleRight={{@prefixTitleRight}} @prefixTitleRightContainerClass={{@prefixTitleRightContainerClass}} @prefixTitleRightClass={{@prefixTitleRightClass}} @titleRightSideComponent={{@titleRightSideComponent}} @titleRightSideComponentContext={{@titleRightSideComponentContext}} @actionButtons={{@actionButtons}} @dropdownButton={{@dropdownButton}} @dropdownButtonActions={{@dropdownButtonActions}} @dropdownButtonIcon={{@dropdownButtonIcon}} @dropdownButtonIconPrefix={{@dropdownButtonIconPrefix}} @dropdownButtonText={{@dropdownButtonText}} @dropdownButtonCalculatePosition={{@dropdownButtonCalculatePosition}} @dropdownButtonRenderInPlace={{@dropdownButtonRenderInPlace}} @dropdownButtonMenuLabel={{@dropdownButtonMenuLabel}} ...attributes>
     {{yield}}
 </ContentPanel>
diff --git a/addon/helpers/is-dd-item-visible.js b/addon/helpers/is-dd-item-visible.js
@@ -1,7 +1,8 @@
 import { helper } from '@ember/component/helper';
+import { isNone } from '@ember/utils';
 
-export default helper(function isDdItemVisible([row, isVisible]) {
-    if (!isVisible) {
+export default helper(function isDdItemVisible([context, isVisible]) {
+    if (isNone(context) || !isVisible) {
         return true;
     }
 
@@ -10,7 +11,7 @@ export default helper(function isDdItemVisible([row, isVisible]) {
     }
 
     if (typeof isVisible === 'function') {
-        return isVisible(row);
+        return isVisible(context);
     }
 
     return true;

diff --git a/addon/styles/components/panel.css b/addon/styles/components/panel.css
@@ -53,3 +53,38 @@
 #serviceContainer.developers-console-service .content-panel > .content-panel-header:not(.min-h-0) {
     min-height: 75px;
 }
+
+.next-content-panel > .next-content-panel-header > .next-content-panel-header-right .next-content-panel-status-badge {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+}
+
+.next-content-panel > .next-content-panel-header > .next-content-panel-header-right .next-content-panel-status-badge > span {
+    font-size: 10px;
+    padding: 0.25rem;
+    line-height: 1;
+    font-weight: 600;
+    border-radius: 0.35rem;
+    @apply shadow-sm;
+}
+
+.next-content-panel a.next-nav-item.next-nav-item-with-dropdown .next-nav-item-dropdown-button,
+.next-content-panel a.next-nav-item.next-nav-item-with-dropdown .next-nav-item-dropdown-button button {
+    cursor: default;
+}
+
+.next-content-panel a.next-nav-item.next-nav-item-with-dropdown .next-nav-item-dropdown-button button:hover {
+    background-color: initial;
+}
+
+.next-content-panel a.next-nav-item.next-nav-item-with-dropdown .next-nav-item-dropdown-button button.btn {
+    padding-top: 0.15rem;
+    padding-bottom: 0.15rem;
+    font-size: 10px;
+    margin-right: -0.5rem;
+    line-height: 0.5;
+}
+.next-content-panel a.next-nav-item.next-nav-item-with-dropdown {
+    overflow: visible;
+}