You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@camel.apache.org by ma...@apache.org on 2022/10/06 05:26:59 UTC
[camel-karavan] 04/04: Show correct description
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 b943150b4d045884f20eca7a13c05363efbb0755
Author: Marat Gubaidullin <ma...@gmail.com>
AuthorDate: Thu Oct 6 01:26:43 2022 -0400
Show correct description
---
karavan-designer/src/designer/karavan.css | 13 +++++++++++++
karavan-designer/src/designer/route/DslProperties.tsx | 16 +++++++++++++---
2 files changed, 26 insertions(+), 3 deletions(-)
diff --git a/karavan-designer/src/designer/karavan.css b/karavan-designer/src/designer/karavan.css
index b4efbaa..a2426eb 100644
--- a/karavan-designer/src/designer/karavan.css
+++ b/karavan-designer/src/designer/karavan.css
@@ -475,6 +475,19 @@
margin-right: 6px;
}
+.karavan .properties .pf-c-expandable-section__toggle {
+ margin: 0;
+ padding: 0;
+}
+
+.karavan .properties .pf-c-expandable-section__content {
+ margin: 0;
+}
+
+.karavan .properties .pf-c-expandable-section__content p {
+ min-height: 6px;
+}
+
/*Graph*/
.karavan .dsl-page .graph {
diff --git a/karavan-designer/src/designer/route/DslProperties.tsx b/karavan-designer/src/designer/route/DslProperties.tsx
index 71e15f1..1862e03 100644
--- a/karavan-designer/src/designer/route/DslProperties.tsx
+++ b/karavan-designer/src/designer/route/DslProperties.tsx
@@ -56,6 +56,7 @@ interface State {
step?: CamelElement,
selectStatus: Map<string, boolean>
isShowAdvanced: boolean
+ isDescriptionExpanded?: boolean
}
export class DslProperties extends React.Component<Props, State> {
@@ -135,8 +136,10 @@ export class DslProperties extends React.Component<Props, State> {
}
getRouteHeader= (): JSX.Element => {
+ const isDescriptionExpanded = this.state.isDescriptionExpanded;
const title = this.state.step && CamelUi.getTitle(this.state.step)
const description = this.state.step && CamelUi.getDescription(this.state.step);
+ const descriptionLines: string [] = description ? description?.split("\n") : [""];
return (
<div className="headers">
<div className="top">
@@ -148,14 +151,21 @@ export class DslProperties extends React.Component<Props, State> {
<Button variant="link" onClick={() => this.pasteClipboardStep()} icon={<PasteIcon/>}/>
</Tooltip>
</div>
- <Text component={TextVariants.p}>{description}</Text>
+ <Text component={TextVariants.p}>{descriptionLines.at(0)}</Text>
+ {descriptionLines.length > 1 && <ExpandableSection toggleText={isDescriptionExpanded ? 'Show less' : 'Show more'}
+ onToggle={isExpanded => this.setState({isDescriptionExpanded: !isDescriptionExpanded})}
+ isExpanded={isDescriptionExpanded}>
+ {descriptionLines.filter((value, index) => index > 0)
+ .map((desc, index, array) => <Text key={index} component={TextVariants.p}>{desc}</Text>)}
+ </ExpandableSection>}
</div>
)
}
getClonableElementHeader = (): JSX.Element => {
- const title = this.state.step && CamelUi.getTitle(this.state.step)
+ const title = this.state.step && CamelUi.getTitle(this.state.step);
const description = this.state.step?.dslName ? CamelMetadataApi.getCamelModelMetadataByClassName(this.state.step?.dslName)?.description : title;
+ const descriptionLines: string [] = description ? description?.split("\n") : [""];
return (
<div className="headers">
<div className="top">
@@ -164,7 +174,7 @@ export class DslProperties extends React.Component<Props, State> {
<Button variant="link" onClick={() => this.cloneElement()} icon={<CloneIcon/>}/>
</Tooltip>
</div>
- <Text component={TextVariants.p}>{description}</Text>
+ {descriptionLines.map((desc, index, array) => <Text key={index} component={TextVariants.p}>{desc}</Text>)}
</div>
)
}