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 ReactNode,
} from 'react';
import { Box, styled, Tab, Tabs, Tooltip, Typography } from '@mui/material';
import {
Tab as BaseTab,
Tabs as BaseTabs,
TabPanel as BaseTabPanel,
TabsList as BaseTabsList,
} from '@mui/base';
import { Box, styled, Tooltip, Typography } from '@mui/material';
import { Tab, Tabs, TabsList, TabPanel } from '@mui/base';
import BlockIcon from '@mui/icons-material/Block';
import TrackChangesIcon from '@mui/icons-material/TrackChanges';
import {
@ -181,7 +176,7 @@ const tabA11yProps = (baseId: string) => (index: number) => ({
'aria-controls': `${baseId}-${index}`,
});
const TabPanel: FC<
const TabPanelZ: FC<
PropsWithChildren<{
index: number;
value: number;
@ -225,129 +220,91 @@ const UpdateStrategy: FC<{
);
return (
<>
<BaseTabs>
<ChangeOverwriteWarning
data={{
current: currentStrategy,
change,
changeType: 'strategy',
}}
changeRequestState={changeRequestState}
/>
<ChangeItemCreateEditDeleteWrapper>
<ChangeItemInfo>
<EditHeader
wasDisabled={currentStrategy?.disabled}
willBeDisabled={change.payload?.disabled}
<Tabs aria-label='View rendered change or JSON diff'>
<ChangeOverwriteWarning
data={{
current: currentStrategy,
change,
changeType: 'strategy',
}}
changeRequestState={changeRequestState}
/>
<ChangeItemCreateEditDeleteWrapper>
<ChangeItemInfo>
<EditHeader
wasDisabled={currentStrategy?.disabled}
willBeDisabled={change.payload?.disabled}
/>
<StrategyTooltipLink
name={change.payload.name}
title={change.payload.title}
previousTitle={previousTitle}
>
<StrategyDiff
change={change}
currentStrategy={referenceStrategy}
/>
<StrategyTooltipLink
name={change.payload.name}
title={change.payload.title}
previousTitle={previousTitle}
>
<StrategyDiff
change={change}
currentStrategy={referenceStrategy}
/>
</StrategyTooltipLink>
</ChangeItemInfo>
<div>
<Tabs
selectionFollowsFocus
aria-label='Choose view'
value={tabIndex}
onChange={(_, newValue) => setTabIndex(newValue)}
>
<Tab label='Change' {...allyProps(0)} />
<Tab label='Diff' {...allyProps(1)} />
</Tabs>
</StrategyTooltipLink>
</ChangeItemInfo>
<div>
<TabsList>
<Tab value={0}>Change</Tab>
<Tab value={1}>Diff</Tab>
</TabsList>
{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>
}
/>
{/* 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}
</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 || []}
/>
</>
) : (
<TabPanel value={0}>
<StrategyExecution strategy={change.payload} />
{hasVariantDiff ? (
<StyledBox>
{change.payload.variants?.length ? (
<>
<StyledTypography>
Removed all strategy variants.
{currentStrategy?.variants?.length
? 'Updating strategy variants to:'
: 'Adding strategy variants:'}
</StyledTypography>
)}
</StyledBox>
) : null}
</TabPanel>
<TabPanel
id={`${baseId}-${1}`}
aria-labelledby={`${baseId}-tab-${1}`}
value={tabIndex}
index={1}
>
<StrategyDiff
change={change}
currentStrategy={referenceStrategy}
/>
</TabPanel>
<BaseTabPanel
id={`${baseId}-${1}`}
aria-labelledby={`${baseId}-tab-${1}`}
value={tabIndex}
>
<StrategyDiff
change={change}
currentStrategy={referenceStrategy}
/>
</BaseTabPanel>
</BaseTabs>
</>
<EnvironmentVariantsTable
variants={change.payload.variants || []}
/>
</>
) : (
<StyledTypography>
Removed all strategy variants.
</StyledTypography>
)}
</StyledBox>
) : null}
</TabPanel>
<TabPanel value={1}>
<StrategyDiff
change={change}
currentStrategy={referenceStrategy}
/>
</TabPanel>
</Tabs>
);
};