Skip to content

feat: discard only current active action #602

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 6 commits into from
May 28, 2025
Merged

feat: discard only current active action #602

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
35c3278
feat: add action id param for steps
RohitR311 May 20, 2025
111bfec
feat: pass action id to browser steps
RohitR311 May 20, 2025
9da3f7f
feat: add current action id funcs
RohitR311 May 20, 2025
515ad5b
feat: discard steps based on action id
RohitR311 May 20, 2025
3729145
feat: generate truly unique action ids
RohitR311 May 26, 2025
5d1935b
Merge pull request #609 from RohitR311/single-discard
amhsirak May 26, 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
12 changes: 7 additions & 5 deletions src/components/browser/BrowserWindow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ export const BrowserWindow = () => {
const [paginationSelector, setPaginationSelector] = useState<string>('');

const { socket } = useSocketStore();
const { notify } = useGlobalInfoStore();
const { notify, currentTextActionId, currentListActionId } = useGlobalInfoStore();
const { getText, getList, paginationMode, paginationType, limitMode, captureStage } = useActionContext();
const { addTextStep, addListStep, updateListStepData } = useBrowserSteps();

Expand Down Expand Up @@ -326,8 +326,8 @@ export const BrowserWindow = () => {
selector: highlighterData.selector,
tag: highlighterData.elementInfo?.tagName,
shadow: highlighterData.elementInfo?.isShadowRoot,
attribute
});
attribute,
}, currentTextActionId || `text-${crypto.randomUUID()}`);
} else {
// Show the modal if there are multiple options
setAttributeOptions(options);
Expand All @@ -344,7 +344,7 @@ export const BrowserWindow = () => {
if (paginationType !== '' && paginationType !== 'scrollDown' && paginationType !== 'scrollUp' && paginationType !== 'none') {
setPaginationSelector(highlighterData.selector);
notify(`info`, t('browser_window.attribute_modal.notifications.pagination_select_success'));
addListStep(listSelector!, fields, currentListId || 0, { type: paginationType, selector: highlighterData.selector });
addListStep(listSelector!, fields, currentListId || 0, currentListActionId || `list-${crypto.randomUUID()}`, { type: paginationType, selector: highlighterData.selector });
socket?.emit('setPaginationMode', { pagination: false });
}
return;
Expand Down Expand Up @@ -412,6 +412,7 @@ export const BrowserWindow = () => {
listSelector,
updatedFields,
currentListId,
currentListActionId || `list-${crypto.randomUUID()}`,
{ type: '', selector: paginationSelector }
);
}
Expand Down Expand Up @@ -449,7 +450,7 @@ export const BrowserWindow = () => {
tag: selectedElement.info?.tagName,
shadow: selectedElement.info?.isShadowRoot,
attribute: attribute
});
}, currentTextActionId || `text-${crypto.randomUUID()}`);
}
if (getList === true && listSelector && currentListId) {
const newField: TextStep = {
Expand Down Expand Up @@ -484,6 +485,7 @@ export const BrowserWindow = () => {
listSelector,
updatedFields,
currentListId,
currentListActionId || `list-${crypto.randomUUID()}`,
{ type: '', selector: paginationSelector }
);
}
Expand Down
84 changes: 65 additions & 19 deletions src/components/recorder/RightSidePanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
const [isCaptureListConfirmed, setIsCaptureListConfirmed] = useState(false);
const { panelHeight } = useBrowserDimensionsStore();

const { lastAction, notify, currentWorkflowActionsState, setCurrentWorkflowActionsState, resetInterpretationLog } = useGlobalInfoStore();
const { lastAction, notify, currentWorkflowActionsState, setCurrentWorkflowActionsState, resetInterpretationLog, currentListActionId, setCurrentListActionId, currentTextActionId, setCurrentTextActionId, currentScreenshotActionId, setCurrentScreenshotActionId } = useGlobalInfoStore();
const {
getText, startGetText, stopGetText,
getList, startGetList, stopGetList,
Expand All @@ -69,7 +69,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
startAction, finishAction
} = useActionContext();

const { browserSteps, updateBrowserTextStepLabel, deleteBrowserStep, addScreenshotStep, updateListTextFieldLabel, removeListTextField, updateListStepLimit } = useBrowserSteps();
const { browserSteps, updateBrowserTextStepLabel, deleteBrowserStep, addScreenshotStep, updateListTextFieldLabel, removeListTextField, updateListStepLimit, deleteStepsByActionId } = useBrowserSteps();
const { id, socket } = useSocketStore();
const { t } = useTranslation();

Expand Down Expand Up @@ -139,15 +139,21 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture

const handleStartGetText = () => {
setIsCaptureTextConfirmed(false);
const newActionId = `text-${crypto.randomUUID()}`;
setCurrentTextActionId(newActionId);
startGetText();
}

const handleStartGetList = () => {
setIsCaptureListConfirmed(false);
const newActionId = `list-${crypto.randomUUID()}`;
setCurrentListActionId(newActionId);
startGetList();
}

const handleStartGetScreenshot = () => {
const newActionId = `screenshot-${crypto.randomUUID()}`;
setCurrentScreenshotActionId(newActionId);
startGetScreenshot();
};

Expand Down Expand Up @@ -277,6 +283,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
socket?.emit('action', { action: 'scrapeSchema', settings });
}
setIsCaptureTextConfirmed(true);
setCurrentTextActionId('');
resetInterpretationLog();
finishAction('text');
onFinishCapture();
Expand Down Expand Up @@ -337,6 +344,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
notify('error', t('right_panel.errors.unable_create_settings'));
}
handleStopGetList();
setCurrentListActionId('');
resetInterpretationLog();
finishAction('list');
onFinishCapture();
Expand Down Expand Up @@ -434,35 +442,73 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture

