@fleetbase/solid-engine 0.0.2 → 0.0.3

package/README.md

@@ -61,6 +61,7 @@ Solid, an innovative technology developed by Sir Tim Berners-Lee, offers a groun
 - Input their server 
 - Input their solid ID on the server 
 - Once installed, users signing up or added to the company within this instance can utilize Solid for data management.
+- More info: The interface which allows the instance administrator to link the Fleetbase Solid extension to the Solid server of their preference. Due to the nature of how Solid is built on an identity basis, and Fleetbase is built as a multi-tenant platform. Each organization on Fleetbase when accessing the instance will be prompted to link their Solid OIDC account [https://github.com/fleetbase/solid/blob/main/addon/controllers/application.js#L16] to their Fleetbase organization per the instance. Once linked all data synced between Solid and Fleetbase will be via the SolidIdentity [https://github.com/fleetbase/solid/blob/main/server/src/Models/SolidIdentity.php]
 
 ### User Authentication and Account Creation:
 
@@ -69,8 +70,31 @@ Solid, an innovative technology developed by Sir Tim Berners-Lee, offers a groun
 - Authorize fleetbase.io to access your Pod. 
 - Solid allows precise control over data access permissions. Note: The current UI version (node-solid-server V5.1) supports toggling global access permissions only. If you prefer granular control, uncheck all boxes and authorize. Then, manage permissions explicitly.
 
+### Fleetbase UI Updates 
+
+- As per the latest release, this is the updated UI screenshots for Fleetbase for users to manage pods.
+
+- You can see the full release details here: https://github.com/fleetbase/solid/pull/2
+
+- Install Solid Extension and click link: 'Sign up for an account' This will take you to Solid to create your own Solid Server & Pods,
+
+![image](https://github.com/fleetbase/solid/assets/58805033/e4cf882a-d04f-4abd-9107-e04cb0a47949)
+
+- Once you head to this link, you can create your own Solid Server. You should be able to generate as per the Screenshot:
+
+<img width="1134" alt="image" src="https://github.com/fleetbase/solid/assets/58805033/97015745-a1a6-487a-a958-fe97d0a7bca7">
+
+
+- Input your Solid Server details directly into Fleetbase in company admin settings
+
+![image](https://github.com/fleetbase/solid/assets/58805033/dcfe2953-71d4-41c0-9243-36811b52017e)
+
+Next steps would be to continue to update the UI from feedback and also conduct thorough testing and documentation. UI enhancements will be things like viewing the specific pods created as well as last synced. 
+
 ### Features:
 
+Fleetbase has implemented a Solid Client which implements the Standard Solid authentication methods to communicate with the server. The Fleetbase SolidClient is able to communicate securely with the Solid protocol using the Standard DPoP encryption method for authentication provided by the Solid specification (https://solidproject.org/TR/oidc#tokens-id)
+
 - Ability to link Fleetbase account with Solid Web ID later via user settings.
 - View and manage data stored on Solid Pod:
   - Orders

package/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>

package/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);
+        }
+    }
+}

package/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>

package/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>

package/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>

package/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>

package/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 };
+    }
+}

package/addon/components/table/cell/pod-content-name.hbs

