From fa8c9f360b374d434de04eb84178d600246db6fe Mon Sep 17 00:00:00 2001 From: Charis <26616127+charislam@users.noreply.github.com> Date: Mon, 25 Mar 2024 10:31:00 -0400 Subject: [PATCH] fix: docs sidebar collapse and highlight (#22108) * fix: make sidebar collapse work when hash is selected * fix: persist sidebar highlight when hash is selected * chore: cleanup * fix: fix enterprise sso case --- .../NavigationMenu.constants.ts | 2 +- .../NavigationMenu/NavigationMenu.utils.ts | 4 +++ .../NavigationMenuGuideList.tsx | 36 ++++++------------- .../NavigationMenuGuideListItems.tsx | 12 ++++--- .../{sso => enterprise-sso}/auth-sso-saml.mdx | 0 apps/www/lib/redirects.js | 5 +++ 6 files changed, 27 insertions(+), 32 deletions(-) rename apps/docs/content/guides/auth/{sso => enterprise-sso}/auth-sso-saml.mdx (100%) diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts index 34412d0ec9c..c36bc455b6f 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts @@ -592,7 +592,7 @@ export const auth = { items: [ { name: 'SAML 2.0', - url: '/guides/auth/sso/auth-sso-saml', + url: '/guides/auth/enterprise-sso/auth-sso-saml', }, ], }, diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.utils.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.utils.ts index 62f5b665d7a..6d7ce92302d 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.utils.ts +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.utils.ts @@ -2,6 +2,10 @@ import { useEffect, useState } from 'react' import { ICommonItem } from '~/components/reference/Reference.types' import { Json } from '~/types' +export function getPathWithoutHash(relativePath: string) { + return new URL(relativePath, 'http://placeholder').pathname +} + /** * Recursively filter common sections and their sub items based on * what is available in their spec diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx index a07e4eb98e7..97e96e4f842 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx @@ -1,39 +1,23 @@ import * as Accordion from '@radix-ui/react-accordion' import { useRouter } from 'next/router' -import React from 'react' -import NavigationMenuGuideListItems from './NavigationMenuGuideListItems' -import * as NavItems from './NavigationMenu.constants' -interface Props { - id: string - collapsible?: boolean - value?: string[] -} -const NavigationMenuGuideList: React.FC = ({ id, value }) => { - const router = useRouter() +import * as NavItems from './NavigationMenu.constants' +import { getPathWithoutHash } from './NavigationMenu.utils' +import NavigationMenuGuideListItems from './NavigationMenuGuideListItems' + +const NavigationMenuGuideList = ({ id }: { id: string }) => { + const path = useRouter().asPath + const url = getPathWithoutHash(path) + const firstLevelRoute = url?.split('/')?.slice(0, 4)?.join('/') const menu = NavItems[id] - // get url - const url = router.asPath - - // We need to decide how deep we want the menu to be for matching urls - // if the links are really deep, we don't want to match all the way out - // But we need to reach out further to make the structure of /resources/postgres/ work - // look at /resources/postgres/ vs /auth/phone-login for how these are different - let firstLevelRoute - if (url.includes('resources/postgres/')) { - firstLevelRoute = url?.split('/')?.slice(0, 5)?.join('/') - } else { - firstLevelRoute = url?.split('/')?.slice(0, 4)?.join('/') - } - return ( diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx index a4385ad4162..0a2a7d6f9fc 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx @@ -1,11 +1,13 @@ +import * as Accordion from '@radix-ui/react-accordion' +import { ChevronLeft } from 'lucide-react' import { useTheme } from 'next-themes' import Image from 'next/legacy/image' import Link from 'next/link' import { useRouter } from 'next/router' import React, { useEffect, useRef } from 'react' -import { IconChevronLeft } from '~/../../packages/ui' -import * as Accordion from '@radix-ui/react-accordion' + import HomeMenuIconPicker from './HomeMenuIconPicker' +import { getPathWithoutHash } from './NavigationMenu.utils' const HeaderLink = React.memo(function HeaderLink(props: { title: string @@ -30,7 +32,7 @@ const HeaderLink = React.memo(function HeaderLink(props: { const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any) { const router = useRouter() const { resolvedTheme } = useTheme() - const activeItem = props.subItem.url === router.asPath + const activeItem = props.subItem.url === getPathWithoutHash(router.asPath) const activeItemRef = useRef(null) const LinkContainer = (props) => { @@ -97,7 +99,7 @@ const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any href={`${subSubItem.url}`} className={[ 'cursor-pointer transition text-sm', - subSubItem.url === router.asPath + subSubItem.url === getPathWithoutHash(router.asPath) ? 'text-brand' : 'hover:text-brand text-foreground-lighter', ].join(' ')} @@ -151,7 +153,7 @@ const Content = (props) => { >
- +
Back to Home diff --git a/apps/docs/content/guides/auth/sso/auth-sso-saml.mdx b/apps/docs/content/guides/auth/enterprise-sso/auth-sso-saml.mdx similarity index 100% rename from apps/docs/content/guides/auth/sso/auth-sso-saml.mdx rename to apps/docs/content/guides/auth/enterprise-sso/auth-sso-saml.mdx diff --git a/apps/www/lib/redirects.js b/apps/www/lib/redirects.js index 8d02a298a6d..d1999afa167 100644 --- a/apps/www/lib/redirects.js +++ b/apps/www/lib/redirects.js @@ -2398,4 +2398,9 @@ module.exports = [ source: '/docs/learn/auth-deep-dive/auth-google-oauth', destination: '/docs/guides/auth/auth-deep-dive/auth-google-oauth', }, + { + permanent: true, + source: '/docs/guides/auth/sso/auth-sso-saml', + destination: '/guides/auth/enterprise-sso/auth-sso-saml', + }, ]