redash/client/app/components/SettingsWrapper.jsx

import React from "react";
import Menu from "antd/lib/menu";
import { PageHeader } from "@/components/PageHeader";
import { $location } from "@/services/ng";
import settingsMenu from "@/services/settingsMenu";

function wrapSettingsTab(options, WrappedComponent) {
  if (options) {
    settingsMenu.add(options);
  }

  return function SettingsTab(props) {
    const activeItem = settingsMenu.getActiveItem($location.path());
    return (
      <div className="settings-screen">
        <div className="container">
          <PageHeader title="Settings" />
          <div className="bg-white tiled">
            <Menu selectedKeys={[activeItem && activeItem.title]} selectable={false} mode="horizontal">
              {settingsMenu.items.map(item => (
                <Menu.Item key={item.title}>
                  <a href={item.path}>{item.title}</a>
                </Menu.Item>
              ))}
            </Menu>
            <div className="p-15">
              <div>
                <WrappedComponent {...props} />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  };
}

export default wrapSettingsTab;