Skip to content

Commit 750ba1e

Browse files
nofaralfasinofaralfasi
committed
Fixes #38903 - rewrite class-based React components as functions with hooks
Convert class-based React components to functional components with hooks for: - Red Hat Repositories page - Subscriptions page
1 parent b798fd8 commit 750ba1e

File tree

6 files changed

+1196
-600
lines changed

6 files changed

+1196
-600
lines changed

‎webpack/components/Content/Details/__tests__/__snapshots__/ContentDetails.test.js.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ exports[`Content Details Info should render and contain appropriate components 1
77
loadingText="Loading"
88
timeout={300}
99
>
10-
<ForwardRef
10+
<Uncontrolled(TabContainer)
1111
defaultActiveKey={1}
1212
id="content-tabs-container"
1313
style={
@@ -137,7 +137,7 @@ exports[`Content Details Info should render and contain appropriate components 1
137137
</TabPane>
138138
</TabContent>
139139
</Grid>
140-
</ForwardRef>
140+
</Uncontrolled(TabContainer)>
141141
</LoadingState>
142142
</div>
143143
`;

‎webpack/scenes/RedHatRepositories/RedHatRepositoriesPage.js‎

Lines changed: 96 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
/* eslint import/no-unresolved: [2, { ignore: [foremanReact/*] }] */
33
/* eslint-disable import/no-unresolved */
44

5-
import React, { Component } from 'react';
5+
import React, { useEffect } from 'react';
66
import PropTypes from 'prop-types';
77
import { isEmpty } from 'lodash';
88
import { Grid, Row, Col } from 'react-bootstrap';
@@ -18,111 +18,112 @@ import { getSetsComponent, getEnabledComponent } from './helpers';
1818
import api from '../../services/api';
1919
import { EXPORT_SYNC } from '../Subscriptions/Manifest/CdnConfigurationTab/CdnConfigurationConstants';
2020

21-
class RedHatRepositoriesPage extends Component {
22-
componentDidMount() {
23-
this.loadData();
24-
}
25-
26-
loadData() {
27-
this.props.loadOrganization();
28-
this.props.loadEnabledRepos();
29-
this.props.loadRepositorySets({ search: { filters: ['rpm'] } });
30-
}
21+
const RedHatRepositoriesPage = ({
22+
loadOrganization,
23+
loadEnabledRepos,
24+
loadRepositorySets,
25+
updateRecommendedRepositorySets,
26+
enabledRepositories,
27+
repositorySets,
28+
organization,
29+
}) => {
30+
useEffect(() => {
31+
loadOrganization();
32+
loadEnabledRepos();
33+
loadRepositorySets({ search: { filters: ['rpm'] } });
34+
}, [loadOrganization, loadEnabledRepos, loadRepositorySets]);
3135

32-
render() {
33-
const { enabledRepositories, repositorySets, organization } = this.props;
34-
const { repoParams } = createEnabledRepoParams(enabledRepositories);
35-
36-
if (!isEmpty(repositorySets.missingPermissions)) {
37-
return <PermissionDenied missingPermissions={repositorySets.missingPermissions} />;
38-
}
39-
if (!isEmpty(enabledRepositories.missingPermissions)) {
40-
return <PermissionDenied missingPermissions={enabledRepositories.missingPermissions} />;
41-
}
42-
if (!(organization?.cdn_configuration)) {
43-
return <Skeleton />;
44-
}
45-
if (organization.cdn_configuration.type === EXPORT_SYNC) {
46-
return (
47-
<Grid id="redhatRepositoriesPage" bsClass="container-fluid">
48-
<h1>{__('Red Hat Repositories')}</h1>
49-
<Row className="toolbar-pf">
50-
<Col>
51-
<Alert
52-
ouiaId="repo-sets-alert"
53-
variant="info"
54-
className="repo-sets-alert"
55-
isInline
56-
title={__('CDN configuration is set to Export Sync (disconnected). Repository enablement/disablement is not permitted on this page.')}
57-
/>
58-
</Col>
59-
</Row>
60-
</Grid>
61-
);
62-
}
36+
const { repoParams } = createEnabledRepoParams(enabledRepositories);
6337

38+
if (!isEmpty(repositorySets.missingPermissions)) {
39+
return <PermissionDenied missingPermissions={repositorySets.missingPermissions} />;
40+
}
41+
if (!isEmpty(enabledRepositories.missingPermissions)) {
42+
return <PermissionDenied missingPermissions={enabledRepositories.missingPermissions} />;
43+
}
44+
if (!(organization?.cdn_configuration)) {
45+
return <Skeleton />;
46+
}
47+
if (organization.cdn_configuration.type === EXPORT_SYNC) {
6448
return (
6549
<Grid id="redhatRepositoriesPage" bsClass="container-fluid">
6650
<h1>{__('Red Hat Repositories')}</h1>
6751
<Row className="toolbar-pf">
68-
<Col sm={12}>
69-
<SearchBar />
70-
</Col>
71-
</Row>
72-
73-
<Row className="row-eq-height">
74-
<Col sm={6} className="available-repositories-container">
75-
<div className="available-repositories-header">
76-
<h2>{__('Available Repositories')}</h2>
77-
<RecommendedRepositorySetsToggler
78-
enabled={repositorySets.recommended}
79-
onChange={value => this.props.updateRecommendedRepositorySets(value)}
80-
className="recommended-repositories-toggler"
81-
/>
82-
</div>
83-
<LoadingState loading={repositorySets.loading} loadingText={__('Loading')}>
84-
{getSetsComponent(
85-
repositorySets,
86-
(pagination) => {
87-
this.props.loadRepositorySets({
88-
...pagination,
89-
search: repositorySets.search,
90-
});
91-
},
92-
)}
93-
</LoadingState>
94-
</Col>
95-
96-
<Col sm={6} className="enabled-repositories-container">
97-
<h2>
98-
{__('Enabled Repositories')}
99-
<FieldLevelHelp content={__('Only repositories not published in a content view can be disabled. Published repositories must be deleted from the repository details page.')} />
100-
<Button
101-
ouiaid="export-csv-button"
102-
className="pull-right"
103-
onClick={() => { api.open('/repositories.csv', repoParams); }}
104-
>
105-
{__('Export as CSV')}
106-
</Button>
107-
</h2>
108-
109-
<LoadingState loading={enabledRepositories.loading} loadingText={__('Loading')}>
110-
{getEnabledComponent(
111-
enabledRepositories,
112-
(pagination) => {
113-
this.props.loadEnabledRepos({
114-
...pagination,
115-
search: enabledRepositories.search,
116-
});
117-
},
118-
)}
119-
</LoadingState>
52+
<Col>
53+
<Alert
54+
ouiaId="repo-sets-alert"
55+
variant="info"
56+
className="repo-sets-alert"
57+
isInline
58+
title={__('CDN configuration is set to Export Sync (disconnected). Repository enablement/disablement is not permitted on this page.')}
59+
/>
12060
</Col>
12161
</Row>
12262
</Grid>
12363
);
12464
}
125-
}
65+
66+
return (
67+
<Grid id="redhatRepositoriesPage" bsClass="container-fluid">
68+
<h1>{__('Red Hat Repositories')}</h1>
69+
<Row className="toolbar-pf">
70+
<Col sm={12}>
71+
<SearchBar />
72+
</Col>
73+
</Row>
74+
75+
<Row className="row-eq-height">
76+
<Col sm={6} className="available-repositories-container">
77+
<div className="available-repositories-header">
78+
<h2>{__('Available Repositories')}</h2>
79+
<RecommendedRepositorySetsToggler
80+
enabled={repositorySets.recommended}
81+
onChange={value => updateRecommendedRepositorySets(value)}
82+
className="recommended-repositories-toggler"
83+
/>
84+
</div>
85+
<LoadingState loading={repositorySets.loading} loadingText={__('Loading')}>
86+
{getSetsComponent(
87+
repositorySets,
88+
(pagination) => {
89+
loadRepositorySets({
90+
...pagination,
91+
search: repositorySets.search,
92+
});
93+
},
94+
)}
95+
</LoadingState>
96+
</Col>
97+
98+
<Col sm={6} className="enabled-repositories-container">
99+
<h2>
100+
{__('Enabled Repositories')}
101+
<FieldLevelHelp content={__('Only repositories not published in a content view can be disabled. Published repositories must be deleted from the repository details page.')} />
102+
<Button
103+
ouiaid="export-csv-button"
104+
className="pull-right"
105+
onClick={() => { api.open('/repositories.csv', repoParams); }}
106+
>
107+
{__('Export as CSV')}
108+
</Button>
109+
</h2>
110+
111+
<LoadingState loading={enabledRepositories.loading} loadingText={__('Loading')}>
112+
{getEnabledComponent(
113+
enabledRepositories,
114+
(pagination) => {
115+
loadEnabledRepos({
116+
...pagination,
117+
search: enabledRepositories.search,
118+
});
119+
},
120+
)}
121+
</LoadingState>
122+
</Col>
123+
</Row>
124+
</Grid>
125+
);
126+
};
126127

127128
RedHatRepositoriesPage.propTypes = {
128129
loadOrganization: PropTypes.func.isRequired,

‎webpack/scenes/Subscriptions/Details/__tests__/__snapshots__/SubscriptionDetails.test.js.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ exports[`subscriptions details page should render and contain appropiate compone
2727
}
2828
}
2929
/>
30-
<ForwardRef
30+
<Uncontrolled(TabContainer)
3131
defaultActiveKey={1}
3232
id="subscription-tabs-container"
3333
>
@@ -531,6 +531,6 @@ exports[`subscriptions details page should render and contain appropiate compone
531531
</Grid>
532532
</LoadingState>
533533
</div>
534-
</ForwardRef>
534+
</Uncontrolled(TabContainer)>
535535
</div>
536536
`;

0 commit comments

Comments
 (0)