const discardGetText = useCallback(() => {
stopGetText();
browserSteps.forEach(step => {
if (step.type === 'text') {
deleteBrowserStep(step.id);
}
});
setTextLabels({});
setErrors({});
setConfirmedTextSteps({});

if (currentTextActionId) {
const stepsToDelete = browserSteps
.filter(step => step.type === 'text' && step.actionId === currentTextActionId)
.map(step => step.id);

deleteStepsByActionId(currentTextActionId);

setTextLabels(prevLabels => {
const newLabels = { ...prevLabels };
stepsToDelete.forEach(id => {
delete newLabels[id];
});
return newLabels;
});

setErrors(prevErrors => {
const newErrors = { ...prevErrors };
stepsToDelete.forEach(id => {
delete newErrors[id];
});
return newErrors;
});

setConfirmedTextSteps(prev => {
const newConfirmed = { ...prev };
stepsToDelete.forEach(id => {
delete newConfirmed[id];
});
return newConfirmed;
});
}

setCurrentTextActionId('');
setIsCaptureTextConfirmed(false);
notify('error', t('right_panel.errors.capture_text_discarded'));
}, [browserSteps, stopGetText, deleteBrowserStep, notify, t]);
}, [currentTextActionId, browserSteps, stopGetText, deleteStepsByActionId, notify, t]);

const discardGetList = useCallback(() => {
stopGetList();
browserSteps.forEach(step => {
if (step.type === 'list') {
deleteBrowserStep(step.id);
}
});

if (currentListActionId) {
const listStepsToDelete = browserSteps
.filter(step => step.type === 'list' && step.actionId === currentListActionId)
.map(step => step.id);

deleteStepsByActionId(currentListActionId);

setConfirmedListTextFields(prev => {
const newConfirmed = { ...prev };
listStepsToDelete.forEach(id => {
delete newConfirmed[id];
});
return newConfirmed;
});
}

resetListState();
stopPaginationMode();
stopLimitMode();
setShowPaginationOptions(false);
setShowLimitOptions(false);
setCaptureStage('initial');
setConfirmedListTextFields({});
setCurrentListActionId('');
setIsCaptureListConfirmed(false);
notify('error', t('right_panel.errors.capture_list_discarded'));
}, [browserSteps, stopGetList, deleteBrowserStep, resetListState, setShowPaginationOptions, setShowLimitOptions, setCaptureStage, notify, t]);
}, [currentListActionId, browserSteps, stopGetList, deleteStepsByActionId, resetListState, setShowPaginationOptions, setShowLimitOptions, setCaptureStage, notify, t]);

