@fleetbase/registry-bridge-engine 0.0.19 → 0.1.1

package/addon/components/extension-card.hbs

@@ -1,17 +1,35 @@
-<button type="button" class="extension-card-container hover:opacity-50 {{@buttonClass}}" ...attributes {{on "click" this.onClick}} {{did-update this.onExtensionUpdated @extension}}>
-    <div class="extension-card-icon-container {{@iconWrapperClass}}">
-        <Image src={{@extension.icon_url}} class={{@iconClass}} alt={{@extension.name}} @fallbackSrc={{config "defaultValues.extensionIcon"}} />
-    </div>
-    <div class="extension-card-body-container {{@detailsWrapperClass}}">
-        <div class="flex flex-col">
-            <div class="font-semibold text-sm block {{@nameTextClass}}">{{@extension.name}}</div>
-            <div class="text-xs {{@descriptionTextClass}}">{{n-a @extension.description}}</div>
-            {{#if @extension.payment_required}}
-                <Badge @status="success" @hideStatusDot={{true}}>{{format-currency @extension.price @extension.currency}}</Badge>
-            {{else}}
-                <Badge @status="success" @hideStatusDot={{true}}>Free</Badge>
-            {{/if}}
+<Layout::Resource::Card  {{on "click" this.onClick}} {{did-update this.onExtensionUpdated @resource}} ...attributes as |Card|>
+    <Card.header class={{@headerClass}}>
+        <div class="flex flex-row items-center justify-between">
+            <div class="font-semibold">{{@resource.name}}</div>
+            <div>
+                {{#if @resource.payment_required}}
+                    <Badge @status="success" @hideStatusDot={{true}}>{{format-currency @resource.price @resource.currency}}</Badge>
+                {{else}}
+                    <Badge @status="success" @hideStatusDot={{true}}>Free</Badge>
+                {{/if}}
+            </div>
         </div>
-        {{yield @extension}}
-    </div>
-</button>
+        {{#if (has-block "header")}}
+            {{yield to="header"}}
+        {{/if}}
+    </Card.header>
+    <Card.body class={{@bodyClass}}>
+        <Image src={{@resource.icon_url}} alt={{@resource.name}} @fallbackSrc={{config "defaultValues.extensionIcon"}} class="card-img-lg {{@iconClass}}" />
+        {{#if (has-block "body")}}
+            {{yield to="body"}}
+        {{/if}}
+    </Card.body>
+    <Card.footer class={{@footerClass}}>
+        <div>
+            <p class="text-xs">{{n-a @extension.description}}</p>
+        </div>
+        {{#if (has-block "footer")}}
+            {{yield to="footer"}}
+        {{/if}}
+        <div class="mt-1">
+            <div class="text-gray-300 dark:text-gray-500 text-xs">Last Modified: {{@resource.updatedAt}}</div>
+        </div>
+    </Card.footer>
+</Layout::Resource::Card>
+{{yield}}

package/addon/components/extension-card.js

@@ -29,9 +29,9 @@ export default class ExtensionCardComponent extends Component {
     @service abilities;
     @tracked extension;
 
-    constructor(owner, { extension }) {
+    constructor(owner, { resource }) {
         super(...arguments);
-        this.extension = extension;
+        this.extension = resource;
         this.checkForCheckoutSession();
     }
 

package/addon/components/extension-form.hbs

@@ -28,7 +28,7 @@
         </FileUpload>
     </div>
     <div class="flex-1 px-6 space-y-6">
-        <ContentPanel @title={{t "registry-bridge.developers.extensions.extension-form.details-content-block"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+        <ContentPanel @title={{t "registry-bridge.developers.extensions.extension-form.details-content-block"}} @open={{true}} @wrapperClass="bordered-classic">
             <InputGroup
                 @name={{t "registry-bridge.developers.extensions.extension-form.extension-name"}}
                 @value={{@extension.name}}
@@ -98,7 +98,7 @@
                 </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">
+        <ContentPanel @title={{t "registry-bridge.developers.extensions.extension-form.extension-bundle"}} @open={{true}} @wrapperClass="bordered-classic">
             <div class="px-4 pb-4 pt-3 flex flex-col flex-grow-0">
                 <Button @type="magic" @icon="box-archive" @text="Select Bundle" @onClick={{this.selectBundle}} />
                 {{#if @extension.next_bundle_filename}}
@@ -116,9 +116,8 @@
         <ContentPanel
             @title={{t "registry-bridge.developers.extensions.extension-form.extension-listing-details"}}
             @open={{true}}
-            @pad={{true}}
-            @panelBodyClass="bg-white dark:bg-gray-800"
             @actionButtons={{this.listingDetailsPanelActions}}
+            @wrapperClass="bordered-classic"
         >
             <InputGroup
                 @name={{t "registry-bridge.developers.extensions.extension-form.extension-promotional-text"}}
@@ -178,7 +177,7 @@
                 />
             </div>
         </ContentPanel>
-        <ContentPanel @title={{t "registry-bridge.developers.extensions.extension-form.extension-screenshots"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+        <ContentPanel @title={{t "registry-bridge.developers.extensions.extension-form.extension-screenshots"}} @open={{true}} @wrapperClass="bordered-classic">
             <div class="space-y-4">
                 {{#if this.isUploading}}
                     <div

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

@@ -1,4 +1,4 @@
-<ContentPanel @title={{t "registry-bridge.developers.extensions.extension-form.extension-payment-details"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+<ContentPanel @title={{t "registry-bridge.developers.extensions.extension-form.extension-payment-details"}} @open={{true}} @wrapperClass="bordered-classic">
     {{#if this.lookupStripeConnectAccount.isRunning}}
         <div class="flex items-center justify-center flex-1 p-4">
             <Spinner @loadingMessage="Loading monetization settings..." @loadingMessageClass="ml-2 text-black dark:text-white" @wrapperClass="flex flex-row items-center" />

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

@@ -1,5 +1,5 @@
 <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">
+    <ContentPanel @title={{t "registry-bridge.component.extension-pending-publish-viewer.content-panel-title"}} @open={{true}} @wrapperClass="bordered-classic">
         <div class="grid grid-cols-1 lg:grid-cols-4">
             {{#each this.extensions as |extension|}}
                 <div class="flex flex-col">
@@ -51,7 +51,7 @@
     </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}}>
+        <ContentPanel @title={{t "registry-bridge.component.extension-pending-publish-viewer.focused-extension-title" extensionName=this.focusedExtension.name}} @open={{true}} @wrapperClass="bordered-classic">
             <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>

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

@@ -1,5 +1,5 @@
 <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">
+    <ContentPanel @title={{t "registry-bridge.component.extension-reviewer-control.content-panel-title"}} @open={{true}} @wrapperClass="bordered-classic">
         <div class="grid grid-cols-1 lg:grid-cols-4">
             {{#each this.extensions as |extension|}}
                 <div class="flex flex-col">
@@ -57,7 +57,7 @@
     </ContentPanel>
 
     {{#if this.focusedExtension}}
-        <ContentPanel @title={{t "registry-bridge.component.extension-reviewer-control.focused-extension-title" extensionName=this.focusedExtension.name}} @open={{true}} @pad={{true}}>
+        <ContentPanel @title={{t "registry-bridge.component.extension-reviewer-control.focused-extension-title" extensionName=this.focusedExtension.name}} @open={{true}} @wrapperClass="bordered-classic">
             <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>

package/addon/components/registry-admin-config.hbs

@@ -1,4 +1,4 @@
-<ContentPanel @title="Registry Configuration" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+<ContentPanel @title="Registry Configuration" @open={{true}} @wrapperClass="bordered-classic">
     <InputGroup @name="Registry Host" @value={{this.registryHost}} disabled={{or this.getConfigValues.isRunning this.saveConfigValues.isRunning}} />
     <InputGroup @name="Registry Token" @value={{this.registryToken}} disabled={{or this.getConfigValues.isRunning this.saveConfigValues.isRunning}} />
 </ContentPanel>

package/addon/controllers/application.js

@@ -1,6 +1,3 @@
 import Controller from '@ember/controller';
-import { tracked } from '@glimmer/tracking';
 
-export default class ApplicationController extends Controller {
-    @tracked categories = [];
-}
+export default class ApplicationController extends Controller {}

package/addon/controllers/explore/category.js

@@ -1,22 +1,16 @@
 import Controller from '@ember/controller';
 import { tracked } from '@glimmer/tracking';
-import { inject as service } from '@ember/service';
 import { task, timeout } from 'ember-concurrency';
 
 export default class ExploreCategoryController extends Controller {
-    @service store;
-    @tracked extensions = [];
-    @tracked query;
     queryParams = ['query'];
+    @tracked query;
 
     @task({ restartable: true }) *search(event) {
-        this.query = event.target.value;
-        yield timeout(300);
-
-        if (this.query) {
-            this.extensions = yield this.store.query('registry-extension', { explore: 1, category: this.model.id, query: this.query });
-        } else {
-            this.extensions = yield this.store.query('registry-extension', { explore: 1, category: this.model.id });
+        const query = event.target.value;
+        if (query) {
+            this.query = query;
+            yield timeout(300);
         }
     }
 }

package/addon/controllers/explore/index.js

@@ -3,6 +3,7 @@ import { tracked } from '@glimmer/tracking';
 import { task, timeout } from 'ember-concurrency';
 
 export default class ExploreIndexController extends Controller {
+    queryParams = ['query'];
     @tracked query;
 
     @task({ restartable: true }) *search(event) {

package/addon/engine.js

@@ -2,14 +2,9 @@ import Engine from '@ember/engine';
 import loadInitializers from 'ember-load-initializers';
 import Resolver from 'ember-resolver';
 import config from './config/environment';
-import services from '@fleetbase/ember-core/exports/services';
-import RegistryAdminConfigComponent from './components/registry-admin-config';
-import ExtensionReviewerControlComponent from './components/extension-reviewer-control';
-import ExtensionPendingPublishViewerComponent from './components/extension-pending-publish-viewer';
+import { services, externalRoutes } from '@fleetbase/ember-core/exports';
 
 const { modulePrefix } = config;
-const externalRoutes = ['console', 'extensions'];
-
 export default class RegistryBridgeEngine extends Engine {
     modulePrefix = modulePrefix;
     Resolver = Resolver;
@@ -17,34 +12,6 @@ export default class RegistryBridgeEngine extends Engine {
         services,
         externalRoutes,
     };
-    setupExtension = function (app, engine, universe) {
-        // Register menu item in header
-        universe.registerHeaderMenuItem('Extensions', 'console.extensions', { icon: 'shapes', priority: 99, id: 'registry-bridge', slug: 'registry-bridge' });
-        // Register admin controls
-        universe.registerAdminMenuPanel(
-            'Extensions Registry',
-            [
-                {
-                    title: 'Registry Config',
-                    icon: 'gear',
-                    component: RegistryAdminConfigComponent,
-                },
-                {
-                    title: 'Awaiting Review',
-                    icon: 'gavel',
-                    component: ExtensionReviewerControlComponent,
-                },
-                {
-                    title: 'Pending Publish',
-                    icon: 'rocket',
-                    component: ExtensionPendingPublishViewerComponent,
-                },
-            ],
-            {
-                slug: 'extension-registry',
-            }
-        );
-    };
 }
 
 loadInitializers(RegistryBridgeEngine, modulePrefix);

package/addon/extension.js

@@ -0,0 +1,35 @@
+import { MenuItem, ExtensionComponent } from '@fleetbase/ember-core/contracts';
+
+export default {
+    setupExtension(app, universe) {
+        const menuService = universe.getService('menu');
+
+        // Register menu item in header
+        menuService.registerHeaderMenuItem('Extensions', 'console.extensions', { icon: 'shapes', priority: 99, id: 'registry-bridge', slug: 'registry-bridge' });
+
+        // Register admin controls
+        menuService.registerAdminMenuPanel(
+            'Extensions Registry',
+            [
+                new MenuItem({
+                    title: 'Registry Config',
+                    icon: 'gear',
+                    component: new ExtensionComponent('@fleetbase/registry-bridge-engine', 'registry-admin-config'),
+                }),
+                new MenuItem({
+                    title: 'Awaiting Review',
+                    icon: 'gavel',
+                    component: new ExtensionComponent('@fleetbase/registry-bridge-engine', 'extension-reviewer-control'),
+                }),
+                new MenuItem({
+                    title: 'Pending Publish',
+                    icon: 'rocket',
+                    component: new ExtensionComponent('@fleetbase/registry-bridge-engine', 'extension-pending-publish-viewer'),
+                }),
+            ],
+            {
+                slug: 'extension-registry',
+            }
+        );
+    },
+};

package/addon/routes/application.js

@@ -15,9 +15,13 @@ export default class ApplicationRoute extends Route {
         }
     }
 
-    async setupController(controller) {
-        super.setupController(...arguments);
-        // controller.categories = await this.store.query('category', { for: 'extension_category', core_category: 1 });
-        controller.categories = await this.fetch.get('categories', {}, { namespace: '~registry/v1', normalizeToEmberData: true, modelType: 'category' });
+    model() {
+        return this.fetch.get('categories', {}, { namespace: '~registry/v1', normalizeToEmberData: true, modelType: 'category' });
     }
+
+    // async setupController(controller) {
+    //     super.setupController(...arguments);
+    //     // controller.categories = await this.store.query('category', { for: 'extension_category', core_category: 1 });
+    //     controller.categories = await this.fetch.get('categories', {}, { namespace: '~registry/v1', normalizeToEmberData: true, modelType: 'category' });
+    // }
 }

package/addon/routes/explore/category.js

@@ -21,18 +21,14 @@ export default class ExploreCategoryRoute extends Route {
         }
     }
 
-    model({ slug }) {
-        return this.store.queryRecord('category', { slug, for: 'extension_category', core_category: 1, single: 1 });
-    }
+    async model({ slug, query }) {
+        try {
+            const category = await this.store.queryRecord('category', { slug, for: 'extension_category', core_category: 1, single: 1 });
+            if (!category) return [];
 
-    async setupController(controller, model) {
-        super.setupController(...arguments);
-        const params = { explore: 1, category: model.id };
-        const query = controller.query;
-        if (query) {
-            params.query = controller.query;
+            return this.store.query('registry-extension', { explore: 1, category: category.id, query: query });
+        } catch {
+            return [];
         }
-
-        controller.extensions = await this.store.query('registry-extension', params);
     }
 }

package/addon/routes/explore/index.js

@@ -21,8 +21,7 @@ export default class ExploreIndexRoute extends Route {
         }
     }
 
-    model(params) {
-        const { query } = params;
+    model({ query }) {
         return this.store.query('registry-extension', { explore: 1, query });
     }
 }

package/addon/templates/application.hbs

@@ -1,17 +1,53 @@
 <EmberWormhole @to="sidebar-menu-items">
-    <Layout::Sidebar::Item @route="console.extensions.installed" @icon="inbox" @permission="registry-bridge list extension-install" @visible={{can "registry-bridge see extension-install"}}>Installed</Layout::Sidebar::Item>
-    <Layout::Sidebar::Item @route="console.extensions.purchased" @icon="bag-shopping" @permission="registry-bridge list extension-purchase" @visible={{can "registry-bridge see extension-purchase"}}>Purchased</Layout::Sidebar::Item>
+    <Layout::Sidebar::Item
+        @route="console.extensions.installed"
+        @icon="inbox"
+        @permission="registry-bridge list extension-install"
+        @visible={{can "registry-bridge see extension-install"}}
+    >Installed</Layout::Sidebar::Item>
+    <Layout::Sidebar::Item
+        @route="console.extensions.purchased"
+        @icon="bag-shopping"
+        @permission="registry-bridge list extension-purchase"
+        @visible={{can "registry-bridge see extension-purchase"}}
+    >Purchased</Layout::Sidebar::Item>
     <Layout::Sidebar::Panel @open={{true}} @title="Explore" @visible={{can "registry-bridge see extension"}}>
         <Layout::Sidebar::Item @route="console.extensions.explore.index" @icon="shapes" @permission="registry-bridge list extension">Explore All</Layout::Sidebar::Item>
-        {{#each this.categories as |category|}}
-            <Layout::Sidebar::Item @route="console.extensions.explore.category" @model={{category}} @icon={{category.icon}} @permission="registry-bridge list extension">{{category.name}}</Layout::Sidebar::Item>
+        {{#each @model as |category|}}
+            <LinkTo @route="explore.category" @model={{category.slug}} @disabled={{cannot "registry-bridge list extension"}} class="next-nav-item">
+                <div class="next-nav-item-icon-container">
+                    <FaIcon @icon={{category.icon}} @size="xs" />
+                </div>
+                <div class="truncate w-10/12">{{category.name}}</div>
+                <div class="next-nav-item-right-side" />
+            </LinkTo>
         {{/each}}
     </Layout::Sidebar::Panel>
     <Layout::Sidebar::Panel @open={{true}} @title="Developers">
-        <Layout::Sidebar::Item @route="console.extensions.developers.extensions" @icon="box-archive" @permission="registry-bridge list extension-bundle" @visible={{can "registry-bridge see extension-bundle"}}>Extensions</Layout::Sidebar::Item>
-        <Layout::Sidebar::Item @route="console.extensions.developers.analytics" @icon="chart-simple" @permission="registry-bridge list extension-analytic" @visible={{can "registry-bridge see extension-analytic"}}>Analytics</Layout::Sidebar::Item>
-        <Layout::Sidebar::Item @route="console.extensions.developers.payments" @icon="cash-register" @permission="registry-bridge list extension-payment" @visible={{can "registry-bridge see extension-payment"}}>Payments</Layout::Sidebar::Item>
-        <Layout::Sidebar::Item @route="console.extensions.developers.credentials" @icon="key" @permission="registry-bridge list registry-token" @visible={{can "registry-bridge see registry-token"}}>Credentials</Layout::Sidebar::Item>
+        <Layout::Sidebar::Item
+            @route="console.extensions.developers.extensions"
+            @icon="box-archive"
+            @permission="registry-bridge list extension-bundle"
+            @visible={{can "registry-bridge see extension-bundle"}}
+        >Extensions</Layout::Sidebar::Item>
+        <Layout::Sidebar::Item
+            @route="console.extensions.developers.analytics"
+            @icon="chart-simple"
+            @permission="registry-bridge list extension-analytic"
+            @visible={{can "registry-bridge see extension-analytic"}}
+        >Analytics</Layout::Sidebar::Item>
+        <Layout::Sidebar::Item
+            @route="console.extensions.developers.payments"
+            @icon="cash-register"
+            @permission="registry-bridge list extension-payment"
+            @visible={{can "registry-bridge see extension-payment"}}
+        >Payments</Layout::Sidebar::Item>
+        <Layout::Sidebar::Item
+            @route="console.extensions.developers.credentials"
+            @icon="key"
+            @permission="registry-bridge list registry-token"
+            @visible={{can "registry-bridge see registry-token"}}
+        >Credentials</Layout::Sidebar::Item>
     </Layout::Sidebar::Panel>
     <Spacer @height="200px" />
 </EmberWormhole>

package/addon/templates/developers/extensions/edit/bundles.hbs

@@ -1,5 +1,5 @@
 <div class="flex-1">
-    <ContentPanel @title={{t "registry-bridge.developers.extensions.extension-form.bundles"}} @open={{true}} @pad={{false}} @panelBodyClass="bg-white dark:bg-gray-800">
+    <ContentPanel @title={{t "registry-bridge.developers.extensions.extension-form.bundles"}} @open={{true}} @wrapperClass="bordered-classic">
         <div class="px-4 pb-4 pt-2">
             <div>
                 <FileUpload

package/addon/templates/developers/extensions/edit/details.hbs

@@ -1,5 +1,5 @@
 <div class="flex-1">
-    <ContentPanel @title={{t "registry-bridge.developers.extensions.extension-form.details"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+    <ContentPanel @title={{t "registry-bridge.developers.extensions.extension-form.details"}} @open={{true}} @wrapperClass="bordered-classic">
         <InputGroup
             @name={{t "registry-bridge.developers.extensions.extension-form.extension-id"}}
             @value={{@model.public_id}}

package/addon/templates/developers/extensions/index.hbs

@@ -1,27 +1,34 @@
 <Layout::Section::Header @title={{t "registry-bridge.developers.extensions.extensions"}}>
-    <Button @type="primary" @size="sm" @icon="circle-plus" @text={{t "registry-bridge.developers.extensions.create-new-extension"}} @onClick={{transition-to "developers.extensions.new"}} @permission="registry-bridge create registry-bundle" />
+    <Button
+        @type="primary"
+        @size="sm"
+        @icon="circle-plus"
+        @text={{t "registry-bridge.developers.extensions.create-new-extension"}}
+        @onClick={{transition-to "developers.extensions.new"}}
+        @permission="registry-bridge create registry-bundle"
+    />
 </Layout::Section::Header>
 
 <Layout::Section::Body class="overflow-y-scroll h-full">
-    <div class="m-auto p-8">
-        <div class="extension-card-grid-container">
-            {{#each (filter-by "isNew" false @model) as |extension|}}
-                <button type="button" class="extension-card-container hover:opacity-50" {{on "click" (transition-to "developers.extensions.edit" extension)}}>
-                    <div class="extension-card-icon-container">
-                        <Image src={{extension.icon_url}} class="w-full h-36 rounded-t-lg" alt={{extension.name}} @fallbackSrc={{config "defaultValues.extensionIcon"}} />
-                    </div>
-                    <div class="extension-card-body-container">
-                        <div class="flex flex-col">
-                            <div class="font-semibold text-sm block">{{extension.name}}</div>
-                            <div class="text-xs truncate">{{n-a extension.description}}</div>
-                        </div>
-                        <div>
-                            <Badge @status={{extension.status}} />
-                        </div>
-                    </div>
-                </button>
-            {{/each}}
-        </div>
-    </div>
-    <Spacer @height="300px" />
+    <Layout::Resource::CardsGrid
+        @resource="registry-extension"
+        @data={{filter-by "isNew" false @model}}
+        @gap="sm"
+        @columns="4"
+        @showPagination={{true}}
+        @page={{this.page}}
+        @onPageChange={{fn (mut this.page)}}
+        @paginationMeta={{@model.meta}}
+        @containerClass="p-4"
+        class="h-full"
+        as |Item|
+    >
+        <ExtensionCard @resource={{Item.model}}>
+            <:footer>
+                <div class="flex flex-row items-center space-x-1">
+                    <Button @icon="eye" @size="xs" @onClick={{fn (transition-to "developers.extensions.edit" Item.model)}} />
+                </div>
+            </:footer>
+        </ExtensionCard>
+    </Layout::Resource::CardsGrid>
 </Layout::Section::Body>

package/addon/templates/developers/extensions/new.hbs

@@ -4,12 +4,7 @@
     <div class="container">
         <div class="max-w-3xl mx-auto mt-4">
             <div class="flex-1 px-6">
-                <ContentPanel
-                    @title={{t "registry-bridge.developers.extensions.extension-form.details-content-block"}}
-                    @open={{true}}
-                    @pad={{true}}
-                    @panelBodyClass="bg-white dark:bg-gray-800"
-                >
+                <ContentPanel @title={{t "registry-bridge.developers.extensions.extension-form.details-content-block"}} @open={{true}} @wrapperClass="bordered-classic">
                     <InputGroup
                         @name={{t "registry-bridge.developers.extensions.extension-form.extension-name"}}
                         @value={{this.extension.name}}
@@ -29,7 +24,15 @@
                     </InputGroup>
                 </ContentPanel>
                 <div class="mt-4 flex items-center space-x-4">
-                    <Button @size="lg" @type="primary" @text="Continue" @icon="check" @onClick={{perform this.save}} @isLoading={{not this.save.isIdle}} @permission="registry-bridge create registry-bundle" />
+                    <Button
+                        @size="lg"
+                        @type="primary"
+                        @text="Continue"
+                        @icon="check"
+                        @onClick={{perform this.save}}
+                        @isLoading={{not this.save.isIdle}}
+                        @permission="registry-bridge create registry-bundle"
+                    />
                     <Button @size="lg" @type="default" @text="Cancel" @icon="times" @onClick={{this.cancel}} />
                 </div>
             </div>

package/addon/templates/explore/category.hbs

@@ -1,12 +1,19 @@
 <Layout::Section::Header @searchQuery={{this.query}} @onSearch={{perform this.search}} @title={{t "registry-bridge.developers.extensions.explore.explore-extensions"}} />
 
 <Layout::Section::Body class="overflow-y-scroll h-full">
-    <div class="m-auto p-8">
-        <div class="extension-card-grid-container">
-            {{#each this.extensions as |extension|}}
-                <ExtensionCard @extension={{extension}} />
-            {{/each}}
-        </div>
-    </div>
-    <Spacer @height="300px" />
+    <Layout::Resource::CardsGrid
+        @resource="registry-extension"
+        @data={{@model}}
+        @gap="sm"
+        @columns="4"
+        @showPagination={{true}}
+        @page={{this.page}}
+        @onPageChange={{fn (mut this.page)}}
+        @paginationMeta={{@model.meta}}
+        @containerClass="p-4"
+        class="h-full"
+        as |Item|
+    >
+        <ExtensionCard @resource={{Item.model}} />
+    </Layout::Resource::CardsGrid>
 </Layout::Section::Body>

package/addon/templates/explore/index.hbs

@@ -1,12 +1,19 @@
 <Layout::Section::Header @searchQuery={{this.query}} @onSearch={{perform this.search}} @title={{t "registry-bridge.developers.extensions.explore.explore-extensions"}} />
 
 <Layout::Section::Body class="overflow-y-scroll h-full">
-    <div class="m-auto p-8">
-        <div class="extension-card-grid-container">
-            {{#each @model as |extension|}}
-                <ExtensionCard @extension={{extension}} />
-            {{/each}}
-        </div>
-    </div>
-    <Spacer @height="300px" />
+    <Layout::Resource::CardsGrid
+        @resource="registry-extension"
+        @data={{@model}}
+        @gap="sm"
+        @columns="4"
+        @showPagination={{true}}
+        @page={{this.page}}
+        @onPageChange={{fn (mut this.page)}}
+        @paginationMeta={{@model.meta}}
+        @containerClass="p-4"
+        class="h-full"
+        as |Item|
+    >
+        <ExtensionCard @resource={{Item.model}} />
+    </Layout::Resource::CardsGrid>
 </Layout::Section::Body>

package/composer.json

@@ -1,6 +1,6 @@
 {
     "name": "fleetbase/registry-bridge",
-    "version": "0.0.19",
+    "version": "0.1.1",
     "description": "Internal Bridge between Fleetbase API and Extensions Registry",
     "keywords": [
         "fleetbase-extension",

package/extension.json

@@ -1,6 +1,6 @@
 {
     "name": "Registry Bridge",
-    "version": "0.0.19",
+    "version": "0.1.1",
     "description": "Internal Bridge between Fleetbase API and Extensions Registry",
     "repository": "https://github.com/fleetbase/registry-bridge",
     "license": "AGPL-3.0-or-later",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/registry-bridge-engine",
-    "version": "0.0.19",
+    "version": "0.1.1",
     "description": "Internal Bridge between Fleetbase API and Extensions Registry",
     "fleetbase": {
         "route": "extensions"
@@ -39,12 +39,12 @@
     },
     "dependencies": {
         "@babel/core": "^7.23.2",
-        "@fleetbase/ember-core": "latest",
-        "@fleetbase/ember-ui": "latest",
+        "@fleetbase/ember-core": "^0.3.7",
+        "@fleetbase/ember-ui": "^0.3.12",
         "@fortawesome/ember-fontawesome": "^2.0.0",
         "@fortawesome/fontawesome-svg-core": "6.4.0",
-        "@fortawesome/free-solid-svg-icons": "6.4.0",
         "@fortawesome/free-brands-svg-icons": "6.4.0",
+        "@fortawesome/free-solid-svg-icons": "6.4.0",
         "@stripe/connect-js": "^3.3.10",
         "ember-auto-import": "^2.7.4",
         "ember-cli-babel": "^8.2.0",

package/server/src/routes.php

@@ -22,20 +22,20 @@ Route::prefix(config('internals.api.routing.prefix', '~registry'))->middleware([
          */
         $router->group(['prefix' => config('internals.api.routing.internal_prefix', 'v1'), 'namespace' => 'Internal\v1'], function ($router) {
             $router->group(['prefix' => 'auth'], function ($router) {
-                $router->group(['middleware' => ['fleetbase.protected', 'throttle:60,1']], function ($router) {
+                $router->group(['middleware' => ['fleetbase.protected']], function ($router) {
                     $router->get('registry-tokens', 'RegistryAuthController@getRegistryTokens');
                     $router->delete('registry-tokens/{id}', 'RegistryAuthController@deleteRegistryToken');
                     $router->post('registry-tokens', 'RegistryAuthController@createRegistryUser');
                 });
 
-                $router->post('composer-auth', 'RegistryAuthController@composerAuthentication')->middleware([Spatie\ResponseCache\Middlewares\DoNotCacheResponse::class]);
-                $router->post('authenticate', 'RegistryAuthController@authenticate')->middleware([Spatie\ResponseCache\Middlewares\DoNotCacheResponse::class]);
-                $router->post('add-user', 'RegistryAuthController@addUser')->middleware([Spatie\ResponseCache\Middlewares\DoNotCacheResponse::class]);
-                $router->post('check-access', 'RegistryAuthController@checkAccess')->middleware([Spatie\ResponseCache\Middlewares\DoNotCacheResponse::class]);
-                $router->post('check-publish', 'RegistryAuthController@checkPublishAllowed')->middleware([Spatie\ResponseCache\Middlewares\DoNotCacheResponse::class]);
+                $router->post('composer-auth', 'RegistryAuthController@composerAuthentication');
+                $router->post('authenticate', 'RegistryAuthController@authenticate');
+                $router->post('add-user', 'RegistryAuthController@addUser');
+                $router->post('check-access', 'RegistryAuthController@checkAccess');
+                $router->post('check-publish', 'RegistryAuthController@checkPublishAllowed');
             });
 
-            $router->group(['middleware' => ['fleetbase.protected', 'throttle:60,1']], function ($router) {
+            $router->group(['middleware' => ['fleetbase.protected']], function ($router) {
                 $router->get('categories', 'RegistryController@categories');
                 $router->get('engines', 'RegistryController@getInstalledEngines');
                 $router->get('engine-install-status', 'RegistryController@getEngineInstallStatus');
@@ -61,10 +61,10 @@ Route::prefix(config('internals.api.routing.prefix', '~registry'))->middleware([
                     $router->post('publish', $controller('manualPublish'));
                     $router->get('download-bundle', $controller('downloadBundle'));
                     $router->get('analytics', $controller('analytics'));
-                    $router->get('installed', $controller('installed'))->middleware([Spatie\ResponseCache\Middlewares\DoNotCacheResponse::class]);
-                    $router->get('purchased', $controller('purchased'))->middleware([Spatie\ResponseCache\Middlewares\DoNotCacheResponse::class]);
-                    $router->get('config', $controller('getConfig'))->middleware([Spatie\ResponseCache\Middlewares\DoNotCacheResponse::class]);
-                    $router->post('config', $controller('saveConfig'))->middleware([Spatie\ResponseCache\Middlewares\DoNotCacheResponse::class]);
+                    $router->get('installed', $controller('installed'));
+                    $router->get('purchased', $controller('purchased'));
+                    $router->get('config', $controller('getConfig'));
+                    $router->post('config', $controller('saveConfig'));
                 });
 
                 $router->fleetbaseRoutes('registry-extension-bundles', function ($router, $controller) {