added self managed flag and details to ui

addon/components/extension-form.hbs

@@ -69,7 +69,6 @@
 
             <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
@@ -85,6 +84,19 @@
                     {{tag}}
                 </TagInput>
             </InputGroup>
+
+            <InputGroup @wrapperClass="mb-0i">
+                <Toggle
+                    @isToggled={{@extension.self_managed}}
+                    @onToggle={{fn (mut @extension.self_managed)}}
+                    @helpText={{t "registry-bridge.developers.extensions.extension-form.self-managed-help-text"}}
+                >
+                    <span class="dark:text-gray-100 text-sm mx-2">{{t "registry-bridge.developers.extensions.extension-form.self-managed"}}</span>
+                </Toggle>
+                <p class="mt-2 text-xs bg-blue-800 border border-blue-600 px-2 py-2 rounded-md text-blue-100">
+                    {{t "registry-bridge.developers.extensions.extension-form.self-managed-help-text"}}
+                </p>
+            </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">

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,
         });

addon/components/modals/extension-details.hbs

@@ -2,7 +2,7 @@
     <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
+                {{t "registry-bridge.component.extension-details-modal.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}}
@@ -28,40 +28,49 @@
             {{/if}}
         {{/if}}
         <div>
-            <h3 class="dark:text-white font-semibold mb-1">Overview</h3>
+            <h3 class="dark:text-white font-semibold mb-1">{{t "registry-bridge.component.extension-details-modal.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">{{html-safe this.extension.promotional_text}}</p>
             </div>
         </div>
         <div>
-            <h3 class="dark:text-white font-semibold mb-1">Details</h3>
+            <h3 class="dark:text-white font-semibold mb-1">{{t "registry-bridge.component.extension-details-modal.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 font-semibold dark:text-gray-100">{{t "registry-bridge.component.extension-details-modal.version"}}</div>
                             <div class="text-sm dark:text-gray-200">{{this.extension.current_bundle_version}}</div>
                         </div>
                         <div>
-                            <div class="text-sm font-semibold dark:text-gray-100">Updated</div>
+                            <div class="text-sm font-semibold dark:text-gray-100">{{t "registry-bridge.component.extension-details-modal.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 font-semibold dark:text-gray-100">{{t "registry-bridge.component.extension-details-modal.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>
+                            <div class="text-sm font-semibold dark:text-gray-100">{{t "registry-bridge.component.extension-details-modal.website"}}</div>
                             <a
                                 class="text-sm text-blue-400 hover:text-blue-300"
                                 href={{this.extension.website_url}}
                                 target={{dasherize (concat this.extension.name "-website")}}
                             >{{this.extension.website_url}}</a>
                         </div>
                     </div>
+                    <div class="space-y-2">
+                        {{#if this.extension.self_managed}}
+                            <div>
+                                <Badge @status="info" @hideStatusDot={{true}} @helpText={{t "registry-bridge.component.extension-details-modal.self-managed-help-text"}}>{{t
+                                        "registry-bridge.component.extension-details-modal.self-managed"
+                                    }}</Badge>
+                            </div>
+                        {{/if}}
+                    </div>
                 </div>
             </div>
         </div>

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
+        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.