webpack/scenes/RedHatRepositories/RedHatRepositoriesPage.js
/* eslint-disable import/no-extraneous-dependencies */
/* eslint import/no-unresolved: [2, { ignore: [foremanReact/*] }] */
/* eslint-disable import/no-unresolved */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { isEmpty } from 'lodash';
import { Grid, Row, Col } from 'react-bootstrap';
import { Skeleton, Alert } from '@patternfly/react-core';
import { Button, FieldLevelHelp } from 'patternfly-react';
import { translate as __ } from 'foremanReact/common/I18n';
import PermissionDenied from 'foremanReact/components/PermissionDenied';
import { LoadingState } from '../../components/LoadingState';
import { createEnabledRepoParams } from '../../redux/actions/RedHatRepositories/enabled';
import SearchBar from './components/SearchBar';
import RecommendedRepositorySetsToggler from './components/RecommendedRepositorySetsToggler';
import { getSetsComponent, getEnabledComponent } from './helpers';
import api from '../../services/api';
import { EXPORT_SYNC } from '../Subscriptions/Manifest/CdnConfigurationTab/CdnConfigurationConstants';
class RedHatRepositoriesPage extends Component {
componentDidMount() {
this.loadData();
}
loadData() {
this.props.loadOrganization();
this.props.loadEnabledRepos();
this.props.loadRepositorySets({ search: { filters: ['rpm'] } });
}
render() {
const { enabledRepositories, repositorySets, organization } = this.props;
const { repoParams } = createEnabledRepoParams(enabledRepositories);
if (!isEmpty(repositorySets.missingPermissions)) {
return <PermissionDenied missingPermissions={repositorySets.missingPermissions} />;
}
if (!isEmpty(enabledRepositories.missingPermissions)) {
return <PermissionDenied missingPermissions={enabledRepositories.missingPermissions} />;
}
if (!(organization?.cdn_configuration)) {
return <Skeleton />;
}
if (organization.cdn_configuration.type === EXPORT_SYNC) {
return (
<Grid id="redhatRepositoriesPage" bsClass="container-fluid">
<h1>{__('Red Hat Repositories')}</h1>
<Row className="toolbar-pf">
<Col>
<Alert
ouiaId="repo-sets-alert"
variant="info"
className="repo-sets-alert"
isInline
title={__('CDN configuration is set to Export Sync (disconnected). Repository enablement/disablement is not permitted on this page.')}
/>
</Col>
</Row>
</Grid>
);
}
return (
<Grid id="redhatRepositoriesPage" bsClass="container-fluid">
<h1>{__('Red Hat Repositories')}</h1>
<Row className="toolbar-pf">
<Col sm={12}>
<SearchBar />
</Col>
</Row>
<Row className="row-eq-height">
<Col sm={6} className="available-repositories-container">
<div className="available-repositories-header">
<h2>{__('Available Repositories')}</h2>
<RecommendedRepositorySetsToggler
enabled={repositorySets.recommended}
onChange={value => this.props.updateRecommendedRepositorySets(value)}
className="recommended-repositories-toggler"
/>
</div>
<LoadingState loading={repositorySets.loading} loadingText={__('Loading')}>
{getSetsComponent(
repositorySets,
(pagination) => {
this.props.loadRepositorySets({
...pagination,
search: repositorySets.search,
});
},
)}
</LoadingState>
</Col>
<Col sm={6} className="enabled-repositories-container">
<h2>
{__('Enabled Repositories')}
<FieldLevelHelp content={__('Only repositories not published in a content view can be disabled. Published repositories must be deleted from the repository details page.')} />
<Button
ouiaId="export-csv-button"
className="pull-right"
onClick={() => { api.open('/repositories.csv', repoParams); }}
>
{__('Export as CSV')}
</Button>
</h2>
<LoadingState loading={enabledRepositories.loading} loadingText={__('Loading')}>
{getEnabledComponent(
enabledRepositories,
(pagination) => {
this.props.loadEnabledRepos({
...pagination,
search: enabledRepositories.search,
});
},
)}
</LoadingState>
</Col>
</Row>
</Grid>
);
}
}
RedHatRepositoriesPage.propTypes = {
loadOrganization: PropTypes.func.isRequired,
loadEnabledRepos: PropTypes.func.isRequired,
loadRepositorySets: PropTypes.func.isRequired,
updateRecommendedRepositorySets: PropTypes.func.isRequired,
enabledRepositories: PropTypes.shape({
loading: PropTypes.bool,
search: PropTypes.shape({}),
missingPermissions: PropTypes.arrayOf(PropTypes.string),
}).isRequired,
repositorySets: PropTypes.shape({
recommended: PropTypes.bool,
loading: PropTypes.bool,
search: PropTypes.shape({}),
// Disabling rule as existing code failed due to an eslint-plugin-react update
// eslint-disable-next-line react/forbid-prop-types
missingPermissions: PropTypes.array,
}).isRequired,
organization: PropTypes.shape({
cdn_configuration: PropTypes.shape({
type: PropTypes.string,
}),
}).isRequired,
};
export default RedHatRepositoriesPage;