mirror of
https://github.com/cockpit-project/cockpit.git
synced 2026-11-03 21:49:50 -09:00
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:
parent
dd80c35f70
commit
1545aa0efb
2 changed files with 38 additions and 29 deletions
37
pkg/packagekit/two-column.tsx
Normal file
37
pkg/packagekit/two-column.tsx
Normal 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>
|
||||
</>);
|
||||
};
|
||||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue