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

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

import{c as e,s as t,t as n,z as r}from"./useRouterState-DkU0JPAO.js";import{Vt as i,r as a}from"./button-cdxnqcgzwko8ooha-DW4HgSd6.js";import{t as o}from"./DotsThree.es-DeZ0Dokf.js";import{t as s}from"./Pencil.es-D4Vy81Ny.js";import{n as c,t as l}from"./dialog-oqh8l3l3zutpibxx-6QAIfPjB.js";import{t as u}from"./dropdown-ncwhcd912vmone8k-BMBcB-5m.js";import{t as d}from"./table-inweecadl3her7pd-BRHbXqg_.js";import{t as f}from"./Breadcrumbs-D11-yw8F.js";import{$ as p,Lt as m,_t as h,bt as g,rt as _,st as v,vt as y,yt as b}from"./index-CkemaNd1.js";import{t as x}from"./CopyButton-MCFWdQEh.js";var S=r(t(),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=e();function T({onAdd:e,clearSignal:t=0}){let[n,r]=(0,S.useState)(``),[o,s]=(0,S.useState)(``),[c,l]=(0,S.useState)(!1),[u,d]=(0,S.useState)(null);(0,S.useEffect)(()=>{t>0&&(r(``),s(``),d(null))},[t]);let f=e=>{let t=e.target.value;r(t),d(t.trim()?C(t):null)},p=async t=>{t.preventDefault();let i=C(n);if(i){d(i);return}try{l(!0),await e(n,o)&&(r(``),s(``),d(null))}finally{l(!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:i(`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":u}),placeholder:`Key`,value:n,onChange:f,disabled:c}),u&&(0,w.jsx)(`span`,{className:`mt-1 text-xs text-kumo-danger`,children:u})]}),(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:o,onChange:e=>s(e.target.value),disabled:c})]}),(0,w.jsx)(a,{type:`submit`,className:`w-full shrink-0 lg:w-auto`,variant:`primary`,disabled:c||m,loading:c,children:c?`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:e,onDelete:t}){return(0,w.jsxs)(u,{children:[(0,w.jsx)(u.Trigger,{render:(0,w.jsx)(a,{variant:`ghost`,shape:`square`,className:`h-7! w-7!`,"aria-label":`Actions`,children:(0,w.jsx)(o,{size:16,weight:`bold`})})}),(0,w.jsxs)(u.Content,{align:`end`,sideOffset:4,children:[(0,w.jsxs)(u.Item,{className:`flex items-center gap-2`,onClick:e,children:[(0,w.jsx)(s,{}),(0,w.jsx)(`span`,{children:`Edit`})]}),(0,w.jsx)(u.Separator,{}),(0,w.jsxs)(u.Item,{className:`flex items-center gap-2 text-kumo-danger`,onClick:t,children:[(0,w.jsx)(c,{}),(0,w.jsx)(`span`,{children:`Delete`})]})]})]})}function O({entries:e,onSave:t,onDelete:n}){let[r,o]=(0,S.useState)(null),[s,c]=(0,S.useState)(!1),l=e=>{o({originalKey:e.key.name,key:e.key.name,value:e.value??``,keyError:null})},u=e=>{r&&o({...r,key:e,keyError:e.trim()?C(e):null})},f=async()=>{if(!r)return;let e=C(r.key);if(e){o({...r,keyError:e});return}try{c(!0),await t(r.originalKey,r.key,r.value)&&o(null)}finally{c(!1)}},p=()=>{o(null)},m=e=>{e.key===`Escape`?p():e.key===`Enter`&&(e.metaKey||e.ctrlKey)&&f()},h=r?!!C(r.key):!1;return(0,w.jsx)(`div`,{className:`overflow-hidden rounded-lg border border-kumo-fill`,children:(0,w.jsxs)(d,{children:[(0,w.jsx)(d.Header,{children:(0,w.jsxs)(d.Row,{children:[(0,w.jsx)(d.Head,{children:`Key`}),(0,w.jsx)(d.Head,{children:`Value`}),(0,w.jsx)(d.Head,{className:`w-12`})]})}),(0,w.jsx)(d.Body,{children:e.map(e=>{let t=r?.originalKey===e.key.name;return(0,w.jsxs)(d.Row,{className:`group`,children:[(0,w.jsx)(d.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:i(`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=>u(e.target.value),onKeyDown:m,disabled:s,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)(d.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=>o({...r,value:e.target.value}),onKeyDown:m,disabled:s}),(0,w.jsxs)(`div`,{className:`flex justify-end gap-1.5`,children:[(0,w.jsx)(a,{variant:`secondary`,size:`sm`,onClick:p,disabled:s,children:`Cancel`}),(0,w.jsx)(a,{variant:`primary`,size:`sm`,onClick:f,disabled:s||h,loading:s,children:s?`Saving...`:`Save`})]})]}):(0,w.jsxs)(`div`,{className:`flex min-w-0 items-center gap-1.5`,children:[(0,w.jsx)(`span`,{className:i(`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)(d.Cell,{className:`text-right whitespace-nowrap`,children:!t&&(0,w.jsx)(D,{onEdit:()=>l(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)(a,{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=m(`__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 b({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}=p.useParams(),t=p.useLoaderData(),r=P.useLoaderData(),i=n(),o=(0,S.useMemo)(()=>_(r.workers,i.location.searchStr)?.bindings?.kv?.find(t=>t.id===e)?.bindingName,[r.workers,i.location.searchStr,e]),[s,c]=(0,S.useState)(t.entries),[u,d]=(0,S.useState)(t.cursor),[m,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)(()=>{c(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),c([])),R(null);let r=await y({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}));c(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 b({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 g({path:{namespace_id:e,key_name:t},body:n});let i={key:{name:t},value:n};c(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 g({path:{namespace_id:e,key_name:n},body:r}),t!==n&&await h({path:{namespace_id:e,key_name:t},body:null});let a={key:{name:n},value:r};c(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)(f,{icon:v,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...`}):s.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:s,onSave:ie,onDelete:e=>E(e)})}),m&&(0,w.jsx)(`div`,{className:`py-4 text-center`,children:(0,w.jsx)(a,{variant:`secondary`,onClick:te,disabled:V,loading:V,children:V?`Loading...`:`Load More`})})]}),(0,w.jsx)(l.Root,{open:C!==null,onOpenChange:e=>!e&&E(null),children:(0,w.jsxs)(l,{className:`p-6`,children:[(0,w.jsx)(l.Title,{className:`mb-4 text-lg font-semibold`,children:`Delete key?`}),(0,w.jsxs)(l.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)(a,{variant:`secondary`,onClick:()=>E(null),disabled:D,children:`Cancel`}),(0,w.jsx)(a,{variant:`destructive`,onClick:async()=>{if(C)try{F(!0),await h({path:{namespace_id:e,key_name:C},body:null}),c(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)(l.Root,{open:U!==null,onOpenChange:e=>!e&&W(null),children:(0,w.jsxs)(l,{className:`p-6`,children:[(0,w.jsx)(l.Title,{className:`mb-4 text-lg font-semibold`,children:`Overwrite key?`}),(0,w.jsxs)(l.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)(a,{variant:`secondary`,onClick:()=>W(null),disabled:G,children:`Cancel`}),(0,w.jsx)(a,{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};