@fleetbase/registry-bridge-engine 0.0.1

package/README.md

@@ -0,0 +1,122 @@
+<p align="center">
+    <p align="center">
+        <img src="https://user-images.githubusercontent.com/58805033/191936702-fed04b0f-7966-4041-96d0-95e27bf98248.png" width="280" height="80" style="height: 80px;" />
+    </p>
+    <p align="center">
+        Internal Bridge between Fleetbase API and Extensions Registry
+    </p>
+</p>
+
+---
+
+## Overview
+
+This monorepo contains both the frontend and backend components of the Internal Registry Bridge for Fleetbase. The frontend is built using Ember.js and the backend is implemented in PHP.
+
+* PHP 7.3.0 or above
+* Ember.js v4.8 or above
+* Ember CLI v4.8 or above
+* Node.js v18 or above
+
+## Structure
+
+```
+├── addon
+├── app
+├── assets
+├── translations
+├── config
+├── node_modules
+├── server
+│ ├── config
+│ ├── data
+│ ├── migrations
+│ ├── resources
+│ ├── src
+│ ├── tests
+│ └── vendor
+├── tests
+├── testem.js
+├── index.js
+├── package.json
+├── phpstan.neon.dist
+├── phpunit.xml.dist
+├── pnpm-lock.yaml
+├── ember-cli-build.js
+├── composer.json
+├── CONTRIBUTING.md
+├── LICENSE.md
+├── README.md
+```
+
+## Installation
+
+### Backend
+
+Install the PHP packages using Composer:
+
+```bash
+composer require fleetbase/core-api
+composer require fleetbase/registry-bridge
+```
+### Frontend
+
+Install the Ember.js Engine/Addon:
+
+```bash
+pnpm install @fleetbase/registry-bridge-engine
+```
+
+## Usage
+
+### Backend
+
+🧹 Keep a modern codebase with **PHP CS Fixer**:
+```bash
+composer lint
+```
+
+⚗️ Run static analysis using **PHPStan**:
+```bash
+composer test:types
+```
+
+✅ Run unit tests using **PEST**
+```bash
+composer test:unit
+```
+
+🚀 Run the entire test suite:
+```bash
+composer test
+```
+
+### Frontend
+
+🧹 Keep a modern codebase with **ESLint**:
+```bash
+pnpm lint
+```
+
+✅ Run unit tests using **Ember/QUnit**
+```bash
+pnpm test
+pnpm test:ember
+pnpm test:ember-compatibility
+```
+
+🚀 Start the Ember Addon/Engine
+```bash
+pnpm start
+```
+
+🔨 Build the Ember Addon/Engine
+```bash
+pnpm build
+```
+
+## Contributing
+See the Contributing Guide for details on how to contribute to this project.
+
+## License
+This project is licensed under the MIT License.

package/addon/adapters/registry-bridge.js

@@ -0,0 +1,5 @@
+import ApplicationAdapter from '@fleetbase/ember-core/adapters/application';
+
+export default class RegistryBridgeAdapter extends ApplicationAdapter {
+    namespace = '~registry/v1';
+}

package/addon/adapters/registry-extension-bundle.js

@@ -0,0 +1 @@
+export { default } from './registry-bridge';

package/addon/adapters/registry-extension.js

@@ -0,0 +1 @@
+export { default } from './registry-bridge';

package/addon/components/extension-card.hbs

@@ -0,0 +1,12 @@
+<button type="button" class="extension-card-container hover:opacity-50 {{@buttonClass}}" ...attributes {{on "click" this.onClick}} {{did-update this.onExtensionUpdated @extension}}>
+    <div class="extension-card-icon-container {{@iconWrapperClass}}">
+        <Image src={{@extension.icon_url}} class={{@iconClass}} alt={{@extension.name}} @fallbackSrc={{config "defaultValues.extensionIcon"}} />
+    </div>
+    <div class="extension-card-body-container {{@detailsWrapperClass}}">
+        <div class="flex flex-col">
+            <div class="font-semibold text-sm block {{@nameTextClass}}">{{@extension.name}}</div>
+            <div class="text-xs {{@descriptionTextClass}}">{{n-a @extension.description}}</div>
+        </div>
+        {{yield @extension}}
+    </div>
+</button>

