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.

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

🐾 Update to PF5 - part II - onClick event handler #1208

Merged
merged 1 commit into from
Jun 19, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,15 @@ export const NetworkMapActionsDropdownItems = ({ data }: NetworkMapActionsDropdo
namespace: networkMap?.metadata?.namespace,
});

const onClick = () => {
showModal(<DeleteModal resource={networkMap} model={NetworkMapModel} />);
};

return [
<DropdownItemLink key="EditNetworkMapping" href={networkMapURL}>
{t('Edit NetworkMap')}
</DropdownItemLink>,
<DropdownItem
key="delete"
isDisabled={!data?.permissions?.canDelete}
onClick={() => showModal(<DeleteModal resource={networkMap} model={NetworkMapModel} />)}
>
<DropdownItem key="delete" isDisabled={!data?.permissions?.canDelete} onClick={onClick}>
{t('Delete NetworkMap')}
</DropdownItem>,
];
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,12 @@ export const NetworkMapsAddButton: React.FC<{ namespace: string; dataTestId?: st
namespaced: namespace !== undefined,
});

const onClick = () => {
history.push(`${NetworkMapsListURL}/~new`);
};

return (
<Button
data-testid={dataTestId}
variant="primary"
onClick={() => history.push(`${NetworkMapsListURL}/~new`)}
>
<Button data-testid={dataTestId} variant="primary" onClick={onClick}>
{t('Create NetworkMap')}
</Button>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,10 @@ export const MapsSection: React.FC<MapsSectionProps> = ({ obj }) => {
});
};

const onClick = () => {
yaacov marked this conversation as resolved.
Show resolved Hide resolved
dispatch({ type: 'INIT', payload: obj });
};

return (
<Suspend obj={providers} loaded={providersLoaded} loadError={providersLoadError}>
<Flex className="forklift-network-map__details-tab--update-button">
Expand All @@ -173,7 +177,7 @@ export const MapsSection: React.FC<MapsSectionProps> = ({ obj }) => {
<FlexItem>
<Button
variant="secondary"
onClick={() => dispatch({ type: 'INIT', payload: obj })}
onClick={onClick}
isDisabled={!state.hasChanges || state.updating}
>
{t('Cancel')}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,10 @@ export const ProvidersSection: React.FC<ProvidersSectionProps> = ({ obj }) => {
});
};

const onClick = () => {
dispatch({ type: 'INIT', payload: obj });
};