const captureScreenshot = (fullPage: boolean) => {
const screenshotSettings: ScreenshotSettings = {
Expand All @@ -474,7 +520,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
scale: 'device',
};
socket?.emit('action', { action: 'screenshot', settings: screenshotSettings });
addScreenshotStep(fullPage);
addScreenshotStep(fullPage, currentScreenshotActionId);
stopGetScreenshot();
resetInterpretationLog();
finishAction('screenshot');
Expand Down
48 changes: 35 additions & 13 deletions src/context/browserSteps.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,14 @@ export interface TextStep {
label: string;
data: string;
selectorObj: SelectorObject;
actionId?: string; // Add actionId to track which action created this step
}

interface ScreenshotStep {
id: number;
type: 'screenshot';
fullPage: boolean;
actionId?: string; // Add actionId to track which action created this step
}

export interface ListStep {
Expand All @@ -24,6 +26,7 @@ export interface ListStep {
selector: string;
};
limit?: number;
actionId?: string; // Add actionId to track which action created this step
}

export type BrowserStep = TextStep | ScreenshotStep | ListStep;
Expand All @@ -38,15 +41,16 @@ export interface SelectorObject {

interface BrowserStepsContextType {
browserSteps: BrowserStep[];
addTextStep: (label: string, data: string, selectorObj: SelectorObject) => void;
addListStep: (listSelector: string, fields: { [key: string]: TextStep }, listId: number, pagination?: { type: string; selector: string }, limit?: number) => void
addScreenshotStep: (fullPage: boolean) => void;
addTextStep: (label: string, data: string, selectorObj: SelectorObject, actionId: string) => void;
addListStep: (listSelector: string, fields: { [key: string]: TextStep }, listId: number, actionId: string, pagination?: { type: string; selector: string }, limit?: number) => void
addScreenshotStep: (fullPage: boolean, actionId: string) => void;
deleteBrowserStep: (id: number) => void;
updateBrowserTextStepLabel: (id: number, newLabel: string) => void;
updateListTextFieldLabel: (listId: number, fieldKey: string, newLabel: string) => void;
updateListStepLimit: (listId: number, limit: number) => void;
updateListStepData: (listId: number, extractedData: any[]) => void;
removeListTextField: (listId: number, fieldKey: string) => void;
deleteStepsByActionId: (actionId: string) => void; // New function to delete steps by actionId
}

const BrowserStepsContext = createContext<BrowserStepsContextType | undefined>(undefined);
Expand All @@ -55,14 +59,14 @@ export const BrowserStepsProvider: React.FC<{ children: React.ReactNode }> = ({
const [browserSteps, setBrowserSteps] = useState<BrowserStep[]>([]);
const [discardedFields, setDiscardedFields] = useState<Set<string>>(new Set());

const addTextStep = (label: string, data: string, selectorObj: SelectorObject) => {
const addTextStep = (label: string, data: string, selectorObj: SelectorObject, actionId: string) => {
setBrowserSteps(prevSteps => [
...prevSteps,
{ id: Date.now(), type: 'text', label, data, selectorObj }
{ id: Date.now(), type: 'text', label, data, selectorObj, actionId }
]);
};

const addListStep = (listSelector: string, newFields: { [key: string]: TextStep }, listId: number, pagination?: { type: string; selector: string }, limit?: number) => {
const addListStep = (listSelector: string, newFields: { [key: string]: TextStep }, listId: number, actionId: string, pagination?: { type: string; selector: string }, limit?: number) => {
setBrowserSteps(prevSteps => {
const existingListStepIndex = prevSteps.findIndex(step => step.type === 'list' && step.id === listId);

Expand All @@ -77,10 +81,14 @@ export const BrowserStepsProvider: React.FC<{ children: React.ReactNode }> = ({
if (existingListStep.fields[key]) {
acc[key] = {
...field,
label: existingListStep.fields[key].label
label: existingListStep.fields[key].label,
actionId
};
} else {
acc[key] = field;
acc[key] = {
...field,
actionId
};
}
}
return acc;
Expand All @@ -90,29 +98,42 @@ export const BrowserStepsProvider: React.FC<{ children: React.ReactNode }> = ({
...existingListStep,
fields: mergedFields,
pagination: pagination || existingListStep.pagination,
limit: limit
limit: limit,
actionId
};
return updatedSteps;
} else {
const fieldsWithActionId = Object.entries(newFields).reduce((acc, [key, field]) => {
acc[key] = {
...field,
actionId
};
return acc;
}, {} as { [key: string]: TextStep });

return [
...prevSteps,
{ id: listId, type: 'list', listSelector, fields: newFields, pagination, limit }
{ id: listId, type: 'list', listSelector, fields: fieldsWithActionId, pagination, limit, actionId }
];
}
});
};

const addScreenshotStep = (fullPage: boolean) => {
const addScreenshotStep = (fullPage: boolean, actionId: string) => {
setBrowserSteps(prevSteps => [
...prevSteps,
{ id: Date.now(), type: 'screenshot', fullPage }
{ id: Date.now(), type: 'screenshot', fullPage, actionId }
]);
};

const deleteBrowserStep = (id: number) => {
setBrowserSteps(prevSteps => prevSteps.filter(step => step.id !== id));
};

const deleteStepsByActionId = (actionId: string) => {
setBrowserSteps(prevSteps => prevSteps.filter(step => step.actionId !== actionId));
};

const updateBrowserTextStepLabel = (id: number, newLabel: string) => {
setBrowserSteps(prevSteps =>
prevSteps.map(step =>
Expand Down Expand Up @@ -199,6 +220,7 @@ export const BrowserStepsProvider: React.FC<{ children: React.ReactNode }> = ({
updateListStepLimit,
updateListStepData,
removeListTextField,
deleteStepsByActionId, // Export the new function
}}>
{children}
</BrowserStepsContext.Provider>
Expand All @@ -211,4 +233,4 @@ export const useBrowserSteps = () => {
throw new Error('useBrowserSteps must be used within a BrowserStepsProvider');
}
return context;
};
};
18 changes: 18 additions & 0 deletions src/context/globalInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,12 @@ interface GlobalInfo {
}) => void;
shouldResetInterpretationLog: boolean;
resetInterpretationLog: () => void;
currentTextActionId: string;
setCurrentTextActionId: (actionId: string) => void;
currentListActionId: string;
setCurrentListActionId: (actionId: string) => void;
currentScreenshotActionId: string;
setCurrentScreenshotActionId: (actionId: string) => void;
};

class GlobalInfoStore implements Partial<GlobalInfo> {
Expand All @@ -106,6 +112,9 @@ class GlobalInfoStore implements Partial<GlobalInfo> {
hasScrapeSchemaAction: false,
};
shouldResetInterpretationLog = false;
currentTextActionId = '';
currentListActionId = '';
currentScreenshotActionId = '';
};

const globalInfoStore = new GlobalInfoStore();
Expand All @@ -129,6 +138,9 @@ export const GlobalInfoProvider = ({ children }: { children: JSX.Element }) => {
const [recordingUrl, setRecordingUrl] = useState<string>(globalInfoStore.recordingUrl);
const [currentWorkflowActionsState, setCurrentWorkflowActionsState] = useState(globalInfoStore.currentWorkflowActionsState);
const [shouldResetInterpretationLog, setShouldResetInterpretationLog] = useState<boolean>(globalInfoStore.shouldResetInterpretationLog);
const [currentTextActionId, setCurrentTextActionId] = useState<string>('');
const [currentListActionId, setCurrentListActionId] = useState<string>('');
const [currentScreenshotActionId, setCurrentScreenshotActionId] = useState<string>('');

const notify = (severity: 'error' | 'warning' | 'info' | 'success', message: string) => {
setNotification({ severity, message, isOpen: true });
Expand Down Expand Up @@ -187,6 +199,12 @@ export const GlobalInfoProvider = ({ children }: { children: JSX.Element }) => {
setCurrentWorkflowActionsState,
shouldResetInterpretationLog,
resetInterpretationLog,
currentTextActionId,
setCurrentTextActionId,
currentListActionId,
setCurrentListActionId,
currentScreenshotActionId,
setCurrentScreenshotActionId,
}}
>
{children}
Expand Down