From ae680bc926f0670d1cc9da29112a229d74e92a09 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Fri, 20 Jun 2025 14:42:00 +0200
Subject: [PATCH] settle for base tabs instead of MUI styled tabs

---
 .../Changes/Change/DiffableChange.tsx         | 211 +++++++-----------
 1 file changed, 84 insertions(+), 127 deletions(-)

diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/DiffableChange.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/DiffableChange.tsx
index 05ccab2118..e9af3dd7c3 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/DiffableChange.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/DiffableChange.tsx
@@ -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>
     );
 };