@avivbenhamo/polly-kit 0.6.0 → 0.8.0

package/dist/studio/ui/page.js

@@ -4,15 +4,31 @@
  */
 export const STUDIO_MARKUP = `
 <div class="polly-studio">
+<!--
+  Import sits beside the title, not inside the recordings list.
+  It makes a recording rather than picking one, so under the list it read as a
+  footer of that list — something you do *to* the thing above it — and it
+  pushed the list it was supposedly part of into a shorter and shorter box.
+-->
 <header class="ps-bar">
   <div class="ps-brand">
     <h1>polly-studio</h1>
     <p class="ps-tagline">Change what a recorded request replies with, then save it back to the HAR.</p>
   </div>
-  <p class="warn banner">Polly's <code>keepUnusedRequests</code> defaults to <code>false</code>:
-  the next record run deletes every entry it did not exercise, including the ones you edit here.
-  Set <code>persisterOptions.keepUnusedRequests: true</code> before editing.</p>
+  <form id="import" class="ps-import">
+    <h2 class="ps-import-title">Import</h2>
+    <label for="import-name">A HAR from the swagger-recorder extension</label>
+    <div class="ps-import-row">
+      <input id="import-name" name="recordingName" placeholder="recording name, e.g. my-app" />
+      <input id="import-file" name="har" type="file" accept=".har,application/json" />
+      <button type="submit">Import</button>
+    </div>
+    <div id="import-report" aria-live="polite"></div>
+  </form>
 </header>
+<p class="warn banner">Polly's <code>keepUnusedRequests</code> defaults to <code>false</code>:
+the next record run deletes every entry it did not exercise, including the ones you edit here.
+Set <code>persisterOptions.keepUnusedRequests: true</code> before editing.</p>
 <main class="ps-panes">
   <section class="ps-pane ps-pane--list">
     <h2 class="ps-pane-title">Recordings</h2>
@@ -115,6 +131,7 @@ export const STUDIO_STYLE = `
   --ps-ok: #0a6b3d; --ps-ok-line: #b6ddc6; --ps-ok-soft: #e8f4ed;
   --ps-warn: #875700; --ps-warn-line: #ecd3a3; --ps-warn-soft: #fbf2e1;
   --ps-bad: #b3261e; --ps-bad-line: #edbdb9; --ps-bad-soft: #fceceb;
+  --ps-lift: 0 1px 2px rgba(17,23,34,.05), 0 10px 22px -14px rgba(17,23,34,.35);
   --ps-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
 
   color-scheme: light;
@@ -130,8 +147,12 @@ export const STUDIO_STYLE = `
 }
 
 /* Title bar ------------------------------------------------------------ */
+/* The title on the left, import on the right, and the warning on its own line
+   underneath: three things competing for one row left the import squeezed into
+   whatever the banner had not taken. */
 .polly-studio .ps-bar {
-  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.75rem;
+  display: flex; flex-wrap: wrap; align-items: flex-start;
+  justify-content: space-between; gap: .9rem 1.75rem;
   padding: .8rem 1.25rem;
   background: var(--ps-surface);
   border-bottom: 1px solid var(--ps-line);
@@ -140,8 +161,7 @@ export const STUDIO_STYLE = `
 .polly-studio h1 { margin: 0; font-size: 1.0625rem; font-weight: 650; letter-spacing: -.015em; }
 .polly-studio .ps-tagline { margin: 0; font-size: .8125rem; color: var(--ps-ink-soft); }
 .polly-studio .banner {
-  flex: 1 1 26rem; min-width: 16rem; margin: 0;
-  padding: .45rem .7rem;
+  margin: .9rem 1.25rem 0; padding: .45rem .7rem;
   font-size: .78rem; line-height: 1.45;
   background: var(--ps-warn-soft);
   border: 1px solid var(--ps-warn-line); border-left-width: 3px;
@@ -163,6 +183,9 @@ export const STUDIO_STYLE = `
   display: flex; flex-direction: column; min-height: 0;
   border: 1px solid var(--ps-line); border-radius: 12px;
   background: var(--ps-surface);
+  /* Lifted off the paper, so where one region ends and the next begins is a
+     shadow rather than a hairline somebody has to look for. */
+  box-shadow: var(--ps-lift);
   overflow: hidden;
 }
 /* The two browsers read as one surface you pick from; the editor reads as the page you
@@ -210,6 +233,69 @@ export const STUDIO_STYLE = `
 }
 .polly-studio .ps-rec-note { margin: .1rem 0 .3rem .5rem; font-size: .75rem; line-height: 1.4; }
 
