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

2022-03-03 15:48:24 +04:00 · 2022-03-03 15:48:24 +04:00 · b08e22915d
commit b08e22915d
parent 39359bb9a9
20 changed files with 59 additions and 67 deletions
--- a/kafka-ui-react-app/src/components/App.styled.ts
+++ b/kafka-ui-react-app/src/components/App.styled.ts
@ -1,4 +1,5 @@
 import styled, { css } from 'styled-components';
+import { Link } from 'react-router-dom';

 export const Layout = styled.div`
  min-width: 1200px;
@ -166,7 +167,7 @@ export const Span = styled.span(
  `
 );

-export const Hyperlink = styled.a(
+export const Hyperlink = styled(Link)(
  ({ theme }) => css`
    position: relative;

--- a/kafka-ui-react-app/src/components/App.tsx
+++ b/kafka-ui-react-app/src/components/App.tsx
@ -58,7 +58,7 @@ const App: React.FC = () => {
              <S.Span role="separator" />
            </S.NavbarBurger>

-            <S.Hyperlink href="/ui">
+            <S.Hyperlink to="/">
              <Logo />
              UI for Apache Kafka
            </S.Hyperlink>
@ -86,12 +86,8 @@ const App: React.FC = () => {
          />
          {areClustersFulfilled ? (
            <Switch>
-              <Route
-                exact
-                path={['/', '/ui', '/ui/clusters']}
-                component={Dashboard}
-              />
-              <Route path="/ui/clusters/:clusterName" component={ClusterPage} />
+              <Route exact path={['/', '/clusters']} component={Dashboard} />
+              <Route path="/clusters/:clusterName" component={ClusterPage} />
            </Switch>
          ) : (
            <PageLoader />
--- a/kafka-ui-react-app/src/components/Cluster/Cluster.tsx
+++ b/kafka-ui-react-app/src/components/Cluster/Cluster.tsx
@ -99,8 +99,8 @@ const Cluster: React.FC = () => {
            />
          )}
          <Redirect
-            from="/ui/clusters/:clusterName"
-            to="/ui/clusters/:clusterName/brokers"
+            from="/clusters/:clusterName"
+            to="/clusters/:clusterName/brokers"
          />
        </Switch>
      </ClusterContext.Provider>
--- a/kafka-ui-react-app/src/components/Cluster/tests/Cluster.spec.tsx
+++ b/kafka-ui-react-app/src/components/Cluster/tests/Cluster.spec.tsx
@ -29,7 +29,7 @@ jest.mock('components/KsqlDb/KsqlDb', () => () => <div>KsqlDb</div>);
 describe('Cluster', () => {
  const renderComponent = (pathname: string) =>
    render(
-      <Route path="/ui/clusters/:clusterName">
+      <Route path="/clusters/:clusterName">
        <Cluster />
      </Route>,
      { pathname, store }
--- a/kafka-ui-react-app/src/components/Connect/Details/Actions/tests/snapshots/Actions.spec.tsx.snap
+++ b/kafka-ui-react-app/src/components/Connect/Details/Actions/tests/snapshots/Actions.spec.tsx.snap
@ -145,7 +145,7 @@ exports[`Actions view matches snapshot 1`] = `
    </span>
  </button>
  <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]}
  >
    <button
@ -338,7 +338,7 @@ exports[`Actions view matches snapshot when deleting connector 1`] = `
    </span>
  </button>
  <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]}
  >
    <button
@ -516,7 +516,7 @@ exports[`Actions view matches snapshot when failed 1`] = `
    </span>
  </button>
  <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]}
  >
    <button
@ -709,7 +709,7 @@ exports[`Actions view matches snapshot when paused 1`] = `
    </span>
  </button>
  <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]}
  >
    <button
@ -902,7 +902,7 @@ exports[`Actions view matches snapshot when running connector action 1`] = `
    </span>
  </button>
  <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]}
  >
    <button
@ -1080,7 +1080,7 @@ exports[`Actions view matches snapshot when unassigned 1`] = `
    </span>
  </button>
  <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]}
  >
    <button
--- a/kafka-ui-react-app/src/components/Connect/Details/tests/snapshots/Details.spec.tsx.snap
+++ b/kafka-ui-react-app/src/components/Connect/Details/tests/snapshots/Details.spec.tsx.snap
@ -90,7 +90,7 @@ exports[`Details view matches snapshot 1`] = `
    <a
      aria-current="page"
      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]}
      style={Object {}}
    >
@ -98,14 +98,14 @@ exports[`Details view matches snapshot 1`] = `
    </a>
    <a
      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]}
    >
      Tasks
    </a>
    <a
      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]}
    >
      Config
@ -122,7 +122,7 @@ exports[`Details view matches snapshot 1`] = `
          Object {
            "hash": "",
            "key": "test",
-            "pathname": "/ui/clusters/my-cluster/connects/my-connect/connectors/my-connector",
+            "pathname": "/clusters/my-cluster/connects/my-connect/connectors/my-connector",
            "search": "",
          },
        ],
