Fix #1093

apache · Feb 1, 2024 · b273662 · b273662
1 parent fa8fdf9
commit b273662
Show file tree

Hide file tree

Showing 18 changed files with 246 additions and 59 deletions.
diff --git a/karavan-designer/src/DesignerPage.tsx b/karavan-designer/src/DesignerPage.tsx
@@ -78,9 +78,10 @@ export const DesignerPage = (props: Props) => {
                     console.log(name1, code)
                 }}
                 propertyPlaceholders={[
-                    "timer.delay",
-                    "sql.query"
+                    // "timer.delay",
+                    // "sql.query"
                 ]}
+                onSavePropertyPlaceholder={(key, value) => console.log("onSavePropertyPlaceholder", key, value)}
             />
         )
     }

diff --git a/karavan-designer/src/designer/KaravanDesigner.tsx b/karavan-designer/src/designer/KaravanDesigner.tsx
@@ -46,6 +46,7 @@ interface Props {
     onSave: (filename: string, yaml: string, propertyOnly: boolean) => void
     onSaveCustomCode: (name: string, code: string) => void
     onGetCustomCode: (name: string, javaType: string) => Promise<string | undefined>
+    onSavePropertyPlaceholder: (key: string, value: string) => void
     filename: string
     yaml: string
     dark: boolean
@@ -70,6 +71,7 @@ export function KaravanDesigner(props: Props) {
         InfrastructureAPI.setOnSaveCustomCode(props.onSaveCustomCode);
         InfrastructureAPI.setOnGetCustomCode(props.onGetCustomCode);
         InfrastructureAPI.setOnSave(props.onSave);
+        InfrastructureAPI.setOnSavePropertyPlaceholder(props.onSavePropertyPlaceholder);
 
         setSelectedStep(undefined);
         const i = makeIntegration(props.yaml, props.filename);

diff --git a/karavan-designer/src/designer/property/property/ComponentPropertyField.tsx b/karavan-designer/src/designer/property/property/ComponentPropertyField.tsx
@@ -269,7 +269,7 @@ export function ComponentPropertyField(props: Props) {
                 </Tooltip>
             }
             <InputGroupItem>
-                <ComponentPropertyPlaceholderDropdown property={property}/>
+                <ComponentPropertyPlaceholderDropdown property={property} value={value}/>
             </InputGroupItem>
         </InputGroup>
     }
@@ -289,7 +289,7 @@ export function ComponentPropertyField(props: Props) {
                         }}/>
                 </InputGroupItem>
                 <InputGroupItem>
-                    <ComponentPropertyPlaceholderDropdown property={property}/>
+                    <ComponentPropertyPlaceholderDropdown property={property} value={value}/>
                 </InputGroupItem>
             </InputGroup>
         )
@@ -347,7 +347,7 @@ export function ComponentPropertyField(props: Props) {
                     />
                 </InputGroupItem>
                 <InputGroupItem>
-                    <ComponentPropertyPlaceholderDropdown property={property}/>
+                    <ComponentPropertyPlaceholderDropdown property={property} value={value}/>
                 </InputGroupItem>
             </TextInputGroup>
         )

diff --git a/karavan-designer/src/designer/property/property/ComponentPropertyPlaceholderDropdown.css b/karavan-designer/src/designer/property/property/ComponentPropertyPlaceholderDropdown.css
@@ -19,6 +19,19 @@
     padding-left: 6px;
     padding-right: 6px;
 }
+
+.karavan .properties .property-placeholder-toggle .pf-v5-c-button__icon.pf-m-start {
+    margin-inline-end: 0;
+}
+
 .karavan .properties .property-placeholder-toggle .pf-v5-c-menu-toggle__controls {
     display: none;
+}
+
+.pf-v5-c-popover .property-placeholder-toggle-form {
+    width: 300px;
+}
+
+.pf-v5-c-popover .property-placeholder-toggle-form .pf-v5-c-form__group {
+    grid-template-columns: 1fr 2fr;
 }
diff --git a/karavan-designer/src/designer/property/property/ComponentPropertyPlaceholderDropdown.tsx b/karavan-designer/src/designer/property/property/ComponentPropertyPlaceholderDropdown.tsx
@@ -19,7 +19,7 @@ import {
     Dropdown,
     MenuToggleElement,
     MenuToggle,
-    DropdownList, DropdownItem
+    DropdownList, DropdownItem, Popover, Badge, TextVariants, Text, Flex, TextInput, FormGroup, Form, Button, FlexItem
 } from '@patternfly/react-core';
 import '../../karavan.css';
 import './ComponentPropertyPlaceholderDropdown.css';
