This is an automated email from the ASF dual-hosted git repository.
marat pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/camel-karavan.git
commit 4da2d8b740ec08e1a7a5d66a1de03d50b5e06de4
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Fri Feb 2 19:24:09 2024 -0500
Dsl properties #1098
---
.../property/property/ComponentPropertyField.tsx | 6 ++--
.../property/property/DslPropertyField.tsx | 3 ++
.../property/PropertyPlaceholderDropdown.tsx | 20 ++++++++----
.../property/property/ComponentPropertyField.tsx | 8 ++---
.../property/property/DslPropertyField.tsx | 5 ++-
.../property/PropertyPlaceholderDropdown.css | 37 ++++++++++++++++++++++
.../property/PropertyPlaceholderDropdown.tsx | 20 ++++++++----
.../property/property/ComponentPropertyField.tsx | 8 ++---
.../property/property/DslPropertyField.tsx | 5 ++-
.../property/PropertyPlaceholderDropdown.css | 37 ++++++++++++++++++++++
.../property/PropertyPlaceholderDropdown.tsx | 20 ++++++++----
11 files changed, 135 insertions(+), 34 deletions(-)
diff --git
a/karavan-designer/src/designer/property/property/ComponentPropertyField.tsx
b/karavan-designer/src/designer/property/property/ComponentPropertyField.tsx
index e32a4fb9..3798c4e4 100644
--- a/karavan-designer/src/designer/property/property/ComponentPropertyField.tsx
+++ b/karavan-designer/src/designer/property/property/ComponentPropertyField.tsx
@@ -267,7 +267,7 @@ export function ComponentPropertyField(props: Props) {
</Tooltip>
}
<InputGroupItem>
- <PropertyPlaceholderDropdown property={property}
value={value}/>
+ <PropertyPlaceholderDropdown property={property} value={value}
onComponentPropertyChange={onParametersChange}/>
</InputGroupItem>
</InputGroup>
}
@@ -287,7 +287,7 @@ export function ComponentPropertyField(props: Props) {
}}/>
</InputGroupItem>
<InputGroupItem>
- <PropertyPlaceholderDropdown property={property}
value={value}/>
+ <PropertyPlaceholderDropdown property={property}
value={value} onComponentPropertyChange={onParametersChange}/>
</InputGroupItem>
</InputGroup>
)
@@ -345,7 +345,7 @@ export function ComponentPropertyField(props: Props) {
/>
</InputGroupItem>
<InputGroupItem>
- <PropertyPlaceholderDropdown property={property}
value={value}/>
+ <PropertyPlaceholderDropdown property={property}
value={value} onComponentPropertyChange={onParametersChange}/>
</InputGroupItem>
</TextInputGroup>
)
diff --git
a/karavan-designer/src/designer/property/property/DslPropertyField.tsx
b/karavan-designer/src/designer/property/property/DslPropertyField.tsx
index e5f4cec0..923b0e26 100644
--- a/karavan-designer/src/designer/property/property/DslPropertyField.tsx
+++ b/karavan-designer/src/designer/property/property/DslPropertyField.tsx
@@ -423,6 +423,9 @@ export function DslPropertyField(props: Props) {
onChange={(_, v) => propertyChanged(property.name, v)}
/>
</InputGroupItem>
+ <InputGroupItem>
+ <PropertyPlaceholderDropdown property={property}
value={value} onDslPropertyChange={propertyChanged}/>
+ </InputGroupItem>
</TextInputGroup>
)
}
diff --git
a/karavan-designer/src/designer/property/property/PropertyPlaceholderDropdown.tsx
b/karavan-designer/src/designer/property/property/PropertyPlaceholderDropdown.tsx
index 85899749..066e8b04 100644
---
a/karavan-designer/src/designer/property/property/PropertyPlaceholderDropdown.tsx
+++
b/karavan-designer/src/designer/property/property/PropertyPlaceholderDropdown.tsx
@@ -34,13 +34,14 @@ import '../../karavan.css';
import './PropertyPlaceholderDropdown.css';
import "@patternfly/patternfly/patternfly.css";
import {ComponentProperty} from "karavan-core/lib/model/ComponentModels";
-import {RouteToCreate} from "../../utils/CamelUi";
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";
+import {PropertyMeta} from "karavan-core/lib/model/CamelMetadata";
+import {RouteToCreate} from "../../utils/CamelUi";
const SYNTAX_EXAMPLES = [
{key: 'property:', value: 'group.property', description: 'Application
property'},
@@ -50,13 +51,14 @@ const SYNTAX_EXAMPLES = [
]
interface Props {
- property: ComponentProperty,
- value: any
+ property: ComponentProperty | PropertyMeta,
+ value: any,
+ onDslPropertyChange?: (fieldId: string, value: string | number | boolean |
any, newRoute?: RouteToCreate) => void,
+ onComponentPropertyChange?: (parameter: string, value: string | number |
boolean | any, pathParameter?: boolean, newRoute?: RouteToCreate) => void
}
export function PropertyPlaceholderDropdown(props: Props) {
- const {onParametersChange} = usePropertiesHook();
const [propertyPlaceholders, setPropertyPlaceholders] =
useDesignerStore((s) =>
[s.propertyPlaceholders, s.setPropertyPlaceholders], shallow)
const [isOpenPlaceholdersDropdown, setOpenPlaceholdersDropdown] =
useState<boolean>(false);
@@ -78,8 +80,12 @@ export function PropertyPlaceholderDropdown(props: Props) {
const hasPlaceholders = (propertyPlaceholders &&
propertyPlaceholders.length > 0 );
- function parametersChanged(parameter: string, value: string | number |
boolean | any, pathParameter?: boolean, newRoute?: RouteToCreate) {
- onParametersChange(parameter, value, pathParameter, newRoute);
+ function parametersChanged(value: string | number | boolean | any) {
+ if (property instanceof ComponentProperty) {
+ props.onComponentPropertyChange?.(property.name, `{{${value}}}`,
property.kind === 'path');
+ } else {
+ props.onDslPropertyChange?.(property.name, `{{${value}}}`);
+ }
}
function onMenuToggleClick() {
@@ -151,7 +157,7 @@ export function PropertyPlaceholderDropdown(props: Props) {
popperProps={{position: "end"}}
isOpen={isOpenPlaceholdersDropdown}
onSelect={(_, value) => {
- parametersChanged(property.name, `{{${value}}}`, property.kind
=== 'path')
+ parametersChanged(value);
setOpenPlaceholdersDropdown(false);
}}
onOpenChange={(isOpen: boolean) =>
setOpenPlaceholdersDropdown(isOpen)}
diff --git
a/karavan-space/src/designer/property/property/ComponentPropertyField.tsx
b/karavan-space/src/designer/property/property/ComponentPropertyField.tsx
index 72c145e0..3798c4e4 100644
--- a/karavan-space/src/designer/property/property/ComponentPropertyField.tsx
+++ b/karavan-space/src/designer/property/property/ComponentPropertyField.tsx
@@ -54,7 +54,7 @@ import {shallow} from "zustand/shallow";
import {KubernetesIcon} from "../../icons/ComponentIcons";
import EditorIcon from "@patternfly/react-icons/dist/js/icons/code-icon";
import {ModalEditor} from "./ModalEditor";
-import {ComponentPropertyPlaceholderDropdown} from
"./ComponentPropertyPlaceholderDropdown";
+import {PropertyPlaceholderDropdown} from "./PropertyPlaceholderDropdown";
const prefix = "parameters";
const beanPrefix = "#bean:";
@@ -267,7 +267,7 @@ export function ComponentPropertyField(props: Props) {
</Tooltip>
}
<InputGroupItem>
- <ComponentPropertyPlaceholderDropdown property={property}
value={value}/>
+ <PropertyPlaceholderDropdown property={property} value={value}
onComponentPropertyChange={onParametersChange}/>
</InputGroupItem>
</InputGroup>
}
@@ -287,7 +287,7 @@ export function ComponentPropertyField(props: Props) {
}}/>
</InputGroupItem>
<InputGroupItem>
- <ComponentPropertyPlaceholderDropdown property={property}
value={value}/>
+ <PropertyPlaceholderDropdown property={property}
value={value} onComponentPropertyChange={onParametersChange}/>
</InputGroupItem>
</InputGroup>
)
@@ -345,7 +345,7 @@ export function ComponentPropertyField(props: Props) {
/>
</InputGroupItem>
<InputGroupItem>
- <ComponentPropertyPlaceholderDropdown property={property}
value={value}/>
+ <PropertyPlaceholderDropdown property={property}
value={value} onComponentPropertyChange={onParametersChange}/>
</InputGroupItem>
</TextInputGroup>
)
diff --git a/karavan-space/src/designer/property/property/DslPropertyField.tsx
b/karavan-space/src/designer/property/property/DslPropertyField.tsx
index 59066667..923b0e26 100644
--- a/karavan-space/src/designer/property/property/DslPropertyField.tsx
+++ b/karavan-space/src/designer/property/property/DslPropertyField.tsx
@@ -74,7 +74,7 @@ import {
import {TemplateApi} from "karavan-core/lib/api/TemplateApi";
import {KubernetesIcon} from "../../icons/ComponentIcons";
import {BeanProperties} from "./BeanProperties";
-import {ComponentPropertyPlaceholderDropdown} from
"./ComponentPropertyPlaceholderDropdown";
+import {PropertyPlaceholderDropdown} from "./PropertyPlaceholderDropdown";
interface Props {
property: PropertyMeta,
@@ -423,6 +423,9 @@ export function DslPropertyField(props: Props) {
onChange={(_, v) => propertyChanged(property.name, v)}
/>
</InputGroupItem>
+ <InputGroupItem>
+ <PropertyPlaceholderDropdown property={property}
value={value} onDslPropertyChange={propertyChanged}/>
+ </InputGroupItem>
</TextInputGroup>
)
}
diff --git
a/karavan-space/src/designer/property/property/PropertyPlaceholderDropdown.css
b/karavan-space/src/designer/property/property/PropertyPlaceholderDropdown.css
new file mode 100644
index 00000000..43991634
--- /dev/null
+++
b/karavan-space/src/designer/property/property/PropertyPlaceholderDropdown.css
@@ -0,0 +1,37 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.karavan .properties .property-placeholder-toggle {
+ 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;
+}
\ No newline at end of file
diff --git
a/karavan-designer/src/designer/property/property/PropertyPlaceholderDropdown.tsx
b/karavan-space/src/designer/property/property/PropertyPlaceholderDropdown.tsx
similarity index 90%
copy from
karavan-designer/src/designer/property/property/PropertyPlaceholderDropdown.tsx
copy to
karavan-space/src/designer/property/property/PropertyPlaceholderDropdown.tsx
index 85899749..066e8b04 100644
---
a/karavan-designer/src/designer/property/property/PropertyPlaceholderDropdown.tsx
+++
b/karavan-space/src/designer/property/property/PropertyPlaceholderDropdown.tsx
@@ -34,13 +34,14 @@ import '../../karavan.css';
import './PropertyPlaceholderDropdown.css';
import "@patternfly/patternfly/patternfly.css";
import {ComponentProperty} from "karavan-core/lib/model/ComponentModels";
-import {RouteToCreate} from "../../utils/CamelUi";
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";
+import {PropertyMeta} from "karavan-core/lib/model/CamelMetadata";
+import {RouteToCreate} from "../../utils/CamelUi";
const SYNTAX_EXAMPLES = [
{key: 'property:', value: 'group.property', description: 'Application
property'},
@@ -50,13 +51,14 @@ const SYNTAX_EXAMPLES = [
]
interface Props {
- property: ComponentProperty,
- value: any
+ property: ComponentProperty | PropertyMeta,
+ value: any,
+ onDslPropertyChange?: (fieldId: string, value: string | number | boolean |
any, newRoute?: RouteToCreate) => void,
+ onComponentPropertyChange?: (parameter: string, value: string | number |
boolean | any, pathParameter?: boolean, newRoute?: RouteToCreate) => void
}
export function PropertyPlaceholderDropdown(props: Props) {
- const {onParametersChange} = usePropertiesHook();
const [propertyPlaceholders, setPropertyPlaceholders] =
useDesignerStore((s) =>
[s.propertyPlaceholders, s.setPropertyPlaceholders], shallow)
const [isOpenPlaceholdersDropdown, setOpenPlaceholdersDropdown] =
useState<boolean>(false);
@@ -78,8 +80,12 @@ export function PropertyPlaceholderDropdown(props: Props) {
const hasPlaceholders = (propertyPlaceholders &&
propertyPlaceholders.length > 0 );
- function parametersChanged(parameter: string, value: string | number |
boolean | any, pathParameter?: boolean, newRoute?: RouteToCreate) {
- onParametersChange(parameter, value, pathParameter, newRoute);
+ function parametersChanged(value: string | number | boolean | any) {
+ if (property instanceof ComponentProperty) {
+ props.onComponentPropertyChange?.(property.name, `{{${value}}}`,
property.kind === 'path');
+ } else {
+ props.onDslPropertyChange?.(property.name, `{{${value}}}`);
+ }
}
function onMenuToggleClick() {
@@ -151,7 +157,7 @@ export function PropertyPlaceholderDropdown(props: Props) {
popperProps={{position: "end"}}
isOpen={isOpenPlaceholdersDropdown}
onSelect={(_, value) => {
- parametersChanged(property.name, `{{${value}}}`, property.kind
=== 'path')
+ parametersChanged(value);
setOpenPlaceholdersDropdown(false);
}}
onOpenChange={(isOpen: boolean) =>
setOpenPlaceholdersDropdown(isOpen)}
diff --git
a/karavan-web/karavan-app/src/main/webui/src/designer/property/property/ComponentPropertyField.tsx
b/karavan-web/karavan-app/src/main/webui/src/designer/property/property/ComponentPropertyField.tsx
index 72c145e0..3798c4e4 100644
---
a/karavan-web/karavan-app/src/main/webui/src/designer/property/property/ComponentPropertyField.tsx
+++
b/karavan-web/karavan-app/src/main/webui/src/designer/property/property/ComponentPropertyField.tsx
@@ -54,7 +54,7 @@ import {shallow} from "zustand/shallow";
import {KubernetesIcon} from "../../icons/ComponentIcons";
import EditorIcon from "@patternfly/react-icons/dist/js/icons/code-icon";
import {ModalEditor} from "./ModalEditor";
-import {ComponentPropertyPlaceholderDropdown} from
"./ComponentPropertyPlaceholderDropdown";
+import {PropertyPlaceholderDropdown} from "./PropertyPlaceholderDropdown";
const prefix = "parameters";
const beanPrefix = "#bean:";
@@ -267,7 +267,7 @@ export function ComponentPropertyField(props: Props) {
</Tooltip>
}
<InputGroupItem>
- <ComponentPropertyPlaceholderDropdown property={property}
value={value}/>
+ <PropertyPlaceholderDropdown property={property} value={value}
onComponentPropertyChange={onParametersChange}/>
</InputGroupItem>
</InputGroup>
}
@@ -287,7 +287,7 @@ export function ComponentPropertyField(props: Props) {
}}/>
</InputGroupItem>
<InputGroupItem>
- <ComponentPropertyPlaceholderDropdown property={property}
value={value}/>
+ <PropertyPlaceholderDropdown property={property}
value={value} onComponentPropertyChange={onParametersChange}/>
</InputGroupItem>
</InputGroup>
)
@@ -345,7 +345,7 @@ export function ComponentPropertyField(props: Props) {
/>
</InputGroupItem>
<InputGroupItem>
- <ComponentPropertyPlaceholderDropdown property={property}
value={value}/>
+ <PropertyPlaceholderDropdown property={property}
value={value} onComponentPropertyChange={onParametersChange}/>
</InputGroupItem>
</TextInputGroup>
)
diff --git
a/karavan-web/karavan-app/src/main/webui/src/designer/property/property/DslPropertyField.tsx
b/karavan-web/karavan-app/src/main/webui/src/designer/property/property/DslPropertyField.tsx
index 59066667..923b0e26 100644
---
a/karavan-web/karavan-app/src/main/webui/src/designer/property/property/DslPropertyField.tsx
+++
b/karavan-web/karavan-app/src/main/webui/src/designer/property/property/DslPropertyField.tsx
@@ -74,7 +74,7 @@ import {
import {TemplateApi} from "karavan-core/lib/api/TemplateApi";
import {KubernetesIcon} from "../../icons/ComponentIcons";
import {BeanProperties} from "./BeanProperties";
-import {ComponentPropertyPlaceholderDropdown} from
"./ComponentPropertyPlaceholderDropdown";
+import {PropertyPlaceholderDropdown} from "./PropertyPlaceholderDropdown";
interface Props {
property: PropertyMeta,
@@ -423,6 +423,9 @@ export function DslPropertyField(props: Props) {
onChange={(_, v) => propertyChanged(property.name, v)}
/>
</InputGroupItem>
+ <InputGroupItem>
+ <PropertyPlaceholderDropdown property={property}
value={value} onDslPropertyChange={propertyChanged}/>
+ </InputGroupItem>
</TextInputGroup>
)
}
diff --git
a/karavan-web/karavan-app/src/main/webui/src/designer/property/property/PropertyPlaceholderDropdown.css
b/karavan-web/karavan-app/src/main/webui/src/designer/property/property/PropertyPlaceholderDropdown.css
new file mode 100644
index 00000000..43991634
--- /dev/null
+++
b/karavan-web/karavan-app/src/main/webui/src/designer/property/property/PropertyPlaceholderDropdown.css
@@ -0,0 +1,37 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.karavan .properties .property-placeholder-toggle {
+ 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;
+}
\ No newline at end of file
diff --git
a/karavan-designer/src/designer/property/property/PropertyPlaceholderDropdown.tsx
b/karavan-web/karavan-app/src/main/webui/src/designer/property/property/PropertyPlaceholderDropdown.tsx
similarity index 90%
copy from
karavan-designer/src/designer/property/property/PropertyPlaceholderDropdown.tsx
copy to
karavan-web/karavan-app/src/main/webui/src/designer/property/property/PropertyPlaceholderDropdown.tsx
index 85899749..066e8b04 100644
---
a/karavan-designer/src/designer/property/property/PropertyPlaceholderDropdown.tsx
+++
b/karavan-web/karavan-app/src/main/webui/src/designer/property/property/PropertyPlaceholderDropdown.tsx
@@ -34,13 +34,14 @@ import '../../karavan.css';
import './PropertyPlaceholderDropdown.css';
import "@patternfly/patternfly/patternfly.css";
import {ComponentProperty} from "karavan-core/lib/model/ComponentModels";
-import {RouteToCreate} from "../../utils/CamelUi";
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";
+import {PropertyMeta} from "karavan-core/lib/model/CamelMetadata";
+import {RouteToCreate} from "../../utils/CamelUi";
const SYNTAX_EXAMPLES = [
{key: 'property:', value: 'group.property', description: 'Application
property'},
@@ -50,13 +51,14 @@ const SYNTAX_EXAMPLES = [
]
interface Props {
- property: ComponentProperty,
- value: any
+ property: ComponentProperty | PropertyMeta,
+ value: any,
+ onDslPropertyChange?: (fieldId: string, value: string | number | boolean |
any, newRoute?: RouteToCreate) => void,
+ onComponentPropertyChange?: (parameter: string, value: string | number |
boolean | any, pathParameter?: boolean, newRoute?: RouteToCreate) => void
}
export function PropertyPlaceholderDropdown(props: Props) {
- const {onParametersChange} = usePropertiesHook();
const [propertyPlaceholders, setPropertyPlaceholders] =
useDesignerStore((s) =>
[s.propertyPlaceholders, s.setPropertyPlaceholders], shallow)
const [isOpenPlaceholdersDropdown, setOpenPlaceholdersDropdown] =
useState<boolean>(false);
@@ -78,8 +80,12 @@ export function PropertyPlaceholderDropdown(props: Props) {
const hasPlaceholders = (propertyPlaceholders &&
propertyPlaceholders.length > 0 );
- function parametersChanged(parameter: string, value: string | number |
boolean | any, pathParameter?: boolean, newRoute?: RouteToCreate) {
- onParametersChange(parameter, value, pathParameter, newRoute);
+ function parametersChanged(value: string | number | boolean | any) {
+ if (property instanceof ComponentProperty) {
+ props.onComponentPropertyChange?.(property.name, `{{${value}}}`,
property.kind === 'path');
+ } else {
+ props.onDslPropertyChange?.(property.name, `{{${value}}}`);
+ }
}
function onMenuToggleClick() {
@@ -151,7 +157,7 @@ export function PropertyPlaceholderDropdown(props: Props) {
popperProps={{position: "end"}}
isOpen={isOpenPlaceholdersDropdown}
onSelect={(_, value) => {
- parametersChanged(property.name, `{{${value}}}`, property.kind
=== 'path')
+ parametersChanged(value);
setOpenPlaceholdersDropdown(false);
}}
onOpenChange={(isOpen: boolean) =>
setOpenPlaceholdersDropdown(isOpen)}
