remove clusterName from PageHeading props

Nilumilak · Nilumilak · commit 33878e50b6a7 · 2025-05-01T22:06:44.000+03:00
diff --git a/frontend/src/components/ACLPage/List/List.tsx b/frontend/src/components/ACLPage/List/List.tsx
@@ -149,7 +149,7 @@ const ACList: React.FC = () => {
 
   return (
     <S.Container>
-      <PageHeading clusterName={clusterName} text="Access Control List">
+      <PageHeading text="Access Control List">
         <ActionButton
           buttonType="primary"
           buttonSize="M"
diff --git a/frontend/src/components/Brokers/Broker/Broker.tsx b/frontend/src/components/Brokers/Broker/Broker.tsx
@@ -39,7 +39,6 @@ const Broker: React.FC = () => {
   return (
     <>
       <PageHeading
-        clusterName={clusterName}
         text={`Broker ${brokerId}`}
         backTo={clusterBrokersPath(clusterName)}
         backText="Brokers"
diff --git a/frontend/src/components/Brokers/BrokersList/BrokersList.tsx b/frontend/src/components/Brokers/BrokersList/BrokersList.tsx
@@ -45,7 +45,7 @@ const BrokersList: React.FC = () => {
 
   return (
     <>
-      <PageHeading clusterName={clusterName} text="Brokers" />
+      <PageHeading text="Brokers" />
 
       <BrokersMetrics
         brokerCount={brokerCount}
diff --git a/frontend/src/components/Connect/Details/DetailsPage.tsx b/frontend/src/components/Connect/Details/DetailsPage.tsx
@@ -24,7 +24,6 @@ const DetailsPage: React.FC = () => {
   return (
     <div>
       <PageHeading
-        clusterName={clusterName}
         text={connectorName}
         backTo={clusterConnectorsPath(clusterName)}
         backText="Connectors"
diff --git a/frontend/src/components/Connect/List/ListPage.tsx b/frontend/src/components/Connect/List/ListPage.tsx
@@ -33,7 +33,7 @@ const ListPage: React.FC = () => {
 
   return (
     <>
-      <PageHeading clusterName={clusterName} text="Connectors">
+      <PageHeading text="Connectors">
         {!isReadOnly && (
           <Tooltip
             value={
diff --git a/frontend/src/components/Connect/New/New.tsx b/frontend/src/components/Connect/New/New.tsx
@@ -95,7 +95,6 @@ const New: React.FC = () => {
   return (
     <FormProvider {...methods}>
       <PageHeading
-        clusterName={clusterName}
         text="Create new connector"
         backTo={clusterConnectorsPath(clusterName)}
         backText="Connectors"
diff --git a/frontend/src/components/ConsumerGroups/Details/Details.tsx b/frontend/src/components/ConsumerGroups/Details/Details.tsx
@@ -65,7 +65,6 @@ const Details: React.FC = () => {
     <div>
       <div>
         <PageHeading
-          clusterName={clusterName}
           text={consumerGroupID}
           backTo={clusterConsumerGroupsPath(clusterName)}
           backText="Consumers"
diff --git a/frontend/src/components/ConsumerGroups/Details/ResetOffsets/ResetOffsets.tsx b/frontend/src/components/ConsumerGroups/Details/ResetOffsets/ResetOffsets.tsx
@@ -38,7 +38,6 @@ const ResetOffsets: React.FC = () => {
   return (
     <>
       <PageHeading
-        clusterName={routerParams.clusterName}
         text={consumerGroupID}
         backTo={clusterConsumerGroupsPath(routerParams.clusterName)}
         backText="Consumers"
diff --git a/frontend/src/components/ConsumerGroups/List.tsx b/frontend/src/components/ConsumerGroups/List.tsx
@@ -92,7 +92,7 @@ const List = () => {
 
   return (
     <>
-      <PageHeading clusterName={clusterName} text="Consumers" />
+      <PageHeading text="Consumers" />
       <ControlPanelWrapper hasInput>
         <Search placeholder="Search by Consumer Group ID" />
       </ControlPanelWrapper>
diff --git a/frontend/src/components/KsqlDb/KsqlDb.tsx b/frontend/src/components/KsqlDb/KsqlDb.tsx
@@ -29,7 +29,7 @@ const KsqlDb: React.FC = () => {
 
   return (
     <>
-      <PageHeading clusterName={clusterName} text="KSQL DB">
+      <PageHeading text="KSQL DB">
         <ActionButton
           to={clusterKsqlDbQueryRelativePath}
           buttonType="primary"
diff --git a/frontend/src/components/Schemas/Details/Details.tsx b/frontend/src/components/Schemas/Details/Details.tsx
@@ -72,7 +72,6 @@ const Details: React.FC = () => {
   return (
     <>
       <PageHeading
-        clusterName={clusterName}
         text={schema?.subject || ''}
         backText="Schema Registry"
         backTo={clusterSchemasPath(clusterName)}
diff --git a/frontend/src/components/Schemas/Diff/Diff.tsx b/frontend/src/components/Schemas/Diff/Diff.tsx
@@ -58,7 +58,6 @@ const Diff: React.FC = () => {
   return (
     <>
       <PageHeading
-        clusterName={clusterName}
         text={`${subject} compare versions`}
         backText="Schema Registry"
         backTo={clusterSchemasPath(clusterName)}
diff --git a/frontend/src/components/Schemas/Edit/Form.tsx b/frontend/src/components/Schemas/Edit/Form.tsx
@@ -95,7 +95,6 @@ const Form: React.FC<FormProps> = ({ schema }) => {
   return (
     <FormProvider {...methods}>
       <PageHeading
-        clusterName={clusterName}
         text={`${subject} Edit`}
         backText="Schema Registry"
         backTo={clusterSchemasPath(clusterName)}
diff --git a/frontend/src/components/Schemas/List/List.tsx b/frontend/src/components/Schemas/List/List.tsx
@@ -60,7 +60,7 @@ const List: React.FC = () => {
 
   return (
     <>
-      <PageHeading clusterName={clusterName} text="Schema Registry">
+      <PageHeading text="Schema Registry">
         {!isReadOnly && (
           <>
             <GlobalSchemaSelector />
diff --git a/frontend/src/components/Schemas/New/New.tsx b/frontend/src/components/Schemas/New/New.tsx
@@ -72,7 +72,6 @@ const New: React.FC = () => {
   return (
     <FormProvider {...methods}>
       <PageHeading
-        clusterName={clusterName}
         text="Create"
         backText="Schema Registry"
         backTo={clusterSchemasPath(clusterName)}
diff --git a/frontend/src/components/Topics/List/ListPage.tsx b/frontend/src/components/Topics/List/ListPage.tsx
@@ -1,12 +1,11 @@
 import React, { Suspense } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { ClusterNameRoute, clusterTopicNewRelativePath } from 'lib/paths';
+import { clusterTopicNewRelativePath } from 'lib/paths';
 import { PER_PAGE } from 'lib/constants';
 import ClusterContext from 'components/contexts/ClusterContext';
 import Search from 'components/common/Search/Search';
 import { ActionButton } from 'components/common/ActionComponent';
 import PageHeading from 'components/common/PageHeading/PageHeading';
-import useAppParams from 'lib/hooks/useAppParams';
 import { ControlPanelWrapper } from 'components/common/ControlPanel/ControlPanel.styled';
 import Switch from 'components/common/Switch/Switch';
 import PlusIcon from 'components/common/Icons/PlusIcon';
@@ -16,7 +15,6 @@ import { Action, ResourceType } from 'generated-sources';
 
 const ListPage: React.FC = () => {
   const { isReadOnly } = React.useContext(ClusterContext);
-  const { clusterName } = useAppParams<ClusterNameRoute>();
   const [searchParams, setSearchParams] = useSearchParams();
 
   // Set the search params to the url based on the localStorage value
@@ -48,7 +46,7 @@ const ListPage: React.FC = () => {
 
   return (
     <>
-      <PageHeading clusterName={clusterName} text="Topics">
+      <PageHeading text="Topics">
         {!isReadOnly && (
           <ActionButton
             buttonType="primary"
diff --git a/frontend/src/components/Topics/New/New.tsx b/frontend/src/components/Topics/New/New.tsx
@@ -50,7 +50,6 @@ const New: React.FC = () => {
   return (
     <>
       <PageHeading
-        clusterName={clusterName}
         text={search ? 'Copy' : 'Create'}
         backText="Topics"
         backTo={clusterTopicsPath(clusterName)}
diff --git a/frontend/src/components/Topics/Topic/Topic.tsx b/frontend/src/components/Topics/Topic/Topic.tsx
@@ -68,7 +68,6 @@ const Topic: React.FC = () => {
   return (
     <>
       <PageHeading
-        clusterName={clusterName}
         text={topicName}
         backText="Topics"
         backTo={clusterTopicsPath(clusterName)}
diff --git a/frontend/src/components/common/PageHeading/PageHeading.tsx b/frontend/src/components/common/PageHeading/PageHeading.tsx
@@ -1,23 +1,24 @@
 import React, { PropsWithChildren } from 'react';
 import Heading from 'components/common/heading/Heading.styled';
+import { ClusterGroupParam } from 'lib/paths';
+import useAppParams from 'lib/hooks/useAppParams';
 
 import * as S from './PageHeading.styled';
 
 interface PageHeadingProps {
   text: string;
-  clusterName?: string;
   backTo?: string;
   backText?: string;
 }
 
 const PageHeading: React.FC<PropsWithChildren<PageHeadingProps>> = ({
   text,
-  clusterName,
   backTo,
   backText,
   children,
 }) => {
   const isBackButtonVisible = backTo && backText;
+  const { clusterName } = useAppParams<ClusterGroupParam>();
 
   return (
     <S.Wrapper>