@@ -30,25 +30,99 @@ import {usePropertiesHook} from "../usePropertiesHook";
 import {useDesignerStore} from "../../DesignerStore";
 import {shallow} from "zustand/shallow";
 import EllipsisVIcon from "@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon";
-
+import AddIcon from "@patternfly/react-icons/dist/js/icons/plus-icon";
+import {InfrastructureAPI} from "../../utils/InfrastructureAPI";
 
 interface Props {
     property: ComponentProperty,
+    value: any
 }
 
 export function ComponentPropertyPlaceholderDropdown(props: Props) {
 
     const {onParametersChange} = usePropertiesHook();
-    const [propertyPlaceholders] = useDesignerStore((s) => [s.propertyPlaceholders], shallow)
+    const [propertyPlaceholders, setPropertyPlaceholders] = useDesignerStore((s) =>
+        [s.propertyPlaceholders, s.setPropertyPlaceholders], shallow)
     const [isOpenPlaceholdersDropdown, setOpenPlaceholdersDropdown] = useState<boolean>(false);
+    const [propValue, setPropValue] = useState<string>('');
+    const [isVisible, setIsVisible] = React.useState(false);
+
+    const {property, value} = props;
+    const valueIsPlaceholder: boolean = value && value.toString().startsWith('{{') && value.toString().endsWith('}}');
+    const placeholderValue = valueIsPlaceholder ? value.toString().replace('{{', '').replace('}}', '') : undefined;
+    const showAddButton = valueIsPlaceholder && !propertyPlaceholders.includes(placeholderValue);
+    const popoverId = "popover-selector-" + property.name;
 
     function parametersChanged(parameter: string, value: string | number | boolean | any, pathParameter?: boolean, newRoute?: RouteToCreate) {
         onParametersChange(parameter, value, pathParameter, newRoute);
     }
 
-    const property: ComponentProperty = props.property;
+    function onMenuToggleClick() {
+        if (!showAddButton) {
+            setOpenPlaceholdersDropdown(!isOpenPlaceholdersDropdown)
+        }
+    }
+
+    function saveProperty() {
+        InfrastructureAPI.onSavePropertyPlaceholder(placeholderValue, propValue);
+        setIsVisible(false);
+        const p = [...propertyPlaceholders]
+        p.push(placeholderValue);
+        setPropertyPlaceholders(p);
+    }
+
+    function getPopover() {
+        return (
+            <Popover
+                isVisible={isVisible}
+                shouldOpen={(_event, _fn) => setIsVisible(true)}
+                shouldClose={(_event, _fn) => setIsVisible(false)}
+                aria-label="Add property"
+                headerContent={"Add property"}
+                bodyContent={
+                    <Form isHorizontal className="property-placeholder-toggle-form" autoComplete="off">
+                        <FormGroup isInline label="Property" isRequired fieldId="property">
+                            <TextInput id="property" readOnly value={placeholderValue}/>
+                        </FormGroup>
+                        <FormGroup isInline label="Value" isRequired fieldId="value">
+                            <TextInput id="value" isRequired value={propValue}
+                                       onChange={(_, value) => setPropValue(value)}/>
+                        </FormGroup>
+                    </Form>
+                }
+                footerContent={
+                    <Flex>
+                        <FlexItem align={{default: "alignRight"}}>
+                            <Button
+                                onClick={() => saveProperty()}>
+                                Save
+                            </Button>
+                        </FlexItem>
+                    </Flex>
+                }
+                triggerRef={() => document.getElementById(popoverId) as HTMLButtonElement}
+            />
+        )
+    }
+
+    function getToggle(toggleRef: React.Ref<MenuToggleElement>) {
+        return (
+            <MenuToggle className="property-placeholder-toggle"
+                        id={popoverId}
+                        ref={toggleRef}
+                        aria-label="placeholder menu"
+                        variant="default"
+                        onClick={() => onMenuToggleClick()}
+                        isExpanded={isOpenPlaceholdersDropdown}
+            >
+                {showAddButton ? <AddIcon/> : <EllipsisVIcon/>}
+                {showAddButton && getPopover()}
+            </MenuToggle>
+        )
+    }
+
     return (
-        propertyPlaceholders && propertyPlaceholders.length > 0 ?
+        (propertyPlaceholders && propertyPlaceholders.length > 0 ) || showAddButton ?
             <Dropdown
                 popperProps={{position: "end"}}
                 isOpen={isOpenPlaceholdersDropdown}
@@ -57,17 +131,7 @@ export function ComponentPropertyPlaceholderDropdown(props: Props) {
                     setOpenPlaceholdersDropdown(false);
                 }}
                 onOpenChange={(isOpen: boolean) => setOpenPlaceholdersDropdown(isOpen)}
-                toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-                    <MenuToggle className="property-placeholder-toggle"
-                                ref={toggleRef}
-                                aria-label="placeholder menu"
-                                variant="default"
-                                onClick={() => setOpenPlaceholdersDropdown(!isOpenPlaceholdersDropdown)}
-                                isExpanded={isOpenPlaceholdersDropdown}
-                    >
-                        <EllipsisVIcon/>
-                    </MenuToggle>
-                )}
+                toggle={(toggleRef: React.Ref<MenuToggleElement>) => getToggle(toggleRef)}
                 shouldFocusToggleOnSelect
             >
                 <DropdownList>

