Skip to content

Commit e48e6bf

Browse files
msivasubramaniaanmsivasubramaniaan
authored
remove card, modal dependency from patternfly to material ui and did some css changes (#2494)
* remove card, modal dependency from patternfly to material ui and did some css changes * fixed react exceptions while rendering the components Signed-off-by: msivasubramaniaan <msivasub@redhat.com> * adjust the modal to center of the screen Signed-off-by: msivasubramaniaan <msivasub@redhat.com> * replace icon and title for registry view Signed-off-by: msivasubramaniaan <msivasub@redhat.com>
1 parent a799349 commit e48e6bf

File tree

10 files changed

+86
-74
lines changed

10 files changed

+86
-74
lines changed

‎images/title/dark/book.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎images/title/dark/open-preview.svg‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎images/title/light/book.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎images/title/light/open-preview.svg‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎package-lock.json‎

Lines changed: 0 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,6 @@
126126
"@mui/lab": "^5.0.0-alpha.61",
127127
"@mui/material": "^5.4.1",
128128
"@patternfly/react-core": "^4.198.19",
129-
"@patternfly/react-icons": "^4.49.19",
130129
"@rjsf/material-ui": "^3.2.1",
131130
"@segment/analytics-next": "^1.17.4",
132131
"@types/byline": "^4.2.33",
@@ -856,11 +855,11 @@
856855
},
857856
{
858857
"command": "openshift.componentTypesView.registry.openInView",
859-
"title": "Show View",
858+
"title": "Open Registry View",
860859
"category": "OpenShift",
861860
"icon": {
862-
"dark": "images/title/dark/open-preview.svg",
863-
"light": "images/title/light/open-preview.svg"
861+
"dark": "images/title/dark/book.svg",
862+
"light": "images/title/light/book.svg"
864863
}
865864
},
866865
{

‎src/webview/devfile-registry/app/cardItem.style.tsx‎

Lines changed: 45 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,10 @@ export default (theme: Theme) =>
1212
margin: '0.2rem',
1313
cursor: 'pointer',
1414
borderRadius: '1rem',
15-
border: '1px solid var(--vscode-focusBorder)',
15+
border: '1px solid',
16+
borderColor: 'inherit',
17+
backgroundColor: 'var(--vscode-editor-background)',
18+
color: 'var(--vscode-editor-foreground)',
1619
transition: 'all ease 200ms',
1720
transform: 'scale(0.95)',
1821
'&:hover': {
@@ -44,8 +47,8 @@ export default (theme: Theme) =>
4447
marginRight: '1.5rem'
4548
},
4649
cardRegistryTitle: {
47-
color: 'var(--vscode-textPreformat-foreground)',
48-
width: '15rem',
50+
color: 'var(--vscode-textLink-activeForeground)',
51+
minWidth: '5rem',
4952
height: '2rem',
5053
whiteSpace: 'nowrap',
5154
overflow: 'hidden',
@@ -54,7 +57,9 @@ export default (theme: Theme) =>
5457
textDecoration: 'none',
5558
textOverflow: 'ellipsis',
5659
wordBreak: 'break-all',
57-
paddingTop: '0rem'
60+
float: 'right',
61+
paddingTop: '0.5rem',
62+
margin: '1rem'
5863
},
5964
badge: {
6065
minWidth: '0.5rem',
@@ -65,9 +70,10 @@ export default (theme: Theme) =>
6570
borderRadius: '0.5rem!important',
6671
marginLeft: '0.5rem',
6772
alignItems: 'center',
68-
color: 'var(--vscode-badge-foreground)',
73+
color: 'inherit',
6974
backgroundColor: 'var(--vscode-badge-background)',
70-
outline: '0.0625rem solid var(--vscode-focusBorder)'
75+
outline: '0.0625rem solid',
76+
outlineColor: 'inherit'
7177
},
7278
headerBadge: {
7379
height: '1px',
@@ -95,19 +101,25 @@ export default (theme: Theme) =>
95101
backgroundColor: 'var(--vscode-editor-background)',
96102
fontSize: 'var(--vscode-font-size)',
97103
fontFamily: 'var(--vscode-font-family)',
98-
height: '40rem',
104+
border: '1px solid',
105+
borderColor: 'inherit',
106+
maxHeight: '40rem',
107+
maxWidth: '50rem',
99108
margin: 'auto',
100-
overflow: 'none'
109+
overflowY: 'auto'
101110
},
102111
yamlCardHeader: {
103112
padding: '1.5rem!important',
104113
paddingTop: '1.5rem!important',
105-
borderBottom: '1px solid var(--vscode-focusBorder)',
114+
borderBottom: '1px solid',
115+
borderBottomColor: 'inherit',
106116
height: 'auto'
107117
},
108118
yamlCardBody: {
119+
position: 'relative',
109120
width: '100%',
110-
overflow: 'scroll'
121+
height: '50rem',
122+
overflow: 'auto'
111123
},
112124
copyButton: {
113125
display: 'block',
@@ -117,25 +129,25 @@ export default (theme: Theme) =>
117129
},
118130
cardButton: {
119131
display: 'block',
120-
color: 'var(--vscode-button-foreground)',
121-
backgroundColor: 'var(--vscode-button-background)',
122-
width: '8rem',
123-
marginTop: '0.5rem'
132+
marginTop: '0.3rem',
133+
marginBottom: '0.5rem'
124134
},
125135
button: {
126-
width: '7.85rem',
127-
height: '1.5rem',
136+
width: 'auto',
137+
maxHeight: '2rem',
128138
textAlign: 'center',
129139
outline: '0.0625rem solid transparent',
130140
outlineOffset: '0.125rem!important',
141+
fontSize: 'var(--vscode-font-size)',
142+
fontFamily: 'var(--vscode-font-family)',
131143
justifyContent: 'space-between',
144+
color: 'var(--vscode-button-foreground)',
145+
backgroundColor: 'var(--vscode-button-background)',
132146
'&:hover': {
133147
cursor: 'pointer',
134-
background: 'var(--vscode-button-hoverBackground)'
148+
backgroundColor: 'var(--vscode-button-hoverBackground)',
135149
},
136-
'&:foucs': {
137-
outlineColor: 'var(--vscode-focusBorder)'
138-
}
150+
textTransform: 'none'
139151
},
140152
backBtnCardBody: {
141153
height: 'auto',
@@ -153,16 +165,19 @@ export default (theme: Theme) =>
153165
zIndex: 2
154166
},
155167
modal: {
156-
border: '1px solid var(--vscode-focusBorder)',
168+
border: '1px solid',
169+
borderColor: 'inherit',
157170
zIndex: 3
158171
},
159172
devPageTitle: {
160173
display: 'flex',
161174
height: '3rem'
162175
},
163176
devPageCard: {
177+
color: 'var(--vscode-foreground)',
178+
backgroundColor: 'var(--vscode-editor-background)',
164179
height: 'auto',
165-
width: '100%',
180+
width: '40rem',
166181
zIndex: 1
167182
},
168183
devPageCardHeader: {
@@ -179,10 +194,12 @@ export default (theme: Theme) =>
179194
backgroundColor: 'var(--vscode-editor-background)',
180195
fontSize: 'var(--vscode-font-size)',
181196
fontFamily: 'var(--vscode-font-family)',
182-
height: 'auto',
197+
maxWidth: '25rem',
198+
maxHeight: '18rem',
183199
margin: 'auto',
184200
overflow: 'hidden',
185-
border: '1px solid var(--vscode-focusBorder)'
201+
border: '1px solid',
202+
borderColor: 'inherit'
186203
},
187204
starterProjectCardHeader: {
188205
display: 'flex',
@@ -191,7 +208,8 @@ export default (theme: Theme) =>
191208
},
192209
starterProjectCardBody: {
193210
display: 'flex',
194-
borderTop: '1px solid var(--vscode-focusBorder)',
211+
borderTop: '1px solid',
212+
borderTopColor: 'inherit',
195213
paddingTop: '1rem'
196214
},
197215
starterProjectSelect: {
@@ -239,6 +257,7 @@ export default (theme: Theme) =>
239257
width: '40%',
240258
alignItems: 'center',
241259
marginLeft: 'auto',
242-
marginRight: 'auto'
260+
marginRight: 'auto',
261+
marginBottom: '0.5rem'
243262
}
244263
});

