[web-console] Adjust phrasing and naming in multiple UI elements

Karakatiza666 · Karakatiza666 · commit 8fc5f7a831eb · 2026-05-14T17:41:52.000Z
Signed-off-by: Karakatiza666 &lt;bulakh.96@gmail.com&gt;
diff --git a/js-packages/web-console/src/lib/components/dialogs/GenericDialog.svelte b/js-packages/web-console/src/lib/components/dialogs/GenericDialog.svelte
@@ -11,13 +11,15 @@
     danger,
     disabled,
     noclose,
+    swapActions,
     children
   }: {
     content: GlobalDialogContent
     danger?: boolean
     disabled?: boolean
     /** When set, the dialog has no "X" button and does not auto-close on cancel/click-away. */
     noclose?: boolean
+    swapActions?: boolean
     children?: Snippet
   } = $props()
 
@@ -67,11 +69,12 @@
       <button
         onclick={() => cancel()}
         class="btn preset-filled-surface-50-950 px-4"
+        class:order-last={swapActions}
         data-testid="btn-dialog-cancel"
       >
         {content.onCancel?.name ?? 'Cancel'}
       </button>
-      <div>
+      <div class:order-first={swapActions}>
         <button
           {disabled}
           onclick={content.onSuccess.callback}
diff --git a/js-packages/web-console/src/lib/components/layout/pipelines/PipelineEditLayout.svelte b/js-packages/web-console/src/lib/components/layout/pipelines/PipelineEditLayout.svelte
@@ -181,10 +181,10 @@
 
   let layoutControls = $derived([
     { icon: 'fd fd-panel-left', text: 'Pipelines', value: showPipelinesPanel },
-    { icon: 'fd fd-panel-bottom', text: 'Monitoring', value: showMonitoringPanel },
+    { icon: 'fd fd-panel-bottom', text: 'Montior', value: showMonitoringPanel },
     {
       icon: 'fd fd-panel-right',
-      text: 'Interaction',
+      text: 'Inspect',
       value: showInteractionPanel,
       show: isScreenLg.current
     }
diff --git a/js-packages/web-console/src/lib/components/pipelines/editor/MonitoringPanel.svelte b/js-packages/web-console/src/lib/components/pipelines/editor/MonitoringPanel.svelte
@@ -197,7 +197,7 @@
 
 {#snippet TabControlChangeStream()}
   <span class="inline sm:hidden"> Changes </span>
-  <span class="hidden sm:inline"> Changes Stream </span>
+  <span class="hidden sm:inline"> Change Stream </span>
 {/snippet}
 
 {#snippet TabHealth()}
diff --git a/js-packages/web-console/src/lib/components/pipelines/editor/TabPerformance.svelte b/js-packages/web-console/src/lib/components/pipelines/editor/TabPerformance.svelte
@@ -186,8 +186,7 @@
 </script>
 
 {#snippet label()}
-  <span class="inline sm:hidden"> Perf </span>
-  <span class="hidden sm:inline"> Performance </span>
+  Runtime
 {/snippet}
 
 {#if isMetricsAvailable(pipeline.current.status) === 'no'}
diff --git a/js-packages/web-console/src/lib/components/pipelines/editor/performance/CheckpointDialog.svelte b/js-packages/web-console/src/lib/components/pipelines/editor/performance/CheckpointDialog.svelte
@@ -9,9 +9,9 @@
 
 <GenericDialog
   content={{
-    title: 'Checkpoint the current pipeline state',
+    title: 'Create a checkpoint?',
     description:
-      'Create the checkpoint? This may delete the oldest checkpoint, and will temporarily increase load on the pipeline.',
+      'This may delete the oldest checkpoint and briefly increase pipeline load.',
     onSuccess: {
       name: 'Checkpoint',
       'data-testid': 'btn-confirm-checkpoint',
@@ -21,4 +21,5 @@
       }
     }
   }}
+  swapActions
 ></GenericDialog>

Original file line number	Diff line number	Diff line change
`@@ -181,10 +181,10 @@`
`181`	`181`
`182`	`182`	`let layoutControls = $derived([`
`183`	`183`	`{ icon: 'fd fd-panel-left', text: 'Pipelines', value: showPipelinesPanel },`
`184`		`- { icon: 'fd fd-panel-bottom', text: 'Monitoring', value: showMonitoringPanel },`
	`184`	`+ { icon: 'fd fd-panel-bottom', text: 'Montior', value: showMonitoringPanel },`
`185`	`185`	`{`
`186`	`186`	`icon: 'fd fd-panel-right',`
`187`		`- text: 'Interaction',`
	`187`	`+ text: 'Inspect',`
`188`	`188`	`value: showInteractionPanel,`
`189`	`189`	`show: isScreenLg.current`
`190`	`190`	`}`