manifest working

DrDroidLab · Apr 24, 2024 · 2881bcc · 2881bcc
1 parent 1d8bcf1
commit 2881bcc
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 21 deletions.
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -14,6 +14,7 @@
     "dayjs": "^1.11.7",
     "echarts-for-react": "^3.0.2",
     "framer-motion": "^11.1.5",
+    "highlight.js": "^11.9.0",
     "nprogress": "^0.2.0",
     "posthog-js": "^1.115.0",
     "react": "^18.2.0",

diff --git a/web/src/components/Integration/connectors/SlackManifestGenerator.jsx b/web/src/components/Integration/connectors/SlackManifestGenerator.jsx
@@ -6,6 +6,11 @@ import { connectorSelector } from "../../../store/features/integrations/integrat
 import { useGenerateManifestMutation } from "../../../store/features/integrations/api/generateManifestApi.ts";
 import { showSnackbar } from "../../../store/features/snackbar/snackbarSlice.ts";
 import { CircularProgress } from "@mui/material";
+import hljs from "highlight.js/lib/core";
+import yaml from "highlight.js/lib/languages/yaml";
+import "highlight.js/styles/default.css";
+
+hljs.registerLanguage("yaml", yaml);
 
 function SlackManifestGenerator() {
   const [host, setHost] = useState("");
@@ -24,6 +29,10 @@ function SlackManifestGenerator() {
     triggerManifest(host);
   };
 
+  const handleCopy = () => {
+    navigator.clipboard.writeText(currentConnector.manifest);
+  };
+
   return (
     <main className="p-2 my-2 rounded bg-white border mr-3">
       <form
@@ -50,13 +59,21 @@ function SlackManifestGenerator() {
       {currentConnector.manifest && (
         <div className="my-2 lg:max-w-xl">
           <div className="w-full flex justify-end">
-            <button className="border my-2 bg-white rounded p-1 text-xs font-bold flex gap-1 items-center cursor-pointer hover:border-violet-500 hover:text-violet-500 transition-all">
+            <button
+              onClick={handleCopy}
+              className="border my-2 bg-white rounded p-1 text-xs font-bold flex gap-1 items-center cursor-pointer hover:border-violet-500 hover:text-violet-500 transition-all">
               <ContentCopy fontSize="small" />
               Copy Code
             </button>
           </div>
-          <div className="border bg-gray-100 h-64 relative overflow-scroll p-2 text-gray-500">
-            {currentConnector.manifest}
+          <div className="border bg-gray-100 h-64 relative overflow-scroll p-2">
+            <pre
+              dangerouslySetInnerHTML={{
+                __html: hljs.highlight(currentConnector.manifest, {
+                  language: "yaml",
+                }).value,
+              }}
+            />
           </div>
         </div>
       )}

diff --git a/web/src/components/common/HandleInputRender/HandleInputRender.jsx b/web/src/components/common/HandleInputRender/HandleInputRender.jsx
@@ -23,7 +23,7 @@ export const HandleInputRender = ({ option }) => {
           <ValueComponent
             valueType={"STRING"}
             placeHolder={option.placeholder || `Enter ${option.label}`}
-            value={option.value || currentWorkflow[option.id]}
+            value={option.value ?? currentWorkflow[option.id] ?? ""}
             onValueChange={(val) =>
               option.handleChange
                 ? option.handleChange(val)

diff --git a/web/src/constants/api/integrations.ts b/web/src/constants/api/integrations.ts
@@ -10,7 +10,7 @@ export const GET_CONNECTOR_ASSETS = "/connectors/assets/models/get";
 export const GET_SLACK_ASSETS = "/connectors/assets/models/get";
 export const UPDATE_SLACK_RCA =
   "/connectors/alertops/slack/alerts/auto_rca/update_state";
-export const GENERATE_MANIFEST = "";
+export const GENERATE_MANIFEST = "/connectors/slack/app_manifest/create";
 
 export const GOOGLE_SPACES_LIST =
   "/connectors/integrations/handlers/g_chat/list_spaces";

diff --git a/web/src/store/features/integrations/api/generateManifestApi.ts b/web/src/store/features/integrations/api/generateManifestApi.ts
@@ -15,7 +15,12 @@ export const generateManifestApi = apiSlice.injectEndpoints({
       onQueryStarted: async (_, { dispatch, queryFulfilled }) => {
         try {
           const { data } = await queryFulfilled;
-          dispatch(setKey({ key: "manifest", value: data.manifest }));
+          dispatch(
+            setKey({
+              key: "manifest",
+              value: data.app_manifest,
+            }),
+          );
         } catch (e) {
           console.log(e);
         }