Update package versions and dependencies

.gitignore

@@ -10,7 +10,8 @@ yarn-error.log
 .pnp.js
 
 # Build output
-/dist/
+dist/
+dist-types/
 /build/
 /out/
 

packages/postman-backend/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@postman-solutions/postman-backstage-backend-plugin",
-  "version": "1.0.1",
-  "main": "src/index.ts",
-  "types": "src/index.ts",
+  "version": "1.0.3",
+  "main": "dist/index.cjs.js",
+  "types": "dist/index.d.ts",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

packages/postman-backend/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "@backstage/cli/config/tsconfig.json",
+  "include": [
+      "src"
+  ],
+  "exclude": ["node_modules"],
+  "compilerOptions": {
+      "outDir": "dist-types",
+      "rootDir": "."
+  }
+}

packages/postman/.npmignore

@@ -0,0 +1,4 @@
+*
+!dist/**/**
+!NOTICE
+!config.d.ts

packages/postman/globals.d.ts

@@ -0,0 +1,11 @@
+declare module '*.svg' {
+    import React = require('react');
+    export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+    const src: string;
+    export default src;
+}
+
+declare module '*.png' {
+    const value: any;
+    export = value;
+}

packages/postman/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@postman-solutions/backstage-plugin-postman",
-  "version": "1.0.1",
-  "main": "src/index.ts",
-  "types": "src/index.ts",
+  "version": "1.0.3",
+  "main": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",
@@ -49,7 +49,7 @@
     "react": "^16.13.1 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.25.2",
+    "@backstage/cli": "^0.26.4",
     "@backstage/core-app-api": "^1.12.0",
     "@backstage/dev-utils": "^1.0.27",
     "@backstage/test-utils": "^1.5.0",
@@ -59,6 +59,7 @@
     "msw": "^1.0.0"
   },
   "files": [
-    "dist"
+    "dist",
+    "globals.d.ts"
   ]
 }

packages/postman/src/components/MainComponent/MainComponent.test.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { MainComponent } from './MainComponent';
+import { rest } from 'msw';
+import { setupServer } from 'msw/node';
+import { screen } from '@testing-library/react';
+import {
+  setupRequestMockHandlers,
+  renderInTestApp,
+} from "@backstage/test-utils";
+
+describe('MainComponent', () => {
+  const server = setupServer();
+  // Enable sane handlers for network requests
+  setupRequestMockHandlers(server);
+
+  // setup mock response
+  beforeEach(() => {
+    server.use(
+      rest.get('/*', (_, res, ctx) => res(ctx.status(200), ctx.json({}))),
+    );
+  });
+
+  it('should render', async () => {
+    await renderInTestApp(<MainComponent />);
+    expect(screen.getByText('Welcome to postman!')).toBeInTheDocument();
+  });
+});

packages/postman/src/components/MainComponent/MainComponent.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Grid } from '@material-ui/core';
+import {
+  InfoCard,
+  Header,
+  Page,
+  Content,
+  ContentHeader,
+  HeaderLabel,
+  MarkdownContent,
+} from '@backstage/core-components';
+
+import APIView from './../../examples/images/api.png';
+import MonitorView from './../../examples/images/monitor.png';
+import CollectionView from './../../examples/images/collections.png';
+
+const ReadMe = `
+This plugin offers several views which you can use to display published API information stored in Postman, show collections with a *Run In Postman* button and allows you to view your Postman monitor results on the API page.
+
+## API View 
+
+Displays your published Postman API data in Backstage, allowing you to access both the API information and the published API collections.
+
+![Postman API View](${APIView})
+
+Refer to the [Postman API Metadata](https://github.com/postman-solutions-eng/backstage-demo/tree/main/plugins/postman#apis) to see the parameters needed to display this view.
+
+## Collections View 
+
+Displays the collection(s) of a given API stored in Postman. This view includes a *Run in Postman* button, which is activated based on the collection ID(s) or tag defined in the 'entities.yaml' file.
+
+![Postman Collection View](${CollectionView})
+
+Refer to the [Postman Collections Metadata](https://github.com/postman-solutions-eng/backstage-demo/tree/main/plugins/postman#collections-use-collection-tag-or-ids) to see the parameters needed to display this view.
+
+### Monitor View 
+
+Shows the health of your API as determined by the monitor in Postman. The monitor can be displayed using either its 'name' or 'id'. 
+
+![Postman Monitor View](${MonitorView})
+
+For more details, refer to [this section](https://github.com/postman-solutions-eng/backstage-demo/tree/main/plugins/postman#monitors-use-monitor-id-or-name).
+
+## Coming soon 
+
+A *Governance Checks* view will be added in future versions of this plugin.
+`;
+
+export const MainComponent = () => (
+  <Page themeId="tool">
+    <Header title="Welcome to the Postman plugin page!" subtitle="A backstage plugin designed to demonstrate how Postman can be integrated in Bacjstage to manage APIs and streamline development workflows.">
+      <HeaderLabel label="Owner" value="Postman Solutions" />
+      <HeaderLabel label="Lifecycle" value="Production" />
+    </Header>
+    <Content>
+      <ContentHeader title="Postman" />
+      <Grid container spacing={3} direction="column">
+        <Grid item>
+          <InfoCard title="Plugin Views">
+            <MarkdownContent content={ReadMe} />
+          </InfoCard>
+        </Grid>
+      </Grid>
+    </Content>
+  </Page>
+);

packages/postman/src/components/MainComponent/index.ts

@@ -0,0 +1 @@
+export { MainComponent } from './MainComponent';