@fleetbase/registry-bridge-engine 0.0.1

package/addon/components/extension-form.js

@@ -0,0 +1,123 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { task } from 'ember-concurrency';
+
+export default class ExtensionFormComponent extends Component {
+    @service store;
+    @service fetch;
+    @service notifications;
+    @service intl;
+    @service modalsManager;
+    @tracked subscriptionModelOptions = ['flat_rate', 'tiered', 'usage'];
+    @tracked billingPeriodOptions = ['daily', 'weekly', 'monthly', 'quarterly', 'yearly'];
+    @tracked uploadQueue = [];
+    acceptedImageTypes = ['image/jpeg', 'image/png', 'image/gif'];
+    acceptedBundleTypes = [
+        'application/zip',
+        'application/x-zip',
+        'application/x-zip-compressed',
+        'application/x-compressed',
+        'multipart/x-zip',
+        'application/x-tar',
+        'application/gzip',
+        'application/x-gzip',
+        'application/x-tgz',
+        'application/x-bzip2',
+        'application/x-xz',
+    ];
+
+    @task *uploadIcon(file) {
+        const { extension, onIconUploaded } = this.args;
+
+        yield this.fetch.uploadFile.perform(
+            file,
+            {
+                path: `uploads/extensions/${extension.id}/icons`,
+                subject_uuid: extension.id,
+                subject_type: 'registry-bridge:registry-extension',
+                type: 'extension_icon',
+            },
+            (uploadedFile) => {
+                extension.setProperties({
+                    icon: uploadedFile,
+                    icon_uuid: uploadedFile.id,
+                    icon_url: uploadedFile.url,
+                });
+
+                if (typeof onIconUploaded === 'function') {
+                    onIconUploaded(uploadedFile);
+                }
+
+                return extension.save();
+            }
+        );
+    }
+
+    @action queueFile(file) {
+        // since we have dropzone and upload button within dropzone validate the file state first
+        // as this method can be called twice from both functions
+        if (['queued', 'failed', 'timed_out', 'aborted'].indexOf(file.state) === -1) {
+            return;
+        }
+
+        const { extension, onScreenshotUploaded } = this.args;
+
+        // Queue and upload immediatley
+        this.uploadQueue.pushObject(file);
+        this.fetch.uploadFile.perform(
+            file,
+            {
+                path: `uploads/extensions/${extension.id}/screenshots`,
+                subject_uuid: extension.id,
+                subject_type: 'registry-bridge:registry-extension',
+                type: 'extension_screenshot',
+            },
+            (uploadedFile) => {
+                extension.screenshots.pushObject(uploadedFile);
+                this.uploadQueue.removeObject(file);
+                if (typeof onScreenshotUploaded === 'function') {
+                    onScreenshotUploaded(uploadedFile);
+                }
+            },
+            () => {
+                this.uploadQueue.removeObject(file);
+                // remove file from queue
+                if (file.queue && typeof file.queue.remove === 'function') {
+                    file.queue.remove(file);
+                }
+            }
+        );
+    }
+
+    @action selectBundle() {
+        const { extension, onBundleSelected } = this.args;
+
+        this.modalsManager.show('modals/select-extension-bundle', {
+            title: 'Select extension bundle',
+            modalClass: 'modal-md',
+            acceptButtonText: 'Done',
+            hideDeclineButton: true,
+            extension,
+            onBundleSelected: (bundle) => {
+                extension.setProperties({
+                    next_bundle_uuid: bundle.id,
+                    next_bundle_id: bundle.bundle_id,
+                    next_bundle_filename: bundle.bundle_filename,
+                    next_bundle: bundle,
+                });
+
+                if (typeof onBundleSelected === 'function') {
+                    onBundleSelected(bundle);
+                }
+
+                this.modalsManager.done();
+            },
+        });
+    }
+
+    @action removeFile(file) {
+        return file.destroyRecord();
+    }
+}

package/addon/components/extension-modal-title.hbs

