Skip to content

Commit

Permalink
#1398
Browse files Browse the repository at this point in the history
  • Loading branch information
@mgubaidullin
mgubaidullin committed Sep 16, 2024
1 parent f673c38 commit 6bc659e
Show file tree
Hide file tree
Showing 12 changed files with 108 additions and 27 deletions.
3 changes: 2 additions & 1 deletion karavan-app/src/main/webui/src/designer/route/RouteDesigner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,8 @@ export function RouteDesigner() {
{showNewRoute && <Button
variant={routes.length === 0 ? "primary" : "secondary"}
icon={<PlusIcon/>}
onClick={e => {
onClick={evt => {
evt.stopPropagation();
if (isSinkKamelet() || isActionKamelet()) {
const dsl = CamelUi.getDslMetaModel('FromDefinition');
dsl.uri = 'kamelet:source';
Expand Down
3 changes: 2 additions & 1 deletion karavan-app/src/main/webui/src/designer/selector/DslCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,11 +45,12 @@ export function DslCard (props: Props) {
const labels = dsl.labels !== undefined ? dsl.labels.split(",").filter(label => label !== 'eip') : [];
const isCustom = KameletApi.getCustomKameletNames().includes(dsl.name);
const isRemote = dsl.remote;
const classNameBadge = "navigation-label label-" + dsl.navigation + ((dsl.navigation === 'eip' || dsl?.supportLevel.toLowerCase() === 'stable')? '' : '-preview');
return (
<Card key={dsl.dsl + index} isCompact isPlain isFlat isRounded className="dsl-card"
onClick={event => selectDsl(event, dsl)}>
<CardHeader className="header-labels">
<Badge className="navigation-label">{navigation}</Badge>
<Badge className={classNameBadge}>{navigation}</Badge>
{['kamelet', 'component'].includes(dsl.navigation.toLowerCase()) &&
<Badge isRead className="support-level labels">{dsl.supportLevel}</Badge>
}
Expand Down
24 changes: 23 additions & 1 deletion karavan-app/src/main/webui/src/designer/selector/DslSelector.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,10 +130,32 @@
}

.dsl-modal .pf-m-unread {
--pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--info-color--100);
font-weight: 200;
}

.dsl-modal .label-eip {
--pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--orange-200);
}

.dsl-modal .label-component {
--pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--blue-300);
}

.dsl-modal .label-kamelet {
--pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--green-300);
}

.dsl-modal .label-component-preview {
--pf-v5-c-badge--Color: var(--pf-v5-global--palette--blue-300);
--pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
}

.dsl-modal .label-kamelet-preview {
--pf-v5-c-badge--Color: var(--pf-v5-global--palette--green-300);
--pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
}


.dsl-modal .labels {
opacity: 0.5;
font-weight: 200;
Expand Down
15 changes: 9 additions & 6 deletions karavan-app/src/main/webui/src/designer/selector/DslSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,9 @@ export function DslSelector(props: Props) {
const p: string[] = []
p.push(...getPreferredElements('kamelets'));
p.push(...getPreferredElements('components'));
p.push(...getPreferredElements('eip'));
if (parentDsl !== undefined) {
p.push(...getPreferredElements('eip'));
}
setPreferredElements(p);
}

Expand All @@ -100,7 +102,6 @@ export function DslSelector(props: Props) {
}

function selectDsl(evt: React.MouseEvent, dsl: any) {
console.log('selectDsl', dsl)
evt.stopPropagation();
setFilter('');
setShowSelector(false);
Expand All @@ -109,7 +110,6 @@ export function DslSelector(props: Props) {
}

function deleteFast(evt: React.MouseEvent, dsl: DslMetaModel) {
console.log('deleteFast', dsl)
evt.stopPropagation();
deletePreferredElement(getDslMetaModelType(dsl), dsl);
setPreferences();
Expand Down Expand Up @@ -140,13 +140,16 @@ export function DslSelector(props: Props) {
}

function getToggles() {
const isEIP = selectedToggles.includes('eip')
const isComp = selectedToggles.includes('components')
const isKam = selectedToggles.includes('kamelets')
return (
<ToggleGroup aria-label="Default with single selectable">
{parentDsl !== undefined && <ToggleGroupItem
text={
<div style={{display: 'flex', flexDirection: 'row'}}>
<div style={{marginRight: '6px'}}>EIP</div>
{ready && <Badge isRead={!selectedToggles.includes('eip')}>{eCount}</Badge>}
{ready && <Badge isRead={!isEIP} className={isEIP ? "label-eip" : ""}>{eCount}</Badge>}
</div>
}
buttonId="eip"
Expand All @@ -160,7 +163,7 @@ export function DslSelector(props: Props) {
text={
<div style={{display: 'flex', flexDirection: 'row'}}>
<div style={{marginRight: '6px'}}>Components</div>
{ready && <Badge isRead={!selectedToggles.includes('components')}>{cCount}</Badge>}
{ready && <Badge isRead={!isComp} className={isComp ? "label-component" : ""}>{cCount}</Badge>}
</div>
}
buttonId="components"
Expand All @@ -174,7 +177,7 @@ export function DslSelector(props: Props) {
text={
<div style={{display: 'flex', flexDirection: 'row'}}>
<div style={{marginRight: '6px'}}>Kamelets</div>
{ready && <Badge isRead={!selectedToggles.includes('kamelets')}>{kCount}</Badge>}
{ready && <Badge isRead={!isKam} className={isKam ? "label-kamelet" : ""}>{kCount}</Badge>}
</div>
}
buttonId="kamelets"
Expand Down
3 changes: 2 additions & 1 deletion karavan-designer/src/designer/route/RouteDesigner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,8 @@ export function RouteDesigner() {
{showNewRoute && <Button
variant={routes.length === 0 ? "primary" : "secondary"}
icon={<PlusIcon/>}
onClick={e => {
onClick={evt => {
evt.stopPropagation();
if (isSinkKamelet() || isActionKamelet()) {
const dsl = CamelUi.getDslMetaModel('FromDefinition');
dsl.uri = 'kamelet:source';
Expand Down
3 changes: 2 additions & 1 deletion karavan-designer/src/designer/selector/DslCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,11 +45,12 @@ export function DslCard (props: Props) {
const labels = dsl.labels !== undefined ? dsl.labels.split(",").filter(label => label !== 'eip') : [];
const isCustom = KameletApi.getCustomKameletNames().includes(dsl.name);
const isRemote = dsl.remote;
const classNameBadge = "navigation-label label-" + dsl.navigation + ((dsl.navigation === 'eip' || dsl?.supportLevel.toLowerCase() === 'stable')? '' : '-preview');
return (
<Card key={dsl.dsl + index} isCompact isPlain isFlat isRounded className="dsl-card"
onClick={event => selectDsl(event, dsl)}>
<CardHeader className="header-labels">
<Badge className="navigation-label">{navigation}</Badge>
<Badge className={classNameBadge}>{navigation}</Badge>
{['kamelet', 'component'].includes(dsl.navigation.toLowerCase()) &&
<Badge isRead className="support-level labels">{dsl.supportLevel}</Badge>
}
Expand Down
24 changes: 23 additions & 1 deletion karavan-designer/src/designer/selector/DslSelector.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,10 +130,32 @@
}

.dsl-modal .pf-m-unread {
--pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--info-color--100);
font-weight: 200;
}

.dsl-modal .label-eip {
--pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--orange-200);
}

.dsl-modal .label-component {
--pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--blue-300);
}

.dsl-modal .label-kamelet {
--pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--green-300);
}

.dsl-modal .label-component-preview {
--pf-v5-c-badge--Color: var(--pf-v5-global--palette--blue-300);
--pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
}

.dsl-modal .label-kamelet-preview {
--pf-v5-c-badge--Color: var(--pf-v5-global--palette--green-300);
--pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
}


.dsl-modal .labels {
opacity: 0.5;
font-weight: 200;
Expand Down
15 changes: 9 additions & 6 deletions karavan-designer/src/designer/selector/DslSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,9 @@ export function DslSelector(props: Props) {
const p: string[] = []
p.push(...getPreferredElements('kamelets'));
p.push(...getPreferredElements('components'));
p.push(...getPreferredElements('eip'));
if (parentDsl !== undefined) {
p.push(...getPreferredElements('eip'));
}
setPreferredElements(p);
}

Expand All @@ -100,7 +102,6 @@ export function DslSelector(props: Props) {
}

function selectDsl(evt: React.MouseEvent, dsl: any) {
console.log('selectDsl', dsl)
evt.stopPropagation();
setFilter('');
setShowSelector(false);
Expand All @@ -109,7 +110,6 @@ export function DslSelector(props: Props) {
}

function deleteFast(evt: React.MouseEvent, dsl: DslMetaModel) {
console.log('deleteFast', dsl)
evt.stopPropagation();
deletePreferredElement(getDslMetaModelType(dsl), dsl);
setPreferences();
Expand Down Expand Up @@ -140,13 +140,16 @@ export function DslSelector(props: Props) {
}

function getToggles() {
const isEIP = selectedToggles.includes('eip')
const isComp = selectedToggles.includes('components')
const isKam = selectedToggles.includes('kamelets')
return (
<ToggleGroup aria-label="Default with single selectable">
{parentDsl !== undefined && <ToggleGroupItem
text={
<div style={{display: 'flex', flexDirection: 'row'}}>
<div style={{marginRight: '6px'}}>EIP</div>
{ready && <Badge isRead={!selectedToggles.includes('eip')}>{eCount}</Badge>}
{ready && <Badge isRead={!isEIP} className={isEIP ? "label-eip" : ""}>{eCount}</Badge>}
</div>
}
buttonId="eip"
Expand All @@ -160,7 +163,7 @@ export function DslSelector(props: Props) {
text={
<div style={{display: 'flex', flexDirection: 'row'}}>
<div style={{marginRight: '6px'}}>Components</div>
{ready && <Badge isRead={!selectedToggles.includes('components')}>{cCount}</Badge>}
{ready && <Badge isRead={!isComp} className={isComp ? "label-component" : ""}>{cCount}</Badge>}
</div>
}
buttonId="components"
Expand All @@ -174,7 +177,7 @@ export function DslSelector(props: Props) {
text={
<div style={{display: 'flex', flexDirection: 'row'}}>
<div style={{marginRight: '6px'}}>Kamelets</div>
{ready && <Badge isRead={!selectedToggles.includes('kamelets')}>{kCount}</Badge>}
{ready && <Badge isRead={!isKam} className={isKam ? "label-kamelet" : ""}>{kCount}</Badge>}
</div>
}
buttonId="kamelets"
Expand Down
3 changes: 2 additions & 1 deletion karavan-space/src/designer/route/RouteDesigner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,8 @@ export function RouteDesigner() {
{showNewRoute && <Button
variant={routes.length === 0 ? "primary" : "secondary"}
icon={<PlusIcon/>}
onClick={e => {
onClick={evt => {
evt.stopPropagation();
if (isSinkKamelet() || isActionKamelet()) {
const dsl = CamelUi.getDslMetaModel('FromDefinition');
dsl.uri = 'kamelet:source';
Expand Down
3 changes: 2 additions & 1 deletion karavan-space/src/designer/selector/DslCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,11 +45,12 @@ export function DslCard (props: Props) {
const labels = dsl.labels !== undefined ? dsl.labels.split(",").filter(label => label !== 'eip') : [];
const isCustom = KameletApi.getCustomKameletNames().includes(dsl.name);
const isRemote = dsl.remote;
const classNameBadge = "navigation-label label-" + dsl.navigation + ((dsl.navigation === 'eip' || dsl?.supportLevel.toLowerCase() === 'stable')? '' : '-preview');
return (
<Card key={dsl.dsl + index} isCompact isPlain isFlat isRounded className="dsl-card"
onClick={event => selectDsl(event, dsl)}>
<CardHeader className="header-labels">
<Badge className="navigation-label">{navigation}</Badge>
<Badge className={classNameBadge}>{navigation}</Badge>
{['kamelet', 'component'].includes(dsl.navigation.toLowerCase()) &&
<Badge isRead className="support-level labels">{dsl.supportLevel}</Badge>
}
Expand Down
24 changes: 23 additions & 1 deletion karavan-space/src/designer/selector/DslSelector.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,10 +130,32 @@
}

.dsl-modal .pf-m-unread {
--pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--info-color--100);
font-weight: 200;
}

.dsl-modal .label-eip {
--pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--orange-200);
}

.dsl-modal .label-component {
--pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--blue-300);
}

.dsl-modal .label-kamelet {
--pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--green-300);
}

.dsl-modal .label-component-preview {
--pf-v5-c-badge--Color: var(--pf-v5-global--palette--blue-300);
--pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
}

.dsl-modal .label-kamelet-preview {
--pf-v5-c-badge--Color: var(--pf-v5-global--palette--green-300);
--pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
}


.dsl-modal .labels {
opacity: 0.5;
font-weight: 200;
Expand Down
15 changes: 9 additions & 6 deletions karavan-space/src/designer/selector/DslSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,9 @@ export function DslSelector(props: Props) {
const p: string[] = []
p.push(...getPreferredElements('kamelets'));
p.push(...getPreferredElements('components'));
p.push(...getPreferredElements('eip'));
if (parentDsl !== undefined) {
p.push(...getPreferredElements('eip'));
}
setPreferredElements(p);
}

Expand All @@ -100,7 +102,6 @@ export function DslSelector(props: Props) {
}

function selectDsl(evt: React.MouseEvent, dsl: any) {
console.log('selectDsl', dsl)
evt.stopPropagation();
setFilter('');
setShowSelector(false);
Expand All @@ -109,7 +110,6 @@ export function DslSelector(props: Props) {
}

function deleteFast(evt: React.MouseEvent, dsl: DslMetaModel) {
console.log('deleteFast', dsl)
evt.stopPropagation();
deletePreferredElement(getDslMetaModelType(dsl), dsl);
setPreferences();
Expand Down Expand Up @@ -140,13 +140,16 @@ export function DslSelector(props: Props) {
}

function getToggles() {
const isEIP = selectedToggles.includes('eip')
const isComp = selectedToggles.includes('components')
const isKam = selectedToggles.includes('kamelets')
return (
<ToggleGroup aria-label="Default with single selectable">
{parentDsl !== undefined && <ToggleGroupItem
text={
<div style={{display: 'flex', flexDirection: 'row'}}>
<div style={{marginRight: '6px'}}>EIP</div>
{ready && <Badge isRead={!selectedToggles.includes('eip')}>{eCount}</Badge>}
{ready && <Badge isRead={!isEIP} className={isEIP ? "label-eip" : ""}>{eCount}</Badge>}
</div>
}
buttonId="eip"
Expand All @@ -160,7 +163,7 @@ export function DslSelector(props: Props) {
text={
<div style={{display: 'flex', flexDirection: 'row'}}>
<div style={{marginRight: '6px'}}>Components</div>
{ready && <Badge isRead={!selectedToggles.includes('components')}>{cCount}</Badge>}
{ready && <Badge isRead={!isComp} className={isComp ? "label-component" : ""}>{cCount}</Badge>}
</div>
}
buttonId="components"
Expand All @@ -174,7 +177,7 @@ export function DslSelector(props: Props) {
text={
<div style={{display: 'flex', flexDirection: 'row'}}>
<div style={{marginRight: '6px'}}>Kamelets</div>
{ready && <Badge isRead={!selectedToggles.includes('kamelets')}>{kCount}</Badge>}
{ready && <Badge isRead={!isKam} className={isKam ? "label-kamelet" : ""}>{kCount}</Badge>}
</div>
}
buttonId="kamelets"
Expand Down

0 comments on commit 6bc659e

Please sign in to comment.