package/addon/components/extension-card.js

@@ -0,0 +1,235 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { later } from '@ember/runloop';
+import formatCurrency from '@fleetbase/ember-ui/utils/format-currency';
+import isModel from '@fleetbase/ember-core/utils/is-model';
+
+function removeParamFromCurrentUrl(paramToRemove) {
+    const url = new URL(window.location.href);
+    url.searchParams.delete(paramToRemove);
+    window.history.pushState({ path: url.href }, '', url.href);
+}
+
+function addParamToCurrentUrl(paramName, paramValue) {
+    const url = new URL(window.location.href);
+    url.searchParams.set(paramName, paramValue);
+    window.history.pushState({ path: url.href }, '', url.href);
+}
+
+export default class ExtensionCardComponent extends Component {
+    @service modalsManager;
+    @service notifications;
+    @service currentUser;
+    @service socket;
+    @service fetch;
+    @service stripe;
+    @service urlSearchParams;
+    @tracked extension;
+
+    constructor(owner, { extension }) {
+        super(...arguments);
+        this.extension = extension;
+        this.checkForCheckoutSession();
+    }
+
+    @action onExtenstionUpdated(el, [extension]) {
+        this.extension = extension;
+    }
+
+    @action onClick(options = {}) {
+        const installChannel = `install.${this.currentUser.companyId}.${this.extension.id}`;
+        const isAlreadyPurchased = this.extension.is_purchased === true;
+        const isAlreadyInstalled = this.extension.is_installed === true;
+        const isPaymentRequired = this.extension.payment_required === true && isAlreadyPurchased === false;
+
+        if (typeof this.args.onClick === 'function') {
+            this.args.onClick(this.extension);
+        }
+
+        addParamToCurrentUrl('extension_id', this.extension.id);
+        this.modalsManager.show('modals/extension-details', {
+            titleComponent: 'extension-modal-title',
+            modalClass: 'flb--extension-modal modal-lg',
+            modalHeaderClass: 'flb--extension-modal-header',
+            acceptButtonText: isPaymentRequired ? `Purchase for ${formatCurrency(this.extension.price, this.extension.currency)}` : isAlreadyInstalled ? 'Installed' : 'Install',
+            acceptButtonIcon: isPaymentRequired ? 'credit-card' : isAlreadyInstalled ? 'check' : 'download',
+            acceptButtonDisabled: isAlreadyInstalled,
+            acceptButtonScheme: isPaymentRequired ? 'success' : 'primary',
+            declineButtonText: 'Done',
+            process: null,
+            step: null,
+            stepDescription: 'Awaiting install to begin...',
+            progress: 0,
+            extension: this.extension,
+            confirm: async (modal) => {
+                modal.startLoading();
+
+                // Handle purchase flow
+                if (isPaymentRequired) {
+                    return this.startCheckoutSession();
+                }
+
+                // Listen for install progress
+                this.socket.listen(installChannel, ({ process, step, progress }) => {
+                    let stepDescription;
+                    switch (step) {
+                        case 'server.install':
+                            stepDescription = '(1/3) Installing extension...';
+                            break;
+
+                        case 'engine.install':
+                            stepDescription = '(2/3) Installing extension...';
+                            break;
+
+                        case 'console.build':
+                            stepDescription = '(3/3) Completing install...';
+                            break;
+
+                        default:
+                            break;
+                    }
+                    modal.setOptions({ process, step, progress, stepDescription });
+                });
+
+                // Start install progress
+                modal.setOption('progress', 5);
+
+                // Run install
+                try {
+                    await this.extension.install();
+                    this.notifications.info(`${this.extension.name} is now Installed.`);
+                    later(
+                        this,
+                        () => {
+                            window.location.reload(true);
+                        },
+                        600
+                    );
+                    removeParamFromCurrentUrl('extension_id');
+                    modal.done();
+                } catch (error) {
+                    this.notifications.serverError(error);
+                }
+            },
+            decline: (modal) => {
+                modal.done();
+                removeParamFromCurrentUrl('extension_id');
+            },
+            ...options,
+        });
+    }
+
+    async startCheckoutSession() {
+        const checkout = await this.stripe.initEmbeddedCheckout({
+            fetchClientSecret: this.fetchClientSecret.bind(this),
+        });
+
+        await this.modalsManager.done();
+        later(
+            this,
+            () => {
+                this.modalsManager.show('modals/extension-purchase-form', {
+                    title: `Purchase the '${this.extension.name}' Extension`,
+                    modalClass: 'stripe-extension-purchase',
+                    modalFooterClass: 'hidden-i',
+                    extension: this.extension,
+                    checkoutElementInserted: (el) => {
+                        checkout.mount(el);
+                    },
+                    decline: async (modal) => {
+                        checkout.destroy();
+                        await modal.done();
+                        later(
+                            this,
+                            () => {
+                                this.onClick();
+                            },
+                            100
+                        );
+                    },
+                });
+            },
+            100
+        );
+    }
+
+    async fetchClientSecret() {
+        try {
+            const { clientSecret } = await this.fetch.post(
+                'payments/create-checkout-session',
+                { extension: this.extension.id, uri: window.location.pathname },
+                { namespace: '~registry/v1' }
+            );
+
+            return clientSecret;
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    async checkForCheckoutSession() {
+        later(
+            this,
+            async () => {
+                const checkoutSessionId = this.urlSearchParams.get('checkout_session_id');
+                const extensionId = this.urlSearchParams.get('extension_id');
+
+                if (!checkoutSessionId && this.extension.id === extensionId) {
+                    return this.onClick();
+                }
+
+                if (checkoutSessionId && this.extension.id === extensionId) {
+                    this.modalsManager.show('modals/confirm-extension-purchase', {
+                        title: 'Finalizing Purchase',
+                        modalClass: 'finalize-extension-purchase',
+                        loadingMessage: 'Completing purchase do not refresh or exit window...',
+                        modalFooterClass: 'hidden-i',
+                        backdropClose: false,
+                    });
+
+                    try {
+                        const { status, extension } = await this.fetch.post(
+                            'payments/get-checkout-session',
+                            { checkout_session_id: checkoutSessionId, extension: this.extension.id },
+                            { namespace: '~registry/v1' }
+                        );
+
+                        // Update this extension
+                        const extensionModel = this.fetch.jsonToModel(extension, 'registry-extension');
+                        if (isModel(extensionModel)) {
+                            this.extension = extensionModel;
+                        }
+
+                        // Fire a callback
+                        if (typeof this.args.onCheckoutCompleted === 'function') {
+                            this.args.onCheckoutCompleted(this.extension, status);
+                        }
+
+                        if (status === 'complete' || status === 'purchase_complete') {
+                            // remove checkout session id
+                            removeParamFromCurrentUrl('checkout_session_id');
+
+                            // close confirmation dialog and notify payment completed
+                            await this.modalsManager.done();
+                            if (status === 'complete') {
+                                this.notifications.success('Payment Completed.');
+                            }
+                            later(
+                                this,
+                                () => {
+                                    this.onClick();
+                                },
+                                100
+                            );
+                        }
+                    } catch (error) {
+                        this.notifications.serverError(error);
+                    }
+                }
+            },
+            300
+        );
+    }
+}

package/addon/components/extension-form.hbs

@@ -0,0 +1,237 @@
+<div class="flex flex-row items-start">
+    <div class="w-32 flex flex-col justify-center">
+        <div class="mb-2">
+            <Image src={{@extension.icon_url}} @fallbackSrc={{config "defaultValues.extensionIcon"}} alt={{@extension.name}} class="w-32 h-32 rounded-lg border border-black shadow-sm" />
+        </div>
+        <FileUpload
+            @name={{t "registry-bridge.developers.extensions.extension-form.upload-extension-icon"}}
+            @accept={{join "," this.acceptedImageTypes}}
+            @onFileAdded={{perform this.uploadIcon}}
+            @labelClass="flex flex-row items-center justify-center"
+            as |queue|
+        >
+            <a tabindex={{0}} class="flex items-center px-0 mt-2 text-xs no-underline truncate btn btn-sm btn-default" disabled={{not queue.files.length}}>
+                {{#if queue.files.length}}
+                    <div class="mr-1.5">
+                        <Spinner />
+                    </div>
+                    <span>
+                        {{t "common.uploading"}}
+                    </span>
+                {{else}}
+                    <FaIcon @icon="icons" class="mr-1.5" />
+                    <span>
+                        {{t "registry-bridge.developers.extensions.extension-form.upload-extension-icon"}}
+                    </span>
+                {{/if}}
+            </a>
+        </FileUpload>
+    </div>
+    <div class="flex-1 px-6 space-y-6">
+        <ContentPanel @title={{t "registry-bridge.developers.extensions.extension-form.details-content-block"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+            <InputGroup
+                @name={{t "registry-bridge.developers.extensions.extension-form.extension-name"}}
+                @value={{@extension.name}}
+                @helpText={{t "registry-bridge.developers.extensions.extension-form.extension-name-help-text"}}
+            />
+            <InputGroup
+                @name={{t "registry-bridge.developers.extensions.extension-form.extension-description"}}
+                @helpText={{t "registry-bridge.developers.extensions.extension-form.extension-description-help-text"}}
+            >
+                <Textarea
+                    @value={{@extension.description}}
+                    placeholder={{t "registry-bridge.developers.extensions.extension-form.extension-description"}}
+                    class="form-input w-full"
+                    rows="3"
+                />
+            </InputGroup>
+            <InputGroup
+                @name={{t "registry-bridge.developers.extensions.extension-form.extension-category"}}
+                @helpText={{t "registry-bridge.developers.extensions.extension-form.extension-category-help-text"}}
+            >
+                <ModelSelect
+                    @modelName="category"
+                    @query={{hash for="extension_category" core_category=1}}
+                    @selectedModel={{@extension.category}}
+                    @placeholder={{t "registry-bridge.developers.extensions.extension-form.extension-select-category"}}
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @renderInPlace={{true}}
+                    @onChange={{fn (mut @extension.category)}}
+                    as |category|
+                >
+                    <div class="flex items-center">
+                        <FaIcon @icon={{category.icon}} @size="sm" class="mr-2" />
+                        <span>{{category.name}}</span>
+                    </div>
+                </ModelSelect>
+            </InputGroup>
+
+            <InputGroup
+                @name={{t "registry-bridge.developers.extensions.extension-form.extension-tags"}}
+                @wrapperClass="mb-0i"
+                @helpText={{t "registry-bridge.developers.extensions.extension-form.extension-tags-help-text"}}
+            >
+                <TagInput
+                    class="form-input"
+                    @placeholder={{t "registry-bridge.developers.extensions.extension-form.extension-add-tags"}}
+                    @allowSpacesInTags={{true}}
+                    @tags={{@extension.tags}}
+                    @addTag={{@extension.addTag}}
+                    @removeTagAtIndex={{@extension.removeTag}}
+                    @disabled={{this.core_extension}}
+                    as |tag|
+                >
+                    {{tag}}
+                </TagInput>
+            </InputGroup>
+        </ContentPanel>
+        <ContentPanel @title={{t "registry-bridge.developers.extensions.extension-form.extension-bundle"}} @open={{true}} @pad={{false}} @panelBodyClass="bg-white dark:bg-gray-800">
+            <div class="px-4 pb-4 pt-3 flex flex-col flex-grow-0">
+                <Button @type="magic" @icon="box-archive" @text="Select Bundle" @onClick={{this.selectBundle}} />
+                {{#if @extension.next_bundle_filename}}
+                    <div class="mt-4 bg-blue-200 border border-blue-400 text-blue-900 rounded-lg shadow-sm px-4 py-2 flex flex-row items-center text-xs">
+                        <FaIcon @icon="box-archive" @size="xs" />
+                        <div class="ml-2 flex flex-row items-center space-x-2">
+                            <span>{{@extension.next_bundle_filename}}</span>
+                            <span>-</span>
+                            <span>{{@extension.next_bundle_id}}</span>
+                        </div>
+                    </div>
+                {{/if}}
+            </div>
+        </ContentPanel>
+        <ContentPanel @title={{t "registry-bridge.developers.extensions.extension-form.extension-listing-details"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+            <InputGroup
+                @name={{t "registry-bridge.developers.extensions.extension-form.extension-promotional-text"}}
+                @helpText={{t "registry-bridge.developers.extensions.extension-form.extension-promotional-text-help-text"}}
+            >
+                <Textarea
+                    @value={{@extension.promotional_text}}
+                    placeholder={{t "registry-bridge.developers.extensions.extension-form.extension-promotional-text"}}
+                    class="form-input w-full"
+                    rows="3"
+                />
+            </InputGroup>
+            <InputGroup
+                @name={{t "registry-bridge.developers.extensions.extension-form.extension-subtitle"}}
+                @value={{@extension.subtitle}}
+                @helpText={{t "registry-bridge.developers.extensions.extension-form.extension-subtitle-help-text"}}
+            />
+            <InputGroup
+                @name={{t "registry-bridge.developers.extensions.extension-form.extension-copyright"}}
+                @value={{@extension.copyright}}
+                @helpText={{t "registry-bridge.developers.extensions.extension-form.extension-copyright-help-text"}}
+            />
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <InputGroup
+                    @type="url"
+                    @name={{t "registry-bridge.developers.extensions.extension-form.extension-website-url"}}
+                    @value={{@extension.website_url}}
+                    @helpText={{t "registry-bridge.developers.extensions.extension-form.extension-website-url-help-text"}}
+                    @wrapperClass="mb-0i"
+                />
+                <InputGroup
+                    @type="url"
+                    @name={{t "registry-bridge.developers.extensions.extension-form.extension-repo-url"}}
+                    @value={{@extension.repo_url}}
+                    @helpText={{t "registry-bridge.developers.extensions.extension-form.extension-repo-url-help-text"}}
+                    @wrapperClass="mb-0i"
+                />
+                <InputGroup
+                    @type="url"
+                    @name={{t "registry-bridge.developers.extensions.extension-form.extension-support-url"}}
+                    @value={{@extension.support_url}}
+                    @helpText={{t "registry-bridge.developers.extensions.extension-form.extension-support-url-help-text"}}
+                    @wrapperClass="mb-0i"
+                />
+                <InputGroup
+                    @type="url"
+                    @name={{t "registry-bridge.developers.extensions.extension-form.extension-privacy-policy-url"}}
+                    @value={{@extension.privacy_policy_url}}
+                    @helpText={{t "registry-bridge.developers.extensions.extension-form.extension-privacy-policy-url-help-text"}}
+                    @wrapperClass="mb-0i"
+                />
+                <InputGroup
+                    @type="url"
+                    @name={{t "registry-bridge.developers.extensions.extension-form.extension-tos-url"}}
+                    @value={{@extension.tos_url}}
+                    @helpText={{t "registry-bridge.developers.extensions.extension-form.extension-tos-url-help-text"}}
+                    @wrapperClass="mb-0i"
+                />
+            </div>
+        </ContentPanel>
+        <ContentPanel @title={{t "registry-bridge.developers.extensions.extension-form.extension-screenshots"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+            <div class="space-y-4">
+                {{#if this.isUploading}}
+                    <div
+                        class="dropzone w-full rounded-lg px-4 py-8 bg-gray-50 dark:bg-gray-900 bg-opacity-25 text-gray-900 dark:text-white text-center flex flex-col items-center justify-center border-2 border-dashed border-gray-200 dark:border-indigo-500"
+                    >
+                        <div class="flex items-center justify-center py-5">
+                            <Spinner class="text-sm dar:text-gray-100" @loadingMessage={{t "fleet-ops.common.uploading"}} />
+                        </div>
+                    </div>
+                {{else}}
+                    {{#let (file-queue name="files" onFileAdded=this.queueFile accept=(join "," this.acceptedImageTypes)) as |queue|}}
+                        <FileDropzone @queue={{queue}} class="dropzone file-dropzone" as |dropzone|>
+                            {{#if dropzone.active}}
+                                {{#if dropzone.valid}}
+                                    {{t "component.dropzone.drop-to-upload"}}
+                                {{else}}
+                                    {{t "component.dropzone.invalid"}}
+                                {{/if}}
+                            {{else if queue.files.length}}
+                                <div class="my-2">
+                                    <FaIcon @icon="folder-open" class="text-indigo-500 mr-2" />
+                                    {{t "component.dropzone.files-ready-for-upload" numOfFiles=(pluralize queue.files.length (t "component.dropzone.file"))}}
+                                </div>
+                                <div class="my-2">({{queue.progress}}%)</div>
+                            {{else}}
+                                <h4 class="font-semibold">
+                                    <FaIcon @icon="folder-open" @size="lg" class="text-indigo-500 mr-2" />
+                                    {{t "registry-bridge.developers.extensions.extension-form.upload-screenshots"}}
+                                </h4>
+                                <div>
+                                    {{#if dropzone.supported}}
+                                        <p class="text-sm my-5">{{t "component.dropzone.dropzone-supported-files"}}</p>
+                                    {{/if}}
+                                    <FileUpload @name="files" @for="files" @accept={{join "," this.acceptedFileTypes}} @multiple={{true}} @onFileAdded={{this.queueFile}}>
+                                        <a tabindex={{0}} class="btn btn-magic cursor-pointer ml-1">{{t "component.dropzone.or-select-button-text"}}</a>
+                                    </FileUpload>
+                                </div>
+                            {{/if}}
+                        </FileDropzone>
+                    {{/let}}
+                    {{#if this.uploadQueue}}
+                        <div class="mx-4">
+                            <div class="flex items-center justify-between mb-4">
+                                <span class="leading-6 dark:text-gray-100">{{t "component.dropzone.upload-queue"}}</span>
+                            </div>
+                            <div class="space-y-2 mb-4">
+                                {{#each this.uploadQueue as |file|}}
+                                    <div class="flex items-center justify-between bg-blue-100 border border-blue-800 dark:border-blue-800 py-1.5 shadow-sm rounded-lg px-4">
+                                        <div class="text-xs text-blue-900 truncate">{{truncate-filename file.name 50}}</div>
+                                        <div class="flex items-center text-sm">
+                                            <Spinner class="text-blue-900 mr-2" />
+                                            <span class="font-bold text-blue-900">{{round file.progress}}%</span>
+                                        </div>
+                                    </div>
+                                {{/each}}
+                            </div>
+                        </div>
+                    {{/if}}
+                    <div>
+                        <div class="grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-4">
+                            {{#each @extension.screenshots as |file|}}
+                                <File @file={{file}} @onDelete={{this.removeFile}} />
+                            {{/each}}
+                        </div>
+                    </div>
+                {{/if}}
+            </div>
+        </ContentPanel>
+        {{#if @withMonetizeForm}}
+            <ExtensionMonetizeForm @extension={{@extension}} />
+        {{/if}}
+    </div>
+</div>