add isActive props, propagate component, update tests

kafka-ui-react-app/src/components/Nav/ClusterMenu.tsx

@@ -40,70 +40,52 @@ const ClusterMenu: React.FC<Props> = ({
           <ClusterStatusIcon status={status} />
         </NavLink>
         <ul>
-          <li>
-            <NavLink
-              to={clusterBrokersPath(name)}
-              activeClassName="is-active"
-              title="Brokers"
-            >
-              Brokers
-            </NavLink>
-          </li>
+          <ClusterMenuItem
+            liType="primary"
+            to={clusterBrokersPath(name)}
+            activeClassName="is-active"
+            title="Brokers"
+          />
           <ClusterMenuItem
             liType="primary"
             to={clusterTopicsPath(name)}
             activeClassName="is-active"
             title="Topics"
-          >
-            Topics
-          </ClusterMenuItem>
-
-          <li>
-            <NavLink
-              to={clusterConsumerGroupsPath(name)}
-              activeClassName="is-active"
-              title="Consumers"
-            >
-              Consumers
-            </NavLink>
-          </li>
+          />
+          <ClusterMenuItem
+            liType="primary"
+            to={clusterConsumerGroupsPath(name)}
+            activeClassName="is-active"
+            title="Consumers"
+          />
 
           {hasFeatureConfigured(ClusterFeaturesEnum.SCHEMA_REGISTRY) && (
-            <li>
-              <NavLink
-                to={clusterSchemasPath(name)}
-                activeClassName="is-active"
-                title="Schema Registry"
-              >
-                Schema Registry
-              </NavLink>
-            </li>
+            <ClusterMenuItem
+              liType="primary"
+              to={clusterSchemasPath(name)}
+              activeClassName="is-active"
+              title="Schema Registry"
+            />
           )}
           {hasFeatureConfigured(ClusterFeaturesEnum.KAFKA_CONNECT) && (
-            <li>
-              <NavLink
-                to={clusterConnectorsPath(name)}
-                activeClassName="is-active"
-                title="Kafka Connect"
-                isActive={(_, location) =>
-                  location.pathname.startsWith(clusterConnectsPath(name)) ||
-                  location.pathname.startsWith(clusterConnectorsPath(name))
-                }
-              >
-                Kafka Connect
-              </NavLink>
-            </li>
+            <ClusterMenuItem
+              liType="primary"
+              to={clusterConnectorsPath(name)}
+              activeClassName="is-active"
+              title="Kafka Connect"
+              isActive={(_, location) =>
+                location.pathname.startsWith(clusterConnectsPath(name)) ||
+                location.pathname.startsWith(clusterConnectorsPath(name))
+              }
+            />
           )}
           {hasFeatureConfigured(ClusterFeaturesEnum.KSQL_DB) && (
-            <li>
-              <NavLink
-                to={clusterKsqlDbPath(name)}
-                activeClassName="is-active"
-                title="KSQL DB"
-              >
-                KSQL DB
-              </NavLink>
-            </li>
+            <ClusterMenuItem
+              liType="primary"
+              to={clusterKsqlDbPath(name)}
+              activeClassName="is-active"
+              title="KSQL DB"
+            />
           )}
         </ul>
       </li>

kafka-ui-react-app/src/components/Nav/ClusterMenuItem/ClusterMenuItem.tsx

@@ -8,16 +8,23 @@ export interface MenuItemProps {
   activeClassName?: string;
   title?: string;
   isInverted?: boolean;
+  isActive?: (match: unknown, location: Location) => boolean;
 }
 
 const ClusterMenuItem: React.FC<MenuItemProps> = (props) => {
-  const { to, activeClassName, title, children, liType, ...rest } = props;
+  const { to, activeClassName, title, children, liType, isActive, ...rest } =
+    props;
 
   if (to) {
     return (
-      <StyledMenuItem liType={liType} {...rest}>
-        <NavLink to={to} activeClassName={activeClassName} title={title}>
-          {children}
+      <StyledMenuItem to={to} liType={liType}>
+        <NavLink
+          to={to}
+          activeClassName={activeClassName}
+          title={title}
+          {...rest}
+        >
+          {children || title}
         </NavLink>
       </StyledMenuItem>
     );

kafka-ui-react-app/src/components/Nav/__tests__/ClusterMenu.spec.tsx

@@ -22,8 +22,7 @@ describe('ClusterMenu', () => {
       onlineClusterPayload.name
     );
 
-    expect(wrapper.find('ul.menu-list ul > li').length).toEqual(2);
-    expect(wrapper.find('ul.menu-list ul StyledMenuItem').length).toEqual(1);
+    expect(wrapper.find('ul.menu-list ul StyledMenuItem').length).toEqual(3);
   });
 
   it('renders cluster menu with all enabled features', () => {
@@ -36,7 +35,6 @@ describe('ClusterMenu', () => {
         ],
       })
     );
-    expect(wrapper.find('ul.menu-list ul > li').length).toEqual(4);
-    expect(wrapper.find('ul.menu-list ul StyledMenuItem').length).toEqual(1);
+    expect(wrapper.find('ul.menu-list ul StyledMenuItem').length).toEqual(5);
   });
 });