yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-10-05 14:06:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Andrew Sikowitz 2025-09-15 13:29:05 -07:00 committed by GitHub
parent f5f753343f
commit f38c25dabb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 17 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
datahub-web-react/src/alchemy-components/components/Tabs/Tabs.tsx
View File

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

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

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