CONSOLE-4484: Reintroduce styling for tabs within a sidebar (#14797)

* CONSOLE-4484: Reintroduce styling for tabs within a sidebar

* CONSOLE-4484: Do not bleed slidebar tabs to the edges

* CONSOLE-4484: Address nits

Author: logonoff

frontend/packages/topology/src/components/side-bar/TopologyEdgePanel.tsx

@@ -44,6 +44,7 @@ const TopologyEdgePanel: React.FC<TopologyEdgePanelProps> = ({ edge }) => {
         </PrimaryHeading>
       </div>
       <SimpleTabNav
+        withinSidebar
         tabs={[
           {
             name: t('topology~Resources'),

frontend/packages/topology/src/components/side-bar/components/SideBarBody.tsx

@@ -23,6 +23,7 @@ const SimpleTabNavWrapper: React.FC<{ tabs: Tab[] }> = ({ tabs }) => {
   );
   return (
     <SimpleTabNav
+      withinSidebar
       selectedTab={selectTabParam || selectedTab || t('topology~Details')}
       tabs={tabs}
       onClickTab={handleClickTab}

frontend/public/components/overview/resource-overview-details.tsx

@@ -87,6 +87,8 @@ export const ResourceOverviewDetails = connect<PropsFromState, PropsFromDispatch
       <div className="overview__sidebar-pane resource-overview">
         <ResourceOverviewHeading actions={menuActions} kindObj={kindObj} resources={item} />
         <SimpleTabNav
+          withinSidebar
+          noInset
           onClickTab={onClickTab}
           selectedTab={selectedDetailsTab}
           tabProps={{ item }}

frontend/public/components/sidebars/resource-sidebar.tsx

@@ -134,6 +134,8 @@ export const ResourceSidebar: React.FC<{
     <ResourceSidebarWrapper label={label} toggleSidebar={toggleSidebar}>
       {tabs.length > 0 ? (
         <SimpleTabNav
+          withinSidebar
+          noInset
           tabs={tabs}
           tabProps={{
             downloadSampleYaml,

frontend/public/components/utils/simple-tab-nav.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import classnames from 'classnames';
 import { Tabs, Tab as PfTab, TabTitleText } from '@patternfly/react-core';
 
 export type Tab = {
@@ -13,6 +14,9 @@ type SimpleTabNavProps = {
   tabProps?: any;
   tabs: Tab[];
   additionalClassNames?: string;
+  /** Removes inset and adds extra margin to the bottom of the tab list */
+  withinSidebar?: boolean;
+  noInset?: boolean;
 };
 
 export const SimpleTabNav: React.FC<SimpleTabNavProps> = ({
@@ -21,6 +25,8 @@ export const SimpleTabNav: React.FC<SimpleTabNavProps> = ({
   tabProps = null,
   tabs,
   additionalClassNames,
+  withinSidebar,
+  noInset,
 }) => {
   const handleTabClick = (_e, tabIndex: string) => {
     onClickTab && onClickTab(tabIndex);
@@ -31,9 +37,9 @@ export const SimpleTabNav: React.FC<SimpleTabNavProps> = ({
     <div>
       <Tabs
         onSelect={handleTabClick}
-        className={additionalClassNames}
+        className={classnames({ 'pf-v6-u-mb-md': withinSidebar }, additionalClassNames)}
         defaultActiveKey={selectedTab || tabs[0]?.name}
-        inset={{ default: 'insetNone', xl: 'insetSm' }}
+        inset={!noInset && { default: 'insetSm' }}
         unmountOnExit
       >
         {tabs.map((tab) => {