diff --git a/karavan-designer/src/designer/route/RouteDesigner.tsx b/karavan-designer/src/designer/route/RouteDesigner.tsx
@@ -40,7 +40,7 @@ import {DslElementMoveModal} from "./element/DslElementMoveModal";
 
 export function RouteDesigner() {
 
-    const {openSelector, createRouteConfiguration, onCommand, handleKeyDown, handleKeyUp, unselectElement, onDslSelect,
+    const {openSelector, createRouteConfiguration, onCommand, unselectElement, onDslSelect,
         isSourceKamelet, isActionKamelet, isKamelet, isSinkKamelet} = useRouteDesignerHook();
 
     const [integration] = useIntegrationStore((state) => [state.integration], shallow)
@@ -72,12 +72,9 @@ export function RouteDesigner() {
     const flowRef = useRef<HTMLDivElement | null>(null);
 
     useEffect(()=> {
-        // window.addEventListener('resize', changeGraphSize);
         const interval = setInterval(() => {
             changeGraphSize();
         }, 500);
-        window.addEventListener('keydown', handleKeyDown);
-        window.addEventListener('keyup', handleKeyUp);
         const commandSub = EventBus.onCommand()?.subscribe((command: Command) => onCommand(command, printerRef));
         if (flowRef.current === null) {
             clearSteps();
@@ -86,9 +83,6 @@ export function RouteDesigner() {
         }
         return ()=> {
             clearInterval(interval)
-            // window.removeEventListener('resize', changeGraphSize);
-            window.removeEventListener('keydown', handleKeyDown);
-            window.removeEventListener('keyup', handleKeyUp);
             commandSub?.unsubscribe();
         }
     }, [showSelector, integration])

diff --git a/karavan-designer/src/designer/utils/InfrastructureAPI.ts b/karavan-designer/src/designer/utils/InfrastructureAPI.ts
@@ -20,6 +20,7 @@ export class InfrastructureAPI {
     static onGetCustomCode: (name: string, javaType: string) => Promise<string | undefined>;
     static onSaveCustomCode: (name: string, code: string) => void;
     static onSave: (filename: string, yaml: string, propertyOnly: boolean) => void;
+    static onSavePropertyPlaceholder: (key: string, value: string) => void;
 
     static setOnGetCustomCode(onGetCustomCode: (name: string, javaType: string) => Promise<string | undefined>){
         this.onGetCustomCode = onGetCustomCode
@@ -33,6 +34,10 @@ export class InfrastructureAPI {
         this.onSave = onSave
     }
 
+    static setOnSavePropertyPlaceholder(onSavePropertyPlaceholder:(key: string, value: string) => void){
+        this.onSavePropertyPlaceholder = onSavePropertyPlaceholder
+    }
+
     // Kubernetes/Docker API
     static infrastructure: 'kubernetes' | 'docker' | 'local' = 'local';
     static configMaps: string[] = [];

diff --git a/karavan-vscode/src/designerView.ts b/karavan-vscode/src/designerView.ts
@@ -133,6 +133,9 @@ export class DesignerView {
                         case 'saveCode':
                             utils.saveCode(message.name, message.yamlFullPath, message.yamFileName, message.code);
                             break;
+                        case 'savePropertyPlaceholder':
+                            utils.savePropertyPlaceholder(message.key, message.value);
+                            break;    
                         case 'getData':
                             this.sendData(panel, filename, relativePath, fullPath, message.reread === true, yaml, tab);
                             break;

diff --git a/karavan-vscode/src/utils.ts b/karavan-vscode/src/utils.ts
@@ -38,6 +38,15 @@ export function saveCode(name: string, yamlFullPath: string, yamFileName: string
     }
 }
 
+export async function savePropertyPlaceholder(key: string, value: string) {
+    if (workspace.workspaceFolders) {
+        const uriFolder: Uri = workspace.workspaceFolders[0].uri;
+        const properties = await getProperties();
+        const text = properties.concat('\n').concat(key).concat('=').concat(value);
+        write(path.join(uriFolder.path, "application.properties"), text);
+    }
+}
+
 export function deleteFile(fullPath: string) {
     if (workspace.workspaceFolders) {
         const uriFile: Uri = Uri.file(path.resolve(fullPath));

diff --git a/karavan-vscode/webview/App.tsx b/karavan-vscode/webview/App.tsx
@@ -189,6 +189,10 @@ class App extends React.Component<Props, State> {
     vscode.postMessage({ command: 'saveCode', name: name, yamlFullPath: this.state.fullPath, yamFileName: this.state.filename, code: code });
   }
 
+  savePropertyPlaceholder(key: string, value: string) {
+    vscode.postMessage({ command: 'savePropertyPlaceholder', key: key, value: value });
+  }
+
   saveIntegrationFiles(files: any) {
     const f = Object.keys(files).map(key => new IntegrationFile(key, files[key]));
     this.setState({ files: f });
@@ -223,6 +227,7 @@ class App extends React.Component<Props, State> {
               return new Promise<string | undefined>(resolve => resolve(code))
             }}
             propertyPlaceholders={this.state.propertyPlaceholders}
+            onSavePropertyPlaceholder={(key, value) => this.savePropertyPlaceholder(key, value)}
           />
         }
         {loaded && page === "knowledgebase" && <KnowledgebasePage dark={dark} />}

diff --git a/karavan-web/karavan-app/src/main/webui/src/designer/KaravanDesigner.tsx b/karavan-web/karavan-app/src/main/webui/src/designer/KaravanDesigner.tsx
@@ -46,6 +46,7 @@ interface Props {
     onSave: (filename: string, yaml: string, propertyOnly: boolean) => void
     onSaveCustomCode: (name: string, code: string) => void
     onGetCustomCode: (name: string, javaType: string) => Promise<string | undefined>
+    onSavePropertyPlaceholder: (key: string, value: string) => void
     filename: string
     yaml: string
     dark: boolean
@@ -70,6 +71,7 @@ export function KaravanDesigner(props: Props) {
         InfrastructureAPI.setOnSaveCustomCode(props.onSaveCustomCode);
         InfrastructureAPI.setOnGetCustomCode(props.onGetCustomCode);
         InfrastructureAPI.setOnSave(props.onSave);
+        InfrastructureAPI.setOnSavePropertyPlaceholder(props.onSavePropertyPlaceholder);
 
         setSelectedStep(undefined);
         const i = makeIntegration(props.yaml, props.filename);

diff --git a/...-web/karavan-app/src/main/webui/src/designer/property/property/ComponentPropertyField.tsx b/...-web/karavan-app/src/main/webui/src/designer/property/property/ComponentPropertyField.tsx
@@ -269,7 +269,7 @@ export function ComponentPropertyField(props: Props) {
                 </Tooltip>
             }
             <InputGroupItem>
-                <ComponentPropertyPlaceholderDropdown property={property}/>
+                <ComponentPropertyPlaceholderDropdown property={property} value={value}/>
             </InputGroupItem>
         </InputGroup>
     }
@@ -289,7 +289,7 @@ export function ComponentPropertyField(props: Props) {
                         }}/>
                 </InputGroupItem>
                 <InputGroupItem>
-                    <ComponentPropertyPlaceholderDropdown property={property}/>
+                    <ComponentPropertyPlaceholderDropdown property={property} value={value}/>
                 </InputGroupItem>
             </InputGroup>
         )
@@ -347,7 +347,7 @@ export function ComponentPropertyField(props: Props) {
                     />
                 </InputGroupItem>
                 <InputGroupItem>
-                    <ComponentPropertyPlaceholderDropdown property={property}/>
+                    <ComponentPropertyPlaceholderDropdown property={property} value={value}/>
                 </InputGroupItem>
             </TextInputGroup>
         )

diff --git a/...pp/src/main/webui/src/designer/property/property/ComponentPropertyPlaceholderDropdown.css b/...pp/src/main/webui/src/designer/property/property/ComponentPropertyPlaceholderDropdown.css
@@ -19,6 +19,19 @@
     padding-left: 6px;
     padding-right: 6px;
 }
+
+.karavan .properties .property-placeholder-toggle .pf-v5-c-button__icon.pf-m-start {
+    margin-inline-end: 0;
+}
+
 .karavan .properties .property-placeholder-toggle .pf-v5-c-menu-toggle__controls {
     display: none;
+}
+
+.pf-v5-c-popover .property-placeholder-toggle-form {
+    width: 300px;
+}
+
+.pf-v5-c-popover .property-placeholder-toggle-form .pf-v5-c-form__group {
+    grid-template-columns: 1fr 2fr;
 }