Skip to content

fix: testflow dynamic expression UI and functionality issues. #3077

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 9, 2025
Merged

fix: testflow dynamic expression UI and functionality issues. #3077

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8863a81
fix: resolved UI issue in testflow dynamic expression
aakashreddy-p May 3, 2025
f8b5efe
SPRW-896 testflow dynamic expression ui bugs
aakashreddy-p May 5, 2025
d0b3f10
fix: updated the condition to insert based on cursor position
aakashreddy-p May 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions packages/@sparrow-workspaces/src/components/tabular-input/LazyElement.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,11 @@
use:inview={options}
on:inview_change={handleChange}
class="pair-data-row d-flex align-items-center w-100 {customClass}"
style="padding-right:1rem; padding-left: 4px;"
style="padding-right: {dynamicExpression &&
isCheckBoxEditable &&
pairs.length - 1 === index
? '2.7rem'
: '1rem'}; padding-left: 4px;"
>
{#if isInView}
<!-- <div class="button-container">
Expand Down Expand Up @@ -222,4 +226,4 @@
.diff-row.diff-deleted {
background-color: var(--bg-ds-danger-800) !important;
}
</style>
</style>
8 changes: 3 additions & 5 deletions packages/@sparrow-workspaces/src/components/tabular-input/LazyElementFormData.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@
>
{#if pairs.length - 1 != index}
{#if isInputBoxEditable}
{#if dynamicExpression && element.type === "text"}
{#if dynamicExpression && element.type !== "file"}
<Tooltip
title="Insert dynamic"
placement="bottom-center"
Expand Down Expand Up @@ -155,12 +155,10 @@
>
<button
class="button-container d-flex align-items-center justify-content-center border-0
{isInputBoxEditable &&
element.type == 'text' &&
element.value == ''
{isInputBoxEditable && element.type !== 'file' && element.value === ''
? 'opacity-1'
: 'opacity-0 pe-none'}"
style="width:16px; height:16px; padding:2px; background:transparent;"
style="width: 16px; height: 16px; padding: 2px; background: transparent;"
on:click={() => uploadFormFile(index)}
>
<AttachRegular size="16px" color="var(--icon-ds-neutral-100)" />
Expand Down
13 changes: 12 additions & 1 deletion ...features/testflow-dynamic-expressions/components/function-options/FunctionsOptions.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
import { FunctionOptionData } from "../../utils";

export let expression: string;
export let cursorPosition: number | null;
let data = FunctionOptionData;
let hoveredFunctionType: string | null = null;
let searchFunction = "";
Expand All @@ -16,7 +17,17 @@
: data;

const handleFunctionType = (functionItem: any) => {
if (expression.endsWith(".")) {
if (
cursorPosition !== null &&
expression !== null &&
cursorPosition < expression.length
) {
expression =
expression.slice(0, cursorPosition) +
functionItem.type +
expression.slice(cursorPosition);
return;
} else if (expression.endsWith(".")) {
expression += functionItem.type;
} else {
expression += "." + functionItem.type;
Expand Down
29 changes: 23 additions & 6 deletions ...kspaces/src/features/testflow-dynamic-expressions/layout/TestflowDynamicExpression.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
export let selectedBlock;

export let onPreviewExpression;
export let dynamicExpressionPath: string = "";

let currentTabId: TFDynamicExpressionTabsEnum =
TFDynamicExpressionTabsEnum.DYNAMICCONTENT;
Expand Down Expand Up @@ -62,10 +63,19 @@
$: currentOpenItem = $isDynamicExpressionContent.find(
(item) => item.isCurrentOpen,
);
$: {
if (
dynamicExpressionPath === "raw" ||
dynamicExpressionPath === "urlencoded" ||
dynamicExpressionPath === "formdata"
) {
dynamicExpressionPath = "body" + " > " + dynamicExpressionPath;
}
}
let cursorPosition: number | null = 0;
</script>

<div class="d-flex justify-content-between" style="gap: 12px;">
<div class="d-flex justify-content-between" style="gap: 12px; margin-top:16px;">
<div class="w-50">
<ExpressionEditor
bind:expression
Expand Down Expand Up @@ -99,7 +109,7 @@
bind:cursorPosition
/>
{:else if currentTabId === TFDynamicExpressionTabsEnum.FUNCTIONS}
<FunctionsOptions bind:expression />
<FunctionsOptions bind:expression bind:cursorPosition />
{/if}
{/key}
</div>
Expand All @@ -111,10 +121,9 @@
style="margin-top: 24px;"
>
<div>
<!-- <p style="margin: 0px;">
{currentOpenItem?.blockName} > {currentOpenItem?.method} > {currentOpenItem?.requestType}
> {currentOpenItem?.key}
</p> -->
<p style="margin: 0px;" class="dynamic-path-title">
Location: {selectedBlock?.data?.blockName} > {dynamicExpressionPath}
</p>
</div>
<div>
<Button
Expand All @@ -136,4 +145,12 @@
border-radius: 4px;
/* height: "440px"; */
}
.dynamic-path-title {
font-family: "Inter", sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 1.5;
letter-spacing: 0px;
color: #82858a;
}
</style>
3 changes: 3 additions & 0 deletions packages/@sparrow-workspaces/src/features/testflow-explorer/layout/TestflowExplorer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -376,10 +376,12 @@

let dynamicExpressionEditorContent = "";
let dynamicExpressionModal = {};
let dynamicExpressionPath: string = "";
let handleOpenCurrentDynamicExpression = (obj) => {
dynamicExpressionModal = {};
dynamicExpressionModal = obj;
dynamicExpressionEditorContent = obj?.source?.content?.slice(4, -4) || "";
dynamicExpressionPath = obj?.type;
isDynamicExpressionModalOpen = true;
};

Expand Down Expand Up @@ -1431,6 +1433,7 @@
{selectedBlock}
{environmentVariables}
{onPreviewExpression}
{dynamicExpressionPath}
/>
</Modal>

Expand Down
Loading