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

Rename & rearrange

Browse source
This commit is contained in:
GneyHabub 2021-03-10 21:47:14 +03:00
parent 0c3687d013
commit 0e4e8b74ae
13 changed files with 40 additions and 38 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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