webapps/console/components/TrackingIntegrationDocumentation/TrackingIntegrationDocumentation.tsx
Rama newjitsu · réplica de lectura del repositorio original.
import { Overlay } from "../Overlay/Overlay";
import { Dropdown, Tabs } from "antd";
import { useConfigApi } from "../../lib/useApi";
import { useQuery } from "@tanstack/react-query";
import { StreamConfig } from "../../lib/schema";
import { LoadingAnimation } from "../GlobalLoader/GlobalLoader";
import { ErrorCard } from "../GlobalError/GlobalError";
import { Center } from "../Center/Center";
import { HtmlManual } from "./Html";
import { ReactManual } from "./React";
import { ButtonLabel } from "../ButtonLabel/ButtonLabel";
import { FiMonitor } from "react-icons/fi";
import { FaGlobe, FaNodeJs, FaReact } from "react-icons/fa";
import { NPMManual } from "./NPMPackage";
import { Other } from "./Other";
import { useAppConfig } from "../../lib/context";
import { ReactNode, useState } from "react";
import { HiSelector } from "react-icons/hi";
import { HTTPManual } from "./HTTPApi";
import { Plug } from "lucide-react";
import { useQueryStringState } from "../../lib/useQueryStringState";
import { useConfigObjectList } from "../../lib/store";
function SegmentLogo() {
return (
<svg width="100%" height="100%" viewBox="0 0 64 64">
<g transform="matrix(.768307 0 0 .768307 0 2.304922)">
<path d="M51.9 52.8H4c-2.2 0-4-1.8-4-4s1.8-4 4-4h47.9c2.2 0 4 1.8 4 4s-1.8 4-4 4z" fill="#99cfac" />
<path
d="M41.7 77.3c-3.9 0-7.8-.6-11.5-1.7-2.1-.7-3.3-2.9-2.6-5s2.9-3.3 5-2.6c2.9.9 6 1.4 9.1 1.4 13.6 0 25.4-8.7 29.3-21.7.6-2.1 2.9-3.3 5-2.7s3.3 2.9 2.7 5c-5.1 16.3-19.9 27.3-37 27.3z"
fill="#49b881"
/>
<path d="M79.3 32.5H31.4c-2.2 0-4-1.8-4-4s1.8-4 4-4h47.9c2.2 0 4 1.8 4 4s-1.8 4-4 4z" fill="#99cfac" />
<path
d="M8.5 32.5c-.4 0-.8-.1-1.2-.2-2.1-.6-3.3-2.9-2.7-5C9.7 11 24.5 0 41.7 0c3.9 0 7.8.6 11.5 1.7 2.1.7 3.3 2.9 2.6 5s-2.9 3.3-5 2.6c-2.9-.9-6-1.4-9.1-1.4-13.6 0-25.4 8.7-29.3 21.7-.6 1.8-2.2 2.9-3.9 2.9z"
fill="#49b881"
/>
<g fill="#99cfac">
<circle r="4" cy="13.3" cx="65.4" />
<circle r="4" cy="64.1" cx="17.9" />
</g>
</g>
</svg>
);
}
export const DomainSelector: React.FC<{
domains: string[];
domain: string;
onChange: (domain: string) => void;
}> = props => {
const [dropdownOpen, setDropdownOpen] = useState(false);
return (
<div className="flex items-center space-x-1">
<code>{props.domain}</code>
<Dropdown
open={dropdownOpen}
trigger={["click"]}
placement="bottomRight"
arrow
dropdownRender={() => (
<div className="shadow px-4 py-4 bg-backgroundLight">
{props.domains.map(d => (
<div
key={d}
className="pb-2 cursor-pointer flex items-center"
onClick={() => {
props.onChange(d);
setDropdownOpen(false);
}}
>
<div className="w-4">{d === props.domain ? "→" : " "}</div>
<code>{d}</code>
</div>
))}
</div>
)}
>
<div className="cursor-pointer" onClick={() => setDropdownOpen(!dropdownOpen)}>
<HiSelector />
</div>
</Dropdown>
</div>
);
};
export const TrackingIntegrationDocumentation: React.FC<{ streamId: string; onCancel: () => void }> = ({
streamId,
onCancel,
}) => {
const ds = useConfigObjectList("domain");
const staticDomains = ds.filter(d => !d.name.includes("*")).map(d => d.name);
const appConfig = useAppConfig();
const configApi = useConfigApi<StreamConfig>("stream");
const [selectedDomain, setSelectedDomain] = useState<string | undefined>();
const {
data: stream,
isLoading,
error,
} = useQuery(["stream", streamId], () => configApi.get(streamId), { cacheTime: 0, retry: false });
const [framework, setFramework] = useQueryStringState("framework", {
defaultValue: "html",
parser: v => v,
serializer: v => v,
});
let domains: string[] = [];
let protocol = appConfig.publicEndpoints.protocol;
if (appConfig.publicEndpoints.ingestUrl) {
//extract host and port
try {
const url = new URL(appConfig.publicEndpoints.ingestUrl);
const host = url.host;
protocol = url.protocol === "https:" ? "https" : "http";
domains.push(host);
} catch (e) {
console.error("Can't parse ingest URL", appConfig.publicEndpoints.ingestUrl);
}
} else {
domains = stream
? appConfig.publicEndpoints.dataHost
? [
...new Set([...staticDomains, ...(stream?.domains ?? [])]),
`${stream.id}.${appConfig.publicEndpoints.dataHost}`,
]
: ["{deploy domain}"]
: [];
}
const writeKey = appConfig.publicEndpoints.dataHost
? undefined
: stream?.publicKeys?.[0]
? `${stream.publicKeys[0].id}:${stream.publicKeys[0].hint}`
: streamId || "{write-key}";
const serverWriteKey = stream?.privateKeys?.[0]
? `${stream.privateKeys[0].id}:${stream.privateKeys[0].hint}`
: "{server-write-key}";
const displayDomain = `${protocol}://${selectedDomain ?? domains?.[0]}`;
const wrap = (r: ReactNode) => {
return (
<div className="relative">
<div className="absolute w-full flex justify-center">
<div className="max-w-6xl w-full flex justify-end">
{(appConfig.ee.available || appConfig.publicEndpoints.dataHost) && (
<DomainSelector domains={domains} domain={selectedDomain ?? domains?.[0]} onChange={setSelectedDomain} />
)}
</div>
</div>
<div>{r}</div>
</div>
);
};
return (
<>
<Overlay onClose={onCancel} className="px-6 py-6">
<div style={{ minWidth: 900 }}>
<>
{isLoading && (
<Center vertical={true} horizontal={true}>
<LoadingAnimation />
</Center>
)}
{error && (
<Center vertical={true} horizontal={true}>
<ErrorCard error={error} />
</Center>
)}
{stream && (
<Tabs
defaultActiveKey={framework}
onChange={setFramework}
items={[
{
label: (
<ButtonLabel className="text-lg" icon={<FiMonitor className="w-5 h-5" />}>
HTML
</ButtonLabel>
),
key: "html",
children: wrap(<HtmlManual domain={displayDomain} writeKey={writeKey || undefined} />),
},
{
label: (
<ButtonLabel className="text-lg" icon={<FaReact className="w-5 h-5" />}>
React
</ButtonLabel>
),
key: "react",
children: wrap(<ReactManual domain={displayDomain} writeKey={writeKey || undefined} />),
},
{
label: (
<ButtonLabel className="text-lg" icon={<FaNodeJs className="w-5 h-5" />}>
NPM Package
</ButtonLabel>
),
key: "js",
children: wrap(<NPMManual domain={displayDomain} writeKey={writeKey || undefined} />),
},
{
label: (
<ButtonLabel className="text-lg" icon={<FaGlobe className="w-5 h-5" />}>
HTTP API
</ButtonLabel>
),
key: "http",
children: wrap(<HTTPManual domain={displayDomain} writeKey={serverWriteKey || undefined} />),
},
{
label: (
<ButtonLabel className="text-lg" icon={<Plug className="w-5 h-5" />}>
Apps & Others
</ButtonLabel>
),
key: "other",
children: wrap(<Other domain={displayDomain} />),
},
]}
/>
)}
</>
</div>
</Overlay>
</>
);
};