ready for review

plugins/survey-plugin/README.md

@@ -1,5 +1,59 @@
 # Survey Plugin
 
+Collect feedback from the team within Cortex!
+
+This plugin allows you to embed a survey form in Cortex to collect feedback from users. The screenshots and tests were done with Google Forms but other Forms like Microsoft Forms should work as well.
+
+## Overview
+
+The plugin has a Google Forms address hard coded. This is the Google Form that is shown by default and when viewed in the Global context.
+
+![Global Context](img/global-context.png)
+
+Update this with the survey form you would like to display by default in the Global context.
+
+The plugin will also check for a specific custom data key if viewed from the Entity context. If the key is there, it will render the form specified in that custom data key.
+
+![Entity Context](img/entity-context.png)
+
+## Setup
+
+This plugin requires no secrets or proxy set.
+Register a new plugin and set the following fields:
+
+- name (*i.e., Feedback*)
+- Include it in global context
+- Add another context for the entity types that could have a custom data key, like a service, domain, etc...
+- Add the ui.html file compiled from this plugin
+
+### How to set the default survey url
+
+The default survey url is hard coded in the `./src/components/App.tsx` as follows:
+
+```typescript
+import React from "react";
+import { Loader, usePluginContext } from "@cortexapps/plugin-core/components";
+import "../baseStyles.css";
+import { PluginContextLocation } from "@cortexapps/plugin-core";
+
+// Update this with your default/Global Survey Form
+const defaultSurvey = "https://my-great-survey.com/form1"
+
+```
+### How to add specific survey url to an entity
+
+If the plugin is running within an entity, it will look for a key named **survey** in the custom data associated to this entity. If it finds they key, it will use its value as the survey url.
+
+The survey url for an entity can be set via the [Custom Data API](https://docs.cortex.io/docs/api/add-custom-data-for-entity) or by adding the following section to the service yaml:
+
+```yaml
+x-cortex-custom-metadata:
+    survey: "https://my-great-survey.com/form2"
+```
+Please refer to our [documentation](https://docs.cortex.io/docs/reference/basics/custom-data) for more details on using custom data.
+
+# Setting up your Dev environment
+
 Survey Plugin 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

plugins/survey-plugin/jest.config.js

@@ -6,9 +6,9 @@ module.exports = {
     // map style asset imports to a stub file under the assumption they are not important to our tests
     "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",
     "@cortexapps/plugin-core/components":
-    "<rootDir>/../../node_modules/@cortexapps/plugin-core/dist/components.cjs.js",
+      "<rootDir>/../../node_modules/@cortexapps/plugin-core/dist/components.cjs.js",
     "@cortexapps/plugin-core":
-    "<rootDir>/../../node_modules/@cortexapps/plugin-core/dist/index.cjs.js",
+      "<rootDir>/../../node_modules/@cortexapps/plugin-core/dist/index.cjs.js",
   },
   setupFilesAfterEnv: ["<rootDir>/setupTests.ts"],
   testEnvironment: "jsdom",

plugins/survey-plugin/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "Survey Plugin",
+  "name": "Survey-Plugin",
   "version": "0.1.0",
   "license": "MIT",
   "dependencies": {

plugins/survey-plugin/src/components/App.tsx

@@ -1,25 +1,16 @@
 import type React from "react";
-import {
-  Logo,
-  PluginProvider,
-  Stack,
-  Title,
-} from "@cortexapps/plugin-core/components";
+import { PluginProvider } from "@cortexapps/plugin-core/components";
 import "../baseStyles.css";
-import ErrorBoundary from "./ErrorBoundary";
-import PluginContext from "./PluginContext";
+// import ErrorBoundary from "./ErrorBoundary";
+import Survey from "./Survey";
 
 const App: React.FC = () => {
+  const url = new URL("https://forms.gle/kMaARQLAgJZ5C8qr9");
+  url.searchParams.append("embed", "true");
   return (
-    <ErrorBoundary>
-      <PluginProvider>
-        <Stack>
-          <Logo />
-          <Title level={1}>My Awesome Cortex Plugin</Title>
-        </Stack>
-        <PluginContext />
-      </PluginProvider>
-    </ErrorBoundary>
+    <PluginProvider>
+      <Survey />
+    </PluginProvider>
   );
 };
 

plugins/survey-plugin/src/components/Survey.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { Loader, usePluginContext } from "@cortexapps/plugin-core/components";
+import "../baseStyles.css";
+import { PluginContextLocation } from "@cortexapps/plugin-core";
+
+// Update this with your default/Global Survey Form
+const defaultSurvey =
+  "https://docs.google.com/forms/d/e/1FAIpQLSd068wYDvfxbhB75fTx-KM7aWb9gNiLLcnjA6SQ4ulT9SLgqA/viewform?embedded=true";
+
+const Survey: React.FC = () => {
+  const context = usePluginContext();
+  console.log(context);
+  const [entitySurvey, setEntitySurvey] = React.useState<any | string>();
+  const [isLoading, setIsLoading] = React.useState(
+    context.location === PluginContextLocation.Entity
+  );
+  React.useEffect(() => {
+    if (context.location === PluginContextLocation.Entity) {
+      const fetchData = async (): Promise<void> => {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const cortexTag = context.entity!.tag;
+        console.log(cortexTag);
+        const cortexURL = context.apiBaseUrl;
+        console.log(cortexURL);
+        const result = await fetch(
+          `${cortexURL}/catalog/${cortexTag}/custom-data/survey`
+        );
+        if (result.ok) {
+          const resultJson = await result.json();
+          console.log({ resultJson });
+          console.log(defaultSurvey);
+          setEntitySurvey(resultJson.value);
+        } else {
+          setEntitySurvey(defaultSurvey);
+        }
+        setIsLoading(false);
+      };
+      void fetchData();
+    }
+  }, []);
+
+  return isLoading ? (
+    <Loader />
+  ) : (
+    <iframe src={entitySurvey ?? defaultSurvey} height="2967px" />
+  );
+};
+export default Survey;