1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-26 13:48:33 +02:00
This commit is contained in:
Mateusz Kwasniewski 2022-11-29 14:59:04 +01:00 committed by GitHub
parent 1a19d1e6fb
commit 840510a720
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 90 additions and 35 deletions

View File

@ -1,12 +1,23 @@
import { VFC } from 'react';
import { Alert, Box, styled } from '@mui/material';
import React, { FC, VFC } from 'react';
import {
Alert,
Box,
Popover,
styled,
Tooltip,
Typography,
} from '@mui/material';
import { ChangeRequestFeatureToggleChange } from '../ChangeRequestOverview/ChangeRequestFeatureToggleChange/ChangeRequestFeatureToggleChange';
import { objectId } from 'utils/objectId';
import { ToggleStatusChange } from '../ChangeRequestOverview/ChangeRequestFeatureToggleChange/ToggleStatusChange';
import { useChangeRequestApi } from 'hooks/api/actions/useChangeRequestApi/useChangeRequestApi';
import { formatUnknownError } from 'utils/formatUnknownError';
import useToast from 'hooks/useToast';
import type { IChangeRequest } from '../changeRequest.types';
import type {
IChangeRequest,
IChangeRequestDeleteStrategy,
IChangeRequestUpdateStrategy,
} from '../changeRequest.types';
import {
Discard,
StrategyAddedChange,
@ -17,9 +28,13 @@ import {
formatStrategyName,
GetFeatureStrategyIcon,
} from 'utils/strategyNames';
import { hasNameField } from '../changeRequest.types';
import {
hasNameField,
IChangeRequestAddStrategy,
} from '../changeRequest.types';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
import EventDiff from '../../events/EventDiff/EventDiff';
interface IChangeRequestProps {
changeRequest: IChangeRequest;
@ -69,6 +84,64 @@ const StyledAlert = styled(Alert)(({ theme }) => ({
},
}));
const CodeSnippetPopover: FC<{
change:
| IChangeRequestAddStrategy
| IChangeRequestUpdateStrategy
| IChangeRequestDeleteStrategy;
}> = ({ change }) => {
const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
const handlePopoverOpen = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget);
};
const handlePopoverClose = () => {
setAnchorEl(null);
};
const open = Boolean(anchorEl);
return (
<>
<GetFeatureStrategyIcon strategyName={change.payload.name} />
<Typography
onMouseEnter={handlePopoverOpen}
onMouseLeave={handlePopoverClose}
>
{formatStrategyName(change.payload.name)}
</Typography>
<Popover
id={String(change.id)}
sx={{
pointerEvents: 'none',
}}
open={open}
anchorEl={anchorEl}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'left',
}}
onClose={handlePopoverClose}
disableRestoreFocus
>
<Box sx={{ paddingLeft: 3, paddingRight: 3 }}>
<EventDiff
entry={{
data: change.payload,
}}
/>
</Box>
</Popover>
</>
);
};
export const ChangeRequest: VFC<IChangeRequestProps> = ({
changeRequest,
onRefetch,
@ -173,13 +246,7 @@ export const ChangeRequest: VFC<IChangeRequestProps> = ({
/>
}
>
<GetFeatureStrategyIcon
strategyName={change.payload.name}
/>
{formatStrategyName(
change.payload.name
)}
<CodeSnippetPopover change={change} />
</StrategyAddedChange>
)}
{change.action === 'deleteStrategy' && (
@ -198,16 +265,9 @@ export const ChangeRequest: VFC<IChangeRequestProps> = ({
}
>
{hasNameField(change.payload) && (
<>
<GetFeatureStrategyIcon
strategyName={
change.payload.name
}
/>
{formatStrategyName(
change.payload.name
)}
</>
<CodeSnippetPopover
change={change}
/>
)}
</StrategyDeletedChange>
)}
@ -226,12 +286,7 @@ export const ChangeRequest: VFC<IChangeRequestProps> = ({
/>
}
>
<GetFeatureStrategyIcon
strategyName={change.payload.name}
/>
{formatStrategyName(
change.payload.name
)}
<CodeSnippetPopover change={change} />
</StrategyEditedChange>
)}
</Box>

View File

@ -61,7 +61,7 @@ export const ChangeRequestFeatureToggleChange: FC<
px: 3,
}}
>
<ToggleOnIcon color="disabled" />
<Typography>Feature toggle name: </Typography>
<Typography
component={Link}
to={`/projects/${projectId}/features/${featureName}`}
@ -69,7 +69,7 @@ export const ChangeRequestFeatureToggleChange: FC<
sx={{ textDecoration: 'none', marginLeft: 1 }}
onClick={onNavigate}
>
{featureName}
<strong>{featureName}</strong>
</Typography>
</Box>
</Box>

View File

@ -30,7 +30,7 @@ export const StrategyAddedChange: FC<{ discard?: ReactNode }> = ({
<ChangeItemWrapper>
<ChangeItemInfo>
<Typography
sx={theme => ({ color: theme.palette.success.main })}
sx={theme => ({ color: theme.palette.success.dark })}
>
+ Adding strategy:
</Typography>

View File

@ -218,6 +218,7 @@ export const ChangeRequestSidebar: VFC<IChangeRequestSidebarProps> = ({
key={environmentChangeRequest.id}
sx={{
padding: 2,
mt: 2,
border: '2px solid',
borderColor: theme => theme.palette.neutral.light,
borderRadius: theme =>
@ -304,7 +305,7 @@ export const ChangeRequestSidebar: VFC<IChangeRequestSidebarProps> = ({
<StyledSuccessIcon />
<Typography
color={
theme.palette.success.main
theme.palette.success.dark
}
>
Draft successfully sent to

View File

@ -28,9 +28,8 @@ const DraftBannerContent: FC<{
return (
<Box className={classes.content}>
<DraftBannerContentWrapper>
<WarningAmberIcon />
<Typography variant="body2" sx={{ ml: 1, maxWidth: '500px' }}>
<strong>Draft mode!</strong> You have changes{' '}
<Typography variant="body2">
<strong>Change request mode</strong> You have changes{' '}
<ConditionallyRender
condition={Boolean(changeRequest.environment)}
show={

View File

@ -99,6 +99,7 @@ type ChangeRequestEditStrategy = ChangeRequestAddStrategy & { id: string };
type ChangeRequestDeleteStrategy = {
id: string;
name: string;
};
export type ChangeRequestAction =

View File

@ -10,7 +10,6 @@ import { formatUnknownError } from 'utils/formatUnknownError';
import PermissionButton from 'component/common/PermissionButton/PermissionButton';
import { CREATE_FEATURE_STRATEGY } from 'component/providers/AccessProvider/permissions';
import { IFeatureStrategyPayload } from 'interfaces/strategy';
import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
interface IAddFromTemplateCardProps {
title: string;