Skip to content

Actions JS Console #1853

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 9 commits into from
Jul 22, 2025
Merged

Actions JS Console #1853

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
d3142c1
Adds dynamic layer indexing
kamalqureshi Jul 8, 2025
86a12f0
fixed: Layout components issue, children components depth issues
kamalqureshi Jul 8, 2025
79b5e83
Event handlers for all components.
kamalqureshi Jul 9, 2025
d13b799
Update App meta data
kamalqureshi Jul 10, 2025
8afeae1
Publish App, Test App, Apply Global JS and CSS
kamalqureshi Jul 10, 2025
38e770c
Sharing App Permissions
kamalqureshi Jul 11, 2025
caacd01
multiple new actions added
kamalqureshi Jul 14, 2025
1dddc59
Updated Global CSS
kamalqureshi Jul 14, 2025
a380978
Update App meta data
kamalqureshi Jul 10, 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
33 changes: 26 additions & 7 deletions client/packages/lowcoder/src/comps/comps/preLoadComp/actionConfigs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,20 @@ import {
renameComponentAction,
deleteComponentAction,
resizeComponentAction,
configureComponentAction,
changeLayoutAction,
configureAppMetaAction,
addEventHandlerAction,
applyStyleAction,
nestComponentAction
nestComponentAction,
updateDynamicLayoutAction,
publishAppAction,
shareAppAction,
testAllDatasourcesAction,
applyGlobalJSAction,
applyCSSAction,
applyThemeAction,
setCanvasSettingsAction,
setCustomShortcutsAction,
alignComponentAction
} from "./actions";

