fix: prefix operation ids with parent id (#1245)

Co-authored-by: ben.blowers <ben.blowers@imanage.com>
Co-authored-by: anastasiia-developer <anastasiia@redocly.com>

e2e/integration/menu.e2e.ts

@@ -49,7 +49,7 @@ describe('Menu', () => {
     cy.location('hash').should('equal', '#tag/pet');
 
     cy.contains('[role=menuitem]', 'Find pet by ID').click({ force: true });
-    cy.location('hash').should('equal', '#operation/getPetById');
+    cy.location('hash').should('equal', '#tag/pet/operation/getPetById');
   });
 
   it('should deactivate tag when other is activated', () => {

e2e/integration/misc.e2e.ts

@@ -21,12 +21,12 @@ describe('Servers', () => {
       initReDoc(win, spec, {});
 
       // TODO add cy-data attributes
-      cy.get('[data-section-id="operation/addPet"]').should(
+      cy.get('[data-section-id="tag/pet/operation/addPet"]').should(
         'contain',
         'http://petstore.swagger.io/v2/pet',
       );
 
-      cy.get('[data-section-id="operation/addPet"]').should(
+      cy.get('[data-section-id="tag/pet/operation/addPet"]').should(
         'contain',
         'http://petstore.swagger.io/sandbox/pet',
       );
@@ -40,7 +40,7 @@ describe('Servers', () => {
       initReDoc(win, spec, {});
 
       // TODO add cy-data attributes
-      cy.get('[data-section-id="operation/addPet"]').should(
+      cy.get('[data-section-id="tag/pet/operation/addPet"]').should(
         'contain',
         'http://localhost:' + win.location.port + '/pet',
       );
@@ -55,7 +55,7 @@ describe('Servers', () => {
       initReDoc(win, spec, {});
 
       // TODO add cy-data attributes
-      cy.get('[data-section-id="operation/addPet"]').should(
+      cy.get('[data-section-id="tag/pet/operation/addPet"]').should(
         'contain',
         'http://localhost:' + win.location.port + '/pet',
       );

e2e/integration/urls.e2e.ts

@@ -0,0 +1,19 @@
+describe('Supporting both operation/* and parent/*/operation* urls', () => {
+  beforeEach(() => {
+    cy.visit('e2e/standalone.html');
+  });
+
+  it('should supporting operation/* url', () => {
+    cy.url().then(loc => {
+      cy.visit(loc + '#operation/updatePet');
+      cy.get('li[data-item-id="tag/pet/operation/updatePet"]').should('be.visible');
+    });
+  });
+
+  it('should supporting parent/*/operation url', () => {
+    cy.url().then(loc => {
+      cy.visit(loc + '#tag/pet/operation/addPet');
+      cy.get('li[data-item-id="tag/pet/operation/addPet"]').should('be.visible');
+    });
+  });
+});

src/components/Operation/Operation.tsx

@@ -17,6 +17,7 @@ import { RequestSamples } from '../RequestSamples/RequestSamples';
 import { ResponsesList } from '../Responses/ResponsesList';
 import { ResponseSamples } from '../ResponseSamples/ResponseSamples';
 import { SecurityRequirements } from '../SecurityRequirement/SecurityRequirement';
+import { SECTION_ATTR } from '../../services';
 
 const Description = styled.div`
   margin-bottom: ${({ theme }) => theme.spacing.unit * 6}px;
@@ -37,7 +38,7 @@ export class Operation extends React.Component<OperationProps> {
     return (
       <OptionsContext.Consumer>
         {options => (
-          <Row>
+          <Row {...{ [SECTION_ATTR]: operation.operationHash }} id={operation.operationHash}>
             <MiddlePanel>
               <H2>
                 <ShareLink to={operation.id} />

src/services/models/Operation.ts

@@ -70,6 +70,7 @@ export class OperationModel implements IMenuItem {
 
   pointer: string;
   operationId?: string;
+  operationHash?: string;
   httpVerb: string;
   deprecated: boolean;
   path: string;
@@ -123,9 +124,10 @@ export class OperationModel implements IMenuItem {
       // TODO: update getting pathInfo for overriding servers on path level
       this.servers = normalizeServers('', operationSpec.servers || operationSpec.pathServers || []);
     } else {
+      this.operationHash = operationSpec.operationId && 'operation/' + operationSpec.operationId
       this.id =
         operationSpec.operationId !== undefined
-          ? 'operation/' + operationSpec.operationId
+          ? (parent ? parent.id + '/' : '') + this.operationHash
           : parent !== undefined
           ? parent.id + this.pointer
           : this.pointer;