fix: move selectedInterface state into the url

src/views/states/list/StatesList.tsx

@@ -22,12 +22,13 @@ import { paginationDefaultValues } from '@utils/hooks/usePagination/utils/consta
 import InterfaceDrawer from './components/InterfaceDrawer/InterfaceDrawer';
 import StateRow from './components/StateRow';
 import StatusBox from './components/StatusBox';
-import { DrawerContextProvider } from './contexts/DrawerContext';
+import useDrawerInterface from './hooks/useDrawerInterface';
 import useStateColumns from './hooks/useStateColumns';
 import useStateFilters from './hooks/useStateFilters';
 
 const StatesList: FC = () => {
   const { t } = useNMStateTranslation();
+  const { selectedInterfaceName, selectedStateName, selectedInterfaceType } = useDrawerInterface();
 
   const [states, statesLoaded, statesError] = useK8sWatchResource<V1beta1NodeNetworkState[]>({
     groupVersionKind: NodeNetworkStateModelGroupVersionKind,
@@ -36,14 +37,19 @@ const StatesList: FC = () => {
   });
 
   const { onPaginationChange, pagination } = usePagination();
+  const selectedState = states?.find((state) => state.metadata.name === selectedStateName);
+  const selectedInterface = selectedState?.status?.currentState?.interfaces?.find(
+    (iface) => iface.name === selectedInterfaceName && iface.type === selectedInterfaceType,
+  );
+
   const [columns, activeColumns] = useStateColumns();
   const filters = useStateFilters();
   const [data, filteredData, onFilterChange] = useListPageFilter(states, filters);
 
   const paginatedData = filteredData.slice(pagination?.startIndex, pagination?.endIndex + 1);
 
   return (
-    <DrawerContextProvider>
+    <>
       <ListPageHeader title={t(NodeNetworkStateModel.label)}></ListPageHeader>
       <ListPageBody>
         <StatusBox loaded={statesLoaded} error={statesError} data={states}>
@@ -106,8 +112,8 @@ const StatesList: FC = () => {
           </Table>
         </StatusBox>
       </ListPageBody>
-      <InterfaceDrawer />
-    </DrawerContextProvider>
+      <InterfaceDrawer selectedInterface={selectedInterface} />
+    </>
   );
 };
 

src/views/states/list/components/InterfaceDrawer/InterfaceDrawer.tsx

@@ -1,21 +1,24 @@
 import React, { FC, useCallback } from 'react';
 
 import { Modal, Title } from '@patternfly/react-core';
+import { NodeNetworkConfigurationInterface } from '@types';
 import { useNMStateTranslation } from '@utils/hooks/useNMStateTranslation';
 
-import { useDrawerContext } from '../../contexts/DrawerContext';
+import useDrawerInterface from '../../hooks/useDrawerInterface';
 
 import { InterfaceDrawerTabId, InterfaceDrawerTabProps } from './constants';
 import InterfaceDrawerDetailsTab from './InterfaceDrawerDetailsTab';
 import InterfaceDrawerYAMLFooter from './InterfaceDrawerFooter';
 import InterfaceDrawerYAMLTab from './InterfaceDrawerYAMLTab';
 
-const InterfaceDrawer: FC = () => {
+const InterfaceDrawer: FC<{ selectedInterface: NodeNetworkConfigurationInterface }> = ({
+  selectedInterface,
+}) => {
   const { t } = useNMStateTranslation();
-  const { selectedInterface, setSelectedInterface } = useDrawerContext();
+  const { setSelectedInterfaceName } = useDrawerInterface();
 
   const onClose = useCallback(() => {
-    setSelectedInterface(null);
+    setSelectedInterfaceName();
   }, []);
 
   const Tabs: InterfaceDrawerTabProps[] = [
@@ -61,7 +64,10 @@ const InterfaceDrawer: FC = () => {
               }`}
               data-test={`horizontal-tab-${tab.id}`}
             >
-              <a data-test-id="horizontal-link-Details" href={`${location.pathname}#${tab.id}`}>
+              <a
+                data-test-id="horizontal-link-Details"
+                href={`${location.pathname}${location.search}#${tab.id}`}
+              >
                 {tab.title}
               </a>
             </li>

src/views/states/list/components/InterfacesPopoverBody.tsx

@@ -1,4 +1,6 @@
 import React, { FC, useCallback } from 'react';
+import { useHistory } from 'react-router';
+import NodeNetworkStateModel from 'src/console-models/NodeNetworkStateModel';
 
 import {
   Button,
@@ -11,8 +13,7 @@ import {
 } from '@patternfly/react-core';
 import { LongArrowAltDownIcon, LongArrowAltUpIcon } from '@patternfly/react-icons';
 import { NodeNetworkConfigurationInterface } from '@types';
-
-import { useDrawerContext } from '../contexts/DrawerContext';
+import { getResourceUrl } from '@utils/helpers';
 
 import './interfaces-popover-body.scss';
 
@@ -26,14 +27,21 @@ const FirstColumn = ({ children }) => <FlexItem flex={{ default: 'flex_1' }}>{ch
 const SecondColumn = ({ children }) => <FlexItem flex={{ default: 'flex_3' }}>{children}</FlexItem>;
 
 const InterfacesPopoverBody: FC<InterfacesPopoverBodyProps> = ({ interfaces, hide }) => {
-  const { setSelectedInterface } = useDrawerContext();
+  const history = useHistory();
 
   const onInterfaceNameClick = useCallback(
     (iface: NodeNetworkConfigurationInterface) => {
-      setSelectedInterface(iface);
+      const baseListUrl = getResourceUrl({ model: NodeNetworkStateModel });
+
+      const query = new URLSearchParams({
+        selectedInterface: iface.name,
+      });
+
+      history.push(`${baseListUrl}?${query.toString()}`);
+
       hide();
     },
-    [hide, setSelectedInterface],
+    [hide],
   );
 
   return (

src/views/states/list/components/InterfacesTable.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 
 import { Table, TableGridBreakpoint, TableHeader, Tbody } from '@patternfly/react-table';
-import { NodeNetworkConfigurationInterface } from '@types';
+import { NodeNetworkConfigurationInterface, V1beta1NodeNetworkState } from '@types';
 
 import useInterfaceColumns from '../hooks/useInterfaceColumns';
 
@@ -11,9 +11,10 @@ import './interfaces-table.scss';
 
 interface InterfacesTableProps {
   interfacesByType: { [interfaceType in string]: NodeNetworkConfigurationInterface[] };
+  nodeNetworkState: V1beta1NodeNetworkState;
 }
 
-const InterfacesTable: FC<InterfacesTableProps> = ({ interfacesByType }) => {
+const InterfacesTable: FC<InterfacesTableProps> = ({ interfacesByType, nodeNetworkState }) => {
   const columns = useInterfaceColumns();
 
   return (
@@ -30,6 +31,7 @@ const InterfacesTable: FC<InterfacesTableProps> = ({ interfacesByType }) => {
             key={interfaceType}
             interfaceType={interfaceType}
             interfaces={interfacesByType[interfaceType]}
+            nodeNetworkState={nodeNetworkState}
           />
         ))}
       </Tbody>

src/views/states/list/components/InterfacesTypeSection.tsx

@@ -11,22 +11,23 @@ import {
 } from '@patternfly/react-core';
 import { LongArrowAltDownIcon, LongArrowAltUpIcon } from '@patternfly/react-icons';
 import { Td, Tr } from '@patternfly/react-table';
-import { NodeNetworkConfigurationInterface } from '@types';
+import { NodeNetworkConfigurationInterface, V1beta1NodeNetworkState } from '@types';
 
-import { useDrawerContext } from '../contexts/DrawerContext';
+import useDrawerInterface from '../hooks/useDrawerInterface';
 
 import './interfaces-table.scss';
 
 interface InterfacesTypeSectionProps {
   interfaces: NodeNetworkConfigurationInterface[];
   interfaceType: string;
+  nodeNetworkState: V1beta1NodeNetworkState;
 }
 
 const InterfacesTypeSection: FC<InterfacesTypeSectionProps> = memo(
-  ({ interfaceType, interfaces }) => {
+  ({ interfaceType, interfaces, nodeNetworkState }) => {
     const [isExpanded, setIsExpanded] = useState(false);
 
-    const { setSelectedInterface } = useDrawerContext();
+    const { setSelectedInterfaceName } = useDrawerInterface();
 
     return (
       <>
@@ -57,7 +58,7 @@ const InterfacesTypeSection: FC<InterfacesTypeSectionProps> = memo(
               <Td className="pf-m-width-30">
                 <Button
                   variant={ButtonVariant.link}
-                  onClick={() => setSelectedInterface(iface)}
+                  onClick={() => setSelectedInterfaceName(nodeNetworkState, iface)}
                   data-test={`${interfaceType}-${iface.name}-open-drawer`}
                 >
                   {iface.name}

src/views/states/list/components/StateRow.tsx

@@ -88,7 +88,7 @@ const StateRow: FC<RowProps<V1beta1NodeNetworkState, { rowIndex: number }>> = ({
               </small>
             </Title>
 
-            <InterfacesTable interfacesByType={interfacesByType} />
+            <InterfacesTable interfacesByType={interfacesByType} nodeNetworkState={obj} />
           </ExpandableRowContent>
         </Td>
       </Tr>

src/views/states/list/constants.ts

@@ -0,0 +1,5 @@
+import NodeNetworkStateModel from 'src/console-models/NodeNetworkStateModel';
+
+import { getResourceUrl } from '@utils/helpers';
+
+export const baseListUrl = getResourceUrl({ model: NodeNetworkStateModel });

src/views/states/list/hooks/useDrawerInterface.ts

@@ -0,0 +1,38 @@
+import { useHistory, useLocation } from 'react-router';
+
+import { NodeNetworkConfigurationInterface, V1beta1NodeNetworkState } from '@types';
+
+import { baseListUrl } from '../constants';
+
+const useDrawerInterface = () => {
+  const history = useHistory();
+  const { search } = useLocation();
+
+  const params = new URLSearchParams(search);
+
+  const selectedInterfaceName = params.get('selectedInterface') as string;
+  const selectedInterfaceType = params.get('selectedInterfaceType') as string;
+  const selectedStateName = params.get('selectedState') as string;
+
+  return {
+    selectedInterfaceName,
+    selectedInterfaceType,
+    selectedStateName,
+    setSelectedInterfaceName: (
+      nodeNetworkState?: V1beta1NodeNetworkState,
+      nodeNetworkInterface?: NodeNetworkConfigurationInterface,
+    ) => {
+      if (!nodeNetworkInterface) return history.push(baseListUrl);
+
+      const query = new URLSearchParams({
+        selectedInterface: nodeNetworkInterface.name,
+        selectedInterfaceType: nodeNetworkInterface.type,
+        selectedState: nodeNetworkState?.metadata?.name,
+      });
+
+      history.push(`${baseListUrl}?${query.toString()}`);
+    },
+  };
+};
+
+export default useDrawerInterface;