upgraded ember-ui and improved install instructions for self managed …

…extensions
fleetbase · Aug 6, 2024 · 07a07e3 · 07a07e3
1 parent d6fc843
commit 07a07e3
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 36 deletions.
diff --git 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
@@ -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
@@ -1,27 +1,38 @@
 <Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
     <div class="modal-body-container">
+        <p class="text-sm mb-4 text-gray-900 dark:text-gray-200">
+            Begin the installation from the base directory of your Fleetbase instance. For comprehensive instructions, visit the
+            <a href="https://github.com/fleetbase/fleetbase-cli" target="fleetbase-cli" class="text-blue-400 hover:opacity-50">
+                <FaIcon @icon="arrow-up-right-from-square" class="text-xs" />
+                Fleetbase CLI GitHub page</a>.
+        </p>
         <ol class="self-managed-install-instructions">
             <li>
                 <div class="flex">
-                    <LinkTo @route="console.extensions.developers.credentials" class="text-blue-500 hover:opacity-50">Generate a Fleetbase registry credentials token.</LinkTo>
+                    First,
+                    <LinkTo @route="console.extensions.developers.credentials" class="ml-1 text-blue-400 hover:opacity-50">generate a Fleetbase registry credentials token.</LinkTo>
                 </div>
             </li>
             <li>
-                <div class="flex">Install fleetbase-cli
+                <div class="flex flex-col">
+                    <div class="mb-2">Install the Fleetbase CLI globally using npm:</div>
                     <ClickToCopy @value={{concat "npm i -g @fleetbase/cli"}}><code>npm i -g @fleetbase/cli</code></ClickToCopy>
                 </div>
             </li>
             <li>
-                <div class="flex">Run
-                    <ClickToCopy @value={{concat "flb set-auth"}}><code>flb set-auth {YOUR_TOKEN}</code></ClickToCopy>
+                <div class="flex flex-col">
+                    <div class="mb-2">Set your authentication token with the CLI:</div>
+                    <ClickToCopy @value={{concat "flb set-auth {YOUR_TOKEN}"}}><code>flb set-auth {YOUR_TOKEN}</code></ClickToCopy>
                 </div>
             </li>
             <li>
-                <div class="flex">
-                    Run install
-                    <ClickToCopy @value={{concat "flb install fleetbase/" @options.extension.slug}}><code>flb install fleetbase/{{@options.extension.slug}}</code></ClickToCopy>
-                    or
-                    <ClickToCopy @value={{concat "flb install " @options.extension.public_id}}><code>flb install {{@options.extension.public_id}}</code></ClickToCopy>
+                <div class="flex flex-col">
+                    <div class="mb-2">Finally, install the extension using one of the following commands:</div>
+                    <div>
+                        <ClickToCopy @value={{concat "flb install fleetbase/" @options.extension.slug}}><code>flb install fleetbase/{{@options.extension.slug}}</code></ClickToCopy>
+                        <div class="my-1 pl-2">or</div>
+                        <ClickToCopy @value={{concat "flb install " @options.extension.public_id}}><code>flb install {{@options.extension.public_id}}</code></ClickToCopy>
+                    </div>
                 </div>
             </li>
         </ol>

diff --git 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
@@ -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