From 9fd0c1eedcf27d5b56ab902a8d0844c9e29ef6f7 Mon Sep 17 00:00:00 2001 From: "vault-token-factory-spectrocloud[bot]" <133815545+vault-token-factory-spectrocloud[bot]@users.noreply.github.com> Date: Wed, 4 Dec 2024 18:27:13 +0000 Subject: [PATCH] chore: PEM-6153 fixed the fragment url to follow the actual content (#4697) (#4862) * PEM-6153-fixed the fragment url to follow the actual content * ci: auto-formatting prettier issues * changed the click as scrollIntoView * reverting back to click * fixed the fragment url for main Readme as well * ci: auto-formatting prettier issues * cleaned up * ci: auto-formatting prettier issues * addressed the review comments * added fragment link support for h1 as well --------- Co-authored-by: nage1234 Co-authored-by: Karl Cardenas <29551334+karl-cardenas-coding@users.noreply.github.com> (cherry picked from commit db85b2d12942e884706ed63504fe95635e7e188b) Co-authored-by: Nageswari Raghunathan <88926279+nage1234@users.noreply.github.com> --- package.json | 1 - plugins/packs-integrations.js | 2 +- .../PacksInformation/PacksInformation.tsx | 5 +- src/components/PacksReadme/PacksReadme.tsx | 212 +++++++++++++----- .../Technologies/TechnologyCard.tsx | 2 +- 5 files changed, 156 insertions(+), 66 deletions(-) diff --git a/package.json b/package.json index 792c3f6c19..5914627d3a 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,6 @@ "docusaurus-plugin-sass": "^0.2.5", "docusaurus-theme-openapi-docs": "0.0.0-949", "fuse.js": "^6.6.2", - "markdown-to-jsx": "^7.0.0", "node-fetch": "^3.1.0", "p-ratelimit": "^1.0.1", "prism-react-renderer": "^2.1.0", diff --git a/plugins/packs-integrations.js b/plugins/packs-integrations.js index 6f799a4e8b..47bac9c358 100644 --- a/plugins/packs-integrations.js +++ b/plugins/packs-integrations.js @@ -285,7 +285,7 @@ function generateRoutes(packsAllData) { metadata: { sourceFilePath: "../docs/docs-content/integrations/packs.mdx", }, - data: { name: pack.name, version: pack.latestVersion, parent: parentVersion?.title }, + data: { name: pack.name, version: pack.latestVersion, parent: parentVersion?.title, tab: "main" }, }; }); } diff --git a/src/components/PacksInformation/PacksInformation.tsx b/src/components/PacksInformation/PacksInformation.tsx index 6b4842d00d..eb6c4266a9 100644 --- a/src/components/PacksInformation/PacksInformation.tsx +++ b/src/components/PacksInformation/PacksInformation.tsx @@ -13,6 +13,7 @@ interface PacksData { name: string; version: string; parent: string; + tab: string; }; } @@ -30,7 +31,9 @@ export default function Packs(props: Packs) { const data = props?.route?.data; return data ? ( - + ) : ( diff --git a/src/components/PacksReadme/PacksReadme.tsx b/src/components/PacksReadme/PacksReadme.tsx index 4ccfa2b73d..5accfae16e 100644 --- a/src/components/PacksReadme/PacksReadme.tsx +++ b/src/components/PacksReadme/PacksReadme.tsx @@ -1,9 +1,8 @@ import React, { useEffect, useState, useMemo, ReactElement } from "react"; import styles from "./PacksReadme.module.scss"; -import { Tabs, ConfigProvider, theme, TreeSelect } from "antd"; +import { ConfigProvider, theme, TreeSelect, Tabs } from "antd"; import CustomLabel from "../Technologies/CategorySelector/CustomLabel"; import PackCardIcon from "../Technologies/PackCardIcon"; -import Markdown from "markdown-to-jsx"; import { useHistory } from "react-router-dom"; import "./PacksReadme.antd.css"; import { usePluginData } from "@docusaurus/useGlobalData"; @@ -14,10 +13,12 @@ import { useColorMode } from "@docusaurus/theme-common"; import { packTypeNames, cloudDisplayNames } from "../../constants/packs"; import Admonition from "@theme/Admonition"; import { Redirect } from "react-router-dom"; - +import useIsBrowser from "@docusaurus/useIsBrowser"; +import ReactMarkDown from "react-markdown"; +import remarkGfm from "remark-gfm"; interface PackReadmeProps { customDescription: string; - packUidMap: Record; + packUidMap: Record; versions: Version[]; title: string; logoUrl: string; @@ -62,11 +63,12 @@ function versionChange( setSelectedPackUid: React.Dispatch>, getParentVersion: (version: string) => Version | undefined, history: ReturnType, - packName: string + packName: string, + selectedTabPane: string = "main" ) { const [version, packUid] = item.split("==="); const parentVersion = getParentVersion(version)?.title || ""; - history.replace({ search: `?pack=${packName}&version=${version}&parent=${parentVersion}` }); + history.replace({ search: `?pack=${packName}&version=${version}&parent=${parentVersion}&tab=${selectedTabPane}` }); setSelectedVersion(version); setSelectedPackUid(packUid); } @@ -110,63 +112,70 @@ function renderVersionOptions(packData: PackData) { })); } -function renderTabs(selectedPackUid: string, packData: PackData, customReadme: ReactElement | null) { - const empty_icon_light = useBaseUrl("/img/empty_icon_table_light.svg"); - const empty_icon_dark = useBaseUrl("/img/empty_icon_table_dark.svg"); - const readme = selectedPackUid ? packData.packUidMap[selectedPackUid]?.readme : ""; - const tabs = [ - readme && { - label: `README`, - key: "1", - children: {readme}, - }, - customReadme && { - label: `Additional Details`, - key: "2", - children: customReadme, - }, - ].filter(Boolean) as { label: string; key: string; children: JSX.Element }[]; - - if (tabs.length > 1) { - return ( - - {tabs.map((item) => ( - - {item.children} - - ))} - - ); - } - if (tabs.length === 1) { - return tabs[0].children; - } - return ( -
- -
No README found
-
- ); -} - function getProviders(packData: PackData) { if (packData.provider.includes("all")) { return "All"; } - return packData.provider .map((provider) => cloudDisplayNames[provider as keyof typeof cloudDisplayNames] || provider) .join(", "); } +function processPackUiMap( + packUidMap: Record +): Record { + const newPackUidMap: Record = {}; + Object.entries(packUidMap).map(([key, value]) => { + if (key) { + const readmeFileName = packUidMap[key].readme; + let module; + if (readmeFileName) { + module = ( + { + const headingId = props.children?.toString().replace(/\s+/g, "-").toLowerCase(); + return ( +

+ {props.children} + +

+ ); + }, + h2: (props) => { + const headingId = props.children?.toString().replace(/\s+/g, "-").toLowerCase(); + return ( +

+ {props.children} + +

+ ); + }, + h3: (props) => { + const headingId = props.children?.toString().replace(/\s+/g, "-").toLowerCase(); + return ( +

+ {props.children} + +

+ ); + }, + }} + > + {readmeFileName} + + ); + } + newPackUidMap[key] = { + ...value, + readme: module ? (module as ReactElement) : undefined, + }; + } + }); + return newPackUidMap; +} + function getRegistries(packData: PackData, selectedVersion: string, selectedPackUid: string) { if (selectedVersion && !selectedVersion.endsWith(".x")) { const registryUid = packData.packUidMap[selectedPackUid]?.registryUid || ""; @@ -186,19 +195,28 @@ function getRegistries(packData: PackData, selectedVersion: string, selectedPack export default function PacksReadme() { try { const { packs, repositories } = usePluginData("plugin-packs-integrations") as PacksIntegrationsPluginData; - + const [fragmentIdentifier, setFragmentIdentifier] = useState(""); const [customReadme, setCustomReadme] = useState | null>(null); const [packName, setPackName] = useState(""); const [selectedPackUid, setSelectedPackUid] = useState(""); const { colorMode } = useColorMode(); const { defaultAlgorithm, darkAlgorithm } = theme; + const [selectedTabPane, setSelectedTabPane] = useState(""); const [selectedVersion, setSelectedVersion] = useState(""); const history = useHistory(); + const isBrowser = useIsBrowser(); useEffect(() => { - const searchParams = window ? new URLSearchParams(window.location.search) : null; - const pckName = searchParams?.get("pack") || ""; - setPackName(pckName); + let pckName = ""; + if (isBrowser) { + const searchParams = window ? new URLSearchParams(window.location.search) : null; + const hashLocationValue = window ? window.location.hash : ""; + pckName = searchParams?.get("pack") || ""; + setPackName(pckName); + if (hashLocationValue) { + setFragmentIdentifier(hashLocationValue); + } + } const importComponent = async () => { try { const module: MarkdownFile = await import(`../../../docs/docs-content/integrations/${pckName}.md`); @@ -223,7 +241,7 @@ export default function PacksReadme() { if (pack) { const packDataInfo: PackReadmeProps = { customDescription: pack.description, - packUidMap: pack.packUidMap, + packUidMap: processPackUiMap(pack.packUidMap), versions: pack.versions, title: pack.title, logoUrl: pack.logoUrl, @@ -252,8 +270,24 @@ export default function PacksReadme() { }, [packName]); useEffect(() => { - const searchParams = window ? new URLSearchParams(window.location.search) : null; + if (isBrowser && fragmentIdentifier) { + const timeoutId = setTimeout(() => { + const elementId = fragmentIdentifier.replace("#", ""); + const parent = document.getElementById?.(elementId); + parent?.querySelector?.("a")?.click(); + }, 1000); + return () => clearTimeout(timeoutId); + } + }, [fragmentIdentifier]); + + useEffect(() => { + let searchParams; + if (isBrowser) { + searchParams = new URLSearchParams(window.location.search); + } const urlParamVersion = searchParams?.get("version"); + const urlParamTag = searchParams?.get("tab"); + setSelectedTabPane(urlParamTag || "main"); const version = urlParamVersion || packData?.latestVersion || packData?.versions[0]?.title || ""; if (version && !version.endsWith(".x")) { const parentVersionObj = getParentVersion(version, packData); @@ -265,6 +299,59 @@ export default function PacksReadme() { } }, [packData]); + const renderTabs = () => { + const empty_icon_light = useBaseUrl("/img/empty_icon_table_light.svg"); + const empty_icon_dark = useBaseUrl("/img/empty_icon_table_dark.svg"); + const ReadMe = selectedPackUid ? packData.packUidMap[selectedPackUid]?.readme : null; + + const tabs = [ + ReadMe && { + label: `README`, + key: "main", + children: ReadMe, + }, + customReadme && { + label: `Additional Details`, + key: "custom", + children: customReadme, + }, + ].filter(Boolean) as { label: string; key: string; children: JSX.Element }[]; + if (tabs.length > 1) { + return ( +
+ { + setSelectedTabPane(key); + const parentVersion = getParentVersion(selectedVersion, packData)?.title || ""; + history.replace({ + search: `?pack=${packName}&version=${selectedVersion}&parent=${parentVersion}&tab=${key}`, + }); + }} + /> +
+ ); + } + if (tabs.length === 1) { + return tabs[0].children; + } + return ( +
+ +
No README found
+
+ ); + }; + return (
@@ -292,7 +379,8 @@ export default function PacksReadme() { setSelectedPackUid, (version) => getParentVersion(version, packData), history, - packName + packName, + selectedTabPane ) } treeData={renderVersionOptions(packData)} @@ -322,7 +410,7 @@ export default function PacksReadme() {
- {renderTabs(selectedPackUid, packData, customReadme)} + {renderTabs()}
diff --git a/src/components/Technologies/TechnologyCard.tsx b/src/components/Technologies/TechnologyCard.tsx index 173a2ba90e..970bd76d58 100644 --- a/src/components/Technologies/TechnologyCard.tsx +++ b/src/components/Technologies/TechnologyCard.tsx @@ -24,7 +24,7 @@ export default function TechnologyCard({ name, title, logoUrl, type, slug, versi versions?.find((tagVersion) => tagVersion.children.find((child) => child.title === version))?.title || ""; return (
- +
{title}