mirror of
https://github.com/Unleash/unleash.git
synced 2025-10-27 11:02:16 +01:00
ui tweaks (#2557)
This commit is contained in:
Mateusz Kwasniewski
GitHub
parent
1a19d1e6fb
commit
840510a720
@ -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
|
||||
}
|
||||
<CodeSnippetPopover
|
||||
change={change}
|
||||
/>
|
||||
{formatStrategyName(
|
||||
change.payload.name
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</StrategyDeletedChange>
|
||||
)}
|
||||
@ -226,12 +286,7 @@ export const ChangeRequest: VFC<IChangeRequestProps> = ({
|
||||
/>
|
||||
}
|
||||
>
|
||||
<GetFeatureStrategyIcon
|
||||
strategyName={change.payload.name}
|
||||
/>
|
||||
{formatStrategyName(
|
||||
change.payload.name
|
||||
)}
|
||||
<CodeSnippetPopover change={change} />
|
||||
</StrategyEditedChange>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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={
|
||||
|
||||
@ -99,6 +99,7 @@ type ChangeRequestEditStrategy = ChangeRequestAddStrategy & { id: string };
|
||||
|
||||
type ChangeRequestDeleteStrategy = {
|
||||
id: string;
|
||||
name: string;
|
||||
};
|
||||
|
||||
export type ChangeRequestAction =
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user