@nospt/backstage-plugin-apigee 0.1.1 → 0.1.2

package/dist/components/ApigeeNavContent.esm.js

@@ -0,0 +1,35 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Sidebar, SidebarItem, SidebarSubmenu, SidebarSubmenuItem } from '@backstage/core-components';
+import LayersIcon from '@material-ui/icons/Layers';
+
+const ApigeeNavContent = ({ navItems }) => {
+  const allItems = navItems.rest();
+  const apigeeItems = allItems.filter(
+    (item) => item.node.spec.plugin.pluginId === "apigee"
+  );
+  const otherItems = allItems.filter(
+    (item) => item.node.spec.plugin.pluginId !== "apigee"
+  );
+  return /* @__PURE__ */ jsxs(Sidebar, { children: [
+    otherItems.map((item) => /* @__PURE__ */ jsx(
+      SidebarItem,
+      {
+        to: item.href,
+        icon: (_props) => item.icon,
+        text: item.title
+      },
+      item.node.spec.id
+    )),
+    apigeeItems.length > 0 && /* @__PURE__ */ jsx(SidebarItem, { icon: LayersIcon, text: "API Hub", children: /* @__PURE__ */ jsx(SidebarSubmenu, { title: "API Hub", children: apigeeItems.map((item) => /* @__PURE__ */ jsx(
+      SidebarSubmenuItem,
+      {
+        title: item.title,
+        to: item.href
+      },
+      item.node.spec.id
+    )) }) })
+  ] });
+};
+
+export { ApigeeNavContent };
+//# sourceMappingURL=ApigeeNavContent.esm.js.map

