Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-06-27 01:19:00 +02:00
Code Issues Projects Releases Wiki Activity

settle for base tabs instead of MUI styled tabs

Browse Source
This commit is contained in:
Thomas Heartman 2025-06-20 14:42:00 +02:00
parent abff9a9434
commit ae680bc926
1 changed files with 84 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
frontend/src/component/changeRequest/ChangeRequest/Changes/Change/DiffableChange.tsx
View File

@ -6,13 +6,8 @@ import {
type FC, type FC,
type ReactNode, type ReactNode,
} from 'react'; } from 'react';
import { Box, styled, Tab, Tabs, Tooltip, Typography } from '@mui/material'; import { Box, styled, Tooltip, Typography } from '@mui/material';
import { import { Tab, Tabs, TabsList, TabPanel } from '@mui/base';
Tab as BaseTab,
Tabs as BaseTabs,
TabPanel as BaseTabPanel,
TabsList as BaseTabsList,
} from '@mui/base';
import BlockIcon from '@mui/icons-material/Block'; import BlockIcon from '@mui/icons-material/Block';
import TrackChangesIcon from '@mui/icons-material/TrackChanges'; import TrackChangesIcon from '@mui/icons-material/TrackChanges';
import { import {
@ -181,7 +176,7 @@ const tabA11yProps = (baseId: string) => (index: number) => ({
'aria-controls': `${baseId}-${index}`, 'aria-controls': `${baseId}-${index}`,
}); });
const TabPanel: FC< const TabPanelZ: FC<
PropsWithChildren<{ PropsWithChildren<{
index: number; index: number;
value: number; value: number;
@ -225,8 +220,7 @@ const UpdateStrategy: FC<{
); );
return ( return (
<> <Tabs aria-label='View rendered change or JSON diff'>
<BaseTabs>
<ChangeOverwriteWarning <ChangeOverwriteWarning
data={{ data={{
current: currentStrategy, current: currentStrategy,
@ -253,27 +247,10 @@ const UpdateStrategy: FC<{
</StrategyTooltipLink> </StrategyTooltipLink>
</ChangeItemInfo> </ChangeItemInfo>
<div> <div>
<Tabs <TabsList>
selectionFollowsFocus <Tab value={0}>Change</Tab>
aria-label='Choose view' <Tab value={1}>Diff</Tab>
value={tabIndex} </TabsList>
onChange={(_, newValue) => setTabIndex(newValue)}
>
<Tab label='Change' {...allyProps(0)} />
<Tab label='Diff' {...allyProps(1)} />
</Tabs>
{/* import {Tab as BaseTab, Tabs as BaseTabs, TabPanel as BaseTabPanel, TabsList as BaseTabsList} from '@mui/base'; */}
<BaseTabsList
selectionFollowsFocus
aria-label='Choose view'
value={tabIndex}
onChange={(_, newValue) => setTabIndex(newValue)}
>
<BaseTab {...allyProps(0)}>Change</BaseTab>
<BaseTab {...allyProps(1)}>Diff</BaseTab>
</BaseTabsList>
{actions} {actions}
</div> </div>
</ChangeItemCreateEditDeleteWrapper> </ChangeItemCreateEditDeleteWrapper>
@ -297,12 +274,8 @@ const UpdateStrategy: FC<{
</Typography> </Typography>
} }
/> />
<TabPanel
id={`${baseId}-${0}`} <TabPanel value={0}>
aria-labelledby={`${baseId}-tab-${0}`}
value={tabIndex}
index={0}
>
<StrategyExecution strategy={change.payload} /> <StrategyExecution strategy={change.payload} />
{hasVariantDiff ? ( {hasVariantDiff ? (
<StyledBox> <StyledBox>
@ -325,29 +298,13 @@ const UpdateStrategy: FC<{
</StyledBox> </StyledBox>
) : null} ) : null}
</TabPanel> </TabPanel>
<TabPanel <TabPanel value={1}>
id={`${baseId}-${1}`}
aria-labelledby={`${baseId}-tab-${1}`}
value={tabIndex}
index={1}
>
<StrategyDiff <StrategyDiff
change={change} change={change}
currentStrategy={referenceStrategy} currentStrategy={referenceStrategy}
/> />
</TabPanel> </TabPanel>
<BaseTabPanel </Tabs>
id={`${baseId}-${1}`}
aria-labelledby={`${baseId}-tab-${1}`}
value={tabIndex}
>
<StrategyDiff
change={change}
currentStrategy={referenceStrategy}
/>
</BaseTabPanel>
</BaseTabs>
</>
); );
}; };