refactor(ui): Prevent console warnings in Tabs.tsx and SidebarAboutSection.tsx (#14144)

datahub-web-react/src/alchemy-components/components/Tabs/Tabs.tsx

@@ -34,7 +34,6 @@ const StyledTabsPrimary = styled(AntTabs)<{
         return '';
     }}
     ${({ $scrollable }) => !$scrollable && 'overflow: hidden;'}
-
     .ant-tabs-tab {
         padding: 8px 0;
         font-size: 14px;
@@ -53,7 +52,6 @@ const StyledTabsPrimary = styled(AntTabs)<{
                 margin-left: 16px;
             }
         `}
-
     ${({ $hideTabsHeader }) =>
         $hideTabsHeader &&
         `
@@ -61,7 +59,6 @@ const StyledTabsPrimary = styled(AntTabs)<{
                 display: none;
             }
         `}
-
     ${({ $stickyHeader }) =>
         $stickyHeader &&
         `
@@ -72,7 +69,6 @@ const StyledTabsPrimary = styled(AntTabs)<{
                 background-color: white;
             }
         `}
-
     .ant-tabs-tab-active .ant-tabs-tab-btn {
         color: ${(props) => props.theme.styles['primary-color']};
         font-weight: 600;
@@ -134,7 +130,6 @@ const StyledTabsSecondary = styled(AntTabs)<{
                 margin-left: 8px;
             }
         `}
-
     ${({ $hideTabsHeader }) =>
         $hideTabsHeader &&
         `
@@ -142,7 +137,6 @@ const StyledTabsSecondary = styled(AntTabs)<{
                 display: none;
             }
         `}
-
     .ant-tabs-tab-active {
         background-color: ${(props) => props.theme.styles['primary-color-light']}80;
     }
@@ -167,6 +161,7 @@ const StyledTabsSecondary = styled(AntTabs)<{
     .ant-tabs-nav {
         margin-bottom: ${(props) => props.$navMarginBottom ?? 0}px;
         margin-top: ${(props) => props.$navMarginTop ?? 0}px;
+
         &::before {
             display: none;
         }
@@ -271,7 +266,6 @@ export function Tabs({
     maxHeight = '100%',
     stickyHeader = false,
 }: Props) {
-    const { TabPane } = AntTabs;
     const tabsContainerRef = useRef<HTMLDivElement>(null);
 
     // Scroll to top when selectedTab changes if scrollToTopOnChange is enabled
@@ -308,9 +302,20 @@ export function Tabs({
 
     const StyledTabs = secondary ? StyledTabsSecondary : StyledTabsPrimary;
 
+    const items = tabs.map((tab) => ({
+        key: tab.key,
+        label: <TabView tab={tab} />,
+        disabled: tab.disabled,
+        children: (
+            <ErrorBoundary resetKeys={[tab.key]} variant="tab">
+                {tab.component}
+            </ErrorBoundary>
+        ),
+    }));
     const tabsContent = (
         <StyledTabs
             activeKey={selectedTab}
+            items={items}
             onChange={(key) => {
                 if (onChange) onChange(key);
                 if (urlMap && onUrlChange && urlMap[key]) {
@@ -324,17 +329,7 @@ export function Tabs({
             $hideTabsHeader={!!hideTabsHeader}
             $scrollable={scrollToTopOnChange}
             $stickyHeader={stickyHeader}
-        >
-            {tabs.map((tab) => {
-                return (
-                    <TabPane tab={<TabView tab={tab} />} key={tab.key} disabled={tab.disabled}>
-                        <ErrorBoundary resetKeys={[tab.key]} variant="tab">
-                            {tab.component}
-                        </ErrorBoundary>
-                    </TabPane>
-                );
-            })}
-        </StyledTabs>
+        />
     );
 
     if (scrollToTopOnChange) {

datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/AboutSection/SidebarAboutSection.tsx

@@ -55,15 +55,15 @@ export const SidebarAboutSection = ({ properties, readOnly }: Props) => {
                 title="Documentation"
                 content={
                     <>
-                        {displayedDescription && [
+                        {displayedDescription && (
                             <DescriptionSection
                                 description={displayedDescription}
                                 isExpandable
                                 lineLimit={LINE_LIMIT}
-                            />,
-                        ]}
+                            />
+                        )}
                         {hasContent && <LinksSection hideLinksButton={hideLinksButton} readOnly />}
-                        {!hasContent && [<EmptySectionText message={EMPTY_MESSAGES.documentation.title} />]}
+                        {!hasContent && <EmptySectionText message={EMPTY_MESSAGES.documentation.title} />}
                     </>
                 }
                 extra={