export const actionCategories: ActionCategory[] = [
Expand All @@ -26,14 +35,24 @@ export const actionCategories: ActionCategory[] = [
]
},
{
key: 'component-configuration',
label: 'Component Configuration',
actions: [configureComponentAction]
key: 'app-configuration',
label: 'App Configuration',
actions: [
configureAppMetaAction,
publishAppAction,
shareAppAction,
testAllDatasourcesAction,
applyGlobalJSAction,
applyCSSAction,
applyThemeAction,
setCanvasSettingsAction,
setCustomShortcutsAction
]
},
{
key: 'layout',
label: 'Layout',
actions: [changeLayoutAction]
actions: [updateDynamicLayoutAction, alignComponentAction]
},
{
key: 'events',
Expand Down
210 changes: 192 additions & 18 deletions client/packages/lowcoder/src/comps/comps/preLoadComp/actionInputSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,21 @@ import { default as Space } from "antd/es/space";
import { default as Flex } from "antd/es/flex";
import type { InputRef } from 'antd';
import { default as DownOutlined } from "@ant-design/icons/DownOutlined";
import { BaseSection } from "lowcoder-design";
import { BaseSection, Dropdown } from "lowcoder-design";
import { EditorContext } from "comps/editorState";
import { message } from "antd";
import { CustomDropdown } from "./styled";
import { generateComponentActionItems, getComponentCategories } from "./utils";
import {
generateComponentActionItems,
getComponentCategories,
getEditorComponentInfo,
getLayoutItemsOrder
} from "./utils";
import { actionRegistry, getAllActionItems } from "./actionConfigs";
import { getThemeList } from "@lowcoder-ee/redux/selectors/commonSettingSelectors";
import { useSelector } from "react-redux";
import { ActionOptions } from "comps/controls/actionSelector/actionSelectorControl";
import { eventToShortcut, readableShortcut } from "util/keyUtils";

export function ActionInputSection() {
const [actionValue, setActionValue] = useState<string>("");
Expand All @@ -31,8 +40,22 @@ export function ActionInputSection() {
const [showStylingInput, setShowStylingInput] = useState<boolean>(false);
const [selectedEditorComponent, setSelectedEditorComponent] = useState<string | null>(null);
const [validationError, setValidationError] = useState<string | null>(null);
const [showDynamicLayoutDropdown, setShowDynamicLayoutDropdown] = useState<boolean>(false);
const [selectedDynamicLayoutIndex, setSelectedDynamicLayoutIndex] = useState<string | null>(null);
const [showThemeDropdown, setShowThemeDropdown] = useState<boolean>(false);
const [selectedTheme, setSelectedTheme] = useState<string | null>(null);
const [showCustomShortcutsActionDropdown, setShowCustomShortcutsActionDropdown] = useState<boolean>(false);
const [selectedCustomShortcutAction, setSelectedCustomShortcutAction] = useState<string | null>(null);
const inputRef = useRef<InputRef>(null);
const editorState = useContext(EditorContext);
const themeList = useSelector(getThemeList) || [];

const THEME_OPTIONS = useMemo(() => {
return themeList.map((theme) => ({
label: theme.name,
value: theme.id + "",
}));
}, [themeList]);

const categories = useMemo(() => {
return getComponentCategories();
Expand All @@ -56,6 +79,25 @@ export function ActionInputSection() {
}));
}, [editorState]);

const simpleLayoutItems = useMemo(() => {
if(!editorComponents) return [];

const editorComponentInfo = getEditorComponentInfo(editorState);
if(!editorComponentInfo) return [];

const currentLayout = editorComponentInfo.currentLayout;
const items = editorComponentInfo.items;

return Object.keys(currentLayout).map((key) => {
const item = items ? items[key] : null;
const componentName = item ? (item as any).children.name.getView() : key;
return {
label: componentName,
key: componentName
};
});
}, [editorState]);

const currentAction = useMemo(() => {
return selectedActionKey ? actionRegistry.get(selectedActionKey) : null;
}, [selectedActionKey]);
Expand All @@ -81,8 +123,14 @@ export function ActionInputSection() {
setSelectedEditorComponent(null);
setIsNestedComponent(false);
setSelectedNestComponent(null);
setShowDynamicLayoutDropdown(false);
setActionValue("");

setSelectedDynamicLayoutIndex(null);
setShowThemeDropdown(false);
setSelectedTheme(null);
setShowCustomShortcutsActionDropdown(false);
setSelectedCustomShortcutAction(null);

if (action.requiresComponentSelection) {
setShowComponentDropdown(true);
setPlaceholderText("Select a component to add");
Expand All @@ -103,6 +151,15 @@ export function ActionInputSection() {
if (action.isNested) {
setIsNestedComponent(true);
}
if(action.dynamicLayout) {
setShowDynamicLayoutDropdown(true);
}
if(action.isTheme) {
setShowThemeDropdown(true);
}
if(action.isCustomShortcuts) {
setShowCustomShortcutsActionDropdown(true);
}
}, []);

const handleComponentSelection = useCallback((key: string) => {
Expand Down Expand Up @@ -168,13 +225,26 @@ export function ActionInputSection() {
return;
}

if(currentAction.isTheme && !selectedTheme) {
message.error('Please select a theme');
return;
}

if(currentAction.isCustomShortcuts && !selectedCustomShortcutAction) {
message.error('Please select a custom shortcut action');
return;
}

try {
await currentAction.execute({
actionKey: selectedActionKey,
actionValue,
selectedComponent,
selectedEditorComponent,
selectedNestComponent,
selectedDynamicLayoutIndex,
selectedTheme,
selectedCustomShortcutAction,
editorState
});

Expand All @@ -189,7 +259,12 @@ export function ActionInputSection() {
setValidationError(null);
setIsNestedComponent(false);
setSelectedNestComponent(null);

setShowDynamicLayoutDropdown(false);
setSelectedDynamicLayoutIndex(null);
setShowThemeDropdown(false);
setSelectedTheme(null);
setShowCustomShortcutsActionDropdown(false);
setSelectedCustomShortcutAction(null);
} catch (error) {
console.error('Error executing action:', error);
message.error('Failed to execute action. Please try again.');
Expand All @@ -200,6 +275,9 @@ export function ActionInputSection() {
selectedComponent,
selectedEditorComponent,
selectedNestComponent,
selectedDynamicLayoutIndex,
selectedTheme,
selectedCustomShortcutAction,
editorState,
currentAction,
validateInput
Expand All @@ -213,7 +291,16 @@ export function ActionInputSection() {
if (currentAction.requiresInput && !actionValue.trim()) return true;

return false;
}, [selectedActionKey, currentAction, selectedComponent, selectedEditorComponent, actionValue]);
}, [
selectedActionKey,
currentAction,
selectedComponent,
selectedEditorComponent,
actionValue,
selectedCustomShortcutAction,
selectedTheme,
selectedNestComponent
]);

const shouldShowInput = useMemo(() => {
if (!currentAction) return false;
Expand Down Expand Up @@ -299,7 +386,7 @@ export function ActionInputSection() {
popupRender={() => (
<Menu
items={editorComponents}
onClick={({ key }) => {
onClick={({key}) => {
handleEditorComponentSelection(key);
}}
/>
Expand All @@ -314,24 +401,111 @@ export function ActionInputSection() {
</CustomDropdown>
)}

{shouldShowInput && (
showStylingInput ? (
<Input.TextArea
ref={inputRef}
value={actionValue}
onChange={handleInputChange}
placeholder={placeholderText}
status={validationError ? 'error' : undefined}
autoSize={{ minRows: 1 }}
{showDynamicLayoutDropdown && (
<CustomDropdown
overlayStyle={{
maxHeight: '400px',
overflow: 'auto',
zIndex: 9999
}}
popupRender={() => (
<Menu
items={simpleLayoutItems}
onClick={({key}) => {
handleEditorComponentSelection(key);
}}
/>
) : (
)}
>
<Button size={"small"}>
<Space>
{selectedEditorComponent ? selectedEditorComponent : 'Layout'}
<DownOutlined />
</Space>
</Button>
</CustomDropdown>
)}

{showDynamicLayoutDropdown && (
<Dropdown
options={getLayoutItemsOrder(simpleLayoutItems)}
onChange={(value) => {
setSelectedDynamicLayoutIndex(value);
}}
>
<Button size={"small"}>
<Space>
{selectedEditorComponent ? selectedEditorComponent : 'Layout'}
<DownOutlined />
</Space>
</Button>
</Dropdown>
)}

{showThemeDropdown && (
<Dropdown
options={THEME_OPTIONS}
onChange={(value) => {
setSelectedTheme(value);
}}
>
<Button size={"small"}>
<Space>
{selectedTheme ? selectedTheme : 'Select Theme'}
</Space>
</Button>
</Dropdown>
)}

{showCustomShortcutsActionDropdown && (
<Dropdown
options={ActionOptions}
onChange={(value) => {
setSelectedCustomShortcutAction(value);
}}
>
<Button size={"small"}>
<Space>
{selectedCustomShortcutAction ? selectedCustomShortcutAction : 'Select Action'}
</Space>
</Button>
</Dropdown>
)}

{shouldShowInput && (
currentAction?.isCustomShortcuts ? (
<Input
ref={inputRef}
value={actionValue}
onChange={handleInputChange}
value={readableShortcut(actionValue)}
placeholder={placeholderText}
status={validationError ? 'error' : undefined}
onKeyDownCapture={(e) => {
setActionValue(eventToShortcut(e));
e.preventDefault();
e.stopPropagation();
}}
onChange={() => {}}
readOnly
/>
) : (
showStylingInput ? (
<Input.TextArea
ref={inputRef}
value={actionValue}
onChange={handleInputChange}
placeholder={placeholderText}
status={validationError ? 'error' : undefined}
autoSize={{ minRows: 1 }}
/>
) : (
<Input
ref={inputRef}
value={actionValue}
onChange={handleInputChange}
placeholder={placeholderText}
status={validationError ? 'error' : undefined}
/>
)
)
)}

Expand Down
Loading
Loading