Skip to content

Commit 404e6ba

Browse files
rebeccaalpertrebeccaalpert
committed
Drop types
1 parent cab6a80 commit 404e6ba

File tree

20 files changed

+191
-158
lines changed

20 files changed

+191
-158
lines changed

‎package-lock.json‎

Lines changed: 14 additions & 10 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/module/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,8 @@
4646
"@patternfly/documentation-framework": "^6.5.16",
4747
"@patternfly/react-code-editor": "^6.0.0",
4848
"@patternfly/patternfly": "^6.0.0",
49-
"@types/react": "^19.1.0",
50-
"@types/react-dom": "^19.1.2",
49+
"@types/react": "^18.2.33",
50+
"@types/react-dom": "^18.3.1",
5151
"react": "^18.3.1",
5252
"react-dom": "^18.3.1",
5353
"typescript": "^5.8.3"

‎packages/module/src/Ansible/Ansible.tsx‎

Lines changed: 45 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -14,22 +14,30 @@ export interface AnsibleProps extends React.DetailedHTMLProps<React.HTMLAttribut
1414
ouiaId?: string | number;
1515
}
1616

17-
const RHAAPTechnologyIcon =
18-
<svg
19-
width="24" height="24" viewBox="0 0 38 38"
20-
xmlns="http://www.w3.org/2000/svg">
21-
<defs>
22-
<style>
23-
{`.uuid-6998fa22-ec9a-4e2f-9d0d-f4bc3361e80e{fill:#e00;}`}
24-
{`.uuid-2a01d04c-89d4-48ba-a2d8-51034215da9b{fill:#fff;}`}
25-
{`.uuid-a19226e8-b71f-481c-815f-1ed60f4363a6{fill:#4d4d4d;}`}
26-
</style>
27-
</defs>
28-
<rect x="1" y="1" width="36" height="36" rx="9" ry="9"/>
29-
<path className="uuid-a19226e8-b71f-481c-815f-1ed60f4363a6" d="m28,2.25c4.27338,0,7.75,3.47664,7.75,7.75v18c0,4.27336-3.47662,7.75-7.75,7.75H10c-4.27338,0-7.75-3.47664-7.75-7.75V10c0-4.27336,3.47662-7.75,7.75-7.75h18m0-1.25H10C5.02942,1,1,5.02944,1,10v18c0,4.97057,4.02942,9,9,9h18c4.97058,0,9-4.02943,9-9V10c0-4.97056-4.02942-9-9-9h0Z"/>
30-
<path className="uuid-2a01d04c-89d4-48ba-a2d8-51034215da9b" d="m15,23.625c-.08594,0-.17383-.01758-.25684-.05566-.31445-.1416-.45508-.51172-.3125-.82617l2.02051-4.48145c.00293-.00586.00586-.01172.00781-.01758l1.97168-4.36914c.20117-.44922.9375-.44922,1.13867,0l4,8.86816c.11814.25977.04395.56641-.17871.74512-.22266.17773-.53613.18262-.7666.01172l-5.34961-4.02148-1.70508,3.77832c-.10352.23145-.33105.36816-.56934.36816Zm2.80078-5.31445l3.62891,2.72754-2.42969-5.38574-1.19922,2.6582Z"/>
31-
<path className="uuid-6998fa22-ec9a-4e2f-9d0d-f4bc3361e80e" d="m19,30.125c-6.13477,0-11.125-4.99023-11.125-11.125s4.99023-11.125,11.125-11.125,11.125,4.99023,11.125,11.125-4.99023,11.125-11.125,11.125Zm0-21c-5.44531,0-9.875,4.42969-9.875,9.875s4.42969,9.875,9.875,9.875,9.875-4.42969,9.875-9.875-4.42969-9.875-9.875-9.875Z"/>
32-
</svg>
17+
const RHAAPTechnologyIcon = (
18+
<svg width="24" height="24" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
19+
<defs>
20+
<style>
21+
{`.uuid-6998fa22-ec9a-4e2f-9d0d-f4bc3361e80e{fill:#e00;}`}
22+
{`.uuid-2a01d04c-89d4-48ba-a2d8-51034215da9b{fill:#fff;}`}
23+
{`.uuid-a19226e8-b71f-481c-815f-1ed60f4363a6{fill:#4d4d4d;}`}
24+
</style>
25+
</defs>
26+
<rect x="1" y="1" width="36" height="36" rx="9" ry="9" />
27+
<path
28+
className="uuid-a19226e8-b71f-481c-815f-1ed60f4363a6"
29+
d="m28,2.25c4.27338,0,7.75,3.47664,7.75,7.75v18c0,4.27336-3.47662,7.75-7.75,7.75H10c-4.27338,0-7.75-3.47664-7.75-7.75V10c0-4.27336,3.47662-7.75,7.75-7.75h18m0-1.25H10C5.02942,1,1,5.02944,1,10v18c0,4.97057,4.02942,9,9,9h18c4.97058,0,9-4.02943,9-9V10c0-4.97056-4.02942-9-9-9h0Z"
30+
/>
31+
<path
32+
className="uuid-2a01d04c-89d4-48ba-a2d8-51034215da9b"
33+
d="m15,23.625c-.08594,0-.17383-.01758-.25684-.05566-.31445-.1416-.45508-.51172-.3125-.82617l2.02051-4.48145c.00293-.00586.00586-.01172.00781-.01758l1.97168-4.36914c.20117-.44922.9375-.44922,1.13867,0l4,8.86816c.11814.25977.04395.56641-.17871.74512-.22266.17773-.53613.18262-.7666.01172l-5.34961-4.02148-1.70508,3.77832c-.10352.23145-.33105.36816-.56934.36816Zm2.80078-5.31445l3.62891,2.72754-2.42969-5.38574-1.19922,2.6582Z"
34+
/>
35+
<path
36+
className="uuid-6998fa22-ec9a-4e2f-9d0d-f4bc3361e80e"
37+
d="m19,30.125c-6.13477,0-11.125-4.99023-11.125-11.125s4.99023-11.125,11.125-11.125,11.125,4.99023,11.125,11.125-4.99023,11.125-11.125,11.125Zm0-21c-5.44531,0-9.875,4.42969-9.875,9.875s4.42969,9.875,9.875,9.875,9.875-4.42969,9.875-9.875-4.42969-9.875-9.875-9.875Z"
38+
/>
39+
</svg>
40+
);
3341

