Move styles to addon properly, create a <Kanban /> component

.eslintrc.js

@@ -14,6 +14,7 @@ module.exports = {
     extends: ['eslint:recommended', 'plugin:ember/recommended', 'plugin:prettier/recommended'],
     env: {
         browser: true,
+        node: true,
     },
     globals: {
         module: 'readonly',

.github/workflows/ci.yml

@@ -91,3 +91,32 @@ jobs:
 
     - name: Publish
       run: npm publish --access public
+
+  github_publish:
+    needs: build
+    runs-on: ubuntu-latest
+    if: startsWith(github.ref, 'refs/tags/')
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '16.x'
+      - uses: pnpm/action-setup@v2.0.1
+        with:
+         version: latest
+      - run: pnpm install
+      - run: pnpm run build
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '16.x'
+          registry-url: 'https://npm.pkg.github.com'
+          scope: '@fleetbase'
+      - run: |
+          git config user.name github-actions
+          git config user.email github-actions@github.com
+          npm version patch
+          git push
+          git push --tags
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.template-lintrc.js

@@ -8,5 +8,6 @@ module.exports = {
         'no-down-event-binding': 'off',
         'table-groups': 'off',
         'link-href-attributes': 'off',
+        'simple-unless': 'off',
     },
 };

addon/components/filter/multi-option.hbs

@@ -1,5 +1,5 @@
 <div class="filter-multi-option">
-    <MultiSelect @selectClass="form-input-sm flex-1" @options={{this.options}} @search={{this.search}} @searchField={{@filter.multiOptionSearchField}} @searchEnabled={{@filter.multiOptionSearchEnabled}} @searchPlaceholder={{@filter.multiOptionSearchPlaceholder}} @selected={{this.value}} @placeholder={{@placeholder}} @onChange={{this.onChange}} @allowClear={{@allowClear}} as |option|>
+    <MultiSelect @selectClass="form-input form-input-sm flex-1" @options={{this.options}} @search={{this.search}} @searchField={{@filter.multiOptionSearchField}} @searchEnabled={{@filter.multiOptionSearchEnabled}} @searchPlaceholder={{@filter.multiOptionSearchPlaceholder}} @selected={{this.value}} @placeholder={{@placeholder}} @onChange={{this.onChange}} @allowClear={{@allowClear}} as |option|>
         {{or (get option @optionLabel) option}}
     </MultiSelect>
 

addon/components/filter/select.hbs

@@ -1 +1 @@
-<Select @options={{@options}} @optionLabel={{@optionLabel}} @optionValue={{@optionValue}} @value={{this.value}} @onSelect={{this.onChange}} @placeholder={{@placeholder}} class="w-full form-input form-input-sm" ...attributes />
+<Select @options={{this.options}} @optionLabel={{@filter.optionLabel}} @optionValue={{@filter.optionValue}} @value={{this.value}} @onSelect={{this.onChange}} @placeholder={{@filter.placeholder}} class="w-full form-input form-input-sm" ...attributes />

addon/components/filter/select.js

@@ -1,13 +1,23 @@
 import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { isArray } from '@ember/array';
 
 export default class FilterSelectComponent extends Component {
+    @service fetch;
     @tracked value;
+    @tracked options = [];
+    @tracked isLoading = false;
 
     constructor() {
         super(...arguments);
         this.value = this.args.value;
+        this.options = isArray(this.args.options) ? this.args.options : [];
+
+        if (typeof this.args.filter?.filterFetchOptions === 'string') {
+            this.fetchOptions(this.args.filter?.filterFetchOptions);
+        }
     }
 
     @action onChange(selection) {
@@ -19,4 +29,19 @@ export default class FilterSelectComponent extends Component {
             onChange(filter, selection);
         }
     }
+
+    @action fetchOptions(uri, params = {}) {
+        const { fetchParams } = this.args;
+        const queryParams = Object.assign(params, fetchParams ?? {});
+
+        this.isLoading = true;
+        this.fetch
+            .get(uri, queryParams)
+            .then((options) => {
+                this.options = options;
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
 }

addon/components/kanban.hbs

@@ -0,0 +1,14 @@
+<div class="kanban-container">
+    <div class="kanban-inner-container">
+        {{#each @columns as |column|}}
+            <div class="kanban-column">
+                <div class="kanban-column-header">
+                    <h1 class="text-white">{{smart-humanize column}}</h1>
+                </div>
+                <div class="kanban-column-body">
+
+                </div>
+            </div>
+        {{/each}}
+    </div>
+</div>

addon/components/kanban.js

@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class KanbanComponent extends Component {}

addon/components/kanban/item.hbs

@@ -0,0 +1 @@
+{{yield}}

addon/components/kanban/item.js

@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class KanbanItemComponent extends Component {}

addon/components/layout/header.hbs

@@ -3,26 +3,28 @@
         <LinkToExternal @route="console" class="logo navbar-logo mr-4">
             <LogoIcon @brand={{@brand}} @size="8" />
         </LinkToExternal>
-        <div role="menu" class="next-catalog-menu-items flex mr-4">
-            {{#each @menuItems as |menuItem|}}
-                <LinkToExternal @route={{menuItem.route}} class="next-view-header-item {{menuItem.class}}" role="menuitem">
+        {{#unless (media 'isMobile')}}
+            <div role="menu" class="next-catalog-menu-items flex mr-4">
+                {{#each @menuItems as |menuItem|}}
+                    <LinkToExternal @route={{menuItem.route}} class="next-view-header-item {{menuItem.class}}" role="menuitem">
+                        <div class="w-6">
+                            <FaIcon @icon={{menuItem.icon}} @size="sm" />
+                        </div>
+                        <div>
+                            <span>{{menuItem.title}}</span>
+                        </div>
+                    </LinkToExternal>
+                {{/each}}
+                <LinkToExternal @route="console.extensions" class="next-view-header-item" role="menuitem">
                     <div class="w-6">
-                        <FaIcon @icon={{menuItem.icon}} @size="sm" />
+                        <FaIcon @icon="shapes" @size="sm" />
                     </div>
                     <div>
-                        <span>{{menuItem.title}}</span>
+                        <span>Extensions</span>
                     </div>
                 </LinkToExternal>
-            {{/each}}
-            <LinkToExternal @route="console.extensions" class="next-view-header-item" role="menuitem">
-                <div class="w-6">
-                    <FaIcon @icon="shapes" @size="sm" />
-                </div>
-                <div>
-                    <span>Extensions</span>
-                </div>
-            </LinkToExternal>
-        </div>
+            </div>
+        {{/unless}}
         <div id="view-header-left-content-a"></div>
         {{yield}}
         <div id="view-header-left-content-b"></div>
@@ -32,7 +34,7 @@
         <div id="view-header-actions"></div>
         <div class="flex items-center justify-between">
             <div class="flex-1 flex items-center pr-1">
-                <Layout::Header::Dropdown @items={{this.organizationNavigationItems}} @onAction={{@onAction}} class="flex-shrink-0" @triggerClass="flex-shrink-0" @dropdownMenuClass="py-3" as |dd|>
+                <Layout::Header::Dropdown @items={{this.organizationNavigationItems}} @onAction={{@onAction}} class="flex-shrink-0" @triggerClass="flex-shrink-0" as |dd|>
                     <div class="next-org-button-trigger flex-shrink-0 {{if dd.isOpen 'is-open'}}">
                         <div class="org-badge">
                             {{first-char @user.company_name}}
@@ -42,7 +44,7 @@
                 </Layout::Header::Dropdown>
             </div>
             <div class="flex-1 flex items-center justify-end">
-                <Layout::Header::Dropdown @items={{this.userNavigationItems}} @onAction={{@onAction}} class="flex-shrink-0" @triggerClass="flex-shrink-0" @dropdownMenuClass="py-3" as |dd|>
+                <Layout::Header::Dropdown @items={{this.userNavigationItems}} @onAction={{@onAction}} class="flex-shrink-0" @triggerClass="flex-shrink-0" as |dd|>
                     <div class="next-user-button-trigger flex-shrink-0 {{if dd.isOpen 'is-open'}}">
                         <Image class="rounded-full h-5 w-5 shadow-sm flex-shrink-0" height="20" width="20" src={{@user.avatar_url}} @fallbackSrc="https://s3.ap-southeast-1.amazonaws.com/flb-assets/static/no-avatar.png" alt={{@user.name}} />
                     </div>

addon/components/layout/mobile-navbar.hbs

@@ -1,9 +1,20 @@
 {{#if (media 'isMobile')}}
     <div class="next-mobile-navbar" {{did-insert this.setupMobileNavbar}} ...attributes>
         <div role="menubar" class="next-mobile-navbar-tabs">
-            <ExtensionsList @extensions={{@extensions}} @onAction={{@onAction}} @itemClass="next-mobile-navbar-tab-item" class="scrollable-nav-items" />
+            <div role="menu" class="scrollable-nav-items">
+                {{#each @menuItems as |menuItem|}}
+                    <LinkToExternal @route={{menuItem.route}} class="next-mobile-navbar-tab-item {{menuItem.class}}" role="menuitem">
+                        <div class="w-6">
+                            <FaIcon @icon={{menuItem.icon}} @size="sm" />
+                        </div>
+                        <div>
+                            <span>{{menuItem.title}}</span>
+                        </div>
+                    </LinkToExternal>
+                {{/each}}
+            </div>
             <a href="javascript:;" class="next-mobile-navbar-tab-item menu-toggle" role="menuitem" {{on "click" this.toggleSidebar}}>
-                <FaIcon @icon="bars" @prefix="fal" @size="lg" class="text-gray-800 dark:text-gray-100" />
+                <FaIcon @icon="bars" @size="lg" class="text-gray-800 dark:text-gray-100" />
                 <span>Menu</span>
             </a>
         </div>

addon/components/layout/mobile-navbar.js

@@ -6,26 +6,50 @@ import { action } from '@ember/object';
 export default class LayoutMobileNavbarComponent extends Component {
     @service router;
     @service hostRouter;
-
     @tracked navbarNode;
     @tracked sidebarNode;
 
     @action setupMobileNavbar(element) {
         this.navbarNode = element;
         this.sidebarNode = element.previousElementSibling.querySelector('nav.next-sidebar');
+
+        if (typeof this.args.onSetup === 'function') {
+            this.onSetup(this);
+        }
+
+        // when hostrouter transitions close sidebar automatically
+        this.getRouter().on('routeDidChange', this.closeSidebar.bind(this));
     }
 
-    @action routeTo(route) {
-        const router = this.router ?? this.hostRouter;
+    getRouter() {
+        return this.router ?? this.hostRouter;
+    }
 
-        router.transitionTo(route);
+    @action routeTo(route) {
+        this.getRouter()
+            .transitionTo(route)
+            .then(() => {
+                this.closeSidebar();
+            });
     }
 
     @action toggleSidebar() {
-        if (this.sidebarNode?.classList?.contains('is-open')) {
-            this.sidebarNode?.classList?.remove('is-open');
+        if (this.isSidebarOpen()) {
+            this.closeSidebar();
         } else {
-            this.sidebarNode?.classList?.add('is-open');
+            this.openSidebar();
         }
     }
+
+    @action isSidebarOpen() {
+        return this.sidebarNode?.classList?.contains('is-open');
+    }
+
+    @action closeSidebar() {
+        this.sidebarNode?.classList?.remove('is-open');
+    }
+
+    @action openSidebar() {
+        this.sidebarNode?.classList?.add('is-open');
+    }
 }

addon/components/layout/section/body.hbs

@@ -1 +1 @@
-<div class="next-view-section-body {{if @padded 'px-10 py-4'}}" ...attributes>{{yield}}</div>
+<div class="next-view-section-body {{if @padded 'px-4 lg:px-10 py-4'}}" ...attributes>{{yield}}</div>

addon/components/layout/section/header.hbs

@@ -17,7 +17,7 @@
             {{/if}}
         </div>
         {{#if @onSearch}}
-            <Input @type="text" @value={{@searchQuery}} aria-label="Search Input" placeholder={{or @searchPlaceholder (concat "Search " (pluralize @title))}} class="w-64 ml-3 form-input form-input-sm {{@searchInputClass}}" {{on "keyup" @onSearch}} />
+            <Input @type="text" @value={{@searchQuery}} aria-label={{t "phrases.search-input"}} placeholder={{or @searchPlaceholder (concat (t "terms.search") " " (pluralize @title))}} class="w-64 ml-3 form-input form-input-sm {{@searchInputClass}}" {{on "keyup" @onSearch}} />
         {{/if}}
     </div>
     {{#unless @hideActions}}

addon/components/modals/changelog.hbs

@@ -1,5 +1,5 @@
 <Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
-    <div class="px-5">
+    <div class="px-5 overflow-y-scroll" {{set-height 300}}>
         {{#if this.isLoading}}
             <div class="p-4">
                 <Spinner />

addon/components/stat-widget.hbs

@@ -0,0 +1,4 @@
+<div class="bg-gray-100 dark:bg-gray-700 rounded-lg shadow-sm p-4 flex flex-col items-center justify-center text-center" ...attributes>
+    <h3 class="text-black dark:text-gray-100 text-lg mb-1 {{@titleClass}}">{{@title}}</h3>
+    <h2 class="text-gray-800 dark:text-white text-3xl font-bold {{@valueClass}}">{{@value}}</h2>
+</div>

addon/components/table.hbs

@@ -25,7 +25,7 @@
             <Table::Head @canSelectAll={{@canSelectAll}} @columns={{this.visibleColumns}}>
                 <Table::Row>
                     {{#if @canSelectAll}}
-                        <Table::Th @width={{20}} @resizable={{false}}>
+                        <Table::Th @width={{40}} @resizable={{false}}>
                             <Table::Cell::Checkbox @value={{this.allRowsToggled}} @onToggle={{this.selectAllRows}} />
                         </Table::Th>
                     {{/if}}

app/styles/addon.css → addon/styles/addon.css

@@ -2,6 +2,7 @@
 @import 'layout/reset.css';
 @import 'layout/next.css';
 @import 'layout/legacy.css';
+@import 'layout/mobile.css';
 @import 'layout/utilities.css';
 @import 'layout/dark-theme.css';
 @import 'layout/light-theme.css';
@@ -35,6 +36,7 @@
 @import 'components/ember-power-select.css';
 @import 'components/date-picker.css';
 @import 'components/dashboard.css';
+@import 'components/kanban.css';
 
 /** Third party */
 @import 'air-datepicker/air-datepicker.css';

app/styles/components/dashboard.css → addon/styles/components/dashboard.css

@@ -1,5 +1,5 @@
 .fleetbase-dashboard-grid .dashboard-title {
-    @apply flex flex-row items-center justify-between rounded-lg border border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800 shadow-sm px-4 py-2 mb-4;
+    @apply flex flex-col lg:flex-row lg:items-center lg:justify-between rounded-lg border border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800 shadow-sm px-4 py-2 mb-4;
 }
 
 .fleetbase-dashboard-grid .dashboard-component-count {