MenuBuilder: Add support for sortOperationsAlphabetically and sortTagsAlphabetically (#1843)

* operations: Add support for sortOperationsAlphabetically

Already documented but is currently `NO-OP` and not implemented
`sortOperationsAlphabetically`.

Allows sorting operations in sidebar menu according to their `name`
configured which is by default `summary` from Swaggerspec

TLDR:
Following commit adds support for `sortOperationsAlphabetically` already
documented but not implemented here: https://redoc.ly/docs/api-reference-docs/guides/migration-guide-2-0/#automated-sorting

Signed-off-by: flouthoc <flouthoc.git@gmail.com>

* feat: move sort by prop to utils functions

* feat: add ability to sort tags

Co-authored-by: Oprysk <vyacheslav@redocly.com>

src/services/MenuBuilder.ts

@@ -12,6 +12,7 @@ import {
   SECURITY_DEFINITIONS_COMPONENT_NAME,
   setSecuritySchemePrefix,
   JsonPointer,
+  alphabeticallyByProp,
 } from '../utils';
 import { MarkdownRenderer } from './MarkdownRenderer';
 import { GroupModel, OperationModel } from './models';
@@ -130,9 +131,11 @@ export class MenuBuilder {
 
   /**
    * Returns array of OperationsGroup items for the tags of the group or for all tags
+   * @param parser
    * @param tagsMap tags info returned from `getTagsWithOperations`
    * @param parent parent item
    * @param group group which this tag belongs to. if not provided gets all tags
+   * @param options normalized options
    */
   static getTagsItems(
     parser: OpenAPIParser,
@@ -183,14 +186,21 @@ export class MenuBuilder {
 
       res.push(item);
     }
+
+    if (options.sortTagsAlphabetically) {
+      res.sort(alphabeticallyByProp<GroupModel | OperationModel>('name'));
+    }
+
     return res;
   }
 
   /**
    * Returns array of Operation items for the tag
+   * @param parser
    * @param parent parent OperationsGroup
    * @param tag tag info returned from `getTagsWithOperations`
    * @param depth items depth
+   * @param options - normalized options
    */
   static getOperationsItems(
     parser: OpenAPIParser,
@@ -209,6 +219,11 @@ export class MenuBuilder {
       operation.depth = depth;
       res.push(operation);
     }
+
+    if (options.sortOperationsAlphabetically) {
+      res.sort(alphabeticallyByProp<OperationModel>('name'));
+    }
+
     return res;
   }
 

src/services/RedocNormalizedOptions.ts

@@ -18,6 +18,8 @@ export interface RedocRawOptions {
   requiredPropsFirst?: boolean | string;
   sortPropsAlphabetically?: boolean | string;
   sortEnumValuesAlphabetically?: boolean | string;
+  sortOperationsAlphabetically?: boolean | string;
+  sortTagsAlphabetically?: boolean | string;
   noAutoAuth?: boolean | string;
   nativeScrollbars?: boolean | string;
   pathInMiddlePanel?: boolean | string;
@@ -204,6 +206,8 @@ export class RedocNormalizedOptions {
   requiredPropsFirst: boolean;
   sortPropsAlphabetically: boolean;
   sortEnumValuesAlphabetically: boolean;
+  sortOperationsAlphabetically: boolean;
+  sortTagsAlphabetically: boolean;
   noAutoAuth: boolean;
   nativeScrollbars: boolean;
   pathInMiddlePanel: boolean;
@@ -264,6 +268,8 @@ export class RedocNormalizedOptions {
     this.requiredPropsFirst = argValueToBoolean(raw.requiredPropsFirst);
     this.sortPropsAlphabetically = argValueToBoolean(raw.sortPropsAlphabetically);
     this.sortEnumValuesAlphabetically = argValueToBoolean(raw.sortEnumValuesAlphabetically);
+    this.sortOperationsAlphabetically = argValueToBoolean(raw.sortOperationsAlphabetically);
+    this.sortTagsAlphabetically = argValueToBoolean(raw.sortTagsAlphabetically);
     this.noAutoAuth = argValueToBoolean(raw.noAutoAuth);
     this.nativeScrollbars = argValueToBoolean(raw.nativeScrollbars);
     this.pathInMiddlePanel = argValueToBoolean(raw.pathInMiddlePanel);

src/utils/index.ts

@@ -8,3 +8,4 @@ export * from './dom';
 export * from './decorators';
 export * from './debug';
 export * from './memoize';
+export * from './sort';

src/utils/sort.ts

@@ -0,0 +1,21 @@
+/**
+ * Function that returns a comparator for sorting objects by some specific key alphabetically.
+ *
+ * @param {String} property key of the object to sort, if starts from `-` - reverse
+ */
+export function alphabeticallyByProp<T>(property: string): (a: T, b: T) => number {
+  let sortOrder = 1;
+
+  if (property[0] === '-') {
+    sortOrder = -1;
+    property = property.substr(1);
+  }
+
+  return (a: T, b: T) => {
+    if (sortOrder == -1) {
+      return b[property].localeCompare(a[property]);
+    } else {
+      return a[property].localeCompare(b[property]);
+    }
+  };
+}