Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

build(deps): upgrade to Patternfly 5 #1153

Merged
merged 2 commits into from
Jul 15, 2024
Merged

build(deps): upgrade to Patternfly 5 #1153

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e3dfffa
build(deps): upgrade to PF5 deps and run codemod fix
tthvo Oct 26, 2023
1d9f419
fix: fix remaining merge conflicts
tthvo Jun 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,4 @@ coverage
storybook-static
.build_cache
.eslintcache
.cache*
16 changes: 8 additions & 8 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,14 +89,14 @@
"webpack-merge": "^5.8.0"
},
"dependencies": {
"@patternfly/quickstarts": "^2.3.3",
"@patternfly/react-catalog-view-extension": "4.93.15",
"@patternfly/react-charts": "^6.94.18",
"@patternfly/react-core": "4.267.6",
"@patternfly/react-icons": "^4.93.6",
"@patternfly/react-styles": "^4.92.6",
"@patternfly/react-table": "^4.112.39",
"@patternfly/react-topology": "4.91.27",
"@patternfly/quickstarts": "^5.0.0",
"@patternfly/react-catalog-view-extension": "^5.0.0",
"@patternfly/react-charts": "^7.1.1",
"@patternfly/react-core": "^5.1.1",
"@patternfly/react-icons": "^5.1.1",
"@patternfly/react-styles": "^5.1.1",
"@patternfly/react-table": "^5.1.1",
"@patternfly/react-topology": "^5.1.0",
"@reduxjs/toolkit": "^1.9.3",
"@types/lodash": "^4.14.202",
"@types/react": "^17.0.69",
Expand Down
21 changes: 12 additions & 9 deletions src/app/Agent/AgentLiveProbes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,15 +34,15 @@ import {
StackItem,
EmptyState,
EmptyStateIcon,
Title,
EmptyStateHeader,
} from '@patternfly/react-core';
import { SearchIcon } from '@patternfly/react-icons';
import {
TableVariant,
ISortBy,
SortByDirection,
ThProps,
TableComposable,
Table,
Tbody,
Th,
Thead,
Expand Down Expand Up @@ -176,6 +176,8 @@ export const AgentLiveProbes: React.FC<AgentLiveProbesProps> = (_) => {
}
}, [context.settings, setWarningModalOpen, handleDeleteAllProbes]);

const handleFilterTextChange = React.useCallback((_, value: string) => setFilterText(value), [setFilterText]);