@@ -0,0 +1,14 @@
+<div class="flex flex-row" ...attributes {{did-update this.handleExtensionChanged @extension}}>
+    <div class="modal-title--extension-icon-wrapper shadow-sm dark:border-gray-700">
+        <div class="flex items-center justify-center rounded-lg w-full" {{background-url this.extension.icon_url overlay=true}}>
+            <Image src={{this.extension.icon_url}} class="w-full rounded-lg" alt={{this.extension.name}} @fallbackSrc={{config "defaultValues.extensionIcon"}} />
+        </div>
+    </div>
+    <div class="flex-1">
+        <div class={{this.detailsContainerClass}}>
+            <h1 class="dark:text-white text-black font-semibold">{{this.extension.name}}</h1>
+            <div class="dark:text-gray-300 text-black">{{this.extension.subtitle}}</div>
+            <div class="dark:text-gray-300 text-black text-sm">{{concat "Published by " this.extension.publisher_name}}</div>
+        </div>
+    </div>
+</div>

package/addon/components/extension-modal-title.js

@@ -0,0 +1,20 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class ExtensionModalTitleComponent extends Component {
+    @tracked extension;
+    @tracked detailsContainerClass = 'mb-4';
+
+    constructor(owner, { options, extension = null, detailsContainerClass = 'mb-4' }) {
+        super(...arguments);
+        this.extension = options ? options.extension : extension;
+        this.detailsContainerClass = detailsContainerClass;
+    }
+
+    @action handleExtensionChanged(el, [extension]) {
+        if (extension) {
+            this.extension = extension;
+        }
+    }
+}

package/addon/components/extension-monetize-form.hbs

