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

Async API docs for Redocly Realm

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