swagger-ui: DeepLinking onClick does not scroll or open Operation.

Hey Can you assign this to me? I will try to fix the issue Thank you

@shockey Hi! After taking a long hiatus, I’m ready to jump back in to help get this issue resolved. Is there anywhere you’d recommend I start first?

Any news on this? I have also tried to add <a href="#/components/schemas/event">Event</a> inside a description without anything happening when clicking it… Expected behavior is that the page scrolls to the Event component

If anyone wants dynamic linking this is my current implementation using typescript and SwaggerUi v3.17.5.

const CustomInfoPlugin = () => {
    return {
        wrapComponents: {
            info: () => () => null,
            schemes: () => () => null,
            operations: (Original: React.ComponentClass, system: any) => (props: any) => {
                return (
                    <CustomOperationContainer originalOpContainer={<Original {...props} />} system={system} />
                );
            }
        }
    };
};
export default CustomInfoPlugin;

export class CustomOperationContainer extends React.Component<CustomOpProps, CustomOpState> {

    // Opens and scrolls to selected link
    choosePath = (path: string) => {
        const scrollId; // Operation's div id
        const operationId; // Name of operation
        const tag; // The tag of the operation
        const previousPath = this.state.previousPath;
        const layoutActions = this.props.system.layoutActions;

        // Closes the previously opened path
        if (previousPath !== null && previousPath.operationId !== operationId) {
            layoutActions.show(['operations', previousPath.tag, previousPath.operationId], false);
        }

        // Opens the operation container
        layoutActions.show(['operations', tag, operationId], true);
        this.delay(500).then(() => this.scrollTo(scrollId));
    }

    scrollTo = (scrollId: string) => {
        let element = document.getElementById(scrollId);
        if (element) {
            element.scrollIntoView();
        }
    }

    /*...*/
}

A sidebar uses choosePath as a callback function and sends the desired link. layoutActions.show opens the chosen link and scrollTo will scroll the view to that link. Because it takes some time for the link to open I used a delay. While I understand using setTimeout is not the best I couldn’t figure out another way around it. Hope this helps!

Quoting myself from #3963, since it’s relevant here:

Currently, the deep linking feature isn’t suitable for linking dynamically to operations as you are in your example - see #3958 for discussion on this. It’s mostly useful as a way to share links to a particular operation to colleagues, or get back to what you were looking at when reopening a tab.

I’m going to close this, because part of implementing #3958 will involve addressing the target=“_blank” - but I’d like to highlight that you filing this did help out, I hadn’t thought of this particular use case 😄