Skip to content

Commit da23eb6

Browse files
openshift-merge-bot[bot]openshift-merge-bot[bot]
authored
Merge pull request #2056 from openshift-cherrypick-robot/cherry-pick-2054-to-release-4.19
DFBUGS-2327: [release-4.19] Convert dl, dd, dt to PF DescriptionList + Remove DetailsBody component
2 parents f362989 + 77676f0 commit da23eb6

File tree

23 files changed

+529
-338
lines changed

23 files changed

+529
-338
lines changed

‎packages/client/src/components/dashboards/cards/details-card.tsx

+9-4
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,13 @@ import { useFetchCsv } from '@odf/shared/hooks/use-fetch-csv';
33
import { OverviewDetailItem as DetailItem } from '@odf/shared/overview-page';
44
import { useCustomTranslation } from '@odf/shared/useCustomTranslationHook';
55
import { getOprVersionFromCSV } from '@odf/shared/utils';
6-
import { DetailsBody } from '@openshift-console/dynamic-plugin-sdk-internal';
7-
import { Card, CardHeader, CardTitle, CardBody } from '@patternfly/react-core';
6+
import {
7+
Card,
8+
CardHeader,
9+
CardTitle,
10+
CardBody,
11+
DescriptionList,
12+
} from '@patternfly/react-core';
813
import { CLIENT_OPERATOR } from '../../../constants';
914

