Skip to content

Commit 3bad561

Browse files
rhamiltoclaude
rhamilto
and
claude
committed
OCPBUGS-78253: Migrate InstallPlan components table to PatternFly Table
Replace HTML table markup with PatternFly Table components in the InstallPlanPreview component. Also replace the raw co-m-pane__body div wrapper with the proper PaneBody component for consistency. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
1 parent 5ad72a8 commit 3bad561

File tree

2 files changed

+55
-58
lines changed

2 files changed

+55
-58
lines changed

‎frontend/packages/operator-lifecycle-manager/src/components/install-plan.spec.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Button, Hint } from '@patternfly/react-core';
2+
import { Tbody, Tr, Td } from '@patternfly/react-table';
23
import { shallow, ShallowWrapper } from 'enzyme';
34
import * as _ from 'lodash';
45
import { Link } from 'react-router-dom-v5-compat';
@@ -21,6 +22,7 @@ import {
2122
} from '@console/internal/components/utils';
2223
import { CustomResourceDefinitionModel } from '@console/internal/models';
2324
import { referenceForModel, K8sResourceKind } from '@console/internal/module/k8s';
25+
import PaneBody from '@console/shared/src/components/layout/PaneBody';
2426
import { testInstallPlan } from '../../mocks';
2527
import { InstallPlanModel, ClusterServiceVersionModel, OperatorGroupModel } from '../models';
2628
import { InstallPlanKind, InstallPlanApproval } from '../types';
@@ -316,31 +318,31 @@ describe('InstallPlanPreview', () => {
316318

317319
it('renders section for each resolving `ClusterServiceVersion`', () => {
318320
const wrapper = shallow(<InstallPlanPreview obj={obj} />);
319-
expect(wrapper.find('.co-m-pane__body').length).toEqual(1);
320-
wrapper.find('.co-m-pane__body').forEach((section) => {
321-
expect(section.find('tbody').find('tr').length).toEqual(2);
321+
expect(wrapper.find(PaneBody).length).toEqual(1);
322+
wrapper.find(PaneBody).forEach((section) => {
323+
expect(section.find(Tbody).find(Tr).length).toEqual(2);
322324
});
323325
});
324326

325327
it('renders link to view install plan component if it exists', () => {
326328
const wrapper = shallow(<InstallPlanPreview obj={obj} />);
327-
const row = wrapper.find('.co-m-pane__body').find('tbody').find('tr').at(0);
329+
const row = wrapper.find(PaneBody).find(Tbody).find(Tr).at(0);
328330

329-
expect(row.find('td').at(0).find(ResourceLink).props().name).toEqual(
331+
expect(row.find(Td).at(0).find(ResourceLink).props().name).toEqual(
330332
obj.status.plan[0].resource.name,
331333
);
332334
});
333335

334336
it('renders link to open preview modal for install plan component if not created yet', () => {
335337
const wrapper = shallow(<InstallPlanPreview obj={obj} />);
336-
const row = wrapper.find('.co-m-pane__body').find('tbody').find('tr').at(1);
338+
const row = wrapper.find(PaneBody).find(Tbody).find(Tr).at(1);
337339
const modalSpy = spyOn(modal, 'installPlanPreviewModal').and.returnValue(null);
338340

339-
expect(row.find('td').at(0).find(ResourceIcon).props().kind).toEqual(
341+
expect(row.find(Td).at(0).find(ResourceIcon).props().kind).toEqual(
340342
referenceForStepResource(obj.status.plan[1].resource),
341343
);
342344

343-
row.find('td').at(0).find(Button).simulate('click');
345+
row.find(Td).at(0).find(Button).simulate('click');
344346

345347
expect(modalSpy.calls.argsFor(0)[0].stepResource).toEqual(obj.status.plan[1].resource);
346348
});

‎frontend/packages/operator-lifecycle-manager/src/components/install-plan.tsx‎

Lines changed: 45 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
GridItem,
1515
} from '@patternfly/react-core';
1616
import { css } from '@patternfly/react-styles';
17-
import { sortable } from '@patternfly/react-table';
17+
import { sortable, Table as PFTable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
1818
import { Map as ImmutableMap, Set as ImmutableSet, fromJS } from 'immutable';
1919
import * as _ from 'lodash';
2020
import { useTranslation } from 'react-i18next';
@@ -484,56 +484,51 @@ export const InstallPlanPreview: React.FC<InstallPlanPreviewProps> = ({
484484
</PaneBody>
485485
)}
486486
{stepsByCSV.map((steps) => (
487-
<div key={steps[0].resolving} className="co-m-pane__body">
487+
<PaneBody key={steps[0].resolving}>
488488
<SectionHeading text={steps[0].resolving} />
489-
<div className="co-table-container">
490-
<table className="pf-v6-c-table pf-m-compact pf-m-border-rows">
491-
<thead className="pf-v6-c-table__thead">
492-
<tr className="pf-v6-c-table__tr">
493-
<th className={componentsTableColumnClasses[0]}>{t('olm~Name')}</th>
494-
<th className={componentsTableColumnClasses[1]}>{t('olm~Kind')}</th>
495-
<th className={componentsTableColumnClasses[2]}>{t('olm~Status')}</th>
496-
<th className={componentsTableColumnClasses[3]}>{t('olm~API version')}</th>
497-
</tr>
498-
</thead>
499-
<tbody className="pf-v6-c-table__tbody">
500-
{steps.map((step) => (
501-
<tr
502-
key={`${referenceForStepResource(step.resource)}-${step.resource.name}`}
503-
className="pf-v6-c-table__tr"
504-
>
505-
<td className={componentsTableColumnClasses[0]}>
506-
{['Present', 'Created'].includes(step.status) ? (
507-
<ResourceLink
508-
kind={referenceForStepResource(step.resource)}
509-
namespace={obj.metadata.namespace}
510-
name={step.resource.name}
511-
title={step.resource.name}
512-
/>
513-
) : (
514-
<>
515-
<ResourceIcon kind={referenceForStepResource(step.resource)} />
516-
<Button
517-
type="button"
518-
onClick={() => installPlanPreviewModal({ stepResource: step.resource })}
519-
variant="link"
520-
>
521-
{step.resource.name}
522-
</Button>
523-
</>
524-
)}
525-
</td>
526-
<td className={componentsTableColumnClasses[1]}>{step.resource.kind}</td>
527-
<td className={componentsTableColumnClasses[2]}>{stepStatus(step.status)}</td>
528-
<td className={componentsTableColumnClasses[3]}>
529-
{apiVersionForReference(referenceForStepResource(step.resource))}
530-
</td>
531-
</tr>
532-
))}
533-
</tbody>
534-
</table>
535-
</div>
536-
</div>
489+
<PFTable variant="compact" borders>
490+
<Thead>
491+
<Tr>
492+
<Th className={componentsTableColumnClasses[0]}>{t('olm~Name')}</Th>
493+
<Th className={componentsTableColumnClasses[1]}>{t('olm~Kind')}</Th>
494+
<Th className={componentsTableColumnClasses[2]}>{t('olm~Status')}</Th>
495+
<Th className={componentsTableColumnClasses[3]}>{t('olm~API version')}</Th>
496+
</Tr>
497+
</Thead>
498+
<Tbody>
499+
{steps.map((step) => (
500+
<Tr key={`${referenceForStepResource(step.resource)}-${step.resource.name}`}>
501+
<Td className={componentsTableColumnClasses[0]}>
502+
{['Present', 'Created'].includes(step.status) ? (
503+
<ResourceLink
504+
kind={referenceForStepResource(step.resource)}
505+
namespace={obj.metadata.namespace}
506+
name={step.resource.name}
507+
title={step.resource.name}
508+
/>
509+
) : (
510+
<>
511+
<ResourceIcon kind={referenceForStepResource(step.resource)} />
512+
<Button
513+
type="button"
514+
onClick={() => installPlanPreviewModal({ stepResource: step.resource })}
515+
variant="link"
516+
>
517+
{step.resource.name}
518+
</Button>
519+
</>
520+
)}
521+
</Td>
522+
<Td className={componentsTableColumnClasses[1]}>{step.resource.kind}</Td>
523+
<Td className={componentsTableColumnClasses[2]}>{stepStatus(step.status)}</Td>
524+
<Td className={componentsTableColumnClasses[3]}>
525+
{apiVersionForReference(referenceForStepResource(step.resource))}
526+
</Td>
527+
</Tr>
528+
))}
529+
</Tbody>
530+
</PFTable>
531+
</PaneBody>
537532
))}
538533
</>
539534
) : (

0 commit comments

Comments
 (0)