refactor: renamve Method to Operation

2024-09-21 03:08:48 +03:00 · 2017-03-30 15:17:08 +03:00 · 2017-03-30 15:17:08 +03:00 · b9740bfe55
commit b9740bfe55
parent 36a81ed662
36 changed files with 226 additions and 200 deletions
--- a/README.md
+++ b/README.md
@ -138,7 +138,7 @@ ReDoc makes use of the following [vendor extensions](http://swagger.io/specifica
  * **function**: A getter function. Must return a number representing the offset (in pixels);
 * `suppress-warnings` - if set, warnings are not rendered at the top of documentation (they still are logged to the console).
 * `lazy-rendering` - if set, enables lazy rendering mode in ReDoc. This mode is useful for APIs with big number of operations (e.g. > 50). In this mode ReDoc shows initial screen ASAP and then renders the rest operations asynchronously while showing progress bar on the top. Check out the [demo](\\rebilly.github.io/ReDoc) for the example.
-* `hide-hostname` - if set, the protocol and hostname is not shown in the method definition.
+* `hide-hostname` - if set, the protocol and hostname is not shown in the operation definition.
 * `expand-responses` - specify which responses to expand by default by response codes. Values should be passed as comma-separated list without spaces e.g. `expand-responses="200,201"`. Special value `"all"` expands all responses by default. Be careful: this option can slow-down documentation rendering time.
 * `required-props-first` - show required properties first ordered in the same order as in `required` array.

--- a/lib/components/EndpointLink/endpoint-link.html
+++ b/lib/components/EndpointLink/endpoint-link.html
@ -1,7 +1,7 @@
-<div class="method-endpoint" (click)="handleClick()">
+<div class="operation-endpoint" (click)="handleClick()">
  <h5 class="http-verb" [ngClass]="verb">{{verb}}</h5>
  <span><!--
-  --><span class="method-api-url-path">{{path}}</span><!--
+  --><span class="operation-api-url-path">{{path}}</span><!--
 --></span>
 </div>
 <svg class="expand-icon" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 24 24" xml:space="preserve">
@ -11,7 +11,7 @@
  <div *ngFor="let server of servers" class="server-item">
    <div class="description" [innerHtml]="server.description | marked"></div>
    <div select-on-click class="url">
-      <span class="method-api-url"> {{server.url}}</span>{{path}}
+      <span class="operation-api-url"> {{server.url}}</span>{{path}}
    </div>
  </div>
 </div>
--- a/lib/components/EndpointLink/endpoint-link.scss
+++ b/lib/components/EndpointLink/endpoint-link.scss
@ -6,7 +6,7 @@
  cursor: pointer;
 }

