Rewrite to context & update the tests

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<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"

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

@@ -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 = {

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

@@ -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', () => {
+        it('does not render update & delete buttons', () => {
-          expect(shallow(setupWrapper({ isReadOnly: true }))).toMatchSnapshot();
+          expect(
+            mount(
+              <StaticRouter>
+                <ReadOnlyContext.Provider value={{ isReadOnly: true }}>
+                  {setupWrapper({ versions })}
+                </ReadOnlyContext.Provider>
+              </StaticRouter>
+            ).exists('.level-right')
+          ).toBeFalsy();
         });
       });
     });

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

@@ -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"

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

@@ -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"

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

@@ -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 {
+const mapStateToProps = (state: RootState) => ({
-  clusterName: ClusterName;
-}
-
-type OwnProps = RouteComponentProps<RouteProps>;
-
-const mapStateToProps = (
-  state: RootState,
-  {
-    match: {
-      params: { clusterName },
-    },
-  }: OwnProps
-) => ({
   schemas: getSchemaList(state),
-  isReadOnly: getClustersReadonlyStatus(clusterName)(state),
 });
 
-export default withRouter(connect(mapStateToProps)(List));
+export default connect(mapStateToProps)(List);

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(
+        <StaticRouter>
+          <ReadOnlyContext.Provider value={{ isReadOnly: true }}>
+            {setupWrapper({ schemas: [] })}
+          </ReadOnlyContext.Provider>
+        </StaticRouter>
+      );
       it('does not render Create Schema button', () => {
         expect(wrapper.exists('NavLink')).toBeFalsy();
       });

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<SchemasProps> = ({
   isFetching,
   fetchSchemasByClusterName,
+  isReadOnly,
 }) => {
   const { clusterName } = useParams<{ clusterName: string }>();
 
@@ -26,23 +29,25 @@ const Schemas: React.FC<SchemasProps> = ({
   }
 
   return (
-    <Switch>
+    <ReadOnlyContext.Provider value={{ isReadOnly }}>
-      <Route
+      <Switch>
-        exact
+        <Route
-        path="/ui/clusters/:clusterName/schemas"
+          exact
-        component={ListContainer}
+          path="/ui/clusters/:clusterName/schemas"
-      />
+          component={ListContainer}
-      <Route
+        />
-        exact
+        <Route
-        path="/ui/clusters/:clusterName/schemas/new"
+          exact
-        component={NewContainer}
+          path="/ui/clusters/:clusterName/schemas/new"
-      />
+          component={NewContainer}
-      <Route
+        />
-        exact
+        <Route
-        path="/ui/clusters/:clusterName/schemas/:subject/latest"
+          exact
-        component={DetailsContainer}
+          path="/ui/clusters/:clusterName/schemas/:subject/latest"
-      />
+          component={DetailsContainer}
-    </Switch>
+        />
+      </Switch>
+    </ReadOnlyContext.Provider>
   );
 };
 

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<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)
+);

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<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)}
           />

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));

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<Props> = ({
+const List: React.FC<Props> = ({ clusterName, topics, externalTopics }) => {
-  clusterName,
-  topics,
-  externalTopics,
-  isReadOnly,
-}) => {
   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)}

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

@@ -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));

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

@@ -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();
     });
   });

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<Props> = ({
   clusterName,
   isFetched,
   fetchTopicsList,
+  isReadOnly,
 }) => {
   React.useEffect(() => {
     fetchTopicsList(clusterName);
@@ -25,27 +28,29 @@ const Topics: React.FC<Props> = ({
 
   if (isFetched) {
     return (
-      <Switch>
+      <ReadOnlyContext.Provider value={{ isReadOnly }}>
-        <Route
+        <Switch>
-          exact
+          <Route
-          path="/ui/clusters/:clusterName/topics"
+            exact
-          component={ListContainer}
+            path="/ui/clusters/:clusterName/topics"
-        />
+            component={ListContainer}
-        <Route
+          />
-          exact
+          <Route
-          path="/ui/clusters/:clusterName/topics/new"
+            exact
-          component={NewContainer}
+            path="/ui/clusters/:clusterName/topics/new"
-        />
+            component={NewContainer}
-        <Route
+          />
-          exact
+          <Route
-          path="/ui/clusters/:clusterName/topics/:topicName/edit"
+            exact
-          component={EditContainer}
+            path="/ui/clusters/:clusterName/topics/:topicName/edit"
-        />
+            component={EditContainer}
-        <Route
+          />
-          path="/ui/clusters/:clusterName/topics/:topicName"
+          <Route
-          component={DetailsContainer}
+            path="/ui/clusters/:clusterName/topics/:topicName"
-        />
+            component={DetailsContainer}
-      </Switch>
+          />
+        </Switch>
+      </ReadOnlyContext.Provider>
     );
   }
 

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 = {

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;