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:
parent
7c0bd12a24
commit
f18509665d
@ -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>
|
||||
|
@ -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',
|
||||
|
Loading…
Reference in New Issue
Block a user