Rename & rearrange

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

@@ -2,11 +2,11 @@ import React from 'react';
 import { SchemaSubject } from 'generated-sources';
 import { ClusterName, SchemaName } from 'redux/interfaces';
 import { clusterSchemasPath } from 'lib/paths';
+import ClusterContext from 'components/contexts/ClusterContext';
 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;
@@ -26,7 +26,7 @@ const Details: React.FC<DetailsProps> = ({
   versions,
   isFetched,
 }) => {
-  const ReadOnlyContext = React.useContext(_ReadOnlyContext);
+  const { isReadOnly } = React.useContext(ClusterContext);
   React.useEffect(() => {
     fetchSchemaVersions(clusterName, schema.subject as SchemaName);
   }, [fetchSchemaVersions, clusterName]);
@@ -56,7 +56,7 @@ const Details: React.FC<DetailsProps> = ({
               </div>
             </div>
           </div>
-          {!ReadOnlyContext.isReadOnly && (
+          {!isReadOnly && (
             <div className="level-right">
               <button
                 className="button is-warning is-small level-item"

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

@@ -3,10 +3,10 @@ import { Provider } from 'react-redux';
 import { shallow, mount } from 'enzyme';
 import configureStore from 'redux/store/configureStore';
 import { StaticRouter } from 'react-router';
+import ClusterContext from 'components/contexts/ClusterContext';
 import DetailsContainer from '../DetailsContainer';
 import Details, { DetailsProps } from '../Details';
 import { schema, versions } from './fixtures';
-import ReadOnlyContext from '../../../contexts/ReadOnlyContext';
 
 describe('Details', () => {
   describe('Container', () => {
@@ -109,9 +109,9 @@ describe('Details', () => {
           expect(
             mount(
               <StaticRouter>
-                <ReadOnlyContext.Provider value={{ isReadOnly: true }}>
+                <ClusterContext.Provider value={{ isReadOnly: true }}>
                   {setupWrapper({ versions })}
-                </ReadOnlyContext.Provider>
+                </ClusterContext.Provider>
               </StaticRouter>
             ).exists('.level-right')
           ).toBeFalsy();

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

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

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

@@ -3,7 +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 ClusterContext from 'components/contexts/ClusterContext';
 import ListContainer from '../ListContainer';
 import List, { ListProps } from '../List';
 import { schemas } from './fixtures';
@@ -54,9 +54,9 @@ describe('List', () => {
     describe('with readonly cluster', () => {
       const wrapper = mount(
         <StaticRouter>
-          <ReadOnlyContext.Provider value={{ isReadOnly: true }}>
+          <ClusterContext.Provider value={{ isReadOnly: true }}>
             {setupWrapper({ schemas: [] })}
-          </ReadOnlyContext.Provider>
+          </ClusterContext.Provider>
         </StaticRouter>
       );
       it('does not render Create Schema button', () => {

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

@@ -5,12 +5,12 @@ 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';
+import ClusterContext from '../contexts/ClusterContext';
 
 export interface SchemasProps {
   isFetching: boolean;
   fetchSchemasByClusterName: (clusterName: ClusterName) => void;
-  isReadOnly?: boolean | undefined;
+  isReadOnly: boolean;
 }
 
 const Schemas: React.FC<SchemasProps> = ({
@@ -29,7 +29,7 @@ const Schemas: React.FC<SchemasProps> = ({
   }
 
   return (
-    <ReadOnlyContext.Provider value={{ isReadOnly }}>
+    <ClusterContext.Provider value={{ isReadOnly }}>
       <Switch>
         <Route
           exact
@@ -47,7 +47,7 @@ const Schemas: React.FC<SchemasProps> = ({
           component={DetailsContainer}
         />
       </Switch>
-    </ReadOnlyContext.Provider>
+    </ClusterContext.Provider>
   );
 };
 

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

@@ -30,6 +30,7 @@ describe('Schemas', () => {
           <Schemas
             isFetching
             fetchSchemasByClusterName={jest.fn()}
+            isReadOnly={false}
             {...props}
           />
         </StaticRouter>

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

@@ -10,11 +10,11 @@ import {
   clusterTopicMessagesPath,
   clusterTopicsTopicEditPath,
 } from 'lib/paths';
+import ClusterContext from 'components/contexts/ClusterContext';
 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;
@@ -22,7 +22,7 @@ interface Props extends Topic, TopicDetails {
 }
 
 const Details: React.FC<Props> = ({ clusterName, topicName }) => {
-  const ReadOnlyContext = React.useContext(_ReadOnlyContext);
+  const { isReadOnly } = React.useContext(ClusterContext);
   return (
     <div className="section">
       <div className="level">
@@ -35,7 +35,7 @@ const Details: React.FC<Props> = ({ clusterName, topicName }) => {
             {topicName}
           </Breadcrumb>
         </div>
-        {!ReadOnlyContext.isReadOnly && (
+        {!isReadOnly && (
           <SettingsEditButton
             to={clusterTopicsTopicEditPath(clusterName, topicName)}
           />

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

@@ -3,8 +3,8 @@ import { TopicWithDetailedInfo, ClusterName } from 'redux/interfaces';
 import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
 import { NavLink } from 'react-router-dom';
 import { clusterTopicNewPath } from 'lib/paths';
+import ClusterContext from 'components/contexts/ClusterContext';
 import ListItem from './ListItem';
-import _ReadOnlyContext from '../../contexts/ReadOnlyContext';
 
 interface Props {
   clusterName: ClusterName;
@@ -16,7 +16,7 @@ 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 { isReadOnly } = React.useContext(ClusterContext);
   const items = showInternal ? topics : externalTopics;
 
   return (
@@ -39,7 +39,7 @@ const List: React.FC<Props> = ({ clusterName, topics, externalTopics }) => {
             </div>
           </div>
           <div className="level-item level-right">
-            {!ReadOnlyContext.isReadOnly && (
+            {!isReadOnly && (
               <NavLink
                 className="button is-primary"
                 to={clusterTopicNewPath(clusterName)}

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

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

kafka-ui-react-app/src/components/Topics/Topics.tsx

@@ -6,14 +6,14 @@ 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';
+import ClusterContext from '../contexts/ClusterContext';
 
 interface Props {
   clusterName: ClusterName;
   isFetched: boolean;
   fetchBrokers: (clusterName: ClusterName) => void;
   fetchTopicsList: (clusterName: ClusterName) => void;
-  isReadOnly?: boolean | undefined;
+  isReadOnly: boolean;
 }
 
 const Topics: React.FC<Props> = ({
@@ -28,7 +28,7 @@ const Topics: React.FC<Props> = ({
 
   if (isFetched) {
     return (
-      <ReadOnlyContext.Provider value={{ isReadOnly }}>
+      <ClusterContext.Provider value={{ isReadOnly }}>
         <Switch>
           <Route
             exact
@@ -50,7 +50,7 @@ const Topics: React.FC<Props> = ({
             component={DetailsContainer}
           />
         </Switch>
-      </ReadOnlyContext.Provider>
+      </ClusterContext.Provider>
     );
   }
 

kafka-ui-react-app/src/components/contexts/ClusterContext.ts

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

kafka-ui-react-app/src/components/contexts/ReadOnlyContext.ts

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

kafka-ui-react-app/src/redux/reducers/clusters/selectors.ts

@@ -28,5 +28,6 @@ export const getOfflineClusters = createSelector(getClusterList, (clusters) =>
 export const getClustersReadonlyStatus = (clusterName: string) =>
   createSelector(
     getClusterList,
-    (clusters) => clusters.find(({ name }) => name === clusterName)?.readOnly
+    (clusters): boolean =>
+      clusters.find(({ name }) => name === clusterName)?.readOnly || false
   );