@ -135,7 +135,7 @@ exports[`Details view matches snapshot 1`] = `
        "location": Object {
          "hash": "",
          "key": "test",
-          "pathname": "/ui/clusters/my-cluster/connects/my-connect/connectors/my-connector",
+          "pathname": "/clusters/my-cluster/connects/my-connect/connectors/my-connector",
          "search": "",
        },
        "push": [Function],
@ -146,7 +146,7 @@ exports[`Details view matches snapshot 1`] = `
      Object {
        "hash": "",
        "key": "test",
-        "pathname": "/ui/clusters/my-cluster/connects/my-connect/connectors/my-connector",
+        "pathname": "/clusters/my-cluster/connects/my-connect/connectors/my-connector",
        "search": "",
      }
    }
@ -158,8 +158,8 @@ exports[`Details view matches snapshot 1`] = `
          "connectName": "my-connect",
          "connectorName": "my-connector",
        },
-        "path": "/ui/clusters/:clusterName/connects/:connectName/connectors/:connectorName",
-        "url": "/ui/clusters/my-cluster/connects/my-connect/connectors/my-connector",
+        "path": "/clusters/:clusterName/connects/:connectName/connectors/:connectorName",
+        "url": "/clusters/my-cluster/connects/my-connect/connectors/my-connector",
      }
    }
  />
--- a/kafka-ui-react-app/src/components/Connect/List/tests/snapshots/ListItem.spec.tsx.snap
+++ b/kafka-ui-react-app/src/components/Connect/List/tests/snapshots/ListItem.spec.tsx.snap
@ -507,14 +507,14 @@ exports[`Connectors ListItem matches snapshot 1`] = `
                  >
                    <NavLink
                      exact={true}
