Merge pull request #2511 from opengovern/ui-changes

feat: add setup and manifest

services/webui/package.json

@@ -39,6 +39,7 @@
         "echarts": "^5.5.1",
         "echarts-for-react": "^3.0.2",
         "framer-motion": "^10.18.0",
+        "rehype-raw": "^7.0.0",
         "html-react-parser": "^5.0.7",
         "jotai": "^2.6.0",
         "jwt-decode": "^3.1.2",
@@ -51,7 +52,7 @@
         "react-aria": "^3.30.0",
         "react-csv": "^2.2.2",
         "react-dom": "^18.2.0",
-        "react-markdown": "^8.0.6",
+        "react-markdown": "^9.0.1",
         "react-querybuilder": "^6.5.4",
         "react-router-dom": "^6.20.1",
         "react-scripts": "^5.0.1",
@@ -63,6 +64,10 @@
         "runtime-env-cra": "^0.2.4",
         "styled-components": "^6.1.8",
         "swagger-typescript-api": "^13.0.23",
+        "@types/mdx": "^2.0.13",
+        "@mdx-js/loader": "^3.0.1",
+        "@mdx-js/react": "^3.1.0",
+        "@mdx-js/runtime": "^2.0.0",
         "swr": "^2.2.4",
         "typescript": "^4.9.5",
         "web-vitals": "^2.1.4"

services/webui/src/components/MDX/index.tsx

@@ -0,0 +1,24 @@
+import type { MDXComponents } from 'mdx/types'
+import { Bold, ChangelogEntry, CustomLink, H1, H2, H3, Li, P, Ul } from './mdx'
+
+import { ChangelogImage } from './mdx'
+
+let customComponents = {
+    h1: H1,
+    h2: H2,
+    h3: H3,
+    p: P,
+    Bold: Bold,
+    ul: Ul,
+    a: CustomLink,
+    ChangelogEntry: ChangelogEntry,
+    ChangelogImage: ChangelogImage,
+    li: Li,
+}
+
+export function useMDXComponents(components: MDXComponents) {
+    return {
+        ...customComponents,
+        ...components,
+    }
+}

services/webui/src/components/MDX/mdx.tsx

