From 353f50237d6085964810782d832a6a9e7735c386 Mon Sep 17 00:00:00 2001 From: Mateusz Kwasniewski Date: Thu, 8 Dec 2022 10:59:37 +0100 Subject: [PATCH] Change request UI improvements pt2 (#2624) --- .../ChangeRequestConfirmDialog.tsx | 4 +- .../ChangeRequestComment.tsx | 12 +- .../ChangeRequestComments/StyledAvatar.tsx | 4 +- .../ChangeRequestFeatureToggleChange.tsx | 4 +- .../StrategyChange.tsx | 9 +- .../ChangeRequestHeader.styles.tsx | 6 +- .../ChangeRequestHeader.tsx | 7 +- .../ChangeRequestOverview.tsx | 30 ++- .../ChangeRequestReviewers.tsx | 9 +- .../ChangeRequestSidebar.tsx | 213 ++---------------- .../EnvironmentChangeRequest.tsx | 132 +++++++++++ .../ReviewChangesHeader.tsx | 50 ++++ .../changeRequest/DraftBanner/DraftBanner.tsx | 44 ++-- .../ChangeRequestActionCell.tsx | 12 - .../ChangeRequestTitleCell.tsx | 21 +- .../ChangeRequestsTabs/ChangeRequestsTabs.tsx | 9 - .../common/SegmentItem/SegmentItem.styles.ts | 3 + .../Table/cells/TextCell/TextCell.styles.ts | 3 + .../Table/cells/TimeAgoCell/TimeAgoCell.tsx | 7 +- .../FeatureStrategyForm.tsx | 4 +- .../StrategyDraggableItem.tsx | 4 +- .../useStrategyChangeFromRequest.tsx | 4 +- .../ChangeRequestTable.tsx | 2 +- .../usePendingChangeRequests.ts | 2 +- 24 files changed, 308 insertions(+), 287 deletions(-) create mode 100644 frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/EnvironmentChangeRequest.tsx create mode 100644 frontend/src/component/changeRequest/ChangeRequestSidebar/ReviewChangesHeader/ReviewChangesHeader.tsx delete mode 100644 frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestActionCell/ChangeRequestActionCell.tsx diff --git a/frontend/src/component/changeRequest/ChangeRequestConfirmDialog/ChangeRequestConfirmDialog.tsx b/frontend/src/component/changeRequest/ChangeRequestConfirmDialog/ChangeRequestConfirmDialog.tsx index 8a3d338ebb..1a9b8cc7ff 100644 --- a/frontend/src/component/changeRequest/ChangeRequestConfirmDialog/ChangeRequestConfirmDialog.tsx +++ b/frontend/src/component/changeRequest/ChangeRequestConfirmDialog/ChangeRequestConfirmDialog.tsx @@ -24,9 +24,9 @@ export const ChangeRequestDialogue: FC = ({ messageComponent, }) => { const projectId = useRequiredPathParam('projectId'); - const { draft } = usePendingChangeRequests(projectId); + const { data } = usePendingChangeRequests(projectId); const { changeRequestInReviewOrApproved, alert } = - useChangeRequestInReviewWarning(draft); + useChangeRequestInReviewWarning(data); const hasChangeRequestInReviewForEnvironment = changeRequestInReviewOrApproved(environment || ''); diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/ChangeRequestComment.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/ChangeRequestComment.tsx index 722cd184d8..83f118ea7c 100644 --- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/ChangeRequestComment.tsx +++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/ChangeRequestComment.tsx @@ -11,15 +11,17 @@ const ChangeRequestCommentWrapper = styled(Box)(({ theme }) => ({ })); const CommentPaper = styled(Paper)(({ theme }) => ({ width: '100%', - padding: theme.spacing(2), - backgroundColor: theme.palette.tertiary.light, + padding: theme.spacing(1.5, 3, 2.5, 3), + backgroundColor: theme.palette.neutral.light, + borderRadius: theme.shape.borderRadiusLarge, + borderColor: theme.palette.divider, })); const CommentHeader = styled(Box)(({ theme }) => ({ display: 'flex', borderBottom: '1px solid', - borderColor: theme.palette.divider, - paddingBottom: theme.spacing(1), + borderColor: theme.palette.dividerAlternative, + paddingBottom: theme.spacing(1.5), })); export const ChangeRequestComment: FC<{ comment: IChangeRequestComment }> = ({ @@ -42,7 +44,7 @@ export const ChangeRequestComment: FC<{ comment: IChangeRequestComment }> = ({ - {comment.text} + {comment.text} ); diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/StyledAvatar.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/StyledAvatar.tsx index 2efa8c099c..1aa0e8fc65 100644 --- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/StyledAvatar.tsx +++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/StyledAvatar.tsx @@ -1,8 +1,8 @@ import { Avatar, styled } from '@mui/material'; export const StyledAvatar = styled(Avatar)(({ theme }) => ({ - height: '30px', - width: '30px', + height: '32px', + width: '32px', marginTop: theme.spacing(1), marginRight: theme.spacing(2), })); diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestFeatureToggleChange/ChangeRequestFeatureToggleChange.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestFeatureToggleChange/ChangeRequestFeatureToggleChange.tsx index 29a01b1b2f..8569511cad 100644 --- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestFeatureToggleChange/ChangeRequestFeatureToggleChange.tsx +++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestFeatureToggleChange/ChangeRequestFeatureToggleChange.tsx @@ -23,7 +23,7 @@ export const ChangeRequestFeatureToggleChange: FC< ({ backgroundColor: Boolean(conflict) - ? theme.palette.warning.light + ? theme.palette.neutral.light : theme.palette.tableHeaderBackground, borderRadius: theme => `${theme.shape.borderRadiusLarge}px ${theme.shape.borderRadiusLarge}px 0 0`, @@ -31,7 +31,7 @@ export const ChangeRequestFeatureToggleChange: FC< borderColor: theme => conflict ? theme.palette.warning.border - : theme.palette.dividerAlternative, + : theme.palette.divider, borderBottom: 'none', overflow: 'hidden', })} diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestFeatureToggleChange/StrategyChange.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestFeatureToggleChange/StrategyChange.tsx index 0a1d74609f..8d7e987ae5 100644 --- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestFeatureToggleChange/StrategyChange.tsx +++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestFeatureToggleChange/StrategyChange.tsx @@ -16,9 +16,16 @@ const ChangeItemInfo: FC = styled(Box)(({ theme }) => ({ gap: theme.spacing(1), })); +const StyledLink = styled(Link)(() => ({ + textDecoration: 'none', + '&:hover, &:focus': { + textDecoration: 'underline', + }, +})); + export const Discard: FC = ({ onDiscard }) => ( - Discard + Discard ); diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.styles.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.styles.tsx index e8224eaf44..2f09099a9b 100644 --- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.styles.tsx +++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.styles.tsx @@ -2,7 +2,7 @@ import { styled } from '@mui/material'; import { Avatar, Box, Card, Paper, Typography } from '@mui/material'; export const StyledPaper = styled(Paper)(({ theme }) => ({ - padding: theme.spacing(2, 4), + padding: theme.spacing(3, 4), borderRadius: `${theme.shape.borderRadiusLarge}px`, })); @@ -32,6 +32,6 @@ export const StyledCard = styled(Card)(({ theme }) => ({ export const StyledAvatar = styled(Avatar)(({ theme }) => ({ marginLeft: theme.spacing(1), marginRight: theme.spacing(1), - height: '30px', - width: '30px', + height: '24px', + width: '24px', })); diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx index c457e2d587..6ed7ded331 100644 --- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx +++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx @@ -12,6 +12,7 @@ import { StyledAvatar, StyledCard, } from './ChangeRequestHeader.styles'; +import { Separator } from '../../ChangeRequestSidebar/ChangeRequestSidebar'; export const ChangeRequestHeader: FC<{ changeRequest: IChangeRequest }> = ({ changeRequest, @@ -19,7 +20,7 @@ export const ChangeRequestHeader: FC<{ changeRequest: IChangeRequest }> = ({ return ( - + Change request #{changeRequest.id} @@ -32,7 +33,7 @@ export const ChangeRequestHeader: FC<{ changeRequest: IChangeRequest }> = ({ - + Environment:{' '} @@ -44,7 +45,7 @@ export const ChangeRequestHeader: FC<{ changeRequest: IChangeRequest }> = ({ > {changeRequest?.environment} {' '} - | Updates:{' '} + Updates:{' '} ({ width: '30%', @@ -156,26 +157,21 @@ export const ChangeRequestOverview: FC = () => { - 0} - show={ - - {changeRequest.approvals?.map(approver => ( - - ))} - - } - /> + + {changeRequest.approvals?.map(approver => ( + + ))} + {' '} - Changes + Requested Changes ({changesCount(changeRequest)}) ({ marginBottom: theme.spacing(2), @@ -17,7 +18,11 @@ export const ChangeRequestReviewers: FC = ({ children }) => { > Reviewers - Approved by + 0} + show={'Approved by'} + elseShow={'No approvals yet'} + /> {children} diff --git a/frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx b/frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx index 5ca1486c2d..db9fbecaee 100644 --- a/frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx +++ b/frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx @@ -1,29 +1,16 @@ import { FC, VFC } from 'react'; -import { - Box, - Button, - Typography, - styled, - Tooltip, - Divider, - IconButton, - useTheme, -} from '@mui/material'; -import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; +import { Box, Button, styled, Typography, useTheme } from '@mui/material'; import { DynamicSidebarModal } from 'component/common/SidebarModal/SidebarModal'; import { PageContent } from 'component/common/PageContent/PageContent'; import { PageHeader } from 'component/common/PageHeader/PageHeader'; -import { CheckCircle, HelpOutline } from '@mui/icons-material'; -import EnvironmentIcon from 'component/common/EnvironmentIcon/EnvironmentIcon'; +import { CheckCircle } from '@mui/icons-material'; import { ChangeRequest } from '../ChangeRequest/ChangeRequest'; import { usePendingChangeRequests } from 'hooks/api/getters/usePendingChangeRequests/usePendingChangeRequests'; import { useChangeRequestApi } from 'hooks/api/actions/useChangeRequestApi/useChangeRequestApi'; -import { ChangeRequestStatusBadge } from '../ChangeRequestStatusBadge/ChangeRequestStatusBadge'; -import CloseIcon from '@mui/icons-material/Close'; -import { useNavigate } from 'react-router-dom'; import useToast from 'hooks/useToast'; import { formatUnknownError } from 'utils/formatUnknownError'; -import { changesCount } from '../changesCount'; +import { EnvironmentChangeRequest } from './EnvironmentChangeRequest/EnvironmentChangeRequest'; +import { ReviewChangesHeader } from './ReviewChangesHeader/ReviewChangesHeader'; interface IChangeRequestSidebarProps { open: boolean; @@ -35,7 +22,7 @@ const StyledPageContent = styled(PageContent)(({ theme }) => ({ height: '100vh', overflow: 'auto', minWidth: '50vw', - padding: theme.spacing(7.5, 6), + padding: theme.spacing(4, 6), [theme.breakpoints.down('md')]: { padding: theme.spacing(4, 2), }, @@ -48,31 +35,11 @@ const StyledPageContent = styled(PageContent)(({ theme }) => ({ borderRadius: `${theme.spacing(1.5, 0, 0, 1.5)} !important`, })); -const StyledHelpOutline = styled(HelpOutline)(({ theme }) => ({ - fontSize: theme.fontSizes.mainHeader, - marginLeft: '0.3rem', - color: theme.palette.grey[700], -})); - -const StyledHeaderHint = styled('div')(({ theme }) => ({ - color: theme.palette.text.secondary, - fontSize: theme.fontSizes.smallBody, -})); - const BackButton = styled(Button)(({ theme }) => ({ marginTop: theme.spacing(2), marginLeft: 'auto', })); -const SubmitChangeRequestButton: FC<{ onClick: () => void; count: number }> = ({ - onClick, - count, -}) => ( - -); - export const StyledSuccessIcon = styled(CheckCircle)(({ theme }) => ({ color: theme.palette.success.main, height: '25px', @@ -91,9 +58,9 @@ export const Separator = () => ( theme.palette.neutral.light, + marginLeft: 1.5, + marginRight: 1.5, + color: 'dividerAlternative', }} > | @@ -122,13 +89,11 @@ export const ChangeRequestSidebar: VFC = ({ onClose, }) => { const { - draft, + data, loading, refetch: refetchChangeRequest, } = usePendingChangeRequests(project); const { changeState, discardDraft } = useChangeRequestApi(); - const theme = useTheme(); - const navigate = useNavigate(); const { setToastApiError } = useToast(); const onReview = async (draftId: number) => { @@ -149,7 +114,7 @@ export const ChangeRequestSidebar: VFC = ({ } }; - if (!loading && !draft) { + if (!loading && !data) { return ( = ({ label="Review changes" > + } > There are no changes to review. @@ -179,155 +142,23 @@ export const ChangeRequestSidebar: VFC = ({ label="Review changes" > - - - } - titleElement={ - <> - - Review your changes - - - - - - Make sure you are sending the right changes - to be reviewed - - - } - > - } + disableBorder={true} + header={} > - {draft?.map(environmentChangeRequest => ( - ( + theme.palette.neutral.light, - borderRadius: theme => - `${theme.shape.borderRadiusLarge}px`, - }} + environmentChangeRequest={environmentChangeRequest} + onClose={onClose} + onReview={onReview} + onDiscard={onDiscard} > - - - - - {environmentChangeRequest.environment} - - - - - - - - - - - You request changes for these feature toggles: - { - onClose(); - }} + onNavigate={onClose} onRefetch={refetchChangeRequest} /> - - - - onReview( - environmentChangeRequest.id - ) - } - count={changesCount( - environmentChangeRequest - )} - /> - - - - } - /> - - - - - Draft successfully sent to - review - - - - - } - /> - - + ))} diff --git a/frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/EnvironmentChangeRequest.tsx b/frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/EnvironmentChangeRequest.tsx new file mode 100644 index 0000000000..6f94e6c6fc --- /dev/null +++ b/frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/EnvironmentChangeRequest.tsx @@ -0,0 +1,132 @@ +import { FC } from 'react'; +import { Box, Button, Divider, Typography, useTheme } from '@mui/material'; +import { IChangeRequest } from '../../changeRequest.types'; +import { useNavigate } from 'react-router-dom'; +import { ChangeRequestStatusBadge } from '../../ChangeRequestStatusBadge/ChangeRequestStatusBadge'; +import { ConditionallyRender } from '../../../common/ConditionallyRender/ConditionallyRender'; +import { changesCount } from '../../changesCount'; +import { + Separator, + StyledFlexAlignCenterBox, + StyledSuccessIcon, + UpdateCount, +} from '../ChangeRequestSidebar'; +import { CloudCircle } from '@mui/icons-material'; + +const SubmitChangeRequestButton: FC<{ onClick: () => void; count: number }> = ({ + onClick, + count, +}) => ( + +); + +export const EnvironmentChangeRequest: FC<{ + environmentChangeRequest: IChangeRequest; + onClose: () => void; + onReview: (id: number) => void; + onDiscard: (id: number) => void; +}> = ({ environmentChangeRequest, onClose, onReview, onDiscard, children }) => { + const theme = useTheme(); + const navigate = useNavigate(); + + return ( + theme.palette.secondaryContainer, + borderRadius: theme => `${theme.shape.borderRadiusLarge}px`, + }} + > + + + ({ + color: theme.palette.primary.light, + mr: 0.5, + })} + /> + + {environmentChangeRequest.environment} + + + + + + + + + + + You request changes for these feature toggles: + + {children} + + + + onReview(environmentChangeRequest.id) + } + count={changesCount(environmentChangeRequest)} + /> + + + + } + /> + + + + + Draft successfully sent to review + + + + + } + /> + + + ); +}; diff --git a/frontend/src/component/changeRequest/ChangeRequestSidebar/ReviewChangesHeader/ReviewChangesHeader.tsx b/frontend/src/component/changeRequest/ChangeRequestSidebar/ReviewChangesHeader/ReviewChangesHeader.tsx new file mode 100644 index 0000000000..c6e71ce658 --- /dev/null +++ b/frontend/src/component/changeRequest/ChangeRequestSidebar/ReviewChangesHeader/ReviewChangesHeader.tsx @@ -0,0 +1,50 @@ +import { Box, IconButton, styled, Tooltip } from '@mui/material'; +import { HelpOutline } from '@mui/icons-material'; +import { FC } from 'react'; +import { PageHeader } from '../../../common/PageHeader/PageHeader'; +import CloseIcon from '@mui/icons-material/Close'; + +const StyledHelpOutline = styled(HelpOutline)(({ theme }) => ({ + fontSize: theme.fontSizes.mainHeader, + marginLeft: '0.3rem', + color: theme.palette.grey[700], +})); + +const StyledHeaderHint = styled('div')(({ theme }) => ({ + marginTop: theme.spacing(0.5), + color: theme.palette.text.secondary, + fontSize: theme.fontSizes.smallBody, +})); + +export const ReviewChangesHeader: FC<{ onClose: () => void }> = ({ + onClose, +}) => ( + + + + } + titleElement={ + <> + + Review your changes + + + + + + Make sure you are sending the right changes to be reviewed + + + } + /> +); diff --git a/frontend/src/component/changeRequest/DraftBanner/DraftBanner.tsx b/frontend/src/component/changeRequest/DraftBanner/DraftBanner.tsx index f87f088ea9..a3b0832075 100644 --- a/frontend/src/component/changeRequest/DraftBanner/DraftBanner.tsx +++ b/frontend/src/component/changeRequest/DraftBanner/DraftBanner.tsx @@ -14,7 +14,10 @@ interface IDraftBannerProps { const DraftBannerContentWrapper = styled(Box)(({ theme }) => ({ display: 'flex', alignItems: 'center', - padding: theme.spacing(1, 1.5), + padding: theme.spacing(1, 0), + [theme.breakpoints.down('lg')]: { + padding: theme.spacing(1, 2), + }, color: theme.palette.warning.main, })); @@ -27,7 +30,7 @@ const DraftBannerContent: FC<{ return ( - + Change request mode – You have changes{' '} ({ export const DraftBanner: VFC = ({ project }) => { const [isSidebarOpen, setIsSidebarOpen] = useState(false); - const { draft, loading } = usePendingChangeRequests(project); + const { data, loading } = usePendingChangeRequests(project); - if ((!loading && !draft) || draft?.length === 0) { + if ((!loading && !data) || data?.length === 0) { return null; } return ( - {draft && - draft - .filter(changeRequest => - ['Draft', 'In review', 'Approved'].includes( - changeRequest.state - ) - ) - .map(changeRequest => ( - { - setIsSidebarOpen(true); - }} - /> - ))} + {data?.length + ? data + .filter(changeRequest => + ['Draft', 'In review', 'Approved'].includes( + changeRequest.state + ) + ) + .map(changeRequest => ( + { + setIsSidebarOpen(true); + }} + /> + )) + : null} { - const theme = useTheme(); - return ( - - {' '} - - ); -}; diff --git a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestTitleCell/ChangeRequestTitleCell.tsx b/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestTitleCell/ChangeRequestTitleCell.tsx index 06f5d97a41..83dd8de82b 100644 --- a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestTitleCell/ChangeRequestTitleCell.tsx +++ b/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestTitleCell/ChangeRequestTitleCell.tsx @@ -31,19 +31,22 @@ export const ChangeRequestTitleCell = ({ return ( - - Change request - + ({ + paddingTop: theme.spacing(0.2), + marginRight: theme.spacing(1), + })} + > + Change request + {`#${id}`} diff --git a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx b/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx index daf91b9983..32146f69e4 100644 --- a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx +++ b/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx @@ -20,7 +20,6 @@ import { useSearchParams } from 'react-router-dom'; import { TimeAgoCell } from '../../../common/Table/cells/TimeAgoCell/TimeAgoCell'; import { TextCell } from '../../../common/Table/cells/TextCell/TextCell'; import { ChangeRequestStatusCell } from './ChangeRequestStatusCell/ChangeRequestStatusCell'; -import { ChangeRequestActionCell } from './ChangeRequestActionCell/ChangeRequestActionCell'; import { AvatarCell } from './AvatarCell/AvatarCell'; import { ChangeRequestTitleCell } from './ChangeRequestTitleCell/ChangeRequestTitleCell'; import { TableBody, TableRow } from '../../../common/Table'; @@ -120,14 +119,6 @@ export const ChangeRequestsTabs = ({ width: 150, Cell: ChangeRequestStatusCell, }, - { - Header: '', - id: 'Actions', - minWidth: 50, - width: 50, - canSort: false, - Cell: ChangeRequestActionCell, - }, ], //eslint-disable-next-line [projectId] diff --git a/frontend/src/component/common/SegmentItem/SegmentItem.styles.ts b/frontend/src/component/common/SegmentItem/SegmentItem.styles.ts index 729a715fd0..b24437ba59 100644 --- a/frontend/src/component/common/SegmentItem/SegmentItem.styles.ts +++ b/frontend/src/component/common/SegmentItem/SegmentItem.styles.ts @@ -28,6 +28,9 @@ export const useStyles = makeStyles()(theme => ({ }, accordionRoot: { transition: 'all 0.1s ease', + '&:before': { + opacity: '0 !important', + }, }, accordionExpanded: { backgroundColor: theme.palette.neutral.light, diff --git a/frontend/src/component/common/Table/cells/TextCell/TextCell.styles.ts b/frontend/src/component/common/Table/cells/TextCell/TextCell.styles.ts index e052a9b64f..273f9ead7c 100644 --- a/frontend/src/component/common/Table/cells/TextCell/TextCell.styles.ts +++ b/frontend/src/component/common/Table/cells/TextCell/TextCell.styles.ts @@ -9,6 +9,9 @@ export const useStyles = makeStyles<{ lineClamp?: number }>()( WebkitLineClamp: lineClamp ? lineClamp : 'none', WebkitBoxOrient: 'vertical', wordBreak: 'break-all', + [theme.breakpoints.down('sm')]: { + wordBreak: 'normal', + }, }, }) ); diff --git a/frontend/src/component/common/Table/cells/TimeAgoCell/TimeAgoCell.tsx b/frontend/src/component/common/Table/cells/TimeAgoCell/TimeAgoCell.tsx index 22ff09e6bf..45c1b6d8d4 100644 --- a/frontend/src/component/common/Table/cells/TimeAgoCell/TimeAgoCell.tsx +++ b/frontend/src/component/common/Table/cells/TimeAgoCell/TimeAgoCell.tsx @@ -27,7 +27,12 @@ export const TimeAgoCell: VFC = ({ return ( - + diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx index 6d562d6120..54b5484774 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx @@ -67,9 +67,9 @@ export const FeatureStrategyForm = ({ const { hasAccess } = useContext(AccessContext); const { strategyDefinition } = useStrategy(strategy?.name); - const { draft } = usePendingChangeRequests(feature.project); + const { data } = usePendingChangeRequests(feature.project); const { changeRequestInReviewOrApproved, alert } = - useChangeRequestInReviewWarning(draft); + useChangeRequestInReviewWarning(data); const hasChangeRequestInReviewForEnvironment = changeRequestInReviewOrApproved(environmentId || ''); diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyDraggableItem.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyDraggableItem.tsx index 4fae3100b5..c98e7dedc0 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyDraggableItem.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyDraggableItem.tsx @@ -84,7 +84,7 @@ const ChangeRequestStatusBadge = ({ } return ( - <> + Modified in draft} @@ -93,6 +93,6 @@ const ChangeRequestStatusBadge = ({ condition={change?.action === 'deleteStrategy'} show={Deleted in draft} /> - + ); }; diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/useStrategyChangeFromRequest.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/useStrategyChangeFromRequest.tsx index a62358b032..176d9555e3 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/useStrategyChangeFromRequest.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/useStrategyChangeFromRequest.tsx @@ -6,9 +6,9 @@ export const useStrategyChangeFromRequest = ( environment: string, strategyId: string ) => { - const { draft } = usePendingChangeRequests(projectId); + const { data } = usePendingChangeRequests(projectId); - const environmentDraft = draft?.find( + const environmentDraft = data?.find( draft => draft.environment === environment ); const feature = environmentDraft?.features.find( diff --git a/frontend/src/component/project/Project/ProjectSettings/ChangeRequestConfiguration/ChangeRequestTable.tsx b/frontend/src/component/project/Project/ProjectSettings/ChangeRequestConfiguration/ChangeRequestTable.tsx index 9f8b5560ba..d5a8a2a90c 100644 --- a/frontend/src/component/project/Project/ProjectSettings/ChangeRequestConfiguration/ChangeRequestTable.tsx +++ b/frontend/src/component/project/Project/ProjectSettings/ChangeRequestConfiguration/ChangeRequestTable.tsx @@ -139,7 +139,6 @@ export const ChangeRequestTable: VFC = () => { }, { Header: 'Required approvals', - align: 'center', Cell: ({ row: { original } }: any) => { const { hasAccess } = useContext(AccessContext); @@ -149,6 +148,7 @@ export const ChangeRequestTable: VFC = () => { show={ { diff --git a/frontend/src/hooks/api/getters/usePendingChangeRequests/usePendingChangeRequests.ts b/frontend/src/hooks/api/getters/usePendingChangeRequests/usePendingChangeRequests.ts index 8e57a1997e..660d3ad0f0 100644 --- a/frontend/src/hooks/api/getters/usePendingChangeRequests/usePendingChangeRequests.ts +++ b/frontend/src/hooks/api/getters/usePendingChangeRequests/usePendingChangeRequests.ts @@ -17,7 +17,7 @@ export const usePendingChangeRequests = (project: string) => { ); return { - draft: data, + data, loading: !error && !data, refetch: mutate, error,