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

Issue-1184: fix logo link and remove redundant path segment "ui" (#1658)

Browse source
This commit is contained in:
Sasha Stepanyan 2022-03-03 15:48:24 +04:00 • committed by GitHub
parent 39359bb9a9
commit b08e22915d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 59 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
kafka-ui-react-app/src/components/App.styled.ts
View file

@ -1,4 +1,5 @@
import styled, { css } from 'styled-components'; import styled, { css } from 'styled-components';
import { Link } from 'react-router-dom';
export const Layout = styled.div` export const Layout = styled.div`
min-width: 1200px; min-width: 1200px;
@ -166,7 +167,7 @@ export const Span = styled.span(
` `
); );
export const Hyperlink = styled.a( export const Hyperlink = styled(Link)(
({ theme }) => css` ({ theme }) => css`
position: relative; position: relative;

10
kafka-ui-react-app/src/components/App.tsx
View file

@ -58,7 +58,7 @@ const App: React.FC = () => {
<S.Span role="separator" /> <S.Span role="separator" />
</S.NavbarBurger> </S.NavbarBurger>
<S.Hyperlink href="/ui"> <S.Hyperlink to="/">
<Logo /> <Logo />
UI for Apache Kafka UI for Apache Kafka
</S.Hyperlink> </S.Hyperlink>
@ -86,12 +86,8 @@ const App: React.FC = () => {
/> />
{areClustersFulfilled ? ( {areClustersFulfilled ? (
<Switch> <Switch>
<Route <Route exact path={['/', '/clusters']} component={Dashboard} />
exact <Route path="/clusters/:clusterName" component={ClusterPage} />
path={['/', '/ui', '/ui/clusters']}
component={Dashboard}
/>
<Route path="/ui/clusters/:clusterName" component={ClusterPage} />
</Switch> </Switch>
) : ( ) : (
<PageLoader /> <PageLoader />

4
kafka-ui-react-app/src/components/Cluster/Cluster.tsx
View file

@ -99,8 +99,8 @@ const Cluster: React.FC = () => {
/> />
)} )}
<Redirect <Redirect
from="/ui/clusters/:clusterName" from="/clusters/:clusterName"
to="/ui/clusters/:clusterName/brokers" to="/clusters/:clusterName/brokers"
/> />
</Switch> </Switch>
</ClusterContext.Provider> </ClusterContext.Provider>

2
kafka-ui-react-app/src/components/Cluster/__tests__/Cluster.spec.tsx
View file

@ -29,7 +29,7 @@ jest.mock('components/KsqlDb/KsqlDb', () => () => <div>KsqlDb</div>);
describe('Cluster', () => { describe('Cluster', () => {
const renderComponent = (pathname: string) => const renderComponent = (pathname: string) =>
render( render(
<Route path="/ui/clusters/:clusterName"> <Route path="/clusters/:clusterName">
<Cluster /> <Cluster />
</Route>, </Route>,
{ pathname, store } { pathname, store }

12
kafka-ui-react-app/src/components/Connect/Details/Actions/__tests__/__snapshots__/Actions.spec.tsx.snap
View file

@ -145,7 +145,7 @@ exports[`Actions view matches snapshot 1`] = `
</span> </span>
</button> </button>
<a <a
href="/ui/clusters/my-cluster/connects/my-connect/connectors/my-connector/edit" href="/clusters/my-cluster/connects/my-connect/connectors/my-connector/edit"
onClick={[Function]} onClick={[Function]}
> >
<button <button
@ -338,7 +338,7 @@ exports[`Actions view matches snapshot when deleting connector 1`] = `
</span> </span>
</button> </button>
<a <a
href="/ui/clusters/my-cluster/connects/my-connect/connectors/my-connector/edit" href="/clusters/my-cluster/connects/my-connect/connectors/my-connector/edit"
onClick={[Function]} onClick={[Function]}
> >
<button <button
@ -516,7 +516,7 @@ exports[`Actions view matches snapshot when failed 1`] = `
</span> </span>
</button> </button>
<a <a
href="/ui/clusters/my-cluster/connects/my-connect/connectors/my-connector/edit" href="/clusters/my-cluster/connects/my-connect/connectors/my-connector/edit"
onClick={[Function]} onClick={[Function]}
> >
<button <button
@ -709,7 +709,7 @@ exports[`Actions view matches snapshot when paused 1`] = `
</span> </span>
</button> </button>
<a <a
href="/ui/clusters/my-cluster/connects/my-connect/connectors/my-connector/edit" href="/clusters/my-cluster/connects/my-connect/connectors/my-connector/edit"
onClick={[Function]} onClick={[Function]}
> >
<button <button
@ -902,7 +902,7 @@ exports[`Actions view matches snapshot when running connector action 1`] = `
</span> </span>
</button> </button>
<a <a
href="/ui/clusters/my-cluster/connects/my-connect/connectors/my-connector/edit" href="/clusters/my-cluster/connects/my-connect/connectors/my-connector/edit"
onClick={[Function]} onClick={[Function]}
> >
<button <button
@ -1080,7 +1080,7 @@ exports[`Actions view matches snapshot when unassigned 1`] = `
</span> </span>
</button> </button>
<a <a
href="/ui/clusters/my-cluster/connects/my-connect/connectors/my-connector/edit" href="/clusters/my-cluster/connects/my-connect/connectors/my-connector/edit"
onClick={[Function]} onClick={[Function]}
> >
<button <button

16
kafka-ui-react-app/src/components/Connect/Details/__tests__/__snapshots__/Details.spec.tsx.snap
View file

@ -90,7 +90,7 @@ exports[`Details view matches snapshot 1`] = `
<a <a
aria-current="page" aria-current="page"
className="is-active" className="is-active"
href="/ui/clusters/my-cluster/connects/my-connect/connectors/my-connector" href="/clusters/my-cluster/connects/my-connect/connectors/my-connector"
onClick={[Function]} onClick={[Function]}
style={Object {}} style={Object {}}
> >
@ -98,14 +98,14 @@ exports[`Details view matches snapshot 1`] = `
</a> </a>
<a <a
aria-current={null} aria-current={null}
href="/ui/clusters/my-cluster/connects/my-connect/connectors/my-connector/tasks" href="/clusters/my-cluster/connects/my-connect/connectors/my-connector/tasks"
onClick={[Function]} onClick={[Function]}
> >
Tasks Tasks
</a> </a>
<a <a
aria-current={null} aria-current={null}
href="/ui/clusters/my-cluster/connects/my-connect/connectors/my-connector/config" href="/clusters/my-cluster/connects/my-connect/connectors/my-connector/config"
onClick={[Function]} onClick={[Function]}
> >
Config Config
@ -122,7 +122,7 @@ exports[`Details view matches snapshot 1`] = `
Object { Object {
"hash": "", "hash": "",
"key": "test", "key": "test",
"pathname": "/ui/clusters/my-cluster/connects/my-connect/connectors/my-connector", "pathname": "/clusters/my-cluster/connects/my-connect/connectors/my-connector",
"search": "", "search": "",
}, },
], ],
@ -135,7 +135,7 @@ exports[`Details view matches snapshot 1`] = `
"location": Object { "location": Object {
"hash": "", "hash": "",
"key": "test", "key": "test",
"pathname": "/ui/clusters/my-cluster/connects/my-connect/connectors/my-connector", "pathname": "/clusters/my-cluster/connects/my-connect/connectors/my-connector",
"search": "", "search": "",
}, },
"push": [Function], "push": [Function],
@ -146,7 +146,7 @@ exports[`Details view matches snapshot 1`] = `
Object { Object {
"hash": "", "hash": "",
"key": "test", "key": "test",
"pathname": "/ui/clusters/my-cluster/connects/my-connect/connectors/my-connector", "pathname": "/clusters/my-cluster/connects/my-connect/connectors/my-connector",
"search": "", "search": "",
} }
} }
@ -158,8 +158,8 @@ exports[`Details view matches snapshot 1`] = `
"connectName": "my-connect", "connectName": "my-connect",
"connectorName": "my-connector", "connectorName": "my-connector",
}, },
"path": "/ui/clusters/:clusterName/connects/:connectName/connectors/:connectorName", "path": "/clusters/:clusterName/connects/:connectName/connectors/:connectorName",
"url": "/ui/clusters/my-cluster/connects/my-connect/connectors/my-connector", "url": "/clusters/my-cluster/connects/my-connect/connectors/my-connector",
} }
} }
/> />

14
kafka-ui-react-app/src/components/Connect/List/__tests__/__snapshots__/ListItem.spec.tsx.snap
View file

@ -507,14 +507,14 @@ exports[`Connectors ListItem matches snapshot 1`] = `
> >
<NavLink <NavLink
exact={true} exact={true}
to="/ui/clusters/local/connects/first/connectors/hdfs-source-connector" to="/clusters/local/connects/first/connectors/hdfs-source-connector"
> >
<Link <Link
aria-current={null} aria-current={null}
to={ to={
Object { Object {
"hash": "", "hash": "",
"pathname": "/ui/clusters/local/connects/first/connectors/hdfs-source-connector", "pathname": "/clusters/local/connects/first/connectors/hdfs-source-connector",
"search": "", "search": "",
"state": null, "state": null,
} }
@ -522,12 +522,12 @@ exports[`Connectors ListItem matches snapshot 1`] = `
> >
<LinkAnchor <LinkAnchor
aria-current={null} aria-current={null}
href="/ui/clusters/local/connects/first/connectors/hdfs-source-connector" href="/clusters/local/connects/first/connectors/hdfs-source-connector"
navigate={[Function]} navigate={[Function]}
> >
<a <a
aria-current={null} aria-current={null}
href="/ui/clusters/local/connects/first/connectors/hdfs-source-connector" href="/clusters/local/connects/first/connectors/hdfs-source-connector"
onClick={[Function]} onClick={[Function]}
> >
hdfs-source-connector hdfs-source-connector
@ -560,14 +560,14 @@ exports[`Connectors ListItem matches snapshot 1`] = `
color="gray" color="gray"
> >
<Link <Link
to="/ui/clusters/local/topics/test-topic" to="/clusters/local/topics/test-topic"
> >
<LinkAnchor <LinkAnchor
href="/ui/clusters/local/topics/test-topic" href="/clusters/local/topics/test-topic"
navigate={[Function]} navigate={[Function]}
> >
<a <a
href="/ui/clusters/local/topics/test-topic" href="/clusters/local/topics/test-topic"
onClick={[Function]} onClick={[Function]}
> >
test-topic test-topic

2
kafka-ui-react-app/src/components/Connect/__tests__/Connect.spec.tsx
View file

@ -27,7 +27,7 @@ jest.mock('components/Connect/Edit/EditContainer', () => () => (
describe('Connect', () => { describe('Connect', () => {
const renderComponent = (pathname: string) => const renderComponent = (pathname: string) =>
render( render(
<Route path="/ui/clusters/:clusterName"> <Route path="/clusters/:clusterName">
<Connect /> <Connect />
</Route>, </Route>,
{ pathname, store } { pathname, store }

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

@ -25,16 +25,16 @@ const ConsumerGroups: React.FC = () => {
<Switch> <Switch>
<BreadcrumbRoute <BreadcrumbRoute
exact exact
path="/ui/clusters/:clusterName/consumer-groups" path="/clusters/:clusterName/consumer-groups"
component={List} component={List}
/> />
<BreadcrumbRoute <BreadcrumbRoute
exact exact
path="/ui/clusters/:clusterName/consumer-groups/:consumerGroupID" path="/clusters/:clusterName/consumer-groups/:consumerGroupID"
component={Details} component={Details}
/> />
<BreadcrumbRoute <BreadcrumbRoute
path="/ui/clusters/:clusterName/consumer-groups/:consumerGroupID/reset-offsets" path="/clusters/:clusterName/consumer-groups/:consumerGroupID/reset-offsets"
component={ResetOffsets} component={ResetOffsets}
/> />
</Switch> </Switch>

2
kafka-ui-react-app/src/components/KsqlDb/Query/__test__/Query.spec.tsx
View file

@ -12,7 +12,7 @@ import theme from 'theme/theme';
const mockStore = configureStore(); const mockStore = configureStore();
describe('KsqlDb Query Component', () => { describe('KsqlDb Query Component', () => {
const pathname = `ui/clusters/local/ksql-db/query`; const pathname = `clusters/local/ksql-db/query`;
it('Renders result', () => { it('Renders result', () => {
const initialState: Partial<RootState> = { const initialState: Partial<RootState> = {

2
kafka-ui-react-app/src/components/KsqlDb/__test__/KsqlDb.spec.tsx
View file

@ -4,7 +4,7 @@ import KsqlDb from 'components/KsqlDb/KsqlDb';
import { StaticRouter } from 'react-router'; import { StaticRouter } from 'react-router';
describe('KsqlDb Component', () => { describe('KsqlDb Component', () => {
const pathname = `ui/clusters/local/ksql-db`; const pathname = `clusters/local/ksql-db`;
describe('KsqlDb', () => { describe('KsqlDb', () => {
const setupComponent = () => ( const setupComponent = () => (

4
kafka-ui-react-app/src/components/KsqlDb/__test__/__snapshots__/KsqlDb.spec.tsx.snap
View file

@ -5,7 +5,7 @@ exports[`KsqlDb Component KsqlDb matches snapshot 1`] = `
context={Object {}} context={Object {}}
location={ location={
Object { Object {
"pathname": "ui/clusters/local/ksql-db", "pathname": "clusters/local/ksql-db",
} }
} }
> >
@ -21,7 +21,7 @@ exports[`KsqlDb Component KsqlDb matches snapshot 1`] = `
"listen": [Function], "listen": [Function],
"location": Object { "location": Object {
"hash": "", "hash": "",
"pathname": "ui/clusters/local/ksql-db", "pathname": "clusters/local/ksql-db",
"search": "", "search": "",
}, },
"push": [Function], "push": [Function],

2
kafka-ui-react-app/src/components/Nav/Nav.tsx
View file

@ -13,7 +13,7 @@ interface Props {
const Nav: React.FC<Props> = ({ areClustersFulfilled, clusters }) => ( const Nav: React.FC<Props> = ({ areClustersFulfilled, clusters }) => (
<aside aria-label="Sidebar Menu"> <aside aria-label="Sidebar Menu">
<S.List> <S.List>
<ClusterMenuItem exact to="/ui" title="Dashboard" isTopLevel /> <ClusterMenuItem exact to="/" title="Dashboard" isTopLevel />
</S.List> </S.List>
{areClustersFulfilled && {areClustersFulfilled &&

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

@ -130,10 +130,10 @@ describe('List', () => {
const mockDeleteTopics = jest.fn(); const mockDeleteTopics = jest.fn();
const mockClearTopicsMessages = jest.fn(); const mockClearTopicsMessages = jest.fn();
jest.useFakeTimers(); jest.useFakeTimers();
const pathname = '/ui/clusters/local/topics'; const pathname = '/clusters/local/topics';
const component = mount( const component = mount(
<StaticRouter location={{ pathname }}> <StaticRouter location={{ pathname }}>
<Route path="/ui/clusters/:clusterName"> <Route path="/clusters/:clusterName">
<ClusterContext.Provider <ClusterContext.Provider
value={{ value={{
isReadOnly: false, isReadOnly: false,

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

@ -82,10 +82,7 @@ const Details: React.FC<Props> = ({
<div> <div>
<PageHeading text={topicName}> <PageHeading text={topicName}>
<HeaderControlsWrapper> <HeaderControlsWrapper>
<Route <Route exact path="/clusters/:clusterName/topics/:topicName/messages">
exact
path="/ui/clusters/:clusterName/topics/:topicName/messages"
>
<Button <Button
buttonSize="M" buttonSize="M"
buttonType="primary" buttonType="primary"
@ -96,7 +93,7 @@ const Details: React.FC<Props> = ({
</Button> </Button>
</Route> </Route>
{!isReadOnly && !isInternal && ( {!isReadOnly && !isInternal && (
<Route path="/ui/clusters/:clusterName/topics/:topicName"> <Route path="/clusters/:clusterName/topics/:topicName">
<Dropdown label={<VerticalElipsisIcon />} right> <Dropdown label={<VerticalElipsisIcon />} right>
<DropdownItem <DropdownItem
onClick={() => onClick={() =>
@ -173,22 +170,22 @@ const Details: React.FC<Props> = ({
<Switch> <Switch>
<Route <Route
exact exact
path="/ui/clusters/:clusterName/topics/:topicName/messages" path="/clusters/:clusterName/topics/:topicName/messages"
component={Messages} component={Messages}
/> />
<Route <Route
exact exact
path="/ui/clusters/:clusterName/topics/:topicName/settings" path="/clusters/:clusterName/topics/:topicName/settings"
component={SettingsContainer} component={SettingsContainer}
/> />
<Route <Route
exact exact
path="/ui/clusters/:clusterName/topics/:topicName" path="/clusters/:clusterName/topics/:topicName"
component={OverviewContainer} component={OverviewContainer}
/> />
<Route <Route
exact exact
path="/ui/clusters/:clusterName/topics/:topicName/consumer-groups" path="/clusters/:clusterName/topics/:topicName/consumer-groups"
component={TopicConsumerGroupsContainer} component={TopicConsumerGroupsContainer}
/> />
</Switch> </Switch>

8
kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/__snapshots__/Details.spec.tsx.snap
View file

@ -107,22 +107,22 @@ exports[`Details when it has readonly flag does not render the Action button a T
role="navigation" role="navigation"
> >
<a <a
href="/ui/clusters/local/topics/__internal.topic" href="/clusters/local/topics/__internal.topic"
> >
Overview Overview
</a> </a>
<a <a
href="/ui/clusters/local/topics/__internal.topic/messages" href="/clusters/local/topics/__internal.topic/messages"
> >
Messages Messages
</a> </a>
<a <a
href="/ui/clusters/local/topics/__internal.topic/consumer-groups" href="/clusters/local/topics/__internal.topic/consumer-groups"
> >
Consumers Consumers
</a> </a>
<a <a
href="/ui/clusters/local/topics/__internal.topic/settings" href="/clusters/local/topics/__internal.topic/settings"
> >
Settings Settings
</a> </a>

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

@ -35,16 +35,16 @@ const Topic: React.FC<TopicProps> = ({
<Switch> <Switch>
<Route <Route
exact exact
path="/ui/clusters/:clusterName/topics/:topicName/edit" path="/clusters/:clusterName/topics/:topicName/edit"
component={EditContainer} component={EditContainer}
/> />
<Route <Route
exact exact
path="/ui/clusters/:clusterName/topics/:topicName/message" path="/clusters/:clusterName/topics/:topicName/message"
component={SendMessage} component={SendMessage}
/> />
<Route <Route
path="/ui/clusters/:clusterName/topics/:topicName" path="/clusters/:clusterName/topics/:topicName"
component={DetailsContainer} component={DetailsContainer}
/> />
</Switch> </Switch>

8
kafka-ui-react-app/src/components/common/Breadcrumb/__tests__/Breadcrumb.spec.tsx
View file

@ -4,11 +4,11 @@ import { BreadcrumbProvider } from 'components/common/Breadcrumb/Breadcrumb.prov
import { BreadcrumbRoute } from 'components/common/Breadcrumb/Breadcrumb.route'; import { BreadcrumbRoute } from 'components/common/Breadcrumb/Breadcrumb.route';
import { render } from 'lib/testHelpers'; import { render } from 'lib/testHelpers';
const createTopicPath = '/ui/clusters/local/topics/create-new'; const createTopicPath = '/clusters/local/topics/create-new';
const createTopicRoutePath = '/ui/clusters/:clusterName/topics/create-new'; const createTopicRoutePath = '/clusters/:clusterName/topics/create-new';
const topicPath = '/ui/clusters/secondLocal/topics/topic-name'; const topicPath = '/clusters/secondLocal/topics/topic-name';
const topicRoutePath = '/ui/clusters/:clusterName/topics/:topicName'; const topicRoutePath = '/clusters/:clusterName/topics/:topicName';
describe('Breadcrumb component', () => { describe('Breadcrumb component', () => {
const setupComponent = (pathname: string, routePath: string) => const setupComponent = (pathname: string, routePath: string) =>

4
kafka-ui-react-app/src/lib/__test__/paths.spec.ts
View file

@ -15,9 +15,7 @@ describe('Paths', () => {
); );
}); });
it('clusterPath', () => { it('clusterPath', () => {
expect(paths.clusterPath(clusterName)).toEqual( expect(paths.clusterPath(clusterName)).toEqual(`/clusters/${clusterName}`);
`/ui/clusters/${clusterName}`
);
}); });
it('clusterBrokersPath', () => { it('clusterBrokersPath', () => {
expect(paths.clusterBrokersPath(clusterName)).toEqual( expect(paths.clusterBrokersPath(clusterName)).toEqual(

2
kafka-ui-react-app/src/lib/paths.ts
View file

@ -12,7 +12,7 @@ export const gitCommitPath = (commit: string) =>
`${GIT_REPO_LINK}/commit/${commit}`; `${GIT_REPO_LINK}/commit/${commit}`;
export const clusterPath = (clusterName: ClusterName) => export const clusterPath = (clusterName: ClusterName) =>
`/ui/clusters/${clusterName}`; `/clusters/${clusterName}`;
// Brokers // Brokers
export const clusterBrokersPath = (clusterName: ClusterName) => export const clusterBrokersPath = (clusterName: ClusterName) =>