package/dist/components/ApigeeNavContent.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApigeeNavContent.esm.js","sources":["../../src/components/ApigeeNavContent.tsx"],"sourcesContent":["// SPDX-License-Identifier: Apache-2.0\nimport {\n  Sidebar,\n  SidebarItem,\n  SidebarSubmenu,\n  SidebarSubmenuItem,\n} from '@backstage/core-components';\nimport type {\n  NavContentComponent,\n  NavContentNavItem,\n} from '@backstage/plugin-app-react';\nimport LayersIcon from '@material-ui/icons/Layers';\nimport React from 'react';\n\n/**\n * Renders the app nav bar with an expandable \"API Hub\" group for all apigee\n * plugin pages, while rendering any other plugins' pages as flat sidebar items.\n *\n * To activate, add `apigeeNavModule` to your app's `createApp({ features })`.\n */\nexport const ApigeeNavContent: NavContentComponent = ({ navItems }) => {\n  const allItems = navItems.rest();\n  const apigeeItems = allItems.filter(\n    (item: NavContentNavItem) =>\n      item.node.spec.plugin.pluginId === 'apigee',\n  );\n  const otherItems = allItems.filter(\n    (item: NavContentNavItem) =>\n      item.node.spec.plugin.pluginId !== 'apigee',\n  );\n\n  return (\n    <Sidebar>\n      {otherItems.map((item: NavContentNavItem) => (\n        <SidebarItem\n          key={item.node.spec.id}\n          to={item.href}\n          // item.icon is IconElement (JSX); SidebarItem.icon is IconComponent.\n          // Wrapping in a render-prop is the documented pattern from AppNav.\n          icon={(_props: object) => item.icon as React.ReactElement}\n          text={item.title}\n        />\n      ))}\n      {apigeeItems.length > 0 && (\n        <SidebarItem icon={LayersIcon} text=\"API Hub\">\n          <SidebarSubmenu title=\"API Hub\">\n            {apigeeItems.map((item: NavContentNavItem) => (\n              <SidebarSubmenuItem\n                key={item.node.spec.id}\n                title={item.title}\n                to={item.href}\n              />\n            ))}\n          </SidebarSubmenu>\n        </SidebarItem>\n      )}\n    </Sidebar>\n  );\n};\n"],"names":[],"mappings":";;;;AAoBO,MAAM,gBAAA,GAAwC,CAAC,EAAE,QAAA,EAAS,KAAM;AACrE,EAAA,MAAM,QAAA,GAAW,SAAS,IAAA,EAAK;AAC/B,EAAA,MAAM,cAAc,QAAA,CAAS,MAAA;AAAA,IAC3B,CAAC,IAAA,KACC,IAAA,CAAK,IAAA,CAAK,IAAA,CAAK,OAAO,QAAA,KAAa;AAAA,GACvC;AACA,EAAA,MAAM,aAAa,QAAA,CAAS,MAAA;AAAA,IAC1B,CAAC,IAAA,KACC,IAAA,CAAK,IAAA,CAAK,IAAA,CAAK,OAAO,QAAA,KAAa;AAAA,GACvC;AAEA,EAAA,4BACG,OAAA,EAAA,EACE,QAAA,EAAA;AAAA,IAAA,UAAA,CAAW,GAAA,CAAI,CAAC,IAAA,qBACf,GAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QAEC,IAAI,IAAA,CAAK,IAAA;AAAA,QAGT,IAAA,EAAM,CAAC,MAAA,KAAmB,IAAA,CAAK,IAAA;AAAA,QAC/B,MAAM,IAAA,CAAK;AAAA,OAAA;AAAA,MALN,IAAA,CAAK,KAAK,IAAA,CAAK;AAAA,KAOvB,CAAA;AAAA,IACA,YAAY,MAAA,GAAS,CAAA,oBACpB,GAAA,CAAC,WAAA,EAAA,EAAY,MAAM,UAAA,EAAY,IAAA,EAAK,SAAA,EAClC,QAAA,kBAAA,GAAA,CAAC,kBAAe,KAAA,EAAM,SAAA,EACnB,QAAA,EAAA,WAAA,CAAY,GAAA,CAAI,CAAC,IAAA,qBAChB,GAAA;AAAA,MAAC,kBAAA;AAAA,MAAA;AAAA,QAEC,OAAO,IAAA,CAAK,KAAA;AAAA,QACZ,IAAI,IAAA,CAAK;AAAA,OAAA;AAAA,MAFJ,IAAA,CAAK,KAAK,IAAA,CAAK;AAAA,KAIvB,GACH,CAAA,EACF;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}

package/dist/index.d.ts

@@ -1,26 +1,61 @@
 import * as react from 'react';
 import * as _backstage_frontend_plugin_api from '@backstage/frontend-plugin-api';
 
