From 0206eea0d1aada7380ce822b535fe4b1b4abec7d Mon Sep 17 00:00:00 2001 From: "Ronald A. Richardson" Date: Fri, 2 Aug 2024 15:27:01 +0800 Subject: [PATCH 1/5] added new flag to indicate self managed extension, few ui improvements, ability to preview listing --- addon/components/extension-card.hbs | 5 ++++ addon/components/extension-card.js | 3 +- addon/components/extension-form.hbs | 8 ++++- addon/components/extension-form.js | 30 +++++++++++++++++++ addon/components/modals/extension-details.hbs | 2 +- addon/models/registry-extension.js | 2 ++ composer.json | 2 +- extension.json | 2 +- package.json | 2 +- ...ed_column_to_registry_extensions_table.php | 28 +++++++++++++++++ server/src/Models/RegistryExtension.php | 11 +++++++ server/src/Models/RegistryExtensionBundle.php | 4 +-- 12 files changed, 91 insertions(+), 8 deletions(-) create mode 100644 server/migrations/2024_08_02_072214_add_self_managed_column_to_registry_extensions_table.php diff --git a/addon/components/extension-card.hbs b/addon/components/extension-card.hbs index 87f18af..234631f 100644 --- a/addon/components/extension-card.hbs +++ b/addon/components/extension-card.hbs @@ -6,6 +6,11 @@
{{@extension.name}}
{{n-a @extension.description}}
+ {{#if @extension.payment_required}} + {{format-currency @extension.price @extension.currency}} + {{else}} + Free + {{/if}}
{{yield @extension}} diff --git a/addon/components/extension-card.js b/addon/components/extension-card.js index 7ca0c49..a34fb37 100644 --- a/addon/components/extension-card.js +++ b/addon/components/extension-card.js @@ -40,9 +40,10 @@ export default class ExtensionCardComponent extends Component { @action onClick(options = {}) { const installChannel = `install.${this.currentUser.companyId}.${this.extension.id}`; + const isAuthor = this.extension.is_author === true; const isAlreadyPurchased = this.extension.is_purchased === true; const isAlreadyInstalled = this.extension.is_installed === true; - const isPaymentRequired = this.extension.payment_required === true && isAlreadyPurchased === false; + const isPaymentRequired = !isAuthor && this.extension.payment_required === true && isAlreadyPurchased === false; if (typeof this.args.onClick === 'function') { this.args.onClick(this.extension); diff --git a/addon/components/extension-form.hbs b/addon/components/extension-form.hbs index 3a368bf..0169588 100644 --- a/addon/components/extension-form.hbs +++ b/addon/components/extension-form.hbs @@ -101,7 +101,13 @@ {{/if}} - +
Website
{{this.extension.website_url}} diff --git a/addon/models/registry-extension.js b/addon/models/registry-extension.js index f42b62e..8c18edc 100644 --- a/addon/models/registry-extension.js +++ b/addon/models/registry-extension.js @@ -63,8 +63,10 @@ export default class RegistryExtensionModel extends Model { @attr('array') languages; @attr('object') meta; @attr('boolean') core_service; + @attr('boolean') self_managed; @attr('boolean') is_purchased; @attr('boolean') is_installed; + @attr('boolean') is_author; @attr('string', { defaultValue: 'pending' }) status; /** @dates */ diff --git a/composer.json b/composer.json index 8fdc025..b55517e 100644 --- a/composer.json +++ b/composer.json @@ -1,6 +1,6 @@ { "name": "fleetbase/registry-bridge", - "version": "0.0.11", + "version": "0.0.12", "description": "Internal Bridge between Fleetbase API and Extensions Registry", "keywords": [ "fleetbase-extension", diff --git a/extension.json b/extension.json index b7f7a57..1077ba6 100644 --- a/extension.json +++ b/extension.json @@ -1,6 +1,6 @@ { "name": "Registry Bridge", - "version": "0.0.11", + "version": "0.0.12", "description": "Internal Bridge between Fleetbase API and Extensions Registry", "repository": "https://github.com/fleetbase/registry-bridge", "license": "AGPL-3.0-or-later", diff --git a/package.json b/package.json index d464f52..a3525e0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@fleetbase/registry-bridge-engine", - "version": "0.0.11", + "version": "0.0.12", "description": "Internal Bridge between Fleetbase API and Extensions Registry", "fleetbase": { "route": "extensions" diff --git a/server/migrations/2024_08_02_072214_add_self_managed_column_to_registry_extensions_table.php b/server/migrations/2024_08_02_072214_add_self_managed_column_to_registry_extensions_table.php new file mode 100644 index 0000000..488516d --- /dev/null +++ b/server/migrations/2024_08_02_072214_add_self_managed_column_to_registry_extensions_table.php @@ -0,0 +1,28 @@ +boolean('self_managed')->after('subtitle')->default(0); + }); + } + + /** + * Reverse the migrations. + */ + public function down(): void + { + Schema::table('registry_extensions', function (Blueprint $table) { + $table->dropColumn('self_managed'); + }); + } +}; diff --git a/server/src/Models/RegistryExtension.php b/server/src/Models/RegistryExtension.php index 63893f2..c9bb933 100644 --- a/server/src/Models/RegistryExtension.php +++ b/server/src/Models/RegistryExtension.php @@ -57,6 +57,7 @@ class RegistryExtension extends Model 'stripe_product_id', 'name', 'subtitle', + 'self_managed', 'payment_required', 'price', 'sale_price', @@ -90,6 +91,7 @@ class RegistryExtension extends Model * The attributes that should be cast to native types. */ protected $casts = [ + 'self_managed' => 'boolean', 'payment_required' => 'boolean', 'on_sale' => 'boolean', 'subscription_required' => 'boolean', @@ -121,6 +123,7 @@ class RegistryExtension extends Model 'publisher_name', 'is_purchased', 'is_installed', + 'is_author', ]; /** @@ -413,6 +416,14 @@ public function getPublisherNameAttribute(): ?string return data_get($this, 'company.name'); } + /** + * Determines if the current company session is the author of the extension. + */ + public function getIsAuthorAttribute(): bool + { + return $this->company_uuid === session('company'); + } + /** * Finds a RegistryExtension by package name in the associated currentBundle. * diff --git a/server/src/Models/RegistryExtensionBundle.php b/server/src/Models/RegistryExtensionBundle.php index 8a4dcd9..d76832c 100644 --- a/server/src/Models/RegistryExtensionBundle.php +++ b/server/src/Models/RegistryExtensionBundle.php @@ -688,7 +688,7 @@ public function runInstallerProgress(): void ]); // minimal latency - usleep(500 * rand(2, 4)); + usleep(50 * rand(1, 3)); } } } @@ -708,7 +708,7 @@ public function runUninstallerProgress(): void ]); // minimal latency - usleep(500 * rand(2, 4)); + usleep(50 * rand(1, 3)); } } } From 8b715aff4b75e6b56ae2aa6ac612257bd440a899 Mon Sep 17 00:00:00 2001 From: "Ronald A. Richardson" Date: Fri, 2 Aug 2024 15:49:14 +0800 Subject: [PATCH 2/5] added self managed flag and details to ui --- addon/components/extension-form.hbs | 14 ++++++++++- addon/components/extension-form.js | 7 +++--- addon/components/modals/extension-details.hbs | 23 +++++++++++++------ translations/en-us.yaml | 14 ++++++++++- 4 files changed, 45 insertions(+), 13 deletions(-) diff --git a/addon/components/extension-form.hbs b/addon/components/extension-form.hbs index 0169588..a4be355 100644 --- a/addon/components/extension-form.hbs +++ b/addon/components/extension-form.hbs @@ -69,7 +69,6 @@ + + + + {{t "registry-bridge.developers.extensions.extension-form.self-managed"}} + +

+ {{t "registry-bridge.developers.extensions.extension-form.self-managed-help-text"}} +

+
diff --git a/addon/components/extension-form.js b/addon/components/extension-form.js index 8fc094f..6dd80d1 100644 --- a/addon/components/extension-form.js +++ b/addon/components/extension-form.js @@ -19,8 +19,8 @@ export default class ExtensionFormComponent extends Component { type: 'link', size: 'xs', text: 'Preview Listing', - onClick: this.previewListing - } + onClick: this.previewListing, + }, ]; acceptedImageTypes = ['image/jpeg', 'image/png', 'image/gif']; acceptedBundleTypes = [ @@ -142,10 +142,9 @@ export default class ExtensionFormComponent extends Component { modalHeaderClass: 'flb--extension-modal-header', acceptButtonText: isPaymentRequired ? `Purchase for ${formatCurrency(extension.price, extension.currency)}` : isAlreadyInstalled ? 'Installed' : 'Install', acceptButtonIcon: isPaymentRequired ? 'credit-card' : isAlreadyInstalled ? 'check' : 'download', - acceptButtonDisabled: isAlreadyInstalled, + acceptButtonDisabled: true, acceptButtonScheme: isPaymentRequired ? 'success' : 'primary', declineButtonText: 'Done', - acceptButtonDisabled: true, extension, ...options, }); diff --git a/addon/components/modals/extension-details.hbs b/addon/components/modals/extension-details.hbs index 193ac39..b7de2cc 100644 --- a/addon/components/modals/extension-details.hbs +++ b/addon/components/modals/extension-details.hbs @@ -2,7 +2,7 @@
- Extension + {{t "registry-bridge.component.extension-details-modal.extension"}}
{{this.extension.category_name}} @@ -28,33 +28,33 @@ {{/if}} {{/if}}
-

Overview

+

{{t "registry-bridge.component.extension-details-modal.overview"}}

{{this.extension.description}}

{{html-safe this.extension.promotional_text}}

-

Details

+

{{t "registry-bridge.component.extension-details-modal.details"}}

-
Version
+
{{t "registry-bridge.component.extension-details-modal.version"}}
{{this.extension.current_bundle_version}}
-
Updated
+
{{t "registry-bridge.component.extension-details-modal.updated"}}
{{this.extension.updatedAt}}
-
Author
+
{{t "registry-bridge.component.extension-details-modal.author"}}
{{this.extension.publisher_name}}
-
Website
+
{{t "registry-bridge.component.extension-details-modal.website"}}
{{this.extension.website_url}}
+
+ {{#if this.extension.self_managed}} +
+ {{t + "registry-bridge.component.extension-details-modal.self-managed" + }} +
+ {{/if}} +
diff --git a/translations/en-us.yaml b/translations/en-us.yaml index 7aa39fc..5c90b37 100644 --- a/translations/en-us.yaml +++ b/translations/en-us.yaml @@ -9,6 +9,16 @@ registry-bridge: about: About about-extension: About {extensionName} component: + extension-details-modal: + extension: Extension + author: Author + overview: Overview + details: Details + version: Version + updated: Updated + website: Website + self-managed: Self Managed + self-managed-help-text: A self-managed extension is designed for users who host Fleetbase on their own servers, outside of the cloud/SaaS environment. These extensions require manual installation and configuration. If you are using Fleetbase as a self-hosted instance, you can use these extensions to add additional features. However, they are not available for cloud/SaaS users. extension-pending-publish-viewer: content-panel-title: Extensions Pending Publish focused-extension-title: > @@ -116,4 +126,6 @@ registry-bridge: extension-id: Extension ID extension-id-help-text: The unique identifier for this extension. bundles: Bundles - upload-new-bundle: Upload new Bundle \ No newline at end of file + upload-new-bundle: Upload new Bundle + self-managed: Self Managed + self-managed-help-text: Enable this option if your module is intended for self-hosted instances only. By selecting this, the module will not be available for installation on the cloud/SaaS version of Fleetbase and must be manually installed by the user on their own server. \ No newline at end of file From d6fc84381719b507b877b7874bfe9429aead92d7 Mon Sep 17 00:00:00 2001 From: "Ronald A. Richardson" Date: Mon, 5 Aug 2024 14:29:00 +0800 Subject: [PATCH 3/5] added install instructions for self managed extensions and package lookup endpoint --- addon/components/extension-card.js | 22 +++++++++ addon/components/extension-form.js | 22 +++++++++ addon/components/modals/extension-details.hbs | 3 ++ .../self-managed-install-instructions.hbs | 29 ++++++++++++ addon/styles/registry-bridge-engine.css | 28 +++++++++++ .../self-managed-install-instructions.js | 1 + .../Internal/v1/RegistryController.php | 46 +++++++++++++++++++ server/src/Models/RegistryExtension.php | 34 ++++++++++++++ server/src/routes.php | 3 +- .../self-managed-install-instructions-test.js | 26 +++++++++++ 10 files changed, 213 insertions(+), 1 deletion(-) create mode 100644 addon/components/modals/self-managed-install-instructions.hbs create mode 100644 app/components/modals/self-managed-install-instructions.js create mode 100644 tests/integration/components/modals/self-managed-install-instructions-test.js diff --git a/addon/components/extension-card.js b/addon/components/extension-card.js index a34fb37..01edb90 100644 --- a/addon/components/extension-card.js +++ b/addon/components/extension-card.js @@ -64,6 +64,18 @@ export default class ExtensionCardComponent extends Component { stepDescription: 'Awaiting install to begin...', progress: 0, extension: this.extension, + viewSelfManagesInstallInstructions: () => { + const done = async () => { + await this.modalsManager.done(); + this.onClick(); + }; + + this.selfManagedInstallInstructions({ + extension: this.extension, + confirm: done, + decline: done, + }); + }, confirm: async (modal) => { modal.startLoading(); @@ -122,6 +134,16 @@ export default class ExtensionCardComponent extends Component { }); } + async selfManagedInstallInstructions(options = {}) { + await this.modalsManager.done(); + this.modalsManager.show('modals/self-managed-install-instructions', { + title: 'Install a Self Managed Extension', + hideDeclineButton: true, + acceptButtonText: 'Done', + ...options, + }); + } + async startCheckoutSession() { const checkout = await this.stripe.initEmbeddedCheckout({ fetchClientSecret: this.fetchClientSecret.bind(this), diff --git a/addon/components/extension-form.js b/addon/components/extension-form.js index 6dd80d1..e610943 100644 --- a/addon/components/extension-form.js +++ b/addon/components/extension-form.js @@ -145,8 +145,30 @@ export default class ExtensionFormComponent extends Component { acceptButtonDisabled: true, acceptButtonScheme: isPaymentRequired ? 'success' : 'primary', declineButtonText: 'Done', + viewSelfManagesInstallInstructions: () => { + const done = async () => { + await this.modalsManager.done(); + this.previewListing(); + }; + + this.selfManagedInstallInstructions({ + extension, + confirm: done, + decline: done, + }); + }, extension, ...options, }); } + + async selfManagedInstallInstructions(options = {}) { + await this.modalsManager.done(); + this.modalsManager.show('modals/self-managed-install-instructions', { + title: 'Install a Self Managed Extension', + hideDeclineButton: true, + acceptButtonText: 'Done', + ...options, + }); + } } diff --git a/addon/components/modals/extension-details.hbs b/addon/components/modals/extension-details.hbs index b7de2cc..15d2a9c 100644 --- a/addon/components/modals/extension-details.hbs +++ b/addon/components/modals/extension-details.hbs @@ -68,6 +68,9 @@ {{t "registry-bridge.component.extension-details-modal.self-managed" }} + {{#if @options.viewSelfManagesInstallInstructions}} + How to install + {{/if}}
{{/if}}
diff --git a/addon/components/modals/self-managed-install-instructions.hbs b/addon/components/modals/self-managed-install-instructions.hbs new file mode 100644 index 0000000..5ba55c3 --- /dev/null +++ b/addon/components/modals/self-managed-install-instructions.hbs @@ -0,0 +1,29 @@ + +
+
    +
  1. +
    + Generate a Fleetbase registry credentials token. +
    +
    2. +
  2. +
    Install fleetbase-cli + npm i -g @fleetbase/cli +
    +
    3. +
  3. +
    Run + flb set-auth {YOUR_TOKEN} +
    +
    4. +
  4. +
    + Run install + flb install fleetbase/{{@options.extension.slug}} + or + flb install {{@options.extension.public_id}} +
    +
    5. +
+
+ \ No newline at end of file diff --git a/addon/styles/registry-bridge-engine.css b/addon/styles/registry-bridge-engine.css index 72e8c18..dcfb0f5 100644 --- a/addon/styles/registry-bridge-engine.css +++ b/addon/styles/registry-bridge-engine.css @@ -140,3 +140,31 @@ body[data-theme='dark'] .extension-card-container > .extension-card-body-contain margin-left: 2rem; margin-bottom: 2rem; } + +.self-managed-install-instructions { + list-style: decimal; + color: #000; + padding-left: 30px; + font-size: 1rem; +} + +.self-managed-install-instructions > li { + padding-bottom: 0.5rem; +} + +body[data-theme='dark'] .self-managed-install-instructions { + list-style: decimal; + color: #fff; + padding-left: 30px; +} + +.self-managed-install-instructions code { + font-family: monospace; + padding: 0.05rem 0.2rem; + box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%); + background-color: #030712; + border: 1px #1f2937 solid; + color: #22c55e; + border-radius: 0.25rem; + font-size: 0.75rem; +} diff --git a/app/components/modals/self-managed-install-instructions.js b/app/components/modals/self-managed-install-instructions.js new file mode 100644 index 0000000..3ec45df --- /dev/null +++ b/app/components/modals/self-managed-install-instructions.js @@ -0,0 +1 @@ +export { default } from '@fleetbase/registry-bridge-engine/components/modals/self-managed-install-instructions'; diff --git a/server/src/Http/Controllers/Internal/v1/RegistryController.php b/server/src/Http/Controllers/Internal/v1/RegistryController.php index 124f2e6..4b563cf 100644 --- a/server/src/Http/Controllers/Internal/v1/RegistryController.php +++ b/server/src/Http/Controllers/Internal/v1/RegistryController.php @@ -6,6 +6,7 @@ use Fleetbase\Http\Resources\Category as CategoryResource; use Fleetbase\Models\Category; use Fleetbase\RegistryBridge\Models\RegistryExtension; +use Illuminate\Http\Request; class RegistryController extends Controller { @@ -51,4 +52,49 @@ public function getInstalledEngines() return response()->json($installedExtensions); } + + /** + * Lookup and retrieve package information based on the provided package name. + * + * This method handles a request to lookup a package by its name. It utilizes the `RegistryExtension::lookup` method to find the + * corresponding registry extension. If no extension is found or if the extension does not have valid package or composer data, + * an error response is returned. + * + * If a valid extension and its associated bundle are found, the function extracts the package and composer names from the + * `package.json` and `composer.json` metadata. These names are then returned in a JSON response. + * + * @param Request $request the incoming HTTP request containing the 'package' input parameter + * + * @return \Illuminate\Http\JsonResponse a JSON response containing the package and composer names if found, or an error message otherwise + */ + public function lookupPackage(Request $request) + { + $packageName = $request->input('package'); + $registryExtension = RegistryExtension::lookup($packageName); + if (!$registryExtension) { + return response()->error('No extension found by this name for install'); + } + + if (!$registryExtension->currentBundle) { + return response()->error('No valid package data found for this extension install'); + } + + $packageJson = $registryExtension->currentBundle->meta['package.json']; + if (!$packageJson) { + return response()->error('No valid package data found for this extension install'); + } + + $composerJson = $registryExtension->currentBundle->meta['composer.json']; + if (!$composerJson) { + return response()->error('No valid package data found for this extension install'); + } + + $packageJsonName = data_get($packageJson, 'name'); + $composerJsonName = data_get($composerJson, 'name'); + + return response()->json([ + 'npm' => $packageJsonName, + 'composer' => $composerJsonName, + ]); + } } diff --git a/server/src/Models/RegistryExtension.php b/server/src/Models/RegistryExtension.php index c9bb933..604d1ff 100644 --- a/server/src/Models/RegistryExtension.php +++ b/server/src/Models/RegistryExtension.php @@ -15,6 +15,7 @@ use Fleetbase\Traits\HasPublicId; use Fleetbase\Traits\HasUuid; use Fleetbase\Traits\Searchable; +use Illuminate\Support\Str; use Spatie\Sluggable\HasSlug; use Spatie\Sluggable\SlugOptions; @@ -444,6 +445,39 @@ public static function findByPackageName(string $packageName): ?RegistryExtensio })->first(); } + /** + * Lookup a registry extension based on the given package name. + * + * This method attempts to find a `RegistryExtension` that matches the provided package name. It checks multiple fields including + * `uuid`, `public_id`, and `slug`. If the package name starts with 'fleetbase/', it also attempts to match the slug extracted from the package name. + * + * Additionally, the method checks for the existence of a related `currentBundle` where the `package.json` or `composer.json` metadata + * matches the provided package name. + * + * @param string $packageName the name, UUID, public ID, or slug of the package to lookup + * + * @return RegistryExtension|null returns the found `RegistryExtension` instance or `null` if no match is found + */ + public static function lookup(string $packageName): ?RegistryExtension + { + return static::where('status', 'published')->where(function ($query) use ($packageName) { + $query->where('uuid', $packageName) + ->orWhere('public_id', $packageName) + ->orWhere('slug', $packageName); + + // Check for fleetbase/ prefix and match slug + if (Str::startsWith($packageName, 'fleetbase/')) { + $packageSlug = explode('/', $packageName)[1] ?? null; + if ($packageSlug) { + $query->orWhere('slug', $packageSlug); + } + } + })->orWhereHas('currentBundle', function ($query) use ($packageName) { + $query->where('meta->package.json->name', $packageName) + ->orWhere('meta->composer.json->name', $packageName); + })->with(['currentBundle'])->first(); + } + /** * Determines if the current extension instance is ready for submission. * diff --git a/server/src/routes.php b/server/src/routes.php index b475c5a..034becc 100644 --- a/server/src/routes.php +++ b/server/src/routes.php @@ -12,7 +12,8 @@ | is assigned the "api" middleware group. Enjoy building your API! | */ - +// Lookup package endpoint +Route::get(config('internals.api.routing.prefix', '~registry') . '/v1/lookup', 'Fleetbase\RegistryBridge\Http\Controllers\Internal\v1\RegistryController@lookupPackage'); Route::prefix(config('internals.api.routing.prefix', '~registry'))->middleware(['fleetbase.registry'])->namespace('Fleetbase\RegistryBridge\Http\Controllers')->group( function ($router) { /* diff --git a/tests/integration/components/modals/self-managed-install-instructions-test.js b/tests/integration/components/modals/self-managed-install-instructions-test.js new file mode 100644 index 0000000..67288ca --- /dev/null +++ b/tests/integration/components/modals/self-managed-install-instructions-test.js @@ -0,0 +1,26 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'dummy/tests/helpers'; +import { render } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; + +module('Integration | Component | modals/self-managed-install-instructions', function (hooks) { + setupRenderingTest(hooks); + + test('it renders', async function (assert) { + // Set any properties with this.set('myProperty', 'value'); + // Handle any actions with this.set('myAction', function(val) { ... }); + + await render(hbs``); + + assert.dom().hasText(''); + + // Template block usage: + await render(hbs` + + template block text + + `); + + assert.dom().hasText('template block text'); + }); +}); From 07a07e3df72c76e836b4cb8dfccb32a6473b520f Mon Sep 17 00:00:00 2001 From: "Ronald A. Richardson" Date: Tue, 6 Aug 2024 13:08:34 +0800 Subject: [PATCH 4/5] upgraded ember-ui and improved install instructions for self managed extensions --- addon/components/extension-card.js | 36 +++++++++++++++---- addon/components/extension-form.js | 20 +++++++---- .../self-managed-install-instructions.hbs | 29 ++++++++++----- addon/styles/registry-bridge-engine.css | 17 +++++---- package.json | 2 +- pnpm-lock.yaml | 10 +++--- 6 files changed, 78 insertions(+), 36 deletions(-) diff --git a/addon/components/extension-card.js b/addon/components/extension-card.js index 01edb90..2a3a62c 100644 --- a/addon/components/extension-card.js +++ b/addon/components/extension-card.js @@ -41,9 +41,20 @@ export default class ExtensionCardComponent extends Component { @action onClick(options = {}) { const installChannel = `install.${this.currentUser.companyId}.${this.extension.id}`; const isAuthor = this.extension.is_author === true; + const isSelfManaged = this.extension.self_managed === true; const isAlreadyPurchased = this.extension.is_purchased === true; const isAlreadyInstalled = this.extension.is_installed === true; const isPaymentRequired = !isAuthor && this.extension.payment_required === true && isAlreadyPurchased === false; + const goBack = async (modal) => { + await modal.done(); + later( + this, + () => { + this.onClick(); + }, + 100 + ); + }; if (typeof this.args.onClick === 'function') { this.args.onClick(this.extension); @@ -65,15 +76,10 @@ export default class ExtensionCardComponent extends Component { progress: 0, extension: this.extension, viewSelfManagesInstallInstructions: () => { - const done = async () => { - await this.modalsManager.done(); - this.onClick(); - }; - this.selfManagedInstallInstructions({ extension: this.extension, - confirm: done, - decline: done, + confirm: goBack, + decline: goBack, }); }, confirm: async (modal) => { @@ -84,6 +90,22 @@ export default class ExtensionCardComponent extends Component { return this.startCheckoutSession(); } + // If self managed just prompt instructions + if (isSelfManaged) { + await modal.done(); + return later( + this, + () => { + return this.selfManagedInstallInstructions({ + extension: this.extension, + confirm: goBack, + decline: goBack, + }); + }, + 100 + ); + } + // Listen for install progress this.socket.listen(installChannel, ({ process, step, progress }) => { let stepDescription; diff --git a/addon/components/extension-form.js b/addon/components/extension-form.js index e610943..32f949f 100644 --- a/addon/components/extension-form.js +++ b/addon/components/extension-form.js @@ -3,6 +3,7 @@ import { tracked } from '@glimmer/tracking'; import { inject as service } from '@ember/service'; import { action } from '@ember/object'; import { task } from 'ember-concurrency'; +import { later } from '@ember/runloop'; import formatCurrency from '@fleetbase/ember-ui/utils/format-currency'; export default class ExtensionFormComponent extends Component { @@ -135,6 +136,16 @@ export default class ExtensionFormComponent extends Component { const isAlreadyPurchased = extension.is_purchased === true; const isAlreadyInstalled = extension.is_installed === true; const isPaymentRequired = extension.payment_required === true && isAlreadyPurchased === false; + const goBack = async (modal) => { + await modal.done(); + later( + this, + () => { + this.previewListing(); + }, + 100 + ); + }; this.modalsManager.show('modals/extension-details', { titleComponent: 'extension-modal-title', @@ -146,15 +157,10 @@ export default class ExtensionFormComponent extends Component { acceptButtonScheme: isPaymentRequired ? 'success' : 'primary', declineButtonText: 'Done', viewSelfManagesInstallInstructions: () => { - const done = async () => { - await this.modalsManager.done(); - this.previewListing(); - }; - this.selfManagedInstallInstructions({ extension, - confirm: done, - decline: done, + confirm: goBack, + decline: goBack, }); }, extension, diff --git a/addon/components/modals/self-managed-install-instructions.hbs b/addon/components/modals/self-managed-install-instructions.hbs index 5ba55c3..d606d7c 100644 --- a/addon/components/modals/self-managed-install-instructions.hbs +++ b/addon/components/modals/self-managed-install-instructions.hbs @@ -1,27 +1,38 @@
+

+ Begin the installation from the base directory of your Fleetbase instance. For comprehensive instructions, visit the + + + Fleetbase CLI GitHub page. +

  1. - Generate a Fleetbase registry credentials token. + First, + generate a Fleetbase registry credentials token.
  2. -
    Install fleetbase-cli +
    +
    Install the Fleetbase CLI globally using npm:
    npm i -g @fleetbase/cli
  3. -
    Run - flb set-auth {YOUR_TOKEN} +
    +
    Set your authentication token with the CLI:
    + flb set-auth {YOUR_TOKEN}
  4. -
    - Run install - flb install fleetbase/{{@options.extension.slug}} - or - flb install {{@options.extension.public_id}} +
    +
    Finally, install the extension using one of the following commands:
    +
    + flb install fleetbase/{{@options.extension.slug}} +
    or
    + flb install {{@options.extension.public_id}} +
diff --git a/addon/styles/registry-bridge-engine.css b/addon/styles/registry-bridge-engine.css index dcfb0f5..fc919df 100644 --- a/addon/styles/registry-bridge-engine.css +++ b/addon/styles/registry-bridge-engine.css @@ -145,11 +145,12 @@ body[data-theme='dark'] .extension-card-container > .extension-card-body-contain list-style: decimal; color: #000; padding-left: 30px; - font-size: 1rem; + font-size: 0.85rem; + line-height: 1rem; } .self-managed-install-instructions > li { - padding-bottom: 0.5rem; + padding-bottom: 1.5rem; } body[data-theme='dark'] .self-managed-install-instructions { @@ -159,12 +160,14 @@ body[data-theme='dark'] .self-managed-install-instructions { } .self-managed-install-instructions code { + display: flex; font-family: monospace; - padding: 0.05rem 0.2rem; + padding: 0.25rem 0.75rem; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%); - background-color: #030712; - border: 1px #1f2937 solid; - color: #22c55e; - border-radius: 0.25rem; + background-color: #1f2937; + border: 1px #374151 solid; + color: #86efac; + border-radius: 0.5rem; font-size: 0.75rem; + line-height: 1rem; } diff --git a/package.json b/package.json index a3525e0..01c1ca5 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "dependencies": { "@babel/core": "^7.23.2", "@fleetbase/ember-core": "^0.2.14", - "@fleetbase/ember-ui": "^0.2.20", + "@fleetbase/ember-ui": "^0.2.21", "@fortawesome/ember-fontawesome": "^2.0.0", "@fortawesome/fontawesome-svg-core": "6.4.0", "@fortawesome/free-solid-svg-icons": "6.4.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 32ffb2e..92e2c92 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -15,8 +15,8 @@ importers: specifier: ^0.2.14 version: 0.2.14(@ember/test-helpers@3.2.0(ember-source@5.4.0(@babel/core@7.23.2)(@glimmer/component@1.1.2(@babel/core@7.23.2))(rsvp@4.8.5)(webpack@5.89.0))(webpack@5.89.0))(ember-source@5.4.0(@babel/core@7.23.2)(@glimmer/component@1.1.2(@babel/core@7.23.2))(rsvp@4.8.5)(webpack@5.89.0))(webpack@5.89.0) '@fleetbase/ember-ui': - specifier: ^0.2.20 - version: 0.2.20(@ember/test-helpers@3.2.0(ember-source@5.4.0(@babel/core@7.23.2)(@glimmer/component@1.1.2(@babel/core@7.23.2))(rsvp@4.8.5)(webpack@5.89.0))(webpack@5.89.0))(@glimmer/component@1.1.2(@babel/core@7.23.2))(@glimmer/tracking@1.1.2)(ember-source@5.4.0(@babel/core@7.23.2)(@glimmer/component@1.1.2(@babel/core@7.23.2))(rsvp@4.8.5)(webpack@5.89.0))(postcss@8.4.39)(rollup@2.79.1)(tracked-built-ins@3.3.0)(webpack@5.89.0) + specifier: ^0.2.21 + version: 0.2.21(@ember/test-helpers@3.2.0(ember-source@5.4.0(@babel/core@7.23.2)(@glimmer/component@1.1.2(@babel/core@7.23.2))(rsvp@4.8.5)(webpack@5.89.0))(webpack@5.89.0))(@glimmer/component@1.1.2(@babel/core@7.23.2))(@glimmer/tracking@1.1.2)(ember-source@5.4.0(@babel/core@7.23.2)(@glimmer/component@1.1.2(@babel/core@7.23.2))(rsvp@4.8.5)(webpack@5.89.0))(postcss@8.4.39)(rollup@2.79.1)(tracked-built-ins@3.3.0)(webpack@5.89.0) '@fortawesome/ember-fontawesome': specifier: ^2.0.0 version: 2.0.0(ember-source@5.4.0(@babel/core@7.23.2)(@glimmer/component@1.1.2(@babel/core@7.23.2))(rsvp@4.8.5)(webpack@5.89.0))(rollup@2.79.1)(webpack@5.89.0) @@ -1334,8 +1334,8 @@ packages: resolution: {integrity: sha512-OdFY1QGG6NewnL51halLlxVQW7s93uY4lz3bk4rL8dDfoxQaPi3knXSu9yL9TrT3x3H+1z34ZseksVfUv6Wzyg==} engines: {node: '>= 18'} - '@fleetbase/ember-ui@0.2.20': - resolution: {integrity: sha512-adbwNVV8huOurRiF+fJJB9JqJO+PdZc6v/zq16UC42PcZvXxncA94PqrL45jYBAhLWtrxJQih+rPVF+L5WnuhA==} + '@fleetbase/ember-ui@0.2.21': + resolution: {integrity: sha512-Ia2V4yjy0qk8p8HelACM0SFJdpi1HBwqyyr4e0g1lFUxrKLceGCHgDFXYoqNG+Q4lecFVZO0n2oFbFdYrh9hpg==} engines: {node: '>= 18'} '@floating-ui/core@1.6.4': @@ -9712,7 +9712,7 @@ snapshots: - utf-8-validate - webpack - '@fleetbase/ember-ui@0.2.20(@ember/test-helpers@3.2.0(ember-source@5.4.0(@babel/core@7.23.2)(@glimmer/component@1.1.2(@babel/core@7.23.2))(rsvp@4.8.5)(webpack@5.89.0))(webpack@5.89.0))(@glimmer/component@1.1.2(@babel/core@7.23.2))(@glimmer/tracking@1.1.2)(ember-source@5.4.0(@babel/core@7.23.2)(@glimmer/component@1.1.2(@babel/core@7.23.2))(rsvp@4.8.5)(webpack@5.89.0))(postcss@8.4.39)(rollup@2.79.1)(tracked-built-ins@3.3.0)(webpack@5.89.0)': + '@fleetbase/ember-ui@0.2.21(@ember/test-helpers@3.2.0(ember-source@5.4.0(@babel/core@7.23.2)(@glimmer/component@1.1.2(@babel/core@7.23.2))(rsvp@4.8.5)(webpack@5.89.0))(webpack@5.89.0))(@glimmer/component@1.1.2(@babel/core@7.23.2))(@glimmer/tracking@1.1.2)(ember-source@5.4.0(@babel/core@7.23.2)(@glimmer/component@1.1.2(@babel/core@7.23.2))(rsvp@4.8.5)(webpack@5.89.0))(postcss@8.4.39)(rollup@2.79.1)(tracked-built-ins@3.3.0)(webpack@5.89.0)': dependencies: '@babel/core': 7.23.2 '@ember/render-modifiers': 2.1.0(@babel/core@7.23.2)(ember-source@5.4.0(@babel/core@7.23.2)(@glimmer/component@1.1.2(@babel/core@7.23.2))(rsvp@4.8.5)(webpack@5.89.0)) From 50eb883bd634f8f2e81ab89ffdcecc21e2cb487b Mon Sep 17 00:00:00 2001 From: "Ronald A. Richardson" Date: Tue, 6 Aug 2024 13:13:13 +0800 Subject: [PATCH 5/5] minor ui tweak to extension details modal --- addon/components/modals/extension-details.hbs | 25 ++++++++++++------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/addon/components/modals/extension-details.hbs b/addon/components/modals/extension-details.hbs index 15d2a9c..6960473 100644 --- a/addon/components/modals/extension-details.hbs +++ b/addon/components/modals/extension-details.hbs @@ -41,25 +41,29 @@
{{t "registry-bridge.component.extension-details-modal.version"}}
-
{{this.extension.current_bundle_version}}
+
{{n-a this.extension.current_bundle_version}}
{{t "registry-bridge.component.extension-details-modal.updated"}}
-
{{this.extension.updatedAt}}
+
{{n-a this.extension.updatedAt}}
{{t "registry-bridge.component.extension-details-modal.author"}}
-
{{this.extension.publisher_name}}
+
{{n-a this.extension.publisher_name}}
{{t "registry-bridge.component.extension-details-modal.website"}}
- {{this.extension.website_url}} + {{#if this.extension.website_url}} + {{this.extension.website_url}} + {{else}} +
-
+ {{/if}}
@@ -69,7 +73,10 @@ "registry-bridge.component.extension-details-modal.self-managed" }} {{#if @options.viewSelfManagesInstallInstructions}} - How to install + How to install {{/if}}
{{/if}}