From e16fa8003046c7e1f5039de56b4971f752cfa50b Mon Sep 17 00:00:00 2001
From: Junghyun Colin Kim <colin.kim@groundx.xyz>
Date: Fri, 26 Nov 2021 19:44:35 +0900
Subject: [PATCH] Use an option usePathInSidebar

If this option is enabled, it displays a path in the sidebar instead of
summary.

Usage:

```js
                <RedocStandalone
                spec={props.spec}
                options={{
                    scrollYOffset:'.navbar',
                    nativeScrollbars: true,
                    usePathInSidebar:true
                }}
```
---
 src/components/SideMenu/MenuItem.tsx   | 6 +++---
 src/services/MenuStore.ts              | 1 +
 src/services/RedocNormalizedOptions.ts | 3 +++
 src/services/models/Group.model.ts     | 3 +++
 src/services/models/Operation.ts       | 4 ++++
 5 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/SideMenu/MenuItem.tsx b/src/components/SideMenu/MenuItem.tsx
index 4597bec6..11be6e37 100644
--- a/src/components/SideMenu/MenuItem.tsx
+++ b/src/components/SideMenu/MenuItem.tsx
@@ -45,8 +45,8 @@ export class MenuItem extends React.Component<MenuItemProps> {
           <OperationMenuItemContent {...this.props} item={item as OperationModel} />
         ) : (
           <MenuItemLabel depth={item.depth} active={item.active} type={item.type} ref={this.ref}>
-            <MenuItemTitle title={item.name}>
-              {item.name}
+            <MenuItemTitle title={item.sidebarName}>
+              {item.sidebarName}
               {this.props.children}
             </MenuItemTitle>
             {(item.depth > 0 && item.items.length > 0 && (
@@ -96,7 +96,7 @@ export class OperationMenuItemContent extends React.Component<OperationMenuItemC
           <OperationBadge type={item.httpVerb}>{shortenHTTPVerb(item.httpVerb)}</OperationBadge>
         )}
         <MenuItemTitle width="calc(100% - 38px)">
-          {item.name}
+          {item.sidebarName}
           {this.props.children}
         </MenuItemTitle>
       </MenuItemLabel>
diff --git a/src/services/MenuStore.ts b/src/services/MenuStore.ts
index 65f6c7c8..770c00d5 100644
--- a/src/services/MenuStore.ts
+++ b/src/services/MenuStore.ts
@@ -16,6 +16,7 @@ export interface IMenuItem {
   id: string;
   absoluteIdx?: number;
   name: string;
+  sidebarName: string;
   description?: string;
   depth: number;
   active: boolean;
diff --git a/src/services/RedocNormalizedOptions.ts b/src/services/RedocNormalizedOptions.ts
index fcba8784..283eba90 100644
--- a/src/services/RedocNormalizedOptions.ts
+++ b/src/services/RedocNormalizedOptions.ts
@@ -22,6 +22,7 @@ export interface RedocRawOptions {
   disableSearch?: boolean | string;
   onlyRequiredInSamples?: boolean | string;
   showExtensions?: boolean | string | string[];
+  usePathInSidebar?: boolean;
   hideSingleRequestSampleTab?: boolean | string;
   menuToggle?: boolean | string;
   jsonSampleExpandLevel?: number | string | 'all';
@@ -189,6 +190,7 @@ export class RedocNormalizedOptions {
   disableSearch: boolean;
   onlyRequiredInSamples: boolean;
   showExtensions: boolean | string[];
+  usePathInSidebar: boolean;
   hideSingleRequestSampleTab: boolean;
   menuToggle: boolean;
   jsonSampleExpandLevel: number;
@@ -247,6 +249,7 @@ export class RedocNormalizedOptions {
     this.disableSearch = argValueToBoolean(raw.disableSearch);
     this.onlyRequiredInSamples = argValueToBoolean(raw.onlyRequiredInSamples);
     this.showExtensions = RedocNormalizedOptions.normalizeShowExtensions(raw.showExtensions);
+    this.usePathInSidebar = argValueToBoolean(raw.usePathInSidebar);
     this.hideSingleRequestSampleTab = argValueToBoolean(raw.hideSingleRequestSampleTab);
     this.menuToggle = argValueToBoolean(raw.menuToggle, true);
     this.jsonSampleExpandLevel = RedocNormalizedOptions.normalizeJsonSampleExpandLevel(
diff --git a/src/services/models/Group.model.ts b/src/services/models/Group.model.ts
index f1009f4e..36184963 100644
--- a/src/services/models/Group.model.ts
+++ b/src/services/models/Group.model.ts
@@ -14,6 +14,7 @@ export class GroupModel implements IMenuItem {
   id: string;
   absoluteIdx?: number;
   name: string;
+  sidebarName: string;
   description?: string;
   type: MenuItemGroupType;
 
@@ -43,6 +44,8 @@ export class GroupModel implements IMenuItem {
     this.name = tagOrGroup['x-displayName'] || tagOrGroup.name;
     this.level = (tagOrGroup as MarkdownHeading).level || 1;
 
+    this.sidebarName = this.name;
+
     // remove sections from markdown, same as in ApiInfo
     this.description = tagOrGroup.description || '';
 
diff --git a/src/services/models/Operation.ts b/src/services/models/Operation.ts
index 261bb78b..1af413ee 100644
--- a/src/services/models/Operation.ts
+++ b/src/services/models/Operation.ts
@@ -49,6 +49,7 @@ export class OperationModel implements IMenuItem {
   id: string;
   absoluteIdx?: number;
   name: string;
+  sidebarName: string;
   description?: string;
   type = 'operation' as const;
 
@@ -104,6 +105,9 @@ export class OperationModel implements IMenuItem {
 
     this.name = getOperationSummary(operationSpec);
 
+    this.sidebarName = this.name;
+    if (options.usePathInSidebar) this.sidebarName = this.path;
+
     if (this.isCallback) {
       // NOTE: Callbacks by default should not inherit the specification's global `security` definition.
       // Can be defined individually per-callback in the specification. Defaults to none.