@@ -0,0 +1,154 @@
+import clsx from "clsx";
+import React from "react";
+
+export default function slugify(str: string) {
+  return str
+    .toString()
+    .toLowerCase()
+    .trim() // Remove whitespace from both ends of a string
+    .replace(/\s+/g, "-") // Replace spaces with -
+    .replace(/&/g, "-and-") // Replace & with 'and'
+    .replace(/[^\w\-]+/g, "") // Remove all non-word characters except for -
+    .replace(/\-\-+/g, "-"); // Replace multiple - with single -
+}
+
+function CustomHeading(props: any) {
+  let slug = slugify(props.children);
+
+
+  return React.createElement(
+    `h${props.level}`,
+    {
+      id: slug,
+      className: clsx(
+        "scroll-mt-36 md:scroll-mt-24 inline-flex",
+        props.className
+      ),
+    },
+    [
+      React.createElement("a", {
+        href: `#${slug}`,
+        key: `link-${slug}`,
+        className: "anchor-link",
+      }),
+    ],
+    props.children
+  );
+}
+
+export const H1 = ({ children }: React.HTMLProps<HTMLHeadingElement>) => (
+  <>
+    <CustomHeading
+      className="text-3xl font-bold normal-case tracking-tight text-gray-900 sm:text-4xl dark:text-gray-50"
+      level={1}
+    >
+      {children}
+    </CustomHeading>
+    <br />
+  </>
+);
+
+export const H2 = ({ children }: React.HTMLProps<HTMLHeadingElement>) => (
+  <>
+    <CustomHeading
+      className="mb-4 text-lg font-semibold normal-case tracking-tight text-gray-900 dark:text-gray-50"
+      level={2}
+    >
+      {children}
+    </CustomHeading>
+    <br/>
+  </>
+);
+
+export const H3 = ({ children }: React.HTMLProps<HTMLHeadingElement>) => (
+  <>
+    <CustomHeading
+      className="mb-2 font-semibold normal-case tracking-tight text-gray-900 dark:text-gray-50"
+      level={3}
+    >
+      {children}
+    </CustomHeading>
+    <br />
+  </>
+);
+
+export const P = (props: React.HTMLProps<HTMLParagraphElement>) => (
+  <p {...props} className="mb-8 leading-7 text-gray-600 dark:text-gray-400" />
+);
+
+export const Ul = (props: React.HTMLAttributes<HTMLUListElement>) => (
+  <ul
+    className="mb-10 ml-[30px] list-['–__'] space-y-1 leading-8 text-gray-600 dark:text-gray-400"
+    {...props}
+  />
+);
+
+export const Bold = (props: React.HTMLAttributes<HTMLSpanElement>) => (
+  <span className="font-semibold text-gray-900 dark:text-gray-50" {...props} />
+);
+
+export function CustomLink(props: any) {
+  let href = props.href;
+  const style =
+    "text-indigo-600 font-medium hover:text-indigo-500 dark:text-indigo-500 hover:dark:text-indigo-400";
+  if (href.startsWith("/")) {
+    return (
+      <a className={style} href={href} {...props}>
+        {props.children}
+      </a>
+    );
+  }
+
+  if (href.startsWith("#")) {
+    return <a {...props} className={style} />;
+  }
+
+  return (
+    <a className={style} target="_blank" rel="noopener noreferrer" {...props} />
+  );
+}
+
+export const ChangelogEntry = ({
+  version,
+  date,
+  children,
+}: {
+  version: string;
+  date: string;
+  children: any;
+}) => (
+  <div className="relative my-20 flex flex-col justify-center gap-x-14 border-b border-gray-200 md:flex-row dark:border-gray-800">
+    <div className="mb-4 md:mb-10 md:w-1/3">
+      <div className="sticky top-24 flex items-center space-x-2 md:block md:space-x-0 md:space-y-1.5">
+        <span className="inline-flex items-center rounded-lg bg-indigo-50 px-2.5 py-1 text-xs font-medium text-indigo-700 ring-1 ring-inset ring-indigo-700/10 dark:bg-indigo-500/20 dark:text-indigo-400 dark:ring-indigo-400/10">
+          {version}
+        </span>
+        <span className="block whitespace-nowrap text-sm text-gray-600 dark:text-gray-400">
+          {date}
+        </span>
+      </div>
+    </div>
+    <div className="mb-12">{children}</div>
+  </div>
+);
+
+export const ChangelogImage = ({
+  alt,
+  width = 1200,
+  height = 675,
+  src,
+  ...props
+}: any) => (
+  <img
+    src={src}
+    alt={alt}
+    width={width}
+    height={height}
+    className="mb-10 overflow-hidden rounded-xl shadow-md shadow-black/15 ring-1 ring-gray-200/50 dark:ring-gray-800"
+    {...props}
+  />
+);
+
+export const Li = (props: React.HTMLAttributes<HTMLLIElement>) => (
+  <li className="font-semibold text-gray-900 dark:text-gray-50" {...props} />
+);

services/webui/src/pages/Integrations/TypeDetailNew/Manifest/index.tsx