+declare const apigeePage: _backstage_frontend_plugin_api.OverridableExtensionDefinition<{
+    kind: "page";
+    name: undefined;
+    config: {
+        path: string | undefined;
+        title: string | undefined;
+    };
+    configInput: {
+        title?: string | undefined;
+        path?: string | undefined;
+    };
+    output: _backstage_frontend_plugin_api.ExtensionDataRef<string, "core.routing.path", {}> | _backstage_frontend_plugin_api.ExtensionDataRef<_backstage_frontend_plugin_api.RouteRef<_backstage_frontend_plugin_api.AnyRouteRefParams>, "core.routing.ref", {
+        optional: true;
+    }> | _backstage_frontend_plugin_api.ExtensionDataRef<react.JSX.Element, "core.reactElement", {}> | _backstage_frontend_plugin_api.ExtensionDataRef<string, "core.title", {
+        optional: true;
+    }> | _backstage_frontend_plugin_api.ExtensionDataRef<_backstage_frontend_plugin_api.IconElement, "core.icon", {
+        optional: true;
+    }>;
+    inputs: {
+        pages: _backstage_frontend_plugin_api.ExtensionInput<_backstage_frontend_plugin_api.ConfigurableExtensionDataRef<react.JSX.Element, "core.reactElement", {}> | _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<string, "core.routing.path", {}> | _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<_backstage_frontend_plugin_api.RouteRef<_backstage_frontend_plugin_api.AnyRouteRefParams>, "core.routing.ref", {
+            optional: true;
+        }> | _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<string, "core.title", {
+            optional: true;
+        }> | _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<_backstage_frontend_plugin_api.IconElement, "core.icon", {
+            optional: true;
+        }>, {
+            singleton: false;
+            optional: false;
+            internal: false;
+        }>;
+    };
+    params: {
+        path: string;
+        title?: string;
+        icon?: _backstage_frontend_plugin_api.IconElement;
+        loader?: () => Promise<react.JSX.Element>;
+        routeRef?: _backstage_frontend_plugin_api.RouteRef;
+        noHeader?: boolean;
+    };
+}>;
+/**
+ * Frontend module that overrides the app nav bar to show an expandable
+ * "API Hub" group containing all apigee plugin pages as sub-items.
+ *
+ * Add this to your app's `createApp({ features })` to activate the grouped nav.
+ *
+ * @example
+ * ```ts
+ * createApp({ features: [apigeePlugin, apigeeNavModule] });
+ * ```
+ */
+declare const apigeeNavModule: _backstage_frontend_plugin_api.FrontendModule;
 declare const apigeePlugin: _backstage_frontend_plugin_api.OverridableFrontendPlugin<{
     root: _backstage_frontend_plugin_api.RouteRef<undefined>;
 }, {}, {
-    "nav-item:apigee": _backstage_frontend_plugin_api.OverridableExtensionDefinition<{
-        kind: "nav-item";
-        name: undefined;
-        config: {};
-        configInput: {};
-        output: _backstage_frontend_plugin_api.ExtensionDataRef<{
-            title: string;
-            icon: _backstage_frontend_plugin_api.IconComponent;
-            routeRef: _backstage_frontend_plugin_api.RouteRef<undefined>;
-        }, "core.nav-item.target", {}>;
-        inputs: {};
-        params: {
-            title: string;
-            icon: _backstage_frontend_plugin_api.IconComponent;
-            routeRef: _backstage_frontend_plugin_api.RouteRef<undefined>;
-        };
-    }>;
     "page:apigee": _backstage_frontend_plugin_api.OverridableExtensionDefinition<{
         kind: "page";
         name: undefined;
@@ -63,4 +98,4 @@ declare const apigeePlugin: _backstage_frontend_plugin_api.OverridableFrontendPl
     }>;
 }>;
 
-export { apigeePlugin as default };
+export { apigeeNavModule, apigeePage, apigeePlugin, apigeePlugin as default };

package/dist/index.esm.js

@@ -1,2 +1,2 @@
-export { apigeePlugin as default } from './plugin.esm.js';
+export { apigeeNavModule, apigeePage, apigeePlugin, apigeePlugin as default } from './plugin.esm.js';
 //# sourceMappingURL=index.esm.js.map

package/dist/plugin.esm.js

@@ -1,11 +1,14 @@
 import { jsx } from 'react/jsx-runtime';
-import { PageBlueprint, NavItemBlueprint, createFrontendPlugin } from '@backstage/frontend-plugin-api';
+import { PageBlueprint, createFrontendModule, createFrontendPlugin } from '@backstage/frontend-plugin-api';
+import { NavContentBlueprint } from '@backstage/plugin-app-react';
 import LayersIcon from '@material-ui/icons/Layers';
 import { rootRouteRef } from './routes.esm.js';