+/* Import form ------------------------------------------------------------ */
+/* A card of its own in the title bar. Bounded width so a long page does not
+   stretch it across the screen, and wide enough that the three controls sit on
+   one line at the sizes this is actually used at. */
+.polly-studio .ps-import {
+  display: grid; gap: .35rem;
+  flex: 0 1 34rem; min-width: 17rem;
+  padding: .6rem .7rem;
+  background: var(--ps-sunken);
+  border: 1px solid var(--ps-line); border-radius: 12px;
+  box-shadow: var(--ps-lift);
+}
+.polly-studio .ps-import-title {
+  margin: 0; font-size: .8125rem; font-weight: 650; color: var(--ps-ink);
+}
+.polly-studio .ps-import-row {
+  display: grid; gap: .4rem;
+  grid-template-columns: minmax(7rem, 1fr) minmax(8rem, 1.2fr) auto;
+  align-items: center;
+}
+.polly-studio .ps-import label {
+  font-size: .75rem; font-weight: 600; color: var(--ps-ink-soft);
+}
+.polly-studio .ps-import input {
+  width: 100%; min-width: 0;
+  font-family: var(--ps-mono); font-size: .8125rem; color: var(--ps-ink);
+  background: var(--ps-surface);
+  border: 1px solid var(--ps-line-strong); border-radius: 8px;
+  padding: .4rem .55rem;
+  transition: border-color .12s ease, box-shadow .12s ease;
+}
+.polly-studio .ps-import input:hover { border-color: #a9b5c6; }
+.polly-studio .ps-import input:focus {
+  outline: none; border-color: var(--ps-accent); box-shadow: 0 0 0 3px var(--ps-accent-soft);
+}
+.polly-studio .ps-import input[type="file"] { font-size: .75rem; padding: .3rem .4rem; }
+.polly-studio .ps-import button {
+  font: inherit; font-size: .8125rem; font-weight: 600;
+  justify-self: stretch; white-space: nowrap;
+  padding: .45rem .95rem; border-radius: 8px; cursor: pointer;
+  border: 1px solid transparent;
+  background: var(--ps-accent); color: #fff;
+  transition: background-color .12s ease;
+}
+.polly-studio .ps-import button:hover { background: var(--ps-accent-deep); }
+.polly-studio .ps-import button:focus-visible { outline: 2px solid var(--ps-accent); outline-offset: 2px; }
+.polly-studio .ps-import-result {
+  margin: .2rem 0 0; padding: .5rem .6rem; font-size: .78rem; line-height: 1.5;
+  background: var(--ps-sunken); border: 1px solid var(--ps-line);
+  border-left-width: 3px; border-radius: 0 8px 8px 0;
+}
+/* max-height + overflow-y: auto rather than relying on the pane's own scroll: the pane
+   around this (.ps-pane) is overflow: hidden, so without its own scroll a long skip
+   list would clip silently instead of growing the pane. */
+.polly-studio .ps-import-skips {
+  display: grid; gap: .25rem; margin: .4rem 0 0;
+  max-height: 10rem; overflow-y: auto;
+}
+.polly-studio .ps-import-skips li {
+  padding-left: .5rem; border-left: 2px solid var(--ps-line-strong);
+  font-size: .75rem; line-height: 1.4; color: var(--ps-ink-soft);
+}
+
 /* Request list --------------------------------------------------------- */
 .polly-studio button.entry {
   display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto;
@@ -350,6 +436,7 @@ export const STUDIO_STYLE = `
   .polly-studio .ps-pane--list .ps-scroll { max-height: 18rem; }
 }
 @media (max-width: 34rem) {
+  .polly-studio .ps-import-row { grid-template-columns: minmax(0, 1fr); }
   .polly-studio .ps-fields { grid-template-columns: minmax(0, 1fr); }
   .polly-studio .header-row { grid-template-columns: minmax(0, 1fr); }
   .polly-studio .header-row input[name^="headerName"] { border-right: 0; border-bottom: 1px solid var(--ps-line); }

package/dist/studio/ui/render.d.ts

@@ -1,4 +1,4 @@
-import type { RecordingSummary } from '../stores/types.js';
+import type { ImportResult, RecordingSummary } from '../stores/types.js';
 import type { HarEntry } from '../types.js';
 /**
  * Rendering is string-in, string-out and lives apart from the DOM so it can be tested
@@ -21,5 +21,19 @@ import type { HarEntry } from '../types.js';
  */
 export declare function escapeHtml(value: string | number | boolean | null | undefined): string;
 export declare function renderRecordingList(recordings: RecordingSummary[]): string;
+/**
+ * What an import did, stated rather than implied.
+ *
+ * `replaced` is the line that has to be here: new-wins means an import can
+ * overwrite a response edited in this very UI, and the only thing standing
+ * between that and a silent loss is saying so.
+ *
+ * `pollyWillReject` is the other half: `ImportResult extends ReadResult`, so a
+ * successful import can still land in a file Polly's own `findRecording` will
+ * refuse wholesale — a hand-copied plain HAR whose `creator.name` is still
+ * `swagger-recorder`, say. Without this, the report says "Created" and nothing
+ * else, which reads as success right up until Polly disagrees.
+ */
+export declare function renderImportResult(result: ImportResult): string;
 export declare function renderEntryRow(entry: HarEntry): string;
 export declare function renderEntryDetail(entry: HarEntry): string;

package/dist/studio/ui/render.js

@@ -66,6 +66,34 @@ export function renderRecordingList(recordings) {
         .join('');
     return `<ul class="recordings">${rows}</ul>`;
 }
+/**
+ * What an import did, stated rather than implied.
+ *
+ * `replaced` is the line that has to be here: new-wins means an import can
+ * overwrite a response edited in this very UI, and the only thing standing
+ * between that and a silent loss is saying so.
+ *
+ * `pollyWillReject` is the other half: `ImportResult extends ReadResult`, so a
+ * successful import can still land in a file Polly's own `findRecording` will
+ * refuse wholesale — a hand-copied plain HAR whose `creator.name` is still
+ * `swagger-recorder`, say. Without this, the report says "Created" and nothing
+ * else, which reads as success right up until Polly disagrees.
+ */
+export function renderImportResult(result) {
+    const verb = result.created ? 'Created' : 'Updated';
+    const counts = [`added ${result.added}`, `replaced ${result.replaced}`];
+    if (result.skipped.length > 0)
+        counts.push(`skipped ${result.skipped.length}`);
+    const skips = result.skipped.length === 0
+        ? ''
+        : `<ul class="ps-import-skips">${result.skipped
+            .map((skip) => `<li><code>${escapeHtml(skip.url)}</code> — ${escapeHtml(skip.reason)}</li>`)
+            .join('')}</ul>`;
+    const rejectWarning = result.pollyWillReject === null
+        ? ''
+        : `<p class="ps-notice warn">Polly will reject this: ${escapeHtml(result.pollyWillReject)}</p>`;
+    return `<p class="ps-import-result">${verb} <code>${escapeHtml(result.id)}</code> — ${escapeHtml(counts.join(', '))}.</p>${skips}${rejectWarning}`;
+}
 /**
  * The other half of the same problem `escapeHtml`'s `String(value)` closes, and the half
  * stringifying a leaf cannot reach. `isHarShaped` checks only that `log.entries` is an
@@ -164,8 +192,13 @@ function entryDetail(entry) {
 
     <div class="actions">
       <button name="save">Save response</button>
+      <button name="duplicate" title="Append a copy to this request's group, replayed the next time the same request is made">Duplicate for next call</button>
       <button name="delete" class="danger">Delete entry</button>
     </div>
+    <p class="note">Duplicating adds a second answer to the <em>same</em> request:
+    Polly replays <code>_order 0</code> on the first call, this copy on the second.
+    It cannot become a different request — the <code>_id</code> is a hash of the
+    request, and an edited URL under the old hash would match nothing.</p>
   </div>
 </section>`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avivbenhamo/polly-kit",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "Drop-in record/replay of an app's HTTP traffic with Polly.JS, plus the polly-studio editor. Bring your own host policy.",
   "license": "MIT",
   "type": "module",