Skip to content

fix: preserve parameter form state when owner or code changes #24

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

Closed
wants to merge 2 commits into from
Closed

fix: preserve parameter form state when owner or code changes #24

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
69345b8
fix: preserve parameter form state when owner or code changes
blink-so[bot] Jun 11, 2025
e2bfc0e
pass hash to key
Emyrk Jun 11, 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
Prev Previous commit
pass hash to key
  • Loading branch information
@Emyrk
Emyrk committed Jun 11, 2025
commit e2bfc0e13d0260d1692ceebdaa9cd1a60a97a00e
19 changes: 7 additions & 12 deletions src/client/Preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,15 +58,10 @@ import {
import { mockUsers } from "@/owner";

// Create a stable hash for parameters and owner to detect when form should be reset
const createParametersHash = (parameters: ParameterWithSource[], owner: WorkspaceOwner, code: string): string => {
// Create a deterministic string from parameters structure, owner, and code
const parameterSignature = parameters
.map(p => `${p.name}:${p.type}:${p.order}:${p.required}`)
.sort()
.join('|');
const createParametersHash = (owner: WorkspaceOwner, code: string): string => {
const ownerSignature = `${owner.id}:${owner.name}:${JSON.stringify(owner.rbac_roles)}`;
const codeHash = code.length.toString(); // Simple hash based on code length
return `${parameterSignature}#${ownerSignature}#${codeHash}`;
return `${ownerSignature}#${codeHash}`;
};

export const Preview: FC = () => {
Expand All @@ -85,7 +80,7 @@ export const Preview: FC = () => {

// Track the previous parameters hash to detect when form should be reset
const previousHashRef = useRef<string>('');
const currentHash = createParametersHash($parameters, $owner, debouncedCode);
const currentHash = createParametersHash($owner, debouncedCode);

// Reset form when parameters structure, owner, or code changes significantly
useEffect(() => {
Expand Down Expand Up @@ -271,7 +266,7 @@ export const Preview: FC = () => {
</div>
) : (
<div className="flex h-full w-full flex-col items-center justify-start gap-5 overflow-x-clip overflow-y-scroll rounded-xl border p-6">
<Form parameters={$parameters} />
<Form parameters={$parameters} hash={currentHash}/>
</div>
)}
<div className="flex w-full justify-between gap-3">
Expand Down Expand Up @@ -551,14 +546,14 @@ const Log: FC<LogProps> = ({ log }) => {
);
};

type FormProps = { parameters: ParameterWithSource[] };
type FormProps = { parameters: ParameterWithSource[], hash: string };

const Form: FC<FormProps> = ({ parameters }) => {
const Form: FC<FormProps> = ({ parameters, hash }) => {
return parameters
.sort((a, b) => a.order - b.order)
// Use parameter name as stable key to preserve form state across re-renders
// The form reset logic above handles cases where parameters change significantly
.map((p) => <FormElement key={p.name} parameter={p} />);
.map((p) => <FormElement key={hash+p.name} parameter={p} />);
};

type FormElementProps = { parameter: ParameterWithSource };
Expand Down