Skip to content
This repository was archived by the owner on Nov 27, 2023. It is now read-only.

Commit ba1ab23

Browse files
kahboomkahboom
authored
Merge pull request #46 from kahboom/move-catalog-editor
fix #18 - move Catalog; Make Connector Catalog and Code Editor collapsable
2 parents 6dce68e + 4a40489 commit ba1ab23

File tree

7 files changed

+184
-116
lines changed

7 files changed

+184
-116
lines changed

‎.yarnrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
yarnPath ".yarn/releases/yarn-berry.cjs"

‎src/components/Catalog.tsx

Lines changed: 91 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
11
import * as React from 'react';
2-
32
import {
43
Bullseye,
54
Card,
65
CardBody,
76
CardTitle,
7+
DrawerActions,
8+
DrawerColorVariant,
9+
DrawerHead,
10+
DrawerPanelBody,
11+
DrawerPanelContent,
812
Gallery,
913
Grid,
1014
GridItem,
1115
InputGroup,
1216
Label,
13-
PageSection,
1417
TextInput,
1518
ToggleGroup,
1619
ToggleGroupItem,
@@ -20,9 +23,11 @@ import {
2023
} from '@patternfly/react-core';
2124
import { IStepProps } from '../types';
2225
import './Catalog.css';
23-
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
26+
import { DrawerCloseButton } from "@patternfly/react-core/dist/js";
2427

2528
interface ICatalog {
29+
isCatalogExpanded: boolean,
30+
onClosePanelClick: (e: any) => void,
2631
steps: IStepProps[]
2732
}
2833

@@ -55,7 +60,7 @@ const Catalog = (props: ICatalog) => {
5560
* the characters in the search query
5661
*/
5762
return items.filter((item) => {
58-
if(isSelected === item.type) {
63+
if (isSelected === item.type) {
5964
return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1;
6065
} else {
6166
return false;
@@ -64,78 +69,88 @@ const Catalog = (props: ICatalog) => {
6469
}
6570

6671
return (
67-
<PageSection style={{ backgroundColor: '#F9F9F9' }}>
68-
<Toolbar id={'toolbar'} style={{ background: 'transparent' }}>
69-
<ToolbarContent>{(
70-
<>
71-
<ToolbarItem>
72-
<InputGroup>
73-
<TextInput name={'stepSearch'}
74-
id={'stepSearch'}
75-
type={'search'}
76-
placeholder={'search for a step...'}
77-
aria-label={'search for a step'}
78-
value={query}
79-
onChange={changeSearch}/>
80-
</InputGroup>
81-
</ToolbarItem>
82-
<ToolbarItem variant={'separator'}/>
83-
<ToolbarItem>
84-
<ToggleGroup aria-label={'Icon variant toggle group'}>
85-
<ToggleGroupItem text={'start'}
86-
aria-label={'copy icon button'}
87-
buttonId={'START'}
88-
isSelected={isSelected === 'START'}
89-
onChange={handleItemClick}/>
90-
<ToggleGroupItem icon={<CogIcon/>}
91-
aria-label={'undo icon button'}
92-
buttonId={'MIDDLE'}
93-
isSelected={isSelected === 'MIDDLE'}
94-
onChange={handleItemClick}/>
95-
<ToggleGroupItem text={'end'}
96-
aria-label={'share square icon button'}
97-
buttonId={'END'}
98-
isSelected={isSelected === 'END'}
99-
onChange={handleItemClick}/>
100-
</ToggleGroup>
101-
</ToolbarItem>
102-
</>
103-
)}</ToolbarContent>
104-
</Toolbar>
105-
<Gallery hasGutter={true} style={{maxHeight: '650px', overflow: 'auto'}}>
106-
{steps && search(steps).map((step, idx) => {
107-
return (
108-
<Card key={idx}
109-
className={'step'}
110-
isCompact={true}
111-
isHoverable={true}
112-
draggable="true"
113-
onDragStart={(e: any) => {
114-
e.dataTransfer.setData('text/plain', JSON.stringify(step));
115-
}}>
116-
<Grid md={6}>
117-
<GridItem span={2}>
118-
<Bullseye>
119-
<img src={step.icon} className={'stepImage'} alt={'Step Image'}/>
120-
</Bullseye>
121-
</GridItem>
122-
<GridItem span={7}>
123-
<CardTitle>
124-
<span>{step.name}</span>
125-
</CardTitle>
126-
<CardBody>
127-
{shorten(step.description, 60)}
128-
</CardBody>
129-
</GridItem>
130-
<GridItem span={3}>
131-
<Label color={'blue'} className={'stepLabel'}>SOURCE</Label>
132-
</GridItem>
133-
</Grid>
134-
</Card>
135-
);
136-
})}
137-
</Gallery>
138-
</PageSection>
72+
<DrawerPanelContent minSize={'525px'} colorVariant={DrawerColorVariant.light200}>
73+
<DrawerHead>
74+
<h3 className={'pf-c-title pf-m-2xl'} tabIndex={props.isCatalogExpanded ? 0 : -1}>
75+
Step Details
76+
</h3>
77+
<DrawerActions>
78+
<DrawerCloseButton onClick={props.onClosePanelClick}/>
79+
</DrawerActions>
80+
</DrawerHead>
81+
<DrawerPanelBody>
82+
<Toolbar id={'toolbar'} style={{ background: 'transparent' }}>
83+
<ToolbarContent>{(
84+
<>
85+
<ToolbarItem>
86+
<InputGroup>
87+
<TextInput name={'stepSearch'}
88+
id={'stepSearch'}
89+
type={'search'}
90+
placeholder={'search for a step...'}
91+
aria-label={'search for a step'}
92+
value={query}
93+
onChange={changeSearch}/>
94+
</InputGroup>
95+
</ToolbarItem>
96+
<ToolbarItem variant={'separator'}/>
97+
<ToolbarItem>
98+
<ToggleGroup aria-label={'Icon variant toggle group'}>
99+
<ToggleGroupItem text={'start'}
100+
aria-label={'sources button'}
101+
buttonId={'START'}
102+
isSelected={isSelected === 'START'}
103+
onChange={handleItemClick}/>
104+
<ToggleGroupItem icon={'actions'}
105+
aria-label={'actions button'}
106+
buttonId={'MIDDLE'}
107+
isSelected={isSelected === 'MIDDLE'}
108+
onChange={handleItemClick}/>
109+
<ToggleGroupItem text={'end'}
110+
aria-label={'sinks button'}
111+
buttonId={'END'}
112+
isSelected={isSelected === 'END'}
113+
onChange={handleItemClick}/>
114+
</ToggleGroup>
115+
</ToolbarItem>
116+
</>
117+
)}</ToolbarContent>
118+
</Toolbar>
119+
<Gallery hasGutter={true} style={{ maxHeight: '650px', overflow: 'auto' }}>
120+
{steps && search(steps).map((step, idx) => {
121+
return (
122+
<Card key={idx}
123+
className={'step'}
124+
isCompact={true}
125+
isHoverable={true}
126+
draggable={'true'}
127+
onDragStart={(e: any) => {
128+
e.dataTransfer.setData('text/plain', JSON.stringify(step));
129+
}}>
130+
<Grid md={6}>
131+
<GridItem span={2}>
132+
<Bullseye>
133+
<img src={step.icon} className={'stepImage'} alt={'Step Image'}/>
134+
</Bullseye>
135+
</GridItem>
136+
<GridItem span={7}>
137+
<CardTitle>
138+
<span>{step.name}</span>
139+
</CardTitle>
140+
<CardBody>
141+
{shorten(step.description, 60)}
142+
</CardBody>
143+
</GridItem>
144+
<GridItem span={3}>
145+
<Label color={'blue'} className={'stepLabel'}>SOURCE</Label>
146+
</GridItem>
147+
</Grid>
148+
</Card>
149+
);
150+
})}
151+
</Gallery>
152+
</DrawerPanelBody>
153+
</DrawerPanelContent>
139154
);
140155
};
141156

‎src/components/YAMLEditor.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const YAMLEditor = ( {yamlData, handleChanges }: IYAMLEditor ) => {
2424
}
2525

2626
const debounced = useDebouncedCallback(
27-
(value) => {
27+
(value: string) => {
2828
handleChanges(value);
2929
},
3030
800

‎src/pages/Dashboard.css

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.step-creator-button {
2+
background: white;
3+
border-radius: 1.2em;
4+
position: fixed;
5+
right: 4em;
6+
text-align: center;
7+
top: 6em;
8+
z-index: 200;
9+
}
10+
11+
.step-creator-button button {
12+
position: relative;
13+
}
14+
15+
.visualization {
16+
position: relative;
17+
}

0 commit comments

Comments
 (0)