+import { ApigeeNavContent } from './components/ApigeeNavContent.esm.js';
 
 const apigeePage = PageBlueprint.make({
   params: {
     title: "API Catalog",
+    icon: /* @__PURE__ */ jsx(LayersIcon, {}),
     routeRef: rootRouteRef,
     path: "/apigee",
     loader: () => import('./components/ApigeeApiCatalogPage.esm.js').then(
@@ -13,21 +16,24 @@ const apigeePage = PageBlueprint.make({
     )
   }
 });
-const apigeeNavItem = NavItemBlueprint.make({
-  params: {
-    title: "API Catalog",
-    icon: LayersIcon,
-    routeRef: rootRouteRef
-  }
+const apigeeNavModule = createFrontendModule({
+  pluginId: "app",
+  extensions: [
+    NavContentBlueprint.make({
+      params: {
+        component: ApigeeNavContent
+      }
+    })
+  ]
 });
 const apigeePlugin = createFrontendPlugin({
   pluginId: "apigee",
-  title: "API Catalog",
-  extensions: [apigeePage, apigeeNavItem],
+  title: "API Hub",
+  extensions: [apigeePage],
   routes: {
     root: rootRouteRef
   }
 });
 
-export { apigeeNavItem, apigeePage, apigeePlugin };
+export { apigeeNavModule, apigeePage, apigeePlugin };
 //# sourceMappingURL=plugin.esm.js.map

package/dist/plugin.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.esm.js","sources":["../src/plugin.tsx"],"sourcesContent":["// SPDX-License-Identifier: Apache-2.0\nimport {\n  createFrontendPlugin,\n  NavItemBlueprint,\n  PageBlueprint,\n} from '@backstage/frontend-plugin-api';\nimport LayersIcon from '@material-ui/icons/Layers';\nimport { rootRouteRef } from './routes';\n\nexport const apigeePage = PageBlueprint.make({\n  params: {\n    title: 'API Catalog',\n    routeRef: rootRouteRef,\n    path: '/apigee',\n    loader: () =>\n      import('./components/ApigeeApiCatalogPage').then(\n        ({ ApigeeApiCatalogPage }) => <ApigeeApiCatalogPage />,\n      ),\n  },\n});\n\nexport const apigeeNavItem = NavItemBlueprint.make({\n  params: {\n    title: 'API Catalog',\n    icon: LayersIcon,\n    routeRef: rootRouteRef,\n  },\n});\n\nexport const apigeePlugin = createFrontendPlugin({\n  pluginId: 'apigee',\n  title: 'API Catalog',\n  extensions: [apigeePage, apigeeNavItem],\n  routes: {\n    root: rootRouteRef,\n  },\n});\n"],"names":[],"mappings":";;;;;AASO,MAAM,UAAA,GAAa,cAAc,IAAA,CAAK;AAAA,EAC3C,MAAA,EAAQ;AAAA,IACN,KAAA,EAAO,aAAA;AAAA,IACP,QAAA,EAAU,YAAA;AAAA,IACV,IAAA,EAAM,SAAA;AAAA,IACN,MAAA,EAAQ,MACN,OAAO,0CAAmC,CAAA,CAAE,IAAA;AAAA,MAC1C,CAAC,EAAE,oBAAA,EAAqB,yBAAO,oBAAA,EAAA,EAAqB;AAAA;AACtD;AAEN,CAAC;AAEM,MAAM,aAAA,GAAgB,iBAAiB,IAAA,CAAK;AAAA,EACjD,MAAA,EAAQ;AAAA,IACN,KAAA,EAAO,aAAA;AAAA,IACP,IAAA,EAAM,UAAA;AAAA,IACN,QAAA,EAAU;AAAA;AAEd,CAAC;AAEM,MAAM,eAAe,oBAAA,CAAqB;AAAA,EAC/C,QAAA,EAAU,QAAA;AAAA,EACV,KAAA,EAAO,aAAA;AAAA,EACP,UAAA,EAAY,CAAC,UAAA,EAAY,aAAa,CAAA;AAAA,EACtC,MAAA,EAAQ;AAAA,IACN,IAAA,EAAM;AAAA;AAEV,CAAC;;;;"}
+{"version":3,"file":"plugin.esm.js","sources":["../src/plugin.tsx"],"sourcesContent":["// SPDX-License-Identifier: Apache-2.0\nimport {\n  createFrontendModule,\n  createFrontendPlugin,\n  PageBlueprint,\n} from '@backstage/frontend-plugin-api';\nimport { NavContentBlueprint } from '@backstage/plugin-app-react';\nimport LayersIcon from '@material-ui/icons/Layers';\nimport { rootRouteRef } from './routes';\nimport { ApigeeNavContent } from './components/ApigeeNavContent';\n\nexport const apigeePage = PageBlueprint.make({\n  params: {\n    title: 'API Catalog',\n    icon: <LayersIcon />,\n    routeRef: rootRouteRef,\n    path: '/apigee',\n    loader: () =>\n      import('./components/ApigeeApiCatalogPage').then(\n        ({ ApigeeApiCatalogPage }) => <ApigeeApiCatalogPage />,\n      ),\n  },\n});\n\n/**\n * Frontend module that overrides the app nav bar to show an expandable\n * \"API Hub\" group containing all apigee plugin pages as sub-items.\n *\n * Add this to your app's `createApp({ features })` to activate the grouped nav.\n *\n * @example\n * ```ts\n * createApp({ features: [apigeePlugin, apigeeNavModule] });\n * ```\n */\nexport const apigeeNavModule = createFrontendModule({\n  pluginId: 'app',\n  extensions: [\n    NavContentBlueprint.make({\n      params: {\n        component: ApigeeNavContent,\n      },\n    }),\n  ],\n});\n\nexport const apigeePlugin = createFrontendPlugin({\n  pluginId: 'apigee',\n  title: 'API Hub',\n  extensions: [apigeePage],\n  routes: {\n    root: rootRouteRef,\n  },\n});\n"],"names":[],"mappings":";;;;;;;AAWO,MAAM,UAAA,GAAa,cAAc,IAAA,CAAK;AAAA,EAC3C,MAAA,EAAQ;AAAA,IACN,KAAA,EAAO,aAAA;AAAA,IACP,IAAA,sBAAO,UAAA,EAAA,EAAW,CAAA;AAAA,IAClB,QAAA,EAAU,YAAA;AAAA,IACV,IAAA,EAAM,SAAA;AAAA,IACN,MAAA,EAAQ,MACN,OAAO,0CAAmC,CAAA,CAAE,IAAA;AAAA,MAC1C,CAAC,EAAE,oBAAA,EAAqB,yBAAO,oBAAA,EAAA,EAAqB;AAAA;AACtD;AAEN,CAAC;AAaM,MAAM,kBAAkB,oBAAA,CAAqB;AAAA,EAClD,QAAA,EAAU,KAAA;AAAA,EACV,UAAA,EAAY;AAAA,IACV,oBAAoB,IAAA,CAAK;AAAA,MACvB,MAAA,EAAQ;AAAA,QACN,SAAA,EAAW;AAAA;AACb,KACD;AAAA;AAEL,CAAC;AAEM,MAAM,eAAe,oBAAA,CAAqB;AAAA,EAC/C,QAAA,EAAU,QAAA;AAAA,EACV,KAAA,EAAO,SAAA;AAAA,EACP,UAAA,EAAY,CAAC,UAAU,CAAA;AAAA,EACvB,MAAA,EAAQ;AAAA,IACN,IAAA,EAAM;AAAA;AAEV,CAAC;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nospt/backstage-plugin-apigee",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "license": "Apache-2.0",
   "description": "Backstage frontend plugin bootstrap for Apigee integration",
   "author": "NOS SGPS, S.A.",
@@ -53,7 +53,7 @@
     "@backstage/plugin-catalog-react": "^2.1.1",
     "@material-ui/core": "^4.9.13",
     "@material-ui/icons": "^4.9.1",
-    "@nospt/backstage-plugin-apigee-common": "^0.1.1"
+    "@nospt/backstage-plugin-apigee-common": "^0.1.2"
   },
   "peerDependencies": {
     "react": "^16.13.1 || ^17.0.0 || ^18.0.0",