All files / src/components/Integration/connectors SlackManifestGenerator.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { InfoOutlined } from "@mui/icons-material";
import React, { useEffect } from "react";
import { useSelector } from "react-redux";
import { connectorSelector } from "../../../store/features/integrations/integrationsSlice.ts";
import { useGenerateManifestMutation } from "../../../store/features/integrations/api/generateManifestApi.ts";
import { CircularProgress } from "@mui/material";
import "highlight.js/styles/default.css";
import CopyCodeDrawer from "../../common/Drawers/CopyCodeDrawer";
import useDrawerState from "../../../hooks/common/useDrawerState.ts";
import { DrawerTypes } from "../../../store/features/drawers/drawerTypes.ts";
 
const id = DrawerTypes.COPY_CODE;
 
function SlackManifestGenerator() {
  const [triggerManifest, { isLoading }] = useGenerateManifestMutation();
  const currentConnector = useSelector(connectorSelector);
  const { openDrawer } = useDrawerState(id);
 
  const handleSubmit = (e) => {
    e.preventDefault();
    triggerManifest();
  };
 
  useEffect(() => {
    Iif (currentConnector.manifest) {
      openDrawer();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [currentConnector.manifest]);
 
  return (
    <main className="p-2 my-2 rounded bg-white border mr-3">
      <form
        onSubmit={handleSubmit}
        className="flex my-2 items-end gap-2 flex-wrap">
        <div className="flex items-center gap-2">
          <button className="p-1 text-violet-500 hover:text-white hover:bg-violet-500 border border-violet-500 text-xs rounded cursor-pointer transition-all">
            Get Manifest
          </button>
 
          {isLoading && <CircularProgress size={20} />}
        </div>
      </form>
 
      {currentConnector.manifest && (
        <CopyCodeDrawer
          title={"Slack manifest"}
          subtitle={"Copy the manifest and use it to create an application"}
          help={
            <>
              Read more in our{" "}
              <a
                className="underline text-violet-500"
                href="https://docs.drdroid.io/docs/setting-up-slack-alert-enrichment-on-self-hosted-playbooks#setup-your-slack-integration"
                target="_blank"
                rel="noreferrer">
                Docs
              </a>
            </>
          }
          content={currentConnector.manifest}
          language={"yaml"}
        />
      )}
 
      <hr />
 
      <div className="bg-gray-100 rounded my-2 text-sm p-2 text-violet-500 flex items-center gap-2 font-semibold">
        <InfoOutlined /> After the slack app is created, share the following
      </div>
    </main>
  );
}
 
export default SlackManifestGenerator;