@digi-frontend/dgate-api-documentation 1.0.57 → 1.0.60

package/dist/types/context/SectionToggleContext.d.ts

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+export declare enum SectionEnum {
+    OVERVIEW = "overview",
+    RESOURCE = "resource",
+    API_SECTION = "apiSection",
+    TAG_SECTION = "tagSection",
+    ENDPOINTS_SECTION = "endpointsSection"
+}
+type SectionKey = `api_${string}_${SectionEnum}` | `api_${string}_${SectionEnum}_${string | number}` | `api_${string}_${SectionEnum}_${string | number}_${string | number}`;
+type ExpandedSections = Record<SectionKey, boolean>;
+interface SectionToggleContextType {
+    expandedSections: ExpandedSections;
+    toggleSection: (apiId: string, sections: ToggleSectionDescriptor[], options?: ToggleOptions) => void;
+    generateSectionKey: ({ apiId, type, index, id }: GenerateSectionKeyParams) => SectionKey;
+}
+interface SectionToggleProviderProps {
+    children: ReactNode;
+}
+export interface ToggleSectionDescriptor {
+    type: SectionEnum;
+    index?: string | number;
+    setTo?: boolean;
+    id?: string;
+}
+export interface ToggleOptions {
+    resetOthers?: boolean;
+    filterKeys?: SectionEnum[];
+}
+interface GenerateSectionKeyParams {
+    apiId: string;
+    type: SectionEnum;
+    index?: string | number;
+    id?: string | number;
+}
+export declare const useSectionToggle: () => SectionToggleContextType;
+export declare const SectionToggleProvider: ({ children }: SectionToggleProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/layout/docsComponents/DocsContent/DocsContent.d.ts

@@ -1,13 +1,12 @@
 import React from 'react';
 import './style.scss';
 import { EndpointData, OverviewData } from 'src/layout/docsLayout';
-declare const DocsContent: ({ data, activeType, setActiveItemData, setActiveType, setExpandedSections, onProductNavigate, }: {
+declare const DocsContent: ({ data, activeType, setActiveItemData, setActiveType, onProductNavigate, apis, }: {
     data: OverviewData | EndpointData;
     activeType: "OVERVIEW" | "ENDPOINT";
     setActiveItemData: React.Dispatch<React.SetStateAction<OverviewData | EndpointData>>;
     setActiveType: React.Dispatch<React.SetStateAction<"OVERVIEW" | "ENDPOINT">>;
-    setExpandedSections: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
-    toggleSection: (apiId: string, sectionId: string, resetOthers?: boolean, key?: string[]) => void;
     onProductNavigate?: (productId: number) => void;
+    apis: OverviewData[];
 }) => import("react/jsx-runtime").JSX.Element;
 export default DocsContent;

package/dist/types/layout/docsComponents/DocsContent/EndpointPage/index.d.ts

@@ -1,5 +1,7 @@
+import { EndpointData, OverviewData } from 'src/layout/docsLayout';
 import './style.scss';
-import { EndpointData } from 'src/layout/docsLayout';
-export declare const EndpointPage: ({ data }: {
+export declare const EndpointPage: ({ data, setActiveType, setActiveItemData, }: {
     data: EndpointData;
+    setActiveType: React.Dispatch<React.SetStateAction<"OVERVIEW" | "ENDPOINT">>;
+    setActiveItemData: React.Dispatch<React.SetStateAction<OverviewData | EndpointData>>;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/types/layout/docsComponents/DocsContent/OverviewPage/index.d.ts

@@ -1,9 +1,9 @@
 import './style.scss';
 import { EndpointData, OverviewData } from 'src/layout/docsLayout';
-export declare const OverviewPage: ({ data, setActiveItemData, setActiveType, setExpandedSections, onProductNavigate, }: {
+export declare const OverviewPage: ({ data, setActiveItemData, setActiveType, onProductNavigate, apis, }: {
     data: OverviewData;
     setActiveItemData: React.Dispatch<React.SetStateAction<OverviewData | EndpointData>>;
     setActiveType: React.Dispatch<React.SetStateAction<"OVERVIEW" | "ENDPOINT">>;
-    setExpandedSections: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
     onProductNavigate?: (productId: number) => void;
+    apis: OverviewData[];
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/types/layout/docsComponents/DocsHeader/DocsHeader.d.ts

@@ -1,3 +1,6 @@
-import React from 'react';
-declare const DocsHeader: React.FC;
+import { OverviewData } from '../../../../src/layout/docsLayout';
+declare const DocsHeader: ({ transformedOpenApis, updateFilteredData, }: {
+    transformedOpenApis: OverviewData[];
+    updateFilteredData: (filteredItems: OverviewData[], isReset?: boolean) => void;
+}) => import("react/jsx-runtime").JSX.Element;
 export default DocsHeader;

package/dist/types/layout/docsComponents/DocsSideMenuTree/DocsSideMenuTree.d.ts

@@ -1,19 +1,18 @@
 import './style.scss';
 import React from 'react';
 import { EndpointData, OverviewData } from 'src/layout/docsLayout';
-declare const DocsSideMenuTree: ({ apis, setActiveItemData, activeItemData, activeType, expandedSections, setExpandedSections, isFirstApiExpanded, setIsFirstApiExpanded, setActiveType, toggleSection, canSelectFirstApi, canFocusSection, setCanFocusSection, }: {
+declare const DocsSideMenuTree: ({ apis, setActiveItemData, isFirstApiExpanded, setIsFirstApiExpanded, setActiveType, canSelectFirstApi, canFocusSection, setCanFocusSection, activeApiId, setCanSelectFirstApi, }: {
     apis: OverviewData[];
     setActiveItemData: React.Dispatch<React.SetStateAction<OverviewData | EndpointData>>;
     activeItemData: OverviewData | EndpointData;
-    expandedSections: Record<string, boolean>;
-    setExpandedSections: (newSections: Record<string, boolean>) => void;
     isFirstApiExpanded: boolean;
     setIsFirstApiExpanded: React.Dispatch<React.SetStateAction<boolean>>;
     setActiveType: React.Dispatch<React.SetStateAction<"OVERVIEW" | "ENDPOINT">>;
     activeType: "OVERVIEW" | "ENDPOINT";
-    toggleSection: (apiId: string, sectionId: string, resetOthers?: boolean, key?: string[]) => void;
     canSelectFirstApi?: boolean;
     canFocusSection: boolean;
     setCanFocusSection: React.Dispatch<React.SetStateAction<boolean>>;
+    activeApiId: string;
+    setCanSelectFirstApi: React.Dispatch<React.SetStateAction<boolean>>;
 }) => import("react/jsx-runtime").JSX.Element;
 export default DocsSideMenuTree;

package/dist/types/layout/docsLayout.d.ts

@@ -18,12 +18,7 @@ export interface TagData {
     requestBody?: RequestBody;
 }
 export interface EndpointData extends TagData {
-    api: {
-        id: string;
-        description: string;
-        title: string;
-        version: string;
-    };
+    api: OverviewData;
 }
 export interface OverviewData extends Omit<ApiSpecModel, 'metaData'> {
     description: string;

package/dist/types/types/docsLayout.type.d.ts

@@ -0,0 +1,7 @@
+export declare enum SectionEnum {
+    OVERVIEW = "overview",
+    RESOURCE = "resource",
+    API_SECTION = "apiSection",
+    TAG_SECTION = "tagSection",
+    ENDPOINTS_SECTION = "endpointsSection"
+}

package/dist/types/utils/index.d.ts

@@ -1 +1,2 @@
 export declare const copyToClipboard: (text: string) => Promise<any>;
+export declare const capitalizeFirstLetter: (text: string) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digi-frontend/dgate-api-documentation",
-  "version": "1.0.57",
+  "version": "1.0.60",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "types": "dist/types/index.d.ts",

package/src/components/InfoForm/InfoForm.tsx

@@ -409,8 +409,9 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
         }}
         onCancel={{
           text: 'Cancel',
-          color: 'normal',
+          color: 'action',
           fullWidth: true,
+          variant: 'outlined',
         }}
         onClose={() => setOpenDeleteDialog(false)}
         open={openDeleteDialog}

package/src/components/table/table.tsx

@@ -251,9 +251,7 @@ const ParamterTable = ({
 
                 <td key={'parameter enum'}>
                   <div data-id="TEXT_DESCRIPTION" className="tableData">
-                    {values?.schema &&
-                    values?.schema?.type?.toLowerCase() != 'array' &&
-                    values?.schema?.type?.toLowerCase() != 'object' ? (
+                    {!!values?.schema ? (
                       <Tooltip
                         disabled={
                           values?.schema?.type?.toLowerCase() == 'array' ||

package/src/context/SectionToggleContext.tsx

@@ -0,0 +1,121 @@
+import React, { createContext, useContext, useState, ReactNode, useMemo, useCallback } from 'react'
+
+export enum SectionEnum {
+  OVERVIEW = 'overview',
+  RESOURCE = 'resource',
+  API_SECTION = 'apiSection',
+  TAG_SECTION = 'tagSection',
+  ENDPOINTS_SECTION = 'endpointsSection',
+}
+
+type SectionKey =
+  | `api_${string}_${SectionEnum}`
+  | `api_${string}_${SectionEnum}_${string | number}`
+  | `api_${string}_${SectionEnum}_${string | number}_${string | number}`
+type ExpandedSections = Record<SectionKey, boolean>
+
+interface SectionToggleContextType {
+  expandedSections: ExpandedSections
+  toggleSection: (
+    apiId: string,
+    sections: ToggleSectionDescriptor[],
+    options?: ToggleOptions
+  ) => void
+  generateSectionKey: ({ apiId, type, index, id }: GenerateSectionKeyParams) => SectionKey
+}
+
+interface SectionToggleProviderProps {
+  children: ReactNode
+}
+
+export interface ToggleSectionDescriptor {
+  type: SectionEnum
+  index?: string | number
+  setTo?: boolean
+  id?: string
+}
+
+export interface ToggleOptions {
+  resetOthers?: boolean
+  filterKeys?: SectionEnum[]
+}
+
+interface GenerateSectionKeyParams {
+  apiId: string
+  type: SectionEnum
+  index?: string | number
+  id?: string | number
+}
+
+const SectionToggleContext = createContext<SectionToggleContextType | null>(null)
+
+export const useSectionToggle = () => {
+  const context = useContext(SectionToggleContext)
+  if (!context) {
+    throw new Error('useSectionToggle must be used within SectionToggleProvider')
+  }
+  return context
+}
+
+export const SectionToggleProvider = ({ children }: SectionToggleProviderProps) => {
+  const [expandedSections, setExpandedSections] = useState<ExpandedSections>({})
+
+  const generateSectionKey = ({ apiId, type, index, id }: GenerateSectionKeyParams): SectionKey => {
+    let key = `api_${apiId}_${type}`
+
+    if (index !== undefined) key += `_${index}`
+    if (id !== undefined) key += `_${id}`
+
+    return key as SectionKey
+  }
+
+  const toggleSection = useCallback(
+    (apiId: string, sections: ToggleSectionDescriptor[], options: ToggleOptions = {}) => {
+      const { resetOthers = false, filterKeys = [] } = options
+
+      const sectionIds = sections.map(({ type, index, id }) =>
+        generateSectionKey({ apiId, type, index, id })
+      )
+
+      const sectionToggles = Object.fromEntries(
+        sections.map(({ type, index, setTo, id }) => {
+          const sectionId = generateSectionKey({ apiId, type, index, id })
+          const currentValue = expandedSections[sectionId]
+
+          return [sectionId, setTo !== undefined ? setTo : !currentValue]
+        })
+      )
+
+      if (resetOthers && filterKeys.length > 0) {
+        const filtered = Object.fromEntries(
+          Object.entries(expandedSections).filter(([key]) => {
+            const shouldKeep = key.includes(apiId) && !filterKeys.some((k) => key.includes(k))
+            return shouldKeep || sectionIds.includes(key as SectionKey)
+          })
+        )
+        const newState = { ...filtered, ...sectionToggles }
+        setExpandedSections(newState)
+      } else {
+        setExpandedSections((prev) => {
+          const next = { ...prev, ...sectionToggles }
+
+          return next
+        })
+      }
+    },
+    [expandedSections]
+  )
+
+  const contextValue = useMemo(
+    () => ({
+      expandedSections,
+      toggleSection,
+      generateSectionKey,
+    }),
+    [expandedSections, toggleSection]
+  )
+
+  return (
+    <SectionToggleContext.Provider value={contextValue}>{children}</SectionToggleContext.Provider>
+  )
+}

package/src/helpers/docs.helper.ts

@@ -10,7 +10,7 @@ export const transformOpenApiToDocs = (api: ApiSpecModel): OverviewData => {
       : api.metaData.openApiJson
 
   const groupedPathsByTags: Record<string, TagData[]> = { default: [] }
-  const validTags = new Set(parsedOpenApi.tags.map(({ name }) => name))
+  const validTags = new Set(parsedOpenApi?.tags?.map(({ name }) => name) || [])
 
   for (const [path, methods] of Object.entries(parsedOpenApi.paths)) {
     for (const [method, methodData] of Object.entries(methods)) {

package/src/layout/docsComponents/DocsAside/DocsAside.tsx

@@ -28,7 +28,7 @@ const DocsAside = ({ data }: { data: EndpointData }) => {
   const stringifyRequestBody = () => {
     if (data?.requestBody?.content) {
       const contentKey = Object.keys(data?.requestBody?.content)[0]
-      return JSON.stringify(data?.requestBody?.content[contentKey], null, 2)
+      return JSON.stringify(data?.requestBody?.content[contentKey]?.schema?.properties, null, 2)
     } else {
       return '{}'
     }
@@ -37,7 +37,7 @@ const DocsAside = ({ data }: { data: EndpointData }) => {
   const stringifyResponseBody = () => {
     if (currentResponse?.data) {
       const contentKey = Object.keys(currentResponse.data?.content)[0]
-      return JSON.stringify(currentResponse.data?.content[contentKey], null, 2)
+      return JSON.stringify(currentResponse.data?.content[contentKey]?.schema?.properties, null, 2)
     } else {
       return '{}'
     }
@@ -52,7 +52,7 @@ const DocsAside = ({ data }: { data: EndpointData }) => {
         </span>{' '}
         <span>{data.path}</span>
       </h4>
-      {data?.requestBody?.content && (
+      {!['delete', 'get'].includes(data.method) && data?.requestBody?.content && (
         <div className={styles.codeboxSection}>
           <div className={styles.codeboxHeader}>
             <h6 className={styles.codeboxTitle}>Request</h6>

package/src/layout/docsComponents/DocsAside/style.module.scss

@@ -103,11 +103,11 @@
 
   :global(.multiSelectGroup .selectDisplay),
   :global(.multiSelectGroup) {
-    width: 6.25rem;
-    height: 1.5rem;
+    width: 6.25rem !important;
+    height: 1.5rem !important;
   }
 
   :global(.multiSelectGroup .selectDisplay .displayValueContainer .iconsContainer) {
-    padding-right: 0.75rem;
+    padding-right: 0.75rem !important;
   }
 }

package/src/layout/docsComponents/DocsContent/DocsContent.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useRef } from 'react'
 import './style.scss'
 import { OverviewPage } from './OverviewPage'
 import { EndpointPage } from './EndpointPage'
@@ -9,29 +9,40 @@ const DocsContent = ({
   activeType,
   setActiveItemData,
   setActiveType,
-  setExpandedSections,
   onProductNavigate,
+  apis,
 }: {
   data: OverviewData | EndpointData
   activeType: 'OVERVIEW' | 'ENDPOINT'
   setActiveItemData: React.Dispatch<React.SetStateAction<OverviewData | EndpointData>>
   setActiveType: React.Dispatch<React.SetStateAction<'OVERVIEW' | 'ENDPOINT'>>
-  setExpandedSections: React.Dispatch<React.SetStateAction<Record<string, boolean>>>
-  toggleSection: (apiId: string, sectionId: string, resetOthers?: boolean, key?: string[]) => void
   onProductNavigate?: (productId: number) => void
+  apis: OverviewData[]
 }) => {
+  const containerRef = useRef(null)
+
+  useEffect(() => {
+    // This will scroll to the top when changing the overview
+    if (activeType === 'OVERVIEW' && containerRef?.current) {
+      containerRef?.current?.scrollTo({ top: 0, behavior: 'smooth' })
+    }
+  }, [data, activeType])
   return (
-    <main>
+    <main ref={containerRef}>
       {activeType === 'OVERVIEW' ? (
         <OverviewPage
           data={data as OverviewData}
           setActiveItemData={setActiveItemData}
           setActiveType={setActiveType}
-          setExpandedSections={setExpandedSections}
           onProductNavigate={onProductNavigate}
+          apis={apis}
         />
       ) : (
-        <EndpointPage data={data as EndpointData} />
+        <EndpointPage
+          data={data as EndpointData}
+          setActiveType={setActiveType}
+          setActiveItemData={setActiveItemData}
+        />
       )}
     </main>
   )

package/src/layout/docsComponents/DocsContent/EndpointPage/index.tsx

@@ -1,4 +1,3 @@
-import './style.scss'
 import SVGLoader from '../../../../components/SVGLoader/SVGLoader'
 import {
   ArrowBack,
@@ -8,14 +7,26 @@ import {
 } from '../../../../assets/icons/index'
 import { SelectGroup } from 'digitinary-ui'
 import { useEffect, useState } from 'react'
-import { EndpointData } from 'src/layout/docsLayout'
+import { EndpointData, OverviewData } from 'src/layout/docsLayout'
 import { handleStatusColor } from '../../../../helpers/methodAccordion.helper'
 import { httpStatusCodes } from '../../../../constants/index'
 import styles from '../../Codebox/style.module.scss'
 import Tooltip from '../../../../components/Tooltip/Tooltip'
+import './style.scss'
+import { SectionEnum, useSectionToggle } from '../../../../../src/context/SectionToggleContext'
+import { capitalizeFirstLetter } from '../../../../../src/utils'
 
-export const EndpointPage = ({ data }: { data: EndpointData }) => {
+export const EndpointPage = ({
+  data,
+  setActiveType,
+  setActiveItemData,
+}: {
+  data: EndpointData
+  setActiveType: React.Dispatch<React.SetStateAction<'OVERVIEW' | 'ENDPOINT'>>
+  setActiveItemData: React.Dispatch<React.SetStateAction<OverviewData | EndpointData>>
+}) => {
   const [activeTab, setActiveTab] = useState('header')
+  const { toggleSection } = useSectionToggle()
 
   const httpStatusCodeOptions = httpStatusCodes.map((code) => ({
     label: (
@@ -47,7 +58,17 @@ export const EndpointPage = ({ data }: { data: EndpointData }) => {
   return (
     <div className="api-details-expanded">
       <div className="test-button">
-        <button className="back-button" onClick={() => window.history.back()}>
+        <button
+          className="back-button"
+          onClick={() => {
+            toggleSection(data.api.apiSpecId, [{ type: SectionEnum.OVERVIEW, setTo: true }], {
+              resetOthers: true,
+              filterKeys: [SectionEnum.RESOURCE],
+            })
+            setActiveType('OVERVIEW')
+            setActiveItemData(data.api)
+          }}
+        >
           <SVGLoader src={ArrowBack} />
         </button>
 
@@ -55,8 +76,8 @@ export const EndpointPage = ({ data }: { data: EndpointData }) => {
           <button className="disabled">Test</button>
         </Tooltip>
       </div>
-      <h3> Api Name</h3>
-      <h1 className="api-title">{data?.api?.title}</h1>
+      <h3>{data.api.title}</h3>
+      <h1 className="api-title">{data?.summary}</h1>
       <div className="url-box">
         <div style={{ textAlign: 'center' }}>
           <span className={`method-label ${data?.method?.toLowerCase()}`}>{data.method}</span>
@@ -67,7 +88,7 @@ export const EndpointPage = ({ data }: { data: EndpointData }) => {
         </span>
       </div>
 
-      <p className="api-desc">{data?.api?.description || 'No Description'}</p>
+      <p className="api-desc">{data?.description || 'No Description'}</p>
 
       <h3>Request</h3>
 
@@ -108,7 +129,14 @@ export const EndpointPage = ({ data }: { data: EndpointData }) => {
                     <tr key={index}>
                       <td>{row.name}</td>
                       <td>{row.required ? 'True' : 'False'}</td>
-                      <td>{row.schema?.type || '-'}</td>
+                      <td style={{ textTransform: 'capitalize' }}>
+                        <span>{row?.schema?.type || '-'}</span>
+                        {row?.schema?.type === 'array' && row?.schema?.items?.type && (
+                          <span style={{ color: '#616874', fontSize: '0.75rem' }}>
+                            _{capitalizeFirstLetter(row.schema?.items?.type)}
+                          </span>
+                        )}
+                      </td>
                       <td>{Array.isArray(row.schema?.enum) ? row.schema.enum.join(' / ') : '-'}</td>
                       <td className="desc-cell">
                         <div className={`desc-text ${expanded === index ? 'expanded' : ''}`}>
@@ -179,11 +207,19 @@ export const EndpointPage = ({ data }: { data: EndpointData }) => {
             <tbody>
               {!!headersList &&
                 Object.keys(headersList) &&
-                Object.keys(headersList).map((key, index) => (
+                Object.keys(headersList).map((key) => (
                   <tr>
                     <td>{key}</td>
                     <td>{headersList[key]?.required.toString()}</td>
-                    <td>{headersList[key]?.schema?.type}</td>
+                    <td style={{ textTransform: 'capitalize' }}>
+                      <span>{headersList[key]?.schema?.type || '-'}</span>
+                      {headersList[key]?.schema?.type === 'array' &&
+                        headersList[key]?.schema?.items?.type && (
+                          <span style={{ color: '#616874', fontSize: '0.75rem' }}>
+                            _{capitalizeFirstLetter(headersList[key]?.schema?.items?.type)}
+                          </span>
+                        )}
+                    </td>
                     <td>{headersList[key]?.schema?.enum?.join('/')}</td>
                     <td>{headersList[key]?.description}</td>
                   </tr>

package/src/layout/docsComponents/DocsContent/OverviewPage/index.tsx

@@ -2,20 +2,23 @@ import './style.scss'
 import SVGLoader from '../../../../components/SVGLoader/SVGLoader'
 import { arrowRightGray, CopySticker } from '../../../../assets/icons/index'
 import { EndpointData, OverviewData } from 'src/layout/docsLayout'
+import { SectionEnum, useSectionToggle } from '../../../../../src/context/SectionToggleContext'
 
 export const OverviewPage = ({
   data,
   setActiveItemData,
   setActiveType,
-  setExpandedSections,
   onProductNavigate,
+  apis,
 }: {
   data: OverviewData
   setActiveItemData: React.Dispatch<React.SetStateAction<OverviewData | EndpointData>>
   setActiveType: React.Dispatch<React.SetStateAction<'OVERVIEW' | 'ENDPOINT'>>
-  setExpandedSections: React.Dispatch<React.SetStateAction<Record<string, boolean>>>
   onProductNavigate?: (productId: number) => void
+  apis: OverviewData[]
 }) => {
+  const { toggleSection } = useSectionToggle()
+
   const handleVersionClick = (verObj) => {
     if (verObj.apiSpecId === data.apiSpecId) {
       setActiveType('OVERVIEW')
@@ -28,30 +31,26 @@ export const OverviewPage = ({
       return
     }
 
-    const newData = {
-      ...data,
-      ...matchedVersion,
-      version: matchedVersion.metaData?.version || '',
-      title: matchedVersion.name || '',
-      apiSpecId: matchedVersion.apiSpecId,
-    }
-
-    setActiveItemData({
-      ...newData,
-      api: {
-        id: newData.apiSpecId,
-        title: newData.title,
-        description: newData.description,
-        version: newData.version,
-        ...newData,
-      },
-    })
+    const matchedApi = apis.find((api) => api.apiSpecId === matchedVersion.apiSpecId)
+    setActiveItemData(matchedApi)
 
     setActiveType('OVERVIEW')
-    setExpandedSections((prev) => ({
-      ...prev,
-      [`api-${newData.apiSpecId}-section`]: true,
-    }))
+    toggleSection(
+      matchedApi.apiSpecId,
+      [
+        { type: SectionEnum.API_SECTION, setTo: true },
+        { type: SectionEnum.OVERVIEW, setTo: true },
+      ],
+      {
+        resetOthers: true,
+        filterKeys: [
+          SectionEnum.OVERVIEW,
+          SectionEnum.API_SECTION,
+          SectionEnum.ENDPOINTS_SECTION,
+          SectionEnum.TAG_SECTION,
+        ],
+      }
+    )
   }
 
   const handleClick = (endpoint) => {
@@ -67,12 +66,20 @@ export const OverviewPage = ({
     })
     setActiveType('ENDPOINT')
 
-    setExpandedSections((prev) => ({
-      ...prev,
-      [`api-${data.apiSpecId}-section`]: true,
-      [`api-${data.apiSpecId}-endpoints`]: true,
-      [`api-${data.apiSpecId}-resource-${endpoint.id}`]: true,
-    }))
+    const tagSectionIndex = Object.entries(data.tags)
+      .sort(([a], [b]) => (a === 'default' ? 1 : b === 'default' ? -1 : a.localeCompare(b)))
+      .findIndex(([_, tagData]) => tagData.find((t) => t.id === endpoint.id))
+
+    toggleSection(
+      data.apiSpecId,
+      [
+        { type: SectionEnum.API_SECTION, setTo: true },
+        { type: SectionEnum.ENDPOINTS_SECTION, setTo: true },
+        { type: SectionEnum.TAG_SECTION, setTo: true, index: tagSectionIndex },
+        { type: SectionEnum.RESOURCE, setTo: true, id: endpoint.id },
+      ],
+      { resetOthers: true, filterKeys: [SectionEnum.OVERVIEW] }
+    )
   }
 
   return (

package/src/layout/docsComponents/DocsHeader/DocsHeader.tsx

@@ -13,13 +13,14 @@ import Tooltip from '../../../components/Tooltip/Tooltip'
 import CommonDialog from '../../../components/dialog/index'
 import { METHOD_OPTIONS } from '../../../constants/methods.constant'
 import styles from './DocsHeader.module.scss'
+import { OverviewData } from '../../../../src/layout/docsLayout'
 
-const DocsHeader: React.FC = ({
+const DocsHeader = ({
   transformedOpenApis,
   updateFilteredData,
 }: {
-  transformedOpenApis: any[]
-  updateFilteredData: any
+  transformedOpenApis: OverviewData[]
+  updateFilteredData: (filteredItems: OverviewData[], isReset?: boolean) => void
 }) => {
   const [showSearchFilter, setShowSearchFilter] = useState<boolean>(false)
   const [apiName, setApiName] = useState<string>('')