-                      to="/ui/clusters/local/connects/first/connectors/hdfs-source-connector"
+                      to="/clusters/local/connects/first/connectors/hdfs-source-connector"
                    >
                      <Link
                        aria-current={null}
                        to={
                          Object {
                            "hash": "",
-                            "pathname": "/ui/clusters/local/connects/first/connectors/hdfs-source-connector",
+                            "pathname": "/clusters/local/connects/first/connectors/hdfs-source-connector",
                            "search": "",
                            "state": null,
                          }
@ -522,12 +522,12 @@ exports[`Connectors ListItem matches snapshot 1`] = `
                      >
                        <LinkAnchor
                          aria-current={null}
-                          href="/ui/clusters/local/connects/first/connectors/hdfs-source-connector"
+                          href="/clusters/local/connects/first/connectors/hdfs-source-connector"
                          navigate={[Function]}
                        >
                          <a
                            aria-current={null}
-                            href="/ui/clusters/local/connects/first/connectors/hdfs-source-connector"
+                            href="/clusters/local/connects/first/connectors/hdfs-source-connector"
                            onClick={[Function]}
                          >
                            hdfs-source-connector
@ -560,14 +560,14 @@ exports[`Connectors ListItem matches snapshot 1`] = `
                          color="gray"
                        >
                          <Link
-                            to="/ui/clusters/local/topics/test-topic"
+                            to="/clusters/local/topics/test-topic"
                          >
                            <LinkAnchor
-                              href="/ui/clusters/local/topics/test-topic"
+                              href="/clusters/local/topics/test-topic"
                              navigate={[Function]}
                            >
                              <a
-                                href="/ui/clusters/local/topics/test-topic"
+                                href="/clusters/local/topics/test-topic"
                                onClick={[Function]}
                              >
                                test-topic
--- a/kafka-ui-react-app/src/components/Connect/tests/Connect.spec.tsx
+++ b/kafka-ui-react-app/src/components/Connect/tests/Connect.spec.tsx
@ -27,7 +27,7 @@ jest.mock('components/Connect/Edit/EditContainer', () => () => (
 describe('Connect', () => {
  const renderComponent = (pathname: string) =>
    render(
-      <Route path="/ui/clusters/:clusterName">
+      <Route path="/clusters/:clusterName">
        <Connect />
      </Route>,
      { pathname, store }
--- a/kafka-ui-react-app/src/components/ConsumerGroups/ConsumerGroups.tsx
+++ b/kafka-ui-react-app/src/components/ConsumerGroups/ConsumerGroups.tsx
@ -25,16 +25,16 @@ const ConsumerGroups: React.FC = () => {
      <Switch>
        <BreadcrumbRoute
          exact
-          path="/ui/clusters/:clusterName/consumer-groups"
+          path="/clusters/:clusterName/consumer-groups"
          component={List}
        />
        <BreadcrumbRoute
          exact
-          path="/ui/clusters/:clusterName/consumer-groups/:consumerGroupID"
+          path="/clusters/:clusterName/consumer-groups/:consumerGroupID"
          component={Details}
        />
        <BreadcrumbRoute
-          path="/ui/clusters/:clusterName/consumer-groups/:consumerGroupID/reset-offsets"
+          path="/clusters/:clusterName/consumer-groups/:consumerGroupID/reset-offsets"
          component={ResetOffsets}
        />
      </Switch>
--- a/kafka-ui-react-app/src/components/KsqlDb/Query/test/Query.spec.tsx
+++ b/kafka-ui-react-app/src/components/KsqlDb/Query/test/Query.spec.tsx
@ -12,7 +12,7 @@ import theme from 'theme/theme';
 const mockStore = configureStore();

 describe('KsqlDb Query Component', () => {
-  const pathname = `ui/clusters/local/ksql-db/query`;
+  const pathname = `clusters/local/ksql-db/query`;

  it('Renders result', () => {
    const initialState: Partial<RootState> = {
--- a/kafka-ui-react-app/src/components/KsqlDb/test/KsqlDb.spec.tsx
+++ b/kafka-ui-react-app/src/components/KsqlDb/test/KsqlDb.spec.tsx
@ -4,7 +4,7 @@ import KsqlDb from 'components/KsqlDb/KsqlDb';
 import { StaticRouter } from 'react-router';

 describe('KsqlDb Component', () => {
-  const pathname = `ui/clusters/local/ksql-db`;
+  const pathname = `clusters/local/ksql-db`;

  describe('KsqlDb', () => {
    const setupComponent = () => (
--- a/kafka-ui-react-app/src/components/KsqlDb/test/snapshots/KsqlDb.spec.tsx.snap
+++ b/kafka-ui-react-app/src/components/KsqlDb/test/snapshots/KsqlDb.spec.tsx.snap
@ -5,7 +5,7 @@ exports[`KsqlDb Component KsqlDb matches snapshot 1`] = `
  context={Object {}}
  location={
    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],
        "location": Object {
          "hash": "",
-          "pathname": "ui/clusters/local/ksql-db",
+          "pathname": "clusters/local/ksql-db",
          "search": "",
        },
        "push": [Function],
--- a/kafka-ui-react-app/src/components/Nav/Nav.tsx
+++ b/kafka-ui-react-app/src/components/Nav/Nav.tsx
@ -13,7 +13,7 @@ interface Props {
 const Nav: React.FC<Props> = ({ areClustersFulfilled, clusters }) => (
  <aside aria-label="Sidebar Menu">
    <S.List>
-      <ClusterMenuItem exact to="/ui" title="Dashboard" isTopLevel />
+      <ClusterMenuItem exact to="/" title="Dashboard" isTopLevel />
    </S.List>

    {areClustersFulfilled &&
--- a/kafka-ui-react-app/src/components/Topics/List/tests/List.spec.tsx
+++ b/kafka-ui-react-app/src/components/Topics/List/tests/List.spec.tsx
@ -130,10 +130,10 @@ describe('List', () => {
    const mockDeleteTopics = jest.fn();
    const mockClearTopicsMessages = jest.fn();
    jest.useFakeTimers();
-    const pathname = '/ui/clusters/local/topics';
+    const pathname = '/clusters/local/topics';
    const component = mount(
      <StaticRouter location={{ pathname }}>
-        <Route path="/ui/clusters/:clusterName">
+        <Route path="/clusters/:clusterName">
          <ClusterContext.Provider
            value={{
              isReadOnly: false,
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Details.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Details.tsx
@ -82,10 +82,7 @@ const Details: React.FC<Props> = ({
    <div>
      <PageHeading text={topicName}>
        <HeaderControlsWrapper>
-          <Route
-            exact
-            path="/ui/clusters/:clusterName/topics/:topicName/messages"
-          >
+          <Route exact path="/clusters/:clusterName/topics/:topicName/messages">
            <Button
              buttonSize="M"
              buttonType="primary"
@ -96,7 +93,7 @@ const Details: React.FC<Props> = ({
            </Button>
          </Route>
          {!isReadOnly && !isInternal && (
-            <Route path="/ui/clusters/:clusterName/topics/:topicName">
+            <Route path="/clusters/:clusterName/topics/:topicName">
              <Dropdown label={<VerticalElipsisIcon />} right>
                <DropdownItem
                  onClick={() =>
@ -173,22 +170,22 @@ const Details: React.FC<Props> = ({
      <Switch>
        <Route
          exact
-          path="/ui/clusters/:clusterName/topics/:topicName/messages"
+          path="/clusters/:clusterName/topics/:topicName/messages"
          component={Messages}
        />
        <Route
          exact
-          path="/ui/clusters/:clusterName/topics/:topicName/settings"
+          path="/clusters/:clusterName/topics/:topicName/settings"
          component={SettingsContainer}
        />
        <Route
          exact
-          path="/ui/clusters/:clusterName/topics/:topicName"
+          path="/clusters/:clusterName/topics/:topicName"
          component={OverviewContainer}
        />
        <Route
          exact
-          path="/ui/clusters/:clusterName/topics/:topicName/consumer-groups"
+          path="/clusters/:clusterName/topics/:topicName/consumer-groups"
          component={TopicConsumerGroupsContainer}
        />
      </Switch>
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/test/snapshots/Details.spec.tsx.snap
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/test/snapshots/Details.spec.tsx.snap
@ -107,22 +107,22 @@ exports[`Details when it has readonly flag does not render the Action button a T
        role="navigation"
      >
        <a
-          href="/ui/clusters/local/topics/__internal.topic"
+          href="/clusters/local/topics/__internal.topic"
        >
          Overview
        </a>
        <a
-          href="/ui/clusters/local/topics/__internal.topic/messages"
+          href="/clusters/local/topics/__internal.topic/messages"
        >
          Messages
        </a>
        <a
-          href="/ui/clusters/local/topics/__internal.topic/consumer-groups"
+          href="/clusters/local/topics/__internal.topic/consumer-groups"
        >
          Consumers
        </a>
        <a
-          href="/ui/clusters/local/topics/__internal.topic/settings"
+          href="/clusters/local/topics/__internal.topic/settings"
        >
          Settings
        </a>
--- a/kafka-ui-react-app/src/components/Topics/Topic/Topic.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Topic.tsx
@ -35,16 +35,16 @@ const Topic: React.FC<TopicProps> = ({
    <Switch>
      <Route
        exact
-        path="/ui/clusters/:clusterName/topics/:topicName/edit"
+        path="/clusters/:clusterName/topics/:topicName/edit"
        component={EditContainer}
      />
      <Route
        exact
-        path="/ui/clusters/:clusterName/topics/:topicName/message"
+        path="/clusters/:clusterName/topics/:topicName/message"
        component={SendMessage}
      />
      <Route
-        path="/ui/clusters/:clusterName/topics/:topicName"
+        path="/clusters/:clusterName/topics/:topicName"
        component={DetailsContainer}
      />
    </Switch>
--- a/kafka-ui-react-app/src/components/common/Breadcrumb/tests/Breadcrumb.spec.tsx
+++ b/kafka-ui-react-app/src/components/common/Breadcrumb/tests/Breadcrumb.spec.tsx
@ -4,11 +4,11 @@ import { BreadcrumbProvider } from 'components/common/Breadcrumb/Breadcrumb.prov
 import { BreadcrumbRoute } from 'components/common/Breadcrumb/Breadcrumb.route';
 import { render } from 'lib/testHelpers';

-const createTopicPath = '/ui/clusters/local/topics/create-new';
-const createTopicRoutePath = '/ui/clusters/:clusterName/topics/create-new';
+const createTopicPath = '/clusters/local/topics/create-new';
+const createTopicRoutePath = '/clusters/:clusterName/topics/create-new';

-const topicPath = '/ui/clusters/secondLocal/topics/topic-name';
-const topicRoutePath = '/ui/clusters/:clusterName/topics/:topicName';
+const topicPath = '/clusters/secondLocal/topics/topic-name';
+const topicRoutePath = '/clusters/:clusterName/topics/:topicName';

 describe('Breadcrumb component', () => {
  const setupComponent = (pathname: string, routePath: string) =>
--- a/kafka-ui-react-app/src/lib/test/paths.spec.ts
+++ b/kafka-ui-react-app/src/lib/test/paths.spec.ts
@ -15,9 +15,7 @@ describe('Paths', () => {
    );
  });
  it('clusterPath', () => {
-    expect(paths.clusterPath(clusterName)).toEqual(
-      `/ui/clusters/${clusterName}`
-    );
+    expect(paths.clusterPath(clusterName)).toEqual(`/clusters/${clusterName}`);
  });
  it('clusterBrokersPath', () => {
    expect(paths.clusterBrokersPath(clusterName)).toEqual(
--- a/kafka-ui-react-app/src/lib/paths.ts
+++ b/kafka-ui-react-app/src/lib/paths.ts
@ -12,7 +12,7 @@ export const gitCommitPath = (commit: string) =>
  `${GIT_REPO_LINK}/commit/${commit}`;

 export const clusterPath = (clusterName: ClusterName) =>
-  `/ui/clusters/${clusterName}`;
+  `/clusters/${clusterName}`;

 // Brokers
 export const clusterBrokersPath = (clusterName: ClusterName) =>