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))