Merge pull request #84 from openshift-cherrypick-robot/cherry-pick-83-to-release-4.18

[release-4.18] Fix interfaces order and add yaml tab to selected interface

Author: openshift-merge-bot[bot]

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

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 
-import { Modal, Title } from '@patternfly/react-core';
+import { Modal, PageSection, PageSectionVariants, Title } from '@patternfly/react-core';
 import { NodeNetworkConfigurationInterface } from '@types';
 import { useNMStateTranslation } from '@utils/hooks/useNMStateTranslation';
 
@@ -70,9 +70,9 @@ const InterfaceDrawer: FC<InterfaceDrawerProps> = ({ selectedInterface, onClose
           ))}
         </ul>
       </div>
-      <div className="pf-u-p-xl">
+      <PageSection variant={PageSectionVariants.light}>
         <SelectedTabComponent selectedInterface={selectedInterface} />
-      </div>
+      </PageSection>
     </Modal>
   );
 };

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

@@ -1,6 +1,6 @@
 import React, { FC, useCallback, useState } from 'react';
 
-import { Button, ButtonVariant, debounce, Tooltip } from '@patternfly/react-core';
+import { Button, ButtonVariant, debounce, Split, Tooltip } from '@patternfly/react-core';
 import { NodeNetworkConfigurationInterface } from '@types';
 import { useNMStateTranslation } from '@utils/hooks/useNMStateTranslation';
 
@@ -29,20 +29,16 @@ const InterfaceDrawerYAMLFooter: FC<InterfaceDrawerFooterProps> = ({ selectedInt
   }, []);
 
   return (
-    <>
+    <Split hasGutter>
       <Tooltip content={copied ? t('Copied') : t('Copy YAML to clipboard')}>
         <Button variant={ButtonVariant.primary} onClick={onCopy}>
           {t('Copy')}
         </Button>
       </Tooltip>
-      <Button
-        variant={ButtonVariant.secondary}
-        onClick={() => downloadYAML(selectedInterface)}
-        className="pf-u-ml-md"
-      >
+      <Button variant={ButtonVariant.secondary} onClick={() => downloadYAML(selectedInterface)}>
         {t('Download YAML')}
       </Button>
-    </>
+    </Split>
   );
 };
 

src/views/states/topology/components/TopologySidebar/TopologySidebar.tsx

@@ -1,11 +1,10 @@
 import React, { Dispatch, FC, SetStateAction, useMemo } from 'react';
 
-import { Divider, Title } from '@patternfly/react-core';
 import { TopologySideBar } from '@patternfly/react-topology';
 import { V1beta1NodeNetworkState } from '@types';
 
 import StateDetailsPage from '../../../details/StateDetailsPage';
-import InterfaceDrawerDetailsTab from '../../../list/components/InterfaceDrawer/InterfaceDrawerDetailsTab';
+import InterfaceDrawer from '../../../list/components/InterfaceDrawer/InterfaceDrawer';
 
 import './TopologySidebar.scss';
 
@@ -34,9 +33,10 @@ const TopologySidebar: FC<TopologySidebarProps> = ({ states, selectedIds, setSel
           <StateDetailsPage nns={selectedState} />
         ) : (
           <>
-            <Title headingLevel="h2">{selectedInterface?.name}</Title>
-            <Divider style={{ padding: '1rem 0' }} />
-            <InterfaceDrawerDetailsTab selectedInterface={selectedInterface} />
+            <InterfaceDrawer
+              selectedInterface={selectedInterface}
+              onClose={() => setSelectedIds([])}
+            />
           </>
         )}
       </div>

src/views/states/topology/utils/utils.ts

@@ -26,15 +26,15 @@ const statusMap: { [key: string]: NodeStatus } = {
 };
 
 const networkTypeLevelMap = {
-  [InterfaceType.LINUX_BRIDGE]: 1,
-  [InterfaceType.VLAN]: 2,
-  [InterfaceType.BOND]: 3,
-  [InterfaceType.ETHERNET]: 4,
+  [InterfaceType.LINUX_BRIDGE]: 2,
+  [InterfaceType.VLAN]: 3,
+  [InterfaceType.BOND]: 4,
+  [InterfaceType.ETHERNET]: 5,
 };
 
 export const networkNodeLevel = new Proxy(networkTypeLevelMap, {
   get(target, prop: string) {
-    return target[prop] ?? 5;
+    return target[prop] ?? 1;
   },
 });