Merge master into dependabot/npm_and_yarn/library/webpack-5.104.1

Author: asyncapi-bot-eve

library/src/containers/Operations/Operation.tsx

@@ -16,6 +16,7 @@ import { CommonHelpers, SchemaHelpers } from '../../helpers';
 import { EXTERAL_DOCUMENTATION_TEXT } from '../../constants';
 import { PayloadType, PluginSlot } from '../../types';
 import { PluginManager } from '../../helpers/pluginManager';
+import { ServersList } from './ServersList';
 import { SlotRenderer } from '../../components/PluginSlotRenderer';
 import { usePlugin } from '../../contexts/usePlugin';
 
@@ -26,6 +27,13 @@ interface Props {
   channel: ChannelInterface;
 }
 
+// Construct the full relative URL, including path, query parameters to avoid path overwrite when
+// location.hash is included
+const location = globalThis.location;
+const relativePathname = location
+  ? `${location.pathname}${location.search}`
+  : '';
+
 export const Operation: React.FunctionComponent<Props> = (props) => {
   const { type = PayloadType.SEND, operation, channelName, channel } = props;
   const config = useConfig();
@@ -43,31 +51,16 @@ export const Operation: React.FunctionComponent<Props> = (props) => {
     channel.parameters() !== undefined
       ? SchemaHelpers.parametersToSchema(channel.parameters())
       : undefined;
-
   return (
     <div>
       <div className="panel-item--center px-8">
         <OperationInfo {...props} />
-        {servers && servers.length > 0 ? (
-          <div className="mt-2 text-sm">
-            <p>Available only on servers:</p>
-            <ul className="flex flex-wrap leading-normal">
-              {servers.map((server) => (
-                <li className="inline-block mt-2 mr-2" key={server.id()}>
-                  <a
-                    href={`${window.location.pathname}#${CommonHelpers.getIdentifier(
-                      'server-' + server.id(),
-                      config,
-                    )}`}
-                    className="border border-solid border-blue-300 hover:bg-blue-300 hover:text-blue-600 text-blue-500 font-bold no-underline text-xs rounded px-3 py-1 cursor-pointer"
-                  >
-                    <span className="underline">{server.id()}</span>
-                  </a>
-                </li>
-              ))}
-            </ul>
-          </div>
-        ) : null}
+
+        <ServersList
+          servers={servers || []}
+          config={config}
+          relativePathname={relativePathname}
+        />
 
         {parameters && (
           <div
@@ -411,26 +404,11 @@ export const OperationReplyChannelInfo: React.FunctionComponent<Props> = ({
           <Markdown>{channel.description()}</Markdown>
         </div>
       )}
-      {servers && servers.length > 0 ? (
-        <div className="mt-2 text-sm">
-          <p>Available only on servers:</p>
-          <ul className="flex flex-wrap leading-normal">
-            {servers.map((server) => (
-              <li className="inline-block mt-2 mr-2" key={server.id()}>
-                <a
-                  href={`${window.location.pathname}#${CommonHelpers.getIdentifier(
-                    'server-' + server.id(),
-                    config,
-                  )}`}
-                  className="border border-solid border-blue-300 hover:bg-blue-300 hover:text-blue-600 text-blue-500 font-bold no-underline text-xs rounded px-3 py-1 cursor-pointer"
-                >
-                  <span className="underline">{server.id()}</span>
-                </a>
-              </li>
-            ))}
-          </ul>
-        </div>
-      ) : null}
+      <ServersList
+        servers={servers || []}
+        config={config}
+        relativePathname={relativePathname}
+      />
       {channel.messages().all().length > 1 ? (
         <div className="mt-2">
           <span className="text-xs text-gray-700">Messages:</span>

library/src/containers/Operations/ServersList.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { ServerInterface } from '@asyncapi/parser';
+import { CommonHelpers } from '../../helpers';
+import { ConfigInterface } from '../../config';
+
+interface ServersListProps {
+  servers: ServerInterface[];
+  config: ConfigInterface;
+  relativePathname: string;
+}
+
+export const ServersList: React.FC<ServersListProps> = ({
+  servers,
+  config,
+  relativePathname,
+}) => {
+  if (!servers || servers.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="mt-2 text-sm">
+      <p>Available only on servers:</p>
+      <ul className="flex flex-wrap leading-normal">
+        {servers.map((server) => (
+          <li className="inline-block mt-2 mr-2" key={server.id()}>
+            <a
+              href={`${relativePathname}#${CommonHelpers.getIdentifier(
+                'server-' + server.id(),
+                config,
+              )}`}
+              className="border border-solid border-blue-300 hover:bg-blue-300 hover:text-blue-600 text-blue-500 font-bold no-underline text-xs rounded px-3 py-1 cursor-pointer"
+            >
+              <span className="underline">{server.id()}</span>
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};