Add wrap to all our cards 🙄

cockpit-project · Oct 12, 2023 · 0d81a5b · 0d81a5b
1 parent 9e55670
commit 0d81a5b
Show file tree

Hide file tree

Showing 19 changed files with 29 additions and 29 deletions.
diff --git a/pkg/lib/cockpit-components-logs-panel.jsx b/pkg/lib/cockpit-components-logs-panel.jsx
@@ -169,7 +169,7 @@ export class LogsPanel extends React.Component {
  const actions = (this.state.logs.length > 0 && this.props.goto_url) && <Button variant="secondary" onClick={e => cockpit.jump(this.props.goto_url)}>{_("View all logs")}</Button>;
 
  return (
- <Card className="cockpit-log-panel">
+ <Card className="pf-m-wrap cockpit-log-panel">
  <CardHeader actions={{ actions }}>
  <CardTitle>{this.props.title}</CardTitle>
  </CardHeader>

diff --git a/pkg/lib/cockpit-components-modifications.jsx b/pkg/lib/cockpit-components-modifications.jsx
@@ -160,7 +160,7 @@ export class Modifications extends React.Component {
  return (
  <>
  <ModificationsExportDialog show={this.state.showDialog} shell={this.props.shell} ansible={this.props.ansible} onClose={ () => this.setState({ showDialog: false }) } />
- <Card className="modifications-table">
+ <Card className="pf-m-wrap modifications-table">
  <CardHeader>
  <CardTitle component="h2">{this.props.title}</CardTitle>
  { !emptyRow &&

diff --git a/pkg/metrics/metrics.jsx b/pkg/metrics/metrics.jsx
@@ -814,7 +814,7 @@ class CurrentMetrics extends React.Component {
 
  return (
  <Gallery className="current-metrics" hasGutter>
- <Card id="current-metrics-card-cpu">
+ <Card className="pf-m-wrap" id="current-metrics-card-cpu">
  <CardHeader className='align-baseline'>
  <CardTitle>{ _("CPU") }</CardTitle>
  { this.cpuTemperature !== null &&
@@ -913,7 +913,7 @@ class CurrentMetrics extends React.Component {
  </CardBody>
  </Card>
 
- <Card id="current-metrics-card-disks">
+ <Card className="pf-m-wrap" id="current-metrics-card-disks">
  <CardTitle>{ _("Disks") }</CardTitle>
  <CardBody>
  <DescriptionList isHorizontal columnModifier={{ default: '2Col' }}>
@@ -974,7 +974,7 @@ class CurrentMetrics extends React.Component {
  </CardBody>
  </Card>
 
- <Card className="current-metrics-network">
+ <Card className="pf-m-wrap current-metrics-network">
  <CardTitle>{ _("Network") }</CardTitle>
  <CardBody>
  <Table
@@ -1955,7 +1955,7 @@ class MetricsHistory extends React.Component {
  <PageSection className="metrics-history-section" variant={PageSectionVariants.light}>
  <>
  { this.state.hours.length > 0 &&
- <Card isPlain>
+ <Card className="pf-m-wrap" isPlain>
  <CardBody className="metrics-history">
  { this.state.hours.map((time, i) => {
  const showHeader = i == 0 || timeformat.date(time) != timeformat.date(this.state.hours[i - 1]);

diff --git a/pkg/networkmanager/firewall.jsx b/pkg/networkmanager/firewall.jsx
@@ -188,7 +188,7 @@ function ZoneSection(props) {
 
  const actions = !firewall.readonly && <div className="zone-section-buttons">{addServiceAction}{deleteButton}</div>;
 
- return <Card className="zone-section" data-id={props.zone.id}>
+ return <Card className="pf-m-wrap zone-section" data-id={props.zone.id}>
  <CardHeader actions={{ actions }} className="zone-section-heading">
  <Flex alignItems={{ default: 'alignSelfBaseline' }} spaceItems={{ default: 'spaceItemsXl' }}>
  <CardTitle component="h2">

diff --git a/pkg/networkmanager/network-interface-members.jsx b/pkg/networkmanager/network-interface-members.jsx
@@ -192,7 +192,7 @@ export const NetworkInterfaceMembers = ({
  );
 
  return (
- <Card id="network-interface-members" className="network-interface-members">
+ <Card id="network-interface-members" className="pf-m-wrap network-interface-members">
  <CardHeader actions={{ actions: add_btn }}>
  <CardTitle component="h2">{_("Interface members")}</CardTitle>
  </CardHeader>

diff --git a/pkg/networkmanager/network-interface.jsx b/pkg/networkmanager/network-interface.jsx
@@ -709,7 +709,7 @@ export const NetworkInterfacePage = ({
  </PageSection>
  <PageSection>
  <Gallery hasGutter>
- <Card className="network-interface-details">
+ <Card className="pf-m-wrap network-interface-details">
  <CardHeader actions={{
  actions: (
  <>

diff --git a/pkg/networkmanager/network-main.jsx b/pkg/networkmanager/network-main.jsx
@@ -153,7 +153,7 @@ export const NetworkPage = ({ privileged, operationInProgress, usage_monitor, pl
  </PageSection>
  <PageSection>
  <Gallery hasGutter>
- {firewall.installed && <Card id="networking-firewall-summary">
+ {firewall.installed && <Card className="pf-m-wrap" id="networking-firewall-summary">
  <CardHeader actions={{
  actions: <Button variant="secondary" id="networking-firewall-link"
  component="a"
@@ -175,7 +175,7 @@ export const NetworkPage = ({ privileged, operationInProgress, usage_monitor, pl
  </Button>
  </CardBody>
  </Card>}
- <Card id="networking-interfaces">
+ <Card className="pf-m-wrap" id="networking-interfaces">
  <CardHeader actions={{ actions }}>
  <CardTitle component="h2">{_("Interfaces")}</CardTitle>
  </CardHeader>
@@ -190,7 +190,7 @@ export const NetworkPage = ({ privileged, operationInProgress, usage_monitor, pl
  rows={managed} />
  </Card>
  {unmanaged.length > 0 &&
- <Card id="networking-unmanaged-interfaces">
+ <Card className="pf-m-wrap" id="networking-unmanaged-interfaces">
  <CardHeader>
  <CardTitle component="h2">{_("Unmanaged interfaces")}</CardTitle>
  </CardHeader>

diff --git a/pkg/playground/react-demo-cards.jsx b/pkg/playground/react-demo-cards.jsx
@@ -26,21 +26,21 @@ import { Gallery, GalleryItem } from "@patternfly/react-core/dist/esm/layouts/Ga
 
 const CardsDemo = () => {
  const cards = [
- <Card isCompact key="card1">
+ <Card className="pf-m-wrap" isCompact key="card1">
  <CardBody>I'm a card in a gallery</CardBody>
  </Card>,
- <Card isCompact key="card2">
+ <Card className="pf-m-wrap" isCompact key="card2">
  <CardBody>I'm a card in a gallery</CardBody>
  <CardFooter>I have a footer</CardFooter>
  </Card>,
- <Card isCompact key="card3">
+ <Card className="pf-m-wrap" isCompact key="card3">
  <CardBody>I'm a card in a gallery</CardBody>
  </Card>,
- <Card isCompact key="card4">
+ <Card className="pf-m-wrap" isCompact key="card4">
  <CardTitle>I have a header too</CardTitle>
  <CardBody>I'm a card in a gallery</CardBody>
  </Card>,
- <Card key="card5">
+ <Card className="pf-m-wrap" key="card5">
  <CardHeader actions={{
  actions: <><input type="checkbox" />
  <Button className="btn">click</Button></>,

diff --git a/pkg/sosreport/sosreport.jsx b/pkg/sosreport/sosreport.jsx
@@ -485,7 +485,7 @@ const SOSBody = () => {
 
  return (
  <PageSection>
- <Card className="ct-card">
+ <Card className="pf-m-wrap ct-card">
  <CardHeader actions={{
  actions: <Button id="create-button" variant="primary" onClick={run_report}>
  {_("Run report")}

diff --git a/pkg/storaged/crypto-keyslots.jsx b/pkg/storaged/crypto-keyslots.jsx
@@ -875,7 +875,7 @@ export class CryptoKeyslots extends React.Component {
  const remaining = max_slots - keys.length;
 
  return (
- <Card className="key-slot-panel">
+ <Card className="pf-m-wrap key-slot-panel">
  <CardHeader actions={{
  actions: <>
  <span className="key-slot-panel-remaining">

diff --git a/pkg/storaged/jobs-panel.jsx b/pkg/storaged/jobs-panel.jsx
@@ -198,7 +198,7 @@ export class JobsPanel extends React.Component {
  jobs = jobs.sort(cmp_job);
 
  return (
- <Card className="detail-jobs">
+ <Card className="pf-m-wrap detail-jobs">
  <CardTitle component="h2">{_("Jobs")}</CardTitle>
  <CardBody className="contains-list">
  <DataList isCompact aria-label={_("Jobs")}>

diff --git a/pkg/systemd/hwinfo.jsx b/pkg/systemd/hwinfo.jsx
@@ -337,15 +337,15 @@ class HardwareInfo extends React.Component {
  : undefined } />
  </CardBody>
  </Card>
- <Card id="pci-listing">
+ <Card className="pf-m-wrap" id="pci-listing">
  <CardHeader>
  <CardTitle component="h2">{_("PCI")}</CardTitle>
  </CardHeader>
  <CardBody className="contains-list">
  { pci }
  </CardBody>
  </Card>
- <Card id="memory-listing">
+ <Card className="pf-m-wrap" id="memory-listing">
  <CardHeader>
  <CardTitle component="h2">{_("Memory")}</CardTitle>
  </CardHeader>

diff --git a/pkg/systemd/overview-cards/configurationCard.jsx b/pkg/systemd/overview-cards/configurationCard.jsx
@@ -58,7 +58,7 @@ export const ConfigurationCard = ({ hostname }) => {
 
  return (
  <>
- <Card className="system-configuration">
+ <Card className="pf-m-wrap system-configuration">
  <CardTitle>{_("Configuration")}</CardTitle>
  <CardBody>
  <table className="pf-v5-c-table pf-m-grid-md pf-m-compact">

diff --git a/pkg/systemd/overview-cards/healthCard.jsx b/pkg/systemd/overview-cards/healthCard.jsx
@@ -34,7 +34,7 @@ const _ = cockpit.gettext;
 export class HealthCard extends React.Component {
  render() {
  return (
- <Card className="system-health">
+ <Card className="pf-m-wrap system-health">
  <CardTitle>{_("Health")}</CardTitle>
  <CardBody>
  <ul className="system-health-events">

diff --git a/pkg/systemd/overview-cards/systemInformationCard.jsx b/pkg/systemd/overview-cards/systemInformationCard.jsx
@@ -102,7 +102,7 @@ export class SystemInformationCard extends React.Component {
 
  render() {
  return (
- <Card className="system-information">
+ <Card className="pf-m-wrap system-information">
  <CardTitle>{_("System information")}</CardTitle>
  <CardBody>
  <table className="pf-v5-c-table pf-m-grid-md pf-m-compact">

diff --git a/pkg/systemd/overview-cards/usageCard.jsx b/pkg/systemd/overview-cards/usageCard.jsx
@@ -123,7 +123,7 @@ export class UsageCard extends React.Component {
  const cores_str = cockpit.format(cockpit.ngettext("of $0 CPU", "of $0 CPUs", this.state.numCpu), this.state.numCpu);
 
  return (
- <Card className="system-usage">
+ <Card className="pf-m-wrap system-usage">
  <CardTitle>{_("Usage")}</CardTitle>
  <CardBody>
  <table className="pf-v5-c-table pf-m-grid-md pf-m-compact">

diff --git a/pkg/systemd/service-details.jsx b/pkg/systemd/service-details.jsx
@@ -606,7 +606,7 @@ export class ServiceDetails extends React.Component {
  });
 
  return (
- <Card id="service-details-unit" className="ct-card">
+ <Card id="service-details-unit" className="pf-m-wrap ct-card">
  { this.state.showDeleteDialog &&
  <DeleteModal
  name={this.props.unit.Description}

diff --git a/pkg/systemd/services.jsx b/pkg/systemd/services.jsx
@@ -705,7 +705,7 @@ class ServicesPageBody extends React.Component {
 
  return (
  <PageSection>
- <Card isCompact>
+ <Card className="pf-m-wrap" isCompact>
  <ServicesPageFilters activeStateDropdownOptions={activeStateDropdownOptions}
  fileStateDropdownOptions={fileStateDropdownOptions}
  filtersRef={this.filtersRef}

diff --git a/pkg/users/account-logs-panel.jsx b/pkg/users/account-logs-panel.jsx
@@ -71,7 +71,7 @@ export function AccountLogs({ name }) {
  }, [name]);
 
  return (
- <Card id="account-logs">
+ <Card className="pf-m-wrap" id="account-logs">
  <CardTitle component="h2">{_("Login history")}</CardTitle>
  <CardBody className="contains-list">
  <ListingTable variant="compact" aria-label={ _("Login history list") }