Skip to content

Commit

Permalink
FIx #930
Browse files Browse the repository at this point in the history
  • Loading branch information
@mgubaidullin
mgubaidullin committed Oct 5, 2023
1 parent 7532d85 commit 083466d
Show file tree
Hide file tree
Showing 18 changed files with 434 additions and 246 deletions.
3 changes: 1 addition & 2 deletions karavan-designer/src/designer/kamelet/KameletAnnotationsPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,8 +75,7 @@ export function KameletAnnotationsPanel() {
return (
<GridItem span={span}>
<FormGroup label={label} fieldId={key} isRequired>
{/* eslint-disable-next-line react/jsx-no-undef */}
<ToggleGroup aria-label={key}>
<ToggleGroup aria-label={key} id={key} name={key}>
{values.map(value =>
<ToggleGroupItem
key={value}
Expand Down
1 change: 1 addition & 0 deletions karavan-designer/src/designer/karavan.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -343,6 +343,7 @@
flex-direction: column;
justify-content: space-between;
margin-bottom: 20px;
padding-bottom: 30px;
}

.karavan .pf-v5-c-drawer__splitter {
Expand Down
4 changes: 2 additions & 2 deletions karavan-designer/src/designer/route/property/ComponentParameterField.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ import "@patternfly/patternfly/patternfly.css";
import HelpIcon from "@patternfly/react-icons/dist/js/icons/help-icon";
import {ComponentProperty} from "karavan-core/lib/model/ComponentModels";
import {CamelUi, RouteToCreate} from "../../utils/CamelUi";
import {CamelElement, Integration} from "karavan-core/lib/model/IntegrationDefinition";
import {CamelElement} from "karavan-core/lib/model/IntegrationDefinition";
import {ToDefinition} from "karavan-core/lib/model/CamelDefinition";
import CompressIcon from "@patternfly/react-icons/dist/js/icons/compress-icon";
import ExpandIcon from "@patternfly/react-icons/dist/js/icons/expand-icon";
Expand All @@ -49,7 +49,7 @@ import ShowIcon from "@patternfly/react-icons/dist/js/icons/eye-icon";
import HideIcon from "@patternfly/react-icons/dist/js/icons/eye-slash-icon";
import PlusIcon from "@patternfly/react-icons/dist/esm/icons/plus-icon";
import {usePropertiesHook} from "../usePropertiesHook";
import {useDesignerStore, useIntegrationStore} from "../../DesignerStore";
import {useIntegrationStore} from "../../DesignerStore";
import {shallow} from "zustand/shallow";

const prefix = "parameters";
Expand Down
12 changes: 8 additions & 4 deletions karavan-designer/src/designer/route/property/DslPropertyField.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ export function DslPropertyField(props: Props) {
const [integration] = useIntegrationStore((state) => [state.integration], shallow)
const [dark] = useDesignerStore((s) => [s.dark], shallow)

const [isShowAdvanced, setIsShowAdvanced] = useState<Map<string, boolean>>(new Map<string, boolean>());
const [isShowAdvanced, setIsShowAdvanced] = useState<string[]>([]);
const [arrayValues, setArrayValues] = useState<Map<string, string>>(new Map<string, string>());
const [selectStatus, setSelectStatus] = useState<Map<string, boolean>>(new Map<string, boolean>());
const [showEditor, setShowEditor] = useState<boolean>(false);
Expand Down Expand Up @@ -654,19 +654,23 @@ export function DslPropertyField(props: Props) {
</div>
)
}

function getExpandableComponentParameters(properties: ComponentProperty[], label: string) {
const element = props.element;

return (
<ExpandableSection
toggleText={label}
onToggle={(_event, isExpanded) => {
setIsShowAdvanced(prevState => {
prevState.set(label, !prevState.get(label));
if (isExpanded && !isShowAdvanced.includes(label)) {
prevState = [...prevState, label]
} else {
prevState = prevState.filter(s => s!== label);
}
return prevState;
})
}}
isExpanded={isShowAdvanced.has(label) && isShowAdvanced.get(label)}>
isExpanded={isShowAdvanced.includes(label)}>
<div className="parameters">
{properties.map(kp =>
<ComponentParameterField
Expand Down
3 changes: 1 addition & 2 deletions karavan-space/src/designer/kamelet/KameletAnnotationsPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,8 +75,7 @@ export function KameletAnnotationsPanel() {
return (
<GridItem span={span}>
<FormGroup label={label} fieldId={key} isRequired>
{/* eslint-disable-next-line react/jsx-no-undef */}
<ToggleGroup aria-label={key}>
<ToggleGroup aria-label={key} id={key} name={key}>
{values.map(value =>
<ToggleGroupItem
key={value}
Expand Down
125 changes: 116 additions & 9 deletions karavan-space/src/designer/kamelet/KameletDefinitionPropertyCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,17 +19,27 @@ import {
Button,
Card,
CardBody,
CardTitle, Flex, FlexItem,
FormGroup, FormSelect, FormSelectOption,
CardTitle,
Flex,
FlexItem,
FormGroup,
FormSelect,
FormSelectOption,
Grid,
GridItem, Label, Modal, Switch,
GridItem,
Label,
LabelGroup,
Modal,
Switch,
TextInput,
} from '@patternfly/react-core';
import '../karavan.css';
import './kamelet.css';
import {useIntegrationStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
import {DefinitionProperty} from "karavan-core/lib/model/IntegrationDefinition";
import {CamelUtil} from "karavan-core/lib/api/CamelUtil";
import AddIcon from "@patternfly/react-icons/dist/js/icons/plus-circle-icon";

interface Props {
index: number
Expand All @@ -45,7 +55,7 @@ export function KameletDefinitionPropertyCard(props: Props) {
const key = props.propKey;
const required = integration.spec.definition?.required || [];

function setPropertyValue(field: string, value: string) {
function setPropertyValue(field: string, value: any) {
if (integration.spec.definition?.properties) {
(integration.spec.definition?.properties as any)[key][field] = value;
setIntegration(integration, true);
Expand Down Expand Up @@ -83,18 +93,116 @@ export function KameletDefinitionPropertyCard(props: Props) {
aria-label="FormSelect Input"
ouiaId="BasicFormSelect"
>
{['string', 'number', 'boolean'].map((option, index) => (
<FormSelectOption key={option} isDisabled={false} id={key + field} name={key + field} value={option} label={option} />
{['string', 'number', 'integer', 'boolean'].map((option, index) => (
<FormSelectOption key={option} isDisabled={false} id={key + field} name={key + field}
value={option} label={option}/>
))}
</FormSelect>
</FormGroup>
</GridItem>
)
}

function sortEnum(source: string, dest: string) {
const i = CamelUtil.cloneIntegration(integration);
if (i.spec.definition && integration.spec.definition?.properties[key]) {
const enums: string [] = i.spec.definition.properties[key].enum;
console.log(enums)
if (enums && Array.isArray(enums)) {
console.log("isArray")
const from = enums.findIndex(e => source);
const to = enums.findIndex(e => dest);
if (from > -1 && to > -1) {
console.log("exchange");
[enums[from], enums[to]] = [enums[to], enums[from]];
i.spec.definition.properties[key].enum = enums;
console.log("i.spec.definition.properties[key].enum", i.spec.definition.properties[key].enum);
setIntegration(i, true);
}
}
}
}

function addEnum() {
const i = CamelUtil.cloneIntegration(integration);
if (i.spec.definition && integration.spec.definition?.properties[key]) {
let enums: string [] = i.spec.definition.properties[key].enum;
if (enums && Array.isArray(enums)) {
enums.push("enum")
} else {
enums = ['enum'];
}
i.spec.definition.properties[key].enum = enums;
setIntegration(i, true);
}
}

function deleteEnum(val: string) {
const enumVal = getPropertyValue('enum');
const i = CamelUtil.cloneIntegration(integration);
if (enumVal && Array.isArray(enumVal) && i.spec.definition) {
const enums: string[] = [...enumVal];
setPropertyValue('enum', enums.filter(e => e !== val));
}
}

function renameEnum(index: number, newVal: string) {
const enumVal = getPropertyValue('enum');
const i = CamelUtil.cloneIntegration(integration);
if (enumVal && Array.isArray(enumVal) && i.spec.definition) {
const enums: string[] = [...enumVal];
enums[index] = newVal;
setPropertyValue('enum', enums);
}
}

function getPropertyEnumField(field: string, label: string, isRequired: boolean, span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) {
const enumVal = getPropertyValue(field);
return (
<GridItem span={span}>
<FormGroup fieldId={key + field} isRequired={isRequired}>
<LabelGroup
categoryName={label}
numLabels={enumVal?.length || 0}
isEditable
addLabelControl={
<Button variant="link" icon={<AddIcon/>} onClick={event => addEnum()}>
Add
</Button>
}
>
{enumVal && enumVal.map((val: string, index: number) => (
<Label
key={val}
id={val}
color="grey"
isEditable
onClose={() => deleteEnum(val)}
onEditCancel={(_event, prevText) => {}}
onEditComplete={(event, newText) => {
if (event.type === 'mousedown') {
renameEnum(index, val)
} else if (event.type === 'keydown' && (event as KeyboardEvent).key === 'Tab') {
renameEnum(index, newText)
} else if (event.type === 'keydown' && (event as KeyboardEvent).key === 'Enter') {
renameEnum(index, newText)
} else {
renameEnum(index, val)
}
}}
>
{val}
</Label>
))}
</LabelGroup>
</FormGroup>
</GridItem>
)
}

function renameProperty(newKey: string) {
const oldKey = key;
newKey = newKey.replace(/[\W_]+/g,'');
newKey = newKey.replace(/[\W_]+/g, '');
if (oldKey !== newKey) {
if (integration.spec.definition?.properties) {
const o = (integration.spec.definition?.properties as any)
Expand Down Expand Up @@ -138,15 +246,13 @@ export function KameletDefinitionPropertyCard(props: Props) {
}

function setRequired(checked: boolean) {
console.log(required, key)
const newRequired = [...required];
if (checked && !newRequired.includes(key)) {
newRequired.push(key);
} else if (!checked && newRequired.includes(key)) {
const index = newRequired.findIndex(r => r === key);
newRequired.splice(index, 1);
}
// console.log(newRequired)
if (integration.spec.definition?.required) {
integration.spec.definition.required.length = 0;
integration.spec.definition.required.push(...newRequired)
Expand Down Expand Up @@ -212,6 +318,7 @@ export function KameletDefinitionPropertyCard(props: Props) {
{getPropertyField("format", "Format", false, 3)}
{getPropertyField("example", "Example", false, 6)}
{getPropertyField("default", "Default", false, 3)}
{getPropertyValue('type') === 'string' && getPropertyEnumField("enum", "Enum", true, 12)}
{/*{getPropertyField("x-descriptors", "Descriptors", false, 12)}*/}
</Grid>
</CardBody>
Expand Down
59 changes: 52 additions & 7 deletions karavan-space/src/designer/kamelet/KameletDefinitionsPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,13 @@ import {
Button,
Card,
CardBody,
CardTitle, Flex, FlexItem,
CardTitle,
Flex,
FlexItem,
Form,
FormGroup,
Grid,
GridItem,
GridItem, TextArea,
TextInput,
} from '@patternfly/react-core';
import '../karavan.css';
Expand All @@ -32,6 +34,9 @@ import {useIntegrationStore} from "../DesignerStore";
import {shallow} from "zustand/shallow";
import AddIcon from "@patternfly/react-icons/dist/js/icons/plus-circle-icon";
import {KameletDefinitionPropertyCard} from "./KameletDefinitionPropertyCard";
import {CamelUtil} from "karavan-core/lib/api/CamelUtil";
import {DefinitionProperty} from "karavan-core/lib/model/IntegrationDefinition";
import {KameletDependenciesCard} from "./KameletDependenciesCard";

export function KameletDefinitionsPanel() {

Expand All @@ -53,7 +58,7 @@ export function KameletDefinitionsPanel() {
}
}

function getElement(key: string, label: string, span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) {
function getElementTextInput(key: string, label: string, span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) {
return (
<GridItem span={span}>
<FormGroup label={label} fieldId={key} isRequired>
Expand All @@ -65,17 +70,53 @@ export function KameletDefinitionsPanel() {
)
}

function getElementTextArea(key: string, label: string, span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) {
return (
<GridItem span={span}>
<FormGroup label={label} fieldId={key} isRequired>
<TextArea type="text" id={key} name={key} autoResize
onChange={(_, value) => setValue(key, value)}
value={getValue(key)}/>
</FormGroup>
</GridItem>
)
}

const properties = integration.spec.definition?.properties ? Object.keys(integration.spec.definition?.properties) : [];

function addNewProperty() {
const i = CamelUtil.cloneIntegration(integration);
if (i.spec.definition && integration.spec.definition?.properties) {
const propertyName = generatePropertyName();
i.spec.definition.properties = Object.assign({[propertyName]: new DefinitionProperty()}, integration.spec.definition.properties);
setIntegration(i, true);
}
}

function generatePropertyName(count: number = 0): string {
const prefix = 'property';
const propName = 'property' + count;
if (integration.spec.definition?.properties) {
const keys = Object.keys(integration.spec.definition?.properties);
if (keys.includes(propName)) {
return generatePropertyName(count + 1);
} else {
return propName;
}
}
return prefix;
}

return (
<>
<Card isCompact ouiaId="DefinitionsCard">
<CardTitle>Definitions</CardTitle>
<CardBody>
<Form>
<Grid hasGutter>
{getElement('title', 'Title', 4)}
{getElement('description', 'Description', 6)}
{getElement('type', 'Type', 2)}
{getElementTextInput('title', 'Title', 3)}
{getElementTextArea('description', 'Description', 9)}
{/*{getElementTextInput('type', 'Type', 2)}*/}
</Grid>
</Form>
</CardBody>
Expand All @@ -86,7 +127,9 @@ export function KameletDefinitionsPanel() {
<Flex>
<FlexItem>Properties</FlexItem>
<FlexItem align={{default: "alignRight"}}>
<Button variant={"link"} icon={<AddIcon/>}>Add property</Button>
<Button variant={"link"} icon={<AddIcon/>} onClick={event => addNewProperty()}>
Add property
</Button>
</FlexItem>
</Flex>
</CardTitle>
Expand All @@ -102,6 +145,8 @@ export function KameletDefinitionsPanel() {
</Form>
</CardBody>
</Card>
<div style={{height: "20px"}}/>
<KameletDependenciesCard/>
</>

)
Expand Down
Loading

0 comments on commit 083466d

Please sign in to comment.