Merge pull request #3 from fleetbase/dev-v0.0.3

v0.0.3

Author: roncodes

.eslintrc.js

@@ -16,6 +16,10 @@ module.exports = {
     env: {
         browser: true,
     },
+    globals: {
+        socketClusterClient: 'readonly',
+        L: 'readonly',
+    },
     rules: {
         'ember/no-array-prototype-extensions': 'off',
         'ember/no-computed-properties-in-native-classes': 'off',
@@ -27,7 +31,7 @@ module.exports = {
         'n/no-unpublished-require': [
             'error',
             {
-                allowModules: ['resolve', 'broccoli-funnel'],
+                allowModules: ['resolve'],
             },
         ],
     },

.stylelintignore

@@ -6,3 +6,7 @@
 
 # addons
 /.node_modules.ember-try/
+
+# server
+/server/
+/server_vendor/

.stylelintrc.js

@@ -2,4 +2,9 @@
 
 module.exports = {
     extends: ['stylelint-config-standard', 'stylelint-prettier/recommended'],
+    rules: {
+        'selector-class-pattern': null,
+        'no-descending-specificity': null,
+        'color-function-notation': null,
+    },
 };

addon/components/explorer-header.hbs

@@ -0,0 +1,18 @@
+<div id="next-view-section-subheader" class="next-view-section-subheader {{if @hideActions 'actions-hidden'}}" ...attributes>
+    <div id="next-view-section-subheader-left" class="next-view-section-subheader-left {{@leftSubheaderClass}}">
+        <div class="flex flex-row items-center">
+            <FaIcon @icon="folder-tree" @size="sm" class="{{@iconClass}} text-gray-200 dark:text-gray-600 mr-2" />
+            <div class="pod-explorer-breadcrumb-container">
+                {{#each this.state as |content|}}
+                    <a href="#" class="pod-explorer-breadcrumb {{if (eq @current content.id) "active-breadcrumb"}} {{@breadcrumbClass}}" {{on "click" (fn this.onStateClicked content)}}>{{content.name}}</a>
+                {{/each}}
+            </div>
+        </div>
+    </div>
+    <div id="next-view-section-subheader-actions" class="next-view-section-subheader-actions {{@actionsWrapperClass}}">
+        {{#if @onSearch}}
+            <Input @type="text" @value={{@searchQuery}} aria-label={{t "common.search-input"}} placeholder={{or @searchPlaceholder (concat (t "common.search") " " (pluralize @title))}} class="w-64 mr-2 form-input form-input-sm {{@searchInputClass}}" {{on "keyup" @onSearch}} />
+        {{/if}}
+        {{yield}}
+    </div>
+</div>

addon/components/explorer-header.js

@@ -0,0 +1,25 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class ExplorerHeaderComponent extends Component {
+    @service explorerState;
+    @tracked state = [];
+
+    constructor(owner, { pod }) {
+        super(...arguments);
+        this.state = this.explorerState.get(pod);
+        this.explorerState.on('change', (id, state) => {
+            if (id === pod) {
+                this.state = state;
+            }
+        });
+    }
+
+    @action onStateClicked(content) {
+        if (typeof this.args.onStateClicked === 'function') {
+            this.args.onStateClicked(content);
+        }
+    }
+}

addon/components/modals/backup-pod.hbs

@@ -0,0 +1,3 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container"></div>
+</Modal::Default>

addon/components/modals/create-pod.hbs

@@ -0,0 +1,5 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <InputGroup @name="Pod Name" @value={{@options.pod.name}} @helpText="Input a name for your new Pod" />
+    </div>
+</Modal::Default>

addon/components/modals/resync-pod.hbs

@@ -0,0 +1,3 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container"></div>
+</Modal::Default>

addon/components/table/cell/pod-content-actions.hbs

@@ -0,0 +1,32 @@
+<div class="cell-dropdown-button overflow-visible {{@column.wrapperClass}}" {{did-insert this.setupComponent}} ...attributes>
+    <DropdownButton @icon={{@column.ddButtonIcon}} @iconPrefix={{@column.ddButtonIconPrefix}} @text={{this.buttonText}} @size="xs" @horizontalPosition="left" @calculatePosition={{this.calculatePosition}} @renderInPlace={{true}} as |dd|>
+        <div class="next-dd-menu mt-0i" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
+            {{#if @column.ddMenuLabel}}
+                <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">
+                        {{@column.ddMenuLabel}}
+                    </div>
+                </div>
+                <div class="next-dd-menu-seperator"></div>
+            {{/if}}
+            {{#each this.actions as |action|}}
+                {{#if action.separator}}
+                    <div class="next-dd-menu-seperator"></div>
+                {{else}}
+                    {{#if (is-dd-item-visible @row 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 @row 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>
+</div>

addon/components/table/cell/pod-content-actions.js

@@ -0,0 +1,73 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action, computed } from '@ember/object';
+import { isArray } from '@ember/array';
+
+export default class TableCellPodContentActionsComponent extends Component {
+    constructor(owner, { column, row }) {
+        super(...arguments);
+        if (isArray(column.actions)) {
+            this.actions = column.actions;
+        }
+
+        if (typeof column.actions === 'function') {
+            this.actions = column.actions(row);
+        }
+    }
+
+    @tracked actions = [];
+    @tracked defaultButtonText = 'Actions';
+
+    @computed('args.column.ddButtonText', 'defaultButtonText') get buttonText() {
+        const { ddButtonText } = this.args.column;
+
+        if (ddButtonText === undefined) {
+            return this.defaultButtonText;
+        }
+
+        if (ddButtonText === false) {
+            return null;
+        }
+
+        return ddButtonText;
+    }
+
+    @action setupComponent(dropdownWrapperNode) {
+        const tableCellNode = this.getOwnerTableCell(dropdownWrapperNode);
+        tableCellNode.style.overflow = 'visible';
+    }
+
+    @action getOwnerTableCell(dropdownWrapperNode) {
+        while (dropdownWrapperNode) {
+            dropdownWrapperNode = dropdownWrapperNode.parentNode;
+
+            if (dropdownWrapperNode.tagName.toLowerCase() === 'td') {
+                return dropdownWrapperNode;
+            }
+        }
+
+        return undefined;
+    }
+
+    @action onDropdownItemClick(columnAction, row, dd) {
+        if (typeof dd?.actions?.close === 'function') {
+            dd.actions.close();
+        }
+
+        if (typeof columnAction?.fn === 'function') {
+            columnAction.fn(row);
+        }
+    }
+
+    @action calculatePosition(trigger) {
+        let { width } = trigger.getBoundingClientRect();
+
+        let style = {
+            marginTop: '0px',
+            right: width + 3,
+            top: 0,
+        };
+
+        return { style };
+    }
+}