React.useEffect(() => {
addSubscription(
context.target.target().subscribe(() => {
Expand Down Expand Up @@ -329,7 +331,7 @@ export const AgentLiveProbes: React.FC<AgentLiveProbesProps> = (_) => {
type="search"
placeholder="Filter..."
aria-label="Active probe filter"
onChange={setFilterText}
onChange={handleFilterTextChange}
/>
</ToolbarItem>
</ToolbarGroup>
Expand All @@ -355,7 +357,7 @@ export const AgentLiveProbes: React.FC<AgentLiveProbesProps> = (_) => {
/>
</Toolbar>
{probeRows.length ? (
<TableComposable aria-label="Active probe table" variant={TableVariant.compact}>
<Table aria-label="Active probe table" variant={TableVariant.compact}>
<Thead>
<Tr>
{tableColumns.map(({ title, sortable }, index) => (
Expand All @@ -366,13 +368,14 @@ export const AgentLiveProbes: React.FC<AgentLiveProbesProps> = (_) => {
</Tr>
</Thead>
<Tbody>{probeRows}</Tbody>
</TableComposable>
</Table>
) : (
<EmptyState>
<EmptyStateIcon icon={SearchIcon} />
<Title headingLevel="h4" size="lg">
No active probes
</Title>
<EmptyStateHeader
titleText="No active probes"
icon={<EmptyStateIcon icon={SearchIcon} />}
headingLevel="h4"
/>
</EmptyState>
)}
</StackItem>
Expand Down
72 changes: 47 additions & 25 deletions src/app/Agent/AgentProbeTemplates.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,30 +26,31 @@ import { TableColumn, portalRoot, sortResources } from '@app/utils/utils';
import {
ActionGroup,
Button,
Dropdown,
DropdownItem,
DropdownPosition,
EmptyState,
EmptyStateIcon,
Form,
FormGroup,
KebabToggle,
Modal,
ModalVariant,
Stack,
StackItem,
TextInput,
Title,
Toolbar,
ToolbarContent,
ToolbarGroup,
ToolbarItem,
EmptyStateHeader,
Dropdown,
DropdownItem,
DropdownList,
MenuToggleElement,
MenuToggle,
} from '@patternfly/react-core';
import { SearchIcon, UploadIcon } from '@patternfly/react-icons';
import { SearchIcon, EllipsisVIcon, UploadIcon } from '@patternfly/react-icons';
import {
ISortBy,
SortByDirection,
TableComposable,
Table,
TableVariant,
Tbody,
Td,
Expand Down Expand Up @@ -165,6 +166,8 @@ export const AgentProbeTemplates: React.FC<AgentProbeTemplatesProps> = ({ agentD
setUploadModalOpen(false);
}, [setUploadModalOpen]);

const handleFilterTextChange = React.useCallback((_, value: string) => setFilterText(value), [setFilterText]);

React.useEffect(() => {
refreshTemplates();
}, [refreshTemplates]);
Expand Down Expand Up @@ -302,7 +305,7 @@ export const AgentProbeTemplates: React.FC<AgentProbeTemplatesProps> = ({ agentD
type="search"
placeholder="Filter..."
aria-label="Probe Template filter"
onChange={setFilterText}
onChange={handleFilterTextChange}
value={filterText}
/>
</ToolbarItem>
Expand All @@ -323,7 +326,7 @@ export const AgentProbeTemplates: React.FC<AgentProbeTemplatesProps> = ({ agentD
</ToolbarContent>
</Toolbar>
{templateRows.length ? (
<TableComposable aria-label="Probe Templates table" variant={TableVariant.compact}>
<Table aria-label="Probe Templates table" variant={TableVariant.compact}>
<Thead>
<Tr>
{tableColumns.map(({ title, sortable }, index) => (
Expand All @@ -334,13 +337,14 @@ export const AgentProbeTemplates: React.FC<AgentProbeTemplatesProps> = ({ agentD
</Tr>
</Thead>
<Tbody>{...templateRows}</Tbody>
</TableComposable>
</Table>
) : (
<EmptyState>
<EmptyStateIcon icon={SearchIcon} />
<Title headingLevel="h4" size="lg">
No Probe Templates
</Title>
<EmptyStateHeader
titleText="No Probe Templates"
icon={<EmptyStateIcon icon={SearchIcon} />}
headingLevel="h4"
/>
</EmptyState>
)}
<AgentProbeTemplateUploadModal isOpen={uploadModalOpen} onClose={handleUploadModalClose} />
Expand Down Expand Up @@ -458,6 +462,9 @@ export const AgentProbeTemplateUploadModal: React.FC<AgentProbeTemplateUploadMod
submitRef={submitRef}
abortRef={abortRef}
uploading={uploading}
dropZoneAccepts={{
'application/xml': ['.xml'],
}}
displayAccepts={['XML']}
onFileSubmit={onFileSubmit}
onFilesChange={onFilesChange}
Expand Down Expand Up @@ -514,15 +521,11 @@ export const AgentTemplateAction: React.FC<AgentTemplateActionProps> = ({ onInse
];
}, [onInsert, onDelete, template]);

return (
<Dropdown
isPlain
isOpen={isOpen}
toggle={<KebabToggle id="probe-template-toggle-kebab" onToggle={setIsOpen} />}
menuAppendTo={document.body}
position={DropdownPosition.right}
isFlipEnabled
dropdownItems={actionItems.map((action) => (
const handleToggle = React.useCallback((_, opened: boolean) => setIsOpen(opened), [setIsOpen]);

const dropdownItems = React.useMemo(
() =>
actionItems.map((action) => (
<DropdownItem
key={action.key}
onClick={() => {
Expand All @@ -533,7 +536,26 @@ export const AgentTemplateAction: React.FC<AgentTemplateActionProps> = ({ onInse
>
{action.title}
</DropdownItem>
))}
/>
)),
[actionItems, setIsOpen],
);

return (
<Dropdown
isPlain
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle ref={toggleRef} onClick={(event) => handleToggle(event, !isOpen)}>
<EllipsisVIcon />
</MenuToggle>
)}
isOpen={isOpen}
popperProps={{
appendTo: document.body,
position: 'right',
enableFlip: true,
}}
>
<DropdownList>{dropdownItems}</DropdownList>
</Dropdown>
);
};
Loading
Loading