‎src/webview/devfile-registry/app/cardItem.tsx‎

Lines changed: 27 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,12 @@ import React from 'react';
66
import SyntaxHighlighter from 'react-syntax-highlighter';
77
import {
88
Brand,
9-
Card,
109
CardBody,
1110
CardHeader,
1211
CardTitle,
1312
TextContent,
1413
TextVariants,
1514
Text,
16-
Modal,
17-
ModalVariant,
18-
Backdrop,
19-
Button,
20-
CardActions,
2115
Tooltip,
2216
CardFooter
2317
} from '@patternfly/react-core';
@@ -27,8 +21,8 @@ import { DevFileProps } from './wrapperCardItem';
2721
import { VSCodeMessage } from '../vsCodeMessage';
2822
import { StarterProject } from '../../../odo/componentTypeDescription';
2923
import { StarterProjectDisplay } from './starterProjectDisplay';
30-
import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
31-
import { Badge } from '@material-ui/core';
24+
import { Badge, Backdrop, Button, Card, CardActions, Modal } from '@material-ui/core';
25+
import { FileCopy } from '@material-ui/icons';
3226

3327
export class CardItem extends React.Component<DevFileProps, {
3428
numOfCall: number,
@@ -77,12 +71,14 @@ export class CardItem extends React.Component<DevFileProps, {
7771
}
7872
};
7973

