0ct0pu5/kafka-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Rewrite to context & update the tests

Browse source
This commit is contained in:
GneyHabub 2021-03-10 15:26:27 +03:00
parent b9f6390b10
commit 0c3687d013
17 changed files with 125 additions and 177 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
kafka-ui-react-app/src/components/Schemas/Details/Details.tsx
View file

@ -6,13 +6,13 @@ import Breadcrumb from '../../common/Breadcrumb/Breadcrumb';
import SchemaVersion from './SchemaVersion';
import LatestVersionItem from './LatestVersionItem';
import PageLoader from '../../common/PageLoader/PageLoader';
import _ReadOnlyContext from '../../contexts/ReadOnlyContext';
export interface DetailsProps {
schema: SchemaSubject;
clusterName: ClusterName;
versions: SchemaSubject[];
isFetched: boolean;
isReadOnly?: boolean | undefined;
fetchSchemaVersions: (
clusterName: ClusterName,
schemaName: SchemaName
@ -25,8 +25,8 @@ const Details: React.FC<DetailsProps> = ({
fetchSchemaVersions,
versions,
isFetched,
isReadOnly,
}) => {
const ReadOnlyContext = React.useContext(_ReadOnlyContext);
React.useEffect(() => {
fetchSchemaVersions(clusterName, schema.subject as SchemaName);
}, [fetchSchemaVersions, clusterName]);
@ -56,7 +56,7 @@ const Details: React.FC<DetailsProps> = ({
</div>
</div>
</div>
{!isReadOnly && (
{!ReadOnlyContext.isReadOnly && (
<div className="level-right">
<button
className="button is-warning is-small level-item"

2
kafka-ui-react-app/src/components/Schemas/Details/DetailsContainer.ts
View file

@ -6,7 +6,6 @@ import {
getSchema,
getSortedSchemaVersions,
} from 'redux/reducers/schemas/selectors';
import { getClustersReadonlyStatus } from 'redux/reducers/clusters/selectors';
import { fetchSchemaVersions } from 'redux/actions';
import Details from './Details';
@ -29,7 +28,6 @@ const mapStateToProps = (
versions: getSortedSchemaVersions(state),
isFetched: getIsSchemaVersionFetched(state),
clusterName,
isReadOnly: getClustersReadonlyStatus(clusterName)(state),
});
const mapDispatchToProps = {

16
kafka-ui-react-app/src/components/Schemas/Details/__test__/Details.spec.tsx
View file

@ -1,10 +1,12 @@
import React from 'react';
import { Provider } from 'react-redux';
import { shallow } from 'enzyme';
import { shallow, mount } from 'enzyme';
import configureStore from 'redux/store/configureStore';
import { StaticRouter } from 'react-router';
import DetailsContainer from '../DetailsContainer';
import Details, { DetailsProps } from '../Details';
import { schema, versions } from './fixtures';
import ReadOnlyContext from '../../../contexts/ReadOnlyContext';
describe('Details', () => {
describe('Container', () => {
@ -103,8 +105,16 @@ describe('Details', () => {
});
describe('when the readonly flag is set', () => {
it('mathces the snapshot', () => {
expect(shallow(setupWrapper({ isReadOnly: true }))).toMatchSnapshot();
it('does not render update & delete buttons', () => {
expect(
mount(
<StaticRouter>
<ReadOnlyContext.Provider value={{ isReadOnly: true }}>
{setupWrapper({ versions })}
</ReadOnlyContext.Provider>
</StaticRouter>
).exists('.level-right')
).toBeFalsy();
});
});
});

86
kafka-ui-react-app/src/components/Schemas/Details/__test__/__snapshots__/Details.spec.tsx.snap
View file

@ -322,92 +322,6 @@ exports[`Details View when page with schema versions loaded when schema has vers
</div>
`;
exports[`Details View when page with schema versions loaded when the readonly flag is set mathces the snapshot 1`] = `
<div
className="section"
>
<div
className="level"
>
<Breadcrumb
links={
Array [
Object {
"href": "/ui/clusters/Test cluster/schemas",
"label": "Schema Registry",
},
]
}
>
test
</Breadcrumb>
</div>
<div
className="box"
>
<div
className="level"
>
<div
className="level-left"
>
<div
className="level-item"
>
<div
className="mr-1"
>
<b>
Latest Version
</b>
</div>
<div
className="tag is-info is-light"
title="Version"
>
#
1
</div>
</div>
</div>
</div>
<LatestVersionItem
schema={
Object {
"compatibilityLevel": "BACKWARD",
"id": 1,
"schema": "{\\"type\\":\\"record\\",\\"name\\":\\"MyRecord1\\",\\"namespace\\":\\"com.mycompany\\",\\"fields\\":[{\\"name\\":\\"id\\",\\"type\\":\\"long\\"}]}",
"subject": "test",
"version": "1",
}
}
/>
</div>
<div
className="box"
>
<table
className="table is-striped is-fullwidth"
>
<thead>
<tr>
<th>
Version
</th>
<th>
ID
</th>
<th>
Schema
</th>
</tr>
</thead>
<tbody />
</table>
</div>
</div>
`;
exports[`Details View when page with schema versions loaded when versions are empty matches snapshot 1`] = `
<div
className="section"

7
kafka-ui-react-app/src/components/Schemas/List/List.tsx
View file

@ -4,13 +4,14 @@ import { NavLink, useParams } from 'react-router-dom';
import { clusterSchemaNewPath } from 'lib/paths';
import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
import ListItem from './ListItem';
import _ReadOnlyContext from '../../contexts/ReadOnlyContext';
export interface ListProps {
schemas: SchemaSubject[];
isReadOnly?: boolean | undefined;
}
const List: React.FC<ListProps> = ({ schemas, isReadOnly }) => {
const List: React.FC<ListProps> = ({ schemas }) => {
const ReadOnlyContext = React.useContext(_ReadOnlyContext);
const { clusterName } = useParams<{ clusterName: string }>();
return (
@ -18,7 +19,7 @@ const List: React.FC<ListProps> = ({ schemas, isReadOnly }) => {
<Breadcrumb>Schema Registry</Breadcrumb>
<div className="box">
<div className="level">
{!isReadOnly && (
{!ReadOnlyContext.isReadOnly && (
<div className="level-item level-right">
<NavLink
className="button is-primary"

22
kafka-ui-react-app/src/components/Schemas/List/ListContainer.tsx
View file

@ -1,26 +1,10 @@
import { connect } from 'react-redux';
import { RootState, ClusterName } from 'redux/interfaces';
import { RootState } from 'redux/interfaces';
import { getSchemaList } from 'redux/reducers/schemas/selectors';
import { getClustersReadonlyStatus } from 'redux/reducers/clusters/selectors';
import { RouteComponentProps, withRouter } from 'react-router-dom';
import List from './List';
interface RouteProps {
clusterName: ClusterName;
}
type OwnProps = RouteComponentProps<RouteProps>;
const mapStateToProps = (
state: RootState,
{
match: {
params: { clusterName },
},
}: OwnProps
) => ({
const mapStateToProps = (state: RootState) => ({
schemas: getSchemaList(state),
isReadOnly: getClustersReadonlyStatus(clusterName)(state),
});
export default withRouter(connect(mapStateToProps)(List));
export default connect(mapStateToProps)(List);

9
kafka-ui-react-app/src/components/Schemas/List/__test__/List.spec.tsx
View file

@ -3,6 +3,7 @@ import { mount, shallow } from 'enzyme';
import { Provider } from 'react-redux';
import { StaticRouter } from 'react-router';
import configureStore from 'redux/store/configureStore';
import ReadOnlyContext from 'components/contexts/ReadOnlyContext';
import ListContainer from '../ListContainer';
import List, { ListProps } from '../List';
import { schemas } from './fixtures';
@ -51,7 +52,13 @@ describe('List', () => {
});
describe('with readonly cluster', () => {
const wrapper = shallow(setupWrapper({ schemas, isReadOnly: true }));
const wrapper = mount(
<StaticRouter>
<ReadOnlyContext.Provider value={{ isReadOnly: true }}>
{setupWrapper({ schemas: [] })}
</ReadOnlyContext.Provider>
</StaticRouter>
);
it('does not render Create Schema button', () => {
expect(wrapper.exists('NavLink')).toBeFalsy();
});

39
kafka-ui-react-app/src/components/Schemas/Schemas.tsx
View file

@ -5,15 +5,18 @@ import PageLoader from 'components/common/PageLoader/PageLoader';
import ListContainer from './List/ListContainer';
import DetailsContainer from './Details/DetailsContainer';
import NewContainer from './New/NewContainer';
import ReadOnlyContext from '../contexts/ReadOnlyContext';
export interface SchemasProps {
isFetching: boolean;
fetchSchemasByClusterName: (clusterName: ClusterName) => void;
isReadOnly?: boolean | undefined;
}
const Schemas: React.FC<SchemasProps> = ({
isFetching,
fetchSchemasByClusterName,
isReadOnly,
}) => {
const { clusterName } = useParams<{ clusterName: string }>();
@ -26,23 +29,25 @@ const Schemas: React.FC<SchemasProps> = ({
}
return (
<Switch>
<Route
exact
path="/ui/clusters/:clusterName/schemas"
component={ListContainer}
/>
<Route
exact
path="/ui/clusters/:clusterName/schemas/new"
component={NewContainer}
/>
<Route
exact
path="/ui/clusters/:clusterName/schemas/:subject/latest"
component={DetailsContainer}
/>
</Switch>
<ReadOnlyContext.Provider value={{ isReadOnly }}>
<Switch>
<Route
exact
path="/ui/clusters/:clusterName/schemas"
component={ListContainer}
/>
<Route
exact
path="/ui/clusters/:clusterName/schemas/new"
component={NewContainer}
/>
<Route
exact
path="/ui/clusters/:clusterName/schemas/:subject/latest"
component={DetailsContainer}
/>
</Switch>
</ReadOnlyContext.Provider>
);
};

24
kafka-ui-react-app/src/components/Schemas/SchemasContainer.tsx
View file

@ -1,15 +1,33 @@
import { connect } from 'react-redux';
import { RootState } from 'redux/interfaces';
import { RootState, ClusterName } from 'redux/interfaces';
import { fetchSchemasByClusterName } from 'redux/actions';
import { getIsSchemaListFetching } from 'redux/reducers/schemas/selectors';
import { getClustersReadonlyStatus } from 'redux/reducers/clusters/selectors';
import { RouteComponentProps, withRouter } from 'react-router-dom';
import Schemas from './Schemas';
const mapStateToProps = (state: RootState) => ({
interface RouteProps {
clusterName: ClusterName;
}
type OwnProps = RouteComponentProps<RouteProps>;
const mapStateToProps = (
state: RootState,
{
match: {
params: { clusterName },
},
}: OwnProps
) => ({
isFetching: getIsSchemaListFetching(state),
isReadOnly: getClustersReadonlyStatus(clusterName)(state),
});
const mapDispatchToProps = {
fetchSchemasByClusterName,
};
export default connect(mapStateToProps, mapDispatchToProps)(Schemas);
export default withRouter(
connect(mapStateToProps, mapDispatchToProps)(Schemas)
);

7
kafka-ui-react-app/src/components/Topics/Details/Details.tsx
View file

@ -14,14 +14,15 @@ import OverviewContainer from './Overview/OverviewContainer';
import MessagesContainer from './Messages/MessagesContainer';
import SettingsContainer from './Settings/SettingsContainer';
import SettingsEditButton from './Settings/SettingsEditButton';
import _ReadOnlyContext from '../../contexts/ReadOnlyContext';
interface Props extends Topic, TopicDetails {
clusterName: ClusterName;
topicName: TopicName;
isReadOnly: boolean | undefined;
}
const Details: React.FC<Props> = ({ clusterName, topicName, isReadOnly }) => {
const Details: React.FC<Props> = ({ clusterName, topicName }) => {
const ReadOnlyContext = React.useContext(_ReadOnlyContext);
return (
<div className="section">
<div className="level">
@ -34,7 +35,7 @@ const Details: React.FC<Props> = ({ clusterName, topicName, isReadOnly }) => {
{topicName}
</Breadcrumb>
</div>
{!isReadOnly && (
{!ReadOnlyContext.isReadOnly && (
<SettingsEditButton
to={clusterTopicsTopicEditPath(clusterName, topicName)}
/>

2
kafka-ui-react-app/src/components/Topics/Details/DetailsContainer.ts
View file

@ -1,6 +1,5 @@
import { connect } from 'react-redux';
import { ClusterName, RootState, TopicName } from 'redux/interfaces';
import { getClustersReadonlyStatus } from 'redux/reducers/clusters/selectors';
import { withRouter, RouteComponentProps } from 'react-router-dom';
import Details from './Details';
@ -21,7 +20,6 @@ const mapStateToProps = (
) => ({
clusterName,
topicName,
isReadOnly: getClustersReadonlyStatus(clusterName)(state),
});
export default withRouter(connect(mapStateToProps)(Details));

13
kafka-ui-react-app/src/components/Topics/List/List.tsx
View file

@ -4,24 +4,19 @@ import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
import { NavLink } from 'react-router-dom';
import { clusterTopicNewPath } from 'lib/paths';
import ListItem from './ListItem';
import _ReadOnlyContext from '../../contexts/ReadOnlyContext';
interface Props {
clusterName: ClusterName;
topics: TopicWithDetailedInfo[];
externalTopics: TopicWithDetailedInfo[];
isReadOnly?: boolean | undefined;
}
const List: React.FC<Props> = ({
clusterName,
topics,
externalTopics,
isReadOnly,
}) => {
const List: React.FC<Props> = ({ clusterName, topics, externalTopics }) => {
const [showInternal, setShowInternal] = React.useState<boolean>(true);
const handleSwitch = () => setShowInternal(!showInternal);
const ReadOnlyContext = React.useContext(_ReadOnlyContext);
const items = showInternal ? topics : externalTopics;
return (
@ -44,7 +39,7 @@ const List: React.FC<Props> = ({
</div>
</div>
<div className="level-item level-right">
{!isReadOnly && (
{!ReadOnlyContext.isReadOnly && (
<NavLink
className="button is-primary"
to={clusterTopicNewPath(clusterName)}

2
kafka-ui-react-app/src/components/Topics/List/ListContainer.ts
View file

@ -4,7 +4,6 @@ import {
getTopicList,
getExternalTopicList,
} from 'redux/reducers/topics/selectors';
import { getClustersReadonlyStatus } from 'redux/reducers/clusters/selectors';
import { withRouter, RouteComponentProps } from 'react-router-dom';
import List from './List';
@ -25,7 +24,6 @@ const mapStateToProps = (
clusterName,
topics: getTopicList(state),
externalTopics: getExternalTopicList(state),
isReadOnly: getClustersReadonlyStatus(clusterName)(state),
});
export default withRouter(connect(mapStateToProps)(List));

10
kafka-ui-react-app/src/components/Topics/List/__tests__/List.spec.tsx
View file

@ -1,6 +1,7 @@
import { shallow } from 'enzyme';
import { mount } from 'enzyme';
import React from 'react';
import List from '../List';
import ReadOnlyContext from '../../../contexts/ReadOnlyContext';
describe('List', () => {
describe('when it has readonly flag', () => {
@ -9,9 +10,12 @@ describe('List', () => {
clusterName: 'Cluster',
topics: [],
externalTopics: [],
isReadOnly: true,
};
const component = shallow(<List {...props} />);
const component = mount(
<ReadOnlyContext.Provider value={{ isReadOnly: true }}>
<List {...props} />
</ReadOnlyContext.Provider>
);
expect(component.exists('NavLink')).toBeFalsy();
});
});

47
kafka-ui-react-app/src/components/Topics/Topics.tsx
View file

@ -6,18 +6,21 @@ import EditContainer from 'components/Topics/Edit/EditContainer';
import ListContainer from './List/ListContainer';
import DetailsContainer from './Details/DetailsContainer';
import NewContainer from './New/NewContainer';
import ReadOnlyContext from '../contexts/ReadOnlyContext';
interface Props {
clusterName: ClusterName;
isFetched: boolean;
fetchBrokers: (clusterName: ClusterName) => void;
fetchTopicsList: (clusterName: ClusterName) => void;
isReadOnly?: boolean | undefined;
}
const Topics: React.FC<Props> = ({
clusterName,
isFetched,
fetchTopicsList,
isReadOnly,
}) => {
React.useEffect(() => {
fetchTopicsList(clusterName);
@ -25,27 +28,29 @@ const Topics: React.FC<Props> = ({
if (isFetched) {
return (
<Switch>
<Route
exact
path="/ui/clusters/:clusterName/topics"
component={ListContainer}
/>
<Route
exact
path="/ui/clusters/:clusterName/topics/new"
component={NewContainer}
/>
<Route
exact
path="/ui/clusters/:clusterName/topics/:topicName/edit"
component={EditContainer}
/>
<Route
path="/ui/clusters/:clusterName/topics/:topicName"
component={DetailsContainer}
/>
</Switch>
<ReadOnlyContext.Provider value={{ isReadOnly }}>
<Switch>
<Route
exact
path="/ui/clusters/:clusterName/topics"
component={ListContainer}
/>
<Route
exact
path="/ui/clusters/:clusterName/topics/new"
component={NewContainer}
/>
<Route
exact
path="/ui/clusters/:clusterName/topics/:topicName/edit"
component={EditContainer}
/>
<Route
path="/ui/clusters/:clusterName/topics/:topicName"
component={DetailsContainer}
/>
</Switch>
</ReadOnlyContext.Provider>
);
}

2
kafka-ui-react-app/src/components/Topics/TopicsContainer.ts
View file

@ -3,6 +3,7 @@ import { fetchTopicsList } from 'redux/actions';
import { getIsTopicListFetched } from 'redux/reducers/topics/selectors';
import { RootState, ClusterName } from 'redux/interfaces';
import { RouteComponentProps } from 'react-router-dom';
import { getClustersReadonlyStatus } from 'redux/reducers/clusters/selectors';
import Topics from './Topics';
interface RouteProps {
@ -21,6 +22,7 @@ const mapStateToProps = (
) => ({
isFetched: getIsTopicListFetched(state),
clusterName,
isReadOnly: getClustersReadonlyStatus(clusterName)(state),
});
const mapDispatchToProps = {

8
kafka-ui-react-app/src/components/contexts/ReadOnlyContext.ts Normal file
View file

@ -0,0 +1,8 @@
import React from 'react';
const initialValue: { isReadOnly: boolean | undefined } = {
isReadOnly: undefined,
};
const ReadOnlyContext = React.createContext(initialValue);
export default ReadOnlyContext;