@@ -0,0 +1,56 @@
+<ContentPanel @title={{t "registry-bridge.developers.extensions.extension-form.extension-payment-details"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+    <InputGroup @wrapperClass={{unless @extension.payment_required "mb-0i"}}>
+        <Toggle
+            @isToggled={{@extension.payment_required}}
+            @onToggle={{fn (mut @extension.payment_required)}}
+            @label={{t "registry-bridge.developers.extensions.extension-form.extension-payment-required"}}
+            @helpText={{t "registry-bridge.developers.extensions.extension-form.extension-payment-required-help-text"}}
+        />
+    </InputGroup>
+    {{#if @extension.payment_required}}
+        <InputGroup>
+            <Toggle
+                @isToggled={{@extension.subscription_required}}
+                @onToggle={{fn (mut @extension.subscription_required)}}
+                @label={{t "registry-bridge.developers.extensions.extension-form.extension-subscription-required"}}
+                @helpText={{t "registry-bridge.developers.extensions.extension-form.extension-subscription-required-help-text"}}
+            />
+        </InputGroup>
+        {{#if @extension.subscription_required}}
+            <InputGroup
+                @name={{t "registry-bridge.developers.extensions.extension-form.extension-subscription-billing-period"}}
+                @helpText={{t "registry-bridge.developers.extensions.extension-form.extension-subscription-billing-period-help-text"}}
+            >
+                <Select
+                    @value={{@extension.subscription_billing_period}}
+                    @options={{this.billingPeriodOptions}}
+                    @onSelect={{fn (mut @extension.subscription_billing_period)}}
+                    @placeholder={{t "registry-bridge.developers.extensions.extension-form.extension-subscription-billing-period-placeholder"}}
+                    class="w-full"
+                />
+            </InputGroup>
+            <InputGroup
+                @name={{t "registry-bridge.developers.extensions.extension-form.extension-subscription-amount"}}
+                @helpText={{t "registry-bridge.developers.extensions.extension-form.extension-subscription-amount-help-text"}}
+                @wrapperClass="mb-0i"
+            >
+                <MoneyInput @value={{@extension.subscription_amount}} @currency="USD" />
+            </InputGroup>
+        {{else}}
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-2">
+                <InputGroup
+                    @name={{t "registry-bridge.developers.extensions.extension-form.extension-price"}}
+                    @helpText={{t "registry-bridge.developers.extensions.extension-form.extension-price-help-text"}}
+                >
+                    <MoneyInput @value={{@extension.price}} @currency="USD" />
+                </InputGroup>
+                <InputGroup
+                    @name={{t "registry-bridge.developers.extensions.extension-form.extension-sale-price"}}
+                    @helpText={{t "registry-bridge.developers.extensions.extension-form.extension-sale-price-help-text"}}
+                >
+                    <MoneyInput @value={{@extension.sale_price}} @currency="USD" />
+                </InputGroup>
+            </div>
+        {{/if}}
+    {{/if}}
+</ContentPanel>

package/addon/components/extension-monetize-form.js

@@ -0,0 +1,7 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class ExtensionMonetizeFormComponent extends Component {
+    @tracked subscriptionModelOptions = ['flat_rate', 'tiered', 'usage'];
+    @tracked billingPeriodOptions = ['daily', 'weekly', 'monthly', 'quarterly', 'yearly'];
+}

package/addon/components/extension-pending-publish-viewer.hbs

@@ -0,0 +1,52 @@
+<div class="space-y-4">
+    <ContentPanel @title={{t "registry-bridge.component.extension-pending-publish-viewer.content-panel-title"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+        <div class="grid grid-cols-1 lg:grid-cols-4">
+            {{#each this.extensions as |extension|}}
+                <div class="flex flex-col">
+                    <button type="button" class="rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm w-full hover:opacity-50" {{on "click" (fn this.focusExtension extension)}}>
+                        <div class="flex items-center justify-center rounded-t-lg w-full h-36" {{background-url extension.icon_url overlay=true}}>
+                            <Image src={{extension.icon_url}} class="w-full h-36 rounded-t-lg" alt={{extension.name}} @fallbackSrc={{config "defaultValues.extensionIcon"}} />
+                        </div>
+                        <div class="text-left px-3 py-2 rounded-b-lg bg-white border-t border-gray-200 dark:border-gray-700 dark:bg-gray-900">
+                            <span class="font-semibold text-sm block">{{extension.name}}</span>
+                            <p class="text-xs">{{n-a extension.description}}</p>
+                            <div>
+                                <Badge @status={{extension.status}} />
+                            </div>
+                        </div>
+                    </button>
+                    <div class="space-y-2 mt-3">
+                        <Button
+                            @size="sm"
+                            @icon="clipboard-list"
+                            @text={{t "registry-bridge.component.extension-pending-publish-viewer.view-details"}}
+                            @onClick={{fn this.focusExtension extension}}
+                            class="w-full"
+                        />
+                        <Button
+                            @size="sm"
+                            @icon="download"
+                            @text={{t "registry-bridge.component.extension-pending-publish-viewer.download-bundle"}}
+                            @onClick={{perform this.downloadBundle extension}}
+                            class="w-full"
+                        />
+                    </div>
+                </div>
+            {{else}}
+                <div class="col-span-4">
+                    <div class="text-base italic">{{t "registry-bridge.component.extension-pending-publish-viewer.no-extensions-awaiting-publish"}}</div>
+                </div>
+            {{/each}}
+        </div>
+    </ContentPanel>
+
+    {{#if this.focusedExtension}}
+        <ContentPanel @title={{t "registry-bridge.component.extension-pending-publish-viewer.focused-extension-title" extensionName=this.focusedExtension.name}} @open={{true}} @pad={{true}}>
+            <div class="flex items-center mb-4 px-1">
+                <Button @type="primary" @size="sm" @icon="check" @text={{t "common.done"}} @onClick={{this.unfocusExtension}} class="w-full" />
+            </div>
+            <ExtensionForm @extension={{this.focusedExtension}} @withMonetizeForm={{true}} />
+        </ContentPanel>
+    {{/if}}
+</div>
+<Spacer @height="400px" />

package/addon/components/extension-pending-publish-viewer.js

@@ -0,0 +1,37 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { task } from 'ember-concurrency';
+
+export default class ExtensionPendingPublishViewerComponent extends Component {
+    @service store;
+    @service notifications;
+    @tracked extensions = [];
+    @tracked focusedExtension;
+
+    constructor() {
+        super(...arguments);
+        this.getExtensionsPendingPublish.perform();
+    }
+
+    @task *getExtensionsPendingPublish() {
+        this.extensions = yield this.store.query('registry-extension', { status: 'approved' });
+    }
+
+    @task *downloadBundle(extension) {
+        try {
+            yield extension.downloadBundle();
+        } catch (error) {
+            this.notifications.error(error.message);
+        }
+    }
+
+    @action focusExtension(extension) {
+        this.focusedExtension = extension;
+    }
+
+    @action unfocusExtension() {
+        this.focusedExtension = undefined;
+    }
+}

package/addon/components/extension-reviewer-control.hbs

@@ -0,0 +1,68 @@
+<div class="space-y-4">
+    <ContentPanel @title={{t "registry-bridge.component.extension-reviewer-control.content-panel-title"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+        <div class="grid grid-cols-1 lg:grid-cols-4">
+            {{#each this.extensions as |extension|}}
+                <div class="flex flex-col">
+                    <button type="button" class="rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm w-full hover:opacity-50" {{on "click" (fn this.focusExtension extension)}}>
+                        <div class="flex items-center justify-center rounded-t-lg w-full h-36" {{background-url extension.icon_url overlay=true}}>
+                            <Image src={{extension.icon_url}} class="w-full h-36 rounded-t-lg" alt={{extension.name}} @fallbackSrc={{config "defaultValues.extensionIcon"}} />
+                        </div>
+                        <div class="text-left px-3 py-2 rounded-b-lg bg-white border-t border-gray-200 dark:border-gray-700 dark:bg-gray-900">
+                            <span class="font-semibold text-sm block">{{extension.name}}</span>
+                            <p class="text-xs">{{n-a extension.description}}</p>
+                            <div>
+                                <Badge @status={{extension.status}} />
+                            </div>
+                        </div>
+                    </button>
+                    <div class="space-y-2 mt-3">
+                        <Button
+                            @size="sm"
+                            @icon="clipboard-list"
+                            @text={{t "registry-bridge.component.extension-reviewer-control.view-details"}}
+                            @onClick={{fn this.focusExtension extension}}
+                            class="w-full"
+                        />
+                        <Button
+                            @size="sm"
+                            @icon="download"
+                            @text={{t "registry-bridge.component.extension-reviewer-control.download-bundle"}}
+                            @onClick={{perform this.downloadBundle extension}}
+                            class="w-full"
+                        />
+                        <Button
+                            @type="success"
+                            @size="sm"
+                            @icon="check"
+                            @text={{t "registry-bridge.component.extension-reviewer-control.approve"}}
+                            @onClick={{fn this.approve extension}}
+                            class="w-full"
+                        />
+                        <Button
+                            @type="danger"
+                            @size="sm"
+                            @icon="ban"
+                            @text={{t "registry-bridge.component.extension-reviewer-control.reject"}}
+                            @onClick={{fn this.reject extension}}
+                            class="w-full"
+                        />
+                    </div>
+                </div>
+            {{else}}
+                <div class="col-span-4">
+                    <div class="text-base italic">{{t "registry-bridge.component.extension-reviewer-control.no-extensions-awaiting-review"}}</div>
+                </div>
+            {{/each}}
+        </div>
+    </ContentPanel>
+
+    {{#if this.focusedExtension}}
+        <ContentPanel @title={{t "registry-bridge.component.extension-reviewer-control.focused-extension-title" extensionName=this.focusedExtension.name}} @open={{true}} @pad={{true}}>
+            <div class="flex items-center mb-4 px-1">
+                <Button @type="primary" @size="sm" @icon="check" @text={{t "common.done"}} @onClick={{this.unfocusExtension}} class="w-full" />
+            </div>
+            <ExtensionForm @extension={{this.focusedExtension}} @withMonetizeForm={{true}} />
+        </ContentPanel>
+    {{/if}}
+</div>
+<Spacer @height="400px" />

package/addon/components/extension-reviewer-control.js

@@ -0,0 +1,68 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { task } from 'ember-concurrency';
+
+export default class ExtensionReviewerControlComponent extends Component {
+    @service store;
+    @service modalsManager;
+    @service notifications;
+    @service intl;
+    @tracked extensions = [];
+    @tracked focusedExtension;
+
+    constructor() {
+        super(...arguments);
+        this.getExtensionsPendingReview.perform();
+    }
+
+    @task *getExtensionsPendingReview() {
+        this.extensions = yield this.store.query('registry-extension', { status: 'awaiting_review' });
+    }
+
+    @task *downloadBundle(extension) {
+        try {
+            yield extension.downloadBundle();
+        } catch (error) {
+            this.notifications.error(error.message);
+        }
+    }
+
+    @action focusExtension(extension) {
+        this.focusedExtension = extension;
+    }
+
+    @action unfocusExtension() {
+        this.focusedExtension = undefined;
+    }
+
+    @action approve(extension) {
+        return this.modalsManager.confirm({
+            title: this.intl.t('registry-bridge.component.extension-reviewer-control.approve-confirm-title', { extensionName: extension.name }),
+            body: this.intl.t('registry-bridge.component.extension-reviewer-control.approve-confirm-body'),
+            acceptButtonText: this.intl.t('registry-bridge.component.extension-reviewer-control.approve'),
+            confirm: () => {
+                this.unfocusExtension();
+                return extension.approve().finally(() => {
+                    this.getExtensionsPendingReview.perform();
+                });
+            },
+        });
+    }
+
+    @action reject(extension) {
+        return this.modalsManager.confirm({
+            title: this.intl.t('registry-bridge.component.extension-reviewer-control.decline-confirm-title', { extensionName: extension.name }),
+            body: this.intl.t('registry-bridge.component.extension-reviewer-control.decline-confirm-body'),
+            acceptButtonText: this.intl.t('registry-bridge.component.extension-reviewer-control.reject'),
+            acceptButtonIcon: 'ban',
+            acceptButtonScheme: 'danger',
+            confirm: () => {
+                return extension.reject().finally(() => {
+                    this.getExtensionsPendingReview.perform();
+                });
+            },
+        });
+    }
+}

package/addon/components/modals/confirm-extension-purchase.hbs

@@ -0,0 +1,5 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="pt-4 pb-6 px-4">
+        <Spinner @loadingMessage={{@options.loadingMessage}} @loadingMessageClass="ml-2 text-black dark:text-white" @wrapperClass="flex flex-row items-center" />
+    </div>
+</Modal::Default>

package/addon/components/modals/confirm-extension-purchase.js

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

package/addon/components/modals/extension-details.hbs

@@ -0,0 +1,69 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container space-y-3">
+        <div class="flex flex-row items-center space-x-2">
+            <div class="flb--extension-tag shadow-sm border dark:bg-gray-800 dark:border-gray-800 dark:text-gray-200">
+                Extension
+            </div>
+            <div class="flb--extension-tag shadow-sm border dark:bg-gray-800 dark:border-gray-800 dark:text-gray-200">
+                {{this.extension.category_name}}
+            </div>
+        </div>
+        {{#if @options.progress}}
+            <div class="my-4">
+                <ProgressBar @title={{@options.stepDescription}} @percent={{@options.progress}} />
+            </div>
+        {{/if}}
+        {{#if this.extension.screenshots}}
+            <div class="grid grid-cols-4 gap-2">
+                {{#each this.extension.screenshots as |screenshot|}}
+                    <Image src={{screenshot.url}} class="flb--extension-screenshot" {{on "click" (fn this.lightboxScreenshot screenshot)}} />
+                {{/each}}
+            </div>
+            {{#if this.screenshotInLightbox}}
+                <EmberWormhole @to="console-wormhole">
+                    <div class="flb--extension-screenshot-lightbox" {{did-insert this.setupScreenshotLightbox}}>
+                        <Image src={{this.screenshotInLightbox.url}} class="flb--extension-screenshot" {{on "click" this.lightboxScreenshot}} />
+                    </div>
+                </EmberWormhole>
+            {{/if}}
+        {{/if}}
+        <div>
+            <h3 class="dark:text-white font-semibold mb-1">Overview</h3>
+            <div class="space-y-1">
+                <p class="dark:text-gray-200 text-sm">{{this.extension.description}}</p>
+                <p class="dark:text-gray-200 text-sm">{{this.extension.promotional_text}}</p>
+            </div>
+        </div>
+        <div>
+            <h3 class="dark:text-white font-semibold mb-1">Details</h3>
+            <div class="space-y-2">
+                <div class="grid grid-cols-4 gap-2">
+                    <div class="space-y-2">
+                        <div>
+                            <div class="text-sm font-semibold dark:text-gray-100">Version</div>
+                            <div class="text-sm dark:text-gray-200">{{this.extension.version}}</div>
+                        </div>
+                        <div>
+                            <div class="text-sm font-semibold dark:text-gray-100">Updated</div>
+                            <div class="text-sm dark:text-gray-200">{{this.extension.updatedAt}}</div>
+                        </div>
+                    </div>
+                    <div class="space-y-2">
+                        <div>
+                            <div class="text-sm font-semibold dark:text-gray-100">Author</div>
+                            <div class="text-sm dark:text-gray-200">{{this.extension.publisher_name}}</div>
+                        </div>
+                        <div>
+                            <div class="text-sm font-semibold dark:text-gray-100">Website</div>
+                            <a
+                                class="text-sm dark:text-gray-200"
+                                href={{this.extension.website_url}}
+                                target={{dasherize (concat this.extension.name "-website")}}
+                            >{{this.extension.website_url}}</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</Modal::Default>

package/addon/components/modals/extension-details.js

@@ -0,0 +1,33 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { later } from '@ember/runloop';
+
+export default class ModalsExtensionDetailsComponent extends Component {
+    @tracked extension;
+    @tracked screenshotInLightbox;
+
+    constructor(owner, { options }) {
+        super(...arguments);
+        this.extension = options.extension;
+    }
+
+    @action lightboxScreenshot(screenshot) {
+        this.screenshotInLightbox = screenshot;
+    }
+
+    @action setupScreenshotLightbox() {
+        const listener = () => {
+            this.screenshotInLightbox = undefined;
+            window.removeEventListener('click', listener);
+        };
+
+        later(
+            this,
+            () => {
+                window.addEventListener('click', listener);
+            },
+            600
+        );
+    }
+}

package/addon/components/modals/extension-purchase-form.hbs

@@ -0,0 +1,5 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="p-1">
+        <div id="checkout" {{did-insert @options.checkoutElementInserted}}></div>
+    </div>
+</Modal::Default>

package/addon/components/modals/extension-purchase-form.js

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

package/addon/components/modals/extension-uninstall.hbs

@@ -0,0 +1,25 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="flex flex-row py-4">
+            <div class="w-60 flex justify-center">
+                <FaIcon @icon="triangle-exclamation" @size="3x" class="text-red-500" />
+            </div>
+            <div class="flex flex-col">
+                <h2 class="dark:text-white font-bold mb-2">Proceed with Uninstall?</h2>
+                <p class="dark:text-gray-200 text-sm">
+                    Do you really want to uninstall the
+                    {{this.extension.name}}? By proceeding, you will permanently delete all settings and data related to this extension. You can reinstall the extension anytime in the
+                    future, but configuration and data will not be recovered.
+                </p>
+                <div class="mt-6 px-4 py-3 border border-gray-200 dark:border-gray-900 bg-gray-50 dark:bg-gray-700 rounded-lg">
+                    <ExtensionModalTitle @options={{@options}} @detailsContainerClass="mb-0" />
+                </div>
+            </div>
+        </div>
+        {{#if @options.progress}}
+            <div class="my-4">
+                <ProgressBar @title={{@options.stepDescription}} @percent={{@options.progress}} />
+            </div>
+        {{/if}}
+    </div>
+</Modal::Default>

package/addon/components/modals/extension-uninstall.js

@@ -0,0 +1,11 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class ModalsExtensionUninstallComponent extends Component {
+    @tracked extension;
+
+    constructor(owner, { options }) {
+        super(...arguments);
+        this.extension = options.extension;
+    }
+}