@@ -0,0 +1,8 @@
+<a href="#" {{on "click" this.onClick}} class={{@column.anchorClass}} disabled={{not @value}} ...attributes>
+    {{#if (has-block)}}
+        {{yield}}
+    {{else}}
+        <FaIcon @icon={{@row.type}} @size="xs" class="mr-1" />
+        <span class={{@column.anchorSpanClass}}>{{or @value @column.anchorText "-"}}</span>
+    {{/if}}
+</a>

package/addon/components/table/cell/pod-content-name.js

@@ -0,0 +1,16 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class TableCellPodContentNameComponent extends Component {
+    @action onClick() {
+        const { column, row } = this.args;
+
+        if (typeof column?.action === 'function') {
+            column.action(row);
+        }
+
+        if (typeof column?.onClick === 'function') {
+            column.onClick(row, ...arguments);
+        }
+    }
+}

package/addon/controllers/account.js

@@ -0,0 +1,130 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { alias } from '@ember/object/computed';
+import { task } from 'ember-concurrency';
+
+export default class AccountController extends Controller {
+    /**
+     * Inject the `currentUser` service.
+     *
+     * @memberof ConsoleAccountIndexController
+     */
+    @service currentUser;
+
+    /**
+     * Inject the `fetch` service.
+     *
+     * @memberof ConsoleAccountIndexController
+     */
+    @service fetch;
+
+    /**
+     * Inject the `notifications` service.
+     *
+     * @memberof ConsoleAccountIndexController
+     */
+    @service notifications;
+
+    /**
+     * Inject the `modalsManager` service.
+     *
+     * @memberof ConsoleAccountIndexController
+     */
+    @service modalsManager;
+
+    /**
+     * Alias to the currentUser service user record.
+     *
+     * @memberof ConsoleAccountIndexController
+     */
+    @alias('currentUser.user') user;
+
+    /**
+     * Handle upload of new photo
+     *
+     * @param {UploadFile} file
+     * @memberof ConsoleAccountIndexController
+     */
+    @action uploadNewPhoto(file) {
+        return this.fetch.uploadFile.perform(
+            file,
+            {
+                path: `uploads/${this.user.company_uuid}/users/${this.user.slug}`,
+                subject_uuid: this.user.id,
+                subject_type: 'user',
+                type: 'user_avatar',
+            },
+            (uploadedFile) => {
+                this.user.setProperties({
+                    avatar_uuid: uploadedFile.id,
+                    avatar_url: uploadedFile.url,
+                });
+
+                return this.user.save();
+            }
+        );
+    }
+
+    /**
+     * Starts the task to change password
+     *
+     * @param {Event} event
+     * @memberof ConsoleAccountIndexController
+     */
+    @task *saveProfile(event) {
+        // If from event fired
+        if (event instanceof Event) {
+            event.preventDefault();
+        }
+
+        let canUpdateProfile = true;
+        // If email has been changed prompt for password validation
+        if (this.changedUserAttribute('email')) {
+            canUpdateProfile = yield this.validatePassword.perform();
+        }
+
+        if (canUpdateProfile === true) {
+            try {
+                const user = yield this.user.save();
+                this.notifications.success('Profile changes saved.');
+                this.currentUser.set('user', user);
+            } catch (error) {
+                this.notifications.serverError(error);
+            }
+        } else {
+            this.user.rollbackAttributes();
+        }
+    }
+
+    /**
+     * Task to validate current password
+     *
+     * @return {boolean}
+     * @memberof ConsoleAccountIndexController
+     */
+    @task *validatePassword() {
+        let isPasswordValid = false;
+
+        yield this.modalsManager.show('modals/validate-password', {
+            body: 'You must validate your password to update the account email address.',
+            onValidated: (isValid) => {
+                isPasswordValid = isValid;
+            },
+        });
+
+        return isPasswordValid;
+    }
+
+    /**
+     * Checks if any user attribute has been changed
+     *
+     * @param {string} attributeKey
+     * @return {boolean}
+     * @memberof ConsoleAccountIndexController
+     */
+    changedUserAttribute(attributeKey) {
+        const changedAttributes = this.user.changedAttributes();
+        return changedAttributes[attributeKey] !== undefined;
+    }
+}

package/addon/controllers/application.js

@@ -1,27 +1,30 @@
 import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
-import { task } from 'ember-concurrency';
+import { tracked } from '@glimmer/tracking';
+import { task, timeout } from 'ember-concurrency';
 
 export default class ApplicationController extends Controller {
-    @service universe;
     @service fetch;
+    @service appCache;
+    @tracked pods = [];
 
     constructor() {
         super(...arguments);
-        this.universe.on('sidebarContext.available', (sidebarContext) => {
-            sidebarContext.hideNow();
-        });
+        this.getPods.perform();
     }
 
-    @task *authenticate() {
-        const { authenticationUrl, identifier } = yield this.fetch.get('request-authentication', {}, { namespace: 'solid/int/v1' });
-        if (authenticationUrl) {
-            window.location.href = `${authenticationUrl}/${identifier}`;
+    @task *getPods() {
+        yield timeout(600);
+
+        if (this.appCache.has('solid:pods')) {
+            this.pods = this.appCache.get('solid:pods', []);
+            return;
         }
-    }
 
-    @task *getAccountIndex() {
-        const response = yield this.fetch.get('account', {}, { namespace: 'solid/int/v1' });
-        console.log('[response]', response);
+        try {
+            this.pods = yield this.fetch.get('pods', {}, { namespace: 'solid/int/v1' });
+        } catch (error) {
+            // silence
+        }
     }
 }

package/addon/controllers/home.js

@@ -0,0 +1,23 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
+
+export default class HomeController extends Controller {
+    @service fetch;
+    @service notifications;
+
+    @task *authenticate() {
+        try {
+            const { authenticationUrl, identifier } = yield this.fetch.get('request-authentication', {}, { namespace: 'solid/int/v1' });
+            if (authenticationUrl) {
+                window.location.href = `${authenticationUrl}/${identifier}`;
+            }
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @task *getAccountIndex() {
+        yield this.fetch.get('account', {}, { namespace: 'solid/int/v1' });
+    }
+}

package/addon/controllers/pods/explorer/content.js

@@ -0,0 +1,12 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+
+export default class PodsExplorerContentController extends Controller {
+    @action setOverlayContext(overlayContextApi) {
+        this.overlayContextApi = overlayContextApi;
+    }
+
+    @action onPressClose() {
+        window.history.back();
+    }
+}

package/addon/controllers/pods/explorer.js

@@ -0,0 +1,149 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { task, timeout } from 'ember-concurrency';
+
+export default class PodsExplorerController extends Controller {
+    @service hostRouter;
+    @service fetch;
+    @service notifications;
+    @service explorerState;
+    @service modalsManager;
+    @service crud;
+    @tracked cursor = '';
+    @tracked pod = '';
+    @tracked query = '';
+    queryParams = ['cursor', 'pod', 'query'];
+    columns = [
+        {
+            label: 'Name',
+            valuePath: 'name',
+            width: '75%',
+            cellComponent: 'table/cell/pod-content-name',
+            onClick: this.viewContents,
+        },
+        {
+            label: 'Type',
+            valuePath: 'type',
+            cellClassNames: 'capitalize',
+            width: '5%',
+        },
+        {
+            label: 'Size',
+            valuePath: 'size',
+            width: '5%',
+        },
+        {
+            label: 'Created At',
+            valuePath: 'created_at',
+            width: '15%',
+        },
+        {
+            label: '',
+            cellComponent: 'table/cell/pod-content-actions',
+            ddButtonText: false,
+            ddButtonIcon: 'ellipsis-h',
+            ddButtonIconPrefix: 'fas',
+            ddMenuLabel: 'Actions',
+            cellClassNames: 'overflow-visible',
+            wrapperClass: 'flex items-center justify-end mx-2',
+            width: '10%',
+            actions: (content) => {
+                return [
+                    {
+                        label: content.type === 'folder' ? 'Browse Folder' : 'View Contents',
+                        fn: this.viewContents,
+                    },
+                    {
+                        separator: true,
+                    },
+                    {
+                        label: 'Delete',
+                        fn: this.deleteSomething,
+                    },
+                ];
+            },
+            sortable: false,
+            filterable: false,
+            resizable: false,
+            searchable: false,
+        },
+    ];
+
+    @action reload() {
+        this.hostRouter.refresh();
+    }
+
+    @action back() {
+        if (typeof this.cursor === 'string' && this.cursor.length && this.cursor !== this.model.id) {
+            const current = this.reverseCursor();
+            return this.hostRouter.transitionTo('console.solid-protocol.pods.explorer', current, { queryParams: { cursor: this.cursor, pod: this.pod } });
+        }
+
+        this.hostRouter.transitionTo('console.solid-protocol.pods.index');
+    }
+
+    @action viewContents(content) {
+        if (content.type === 'folder') {
+            return this.hostRouter.transitionTo('console.solid-protocol.pods.explorer', content, { queryParams: { cursor: this.trackCursor(content), pod: this.pod } });
+        }
+
+        if (content.type === 'file') {
+            return this.hostRouter.transitionTo('console.solid-protocol.pods.explorer.content', content);
+        }
+
+        return this.hostRouter.transitionTo('console.solid-protocol.pods.explorer', this.pod, { queryParams: { cursor: this.trackCursor(content), pod: this.pod } });
+    }
+
+    @action deleteSomething() {
+        this.modalsManager.confirm({
+            title: 'Are you sure you want to delete this content?',
+            body: 'Deleting this Content will remove this content from this pod. This is irreversible!',
+            acceptButtonText: 'Delete Forever',
+            confirm: () => {},
+        });
+    }
+
+    @action deleteSelected() {
+        const selected = this.table.selectedRows;
+
+        this.crud.bulkDelete(selected, {
+            modelNamePath: 'name',
+            acceptButtonText: 'Delete All',
+            onSuccess: () => {
+                return this.hostRouter.refresh();
+            },
+        });
+    }
+
+    trackCursor(content) {
+        if (typeof this.cursor === 'string' && this.cursor.includes(content.id)) {
+            const segments = this.cursor.split(':');
+            const currentIndex = segments.findIndex((segment) => segment === content.id);
+
+            if (currentIndex > -1) {
+                const retainedSegments = segments.slice(0, currentIndex + 1);
+                this.cursor = retainedSegments.join(':');
+                return this.cursor;
+            }
+        }
+
+        this.cursor = this.cursor ? `${this.cursor}:${content.id}` : content.id;
+        return this.cursor;
+    }
+
+    reverseCursor() {
+        const segments = this.cursor.split(':');
+        segments.pop();
+        const current = segments[segments.length - 1];
+        this.cursor = segments.join(':');
+        return current;
+    }
+
+    @task({ restartable: true }) *search(event) {
+        yield timeout(300);
+        const query = typeof event.target.value === 'string' ? event.target.value : '';
+        this.hostRouter.transitionTo('console.solid-protocol.pods.explorer', this.model.id, { queryParams: { cursor: this.cursor, query } });
+    }
+}

package/addon/controllers/pods/index/pod.js

@@ -0,0 +1,12 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+
+export default class PodsIndexPodController extends Controller {
+    @action setOverlayContext(overlayContextApi) {
+        this.overlayContextApi = overlayContextApi;
+    }
+
+    @action onPressClose() {
+        window.history.back();
+    }
+}