Skip to content

Commit

Permalink
chore(pf5): migrate topology components
Browse files Browse the repository at this point in the history
  • Loading branch information
@tthvo
tthvo committed Dec 12, 2023
1 parent 51cbeee commit 187e825
Show file tree
Hide file tree
Showing 8 changed files with 373 additions and 252 deletions.
94 changes: 47 additions & 47 deletions src/app/Topology/Actions/CreateTarget.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ export const CreateTarget: React.FC<CreateTargetProps> = ({ prefilled }) => {
);

const handleConnectUrlChange = React.useCallback(
(connectUrl: string) => {
(_, connectUrl: string) => {
setFormData((old) => ({
...old,
connectUrl,
Expand All @@ -143,23 +143,23 @@ export const CreateTarget: React.FC<CreateTargetProps> = ({ prefilled }) => {
);

const handleAliasChange = React.useCallback(
(alias: string) => {
(_, alias: string) => {
setFormData((old) => ({ ...old, alias }));
resetTestState();
},
[setFormData, resetTestState],
);

const handleUsernameChange = React.useCallback(
(username: string) => {
(_, username: string) => {
setFormData((old) => ({ ...old, username }));
resetTestState();
},
[setFormData, resetTestState],
);

const handlePasswordChange = React.useCallback(
(password: string) => {
(_, password: string) => {
setFormData((old) => ({ ...old, password }));
resetTestState();
},
Expand Down Expand Up @@ -269,6 +269,25 @@ export const CreateTarget: React.FC<CreateTargetProps> = ({ prefilled }) => {
[],
);

const connectUrlHelperText = React.useMemo(() => {
if (validConnectUrl === ValidatedOptions.error) {
return 'JMX Service URL must not contain empty spaces.';
}
return (
<>
JMX Service URL.{' '}
{example && (
<>
For example,
<ClipboardCopy hoverTip="Click to copy to clipboard" clickTip="Copied!" variant="inline-compact">
{example}
</ClipboardCopy>
</>
)}
</>
);
}, [validConnectUrl]);

return (
<BreadcrumbPage pageTitle={'Create Custom Target'} breadcrumbs={[{ title: 'Topology', path: '/topology' }]}>
<Card isFullHeight>
Expand All @@ -287,30 +306,7 @@ export const CreateTarget: React.FC<CreateTargetProps> = ({ prefilled }) => {
isInline
/>
</FormAlert>
<FormGroup
label="Connection URL"
isRequired
fieldId="connect-url"
helperText={
<FormHelperText>
JMX Service URL.{' '}
{example && (
<>
For example,
<ClipboardCopy
hoverTip="Click to copy to clipboard"
clickTip="Copied!"
variant="inline-compact"
>
{example}
</ClipboardCopy>
</>
)}
</FormHelperText>
}
helperTextInvalid={'JMX Service URL must not contain empty spaces.'}
validated={validConnectUrl}
>
<FormGroup label="Connection URL" isRequired fieldId="connect-url">
<TextInput
aria-label={'Connection URL'}
value={connectUrl}
Expand All @@ -323,14 +319,13 @@ export const CreateTarget: React.FC<CreateTargetProps> = ({ prefilled }) => {
validated={validConnectUrl}
data-quickstart-id="ct-connecturl-input"
/>
<FormHelperText>
<HelperText>
<HelperTextItem variant={validConnectUrl}>{connectUrlHelperText}</HelperTextItem>
</HelperText>
</FormHelperText>
</FormGroup>
<FormGroup
label="Alias"
fieldId="alias"
helperText={
<FormHelperText>Connection Nickname (same as Connection URL if not specified).</FormHelperText>
}
>
<FormGroup label="Alias" fieldId="alias">
<TextInput
value={alias}
type="text"
Expand All @@ -339,6 +334,11 @@ export const CreateTarget: React.FC<CreateTargetProps> = ({ prefilled }) => {
isDisabled={loading || testing}
data-quickstart-id="ct-alias-input"
/>
<FormHelperText>
<HelperText>
<HelperTextItem>Connection Nickname (same as Connection URL if not specified).</HelperTextItem>
</HelperText>
</FormHelperText>
</FormGroup>
<FormGroup>
<Accordion asDefinitionList={false} data-quickstart-id="ct-credential-expand">
Expand All @@ -359,12 +359,7 @@ export const CreateTarget: React.FC<CreateTargetProps> = ({ prefilled }) => {
isHidden={!expandedSections.includes('jmx-credential-option')}
id={'expanded-jmx-credential-option'}
>
<FormGroup
label={'Username'}
fieldId="username"
className="expandable-form__form-group"
helperText={<FormHelperText>Username for JMX connection.</FormHelperText>}
>
<FormGroup label={'Username'} fieldId="username" className="expandable-form__form-group">
<TextInput
aria-label={'Username'}
value={username}
Expand All @@ -375,13 +370,13 @@ export const CreateTarget: React.FC<CreateTargetProps> = ({ prefilled }) => {
isDisabled={loading || testing}
data-quickstart-id="ct-username-input"
/>
<FormHelperText>
<HelperText>
<HelperTextItem>Username for JMX connection.</HelperTextItem>
</HelperText>
</FormHelperText>
</FormGroup>
<FormGroup
label={'Password'}
fieldId="password"
className="expandable-form__form-group"
helperText={<FormHelperText>Password for JMX connection.</FormHelperText>}
>
<FormGroup label={'Password'} fieldId="password" className="expandable-form__form-group">
<TextInput
value={password}
isDisabled={loading || testing}
Expand All @@ -391,6 +386,11 @@ export const CreateTarget: React.FC<CreateTargetProps> = ({ prefilled }) => {
onChange={handlePasswordChange}
data-quickstart-id="ct-password-input"
/>
<FormHelperText>
<HelperText>
<HelperTextItem>Password for JMX connection.</HelperTextItem>
</HelperText>
</FormHelperText>
</FormGroup>
</AccordionContent>
</AccordionItem>
Expand Down
38 changes: 30 additions & 8 deletions src/app/Topology/Actions/NodeActions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,15 @@
import { NotificationsContext } from '@app/Shared/Services/Notifications.service';
import { ServiceContext } from '@app/Shared/Services/Services';
import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
import { Dropdown, DropdownItem, DropdownProps, DropdownToggle } from '@patternfly/react-core/deprecated';
import { portalRoot } from '@app/utils/utils';
import {
Dropdown,
DropdownItem,
DropdownList,
DropdownProps,
MenuToggle,
MenuToggleElement,
} from '@patternfly/react-core';
import { css } from '@patternfly/react-styles';
import { ContextMenuItem as PFContextMenuItem } from '@patternfly/react-topology';
import * as React from 'react';
Expand Down Expand Up @@ -107,24 +115,38 @@ export interface ActionDropdownProps extends Omit<DropdownProps, 'isOpen' | 'onS
export const ActionDropdown: React.FC<ActionDropdownProps> = ({
className,
actions,
position,
menuAppendTo,
popperProps = {

Check warning on line 118 in src/app/Topology/Actions/NodeActions.tsx

View workflow job for this annotation

GitHub Actions / eslint-check (18.x) 

'popperProps' is assigned a value but never used. Allowed unused vars must match /^_/u

Check warning on line 118 in src/app/Topology/Actions/NodeActions.tsx

View workflow job for this annotation

GitHub Actions / eslint-check (16.x) 

'popperProps' is assigned a value but never used. Allowed unused vars must match /^_/u
position: 'right',
appendTo: portalRoot,
},
...props
}) => {
const [actionOpen, setActionOpen] = React.useState(false);

const handleClose = React.useCallback(() => setActionOpen(false), [setActionOpen]);

const handleToggle = React.useCallback(() => setActionOpen((open) => !open), [setActionOpen]);

const toggle = React.useCallback(
(toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle ref={toggleRef} onClick={handleToggle} isExpanded={actionOpen}>
Actions
</MenuToggle>
),
[handleToggle, actionOpen],
);

return (
<Dropdown
{...props}
className={css(className)}
aria-label={'entity-action-menu'}
position={position || 'right'}
menuAppendTo={menuAppendTo || document.body}
onSelect={handleClose}
isOpen={actionOpen}
onClick={(e) => e.stopPropagation()}
toggle={<DropdownToggle onToggle={setActionOpen}>Actions</DropdownToggle>}
dropdownItems={actions}
/>
toggle={toggle}
>
<DropdownList>{actions}</DropdownList>
</Dropdown>
);
};
28 changes: 10 additions & 18 deletions src/app/Topology/Actions/QuickSearchPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ export const QuickSearchPanel: React.FC<QuickSearchPanelProps> = ({ ...props })
);

const handleSearch = React.useCallback(
(input: string) => {
(_, input: string) => {
setSearchText(input);
},
[setSearchText],
Expand Down Expand Up @@ -166,7 +166,7 @@ export const QuickSearchPanel: React.FC<QuickSearchPanelProps> = ({ ...props })
placeholder="Add to view..."
value={searchText}
onChange={handleSearch}
onClear={() => handleSearch('')}
onClear={(e) => handleSearch(e, '')}
/>
</StackItem>
{filteredQuicksearches.length ? (
Expand All @@ -180,7 +180,7 @@ export const QuickSearchPanel: React.FC<QuickSearchPanelProps> = ({ ...props })
expandable={{ default: 'nonExpandable', md: 'nonExpandable', lg: 'nonExpandable', sm: 'expandable' }}
isExpanded={isExpanded}
toggleText={isExpanded ? 'Close Tabs' : 'Open Tabs'}
onToggle={setIsExpanded}
onToggle={(_, isExpanded: boolean) => setIsExpanded(isExpanded)}
activeKey={activeTab}
onSelect={handleTabChange}
role={'region'}
Expand Down Expand Up @@ -214,24 +214,16 @@ export const QuickSearchPanel: React.FC<QuickSearchPanelProps> = ({ ...props })

export interface QuickSearchModalProps extends Partial<ModalProps> {}

export const QuickSearchModal: React.FC<QuickSearchModalProps> = ({
isOpen,
onClose,
variant = 'medium',
..._props
}) => {
const activeLevel = useFeatureLevel();

const guide = React.useMemo(() => {
if (activeLevel === FeatureLevel.PRODUCTION) {
return null;
}
export const QuickSearchModal: React.FC<QuickSearchModalProps> = ({ isOpen, onClose, variant = 'medium' }) => {
const description = React.useMemo(() => {
return (
<span>
For quickstarts on how to create these entities, visit <Link to={'/quickstarts'}>Quick Starts</Link>.
Select an entity to add to view. For quickstarts on how to create these entities, visit{' '}
<Link to={'/quickstarts'}>Quick Starts</Link>.
</span>
);
}, [activeLevel]);
}, []);

return (
<Modal
appendTo={portalRoot}
Expand All @@ -242,7 +234,7 @@ export const QuickSearchModal: React.FC<QuickSearchModalProps> = ({
title={'Topology Entity Catalog'}
className={'topology__quick-search-modal'}
id={'topology-quick-search-modal'}
description={<div>Select an entity to add to view. {guide}</div>}
description={{ description }}
>
<QuickSearchPanel />
</Modal>
Expand Down
8 changes: 7 additions & 1 deletion src/app/Topology/Entity/EntityDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -649,6 +649,12 @@ export const EntityDetailHeader: React.FC<EntityDetailHeaderProps> = ({
}) => {
const [status, extra] = statusContent;
const [showBanner, setShowBanner] = React.useState(true);
const variant = React.useMemo(() => {
if (status == NodeStatus.default) {
return 'info';
}
return status;
}, [status]);
return (
<div className="entity-overview__header" {...props}>
<Flex>
Expand All @@ -659,7 +665,7 @@ export const EntityDetailHeader: React.FC<EntityDetailHeaderProps> = ({
</Flex>
{status && showBanner ? (
<Alert
variant={status}
variant={variant}
isInline
title={extra?.title}
className={'entity-overview__alert-banner'}
Expand Down
Loading

0 comments on commit 187e825

Please sign in to comment.