packagekit: Split TwoColumn components in a separate file

This allows us in the next commit to move the RestartServices component
out to its own file with the goal to shrink `updates.jsx` to a more
reasonable line and component count.
Added benefit is that the two components are now in TypeScript making it
easier to convert `updates.jsx` to TypeScript.
This commit is contained in:
Jelle van der Waa 2026-09-02 19:19:07 +02:00 committed by Jelle van der Waa
parent dd80c35f70
commit 1545aa0efb
2 changed files with 38 additions and 29 deletions

View file

@ -0,0 +1,37 @@
/*
* Copyright (C) 2026 Red Hat, Inc.
* SPDX-License-Identifier: LGPL-2.1-or-later
*/
import React from "react";
import { Content } from "@patternfly/react-core/dist/esm/components/Content/index.js";
import { Flex, FlexItem } from "@patternfly/react-core/dist/esm/layouts/Flex/index.js";
export const TwoColumnContent = ({ list, flexClassName }: { list: string[], flexClassName?: string }) => {
const half = Math.round(list.length / 2);
const col1 = list.slice(0, half);
const col2 = list.slice(half);
return (
<Flex {...(flexClassName && { className: flexClassName })}>
<FlexItem flex={{ default: 'flex_1' }}>
<Content component="ul">
{col1.map(item => (<Content component="li" key={item}>{item}</Content>))}
</Content>
</FlexItem>
{col2.length > 0 && <FlexItem flex={{ default: 'flex_1' }}>
<Content component="ul">
{col2.map(item => (<Content component="li" key={item}>{item}</Content>))}
</Content>
</FlexItem>}
</Flex>
);
};
export const TwoColumnTitle = ({ icon, str }: { icon: React.ReactNode, str: string }) => {
return (<>
{icon}
<span className="update-success-table-title">
{str}
</span>
</>);
};

View file

@ -50,6 +50,7 @@ import { Remarkable } from "remarkable";
import { AutoUpdates, getBackend } from "./autoupdates.jsx";
import { KpatchSettings, KpatchStatus } from "./kpatch";
import { History, PackageList } from "./history";
import { TwoColumnContent, TwoColumnTitle } from "./two-column";
import { page_status } from "notifications";
import { EmptyStatePanel } from "cockpit-components-empty-state.jsx";
import { ListingTable } from 'cockpit-components-table.jsx';
@ -600,35 +601,6 @@ const ApplyUpdates = ({ transactionProps, actions, onCancel, rebootAfter, setReb
);
};
const TwoColumnContent = ({ list, flexClassName }) => {
const half = Math.round(list.length / 2);
const col1 = list.slice(0, half);
const col2 = list.slice(half);
return (
<Flex className={flexClassName}>
<FlexItem flex={{ default: 'flex_1' }}>
<Content component="ul">
{col1.map(item => (<Content component="li" key={item}>{item}</Content>))}
</Content>
</FlexItem>
{col2.length > 0 && <FlexItem flex={{ default: 'flex_1' }}>
<Content component="ul">
{col2.map(item => (<Content component="li" key={item}>{item}</Content>))}
</Content>
</FlexItem>}
</Flex>
);
};
const TwoColumnTitle = ({ icon, str }) => {
return (<>
{icon}
<span className="update-success-table-title">
{str}
</span>
</>);
};
const UpdateSuccess = ({ onIgnore, openServiceRestartDialog, openRebootDialog, restart, manual, reboot, checkRestartAvailable, history }) => {
if (!checkRestartAvailable) {
/* tracer is not available any more in RHEL 10; as a special case, if only kpatch and kernel were