-.method-endpoint {
+.operation-endpoint {
  padding: 10px 30px 10px 20px;
  border-radius: $border-radius*2;
  background-color: darken($black, 2%);
@ -18,7 +18,7 @@
  border: 1px solid transparent;
 }

-.method-endpoint > .method-params-subheader {
+.operation-endpoint > .operation-params-subheader {
  padding-top: 1px;
  padding-bottom: 0;
  margin: 0;
@ -29,7 +29,7 @@
  border-radius: $border-radius;
 }

-.method-api-url {
+.operation-api-url {
  color: rgba($black, .8);
  &-path {
    font-family: $headers-font, $headers-font-family;
@ -96,7 +96,7 @@
  transition: all 0.25s ease;
 }
 :host.expanded {
-  > .method-endpoint {
+  > .operation-endpoint {
    border-color: $side-bar-bg-color;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
--- a/lib/components/EndpointLink/endpoint-link.spec.ts
+++ b/lib/components/EndpointLink/endpoint-link.spec.ts
@ -72,11 +72,11 @@ describe('Redoc components', () => {
 });


-/** Test component that contains a Method. */
+/** Test component that contains an Operation. */
@Component({
  selector: 'test-app',
  template:
-      `<method pointer='#/paths/~1user~1{username}/put'></method>`
+      `<operation pointer='#/paths/~1user~1{username}/put'></operation>`
 })
 class TestAppComponent {
 }
--- a/lib/components/JsonSchema/json-schema-lazy.spec.ts
+++ b/lib/components/JsonSchema/json-schema-lazy.spec.ts
@ -45,7 +45,7 @@ describe('Redoc components', () => {
 });


-/** Test component that contains a Method. */
+/** Test component that contains a lazy schema. */
@Component({
  selector: 'test-app',
  template:
--- a/lib/components/JsonSchema/json-schema.spec.ts
+++ b/lib/components/JsonSchema/json-schema.spec.ts
@ -57,7 +57,7 @@ describe('Redoc components', () => {
 });


-/** Test component that contains a Method. */
+/** Test component that contains a json schema. */
@Component({
  selector: 'test-app',
  template:
--- a/lib/components/Method/method.html
+++ b/lib/components/Method/method.html
@ -1,30 +0,0 @@
-<div class="method" *ngIf="method">
-  <div class="method-content">
-    <h2 class="method-header sharable-header">
-        <a class="share-link" href="#{{method.anchor}}"></a>{{method.summary}}
-    </h2>
-    <div class="method-tags" *ngIf="method.info.tags.length">
-        <a *ngFor="let tag of method.info.tags" attr.href="#tag/{{tag}}"> {{tag}} </a>
-    </div>
-    <p *ngIf="method.info.description" class="method-description"
-    [innerHtml]="method.info.description | marked">
-    </p>
-    <redoc-externalDocs [docs]="method.externalDocs"></redoc-externalDocs>
-    <params-list pointer="{{pointer}}/parameters"> </params-list>
-    <responses-list pointer="{{pointer}}/responses"> </responses-list>
-  </div>
-  <div class="method-samples">
-    <h4 class="method-params-subheader">Definition</h4>
-
-    <endpoint-link [verb]="method.verb" [path]="method.path"> </endpoint-link>
-
-    <div>
-        <request-samples [pointer]="pointer" [schemaPointer]="method.bodyParam?._pointer">
-        </request-samples>
-    </div>
-    <div>
-        <br>
-        <responses-samples pointer="{{pointer}}/responses"> </responses-samples>
-    </div>
-  </div>
-</div>
--- a/lib/components/Operation/operation.html
+++ b/lib/components/Operation/operation.html
@ -0,0 +1,30 @@
+<div class="operation" *ngIf="operation">
+  <div class="operation-content">
+    <h2 class="operation-header sharable-header">
+        <a class="share-link" href="#{{operation.anchor}}"></a>{{operation.summary}}
+    </h2>
+    <div class="operation-tags" *ngIf="operation.info.tags.length">
+        <a *ngFor="let tag of operation.info.tags" attr.href="#tag/{{tag}}"> {{tag}} </a>
+    </div>
+    <p *ngIf="operation.info.description" class="operation-description"
+    [innerHtml]="operation.info.description | marked">
+    </p>
+    <redoc-externalDocs [docs]="operation.externalDocs"></redoc-externalDocs>
+    <params-list pointer="{{pointer}}/parameters"> </params-list>
+    <responses-list pointer="{{pointer}}/responses"> </responses-list>
+  </div>
+  <div class="operation-samples">
+    <h4 class="operation-params-subheader">Definition</h4>
+
+    <endpoint-link [verb]="operation.verb" [path]="operation.path"> </endpoint-link>
+
+    <div>
+        <request-samples [pointer]="pointer" [schemaPointer]="operation.bodyParam?._pointer">
+        </request-samples>
+    </div>
+    <div>
+        <br>
+        <responses-samples pointer="{{pointer}}/responses"> </responses-samples>
+    </div>
+  </div>
+</div>
--- a/lib/components/Operation/operation.scss
+++ b/lib/components/Operation/operation.scss
@ -14,11 +14,11 @@
 //   border-bottom: 0;
 // }

-.method-header {
+.operation-header {
  margin-bottom: calc(1em - 6px);
 }

-.method-tags {
+.operation-tags {
  margin-top: 20px;

  > a {
@ -39,45 +39,45 @@
  }
 }

-.method-content, .method-samples {
+.operation-content, .operation-samples {
  display: block;
  box-sizing: border-box;
  float: left;
 }

-.method-content {
+.operation-content {
  width: 100% - $samples-panel-width;
  padding: $section-spacing;
 }

-.method-samples {
+.operation-samples {
  color: $sample-panel-color;
  width: 40%;
  padding: $section-spacing;
  background: $samples-panel-bg-color;
 }

-.method-samples header,
-.method-samples > h5 {
+.operation-samples header,
+.operation-samples > h5 {
  color: $sample-panel-headers-color;
  text-transform: uppercase;
 }

-.method-samples > h5 {
+.operation-samples > h5 {
    margin-bottom: 8px;
 }

-.method-samples schema-sample {
+.operation-samples schema-sample {
  display: block;
 }

-.method:after {
+.operation:after {
  content: "";
  display: table;
  clear:both;
 }

-.method-description {
+.operation-description {
  padding: 6px 0 10px 0;
  margin: 0;
 }
@ -87,15 +87,15 @@
 }

@media (max-width: $right-panel-squash-breakpoint) {
-  .methods:before {
+  .operations:before {
    display: none;
  }

-  .method-samples, .method-content  {
+  .operation-samples, .operation-content  {
    width: 100%;
  }

-  .method-samples {
+  .operation-samples {
    margin-top: 2em;
  }

--- a/lib/components/Operation/operation.spec.ts
+++ b/lib/components/Operation/operation.spec.ts
@ -9,7 +9,7 @@ import {

 import { getChildDebugElement } from '../../../tests/helpers';

-import { Method } from './method';
+import { Operation } from './operation';
 import { SpecManager } from '../../utils/spec-manager';;
 import { LazyTasksService } from '../../shared/components/LazyFor/lazy-for';;

@ -17,9 +17,9 @@ describe('Redoc components', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({ declarations: [ TestAppComponent ] });
  });
-  describe('Method Component', () => {
+  describe('Operation Component', () => {
    let builder;
-    let component: Method;
+    let component: Operation;
    let specMgr;

    beforeEach(async(inject([SpecManager, LazyTasksService], (_specMgr, lazyTasks) => {
@ -33,7 +33,7 @@ describe('Redoc components', () => {

    beforeEach(() => {
      let fixture = TestBed.createComponent(TestAppComponent);
-      component = getChildDebugElement(fixture.debugElement, 'method').componentInstance;
+      component = getChildDebugElement(fixture.debugElement, 'operation').componentInstance;
      fixture.detectChanges();
    });

@ -43,23 +43,23 @@ describe('Redoc components', () => {
    });

    it('should init basic component data', () => {
-      component.method.verb.should.be.equal('put');
-      component.method.path.should.be.equal('/user/{username}');
+      component.operation.verb.should.be.equal('put');
+      component.operation.path.should.be.equal('/user/{username}');
    });


    it('should main tag', () => {
-      component.method.info.tags.should.be.empty();
+      component.operation.info.tags.should.be.empty();
    });
  });
 });


-/** Test component that contains a Method. */
+/** Test component that contains a Operation. */
@Component({
  selector: 'test-app',
  template:
-      `<method pointer='#/paths/~1user~1{username}/put'></method>`
+      `<operation pointer='#/paths/~1user~1{username}/put'></operation>`
 })
 class TestAppComponent {
 }
--- a/lib/components/Operation/operation.ts
+++ b/lib/components/Operation/operation.ts
@ -6,7 +6,7 @@ import { SchemaHelper } from '../../services/schema-helper.service';
 import { OptionsService, MenuService } from '../../services/';


-interface MethodInfo {
+interface OperationInfo {
  verb: string;
  path: string;
  info: {
@ -23,18 +23,18 @@ interface MethodInfo {
 }

@Component({
-  selector: 'method',
-  templateUrl: './method.html',
-  styleUrls: ['./method.css'],
+  selector: 'operation',
+  templateUrl: './operation.html',
+  styleUrls: ['./operation.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class Method extends BaseComponent implements OnInit {
+export class Operation extends BaseComponent implements OnInit {
  @Input() pointer :string;
  @Input() parentTagId :string;

  @HostBinding('attr.operation-id') operationId;

-  method: MethodInfo;
+  operation: OperationInfo;

  constructor(
    specMgr:SpecManager,
@ -46,7 +46,7 @@ export class Method extends BaseComponent implements OnInit {
  init() {
    this.operationId = this.componentSchema.operationId;

-    this.method = {
+    this.operation = {
      verb: JsonPointer.baseName(this.pointer),
      path: JsonPointer.baseName(this.pointer, 2),
      info: {
@ -54,7 +54,7 @@ export class Method extends BaseComponent implements OnInit {
        tags: this.filterMainTags(this.componentSchema.tags)
      },
      bodyParam: this.findBodyParam(),
-      summary: SchemaHelper.methodSummary(this.componentSchema),
+      summary: SchemaHelper.operationSummary(this.componentSchema),
      anchor: this.buildAnchor(),
      externalDocs: this.componentSchema.externalDocs
    };
@ -62,7 +62,7 @@ export class Method extends BaseComponent implements OnInit {

  buildAnchor():string {
    return this.menu.hashFor(this.pointer,
-      { type: 'method', operationId: this.operationId, pointer: this.pointer },
+      { type: 'operation', operationId: this.operationId, pointer: this.pointer },
      this.parentTagId );
  }

@ -73,8 +73,8 @@ export class Method extends BaseComponent implements OnInit {
  }

  findBodyParam() {
-    let pathParams = this.specMgr.getMethodParams(this.pointer);
-    let bodyParam = pathParams.find(param => param.in === 'body');
+    let params = this.specMgr.getOperationParams(this.pointer);
+    let bodyParam = params.find(param => param.in === 'body');
    return bodyParam;
  }

--- a/lib/components/OperationsList/operations-list.html
+++ b/lib/components/OperationsList/operations-list.html
@ -1,12 +1,12 @@
-<div class="methods">
+<div class="operations">
  <div class="tag" *ngFor="let tag of tags; trackBy:trackByTagName" [attr.section]="tag.id">
    <div class="tag-info" *ngIf="tag.name">
      <h1 class="sharable-header"> <a class="share-link" href="#{{tag.id}}"></a>{{tag.name}} </h1>
      <p *ngIf="tag.description" [innerHtml]="tag.description | marked"> </p>
      <redoc-externalDocs [docs]="tag.metadata.externalDocs"></redoc-externalDocs>
    </div>
-    <method *lazyFor="let methodItem of tag.items; let ready = ready;"
-    [hidden]="!ready" [pointer]="methodItem.metadata.pointer"
-    [parentTagId]="tag.id" [attr.section]="methodItem.id"></method>
+    <operation *lazyFor="let operation of tag.items; let ready = ready;"
+    [hidden]="!ready" [pointer]="operation.metadata.pointer"
+    [parentTagId]="tag.id" [attr.section]="operation.id"></operation>
  </div>
 </div>
--- a/lib/components/OperationsList/operations-list.scss
+++ b/lib/components/OperationsList/operations-list.scss
@ -32,7 +32,7 @@
  margin-top: 0;
 }

-.methods {
+.operations {
  display: block;
  position: relative;;
 }
--- a/lib/components/OperationsList/operations-list.spec.ts
+++ b/lib/components/OperationsList/operations-list.spec.ts
@ -10,14 +10,14 @@ import {
 import { getChildDebugElement } from '../../../tests/helpers';


-import { MethodsList } from './methods-list';
+import { OperationsList } from './operations-list';
 import { SpecManager } from '../../utils/spec-manager';

 describe('Redoc components', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({ declarations: [ TestAppComponent ] });
  });
-  describe('MethodsList Component', () => {
+  describe('OperationsList Component', () => {
    let builder;
    let component;
    let fixture;
@ -28,12 +28,12 @@ describe('Redoc components', () => {
    })));

    beforeEach(done => {
-      specMgr.load('/tests/schemas/methods-list-component.json').then(done, done.fail);
+      specMgr.load('/tests/schemas/operations-list-component.json').then(done, done.fail);
    });

    beforeEach(() => {
      fixture = TestBed.createComponent(TestAppComponent);
-      component = getChildDebugElement(fixture.debugElement, 'methods-list').componentInstance;
+      component = getChildDebugElement(fixture.debugElement, 'operations-list').componentInstance;
      fixture.detectChanges();
    });

@ -56,7 +56,7 @@ describe('Redoc components', () => {
@Component({
  selector: 'test-app',
  template:
-      `<methods-list></methods-list>`
+      `<operations-list></operations-list>`
 })
 class TestAppComponent {
 }
--- a/lib/components/OperationsList/operations-list.ts
+++ b/lib/components/OperationsList/operations-list.ts
@ -4,12 +4,12 @@ import { BaseComponent, SpecManager } from '../base';
 import { MenuService } from '../../services/index';

@Component({
-  selector: 'methods-list',
-  templateUrl: './methods-list.html',
-  styleUrls: ['./methods-list.css'],
+  selector: 'operations-list',
+  templateUrl: './operations-list.html',
+  styleUrls: ['./operations-list.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class MethodsList extends BaseComponent implements OnInit {
+export class OperationsList extends BaseComponent implements OnInit {
  @Input() pointer:string;

  tags:Array<any> = [];
@ -26,13 +26,13 @@ export class MethodsList extends BaseComponent implements OnInit {
      items: []
    };
    flatMenuItems.forEach(menuItem => {
-      // skip items that are not bound to swagger tags/methods
+      // skip items that are not bound to swagger tags/operations
      if (!menuItem.metadata) return;

      if (menuItem.metadata.type === 'tag') {
        this.tags.push(menuItem);
      }
-      if (menuItem.metadata.type === 'method' && !menuItem.parent) {
+      if (menuItem.metadata.type === 'operation' && !menuItem.parent) {
        emptyTag.items.push(menuItem);
      }
    });
--- a/lib/components/ParamsList/params-list.ts
+++ b/lib/components/ParamsList/params-list.ts
@ -27,7 +27,7 @@ export class ParamsList extends BaseComponent implements OnInit {

  init() {
    this.params = [];
-    let paramsList = this.specMgr.getMethodParams(this.pointer);
+    let paramsList = this.specMgr.getOperationParams(this.pointer);

    paramsList = paramsList.map(paramSchema => {
      let propPointer = paramSchema._pointer;
--- a/lib/components/Redoc/redoc.html
+++ b/lib/components/Redoc/redoc.html
@ -17,7 +17,7 @@
  <div class="api-content">
    <warnings></warnings>
    <api-info></api-info>
-    <methods-list> </methods-list>
+    <operations-list> </operations-list>
    <footer>
      <div class="powered-by-badge">
        <a href="https://github.com/Rebilly/ReDoc" title="Swagger-generated API Reference Documentation" target="_blank">
--- a/lib/components/Redoc/redoc.ts
+++ b/lib/components/Redoc/redoc.ts
@ -15,13 +15,29 @@ import { BaseComponent } from '../base';
 import * as detectScollParent from 'scrollparent';

 import { SpecManager } from '../../utils/spec-manager';
-import { SearchService, OptionsService, Options, Hash, AppStateService, SchemaHelper } from '../../services/';
+import {
+  SearchService,
+  OptionsService,
+  Options,
+  Hash,
+  AppStateService,
+  SchemaHelper,
+  MenuService,
+  Marker
+} from '../../services/';
 import { LazyTasksService } from '../../shared/components/LazyFor/lazy-for';

@Component({
  selector: 'redoc',
  templateUrl: './redoc.html',
  styleUrls: ['./redoc.css'],
+  providers: [
+    SpecManager,
+    MenuService,
+    SearchService,
+    LazyTasksService,
+    Marker
+  ]
  //changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class Redoc extends BaseComponent implements OnInit {
--- a/lib/components/ResponsesList/responses-list.spec.ts
+++ b/lib/components/ResponsesList/responses-list.spec.ts
@ -16,7 +16,7 @@ import { SpecManager } from '../../utils/spec-manager';

 describe('Redoc components', () => {

-  describe('MethodsList Component', () => {
+  describe('ResponsesList Component', () => {
    let builder;
    let component: ResponsesList;
    let fixture: ComponentFixture<ResponsesList>
--- a/lib/components/SideMenu/side-menu-items.scss
+++ b/lib/components/SideMenu/side-menu-items.scss
@ -62,7 +62,7 @@
  }

  // do not capitalize method summuary in level-1 menu
-  &.menu-item-for-method > .menu-item-header {
+  &.menu-item-for-operation > .menu-item-header {
    text-transform: none;
  }

--- a/lib/components/SideMenu/side-menu.spec.ts
+++ b/lib/components/SideMenu/side-menu.spec.ts
@ -11,7 +11,7 @@ import {

 import { TestBed, ComponentFixture } from '@angular/core/testing';

-import { MethodsList, SideMenu } from '../index';
+import { OperationsList, SideMenu } from '../index';

 import { SpecManager } from '../../utils/spec-manager';

@ -19,7 +19,7 @@ let testOptions;

 describe('Redoc components', () => {
  beforeEach(() => {
-    TestBed.configureTestingModule({ declarations: [ TestAppComponent, MethodsList ] });
+    TestBed.configureTestingModule({ declarations: [ TestAppComponent, OperationsList ] });
  });
  describe('SideMenu Component', () => {
    let builder;
@ -90,7 +90,7 @@ describe('Redoc components', () => {
  selector: 'test-app',
  template:
      `<side-menu></side-menu>
-      <methods-list></methods-list>`
+      <operations-list></operations-list>`
 })
 class TestAppComponent {
 }
--- a/lib/components/SideMenu/side-menu.ts
+++ b/lib/components/SideMenu/side-menu.ts
@ -1,8 +1,15 @@
 'use strict';

-import { Component, EventEmitter, Input, Output, ElementRef, ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core';
+import { Component,
+  EventEmitter,
+  Input,
+  Output,
+  ElementRef,
+  ChangeDetectorRef,
+  OnInit,
+  OnDestroy
+} from '@angular/core';

-//import { global } from '@angular/core/src/facade/lang';
 import { trigger, state, animate, transition, style } from '@angular/core';
 import { BaseComponent, SpecManager } from '../base';
 import { ScrollService, MenuService, OptionsService, MenuItem, Marker} from '../../services/';
@ -51,9 +58,15 @@ export class SideMenu extends BaseComponent implements OnInit, OnDestroy {
  private $resourcesNav: any;
  private $scrollParent: any;

-  constructor(specMgr:SpecManager, elementRef:ElementRef,
-  private scrollService:ScrollService, private menuService:MenuService,
-  optionsService:OptionsService, private detectorRef:ChangeDetectorRef, private marker:Marker) {
+  constructor(
+    specMgr:SpecManager,
+    elementRef:ElementRef,
+    private scrollService:ScrollService,
+    private menuService:MenuService,
+    optionsService:OptionsService,
+    private detectorRef:ChangeDetectorRef,
+    private marker:Marker
+  ) {
    super(specMgr);
    this.$element = elementRef.nativeElement;

--- a/lib/components/index.ts
+++ b/lib/components/index.ts
@ -10,8 +10,8 @@ import { ResponsesList } from './ResponsesList/responses-list';
 import { ResponsesSamples } from './ResponsesSamples/responses-samples';
 import { SchemaSample } from './SchemaSample/schema-sample';
 import { SideMenu, SideMenuItems } from './SideMenu/side-menu';
-import { MethodsList } from './MethodsList/methods-list';
-import { Method } from './Method/method';
+import { OperationsList } from './OperationsList/operations-list';
+import { Operation } from './Operation/operation';
 import { Warnings } from './Warnings/warnings';
 import { SecurityDefinitions } from './SecurityDefinitions/security-definitions';
 import { LoadingBar } from './LoadingBar/loading-bar';
@ -23,10 +23,10 @@ import { Redoc } from './Redoc/redoc';

 export const REDOC_DIRECTIVES = [
  ApiInfo, ApiLogo, JsonSchema, JsonSchemaLazy, ParamsList, RequestSamples, ResponsesList,
-  ResponsesSamples, SchemaSample, SideMenu, MethodsList, Method, Warnings, Redoc, SecurityDefinitions,
+  ResponsesSamples, SchemaSample, SideMenu, OperationsList, Operation, Warnings, Redoc, SecurityDefinitions,
  LoadingBar, SideMenuItems, RedocSearch, ExternalDocs, EndpointLink
 ];

 export { ApiInfo, ApiLogo, JsonSchema, JsonSchemaLazy, ParamsList, RequestSamples, ResponsesList,
-ResponsesSamples, SchemaSample, SideMenu, MethodsList, Method, Warnings, Redoc, SecurityDefinitions,
-LoadingBar, SideMenuItems, RedocSearch, ExternalDocs, EndpointLink }
+ResponsesSamples, SchemaSample, SideMenu, OperationsList, Operation, Warnings, Redoc, SecurityDefinitions,
+LoadingBar, SideMenuItems, ExternalDocs, EndpointLink }
--- a/lib/redoc.module.ts
+++ b/lib/redoc.module.ts
@ -1,7 +1,7 @@
 import { NgModule, ErrorHandler, APP_ID } from '@angular/core';
 import { CommonModule } from '@angular/common';

-import { Redoc, SecurityDefinitions, Method, REDOC_DIRECTIVES } from './components/index';
+import { Redoc, SecurityDefinitions, Operation, REDOC_DIRECTIVES } from './components/index';
 import { REDOC_COMMON_DIRECTIVES, DynamicNg2Wrapper } from './shared/components/index';
 import { REDOC_PIPES } from './utils/pipes';
 import { CustomErrorHandler } from './utils/'
@ -26,20 +26,15 @@ import { SpecManager } from './utils/spec-manager';
  imports: [ CommonModule ],
  declarations: [ REDOC_DIRECTIVES, REDOC_COMMON_DIRECTIVES, REDOC_PIPES ],
  bootstrap: [ Redoc ],
-  entryComponents: [ SecurityDefinitions, DynamicNg2Wrapper, Method ],
+  entryComponents: [ SecurityDefinitions, DynamicNg2Wrapper, Operation ],
  providers: [
-    SpecManager,
    ScrollService,
    Hash,
-    MenuService,
    WarningsService,
    OptionsService,
    AppStateService,
    ComponentParser,
    ContentProjector,
-    SearchService,
-    LazyTasksService,
-    Marker,
    { provide: APP_ID, useValue: 'redoc' },
    { provide: ErrorHandler, useClass: CustomErrorHandler },
    { provide: COMPONENT_PARSER_ALLOWED, useValue: { 'security-definitions': SecurityDefinitions} }
--- a/lib/services/hash.service.spec.ts
+++ b/lib/services/hash.service.spec.ts
@ -12,7 +12,7 @@ describe('Hash Service', () => {
    hashService = _hash;
  }));

-  it('should trigger changed event when method start is called', () => {
+  it('should trigger changed event when method `start` is called', () => {
    spyOn(hashService.value, 'next').and.stub();
    hashService.start();
    expect(hashService.value.next).toHaveBeenCalled();
--- a/lib/services/menu.service.spec.ts
+++ b/lib/services/menu.service.spec.ts
@ -5,7 +5,7 @@ import {
  TestBed
 } from '@angular/core/testing';

-import { MethodsList } from '../components/MethodsList/methods-list';
+import { OperationsList } from '../components/OperationsList/operations-list';
 import { MenuService, MenuItem } from './menu.service';
 import { Hash } from './hash.service';
 import { LazyTasksService } from '../shared/components/LazyFor/lazy-for';
@ -15,7 +15,7 @@ import { SpecManager } from '../utils/spec-manager';

 describe('Menu service', () => {
  beforeEach(() => {
-    TestBed.configureTestingModule({ declarations: [ TestAppComponent, MethodsList ] });
+    TestBed.configureTestingModule({ declarations: [ TestAppComponent, OperationsList ] });
  });

  let menu:MenuService, hashService, scroll, tasks;
@ -41,7 +41,7 @@ describe('Menu service', () => {
    fixture.detectChanges();
  });

-  it('should scroll to method when location hash is present [jp]', (done) => {
+  it('should scroll to operation when location hash is present [jp]', (done) => {
    let hash = '#tag/pet/paths/~1pet~1findByStatus/get';
    spyOn(menu, 'scrollToActive').and.callThrough();
    spyOn(window, 'scrollTo').and.stub();
@ -56,7 +56,7 @@ describe('Menu service', () => {
    hashService.value.next(hash);
  });
  //
-  it('should scroll to method when location hash is present [operation]', (done) => {
+  it('should scroll to operation when location hash is present [operation]', (done) => {
    let hash = '#operation/getPetById';
    spyOn(menu, 'scrollToActive').and.callThrough();
    spyOn(window, 'scrollTo').and.stub();
@ -133,7 +133,7 @@ describe('Menu service', () => {
    });

    it('should return Array with correct number of items', () => {
-      // 3 - defined tags, 1 - tag3 and 1 method item for method without tag
+      // 3 - defined tags, 1 - tag3 and 1 operation item for operation without tag
      items.length.should.be.equal(3 + 1 + 1);
    });

@ -144,19 +144,19 @@ describe('Menu service', () => {
      item.items[0].name.should.be.equal('test put');
    });

-    it('should append method items without tags to the end of list', () => {
-      let methodItem = items[4];
-      methodItem.name.should.be.equal('test post');
-      methodItem.metadata.type.should.be.equal('method');
-      should.not.exist(methodItem.items);
+    it('should append operation items without tags to the end of list', () => {
+      let operationItem = items[4];
+      operationItem.name.should.be.equal('test post');
+      operationItem.metadata.type.should.be.equal('operation');
+      should.not.exist(operationItem.items);
    });

-    it('should map x-traitTag to empty method list', () => {
+    it('should map x-traitTag to empty operation list', () => {
      let item = items[0];
      should.not.exist(item.items);
    });

-    it('methods for tag should contain valid pointer and name', () => {
+    it('operations for tag should contain valid pointer and name', () => {
      for (let item of items) {
        item.should.be.an.Object();
        if (item.items) {
@ -186,7 +186,7 @@ describe('Menu service', () => {
  template:
      `<div id='parent' style='height: 500px; overflow:auto'>
        <api-info></api-info>
-        <methods-list></methods-list>
+        <operations-list></operations-list>
      </div>`
 })
 class TestAppComponent {
--- a/lib/services/menu.service.ts
+++ b/lib/services/menu.service.ts
@ -54,7 +54,7 @@ export class MenuService {
  private _hashSubscription: Subscription;
  private _scrollSubscription: Subscription;
  private _progressSubscription: Subscription;
-  private _tagsWithMethods: any;
+  private _tagsWithOperations: any;

  constructor(
    private hash:Hash,
@ -162,7 +162,7 @@ export class MenuService {
    while(currentItem) {
      if (currentItem.id) {
        selector = `[section="${currentItem.id}"] ` + selector;
-        // We only need to go up the chain for methods that
+        // We only need to go up the chain for operations that
        // might have multiple tags. For headers/subheaders
        // we need to siply early terminate.
        if (!currentItem.metadata) {
@ -254,7 +254,10 @@ export class MenuService {
      }

      idx = this.flatItems.findIndex(item => item.id === searchId);
-      if (idx < 0) this.tryScrollToId(searchId);
+      if (idx < 0) {
+        this.tryScrollToId(searchId);
+        return false;
+      }
    } else if (namespace === 'operation') {
      idx = this.flatItems.findIndex(item => {
        return item.metadata && item.metadata.operationId === ptr;
@ -304,19 +307,19 @@ export class MenuService {
    return res;
  }

-  getMethodsItems(parent: MenuItem, tag:any):MenuItem[] {
-    if (!tag.methods || !tag.methods.length) return null;
+  getOperationsItems(parent: MenuItem, tag:any):MenuItem[] {
+    if (!tag.operations || !tag.operations.length) return null;

    let res = [];
-    for (let method of tag.methods) {
+    for (let operation of tag.operations) {
      let subItem = {
-        name: SchemaHelper.methodSummary(method),
-        id: method._pointer,
-        description: method.description,
+        name: SchemaHelper.operationSummary(operation),
+        id: operation._pointer,
+        description: operation.description,
        metadata: {
-          type: 'method',
-          pointer: method._pointer,
-          operationId: method.operationId
+          type: 'operation',
+          pointer: operation._pointer,
+          operationId: operation.operationId
        },
        parent: parent
      };
@ -331,7 +334,7 @@ export class MenuService {
    parentId: string
  ) {
    if (!id) return null;
-    if (itemMeta && itemMeta.type === 'method') {
+    if (itemMeta && itemMeta.type === 'operation') {
      if (itemMeta.operationId) {
        return 'operation/' + encodeURIComponent(itemMeta.operationId);
      } else {
@ -348,18 +351,18 @@ export class MenuService {
    let tags;
    if (!tagGroup) {
      // all tags
-      tags = Object.keys(this._tagsWithMethods);
+      tags = Object.keys(this._tagsWithOperations);
    } else {
      tags = tagGroup.tags;
    }

    tags = tags.map(k => {
-      if (!this._tagsWithMethods[k]) {
+      if (!this._tagsWithOperations[k]) {
        WarningsService.warn(`Non-existing tag "${k}" is added to the group "${tagGroup.name}"`);
        return null;
      }
-      this._tagsWithMethods[k].used = true;
-      return this._tagsWithMethods[k];
+      this._tagsWithOperations[k].used = true;
+      return this._tagsWithOperations[k];
    });

    let res = [];
@ -368,9 +371,9 @@ export class MenuService {
      let id = 'tag/' + slugify(tag.name);
      let item: MenuItem;

-      // don't put empty tag into menu, instead put their methods
+      // don't put empty tag into menu, instead put their operations
      if (tag.name === '') {
-        let items = this.getMethodsItems(null, tag);
+        let items = this.getOperationsItems(null, tag);
        res.push(...items);
        continue;
      }
@ -383,7 +386,7 @@ export class MenuService {
        parent: parent,
        items: null
      };
-      item.items = this.getMethodsItems(item, tag);
+      item.items = this.getOperationsItems(item, tag);

      res.push(item);
    }
@ -410,15 +413,15 @@ export class MenuService {
  }

  checkAllTagsUsedInGroups() {
-    for (let tag of Object.keys(this._tagsWithMethods)) {
-      if (!this._tagsWithMethods[tag].used) {
+    for (let tag of Object.keys(this._tagsWithOperations)) {
+      if (!this._tagsWithOperations[tag].used) {
        WarningsService.warn(`Tag "${tag}" is not added to any group`);
      }
    }
  }

  buildMenu() {
-    this._tagsWithMethods = SchemaHelper.getTagsWithMethods(this.specMgr.schema);
+    this._tagsWithOperations = SchemaHelper.getTagsWithOperations(this.specMgr.schema);

    this.items = this.items || [];
    this.addMarkdownItems();
--- a/lib/services/schema-helper.service.ts
+++ b/lib/services/schema-helper.service.ts
@ -1,6 +1,6 @@
 'use strict';
 import { JsonPointer } from '../utils/JsonPointer';
-import { methods as swaggerMethods, keywordTypes } from  '../utils/swagger-defs';
+import { operations as swaggerOperations, keywordTypes } from  '../utils/swagger-defs';
 import { WarningsService } from './warnings.service';
 import * as slugify from 'slugify';

@ -273,9 +273,9 @@ export class SchemaHelper {
    return res;
  }

-  static methodSummary(method) {
-    return method.summary || method.operationId ||
-      (method.description && method.description.substring(0, 50)) || '<no description>';
+  static operationSummary(operation) {
+    return operation.summary || operation.operationId ||
+      (operation.description && operation.description.substring(0, 50)) || '<no description>';
  }

  static detectType(schema) {
@ -290,26 +290,26 @@ export class SchemaHelper {
    }
  }

-  static getTagsWithMethods(schema) {
+  static getTagsWithOperations(schema) {
    let tags = {};
    for (let tag of schema.tags || []) {
      tags[tag.name] = tag;
-      tag.methods = [];
+      tag.operations = [];
    }

    let paths = schema.paths;
    for (let path of Object.keys(paths)) {
-      let methods = Object.keys(paths[path]).filter((k) => swaggerMethods.has(k));
-      for (let method of methods) {
-        let methodInfo = paths[path][method];
-        let methodTags = methodInfo.tags;
+      let operations = Object.keys(paths[path]).filter((k) => swaggerOperations.has(k));
+      for (let operation of operations) {
+        let operationInfo = paths[path][operation];
+        let operationTags = operationInfo.tags;

        // empty tag
-        if (!(methodTags && methodTags.length)) {
-          methodTags = [''];
+        if (!(operationTags && operationTags.length)) {
+          operationTags = [''];
        }
-        let methodPointer = JsonPointer.compile(['paths', path, method]);
-        for (let tagName of methodTags) {
+        let operationPointer = JsonPointer.compile(['paths', path, operation]);
+        for (let tagName of operationTags) {
          let tag = tags[tagName];
          if (!tag) {
            tag = {
@ -318,9 +318,9 @@ export class SchemaHelper {
            tags[tagName] = tag;
          }
          if (tag['x-traitTag']) continue;
-          if (!tag.methods) tag.methods = [];
-          tag.methods.push(methodInfo);
-          methodInfo._pointer = methodPointer;
+          if (!tag.operations) tag.operations = [];
+          tag.operations.push(operationInfo);
+          operationInfo._pointer = operationPointer;
        }
      }
    }
--- a/lib/services/search.service.ts
+++ b/lib/services/search.service.ts
@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { AppStateService } from './app-state.service';
 import { SchemaNormalizer } from './schema-normalizer.service';
 import { JsonPointer, groupBy, SpecManager, StringMap, snapshot, MarkdownHeading } from '../utils/';
-import { methods as swaggerMethods } from '../utils/swagger-defs';
+import { operations as swaggerOperations } from '../utils/swagger-defs';
 import * as slugify from 'slugify';

 import {
@ -102,7 +102,7 @@ export class SearchService {
    Object.keys(paths).forEach(path => {
      let opearations = paths[path];
      Object.keys(opearations).forEach(verb => {
-        if (!swaggerMethods.has(verb)) return;
+        if (!swaggerOperations.has(verb)) return;
        const opearation = opearations[verb];
        const ptr = JsonPointer.join(basePtr, [path, verb]);

@ -123,7 +123,7 @@ export class SearchService {
  }

  indexOperationParameters(operation: SwaggerOperation, operationPointer: string) {
-    const parameters = this.spec.getMethodParams(operationPointer);
+    const parameters = this.spec.getOperationParams(operationPointer);
    if (!parameters) return;
    for (let i=0; i<parameters.length; ++i) {
      const param = parameters[i];
--- a/lib/shared/styles/_variables.scss
+++ b/lib/shared/styles/_variables.scss
@ -32,7 +32,6 @@ $headers-font: Montserrat;
 $headers-font-family: sans-serif;
 $headers-font-weight: $regular;
 $headers-color: $primary-color;
-$method-headers-color: $primary-color;
 $h1: 1.85714285714286em;
 $h2: 1.5714285714285714em;
 $h3: 1.2857142857142858em;
--- a/lib/utils/spec-manager.ts
+++ b/lib/utils/spec-manager.ts
@ -130,7 +130,7 @@ export class SpecManager {
    return obj;
  }

-  getMethodParams(methodPtr:string):SwaggerParameter[] {
+  getOperationParams(operationPtr:string):SwaggerParameter[] {
    /* inject JsonPointer into array elements */
    function injectPointers(array:SwaggerParameter[], root) {
      if (!Array.isArray(array)) {
@ -143,23 +143,23 @@ export class SpecManager {
    }

    // accept pointer directly to parameters as well
-    if (JsonPointer.baseName(methodPtr) === 'parameters') {
-      methodPtr = JsonPointer.dirName(methodPtr);
+    if (JsonPointer.baseName(operationPtr) === 'parameters') {
+      operationPtr = JsonPointer.dirName(operationPtr);
    }

    //get path params
-    let pathParamsPtr = JsonPointer.join(JsonPointer.dirName(methodPtr), ['parameters']);
+    let pathParamsPtr = JsonPointer.join(JsonPointer.dirName(operationPtr), ['parameters']);
    let pathParams:SwaggerParameter[] = this.byPointer(pathParamsPtr) || [];

-    let methodParamsPtr = JsonPointer.join(methodPtr, ['parameters']);
-    let methodParams:SwaggerParameter[] = this.byPointer(methodParamsPtr) || [];
+    let operationParamsPtr = JsonPointer.join(operationPtr, ['parameters']);
+    let operationParams:SwaggerParameter[] = this.byPointer(operationParamsPtr) || [];
    pathParams = injectPointers(pathParams, pathParamsPtr);
-    methodParams = injectPointers(methodParams, methodParamsPtr);
+    operationParams = injectPointers(operationParams, operationParamsPtr);

    // resolve references
-    methodParams = this.resolveRefs(methodParams);
+    operationParams = this.resolveRefs(operationParams);
    pathParams = this.resolveRefs(pathParams);
-    return methodParams.concat(pathParams);
+    return operationParams.concat(pathParams);
  }

  getTagsMap() {
--- a/lib/utils/swagger-defs.ts
+++ b/lib/utils/swagger-defs.ts
@ -1,6 +1,6 @@
 'use strict';

-export const methods = new Set(['get', 'put', 'post', 'delete', 'options', 'head', 'patch']);
+export const operations = new Set(['get', 'put', 'post', 'delete', 'options', 'head', 'patch']);

 export const keywordTypes = {
  multipleOf: 'number',
--- a/tests/e2e/redoc.e2e.js
+++ b/tests/e2e/redoc.e2e.js
@ -35,8 +35,8 @@ function basicTests(swaggerUrl, title) {
      let $redoc = $('redoc');
      expect($redoc.isPresent()).toBe(true);
      setTimeout(() => {
-        let $methods = $$('method');
-        expect($methods.count()).toBeGreaterThan(0);
+        let $operations = $$('operation');
+        expect($operations.count()).toBeGreaterThan(0);
        done();
      });
    });
--- a/tests/schemas/operations-list-component.json
+++ b/tests/schemas/operations-list-component.json
--- a/tests/schemas/schema-mgr-operationParams.json
+++ b/tests/schemas/schema-mgr-operationParams.json
@ -26,7 +26,7 @@
        "summary": "test get",
        "parameters": [
          {
-            "name": "methodParam",
+            "name": "operationParam",
            "in": "path",
            "type": "string"
          }
@ -41,7 +41,7 @@
        "summary": "test get",
        "parameters": [
          {
-            "name": "methodParam",
+            "name": "operationParam",
            "in": "path",
            "type": "string"
          }
--- a/tests/unit/SpecManager.spec.ts
+++ b/tests/unit/SpecManager.spec.ts
@ -104,47 +104,47 @@ describe('Utils', () => {
      });
    });

-    describe('getMethodParams method', () => {
+    describe('getOperationParams method', () => {
      beforeEach((done:any) => {
-        specMgr.load('/tests/schemas/schema-mgr-methodparams.json').then(done, done.fail);
+        specMgr.load('/tests/schemas/schema-mgr-operationParams.json').then(done, done.fail);
      });

      it('should propagate path parameters', () => {
-        let params = specMgr.getMethodParams('/paths/test1/get');
+        let params = specMgr.getOperationParams('/paths/test1/get');
        params.length.should.be.equal(2);
-        params[0].name.should.be.equal('methodParam');
+        params[0].name.should.be.equal('operationParam');
        params[1].name.should.be.equal('pathParam');
      });

      it('should inject correct pointers', () => {
-        let params = specMgr.getMethodParams('/paths/test1/get');
+        let params = specMgr.getOperationParams('/paths/test1/get');
        params[0]._pointer.should.be.equal('/paths/test1/get/parameters/0');
        params[1]._pointer.should.be.equal('/paths/test1/parameters/0');
      });

      it('should accept pointer directly to parameters', () => {
-        let params = specMgr.getMethodParams('/paths/test1/get/parameters');
+        let params = specMgr.getOperationParams('/paths/test1/get/parameters');
        expect(params).not.toBeNull();
        params.length.should.be.equal(2);
      });

      it('should resolve path params from Parameters Definitions Object', () => {
-        let params = specMgr.getMethodParams('/paths/test2/get');
+        let params = specMgr.getOperationParams('/paths/test2/get');
        params.length.should.be.equal(2);
-        params[0].name.should.be.equal('methodParam');
+        params[0].name.should.be.equal('operationParam');
        params[1].name.should.be.equal('extParam');
        params[1]._pointer.should.be.equal('#/parameters/extparam');
      });

-      it('should resolve method params from Parameters Definitions Object', () => {
-        let params = specMgr.getMethodParams('/paths/test3/get');
+      it('should resolve operation params from Parameters Definitions Object', () => {
+        let params = specMgr.getOperationParams('/paths/test3/get');
        params.length.should.be.equal(1);
        params[0].name.should.be.equal('extParam');
        params[0]._pointer.should.be.equal('#/parameters/extparam');
      });

      it('should throw for parameters other than array', () => {
-        let func = () => specMgr.getMethodParams('/paths/test4/get');
+        let func = () => specMgr.getOperationParams('/paths/test4/get');
        expect(func).toThrow();
      });
    });