1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-31 13:47:02 +02:00

add tabs to strategy sort order (#10243)

Adds the same tab interface to env execution order changes as to other
diffable changes. Instead of creating a new file, this one just
duplicates and changes the component that we wanna touch.

Change 
<img width="799" alt="image"
src="https://github.com/user-attachments/assets/2cd54f50-c4e6-43ef-a413-ed61973cf889"
/>

Diff
<img width="997" alt="image"
src="https://github.com/user-attachments/assets/ef0379f5-0084-4c38-a713-373ccfacee0e"
/>
This commit is contained in:
Thomas Heartman 2025-06-30 13:40:28 +02:00 committed by GitHub
parent 7c0bd12a24
commit f18509665d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 41 additions and 1 deletions

View File

@ -7,6 +7,8 @@ import { EnvironmentStrategyOrderDiff } from './EnvironmentStrategyOrderDiff.tsx
import { StrategyExecution } from 'component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution';
import { formatStrategyName } from '../../../../../../utils/strategyNames.tsx';
import type { IFeatureStrategy } from 'interfaces/strategy.ts';
import { Tab, TabList, TabPanel, Tabs } from '../ChangeTabComponents.tsx';
import { useUiFlag } from 'hooks/useUiFlag.ts';
const ChangeItemInfo = styled(Box)({
display: 'flex',
@ -52,6 +54,7 @@ export const EnvironmentStrategyExecutionOrder = ({
actions,
}: IEnvironmentStrategyExecutionOrderProps) => {
const { feature: featureData, loading } = useFeature(project, feature);
const useDiffableComponent = useUiFlag('crDiffView');
if (loading) return null;
@ -85,6 +88,43 @@ export const EnvironmentStrategyExecutionOrder = ({
strategyIds: updatedStrategies.map((strategy) => strategy.id),
};
if (useDiffableComponent) {
return (
<Tabs>
<ChangeItemInfo>
<StyledChangeHeader>
<p>Updating strategy execution order to:</p>
<div>
<TabList>
<Tab>Change</Tab>
<Tab>View diff</Tab>
</TabList>
{actions}
</div>
</StyledChangeHeader>
<TabPanel>
<StyledStrategyExecutionWrapper>
{updatedStrategies.map((strategy, index) => (
<StyledStrategyContainer key={strategy.id}>
{`${index + 1}: `}
{formatStrategyName(strategy?.name || '')}
{strategy?.title && ` - ${strategy.title}`}
<StrategyExecution strategy={strategy!} />
</StyledStrategyContainer>
))}
</StyledStrategyExecutionWrapper>
</TabPanel>
<TabPanel>
<EnvironmentStrategyOrderDiff
preData={preData}
data={data}
/>
</TabPanel>
</ChangeItemInfo>
</Tabs>
);
}
return (
<ChangeItemInfo>
<StyledChangeHeader>

View File

@ -1,5 +1,5 @@
import { styled } from '@mui/material';
import EventDiff from 'component/events/EventDiff/EventDiff';
import { EventDiff } from 'component/events/EventDiff/EventDiff';
const StyledCodeSection = styled('div')(({ theme }) => ({
overflowX: 'auto',