swagger-ui-react sorting support

[doshmajhan]

Hello, I was trying to see if it was possible to sort the APIs/Methods alphabetically. It does look like this is supported via apisSorter and operationSorter but these options don't seem to have any effect in swagger-ui-react.

It is specified under the Limitations:

Not all configuration bindings are available.

Is there a plan to support these in the future?

[ranger-ross]

It appears to not be being passed in the operations.jsx component

  render() {
    let {
      specSelectors,
    } = this.props

    const taggedOps = specSelectors.taggedOperations() // The taggedOperations method has an input param for sorting
    // ...
  }

[vozmarkov]

this is the only way I found how to perform a sort by using operations layout, not sure about performance but I'm using this for my pet project.

"use client";

import React from "react";
import SwaggerUI from "swagger-ui-react";
import "swagger-ui-react/swagger-ui.css";
import { Map } from "immutable";

// Create the layout component
class OperationsLayout extends React.Component {
  render() {
    const { getComponent, specSelectors }: any = this.props;

    const Operations = getComponent("operations", true);

    const apiData = specSelectors.taggedOperations();
    const tagOrder = Map(
      ["Authentication", "Manage-payments"].map((key, index) => [key, index])
    );

    const sortedApiData = apiData.sortBy((value: any, key: any) =>
      tagOrder.get(key)
    );

    return (
      <div className="swagger-ui">
        <Operations
          specSelectors={{
            ...specSelectors,
            taggedOperations: () => sortedApiData,
          }}
        />
      </div>
    );
  }
}

// Create the plugin that provides our layout component
const OperationsLayoutPlugin = () => {
  return {
    components: {
      OperationsLayout: OperationsLayout,
    },
  };
};

type Props = {
  spec: Record<string, any>;
};

function ReactSwagger({ spec }: Props) {
  return (
    <SwaggerUI
      spec={spec}
      plugins={[OperationsLayoutPlugin]}
      layout="OperationsLayout"
    />
  );
}

export default ReactSwagger;