Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PEM-6153-fixed the fragment url to follow the actual content #4697

Merged
merged 11 commits into from
Dec 4, 2024
Merged

PEM-6153-fixed the fragment url to follow the actual content #4697

Changes from 3 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
526b3e1
PEM-6153-fixed the fragment url to follow the actual content
nage1234 Nov 13, 2024
9c55eb3
ci: auto-formatting prettier issues
nage1234 Nov 13, 2024
208e8a5
changed the click as scrollIntoView
nage1234 Nov 18, 2024
948621d
reverting back to click
nage1234 Nov 19, 2024
d137054
fixed the fragment url for main Readme as well
nage1234 Nov 27, 2024
ad6d456
ci: auto-formatting prettier issues
nage1234 Nov 27, 2024
f4d84cb
cleaned up
nage1234 Nov 27, 2024
d65ff46
ci: auto-formatting prettier issues
nage1234 Nov 27, 2024
f680772
addressed the review comments
nage1234 Nov 28, 2024
2e4c33c
Merge branch 'master' into PEM-6153-nageswari
karl-cardenas-coding Dec 3, 2024
041f1cc
added fragment link support for h1 as well
nage1234 Dec 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 21 additions & 4 deletions src/components/PacksReadme/PacksReadme.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,12 @@ function renderVersionOptions(packData: PackData) {
}));
}

function renderTabs(selectedPackUid: string, packData: PackData, customReadme: ReactElement<any, any> | null) {
function renderTabs(
selectedPackUid: string,
packData: PackData,
customReadme: ReactElement<any, any> | null,
fragmentIdentifier: string
) {
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 : "";
Expand All @@ -129,7 +134,7 @@ function renderTabs(selectedPackUid: string, packData: PackData, customReadme: R

if (tabs.length > 1) {
return (
<Tabs defaultActiveKey="1">
<Tabs defaultActiveKey={fragmentIdentifier ? "2" : "1"}>
{tabs.map((item) => (
<Tabs.TabPane tab={item.label} key={item.key}>
{item.children}
Expand Down Expand Up @@ -186,7 +191,7 @@ 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<string>("");
const [customReadme, setCustomReadme] = useState<ReactElement<any, any> | null>(null);
const [packName, setPackName] = useState<string>("");
const [selectedPackUid, setSelectedPackUid] = useState<string>("");
Expand All @@ -197,6 +202,7 @@ export default function PacksReadme() {

useEffect(() => {
const searchParams = window ? new URLSearchParams(window.location.search) : null;
const hashLocationValue = window ? window.location.hash : "";
const pckName = searchParams?.get("pack") || "";
setPackName(pckName);
const importComponent = async () => {
Expand All @@ -208,6 +214,9 @@ export default function PacksReadme() {
<PackReadMeComponent />
</div>
);
if (hashLocationValue) {
setFragmentIdentifier(hashLocationValue);
}
} catch (error) {
console.error("Error importing custom readme component for pack. Additional information follows: \n", error);
setCustomReadme(null);
Expand All @@ -218,6 +227,14 @@ export default function PacksReadme() {
});
}, []);

useEffect(() => {
if (document && fragmentIdentifier) {
const elementId = fragmentIdentifier.replace("#", "");
const parent = document.getElementById?.(elementId);
parent?.querySelector?.("a")?.scrollIntoView();
}
}, [fragmentIdentifier]);

const packData: PackData = useMemo(() => {
const pack = packs.find((pack) => pack.name === packName);
if (pack) {
Expand Down Expand Up @@ -322,7 +339,7 @@ export default function PacksReadme() {
</div>
<div className={styles.tabPane}>
<ConfigProvider theme={{ algorithm: colorMode === "dark" ? darkAlgorithm : defaultAlgorithm }}>
{renderTabs(selectedPackUid, packData, customReadme)}
{renderTabs(selectedPackUid, packData, customReadme, fragmentIdentifier)}
</ConfigProvider>
</div>
</div>
Expand Down