remove hardcoded URL, add instructions, fix tests (#35)

martindstone · web-flow · commit b78f80963407 · 2024-11-19T09:58:07.000-05:00
diff --git a/plugins/confluence-plugin/README.md b/plugins/confluence-plugin/README.md
@@ -6,25 +6,42 @@ This plugin makes it possible to view Confluence assets alongside related entiti
 
 This is a [Cortex](https://www.cortex.io/) plugin. To see how to run the plugin inside of Cortex, see [our docs](https://docs.cortex.io/docs/plugins).
 
-### Prerequisites
+## Setup
 
-The URL of your Confluence instance should be configured in `src/components/PageContent.tsx`. To do so, change the following line to match the URL of your server:
+### Find your Confluence instance URL
 
-```
-const baseConfluenceUrl = "https://confluence-server.atlassian.net";
-```
+Your Confluence instance URL should look like `https://something.atlassian.net`. We will use this URL in the plugin's proxy and in the plugin's configuration entity.
+
+### Set your Confluence credentials
+
+If you are using username and password authentication, type them in to a text editor with a colon (`:`) between them. If you are using SSO, use an API token in place of the password. To create an API token in Confluence, follow the [instructions provided by Atlassian](https://support.atlassian.com/atlassian-account/docs/manage-api-tokens-for-your-atlassian-account/). Once you have your text in your text editor like `myusername@example.com:MySecretPassWordOrToken`, you need to base64 encode it. You can do this using an online tool like [this](https://www.base64encode.org). You will add the base64 encoded value to Cortex as a secret. Copy the base64 encoded value. In Cortex, click on Settings > Secrets > Add secret. In Secret name, type `confluence_secret`, paste the base64 encoded secret into Secret value, and click on Create secret.
+
+### Set up a Plugin Proxy
+
+After you've saved the secret, we will set up a proxy to use that secret to communicate with Confluence. In Cortex, click on Plugins > Proxies > Create Proxy. In Name, type `Confluence Proxy`. Click on Add URL, and put in your Confluence Instance URL, like `https://something.atlassian.net`. Click Save. Next, click on "Add header to https://something.atlassian.net". In the dialog box that appears, type `Authorization` in the Name field, and in the Value field, type `Basic {{{secrets.confluence_secret}}}`. Make sure you include the three curly braces, and make sure the secret name matches the secret you created above, with `secrets.` in front of it. Click Save, then click on the Create Proxy button.
+
+### Associate the plugin with the plugin proxy
 
-Developing and building this plugin requires either [yarn](https://classic.yarnpkg.com/lang/en/docs/install/) or [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).
+Create or edit your Confluence Plugin. In the dropdown under the Associated Proxy heading, choose the Confluence proxy you created above. Next, click Save plugin at the bottom of the page.
 
-## Getting started
+### Create a plugin configuration entity
 
-1. Modify the `src/components/PageContent.tsx` file as described above
-2. Run `yarn` to download all dependencies
-3. Run `yarn build` to compile the plugin code into `./dist/ui.html`
-4. Upload `ui.html` into Cortex on a create or edit plugin page
-5. Add or update the code and repeat steps 2-3 as necessary
+- Consider creating a new entity type, so that any existing scorecards are not affected by ths configuration entity. In this example, we have created a new entity type called `plugin-configuration`
+- Create a new entity with the tag `confluence-plugin-config`
+- Set `x-cortex-definition.confluence-url` to the value of your Confluence Instance URL. For example, if my Confluence Instance URL was `https://martindstone.service-now.com`, my `confluence-plugin-config` entity would look like this:
 
-## Adding Confluence Content
+```
+openapi: 3.0.1
+info:
+  title: Confluence Plugin Config
+  description: ""
+  x-cortex-tag: confluence-plugin-config
+  x-cortex-type: plugin-configuration
+  x-cortex-definition:
+    confluence-url: https://martindstone.service-now.com
+```
+
+### Adding Confluence content to entities
 
 Entities can be associated with Confluence Page IDs by adding a PageID tag to the `x-cortex-confluence` object. In the Entity yaml for the entity to the Page ID that you'd like to view inside of Cortex, such as:
 
@@ -34,3 +51,13 @@ x-cortex-confluence:
 ```
 
 You can do this for Custom Entities, as well as any Service entity.
+
+### Done!
+
+Now when you load the Confluence plugin on an entity that has a Confluence page ID in `x-cortex-confluence.pageID`, you should see the content of that page in Cortex!
+
+## Building the plugin
+
+1. Run `yarn` to download all dependencies
+2. Run `yarn build` to compile the plugin code into `./dist/ui.html`
+3. Upload `ui.html` into Cortex on a create or edit plugin page
diff --git a/plugins/confluence-plugin/src/components/App.test.tsx b/plugins/confluence-plugin/src/components/App.test.tsx
@@ -1,53 +1,40 @@
-import { render, screen, waitFor } from "@testing-library/react";
+import { render, waitFor } from "@testing-library/react";
+import fetchMock from "jest-fetch-mock";
 import App from "./App";
 
-const mockPageContent = {
-  id: "131073",
-  type: "page",
-  status: "current",
-  title: "AppDirect Runbook",
-  macroRenderedOutput: {},
-  body: {
-    view: {
-      value:
-        '<p><style>[data-colorid=kggi8475gd]{color:#bf2600} html[data-color-mode=dark] [data-colorid=kggi8475gd]{color:#ff6640}</style><strong>This document describes what we do when it breaks!</strong></p><p><br />Step 1 - <span data-colorid="kggi8475gd">EVERYBODY</span> PANIC!!!!!!!</p><p>Step2 - Run to the hills</p><p>Step3 - Run for your lives</p><p /><h2 id="AppDirectRunbook-ArchitecturalDigram">Architectural Digram</h2><span class="confluence-embedded-file-wrapper image-center-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image image-center" alt="cloud_infrastructure (3).png" width="760" loading="lazy" src="https://cortex-se-test.atlassian.net/wiki/download/thumbnails/131073/cloud_infrastructure%20(3).png?version=1&amp;modificationDate=1706209753278&amp;cacheVersion=1&amp;api=v2&amp;width=760&amp;height=888" data-image-src="https://cortex-se-test.atlassian.net/wiki/download/attachments/131073/cloud_infrastructure%20(3).png?version=1&amp;modificationDate=1706209753278&amp;cacheVersion=1&amp;api=v2" data-height="1632" data-width="1396" data-unresolved-comment-count="0" data-linked-resource-id="2523157" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="cloud_infrastructure (3).png" data-base-url="https://cortex-se-test.atlassian.net/wiki" data-linked-resource-content-type="image/png" data-linked-resource-container-id="131073" data-linked-resource-container-version="4" data-media-id="d04b592d-798d-486e-80af-6af581929d0b" data-media-type="file" srcset="https://cortex-se-test.atlassian.net/wiki/download/thumbnails/131073/cloud_infrastructure%20(3).png?version=1&amp;modificationDate=1706209753278&amp;cacheVersion=1&amp;api=v2&amp;width=1095&amp;height=1280 2x, https://cortex-se-test.atlassian.net/wiki/download/thumbnails/131073/cloud_infrastructure%20(3).png?version=1&amp;modificationDate=1706209753278&amp;cacheVersion=1&amp;api=v2&amp;width=760&amp;height=888 1x" /></span><p />',
-      representation: "view",
-      _expandable: {
-        webresource: "",
-        embeddedContent: "",
-        mediaToken: "",
-        content: "/rest/api/content/131073",
-      },
-    },
-    _expandable: {
-      editor: "",
-      atlas_doc_format: "",
-      export_view: "",
-      styled_view: "",
-      dynamic: "",
-      storage: "",
-      editor2: "",
-      anonymous_export_view: "",
-    },
-  },
-};
-
-const serviceYaml = {
-  info: {
-    "x-cortex-confluence": { pageID: 131073 },
-  },
-};
+import { successMockBodies } from "../mocks/mockBodies";
 
 describe("App", () => {
-  fetchMock.mockResponses(
-    [JSON.stringify(serviceYaml), { status: 200 }],
-    [JSON.stringify(mockPageContent), { status: 200 }]
-  );
+  beforeEach(() => {
+    fetchMock.resetMocks();
+  });
 
   it("verifies that the plugin works", async () => {
-    render(<App />);
+    fetchMock.mockResponse(async (req) => {
+      const url = req.url.split("?")[0];
+      if (!successMockBodies[url]) {
+        return { status: 404 };
+      }
+      return {
+        status: 200,
+        body: JSON.stringify(successMockBodies[url]),
+      };
+    });
+
+    const { getByText } = render(<App />);
     await waitFor(() => {
-      expect(screen.queryByText("AppDirect Runbook")).toBeInTheDocument();
+      expect(fetch).toHaveBeenCalledWith(
+        "https://api.cortex.dev/catalog/confluence-plugin-config/openapi"
+      );
+      expect(fetch).toHaveBeenCalledWith(
+        "https://api.cortex.dev/catalog/inventory-planner/openapi"
+      );
+      expect(fetch).toHaveBeenCalledWith(
+        expect.stringMatching(
+          /https:\/\/unit-testing-confluence-instance.atlassian.net.*131073.*/
+        )
+      );
+      expect(getByText("AppDirect Runbook")).toBeInTheDocument();
     });
   });
 });
diff --git a/plugins/confluence-plugin/src/components/Instructions.tsx b/plugins/confluence-plugin/src/components/Instructions.tsx
@@ -0,0 +1,28 @@
+import type React from "react";
+
+import { Text, Box } from "@cortexapps/plugin-core/components";
+
+const Instructions: React.FC = () => (
+  <Box backgroundColor="light" margin={2} padding={4} borderRadius={2}>
+    <Text>
+      This plugin makes it possible to view Confluence assets associated with an
+      entity.
+    </Text>
+    <Text>
+      To get started, please add an entity to Cortex like the following:
+    </Text>
+    <Box marginTop={4} padding={4} backgroundColor="white" borderRadius={2}>
+      <pre>
+        {`openapi: 3.0.1
+info:
+  title: Confluence Plugin Config
+  x-cortex-tag: confluence-plugin-config
+  x-cortex-type: pluginconfiguration
+  x-cortex-definition:
+    confluence-url: https://YOUR_INSTANCE.atlassian.net`}
+      </pre>
+    </Box>
+  </Box>
+);
+
+export default Instructions;
diff --git a/plugins/confluence-plugin/src/components/PageContent.test.tsx b/plugins/confluence-plugin/src/components/PageContent.test.tsx
@@ -1,70 +1,45 @@
 import { render, screen, waitFor } from "@testing-library/react";
 import PageContent from "./PageContent";
 
-const mockPageContent = {
-  id: "131073",
-  type: "page",
-  status: "current",
-  title: "AppDirect Runbook",
-  macroRenderedOutput: {},
-  body: {
-    view: {
-      value:
-        '<p><style>[data-colorid=kggi8475gd]{color:#bf2600} html[data-color-mode=dark] [data-colorid=kggi8475gd]{color:#ff6640}</style><strong>This document describes what we do when it breaks!</strong></p><p><br />Step 1 - <span data-colorid="kggi8475gd">EVERYBODY</span> PANIC!!!!!!!</p><p>Step2 - Run to the hills</p><p>Step3 - Run for your lives</p><p /><h2 id="AppDirectRunbook-ArchitecturalDigram">Architectural Digram</h2><span class="confluence-embedded-file-wrapper image-center-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image image-center" alt="cloud_infrastructure (3).png" width="760" loading="lazy" src="https://cortex-se-test.atlassian.net/wiki/download/thumbnails/131073/cloud_infrastructure%20(3).png?version=1&amp;modificationDate=1706209753278&amp;cacheVersion=1&amp;api=v2&amp;width=760&amp;height=888" data-image-src="https://cortex-se-test.atlassian.net/wiki/download/attachments/131073/cloud_infrastructure%20(3).png?version=1&amp;modificationDate=1706209753278&amp;cacheVersion=1&amp;api=v2" data-height="1632" data-width="1396" data-unresolved-comment-count="0" data-linked-resource-id="2523157" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="cloud_infrastructure (3).png" data-base-url="https://cortex-se-test.atlassian.net/wiki" data-linked-resource-content-type="image/png" data-linked-resource-container-id="131073" data-linked-resource-container-version="4" data-media-id="d04b592d-798d-486e-80af-6af581929d0b" data-media-type="file" srcset="https://cortex-se-test.atlassian.net/wiki/download/thumbnails/131073/cloud_infrastructure%20(3).png?version=1&amp;modificationDate=1706209753278&amp;cacheVersion=1&amp;api=v2&amp;width=1095&amp;height=1280 2x, https://cortex-se-test.atlassian.net/wiki/download/thumbnails/131073/cloud_infrastructure%20(3).png?version=1&amp;modificationDate=1706209753278&amp;cacheVersion=1&amp;api=v2&amp;width=760&amp;height=888 1x" /></span><p />',
-      representation: "view",
-      _expandable: {
-        webresource: "",
-        embeddedContent: "",
-        mediaToken: "",
-        content: "/rest/api/content/131073",
-      },
-    },
-    _expandable: {
-      editor: "",
-      atlas_doc_format: "",
-      export_view: "",
-      styled_view: "",
-      dynamic: "",
-      storage: "",
-      editor2: "",
-      anonymous_export_view: "",
-    },
-  },
-};
-
-const serviceYaml = {
-  info: {
-    "x-cortex-confluence": { pageID: 131073 },
-  },
-};
+import { successMockBodies, noEntityMockBodies } from "../mocks/mockBodies";
 
 describe("PageContent", () => {
   beforeEach(() => {
     fetchMock.resetMocks();
   });
 
   it("shows message when no page is found", async () => {
-    fetchMock.mockResponses(
-      [JSON.stringify(serviceYaml), { status: 200 }],
-      [JSON.stringify({}), { status: 500 }]
-    );
+    fetchMock.mockResponse(async (req) => {
+      const url = req.url.split("?")[0];
+      if (!noEntityMockBodies[url]) {
+        return { status: 404 };
+      }
+      return {
+        status: 200,
+        body: JSON.stringify(noEntityMockBodies[url]),
+      };
+    });
 
     render(<PageContent />);
 
     await waitFor(() => {
       expect(
-        screen.getByText(
-          "We could not find any Confluence page associated with this entity"
-        )
+        screen.getByText("No Confluence details exist on this entity.")
       ).toBeInTheDocument();
     });
   });
 
   it("shows a page if page is found", async () => {
-    fetchMock.mockResponses(
-      [JSON.stringify(serviceYaml), { status: 200 }],
-      [JSON.stringify(mockPageContent), { status: 200 }]
-    );
+    fetchMock.mockResponse(async (req) => {
+      const url = req.url.split("?")[0];
+      if (!successMockBodies[url]) {
+        return { status: 404 };
+      }
+      return {
+        status: 200,
+        body: JSON.stringify(successMockBodies[url]),
+      };
+    });
 
     render(<PageContent />);
     await waitFor(() => {
@@ -79,18 +54,24 @@ describe("PageContent", () => {
 
     await waitFor(() => {
       expect(
-        screen.getByText(
-          "We could not find any Confluence page associated with this entity"
+        screen.queryByText(
+          "To get started, please add an entity to Cortex like the following:"
         )
       ).toBeInTheDocument();
     });
   });
 
   it("renders content with dangerouslySetInnerHTML", async () => {
-    fetchMock.mockResponses(
-      [JSON.stringify(serviceYaml), { status: 200 }],
-      [JSON.stringify(mockPageContent), { status: 200 }]
-    );
+    fetchMock.mockResponse(async (req) => {
+      const url = req.url.split("?")[0];
+      if (!successMockBodies[url]) {
+        return { status: 404 };
+      }
+      return {
+        status: 200,
+        body: JSON.stringify(successMockBodies[url]),
+      };
+    });
 
     render(<PageContent />);
     await waitFor(() => {
diff --git a/plugins/confluence-plugin/src/components/PageContent.tsx b/plugins/confluence-plugin/src/components/PageContent.tsx
diff --git a/plugins/confluence-plugin/src/mocks/mockBodies.ts b/plugins/confluence-plugin/src/mocks/mockBodies.ts