return (
<Suspend obj={providers} loaded={providersLoaded} loadError={providersLoadError}>
<Flex className="forklift-network-map__details-tab--update-button">
Expand All @@ -66,7 +70,7 @@ export const ProvidersSection: React.FC<ProvidersSectionProps> = ({ obj }) => {
<FlexItem>
<Button
variant="secondary"
onClick={() => dispatch({ type: 'INIT', payload: obj })}
onClick={onClick}
isDisabled={!state.hasChanges || state.updating}
>
{t('Cancel')}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,16 @@ export const ShowWelcomeCardButton: React.FC = () => {
// Set and use context data for the overview page state
const { setData } = useCreateOverviewContext();
const { data: { hideWelcomeCardByContext } = {} } = useCreateOverviewContext();
const onClick = () => {
setData({ hideWelcomeCardByContext: false });
};

if (!hideWelcomeCardByContext) return null;

return (
<Label
color="purple"
onClick={() => {
setData({ hideWelcomeCardByContext: false });
}}
onClick={onClick}
onClose={() => null}
style={{ cursor: 'pointer' }}
data-testid="show-welcome-card"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,11 @@ export const MigrationsChartCard: React.FC<MigrationsCardProps> = () => {
...migrationsDataPoints.succeeded.map((m) => m.value),
);

const handleTimeRangeSelectedFactory = (timeRange: TimeRangeOptions) => () => {
onToggle();
setSelectedTimeRange(timeRange);
};

return (
<Card>
<CardHeader>
Expand All @@ -85,28 +90,19 @@ export const MigrationsChartCard: React.FC<MigrationsCardProps> = () => {
isPlain
dropdownItems={[
<DropdownItem
onClick={() => {
onToggle();
setSelectedTimeRange(TimeRangeOptions.Last7Days);
}}
onClick={handleTimeRangeSelectedFactory(TimeRangeOptions.Last7Days)}
key="7days"
>
{t('7 days')}
</DropdownItem>,
<DropdownItem
onClick={() => {
onToggle();
setSelectedTimeRange(TimeRangeOptions.Last31Days);
}}
onClick={handleTimeRangeSelectedFactory(TimeRangeOptions.Last31Days)}
key="31days"
>
{t('31 days')}
</DropdownItem>,
<DropdownItem
onClick={() => {
onToggle();
setSelectedTimeRange(TimeRangeOptions.Last24H);
}}
onClick={handleTimeRangeSelectedFactory(TimeRangeOptions.Last24H)}
key="24hours"
>
{t('24 hours')}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,11 @@ export const VmMigrationsChartCard: React.FC<MigrationsCardProps> = () => {
...VmMigrationsDataPoints.succeeded.map((m) => m.value),
);

const handleTimeRangeSelectedFactory = (timeRange: TimeRangeOptions) => () => {
onToggle();
setSelectedTimeRange(timeRange);
};

return (
<Card>
<CardHeader>
Expand All @@ -107,28 +112,19 @@ export const VmMigrationsChartCard: React.FC<MigrationsCardProps> = () => {
isPlain
dropdownItems={[
<DropdownItem
onClick={() => {
onToggle();
setSelectedTimeRange(TimeRangeOptions.Last7Days);
}}
onClick={handleTimeRangeSelectedFactory(TimeRangeOptions.Last7Days)}
key="7days"
>
{t('7 days')}
</DropdownItem>,
<DropdownItem
onClick={() => {
onToggle();
setSelectedTimeRange(TimeRangeOptions.Last31Days);
}}
onClick={handleTimeRangeSelectedFactory(TimeRangeOptions.Last31Days)}
key="31days"
>
{t('31 days')}
</DropdownItem>,
<DropdownItem
onClick={() => {
onToggle();
setSelectedTimeRange(TimeRangeOptions.Last24H);
}}
onClick={handleTimeRangeSelectedFactory(TimeRangeOptions.Last24H)}
key="24hours"
>
{t('24 hours')}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,51 +36,61 @@ export const PlanActionsDropdownItems = ({ data }: PlanActionsDropdownItemsProps

const buttonStartLabel = canReStart ? t('Restart migration') : t('Start migration');

const onClickPlanStart = () => {
showModal(
<PlanStartMigrationModal resource={plan} model={PlanModel} title={buttonStartLabel} />,
);
};

const onClickPlanCutover = () => {
showModal(<PlanCutoverMigrationModal resource={plan} />);
};

const onClickDuplicate = () => {
showModal(<DuplicateModal resource={plan} model={PlanModel} />);
};

const onClickArchive = () => {
showModal(<ArchiveModal resource={plan} model={PlanModel} />);
};

const onClickPlanDelete = () => {
showModal(<PlanDeleteModal resource={plan} model={PlanModel} />);
};

return [
<DropdownItemLink key="EditPlan" href={planURL}>
{t('Edit Plan')}
</DropdownItemLink>,

<DropdownItem
key="start"
isDisabled={!canStart}
onClick={() =>
showModal(
<PlanStartMigrationModal resource={plan} model={PlanModel} title={buttonStartLabel} />,
)
}
>
<DropdownItem key="start" isDisabled={!canStart} onClick={onClickPlanStart}>
{buttonStartLabel}
</DropdownItem>,

<DropdownItem
key="cutover"
isDisabled={!isWarmAndExecuting}
onClick={() => showModal(<PlanCutoverMigrationModal resource={plan} />)}
>
<DropdownItem key="cutover" isDisabled={!isWarmAndExecuting} onClick={onClickPlanCutover}>
{t('Cutover')}
</DropdownItem>,

<DropdownItem
key="duplicate"
isDisabled={!data?.permissions?.canDelete}
onClick={() => showModal(<DuplicateModal resource={plan} model={PlanModel} />)}
onClick={onClickDuplicate}
>
{t('Duplicate Plan')}
</DropdownItem>,

<DropdownItem
key="archive"
isDisabled={!data?.permissions?.canDelete || ['Archived', 'Archiving'].includes(phase)}
onClick={() => showModal(<ArchiveModal resource={plan} model={PlanModel} />)}
onClick={onClickArchive}
>
{t('Archive Plan')}
</DropdownItem>,

<DropdownItem
key="delete"
isDisabled={!data?.permissions?.canDelete}
onClick={() => showModal(<PlanDeleteModal resource={plan} model={PlanModel} />)}
onClick={onClickPlanDelete}
>
{t('Delete Plan')}
</DropdownItem>,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,10 @@ export const MappingListItem: FC<MappingListItemProps> = ({
const [isSrcOpen, setToggleSrcOpen] = useToggle(false);
const [isTrgOpen, setToggleTrgOpen] = useToggle(false);

const onClick = () => {
deleteMapping({ source, destination });
};

return (
<DataListItem aria-labelledby="">
<DataListItemRow>
Expand Down Expand Up @@ -111,7 +115,7 @@ export const MappingListItem: FC<MappingListItemProps> = ({
aria-labelledby=""
>
<Button
onClick={() => deleteMapping({ source, destination })}
onClick={onClick}
variant="plain"
aria-label={t('Delete mapping')}
key="delete-action"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -58,21 +58,16 @@ export const PlanPageHeadings: React.FC<{ name: string; namespace: string }> = (
);
}

const onClick = () => {
showModal(
<PlanStartMigrationModal resource={plan} model={PlanModel} title={buttonStartLabel} />,
);
};

const actions = (
<Level hasGutter>
{canStart && (
<Button
variant="primary"
onClick={() =>
showModal(
<PlanStartMigrationModal
resource={plan}
model={PlanModel}
title={buttonStartLabel}
/>,
)
}
>
<Button variant="primary" onClick={onClick}>
<Level hasGutter>
<>
<LevelItem>{buttonStartIcon}</LevelItem>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,13 @@ export const PlanHooks: React.FC<{ name: string; namespace: string }> = ({ name,
onUpdatePlanHooks({ plan, preHookResource, postHookResource, dispatch, state });
}

const onClick = () => {
dispatch({
type: 'INIT',
payload: initialState(plan, preHookResource, postHookResource),
});
};

const HooksTabAction = (
<>
<Flex>
Expand All @@ -65,16 +72,7 @@ export const PlanHooks: React.FC<{ name: string; namespace: string }> = ({ name,
</FlexItem>

<FlexItem>
<Button
variant="secondary"
isDisabled={!state.hasChanges}
onClick={() =>
dispatch({
type: 'INIT',
payload: initialState(plan, preHookResource, postHookResource),
})
}
>
<Button variant="secondary" isDisabled={!state.hasChanges} onClick={onClick}>
{t('Cancel')}
</Button>
</FlexItem>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,13 @@ export const MigrationVMsCancelButton: FC<{
}> = ({ selectedIds, migration }) => {
const { t } = useForkliftTranslation();
const { showModal } = useModal();
const onClick = () => {
showModal(<MigrationVMsCancelModal migration={migration} selected={selectedIds} />);
};

return (
<ToolbarItem>
<Button
variant="secondary"
onClick={() =>
showModal(<MigrationVMsCancelModal migration={migration} selected={selectedIds} />)
}
isDisabled={!selectedIds?.length}
>
<Button variant="secondary" onClick={onClick} isDisabled={!selectedIds?.length}>
{t('Cancel virtual machines')}
</Button>
</ToolbarItem>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,13 @@ export const PlanVMsDeleteButton: FC<{
const { t } = useForkliftTranslation();
const { showModal } = useModal();

const onClick = () => {
showModal(<PlanVMsDeleteModal plan={plan} selected={selectedIds} />);
};

return (
<ToolbarItem>
<Button
variant="secondary"
onClick={() => showModal(<PlanVMsDeleteModal plan={plan} selected={selectedIds} />)}
isDisabled={selectedIds?.length < 1}
>
<Button variant="secondary" onClick={onClick} isDisabled={selectedIds?.length < 1}>
{t('Remove virtual machines')}
</Button>
</ToolbarItem>
Expand Down
Loading