@@ -0,0 +1,99 @@
+import { Card, Title } from '@tremor/react'
+
+import { useEffect, useState } from 'react'
+
+import axios from 'axios'
+
+import { KeyValuePairs } from '@cloudscape-design/components'
+interface IntegrationListProps {
+    name?: string
+    integration_type?: string
+}
+
+export default function Manifest({
+    name,
+    integration_type,
+}: IntegrationListProps) {
+    const [manifest, setManifest] = useState<any>()
+    const [loading, setLoading] = useState<boolean>(false)
+
+    const GetManifest = () => {
+        setLoading(true)
+        let url = ''
+        if (window.location.origin === 'http://localhost:3000') {
+            url = window.__RUNTIME_CONFIG__.REACT_APP_BASE_URL
+        } else {
+            url = window.location.origin
+        }
+        // @ts-ignore
+        const token = JSON.parse(localStorage.getItem('openg_auth')).token
+
+        const config = {
+            headers: {
+                Authorization: `Bearer ${token}`,
+            },
+        }
+
+        axios
+            .get(
+                `${url}/main/integration/api/v1/integration-types/plugin/${integration_type}/manifest`,
+                config
+            )
+            .then((resp) => {
+                setManifest(resp.data)
+            })
+            .catch((err) => {
+                console.log(err)
+                setLoading(false)
+
+                // params.fail()
+            })
+    }
+
+    useEffect(() => {
+        GetManifest()
+    }, [])
+
+    return (
+        <>
+            <Card className="p-5">
+                <Title className='mt-2 mb-4 font-semibold'>
+                    Plugin information
+                </Title>
+                <KeyValuePairs
+                    columns={4}
+                    items={[
+                        {
+                            label: 'Id',
+                            value: manifest?.IntegrationType,
+                        },
+                        {
+                            label: 'URL',
+                            value: manifest?.DescriberURL,
+                        },
+                        {
+                            label: 'Version',
+                            value: manifest?.DescriberTag,
+                        },
+                        {
+                            label: 'Publisher',
+                            value: manifest?.Publisher,
+                        },
+                        {
+                            label: 'Author',
+                            value: manifest?.Author,
+                        },
+                        {
+                            label: 'Supported Platform Version',
+                            value: manifest?.SupportedPlatformVersion,
+                        },
+                        {
+                            label: 'Update date',
+                            value: manifest?.UpdateDate,
+                        },
+                    ]}
+                />
+            </Card>
+        </>
+    )
+}

services/webui/src/pages/Integrations/TypeDetailNew/Setup/index.tsx

@@ -0,0 +1,81 @@
+import {
+    Card,
+
+} from '@tremor/react'
+
+import { useEffect, useState } from 'react'
+
+import axios from 'axios'
+import ReactMarkdown from 'react-markdown'
+import rehypeRaw from 'rehype-raw'
+import { useMDXComponents } from '../../../../components/MDX'
+interface IntegrationListProps {
+    name?: string
+    integration_type?: string
+}
+
+
+export default function Setup({
+    name,
+    integration_type,
+}: IntegrationListProps) {
+    const [setup,setSetup] = useState<any>()
+    const [loading, setLoading] = useState<boolean>(false)
+
+
+
+    const GetSetup = () => {
+        setLoading(true)
+        let url = ''
+        if (window.location.origin === 'http://localhost:3000') {
+            url = window.__RUNTIME_CONFIG__.REACT_APP_BASE_URL
+        } else {
+            url = window.location.origin
+        }
+        // @ts-ignore
+        const token = JSON.parse(localStorage.getItem('openg_auth')).token
+
+        const config = {
+            headers: {
+                Authorization: `Bearer ${token}`,
+            },
+        }
+
+
+        axios
+            .get(
+                `${url}/main/integration/api/v1/integration-types/plugin/${integration_type}/setup`,
+                config
+            )
+            .then((resp) => {
+
+                setSetup(resp.data)
+            })
+            .catch((err) => {
+                console.log(err)
+                setLoading(false)
+
+                // params.fail()
+            })
+    }
+
+    useEffect(() => {
+        GetSetup()
+    }, [])
+
+
+    return (
+        <>
+            <Card className="p-2">
+                <ReactMarkdown
+                    children={setup}
+                    skipHtml={false}
+                    rehypePlugins={[rehypeRaw]}
+                    // @ts-ignore
+                    components={useMDXComponents({})}
+                />
+            </Card>
+        </>
+    )
+}
+