FE: Improve cluster's resources navigation (#1133)

Author: Vixtir

frontend/src/components/ACLPage/List/List.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { ColumnDef, Row } from '@tanstack/react-table';
-import PageHeading from 'components/common/PageHeading/PageHeading';
 import Table from 'components/common/NewTable';
 import { useConfirm } from 'lib/hooks/useConfirm';
 import useAppParams from 'lib/hooks/useAppParams';
@@ -20,6 +19,7 @@ import { useTheme } from 'styled-components';
 import ACLFormContext from 'components/ACLPage/Form/AclFormContext';
 import PlusIcon from 'components/common/Icons/PlusIcon';
 import ActionButton from 'components/common/ActionComponent/ActionButton/ActionButton';
+import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
 
 import * as S from './List.styled';
 
@@ -149,7 +149,7 @@ const ACList: React.FC = () => {
 
   return (
     <S.Container>
-      <PageHeading text="Access Control List">
+      <ResourcePageHeading text="Access Control List">
         <ActionButton
           buttonType="primary"
           buttonSize="M"
@@ -161,7 +161,7 @@ const ACList: React.FC = () => {
         >
           <PlusIcon /> Create ACL
         </ActionButton>
-      </PageHeading>
+      </ResourcePageHeading>
       <Table
         columns={columns}
         data={aclList ?? []}

frontend/src/components/Brokers/Broker/Broker.tsx

@@ -1,5 +1,4 @@
 import React, { Suspense } from 'react';
-import PageHeading from 'components/common/PageHeading/PageHeading';
 import * as Metrics from 'components/common/Metrics';
 import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
 import useAppParams from 'lib/hooks/useAppParams';
@@ -21,6 +20,7 @@ import Navbar from 'components/common/Navigation/Navbar.styled';
 import PageLoader from 'components/common/PageLoader/PageLoader';
 import { ActionNavLink } from 'components/common/ActionComponent';
 import { Action, ResourceType } from 'generated-sources';
+import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
 
 import Configs from './Configs/Configs';
 
@@ -38,7 +38,7 @@ const Broker: React.FC = () => {
   );
   return (
     <>
-      <PageHeading
+      <ResourcePageHeading
         text={`Broker ${brokerId}`}
         backTo={clusterBrokersPath(clusterName)}
         backText="Brokers"

frontend/src/components/Brokers/BrokersList/BrokersList.tsx

@@ -1,12 +1,12 @@
 import React, { useMemo } from 'react';
 import { ClusterName } from 'lib/interfaces/cluster';
 import { useNavigate } from 'react-router-dom';
-import PageHeading from 'components/common/PageHeading/PageHeading';
 import useAppParams from 'lib/hooks/useAppParams';
 import Table from 'components/common/NewTable';
 import { clusterBrokerPath } from 'lib/paths';
 import { useBrokers } from 'lib/hooks/api/brokers';
 import { useClusterStats } from 'lib/hooks/api/clusters';
+import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
 
 import { BrokersMetrics } from './BrokersMetrics/BrokersMetrics';
 import { getBrokersTableColumns, getBrokersTableRows } from './lib';
@@ -45,7 +45,7 @@ const BrokersList: React.FC = () => {
 
   return (
     <>
-      <PageHeading text="Brokers" />
+      <ResourcePageHeading text="Brokers" />
 
       <BrokersMetrics
         brokerCount={brokerCount}

frontend/src/components/Connect/Details/DetailsPage.tsx

@@ -9,8 +9,8 @@ import {
   RouterParamsClusterConnectConnector,
 } from 'lib/paths';
 import Navbar from 'components/common/Navigation/Navbar.styled';
-import PageHeading from 'components/common/PageHeading/PageHeading';
 import PageLoader from 'components/common/PageLoader/PageLoader';
+import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
 
 import Overview from './Overview/Overview';
 import Tasks from './Tasks/Tasks';
@@ -23,13 +23,13 @@ const DetailsPage: React.FC = () => {
 
   return (
     <div>
-      <PageHeading
+      <ResourcePageHeading
         text={connectorName}
         backTo={clusterConnectorsPath(clusterName)}
         backText="Connectors"
       >
         <Actions />
-      </PageHeading>
+      </ResourcePageHeading>
       <Overview />
       <Navbar role="navigation">
         <NavLink

frontend/src/components/Connect/List/ListPage.tsx

@@ -4,13 +4,13 @@ import { ClusterNameRoute, clusterConnectorNewRelativePath } from 'lib/paths';
 import ClusterContext from 'components/contexts/ClusterContext';
 import Search from 'components/common/Search/Search';
 import * as Metrics from 'components/common/Metrics';
-import PageHeading from 'components/common/PageHeading/PageHeading';
 import Tooltip from 'components/common/Tooltip/Tooltip';
 import { ControlPanelWrapper } from 'components/common/ControlPanel/ControlPanel.styled';
 import PageLoader from 'components/common/PageLoader/PageLoader';
 import { ConnectorState, Action, ResourceType } from 'generated-sources';
 import { useConnectors, useConnects } from 'lib/hooks/api/kafkaConnect';
 import { ActionButton } from 'components/common/ActionComponent';
+import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
 
 import List from './List';
 
@@ -33,7 +33,7 @@ const ListPage: React.FC = () => {
 
   return (
     <>
-      <PageHeading text="Connectors">
+      <ResourcePageHeading text="Connectors">
         {!isReadOnly && (
           <Tooltip
             value={
@@ -55,7 +55,7 @@ const ListPage: React.FC = () => {
             placement="left"
           />
         )}
-      </PageHeading>
+      </ResourcePageHeading>
       <Metrics.Wrapper>
         <Metrics.Section>
           <Metrics.Indicator

frontend/src/components/Connect/New/New.tsx

@@ -15,10 +15,10 @@ import Select from 'components/common/Select/Select';
 import { FormError } from 'components/common/Input/Input.styled';
 import Input from 'components/common/Input/Input';
 import { Button } from 'components/common/Button/Button';
-import PageHeading from 'components/common/PageHeading/PageHeading';
 import Heading from 'components/common/heading/Heading.styled';
 import { useConnects, useCreateConnector } from 'lib/hooks/api/kafkaConnect';
 import { Connect } from 'generated-sources';
+import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
 
 import * as S from './New.styled';
 
@@ -94,7 +94,7 @@ const New: React.FC = () => {
 
   return (
     <FormProvider {...methods}>
-      <PageHeading
+      <ResourcePageHeading
         text="Create new connector"
         backTo={clusterConnectorsPath(clusterName)}
         backText="Connectors"

frontend/src/components/ConsumerGroups/Details/Details.tsx

@@ -8,7 +8,6 @@ import {
 } from 'lib/paths';
 import Search from 'components/common/Search/Search';
 import ClusterContext from 'components/contexts/ClusterContext';
-import PageHeading from 'components/common/PageHeading/PageHeading';
 import * as Metrics from 'components/common/Metrics';
 import { Tag } from 'components/common/Tag/Tag.styled';
 import groupBy from 'lib/functions/groupBy';
@@ -25,6 +24,7 @@ import {
 } from 'lib/hooks/api/consumers';
 import Tooltip from 'components/common/Tooltip/Tooltip';
 import { CONSUMER_GROUP_STATE_TOOLTIPS } from 'lib/constants';
+import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
 
 import ListItem from './ListItem';
 
@@ -64,7 +64,7 @@ const Details: React.FC = () => {
   return (
     <div>
       <div>
-        <PageHeading
+        <ResourcePageHeading
           text={consumerGroupID}
           backTo={clusterConsumerGroupsPath(clusterName)}
           backText="Consumers"
@@ -96,7 +96,7 @@ const Details: React.FC = () => {
               </ActionDropdownItem>
             </Dropdown>
           )}
-        </PageHeading>
+        </ResourcePageHeading>
       </div>
       <Metrics.Wrapper>
         <Metrics.Section>

frontend/src/components/ConsumerGroups/Details/ResetOffsets/ResetOffsets.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { clusterConsumerGroupsPath, ClusterGroupParam } from 'lib/paths';
 import 'react-datepicker/dist/react-datepicker.css';
-import PageHeading from 'components/common/PageHeading/PageHeading';
 import useAppParams from 'lib/hooks/useAppParams';
 import { useConsumerGroupDetails } from 'lib/hooks/api/consumers';
 import PageLoader from 'components/common/PageLoader/PageLoader';
+import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
 import {
   ConsumerGroupOffsetsReset,
   ConsumerGroupOffsetsResetType,
@@ -37,7 +37,7 @@ const ResetOffsets: React.FC = () => {
 
   return (
     <>
-      <PageHeading
+      <ResourcePageHeading
         text={consumerGroupID}
         backTo={clusterConsumerGroupsPath(routerParams.clusterName)}
         backText="Consumers"

frontend/src/components/ConsumerGroups/List.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PageHeading from 'components/common/PageHeading/PageHeading';
 import Search from 'components/common/Search/Search';
 import { ControlPanelWrapper } from 'components/common/ControlPanel/ControlPanel.styled';
 import {
@@ -16,6 +15,7 @@ import { useNavigate, useSearchParams } from 'react-router-dom';
 import { CONSUMER_GROUP_STATE_TOOLTIPS, PER_PAGE } from 'lib/constants';
 import { useConsumerGroups } from 'lib/hooks/api/consumers';
 import Tooltip from 'components/common/Tooltip/Tooltip';
+import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
 
 const List = () => {
   const { clusterName } = useAppParams<ClusterNameRoute>();
@@ -92,7 +92,7 @@ const List = () => {
 
   return (
     <>
-      <PageHeading text="Consumers" />
+      <ResourcePageHeading text="Consumers" />
       <ControlPanelWrapper hasInput>
         <Search placeholder="Search by Consumer Group ID" />
       </ControlPanelWrapper>

frontend/src/components/KsqlDb/KsqlDb.tsx

@@ -10,13 +10,13 @@ import {
   clusterKsqlDbTablesRelativePath,
   ClusterNameRoute,
 } from 'lib/paths';
-import PageHeading from 'components/common/PageHeading/PageHeading';
 import { ActionButton } from 'components/common/ActionComponent';
 import Navbar from 'components/common/Navigation/Navbar.styled';
 import { Navigate, NavLink, Route, Routes } from 'react-router-dom';
 import { Action, ResourceType } from 'generated-sources';
 import { useKsqlkDb } from 'lib/hooks/api/ksqlDb';
 import 'ace-builds/src-noconflict/ace';
+import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
 
 import TableView from './TableView';
 
@@ -29,7 +29,7 @@ const KsqlDb: React.FC = () => {
 
   return (
     <>
-      <PageHeading text="KSQL DB">
+      <ResourcePageHeading text="KSQL DB">
         <ActionButton
           to={clusterKsqlDbQueryRelativePath}
           buttonType="primary"
@@ -41,7 +41,7 @@ const KsqlDb: React.FC = () => {
         >
           Execute KSQL Request
         </ActionButton>
-      </PageHeading>
+      </ResourcePageHeading>
       <Metrics.Wrapper>
         <Metrics.Section>
           <Metrics.Indicator

frontend/src/components/Nav/ClusterMenu/ClusterMenu.tsx

@@ -5,7 +5,6 @@ import MenuTab from 'components/Nav/Menu/MenuTab';
 import MenuItem from 'components/Nav/Menu/MenuItem';
 import {
   clusterACLPath,
-  clusterBrokerPath,
   clusterBrokersPath,
   clusterConnectorsPath,
   clusterConsumerGroupsPath,
@@ -16,45 +15,50 @@ import {
 import { useLocation } from 'react-router-dom';
 import { useLocalStorage } from 'lib/hooks/useLocalStorage';
 import { ClusterColorKey } from 'theme/theme';
+import useScrollIntoView from 'lib/hooks/useScrollIntoView';
 
 interface ClusterMenuProps {
   name: Cluster['name'];
   status: Cluster['status'];
   features: Cluster['features'];
-  singleMode?: boolean;
+  opened?: boolean;
 }
 
 const ClusterMenu: FC<ClusterMenuProps> = ({
   name,
   status,
   features,
-  singleMode,
+  opened = false,
 }) => {
   const hasFeatureConfigured = (key: ClusterFeaturesEnum) =>
     features?.includes(key);
-  const [isOpen, setIsOpen] = useState(!!singleMode);
+  const [isOpen, setIsOpen] = useState(!!opened);
   const location = useLocation();
   const [colorKey, setColorKey] = useLocalStorage<ClusterColorKey>(
     `clusterColor-${name}`,
     'transparent'
   );
 
-  const getIsMenuItemActive = (path: string) =>
-    location.pathname.includes(path);
+  const getIsMenuItemActive = (path: string) => {
+    return location.pathname.includes(path);
+  };
+
+  const { ref } = useScrollIntoView<HTMLUListElement>(opened);
 
   return (
-    <S.ClusterList role="menu" $colorKey={colorKey}>
+    <S.ClusterList role="menu" $colorKey={colorKey} ref={ref}>
       <MenuTab
         title={name}
         status={status}
         isOpen={isOpen}
         toggleClusterMenu={() => setIsOpen((prev) => !prev)}
         setColorKey={setColorKey}
+        isActive={opened}
       />
       {isOpen && (
         <S.List>
           <MenuItem
-            isActive={getIsMenuItemActive(clusterBrokerPath(name))}
+            isActive={getIsMenuItemActive(clusterBrokersPath(name))}
             to={clusterBrokersPath(name)}
             title="Brokers"
           />

frontend/src/components/Nav/ClusterMenu/__tests__/ClusterMenu.spec.tsx

@@ -7,13 +7,18 @@ import { clusterConnectorsPath } from 'lib/paths';
 import { render } from 'lib/testHelpers';
 import { onlineClusterPayload } from 'lib/fixtures/clusters';
 
+/*
+ Due to jsdom doesnt know about scrollIntoView
+*/
+window.HTMLElement.prototype.scrollIntoView = jest.fn();
+
 describe('ClusterMenu', () => {
-  const setupComponent = (cluster: Cluster, singleMode?: boolean) => (
+  const setupComponent = (cluster: Cluster, opened?: boolean) => (
     <ClusterMenu
       name={cluster.name}
       status={cluster.status}
       features={cluster.features}
-      singleMode={singleMode}
+      opened={opened}
     />
   );
   const getMenuItems = () => screen.getAllByRole('menuitem');

frontend/src/components/Nav/Menu/MenuTab.tsx

@@ -11,6 +11,7 @@ export interface MenuTabProps {
   isOpen: boolean;
   toggleClusterMenu: () => void;
   setColorKey: Dispatch<SetStateAction<ClusterColorKey>>;
+  isActive?: boolean;
 }
 
 const MenuTab: FC<MenuTabProps> = ({
@@ -19,8 +20,13 @@ const MenuTab: FC<MenuTabProps> = ({
   status,
   isOpen,
   setColorKey,
+  isActive = false,
 }) => (
-  <S.MenuItem $variant="primary" onClick={toggleClusterMenu}>
+  <S.MenuItem
+    $variant="primary"
+    onClick={toggleClusterMenu}
+    $isActive={isActive}
+  >
     <S.ContentWrapper>
       <S.StatusIconWrapper>
         <S.StatusIcon status={status} aria-label="status">