From 0c3687d013d0acf0ce44700690ff1c8fcaa6aad2 Mon Sep 17 00:00:00 2001 From: GneyHabub Date: Wed, 10 Mar 2021 15:26:27 +0300 Subject: [PATCH] Rewrite to context & update the tests --- .../components/Schemas/Details/Details.tsx | 6 +- .../Schemas/Details/DetailsContainer.ts | 2 - .../Schemas/Details/__test__/Details.spec.tsx | 16 +++- .../__snapshots__/Details.spec.tsx.snap | 86 ------------------- .../src/components/Schemas/List/List.tsx | 7 +- .../components/Schemas/List/ListContainer.tsx | 22 +---- .../Schemas/List/__test__/List.spec.tsx | 9 +- .../src/components/Schemas/Schemas.tsx | 39 +++++---- .../components/Schemas/SchemasContainer.tsx | 24 +++++- .../src/components/Topics/Details/Details.tsx | 7 +- .../Topics/Details/DetailsContainer.ts | 2 - .../src/components/Topics/List/List.tsx | 13 +-- .../components/Topics/List/ListContainer.ts | 2 - .../Topics/List/__tests__/List.spec.tsx | 10 ++- .../src/components/Topics/Topics.tsx | 47 +++++----- .../src/components/Topics/TopicsContainer.ts | 2 + .../components/contexts/ReadOnlyContext.ts | 8 ++ 17 files changed, 125 insertions(+), 177 deletions(-) create mode 100644 kafka-ui-react-app/src/components/contexts/ReadOnlyContext.ts diff --git a/kafka-ui-react-app/src/components/Schemas/Details/Details.tsx b/kafka-ui-react-app/src/components/Schemas/Details/Details.tsx index 8465538ea6..a3c5b2e12b 100644 --- a/kafka-ui-react-app/src/components/Schemas/Details/Details.tsx +++ b/kafka-ui-react-app/src/components/Schemas/Details/Details.tsx @@ -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 = ({ 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 = ({ - {!isReadOnly && ( + {!ReadOnlyContext.isReadOnly && (
`; -exports[`Details View when page with schema versions loaded when the readonly flag is set mathces the snapshot 1`] = ` -
-
- - test - -
-
-
-
-
-
- - Latest Version - -
-
- # - 1 -
-
-
-
- -
-
- - - - - - - - - -
- Version - - ID - - Schema -
-
-
-`; - exports[`Details View when page with schema versions loaded when versions are empty matches snapshot 1`] = `
= ({ schemas, isReadOnly }) => { +const List: React.FC = ({ schemas }) => { + const ReadOnlyContext = React.useContext(_ReadOnlyContext); const { clusterName } = useParams<{ clusterName: string }>(); return ( @@ -18,7 +19,7 @@ const List: React.FC = ({ schemas, isReadOnly }) => { Schema Registry
- {!isReadOnly && ( + {!ReadOnlyContext.isReadOnly && (
; - -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); diff --git a/kafka-ui-react-app/src/components/Schemas/List/__test__/List.spec.tsx b/kafka-ui-react-app/src/components/Schemas/List/__test__/List.spec.tsx index 60dc656c87..dda68b1ee7 100644 --- a/kafka-ui-react-app/src/components/Schemas/List/__test__/List.spec.tsx +++ b/kafka-ui-react-app/src/components/Schemas/List/__test__/List.spec.tsx @@ -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( + + + {setupWrapper({ schemas: [] })} + + + ); it('does not render Create Schema button', () => { expect(wrapper.exists('NavLink')).toBeFalsy(); }); diff --git a/kafka-ui-react-app/src/components/Schemas/Schemas.tsx b/kafka-ui-react-app/src/components/Schemas/Schemas.tsx index 030aa71229..8184354ea6 100644 --- a/kafka-ui-react-app/src/components/Schemas/Schemas.tsx +++ b/kafka-ui-react-app/src/components/Schemas/Schemas.tsx @@ -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 = ({ isFetching, fetchSchemasByClusterName, + isReadOnly, }) => { const { clusterName } = useParams<{ clusterName: string }>(); @@ -26,23 +29,25 @@ const Schemas: React.FC = ({ } return ( - - - - - + + + + + + + ); }; diff --git a/kafka-ui-react-app/src/components/Schemas/SchemasContainer.tsx b/kafka-ui-react-app/src/components/Schemas/SchemasContainer.tsx index a70e9d902c..31249f87b4 100644 --- a/kafka-ui-react-app/src/components/Schemas/SchemasContainer.tsx +++ b/kafka-ui-react-app/src/components/Schemas/SchemasContainer.tsx @@ -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; + +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) +); diff --git a/kafka-ui-react-app/src/components/Topics/Details/Details.tsx b/kafka-ui-react-app/src/components/Topics/Details/Details.tsx index eebc0ea5d8..16b7c735c3 100644 --- a/kafka-ui-react-app/src/components/Topics/Details/Details.tsx +++ b/kafka-ui-react-app/src/components/Topics/Details/Details.tsx @@ -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 = ({ clusterName, topicName, isReadOnly }) => { +const Details: React.FC = ({ clusterName, topicName }) => { + const ReadOnlyContext = React.useContext(_ReadOnlyContext); return (
@@ -34,7 +35,7 @@ const Details: React.FC = ({ clusterName, topicName, isReadOnly }) => { {topicName}
- {!isReadOnly && ( + {!ReadOnlyContext.isReadOnly && ( diff --git a/kafka-ui-react-app/src/components/Topics/Details/DetailsContainer.ts b/kafka-ui-react-app/src/components/Topics/Details/DetailsContainer.ts index 9050876278..f62a34f987 100644 --- a/kafka-ui-react-app/src/components/Topics/Details/DetailsContainer.ts +++ b/kafka-ui-react-app/src/components/Topics/Details/DetailsContainer.ts @@ -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)); diff --git a/kafka-ui-react-app/src/components/Topics/List/List.tsx b/kafka-ui-react-app/src/components/Topics/List/List.tsx index 62ef92ef95..677346c1a9 100644 --- a/kafka-ui-react-app/src/components/Topics/List/List.tsx +++ b/kafka-ui-react-app/src/components/Topics/List/List.tsx @@ -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 = ({ - clusterName, - topics, - externalTopics, - isReadOnly, -}) => { +const List: React.FC = ({ clusterName, topics, externalTopics }) => { const [showInternal, setShowInternal] = React.useState(true); const handleSwitch = () => setShowInternal(!showInternal); - + const ReadOnlyContext = React.useContext(_ReadOnlyContext); const items = showInternal ? topics : externalTopics; return ( @@ -44,7 +39,7 @@ const List: React.FC = ({
- {!isReadOnly && ( + {!ReadOnlyContext.isReadOnly && ( { describe('when it has readonly flag', () => { @@ -9,9 +10,12 @@ describe('List', () => { clusterName: 'Cluster', topics: [], externalTopics: [], - isReadOnly: true, }; - const component = shallow(); + const component = mount( + + + + ); expect(component.exists('NavLink')).toBeFalsy(); }); }); diff --git a/kafka-ui-react-app/src/components/Topics/Topics.tsx b/kafka-ui-react-app/src/components/Topics/Topics.tsx index 5317ec1abf..79ff811fd4 100644 --- a/kafka-ui-react-app/src/components/Topics/Topics.tsx +++ b/kafka-ui-react-app/src/components/Topics/Topics.tsx @@ -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 = ({ clusterName, isFetched, fetchTopicsList, + isReadOnly, }) => { React.useEffect(() => { fetchTopicsList(clusterName); @@ -25,27 +28,29 @@ const Topics: React.FC = ({ if (isFetched) { return ( - - - - - - + + + + + + + + ); } diff --git a/kafka-ui-react-app/src/components/Topics/TopicsContainer.ts b/kafka-ui-react-app/src/components/Topics/TopicsContainer.ts index 75714dd5e9..e540b4efdc 100644 --- a/kafka-ui-react-app/src/components/Topics/TopicsContainer.ts +++ b/kafka-ui-react-app/src/components/Topics/TopicsContainer.ts @@ -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 = { diff --git a/kafka-ui-react-app/src/components/contexts/ReadOnlyContext.ts b/kafka-ui-react-app/src/components/contexts/ReadOnlyContext.ts new file mode 100644 index 0000000000..1326977815 --- /dev/null +++ b/kafka-ui-react-app/src/components/contexts/ReadOnlyContext.ts @@ -0,0 +1,8 @@ +import React from 'react'; + +const initialValue: { isReadOnly: boolean | undefined } = { + isReadOnly: undefined, +}; +const ReadOnlyContext = React.createContext(initialValue); + +export default ReadOnlyContext;