[#288] Allow users to use name :new for topics and schemas (#351)

* [#288] Allow users to use name :new for topics and schemas

* Remove unused imports

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

@@ -22,7 +22,7 @@ describe('New', () => {
   });
 
   describe('View', () => {
-    const pathname = '/ui/clusters/clusterName/schemas/new';
+    const pathname = '/ui/clusters/clusterName/schemas/create_new';
 
     const setupWrapper = (props: Partial<NewProps> = {}) => (
       <StaticRouter location={{ pathname }} context={{}}>

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

@@ -5,7 +5,7 @@ exports[`New View matches snapshot 1`] = `
   context={Object {}}
   location={
     Object {
-      "pathname": "/ui/clusters/clusterName/schemas/new",
+      "pathname": "/ui/clusters/clusterName/schemas/create_new",
     }
   }
 >
@@ -21,7 +21,7 @@ exports[`New View matches snapshot 1`] = `
         "listen": [Function],
         "location": Object {
           "hash": "",
-          "pathname": "/ui/clusters/clusterName/schemas/new",
+          "pathname": "/ui/clusters/clusterName/schemas/create_new",
           "search": "",
         },
         "push": [Function],

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

@@ -1,5 +1,10 @@
 import React from 'react';
 import { Switch, Route } from 'react-router-dom';
+import {
+  clusterSchemaNewPath,
+  clusterSchemaPath,
+  clusterSchemasPath,
+} from 'lib/paths';
 import ListContainer from './List/ListContainer';
 import DetailsContainer from './Details/DetailsContainer';
 import NewContainer from './New/NewContainer';
@@ -8,17 +13,17 @@ const Schemas: React.FC = () => (
   <Switch>
     <Route
       exact
-      path="/ui/clusters/:clusterName/schemas"
+      path={clusterSchemasPath(':clusterName')}
       component={ListContainer}
     />
     <Route
       exact
-      path="/ui/clusters/:clusterName/schemas/new"
+      path={clusterSchemaNewPath(':clusterName')}
       component={NewContainer}
     />
     <Route
       exact
-      path="/ui/clusters/:clusterName/schemas/:subject/latest"
+      path={clusterSchemaPath(':clusterName', ':subject')}
       component={DetailsContainer}
     />
   </Switch>

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

@@ -1,5 +1,10 @@
 import React from 'react';
 import { Switch, Route } from 'react-router-dom';
+import {
+  clusterTopicNewPath,
+  clusterTopicPath,
+  clusterTopicsPath,
+} from 'lib/paths';
 import ListContainer from './List/ListContainer';
 import TopicContainer from './Topic/TopicContainer';
 import NewContainer from './New/NewContainer';
@@ -8,16 +13,16 @@ const Topics: React.FC = () => (
   <Switch>
     <Route
       exact
-      path="/ui/clusters/:clusterName/topics"
+      path={clusterTopicsPath(':clusterName')}
       component={ListContainer}
     />
     <Route
       exact
-      path="/ui/clusters/:clusterName/topics/new"
+      path={clusterTopicNewPath(':clusterName')}
       component={NewContainer}
     />
     <Route
-      path="/ui/clusters/:clusterName/topics/:topicName"
+      path={clusterTopicPath(':clusterName', ':topicName')}
       component={TopicContainer}
     />
   </Switch>

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { GIT_REPO_LINK } from 'lib/constants';
+import { gitCommitPath } from 'lib/paths';
 
 export interface VesionProps {
   tag?: string;
@@ -21,7 +21,7 @@ const Version: React.FC<VesionProps> = ({ tag, commit }) => {
           <a
             title="Current commit"
             target="__blank"
-            href={`${GIT_REPO_LINK}/commit/${commit}`}
+            href={gitCommitPath(commit)}
           >
             {commit}
           </a>

kafka-ui-react-app/src/lib/__tests__/paths.spec.ts

@@ -0,0 +1,69 @@
+import { GIT_REPO_LINK } from 'lib/constants';
+import * as paths from '../paths';
+
+describe('Paths', () => {
+  it('gitCommitPath', () => {
+    expect(paths.gitCommitPath('1234567gh')).toEqual(
+      `${GIT_REPO_LINK}/commit/1234567gh`
+    );
+  });
+
+  it('clusterBrokersPath', () => {
+    expect(paths.clusterBrokersPath('local')).toEqual(
+      '/ui/clusters/local/brokers'
+    );
+  });
+
+  it('clusterConsumerGroupsPath', () => {
+    expect(paths.clusterConsumerGroupsPath('local')).toEqual(
+      '/ui/clusters/local/consumer-groups'
+    );
+  });
+
+  it('clusterSchemasPath', () => {
+    expect(paths.clusterSchemasPath('local')).toEqual(
+      '/ui/clusters/local/schemas'
+    );
+  });
+  it('clusterSchemaNewPath', () => {
+    expect(paths.clusterSchemaNewPath('local')).toEqual(
+      '/ui/clusters/local/schemas/create_new'
+    );
+  });
+  it('clusterSchemaPath', () => {
+    expect(paths.clusterSchemaPath('local', 'schema123')).toEqual(
+      '/ui/clusters/local/schemas/schema123/latest'
+    );
+  });
+
+  it('clusterTopicsPath', () => {
+    expect(paths.clusterTopicsPath('local')).toEqual(
+      '/ui/clusters/local/topics'
+    );
+  });
+  it('clusterTopicNewPath', () => {
+    expect(paths.clusterTopicNewPath('local')).toEqual(
+      '/ui/clusters/local/topics/create_new'
+    );
+  });
+  it('clusterTopicPath', () => {
+    expect(paths.clusterTopicPath('local', 'topic123')).toEqual(
+      '/ui/clusters/local/topics/topic123'
+    );
+  });
+  it('clusterTopicSettingsPath', () => {
+    expect(paths.clusterTopicSettingsPath('local', 'topic123')).toEqual(
+      '/ui/clusters/local/topics/topic123/settings'
+    );
+  });
+  it('clusterTopicMessagesPath', () => {
+    expect(paths.clusterTopicMessagesPath('local', 'topic123')).toEqual(
+      '/ui/clusters/local/topics/topic123/messages'
+    );
+  });
+  it('clusterTopicsTopicEditPath', () => {
+    expect(paths.clusterTopicsTopicEditPath('local', 'topic123')).toEqual(
+      '/ui/clusters/local/topics/topic123/edit'
+    );
+  });
+});

kafka-ui-react-app/src/lib/paths.ts

@@ -1,20 +1,34 @@
 import { ClusterName, SchemaName, TopicName } from 'redux/interfaces';
+import { GIT_REPO_LINK } from './constants';
+
+export const gitCommitPath = (commit: string) =>
+  `${GIT_REPO_LINK}/commit/${commit}`;
 
 const clusterPath = (clusterName: ClusterName) => `/ui/clusters/${clusterName}`;
 
+// Brokers
 export const clusterBrokersPath = (clusterName: ClusterName) =>
   `${clusterPath(clusterName)}/brokers`;
-export const clusterTopicsPath = (clusterName: ClusterName) =>
-  `${clusterPath(clusterName)}/topics`;
-export const clusterTopicNewPath = (clusterName: ClusterName) =>
-  `${clusterPath(clusterName)}/topics/new`;
+
+// Consumer Groups
 export const clusterConsumerGroupsPath = (clusterName: ClusterName) =>
   `${clusterPath(clusterName)}/consumer-groups`;
+
+// Schemas
 export const clusterSchemasPath = (clusterName: ClusterName) =>
   `${clusterPath(clusterName)}/schemas`;
 export const clusterSchemaNewPath = (clusterName: ClusterName) =>
-  `${clusterPath(clusterName)}/schemas/new`;
+  `${clusterPath(clusterName)}/schemas/create_new`;
+export const clusterSchemaPath = (
+  clusterName: ClusterName,
+  subject: SchemaName
+) => `${clusterSchemasPath(clusterName)}/${subject}/latest`;
 
+// Topics
+export const clusterTopicsPath = (clusterName: ClusterName) =>
+  `${clusterPath(clusterName)}/topics`;
+export const clusterTopicNewPath = (clusterName: ClusterName) =>
+  `${clusterPath(clusterName)}/topics/create_new`;
 export const clusterTopicPath = (
   clusterName: ClusterName,
   topicName: TopicName
@@ -27,13 +41,7 @@ export const clusterTopicMessagesPath = (
   clusterName: ClusterName,
   topicName: TopicName
 ) => `${clusterTopicsPath(clusterName)}/${topicName}/messages`;
-
 export const clusterTopicsTopicEditPath = (
   clusterName: ClusterName,
   topicName: TopicName
 ) => `${clusterTopicsPath(clusterName)}/${topicName}/edit`;
-
-export const clusterSchemaPath = (
-  clusterName: ClusterName,
-  subject: SchemaName
-) => `${clusterSchemasPath(clusterName)}/${subject}/latest`;