miniflare/dist/local-explorer-ui/assets/_namespaceId-Bm0P_JmR.js

Fun, full-featured, fully-local simulator for Cloudflare Workers

import{t as e}from"./DotsThree.es-DlSAzjaQ.js";import{t}from"./Pencil.es-oZy-hm2K.js";import{n,t as r}from"./dialog-oqh8l3l3zutpibxx-5_bvLLm7.js";import{t as i}from"./dropdown-ncwhcd912vmone8k-B21iHmGo.js";import{t as a}from"./Breadcrumbs-CEo9kTmA.js";import{t as o}from"./table-inweecadl3her7pd-BOgC5mM4.js";import{$ as s,Gn as c,Jn as l,Kn as u,Ln as d,Tt as f,Un as p,at as m,gt as h,ht as g,mt as _,nt as v,pt as y,zn as b}from"./index-BPLH0X4i.js";import{t as x}from"./CopyButton-CAmAekjd.js";var S=l(c(),1);function C(e){if(!e.trim())return`Key is required`;let t=new TextEncoder().encode(e).length;return t>512?`Key must be 512 bytes or less (currently ${t} bytes)`:null}var w=u();function T({onAdd:e,clearSignal:t=0}){let[n,r]=(0,S.useState)(``),[i,a]=(0,S.useState)(``),[o,s]=(0,S.useState)(!1),[c,l]=(0,S.useState)(null);(0,S.useEffect)(()=>{t>0&&(r(``),a(``),l(null))},[t]);let u=e=>{let t=e.target.value;r(t),l(t.trim()?C(t):null)},p=async t=>{t.preventDefault();let o=C(n);if(o){l(o);return}try{s(!0),await e(n,i)&&(r(``),a(``),l(null))}finally{s(!1)}},m=!!C(n);return(0,w.jsxs)(`form`,{className:`mb-4 flex flex-col items-start gap-2 lg:flex-row`,onSubmit:p,children:[(0,w.jsxs)(`div`,{className:`flex w-full shrink-0 flex-col lg:w-2xs`,children:[(0,w.jsx)(`label`,{className:`sr-only`,htmlFor:`add-key`,children:`Key`}),(0,w.jsx)(`input`,{id:`add-key`,className:d(`focus-visible:ring-kumo-ring h-9 w-full rounded-md border border-kumo-fill bg-kumo-base px-3 font-mono text-sm text-kumo-default placeholder:text-kumo-subtle focus:border-kumo-brand focus:outline-none focus-visible:ring-2 disabled:bg-kumo-elevated disabled:text-kumo-subtle`,{"border-kumo-danger focus-visible:ring-2 focus-visible:ring-kumo-danger":c}),placeholder:`Key`,value:n,onChange:u,disabled:o}),c&&(0,w.jsx)(`span`,{className:`mt-1 text-xs text-kumo-danger`,children:c})]}),(0,w.jsxs)(`div`,{className:`flex w-full flex-1 flex-col lg:min-w-2xs`,children:[(0,w.jsx)(`label`,{className:`sr-only`,htmlFor:`add-value`,children:`Value`}),(0,w.jsx)(`textarea`,{id:`add-value`,className:`focus-visible:ring-kumo-ring max-h-32 min-h-9 w-full resize-none overflow-y-auto rounded-md border border-kumo-fill bg-kumo-base px-3 py-2 font-mono text-sm text-kumo-default placeholder:text-kumo-subtle focus:border-kumo-brand focus:outline-none focus-visible:ring-2 disabled:bg-kumo-elevated disabled:text-kumo-subtle lg:field-sizing-content`,placeholder:`Value`,value:i,onChange:e=>a(e.target.value),disabled:o})]}),(0,w.jsx)(f,{type:`submit`,className:`w-full shrink-0 lg:w-auto`,variant:`primary`,disabled:o||m,loading:o,children:o?`Adding...`:`Add entry`})]})}function E(e,t=100){return e===``?`(empty)`:e===null?JSON.stringify(e):e.length>t?e.slice(0,t)+`...`:e}function D({onEdit:r,onDelete:a}){return(0,w.jsxs)(i,{children:[(0,w.jsx)(i.Trigger,{render:(0,w.jsx)(f,{variant:`ghost`,shape:`square`,className:`h-7! w-7!`,"aria-label":`Actions`,children:(0,w.jsx)(e,{size:16,weight:`bold`})})}),(0,w.jsxs)(i.Content,{align:`end`,sideOffset:4,children:[(0,w.jsxs)(i.Item,{className:`flex items-center gap-2`,onClick:r,children:[(0,w.jsx)(t,{}),(0,w.jsx)(`span`,{children:`Edit`})]}),(0,w.jsx)(i.Separator,{}),(0,w.jsxs)(i.Item,{className:`flex items-center gap-2 text-kumo-danger`,onClick:a,children:[(0,w.jsx)(n,{}),(0,w.jsx)(`span`,{children:`Delete`})]})]})]})}function O({entries:e,onSave:t,onDelete:n}){let[r,i]=(0,S.useState)(null),[a,s]=(0,S.useState)(!1),c=e=>{i({originalKey:e.key.name,key:e.key.name,value:e.value??``,keyError:null})},l=e=>{r&&i({...r,key:e,keyError:e.trim()?C(e):null})},u=async()=>{if(!r)return;let e=C(r.key);if(e){i({...r,keyError:e});return}try{s(!0),await t(r.originalKey,r.key,r.value)&&i(null)}finally{s(!1)}},p=()=>{i(null)},m=e=>{e.key===`Escape`?p():e.key===`Enter`&&(e.metaKey||e.ctrlKey)&&u()},h=r?!!C(r.key):!1;return(0,w.jsx)(`div`,{className:`overflow-hidden rounded-lg border border-kumo-fill`,children:(0,w.jsxs)(o,{children:[(0,w.jsx)(o.Header,{children:(0,w.jsxs)(o.Row,{children:[(0,w.jsx)(o.Head,{children:`Key`}),(0,w.jsx)(o.Head,{children:`Value`}),(0,w.jsx)(o.Head,{className:`w-12`})]})}),(0,w.jsx)(o.Body,{children:e.map(e=>{let t=r?.originalKey===e.key.name;return(0,w.jsxs)(o.Row,{className:`group`,children:[(0,w.jsx)(o.Cell,{className:`group/cell align-top`,children:t&&r?(0,w.jsxs)(`div`,{className:`flex flex-col`,children:[(0,w.jsx)(`label`,{className:`sr-only`,htmlFor:`edit-key-${e.key.name}`,children:`Key`}),(0,w.jsx)(`input`,{id:`edit-key-${e.key.name}`,className:d(`focus-visible:ring-kumo-ring min-h-8 w-full rounded border border-kumo-brand bg-kumo-base px-2 py-1.5 font-mono text-[13px] text-kumo-default focus:outline-none focus-visible:ring-2 disabled:bg-kumo-elevated disabled:text-kumo-subtle`,{"border-kumo-danger focus-visible:ring-2 focus-visible:ring-kumo-danger":r.keyError}),value:r.key,onChange:e=>l(e.target.value),onKeyDown:m,disabled:a,autoFocus:!0}),r.keyError&&(0,w.jsx)(`span`,{className:`mt-1 text-xs text-kumo-danger`,children:r.keyError})]}):(0,w.jsxs)(`div`,{className:`group/cell flex items-center gap-1.5`,children:[(0,w.jsx)(`code`,{className:`font-medium text-kumo-link`,children:e.key.name}),(0,w.jsx)(x,{text:e.key.name})]})}),(0,w.jsx)(o.Cell,{className:`group/cell max-w-100 font-mono text-[13px]`,children:t&&r?(0,w.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,w.jsx)(`label`,{className:`sr-only`,htmlFor:`edit-value-${e.key.name}`,children:`Value`}),(0,w.jsx)(`textarea`,{id:`edit-value-${e.key.name}`,className:`focus-visible:ring-kumo-ring field-sizing-content max-h-50 min-h-8 w-full resize-none overflow-y-auto rounded border border-kumo-brand bg-kumo-base px-2 py-1.5 font-mono text-[13px] text-kumo-default focus:outline-none focus-visible:ring-2 disabled:bg-kumo-elevated disabled:text-kumo-subtle`,value:r.value,onChange:e=>i({...r,value:e.target.value}),onKeyDown:m,disabled:a}),(0,w.jsxs)(`div`,{className:`flex justify-end gap-1.5`,children:[(0,w.jsx)(f,{variant:`secondary`,size:`sm`,onClick:p,disabled:a,children:`Cancel`}),(0,w.jsx)(f,{variant:`primary`,size:`sm`,onClick:u,disabled:a||h,loading:a,children:a?`Saving...`:`Save`})]})]}):(0,w.jsxs)(`div`,{className:`flex min-w-0 items-center gap-1.5`,children:[(0,w.jsx)(`span`,{className:d(`min-w-0 truncate`,{"text-kumo-subtle":!e.value}),children:E(e.value)}),e.value&&(0,w.jsx)(x,{text:e.value})]})}),(0,w.jsx)(o.Cell,{className:`text-right whitespace-nowrap`,children:!t&&(0,w.jsx)(D,{onEdit:()=>c(e),onDelete:()=>void n(e.key.name)})})]},e.key.name)})})]})})}function k({onSearch:e,disabled:t=!1}){let[n,r]=(0,S.useState)(``);return(0,w.jsxs)(`form`,{className:`flex items-center gap-2`,onSubmit:t=>{t.preventDefault(),e(n)},children:[(0,w.jsx)(`label`,{className:`sr-only`,htmlFor:`search-prefix`,children:`Search keys by prefix`}),(0,w.jsx)(`input`,{id:`search-prefix`,className:`focus-visible:ring-kumo-ring h-9 max-w-100 flex-1 rounded-md border border-kumo-fill bg-kumo-base px-3 font-mono text-sm text-kumo-default focus:border-kumo-brand focus:outline-none focus-visible:ring-2 disabled:bg-kumo-elevated disabled:text-kumo-subtle`,placeholder:`Search keys by prefix...`,value:n,onChange:e=>r(e.target.value),disabled:t}),(0,w.jsx)(f,{type:`submit`,variant:`secondary`,disabled:t,children:`Search`})]})}var A=(e,t)=>e.filter(e=>e.key.name!==t),j=(e,t,n)=>e.map(e=>e.key.name===t?{key:{name:t},value:n}:e),M=(e,t)=>[t,...e],N=(e,t)=>e.some(e=>e.key.name===t),P=b(`__root__`);function F(e){if(typeof e!=`object`||!e||!(`errors`in e))return!1;let{errors:t}=e;return t?.some(e=>e.code===10009)??!1}async function I(e,t){let n=new Map;return await Promise.all(t.map(async t=>{try{let r=await g({path:{namespace_id:e,key_name:t.name},parseAs:`text`});n.set(t,r.data??null)}catch(e){if(F(e)){n.set(t,null);return}throw e}})),n}function L(){let{namespaceId:e}=s.useParams(),t=s.useLoaderData(),n=P.useLoaderData(),i=p(),o=(0,S.useMemo)(()=>v(n.workers,i.location.searchStr)?.bindings?.kv?.find(t=>t.id===e)?.bindingName,[n.workers,i.location.searchStr,e]),[c,l]=(0,S.useState)(t.entries),[u,d]=(0,S.useState)(t.cursor),[b,x]=(0,S.useState)(t.hasMore),[C,E]=(0,S.useState)(null),[D,F]=(0,S.useState)(!1),[L,R]=(0,S.useState)(null),[z,B]=(0,S.useState)(!1),[V,H]=(0,S.useState)(!1),[U,W]=(0,S.useState)(null),[G,K]=(0,S.useState)(!1),[q,ee]=(0,S.useState)(0),[J,Y]=(0,S.useState)(void 0);(0,S.useEffect)(()=>{l(t.entries),d(t.cursor),x(t.hasMore),E(null),F(!1),W(null),K(!1),R(null),Y(void 0),B(!1),H(!1)},[t]);let X=(0,S.useCallback)(async(t,n)=>{try{t?H(!0):(B(!0),l([])),R(null);let r=await _({path:{namespace_id:e},query:{cursor:t,limit:50,prefix:n}}),i=r.data?.result??[],a=new Map;i.length>0&&(a=await I(e,i));let o=i.map(e=>({key:e,value:a.get(e)??null}));l(t?e=>[...e,...o]:o);let s=r.data?.result_info?.cursor;d(s??null),x(!!s)}catch(e){R(e instanceof Error?e.message:`Failed to fetch entries`)}finally{B(!1),H(!1)}},[e]),te=()=>{u&&!V&&X(u,J)},ne=e=>{let t=e||void 0;Y(t),X(void 0,t)},Z=async t=>{try{return(await g({path:{namespace_id:e,key_name:t}})).response.ok}catch{return!1}},re=async(e,t)=>{try{return await Z(e)?(W({key:e,value:t}),!1):(await Q(e,t),!0)}catch(e){return R(e instanceof Error?e.message:`Failed to add entry`),!1}},Q=async(t,n,r=!1)=>{await h({path:{namespace_id:e,key_name:t},body:n});let i={key:{name:t},value:n};l(e=>{let n=N(e,t),a=A(e,t);return n||!r?M(a,i):a})},ie=async(e,t,n)=>{try{return e!==t&&await Z(t)?(W({key:t,value:n,originalKey:e}),!1):(await $(e,t,n),!0)}catch(e){return R(e instanceof Error?e.message:`Failed to save entry`),!1}},$=async(t,n,r,i=!1)=>{await h({path:{namespace_id:e,key_name:n},body:r}),t!==n&&await y({path:{namespace_id:e,key_name:t},body:null});let a={key:{name:n},value:r};l(e=>{let o=t===n?e:A(e,t);return N(o,n)?j(o,n,r):i?o:M(o,a)})};return(0,w.jsxs)(w.Fragment,{children:[(0,w.jsx)(a,{icon:m,title:`KV`,items:[(0,w.jsx)(`span`,{className:`flex items-center gap-1.5`,children:o&&o!==e?(0,w.jsxs)(w.Fragment,{children:[o,(0,w.jsxs)(`span`,{className:`text-kumo-subtle`,children:[`(`,e,`)`]})]}):e},`namespace-id`)]}),(0,w.jsxs)(`div`,{className:`px-6 py-6`,children:[L&&(0,w.jsx)(`div`,{className:`mb-4 rounded-md border border-kumo-danger/20 bg-kumo-danger/8 p-4 text-kumo-danger`,children:L}),(0,w.jsx)(k,{onSearch:ne,disabled:z},e),(0,w.jsx)(`hr`,{className:`my-4 border-kumo-fill`}),(0,w.jsx)(T,{onAdd:re,clearSignal:q}),z?(0,w.jsx)(`div`,{className:`p-12 text-center text-kumo-subtle`,children:`Loading...`}):c.length===0?(0,w.jsx)(`div`,{className:`flex flex-col items-center justify-center space-y-2 p-12 text-center text-kumo-subtle`,children:J?(0,w.jsx)(`p`,{className:`text-sm font-light`,children:`No keys found matching prefix "${J}".`}):(0,w.jsxs)(w.Fragment,{children:[(0,w.jsx)(`h2`,{className:`text-2xl font-medium`,children:`No keys in this namespace`}),(0,w.jsx)(`p`,{className:`text-sm font-light`,children:`Add an entry using the form above.`})]})}):(0,w.jsxs)(w.Fragment,{children:[(0,w.jsx)(`div`,{className:`rounded-lg`,children:(0,w.jsx)(O,{entries:c,onSave:ie,onDelete:e=>E(e)})}),b&&(0,w.jsx)(`div`,{className:`py-4 text-center`,children:(0,w.jsx)(f,{variant:`secondary`,onClick:te,disabled:V,loading:V,children:V?`Loading...`:`Load More`})})]}),(0,w.jsx)(r.Root,{open:C!==null,onOpenChange:e=>!e&&E(null),children:(0,w.jsxs)(r,{className:`p-6`,children:[(0,w.jsx)(r.Title,{className:`mb-4 text-lg font-semibold`,children:`Delete key?`}),(0,w.jsxs)(r.Description,{className:`mb-2 text-kumo-subtle`,children:[`Are you sure you want to delete “`,C,`”? This cannot be undone.`]}),(0,w.jsxs)(`div`,{className:`mt-6 flex justify-end gap-2`,children:[(0,w.jsx)(f,{variant:`secondary`,onClick:()=>E(null),disabled:D,children:`Cancel`}),(0,w.jsx)(f,{variant:`destructive`,onClick:async()=>{if(C)try{F(!0),await y({path:{namespace_id:e,key_name:C},body:null}),l(e=>A(e,C)),E(null)}catch(e){R(e instanceof Error?e.message:`Failed to delete`),E(null)}finally{F(!1)}},disabled:D,loading:D,children:D?`Deleting...`:`Delete`})]})]})}),(0,w.jsx)(r.Root,{open:U!==null,onOpenChange:e=>!e&&W(null),children:(0,w.jsxs)(r,{className:`p-6`,children:[(0,w.jsx)(r.Title,{className:`mb-4 text-lg font-semibold`,children:`Overwrite key?`}),(0,w.jsxs)(r.Description,{className:`mb-2 text-kumo-subtle`,children:[`Key “`,U?.key,`” already exists. Do you want to overwrite its value?`]}),(0,w.jsxs)(`div`,{className:`mt-6 flex justify-end gap-2`,children:[(0,w.jsx)(f,{variant:`secondary`,onClick:()=>W(null),disabled:G,children:`Cancel`}),(0,w.jsx)(f,{variant:`primary`,onClick:async()=>{if(!U)return;let{key:e,value:t,originalKey:n}=U;try{K(!0),n?await $(n,e,t,!0):(await Q(e,t,!0),ee(e=>e+1)),W(null)}catch(e){R(e instanceof Error?e.message:`Failed to overwrite`)}finally{K(!1)}},disabled:G,loading:G,children:G?`Overwriting...`:`Overwrite`})]})]})})]})]})}export{L as component};