1015
export const DetailsCard: React.FC = () => {
@@ -24,7 +29,7 @@ export const DetailsCard: React.FC = () => {
2429
<CardTitle>{t('Details')}</CardTitle>
2530
</CardHeader>
2631
<CardBody>
27-
<DetailsBody>
32+
<DescriptionList>
2833
<DetailItem key="service_name" title={t('Service name')}>
2934
{serviceName}
3035
</DetailItem>
@@ -40,7 +45,7 @@ export const DetailsCard: React.FC = () => {
4045
>
4146
{subscriptionVersion}
4247
</DetailItem>
43-
</DetailsBody>
48+
</DescriptionList>
4449
</CardBody>
4550
</Card>
4651
);

‎packages/ocs/dashboards/block-pool/compression-details-card.tsx

+13-8
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,14 @@ import {
1313
humanizePercentage,
1414
getGaugeValue,
1515
} from '@odf/shared/utils';
16-
import { DetailsBody } from '@openshift-console/dynamic-plugin-sdk-internal';
1716
import { useParams } from 'react-router-dom-v5-compat';
18-
import { Card, CardBody, CardHeader, CardTitle } from '@patternfly/react-core';
17+
import {
18+
Card,
19+
CardBody,
20+
CardHeader,
21+
CardTitle,
22+
DescriptionList,
23+
} from '@patternfly/react-core';
1924
import { getPoolQuery, StorageDashboardQuery } from '../../queries';
2025
import { ODFSystemParams } from '../../types';
2126
import { getPerPoolMetrics, PoolMetrics } from '../../utils';
@@ -130,23 +135,23 @@ export const CompressionDetailsCard: React.FC = () => {
130135
<CardTitle>{t('Compression')}</CardTitle>
131136
</CardHeader>
132137
<CardBody>
133-
<DetailsBody>
138+
<DescriptionList>
134139
<DetailItem isLoading={!obj} title={t('Compression status')}>
135140
{!compressionEnabled ? t('Disabled') : t('Enabled')}
136141
</DetailItem>
137-
</DetailsBody>
142+
</DescriptionList>
138143
{compressionEnabled && (
139-
<DetailsBody>
144+
<DescriptionList>
140145
<div>
141-
<DetailsBody>
146+
<DescriptionList>
142147
<DetailItem isLoading={loading} title={t('Storage efficiency')}>
143148
<EfficiencyItemBody {...compressionEligibilityProps} />
144149
<EfficiencyItemBody {...compressionRatioProps} />
145150
<EfficiencyItemBody {...compressionSavingsProps} />
146151
</DetailItem>
147-
</DetailsBody>
152+
</DescriptionList>
148153
</div>
149-
</DetailsBody>
154+
</DescriptionList>
150155
)}
151156
</CardBody>
152157
</Card>

‎packages/ocs/dashboards/block-pool/details-card.tsx

+9-4
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,13 @@ import * as React from 'react';
22
import { PoolType } from '@odf/ocs/constants';
33
import { OverviewDetailItem as DetailItem } from '@odf/shared/overview-page';
44
import { useCustomTranslation } from '@odf/shared/useCustomTranslationHook';
5-
import { DetailsBody } from '@openshift-console/dynamic-plugin-sdk-internal';
6-
import { Card, CardBody, CardHeader, CardTitle } from '@patternfly/react-core';
5+
import {
6+
Card,
7+
CardBody,
8+
CardHeader,
9+
CardTitle,
10+
DescriptionList,
11+
} from '@patternfly/react-core';
712
import { BlockPoolDashboardContext } from './block-pool-dashboard-context';
813

914
export const DetailsCard: React.FC = () => {
@@ -18,7 +23,7 @@ export const DetailsCard: React.FC = () => {
1823
<CardTitle>{t('Details')}</CardTitle>
1924
</CardHeader>
2025
<CardBody>
21-
<DetailsBody>
26+
<DescriptionList>
2227
<DetailItem isLoading={!obj} title={t('Pool name')}>
2328
{obj.metadata?.name}
2429
</DetailItem>
@@ -31,7 +36,7 @@ export const DetailsCard: React.FC = () => {
3136
<DetailItem isLoading={!obj} title={t('Replicas')}>
3237
{obj.spec?.replicated?.size}
3338
</DetailItem>
34-
</DetailsBody>
39+
</DescriptionList>
3540
</CardBody>
3641
</Card>
3742
);

‎packages/ocs/dashboards/block-pool/mirroring-card-body.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import * as React from 'react';
2+
import { DescriptionList } from '@patternfly/react-core';
23
import './mirroring-card.scss';
34

45
export const MirroringCardBody: React.FC<MirroringCardBodyProps> = ({
56
children,
6-
}) => <dl className="odf-block-pool__mirroring-card-body">{children}</dl>;
7+
}) => <DescriptionList>{children}</DescriptionList>;
78

89
type MirroringCardBodyProps = {
910
children: React.ReactNode;

‎packages/ocs/dashboards/block-pool/mirroring-card-item.tsx

+16-14
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,15 @@
11
import * as React from 'react';
22
import { useCustomTranslation } from '@odf/shared/useCustomTranslationHook';
3-
import classNames from 'classnames';
3+
import {
4+
DescriptionListDescription,
5+
DescriptionListGroup,
6+
DescriptionListTerm,
7+
} from '@patternfly/react-core';
48

9+
/**
10+
* A wrapper around PatternFly's description group. This component's parent must
11+
* be a PatternFly DescriptionList.
12+
*/
513
export const MirroringCardItem: React.FC<MirroringCardItemProps> = React.memo(
614
({
715
title,
@@ -27,25 +35,19 @@ export const MirroringCardItem: React.FC<MirroringCardItemProps> = React.memo(
2735
status = children;
2836
}
2937
return (
30-
<>
38+
<DescriptionListGroup>
3139
{title && (
32-
<dt
33-
className="odf-block-pool__mirroring-card-item-dt"
34-
data-test="mirroring-card-item-title"
35-
>
40+
<DescriptionListTerm data-test="mirroring-card-item-title">
3641
{title}
37-
</dt>
42+
</DescriptionListTerm>
3843
)}
39-
<dd
40-
className={classNames(
41-
'odf-block-pool__mirroring-card-item-dd',
42-
valueClassName
43-
)}
44+
<DescriptionListDescription
45+
className={valueClassName}
4446
data-test="mirroring-card-item-value"
4547
>
4648
{status}
47-
</dd>
48-
</>
49+
</DescriptionListDescription>
50+
</DescriptionListGroup>
4951
);
5052
}
5153
);

‎packages/ocs/dashboards/block-pool/mirroring-card.scss

-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
.odf-block-pool__mirroring-card-body {
2-
display: flex;
3-
flex-wrap: wrap;
4-
}
5-
61
.odf-block-pool__mirroring-card-item-dt {
72
flex-basis: 100%;
83
}

‎packages/ocs/dashboards/block-pool/status-card.tsx

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import * as React from 'react';
22
import { useCustomTranslation } from '@odf/shared/useCustomTranslationHook';
33
import Status from '@openshift-console/dynamic-plugin-sdk/lib/app/components/status/Status';
4-
import { DetailsBody } from '@openshift-console/dynamic-plugin-sdk-internal';
54
import { Card, CardBody, CardHeader, CardTitle } from '@patternfly/react-core';
65
import { BlockPoolDashboardContext } from './block-pool-dashboard-context';
76

@@ -15,9 +14,7 @@ export const StatusCard: React.FC = () => {
1514
<CardTitle>{t('Status')}</CardTitle>
1615
</CardHeader>
1716
<CardBody>
18-
<DetailsBody>
19-
<Status status={obj.status?.phase} />
20-
</DetailsBody>
17+
<Status status={obj.status?.phase} />
2118
</CardBody>
2219
</Card>
2320
);

‎packages/ocs/dashboards/object-service/details-card/details-card.tsx

+9-4
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,14 @@ import {
3131
useFlag,
3232
useK8sWatchResource,
3333
} from '@openshift-console/dynamic-plugin-sdk';
34-
import { DetailsBody } from '@openshift-console/dynamic-plugin-sdk-internal';
3534
import { Link, useParams } from 'react-router-dom-v5-compat';
36-
import { Card, CardBody, CardHeader, CardTitle } from '@patternfly/react-core';
35+
import {
36+
Card,
37+
CardBody,
38+
CardHeader,
39+
CardTitle,
40+
DescriptionList,
41+
} from '@patternfly/react-core';
3742
import { ODFSystemParams } from '../../../types';
3843
import './details-card.scss';
3944
import EncryptionPopover from '../../common/details-card/encryption-popover';
@@ -107,7 +112,7 @@ export const ObjectServiceDetailsCard: React.FC<{}> = () => {
107112
<CardTitle>{t('Details')}</CardTitle>
108113
</CardHeader>
109114
<CardBody>
110-
<DetailsBody>
115+
<DescriptionList>
111116
<DetailItem key="service_name" title={t('Service name')}>
112117
{isNsSafe && csvLoaded && !csvLoadError ? (
113118
<Link to={servicePath}>{serviceName}</Link>
@@ -167,7 +172,7 @@ export const ObjectServiceDetailsCard: React.FC<{}> = () => {
167172
isObjectDashboard={true}
168173
/>
169174
</DetailItem>
170-
</DetailsBody>
175+
</DescriptionList>
171176
</CardBody>
172177
</Card>
173178
);

‎packages/ocs/dashboards/persistent-external/details-card.tsx

+9-4
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,15 @@ import {
2121
useFlag,
2222
useK8sWatchResources,
2323
} from '@openshift-console/dynamic-plugin-sdk';
24-
import { DetailsBody } from '@openshift-console/dynamic-plugin-sdk-internal';
2524
import { Base64 } from 'js-base64';
2625
import { useParams } from 'react-router-dom-v5-compat';
27-
import { Card, CardBody, CardHeader, CardTitle } from '@patternfly/react-core';
26+
import {
27+
Card,
28+
CardBody,
29+
CardHeader,
30+
CardTitle,
31+
DescriptionList,
32+
} from '@patternfly/react-core';
2833
import { ODFSystemParams } from '../../types';
2934
import EncryptionPopover from '../common/details-card/encryption-popover';
3035

@@ -89,7 +94,7 @@ export const DetailsCard: React.FC = () => {
8994
<CardTitle>{t('Details')}</CardTitle>
9095
</CardHeader>
9196
<CardBody>
92-
<DetailsBody>
97+
<DescriptionList>
9398
<DetailItem title={t('Service name')}>{serviceName}</DetailItem>
9499
<DetailItem
95100
title={t('Cluster name')}
@@ -129,7 +134,7 @@ export const DetailsCard: React.FC = () => {
129134
>
130135
<EncryptionPopover cluster={ocsCluster} isObjectDashboard={false} />
131136
</DetailItem>
132-
</DetailsBody>
137+
</DescriptionList>
133138
</CardBody>
134139
</Card>
135140
);

‎packages/ocs/dashboards/persistent-internal/details-card.tsx

+9-4
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,14 @@ import {
2323
useK8sWatchResource,
2424
useFlag,
2525
} from '@openshift-console/dynamic-plugin-sdk';
26-
import { DetailsBody } from '@openshift-console/dynamic-plugin-sdk-internal';
2726
import { Link, useParams } from 'react-router-dom-v5-compat';
28-
import { Card, CardBody, CardHeader, CardTitle } from '@patternfly/react-core';
27+
import {
28+
Card,
29+
CardBody,
30+
CardHeader,
31+
CardTitle,
32+
DescriptionList,
33+
} from '@patternfly/react-core';
2934
import { PROVIDER_MODE } from '../../../odf/features';
3035
import { ODFSystemParams } from '../../types';
3136
import EncryptionPopover from '../common/details-card/encryption-popover';
@@ -77,7 +82,7 @@ const DetailsCard: React.FC = () => {
7782
<CardTitle>{t('Details')}</CardTitle>
7883
</CardHeader>
7984
<CardBody>
80-
<DetailsBody>
85+
<DescriptionList>
8186
<DetailItem key="service_name" title={t('Service name')}>
8287
{isNsSafe && csvLoaded && !csvError ? (
8388
<Link data-test="ocs-link" to={servicePath}>
@@ -125,7 +130,7 @@ const DetailsCard: React.FC = () => {
125130
isObjectDashboard={false}
126131
/>
127132
</DetailItem>
128-
</DetailsBody>
133+
</DescriptionList>
129134
</CardBody>
130135
</Card>
131136
);

‎packages/odf/components/bucket-class/wizard-pages/review-page.tsx

+27-21
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@ import {
1919
TextVariants,
2020
Text,
2121
TextContent,
22+
DescriptionList,
23+
DescriptionListDescription,
24+
DescriptionListGroup,
25+
DescriptionListTerm,
2226
} from '@patternfly/react-core';
2327
import { NamespacePolicyType } from '../../../constants';
2428
import { convertTime, getTimeUnitString } from '../../../utils';
@@ -43,13 +47,13 @@ const REVIEW_ICON_MAP = {
4347
* @deprecated
4448
*/
4549
const ReviewListTitle: React.FC<{ text: string }> = ({ text }) => (
46-
<dt>
50+
<DescriptionListTerm>
4751
<TextContent className="ocs-install-wizard__text-content">
4852
<Text component={TextVariants.h3} className="ocs-install-wizard__h3 ">
4953
{text}
5054
</Text>
5155
</TextContent>
52-
</dt>
56+
</DescriptionListTerm>
5357
);
5458

5559
/**
@@ -79,23 +83,25 @@ const ReviewListBody: React.FC<ReviewListBodyProps> = ({
7983
: REVIEW_ICON_MAP[alert?.variant || AlertVariant.success];
8084

8185
return (
82-
<dd className="ocs-install-wizard__dd">
83-
{alert?.variant || !hideIcon ? (
84-
<Split>
85-
<SplitItem>
86-
<Icon className="ocs-install-wizard__icon" />
87-
</SplitItem>
88-
<SplitItem isFilled>
89-
{children}
90-
{alert?.variant ? (
91-
<ValidationMessage validation={validation} />
92-
) : null}
93-
</SplitItem>
94-
</Split>
95-
) : (
96-
children
97-
)}
98-
</dd>
86+
<DescriptionListGroup>
87+
<DescriptionListDescription className="ocs-install-wizard__dd">
88+
{alert?.variant || !hideIcon ? (
89+
<Split>
90+
<SplitItem>
91+
<Icon className="ocs-install-wizard__icon" />
92+
</SplitItem>
93+
<SplitItem isFilled>
94+
{children}
95+
{alert?.variant ? (
96+
<ValidationMessage validation={validation} />
97+
) : null}
98+
</SplitItem>
99+
</Split>
100+
) : (
101+
children
102+
)}
103+
</DescriptionListDescription>
104+
</DescriptionListGroup>
99105
);
100106
};
101107

@@ -208,7 +214,7 @@ const ReviewPage: React.FC<ReviewPageProps> = ({ state }) => {
208214
<Title size="xl" headingLevel="h2">
209215
{t('Review BucketClass')}
210216
</Title>
211-
<dl>
217+
<DescriptionList>
212218
<ReviewListTitle text={t('General')} />
213219
<br />
214220
<div className="nb-create-bc-list--indent">
@@ -234,7 +240,7 @@ const ReviewPage: React.FC<ReviewPageProps> = ({ state }) => {
234240
? getReviewForNamespaceStore()
235241
: getReviewForBackingStore()}
236242
</div>
237-
</dl>
243+
</DescriptionList>
238244
{isLoading && <LoadingInline />}
239245
{!!error && (
240246
<Alert variant="danger" title="Error" isInline>

0 commit comments

Comments
 (0)