3442
const useStyles = createUseStyles({
3543
ansible: {
@@ -41,18 +49,24 @@ const useStyles = createUseStyles({
4149
},
4250
ansibleSupported: {
4351
'& .st0': {
44-
fill: 'var(--pf-t-global--icon--color--regular)',
52+
fill: 'var(--pf-t-global--icon--color--regular)'
4553
}
4654
},
4755
ansibleUnsupported: {
4856
'& .st0, .st1, .st2': {
4957
fill: 'var(--pf-t--global--icon--color--disabled)',
50-
cursor: 'not-allowed',
58+
cursor: 'not-allowed'
5159
}
5260
}
53-
})
61+
});
5462

55-
const Ansible: FunctionComponent<AnsibleProps> = ({ isSupported = true, isRHAAP, className, ouiaId = "Ansible-icon", ...props }: AnsibleProps) => {
63+
const Ansible: FunctionComponent<AnsibleProps> = ({
64+
isSupported = true,
65+
isRHAAP,
66+
className,
67+
ouiaId = 'Ansible-icon',
68+
...props
69+
}: AnsibleProps) => {
5670
const classes = useStyles();
5771
const ansibleLogoClass = clsx(
5872
classes.ansible,
@@ -71,7 +85,7 @@ const Ansible: FunctionComponent<AnsibleProps> = ({ isSupported = true, isRHAAP,
7185
width="803.8"
7286
height="221.5"
7387
/>
74-
88+
7589
<rect
7690
x="-279.7"
7791
y="904"
@@ -80,7 +94,7 @@ const Ansible: FunctionComponent<AnsibleProps> = ({ isSupported = true, isRHAAP,
8094
width="2590.2"
8195
height="221.5"
8296
/>
83-
97+
8498
<rect
8599
x="17.1"
86100
y="1620.5"
@@ -93,13 +107,18 @@ const Ansible: FunctionComponent<AnsibleProps> = ({ isSupported = true, isRHAAP,
93107
);
94108

95109
return (
96-
(<Fragment>
110+
<Fragment>
97111
{isRHAAP ? (
98112
<i title="Red Hat Ansible Automation Platform" data-ouia-component-id={ouiaId} {...props}>
99113
{RHAAPTechnologyIcon}
100114
</i>
101115
) : (
102-
<i className={ansibleLogoClass} title={isSupported ? "Ansible supported" : "Ansible is not supported" } data-ouia-component-id={ouiaId} {...props}>
116+
<i
117+
className={ansibleLogoClass}
118+
title={isSupported ? 'Ansible supported' : 'Ansible is not supported'}
119+
data-ouia-component-id={ouiaId}
120+
{...props}
121+
>
103122
<svg
104123
version="1.1"
105124
x="0px"
@@ -117,8 +136,8 @@ const Ansible: FunctionComponent<AnsibleProps> = ({ isSupported = true, isRHAAP,
117136
{isSupported ? null : unsupportedSlash}
118137
</svg>
119138
</i>
120-
) }
121-
</Fragment>)
139+
)}
140+
</Fragment>
122141
);
123142
};
124143

‎packages/module/src/ColumnManagementModal/ColumnManagementModal.tsx‎

Lines changed: 32 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -47,22 +47,22 @@ export interface ColumnManagementModalProps extends Omit<ModalProps, 'ref' | 'ch
4747
ouiaId?: string | number;
4848
}
4949

50-
const ColumnManagementModal: FunctionComponent<ColumnManagementModalProps> = (
51-
{ title = 'Manage columns',
52-
description = 'Selected categories will be displayed in the table.',
53-
isOpen = false,
54-
onClose = () => undefined,
55-
appliedColumns,
56-
applyColumns,
57-
ouiaId = 'ColumnManagementModal',
58-
...props }: ColumnManagementModalProps) => {
59-
60-
const [ currentColumns, setCurrentColumns ] = useState(
61-
appliedColumns.map(column => ({ ...column, isShown: column.isShown ?? column.isShownByDefault }))
50+
const ColumnManagementModal: FunctionComponent<ColumnManagementModalProps> = ({
51+
title = 'Manage columns',
52+
description = 'Selected categories will be displayed in the table.',
53+
isOpen = false,
54+
onClose = () => undefined,
55+
appliedColumns,
56+
applyColumns,
57+
ouiaId = 'ColumnManagementModal',
58+
...props
59+
}: ColumnManagementModalProps) => {
60+
const [currentColumns, setCurrentColumns] = useState(
61+
appliedColumns.map((column) => ({ ...column, isShown: column.isShown ?? column.isShownByDefault }))
6262
);
6363

64-
const handleChange = index => {
65-
const newColumns = [ ...currentColumns ];
64+
const handleChange = (index) => {
65+
const newColumns = [...currentColumns];
6666
const changedColumn = { ...newColumns[index] };
6767

6868
changedColumn.isShown = !changedColumn.isShown;
@@ -72,23 +72,25 @@ const ColumnManagementModal: FunctionComponent<ColumnManagementModalProps> = (
7272
};
7373

7474
const selectAll = () => {
75-
let newColumns = [ ...currentColumns ];
76-
newColumns = newColumns.map(column => ({ ...column, isShown: true }));
75+
let newColumns = [...currentColumns];
76+
newColumns = newColumns.map((column) => ({ ...column, isShown: true }));
7777

7878
setCurrentColumns(newColumns);
7979
};
8080

8181
const resetToDefault = () => {
82-
setCurrentColumns(currentColumns.map(column => ({ ...column, isShown: column.isShownByDefault ?? false })));
82+
setCurrentColumns(currentColumns.map((column) => ({ ...column, isShown: column.isShownByDefault ?? false })));
8383
};
8484

85-
const handleSave = event => {
85+
const handleSave = (event) => {
8686
applyColumns(currentColumns);
8787
onClose(event);
8888
};
8989

90-
const handleCancel = event => {
91-
setCurrentColumns(appliedColumns.map(column => ({ ...column, isShown: column.isShown ?? column.isShownByDefault })));
90+
const handleCancel = (event) => {
91+
setCurrentColumns(
92+
appliedColumns.map((column) => ({ ...column, isShown: column.isShown ?? column.isShownByDefault }))
93+
);
9294
onClose(event);
9395
};
9496

@@ -116,7 +118,13 @@ const ColumnManagementModal: FunctionComponent<ColumnManagementModalProps> = (
116118
</>
117119
}
118120
actions={[
119-
<Button key="save" className='pf-v6-u-mr-md' variant={ButtonVariant.primary} onClick={handleSave} ouiaId={`${ouiaId}-save-button`}>
121+
<Button
122+
key="save"
123+
className="pf-v6-u-mr-md"
124+
variant={ButtonVariant.primary}
125+
onClick={handleSave}
126+
ouiaId={`${ouiaId}-save-button`}
127+
>
120128
Save
121129
</Button>,
122130
<Button key="cancel" variant={ButtonVariant.link} onClick={handleCancel} ouiaId={`${ouiaId}-cancel-button`}>
@@ -127,7 +135,7 @@ const ColumnManagementModal: FunctionComponent<ColumnManagementModalProps> = (
127135
{...props}
128136
>
129137
<DataList aria-label="Selected columns" isCompact data-ouia-component-id={`${ouiaId}-column-list`}>
130-
{currentColumns.map((column, index) =>
138+
{currentColumns.map((column, index) => (
131139
<DataListItem key={column.key}>
132140
<DataListItemRow>
133141
<DataListCheck
@@ -149,10 +157,10 @@ const ColumnManagementModal: FunctionComponent<ColumnManagementModalProps> = (
149157
/>
150158
</DataListItemRow>
151159
</DataListItem>
152-
)}
160+
))}
153161
</DataList>
154162
</Modal>
155163
);
156-
}
164+
};
157165

158166
export default ColumnManagementModal;

‎packages/module/src/ContentHeader/ContentHeader.tsx‎

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
Button,
1010
ButtonVariant,
1111
ButtonProps,
12-
Divider,
12+
Divider
1313
} from '@patternfly/react-core';
1414
import { ExternalLinkAltIcon } from '@patternfly/react-icons';
1515
import { createUseStyles } from 'react-jss';
@@ -43,7 +43,7 @@ export interface ContentHeaderProps {
4343

4444
const useStyles = createUseStyles({
4545
iconMinWidth: {
46-
minWidth: '48px',
46+
minWidth: '48px'
4747
}
4848
});
4949

@@ -55,27 +55,25 @@ export const ContentHeader: FunctionComponent<PropsWithChildren<ContentHeaderPro
5555
label,
5656
breadcrumbs = null,
5757
actionMenu,
58-
ouiaId = 'ContentHeader',
58+
ouiaId = 'ContentHeader'
5959
}: ContentHeaderProps) => {
6060
const classes = useStyles();
6161
const { isExternal = false, ...linkRestProps } = linkProps ?? {};
6262

6363
return (
6464
<PageSection hasBodyWrapper={false}>
65-
{ breadcrumbs && (
66-
<div className="pf-v6-u-mb-md">
67-
{breadcrumbs}
68-
</div>
69-
)}
65+
{breadcrumbs && <div className="pf-v6-u-mb-md">{breadcrumbs}</div>}
7066
<Flex>
7167
{icon && (
7268
<>
7369
<FlexItem alignSelf={{ default: 'alignSelfCenter' }} className={`${classes.iconMinWidth}`}>
7470
{icon}
7571
</FlexItem>
76-
<Divider orientation={{
77-
default: 'vertical',
78-
}} />
72+
<Divider
73+
orientation={{
74+
default: 'vertical'
75+
}}
76+
/>
7977
</>
8078
)}
8179
<FlexItem flex={{ default: 'flex_1' }}>
@@ -85,27 +83,31 @@ export const ContentHeader: FunctionComponent<PropsWithChildren<ContentHeaderPro
8583
<Content className="pf-v6-u-mb-sm" component="h1" ouiaId={`${ouiaId}-title`}>
8684
{title}
8785
</Content>
88-
) : title}
86+
) : (
87+
title
88+
)}
8989
</SplitItem>
90-
{label && (
91-
<SplitItem>
92-
{label}
93-
</SplitItem>
94-
)}
90+
{label && <SplitItem>{label}</SplitItem>}
9591
<SplitItem isFilled />
96-
{actionMenu && (
97-
<SplitItem>
98-
{actionMenu}
99-
</SplitItem>
100-
)}
92+
{actionMenu && <SplitItem>{actionMenu}</SplitItem>}
10193
</Split>
10294
{typeof subtitle === 'string' ? (
10395
<Content component="p" ouiaId={`${ouiaId}-subtitle`}>
10496
{subtitle}
10597
</Content>
106-
) : subtitle}
98+
) : (
99+
subtitle
100+
)}
107101
{linkProps && (
108-
<Button variant={ButtonVariant.link} component="a" ouiaId={`${ouiaId}-link-button`} isInline icon={isExternal ? <ExternalLinkAltIcon className='pf-v6-u-ml-sm' /> : null} iconPosition="end" {...linkRestProps}>
102+
<Button
103+
variant={ButtonVariant.link}
104+
component="a"
105+
ouiaId={`${ouiaId}-link-button`}
106+
isInline
107+
icon={isExternal ? <ExternalLinkAltIcon className="pf-v6-u-ml-sm" /> : null}
108+
iconPosition="end"
109+
{...linkRestProps}
110+
>
109111
{linkProps.label}
110112
</Button>
111113
)}

0 commit comments

Comments
 (0)