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

211
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,129 +220,91 @@ const UpdateStrategy: FC<{
); );
return ( return (
<> <Tabs aria-label='View rendered change or JSON diff'>
<BaseTabs> <ChangeOverwriteWarning
<ChangeOverwriteWarning data={{
data={{ current: currentStrategy,
current: currentStrategy, change,
change, changeType: 'strategy',
changeType: 'strategy', }}
}} changeRequestState={changeRequestState}
changeRequestState={changeRequestState} />
/> <ChangeItemCreateEditDeleteWrapper>
<ChangeItemCreateEditDeleteWrapper> <ChangeItemInfo>
<ChangeItemInfo> <EditHeader
<EditHeader wasDisabled={currentStrategy?.disabled}
wasDisabled={currentStrategy?.disabled} willBeDisabled={change.payload?.disabled}
willBeDisabled={change.payload?.disabled} />
<StrategyTooltipLink
name={change.payload.name}
title={change.payload.title}
previousTitle={previousTitle}
>
<StrategyDiff
change={change}
currentStrategy={referenceStrategy}
/> />
<StrategyTooltipLink </StrategyTooltipLink>
name={change.payload.name} </ChangeItemInfo>
title={change.payload.title} <div>
previousTitle={previousTitle} <TabsList>
> <Tab value={0}>Change</Tab>
<StrategyDiff <Tab value={1}>Diff</Tab>
change={change} </TabsList>
currentStrategy={referenceStrategy} {actions}
/> </div>
</StrategyTooltipLink> </ChangeItemCreateEditDeleteWrapper>
</ChangeItemInfo> <ConditionallyRender
<div> condition={
<Tabs change.payload?.disabled !== currentStrategy?.disabled
selectionFollowsFocus }
aria-label='Choose view' show={
value={tabIndex} <Typography
onChange={(_, newValue) => setTabIndex(newValue)} sx={{
> marginTop: (theme) => theme.spacing(2),
<Tab label='Change' {...allyProps(0)} /> marginBottom: (theme) => theme.spacing(2),
<Tab label='Diff' {...allyProps(1)} /> ...flexRow,
</Tabs> gap: (theme) => theme.spacing(1),
}}
>
This strategy will be{' '}
<DisabledEnabledState
disabled={change.payload?.disabled || false}
/>
</Typography>
}
/>
{/* import {Tab as BaseTab, Tabs as BaseTabs, TabPanel as BaseTabPanel, TabsList as BaseTabsList} from '@mui/base'; */} <TabPanel value={0}>
<StrategyExecution strategy={change.payload} />
<BaseTabsList {hasVariantDiff ? (
selectionFollowsFocus <StyledBox>
aria-label='Choose view' {change.payload.variants?.length ? (
value={tabIndex} <>
onChange={(_, newValue) => setTabIndex(newValue)}
>
<BaseTab {...allyProps(0)}>Change</BaseTab>
<BaseTab {...allyProps(1)}>Diff</BaseTab>
</BaseTabsList>
{actions}
</div>
</ChangeItemCreateEditDeleteWrapper>
<ConditionallyRender
condition={
change.payload?.disabled !== currentStrategy?.disabled
}
show={
<Typography
sx={{
marginTop: (theme) => theme.spacing(2),
marginBottom: (theme) => theme.spacing(2),
...flexRow,
gap: (theme) => theme.spacing(1),
}}
>
This strategy will be{' '}
<DisabledEnabledState
disabled={change.payload?.disabled || false}
/>
</Typography>
}
/>
<TabPanel
id={`${baseId}-${0}`}
aria-labelledby={`${baseId}-tab-${0}`}
value={tabIndex}
index={0}
>
<StrategyExecution strategy={change.payload} />
{hasVariantDiff ? (
<StyledBox>
{change.payload.variants?.length ? (
<>
<StyledTypography>
{currentStrategy?.variants?.length
? 'Updating strategy variants to:'
: 'Adding strategy variants:'}
</StyledTypography>
<EnvironmentVariantsTable
variants={change.payload.variants || []}
/>
</>
) : (
<StyledTypography> <StyledTypography>
Removed all strategy variants. {currentStrategy?.variants?.length
? 'Updating strategy variants to:'
: 'Adding strategy variants:'}
</StyledTypography> </StyledTypography>
)} <EnvironmentVariantsTable
</StyledBox> variants={change.payload.variants || []}
) : null} />
</TabPanel> </>
<TabPanel ) : (
id={`${baseId}-${1}`} <StyledTypography>
aria-labelledby={`${baseId}-tab-${1}`} Removed all strategy variants.
value={tabIndex} </StyledTypography>
index={1} )}
> </StyledBox>
<StrategyDiff ) : null}
change={change} </TabPanel>
currentStrategy={referenceStrategy} <TabPanel value={1}>
/> <StrategyDiff
</TabPanel> change={change}
<BaseTabPanel currentStrategy={referenceStrategy}
id={`${baseId}-${1}`} />
aria-labelledby={`${baseId}-tab-${1}`} </TabPanel>
value={tabIndex} </Tabs>
>
<StrategyDiff
change={change}
currentStrategy={referenceStrategy}
/>
</BaseTabPanel>
</BaseTabs>
</>
); );
}; };