80-
onCloseClick = (): void => {
81-
this.setState({
82-
numOfCall: 0,
83-
isExpanded: false,
84-
devFileYAML: ''
85-
});
74+
onCloseClick = (event, reason): void => {
75+
if (reason === 'backdropClick' || reason === 'escapeKeyDown') {
76+
this.setState({
77+
numOfCall: 0,
78+
isExpanded: false,
79+
devFileYAML: ''
80+
});
81+
}
8682
};
8783

8884
createComponent = (): void => {
@@ -183,6 +179,7 @@ export class CardItem extends React.Component<DevFileProps, {
183179
<CardActions className={this.props.cardItemStyle.cardButton}>
184180
<Button
185181
color='default'
182+
variant='contained'
186183
component='span'
187184
className={this.props.cardItemStyle.button}
188185
onClick={this.createComponent}>
@@ -224,15 +221,18 @@ export class CardItem extends React.Component<DevFileProps, {
224221
</Card>;
225222

226223
const modalViewCard = <Modal
227-
isOpen={isExpanded}
224+
open={isExpanded}
228225
className={this.props.cardItemStyle.modal}
229-
variant={ModalVariant.small}
230226
aria-labelledby={`modal-${this.props.compDescription.Devfile.metadata.name}`}
231-
showClose
232-
disableFocusTrap
233227
onClose={this.onCloseClick}
228+
closeAfterTransition
229+
BackdropComponent={Backdrop}
230+
disableAutoFocus
231+
BackdropProps={{
232+
timeout: 500,
233+
}}
234234
style={{
235-
width: '100%', height: '100%'
235+
width: '100%', height: '100%', marginTop: '5rem'
236236
}}>
237237
<Card data-testid='dev-page-yaml' className={this.props.cardItemStyle.yamlCard}>
238238
<CardHeader className={this.props.cardItemStyle.yamlCardHeader}>
@@ -264,13 +264,14 @@ export class CardItem extends React.Component<DevFileProps, {
264264
<Button
265265
id='tooltip-selector'
266266
component='span'
267-
icon={<CopyIcon />}
268267
style={{ cursor: 'pointer' }}
269268
onClick={(): void => this.copyClicked(true)}
270269
>
270+
<FileCopy style={{ color: 'white' }} fontSize='small' />
271271
</Button>
272272
<Tooltip
273273
content={
274+
274275
copyClicked ? 'Copied' : 'Copy'
275276
}
276277
position='bottom'
@@ -282,7 +283,7 @@ export class CardItem extends React.Component<DevFileProps, {
282283
<SyntaxHighlighter language='yaml' useInlineStyles={false}
283284
wrapLines
284285
showLineNumbers
285-
lineNumberStyle={{marginLeft: '0.5rem'}}
286+
lineNumberStyle={{ marginLeft: '0.5rem' }}
286287
customStyle={{ marginLeft: '-1.5rem' }}
287288
codeTagProps={{
288289
style: {
@@ -301,7 +302,6 @@ export class CardItem extends React.Component<DevFileProps, {
301302
<Card
302303
className={this.props.cardItemStyle.card}
303304
onClick={this.onCardClick}
304-
isHoverable
305305
data-testid={`card-${this.props.compDescription.Devfile.metadata.name.replace(/\.| /g, '')}`}
306306
>
307307
<CardHeader className={this.props.cardItemStyle.cardHeader}>
@@ -310,17 +310,16 @@ export class CardItem extends React.Component<DevFileProps, {
310310
src={this.props.compDescription.Devfile.metadata.icon}
311311
alt={`${this.props.compDescription.Devfile.metadata.name} icon`}
312312
className={this.props.cardItemStyle.cardImage} />
313-
313+
{this.props.compDescription.RegistryName.toLowerCase() !== 'defaultdevfileregistry' &&
314+
<TextContent className={this.props.cardItemStyle.cardRegistryTitle}>
315+
<Text component={TextVariants.p}>{this.props.compDescription.RegistryName}</Text>
316+
</TextContent>}
314317
</div>
315318
</CardHeader>
316319
<CardTitle style={{ margin: '1rem 1.5rem' }}>
317320
<TextContent>
318321
<Text component={TextVariants.h1}>{this.props.compDescription.Devfile.metadata.displayName}</Text>
319322
</TextContent>
320-
{this.props.compDescription.RegistryName.toLowerCase() !== 'defaultdevfileregistry' &&
321-
<TextContent className={this.props.cardItemStyle.cardRegistryTitle}>
322-
<Text component={TextVariants.p}>{this.props.compDescription.RegistryName}</Text>
323-
</TextContent>}
324323
</CardTitle>
325324
<CardBody className={this.props.cardItemStyle.cardBody}>
326325
{
@@ -370,9 +369,7 @@ export class CardItem extends React.Component<DevFileProps, {
370369
{
371370
devFileYAML.length > 0 && isExpanded &&
372371
<>
373-
<Backdrop className={this.props.cardItemStyle.backDrop}>
374-
{modalViewCard}
375-
</Backdrop>
372+
{modalViewCard}
376373
</>
377374
}
378375
</>

‎src/webview/devfile-registry/app/filterElements.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import { Tooltip } from '@mui/material';
1616

1717
interface FilterProps extends DefaultProps {
1818
id: string,
19-
label: string,
2019
registries: Registry[],
2120
onCheckBoxChange: (event: ChangeEvent<HTMLInputElement>, checked: boolean) => void;
2221
}
@@ -25,7 +24,6 @@ const filterStyle = makeStyles(filterElementsStyle);
2524

2625
export const FilterElements: React.FC<FilterProps> = ({
2726
id,
28-
label,
2927
registries,
3028
onCheckBoxChange
3129
}: FilterProps) => {
@@ -36,15 +34,15 @@ export const FilterElements: React.FC<FilterProps> = ({
3634
<Text style={{ fontSize: 'var(--vscode-editor-font-size)' }}>Registries:</Text>
3735
</TextContent>
3836
{
39-
registries.map((registry) => (
40-
<FormControlLabel className={filterStyleCSS.checkBoxItem}
37+
registries.map((registry, index) => (
38+
<FormControlLabel className={filterStyleCSS.checkBoxItem} key={registry.Name + '-' + index}
4139
control={
4240
<Checkbox id={`${id}-${registry.Name}`}
4341
className={filterStyleCSS.checkbox}
4442
onChange={onCheckBoxChange}
4543
name={registry.Name}
4644
checked={registry.state}
47-
key={registry.Name}
45+
key={registry.Name + '-' + index}
4846
color='primary'
4947
size='medium' />
5048
}

0 commit comments

Comments
 (0)
⚡