@redocly/asyncapi-docs/lib-esm/src/components/Operation.js

Async API docs for Redocly Realm

import{jsx as s,jsxs as i,Fragment as _}from"react/jsx-runtime";import l from"styled-components";import{useAtomValue as j}from"jotai";import{Row as B,SamplesMiddlePanel as C,OperationSamplesPanel as D,Section as H,makeDeepLink as R,CustomBadges as W}from"@redocly/openapi-docs";import{LayoutVariant as I,H4 as v,ArrowUpRightIcon as E,LinkIcon as F}from"@redocly/theme";import N,{useMemo as O,useCallback as V}from"react";import{useNavigate as q}from"react-router-dom";import{TagWithIcon as K,Information as U,ActionTag as G,ShareLink as J}from"./common";import{OperationBinding as Q}from"./OperationBinding";import{layoutAtom as X,routingBasePathAtom as Y}from"../jotai/app";import{useProtocolLabels as Z,useOtelTelemetry as ee}from"../hooks";import{isEqual as se}from"../utils";const we=N.memo(({operation:e,dataSectionId:r,definition:t,headerRow:u,id:f,showDivider:S})=>{var o,c,d;const y=j(X),m=j(Y),b=y===I.STACKED,{getProtocolLabel:$}=Z(),x=ee(),k=O(()=>Object.entries(e?.bindings||{}).map(([n,a])=>({key:n,value:a})),[e?.bindings]),A=O(()=>{var n;return(n=e?.["x-badges"])===null||n===void 0?void 0:n.map(a=>Object.assign(Object.assign({},a),{position:a.position||"after"}))},[e]),w=q(),M=V(n=>{var a,p;const g=(p=Object.entries(((a=t?.components)===null||a===void 0?void 0:a.messages)||{}).find(([ce,z])=>se(z,n)))===null||p===void 0?void 0:p[0];if(!g||!r)return;const L=r.replace(`/${m}/`,"").split("/operations")[0],T=`/${m}${R(L,`messages&m=${g}`)}`;x.send({type:"asyncapi_docs.message.clicked",payload:{message:g}}),w(T)},[r,(o=t?.components)===null||o===void 0?void 0:o.messages,w,m,x]);return e?s(_,{children:i(ne,{sectionId:r,"data-component-name":"Operation/Operation",hasHeader:!!u,children:[u,i(B,{layout:y,children:[i(te,{isStacked:b,children:[i("div",{children:[s(G,{color:e.action,children:$(e.action)}),i(P,{children:[s(W,{badges:A,children:e.title||f}),s(J,{to:`${r}`,"aria-label":`link to ${e.title||f}`})]}),s(U,{summary:e.summary,description:e.description,externalDocs:e.externalDocs}),s(ie,{children:"Messages"}),s(ae,{children:(c=e.messages)===null||c===void 0?void 0:c.map((n,a)=>i(oe,{icon:null,onClick:()=>M(n),children:[n.title||n.name,s(E,{size:"12px"})]},a))}),e.reply&&i(_,{children:[s(P,{children:"Reply"}),i(le,{children:[e.reply.address&&i(h,{children:[s("span",{children:"Address: "}),s("span",{children:e.reply.address.location})]}),e.reply.channel&&i(h,{children:[s("span",{children:"Topic: "}),s("span",{children:e.reply.channel.address})]}),!!(!((d=e.reply.messages)===null||d===void 0)&&d.length)&&i(h,{children:[s("span",{children:"Messages: "}),s("span",{children:e.reply.messages.map(n=>n.title||n.name).join(", ")})]})]})]})]}),S&&s(re,{})]}),s(D,{isStacked:b,className:"panel-container-response-samples",children:!!k.length&&s(Q,{binding:k[0],id:r})})]})]})}):null}),ne=l(H)`
  padding: var(--spacing-lg) 0;
  scroll-margin-top: ${e=>e.hasHeader?"calc(var(--navbar-height) - var(--spacing-xl)*2)":"var(--navbar-height)"} !important;
`,P=l(v)`
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--spacing-xxs) 0;
  position: relative;
  word-break: break-word;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
  :hover {
    ${F} {
      opacity: 1;
      visibility: visible;
    }
  }
`,ie=l(v)`
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  margin: var(--spacing-sm) 0 0 0;
`,ae=l.div`
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) 0;
`,le=l.div`
  display: flex;
  flex-direction: column;
  padding: var(--spacing-xs) 0;
`,h=l(v)`
  & > span:first-child {
    font-weight: var(--font-weight-medium);
  }
`,re=l.div`
  border-bottom: 1px solid var(--border-color-secondary);
`,te=l(C)`
  display: flex;
  justify-content: space-between;
`,oe=l(K)`
  cursor: pointer;
`;export{we as Operation};