Merge pull request #2495 from headlamp-k8s/allow-details-views-withou…

…t-url-params

frontend: Add optional parameters to all Details components

frontend/src/components/configmap/Details.tsx

@@ -6,8 +6,9 @@ import { DataField, DetailsGrid } from '../common/Resource';
 import { SectionBox } from '../common/SectionBox';
 import { NameValueTable, NameValueTableRow } from '../common/SimpleTable';
 
-export default function ConfigDetails() {
-  const { namespace, name } = useParams<{ namespace: string; name: string }>();
+export default function ConfigDetails(props: { name?: string; namespace?: string }) {
+  const params = useParams<{ namespace: string; name: string }>();
+  const { name = params.name, namespace = params.namespace } = props;
   const { t } = useTranslation(['translation']);
 
   return (

frontend/src/components/cronjob/Details.tsx

@@ -134,8 +134,9 @@ function SpawnJobDialog(props: {
   );
 }
 
-export default function CronJobDetails() {
-  const { namespace, name } = useParams<{ namespace: string; name: string }>();
+export default function CronJobDetails(props: { name?: string; namespace?: string }) {
+  const params = useParams<{ namespace: string; name: string }>();
+  const { name = params.name, namespace = params.namespace } = props;
   const { t, i18n } = useTranslation('glossary');
 
   const [jobs, jobsError] = Job.useList({ namespace });

frontend/src/components/daemonset/Details.tsx

@@ -65,8 +65,9 @@ function TolerationsSection(props: TolerationsSection) {
   );
 }
 
-export default function DaemonSetDetails() {
-  const { namespace, name } = useParams<{ namespace: string; name: string }>();
+export default function DaemonSetDetails(props: { name?: string; namespace?: string }) {
+  const params = useParams<{ namespace: string; name: string }>();
+  const { name = params.name, namespace = params.namespace } = props;
   const { t } = useTranslation(['glossary', 'translation']);
 
   return (

frontend/src/components/endpoints/Details.tsx

@@ -8,8 +8,9 @@ import { DetailsGrid } from '../common/Resource';
 import { SectionBox } from '../common/SectionBox';
 import SimpleTable from '../common/SimpleTable';
 
-export default function EndpointDetails() {
-  const { namespace, name } = useParams<{ namespace: string; name: string }>();
+export default function EndpointDetails(props: { name?: string; namespace?: string }) {
+  const params = useParams<{ namespace: string; name: string }>();
+  const { name = params.name, namespace = params.namespace } = props;
   const location = useLocation();
   const { t } = useTranslation(['glossary', 'translation']);
 

frontend/src/components/horizontalPodAutoscaler/Details.tsx

@@ -3,8 +3,9 @@ import { useParams } from 'react-router-dom';
 import HPA from '../../lib/k8s/hpa';
 import { ConditionsSection, DetailsGrid, Link, SimpleTable } from '../common';
 
-export default function HpaDetails() {
-  const { namespace, name } = useParams<{ namespace: string; name: string }>();
+export default function HpaDetails(props: { name?: string; namespace?: string }) {
+  const params = useParams<{ namespace: string; name: string }>();
+  const { name = params.name, namespace = params.namespace } = props;
   const { t } = useTranslation();
 
   return (

frontend/src/components/ingress/ClassDetails.tsx

@@ -3,8 +3,9 @@ import { useParams } from 'react-router-dom';
 import IngressClass from '../../lib/k8s/ingressClass';
 import { DetailsGrid } from '../common/Resource';
 
-export default function IngressClassDetails() {
-  const { name } = useParams<{ name: string }>();
+export default function IngressClassDetails(props: { name?: string }) {
+  const params = useParams<{ name: string }>();
+  const { name = params.name } = props;
   const { t } = useTranslation('glossary');
 
   return (

frontend/src/components/ingress/Details.tsx

@@ -152,8 +152,9 @@ export function BackendFormat({ backend }: BackendFormatProps) {
   );
 }
 
-export default function IngressDetails() {
-  const { namespace, name } = useParams<{ namespace: string; name: string }>();
+export default function IngressDetails(props: { name?: string; namespace?: string }) {
+  const params = useParams<{ namespace: string; name: string }>();
+  const { name = params.name, namespace = params.namespace } = props;
   const { t } = useTranslation(['glossary', 'translation']);
   const storeRowsPerPageOptions = useSettings('tableRowsPerPageOptions');
 

frontend/src/components/lease/Details.tsx

@@ -3,8 +3,9 @@ import { useParams } from 'react-router';
 import { Lease } from '../../lib/k8s/lease';
 import { DateLabel, DetailsGrid } from '../common';
 
-export function LeaseDetails() {
-  const { namespace, name } = useParams<{ namespace: string; name: string }>();
+export function LeaseDetails(props: { name?: string; namespace?: string }) {
+  const params = useParams<{ namespace: string; name: string }>();
+  const { name = params.name, namespace = params.namespace } = props;
   const { t } = useTranslation();
 
   return (

frontend/src/components/limitRange/Details.tsx

@@ -4,9 +4,10 @@ import { useParams } from 'react-router';
 import { LimitRange } from '../../lib/k8s/limitRange';
 import { DetailsGrid, MetadataDictGrid } from '../common';
 
-export function LimitRangeDetails() {
+export function LimitRangeDetails(props: { name?: string; namespace?: string }) {
+  const params = useParams<{ namespace: string; name: string }>();
+  const { name = params.name, namespace = params.namespace } = props;
   const { t } = useTranslation(['translation']);
-  const { namespace, name } = useParams<{ namespace: string; name: string }>();
   return (
     <DetailsGrid
       resourceType={LimitRange}

frontend/src/components/namespace/Details.tsx

@@ -9,8 +9,9 @@ import DetailsViewSection from '../DetailsViewSection';
 import { LimitRangeRenderer } from '../limitRange/List';
 import { ResourceQuotaRenderer } from '../resourceQuota/List';
 
-export default function NamespaceDetails() {
-  const { name } = useParams<{ name: string }>();
+export default function NamespaceDetails(props: { name?: string }) {
+  const params = useParams<{ name: string }>();
+  const { name = params.name } = props;
   const { t } = useTranslation(['glossary', 'translation']);
 
   function makeStatusLabel(namespace: Namespace | null) {

frontend/src/components/networkpolicy/Details.tsx

@@ -10,9 +10,10 @@ import NetworkPolicy, {
 } from '../../lib/k8s/networkpolicy';
 import { DetailsGrid, metadataStyles, NameValueTable, SectionBox } from '../common';
 
-export function NetworkPolicyDetails() {
+export function NetworkPolicyDetails(props: { name?: string; namespace?: string }) {
+  const params = useParams<{ namespace: string; name: string }>();
+  const { name = params.name, namespace = params.namespace } = props;
   const { t } = useTranslation(['glossary', 'translation']);
-  const { name, namespace } = useParams<{ name: string; namespace: string }>();
 
   function prepareMatchLabelsAndExpressions(
     matchLabels: LabelSelector['matchLabels'],

frontend/src/components/node/Details.tsx

@@ -35,8 +35,9 @@ function NodeConditionsLabel(props: { node: Node }) {
   );
 }
 
-export default function NodeDetails() {
-  const { name } = useParams<{ name: string }>();
+export default function NodeDetails(props: { name?: string }) {
+  const params = useParams<{ name: string }>();
+  const { name = params.name } = props;
   const { t } = useTranslation(['glossary']);
   const dispatch: AppDispatch = useDispatch();
 

frontend/src/components/pod/Details.tsx

@@ -379,11 +379,14 @@ function TolerationsSection(props: { tolerations: any[] }) {
 
 export interface PodDetailsProps {
   showLogsDefault?: boolean;
+  name?: string;
+  namespace?: string;
 }
 
 export default function PodDetails(props: PodDetailsProps) {
   const { showLogsDefault } = props;
-  const { namespace, name } = useParams<{ namespace: string; name: string }>();
+  const params = useParams<{ namespace: string; name: string }>();
+  const { name = params.name, namespace = params.namespace } = props;
   const [showLogs, setShowLogs] = React.useState(!!showLogsDefault);
   const [showTerminal, setShowTerminal] = React.useState(false);
   const { t } = useTranslation('glossary');

frontend/src/components/podDisruptionBudget/Details.tsx

@@ -4,8 +4,9 @@ import { useParams } from 'react-router-dom';
 import PDB from '../../lib/k8s/podDisruptionBudget';
 import { DetailsGrid, StatusLabel } from '../common';
 
-export default function PDBDetails() {
-  const { namespace, name } = useParams<{ namespace: string; name: string }>();
+export default function PDBDetails(props: { name?: string; namespace?: string }) {
+  const params = useParams<{ namespace: string; name: string }>();
+  const { name = params.name, namespace = params.namespace } = props;
 
   function selectorsToJSX(selectors: string[]) {
     const values: ReactNode[] = [];

frontend/src/components/priorityClass/Details.tsx

@@ -3,9 +3,10 @@ import { useParams } from 'react-router-dom';
 import PriorityClass from '../../lib/k8s/priorityClass';
 import { DetailsGrid } from '../common';
 
-export default function PriorityClassDetails() {
+export default function PriorityClassDetails(props: { name?: string }) {
+  const params = useParams<{ namespace: string; name: string }>();
+  const { name = params.name } = props;
   const { t } = useTranslation(['translation']);
-  const { name } = useParams<{ name: string }>();
 
   return (
     <DetailsGrid

frontend/src/components/resourceQuota/Details.tsx

@@ -4,8 +4,9 @@ import ResourceQuota from '../../lib/k8s/resourceQuota';
 import { compareUnits, normalizeUnit } from '../../lib/util';
 import { DetailsGrid, SimpleTable } from '../common';
 
-export default function ResourceQuotaDetails() {
-  const { namespace, name } = useParams<{ namespace: string; name: string }>();
+export default function ResourceQuotaDetails(props: { name?: string; namespace?: string }) {
+  const params = useParams<{ namespace: string; name: string }>();
+  const { name = params.name, namespace = params.namespace } = props;
   const { t } = useTranslation(['translation', 'glossary']);
 
   return (

frontend/src/components/role/BindingDetails.tsx

@@ -7,11 +7,9 @@ import { DetailsGrid } from '../common/Resource';
 import { SectionBox } from '../common/SectionBox';
 import SimpleTable from '../common/SimpleTable';
 
-export default function RoleBindingDetails() {
-  const { namespace = undefined, name } = useParams<{
-    namespace: string | undefined;
-    name: string;
-  }>();
+export default function RoleBindingDetails(props: { name?: string; namespace?: string }) {
+  const params = useParams<{ namespace: string; name: string }>();
+  const { name = params.name, namespace = params.namespace } = props;
   const { t } = useTranslation('glossary');
 
   return (

frontend/src/components/role/Details.tsx

@@ -6,11 +6,9 @@ import { DetailsGrid } from '../common/Resource';
 import { SectionBox } from '../common/SectionBox';
 import SimpleTable from '../common/SimpleTable';
 
-export default function RoleDetails() {
-  const { namespace = undefined, name } = useParams<{
-    namespace: string | undefined;
-    name: string;
-  }>();
+export default function RoleDetails(props: { name?: string; namespace?: string }) {
+  const params = useParams<{ namespace?: string; name: string }>();
+  const { name = params.name, namespace = params.namespace } = props;
   const { t } = useTranslation('glossary');
 
   return (

frontend/src/components/runtimeClass/Details.tsx

@@ -3,9 +3,10 @@ import { useParams } from 'react-router';
 import { RuntimeClass } from '../../lib/k8s/runtime';
 import { DetailsGrid } from '../common';
 
-export function RuntimeClassDetails() {
+export function RuntimeClassDetails(props: { name?: string; namespace?: string }) {
+  const params = useParams<{ namespace: string; name: string }>();
+  const { name = params.name, namespace = params.namespace } = props;
   const { t } = useTranslation(['translation']);
-  const { namespace, name } = useParams<{ namespace: string; name: string }>();
 
   return (
     <DetailsGrid

frontend/src/components/secret/Details.tsx

@@ -6,8 +6,9 @@ import { DetailsGrid, SecretField } from '../common/Resource';
 import { SectionBox } from '../common/SectionBox';
 import { NameValueTable, NameValueTableRow } from '../common/SimpleTable';
 
-export default function SecretDetails() {
-  const { namespace, name } = useParams<{ namespace: string; name: string }>();
+export default function SecretDetails(props: { name?: string; namespace?: string }) {
+  const params = useParams<{ namespace: string; name: string }>();
+  const { name = params.name, namespace = params.namespace } = props;
   const { t } = useTranslation();
 
   return (

frontend/src/components/service/Details.tsx

@@ -14,8 +14,9 @@ import PortForward from '../common/Resource/PortForward';
 import { SectionBox } from '../common/SectionBox';
 import SimpleTable from '../common/SimpleTable';
 
-export default function ServiceDetails() {
-  const { namespace, name } = useParams<{ namespace: string; name: string }>();
+export default function ServiceDetails(props: { name?: string; namespace?: string }) {
+  const params = useParams<{ namespace: string; name: string }>();
+  const { name = params.name, namespace = params.namespace } = props;
   const { t } = useTranslation(['glossary', 'translation']);
 
   const [endpoints, endpointsError] = Endpoint.useList({ namespace });

frontend/src/components/serviceaccount/Details.tsx

@@ -5,8 +5,9 @@ import ServiceAccount from '../../lib/k8s/serviceAccount';
 import { Link } from '../common';
 import { DetailsGrid } from '../common/Resource';
 
-export default function ServiceAccountDetails() {
-  const { namespace, name } = useParams<{ namespace: string; name: string }>();
+export default function ServiceAccountDetails(props: { name?: string; namespace?: string }) {
+  const params = useParams<{ namespace: string; name: string }>();
+  const { name = params.name, namespace = params.namespace } = props;
   const { t } = useTranslation('glossary');
 
   return (

frontend/src/components/statefulset/Details.tsx

@@ -9,8 +9,9 @@ import {
   OwnedPodsSection,
 } from '../common/Resource';
 
-export default function StatefulSetDetails() {
-  const { namespace, name } = useParams<{ namespace: string; name: string }>();
+export default function StatefulSetDetails(props: { name?: string; namespace?: string }) {
+  const params = useParams<{ namespace: string; name: string }>();
+  const { name = params.name, namespace = params.namespace } = props;
   const { t } = useTranslation('glossary');
 
   return (

frontend/src/components/storage/ClaimDetails.tsx

@@ -10,8 +10,9 @@ export function makePVCStatusLabel(item: PersistentVolumeClaim) {
   return StatusLabelByPhase(status!);
 }
 
-export default function VolumeClaimDetails() {
-  const { namespace, name } = useParams<{ namespace: string; name: string }>();
+export default function VolumeClaimDetails(props: { name?: string; namespace?: string }) {
+  const params = useParams<{ namespace: string; name: string }>();
+  const { name = params.name, namespace = params.namespace } = props;
   const { t } = useTranslation(['glossary', 'translation']);
 
   return (

frontend/src/components/storage/ClassDetails.tsx

@@ -4,8 +4,9 @@ import { useParams } from 'react-router-dom';
 import StorageClass from '../../lib/k8s/storageClass';
 import { DetailsGrid } from '../common/Resource';
 
-export default function StorageClassDetails() {
-  const { name } = useParams<{ name: string }>();
+export default function StorageClassDetails(props: { name?: string }) {
+  const params = useParams<{ name: string }>();
+  const { name = params.name } = props;
   const { t } = useTranslation('glossary');
 
   return (

frontend/src/components/storage/VolumeDetails.tsx

@@ -10,8 +10,9 @@ export function makePVStatusLabel(item: PersistentVolume) {
   return StatusLabelByPhase(status);
 }
 
-export default function VolumeDetails() {
-  const { name } = useParams<{ namespace: string; name: string }>();
+export default function VolumeDetails(props: { name?: string }) {
+  const params = useParams<{ name: string }>();
+  const { name = params.name } = props;
   const { t } = useTranslation(['glossary', 'translation']);
 
   return (

frontend/src/components/verticalPodAutoscaler/Details.tsx

@@ -3,8 +3,9 @@ import { useParams } from 'react-router-dom';
 import VPA from '../../lib/k8s/vpa';
 import { DateLabel, DetailsGrid, Link, SectionBox, SimpleTable } from '../common';
 
-export default function VpaDetails() {
-  const { namespace, name } = useParams<{ namespace: string; name: string }>();
+export default function VpaDetails(props: { name?: string; namespace?: string }) {
+  const params = useParams<{ namespace: string; name: string }>();
+  const { name = params.name, namespace = params.namespace } = props;
   const { t } = useTranslation(['translation', 'glossary']);
   const formatRecommendation = (data: Record<string, string>): string => {
     let result = '';

frontend/src/components/webhookconfiguration/MutatingWebhookConfigDetails.tsx

@@ -2,8 +2,9 @@ import { useParams } from 'react-router-dom';
 import MutatingWebhookConfiguration from '../../lib/k8s/mutatingWebhookConfiguration';
 import WebhookConfigurationDetails from './Details';
 
-export default function MutatingWebhookConfigList() {
-  const { name } = useParams<{ name: string }>();
+export default function MutatingWebhookConfigList(props: { name?: string }) {
+  const params = useParams<{ name: string }>();
+  const { name = params.name } = props;
 
   return <WebhookConfigurationDetails resourceClass={MutatingWebhookConfiguration} name={name} />;
 }

frontend/src/components/webhookconfiguration/ValidatingWebhookConfigDetails.tsx

@@ -2,8 +2,9 @@ import { useParams } from 'react-router-dom';
 import ValidatingWebhookConfiguration from '../../lib/k8s/validatingWebhookConfiguration';
 import WebhookConfigurationDetails from './Details';
 
-export default function ValidatingWebhookConfigurationDetails() {
-  const { name } = useParams<{ name: string }>();
+export default function ValidatingWebhookConfigurationDetails(props: { name?: string }) {
+  const params = useParams<{ name: string }>();
+  const { name = params.name } = props;
 
   return <WebhookConfigurationDetails resourceClass={ValidatingWebhookConfiguration} name={name} />;
 }

frontend/src/components/workload/Details.tsx

@@ -12,10 +12,13 @@ import {
 
 interface WorkloadDetailsProps<T extends WorkloadClass> {
   workloadKind: T;
+  name?: string;
+  namespace?: string;
 }
 
 export default function WorkloadDetails<T extends WorkloadClass>(props: WorkloadDetailsProps<T>) {
-  const { namespace, name } = useParams<{ namespace: string; name: string }>();
+  const params = useParams<{ namespace: string; name: string }>();
+  const { name = params.name, namespace = params.namespace } = props;
   const { workloadKind } = props;
   const { t } = useTranslation(['glossary', 'translation']);