From ebe7917d7bd4a40b925a5ebc693ccdcb0855fa1c Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 3 Aug 2022 11:46:10 +0000 Subject: [PATCH 1/8] chore(deps): update dependency copy-to-clipboard to v3.3.2 --- frontend/package.json | 2 +- frontend/yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index 345772e136..a12f2d8def 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -66,7 +66,7 @@ "chart.js": "3.8.2", "chartjs-adapter-date-fns": "2.0.0", "classnames": "2.3.1", - "copy-to-clipboard": "3.3.1", + "copy-to-clipboard": "3.3.2", "cypress": "9.7.0", "date-fns": "2.29.1", "debounce": "1.2.1", diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 3c47a58a1b..e73d825159 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -3139,10 +3139,10 @@ cookie@^0.4.2: resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432" integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA== -copy-to-clipboard@3.3.1: - version "3.3.1" - resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae" - integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw== +copy-to-clipboard@3.3.2: + version "3.3.2" + resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.2.tgz#5b263ec2366224b100181dded7ce0579b340c107" + integrity sha512-Vme1Z6RUDzrb6xAI7EZlVZ5uvOk2F//GaxKUxajDqm9LhOVM1inxNAD2vy+UZDYsd0uyA9s7b3/FVZPSxqrCfg== dependencies: toggle-selection "^1.0.6" From 4486901a4b5761f0b1c2a45de870e49d268ea82c Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 3 Aug 2022 14:26:21 +0000 Subject: [PATCH 2/8] chore(deps): update dependency @codemirror/state to v6.1.1 --- frontend/package.json | 2 +- frontend/yarn.lock | 7 ++++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index a12f2d8def..7f53d69553 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -103,7 +103,7 @@ "vitest": "0.20.3", "whatwg-fetch": "^3.6.2", "@codemirror/lang-json": "6.0.0", - "@codemirror/state": "6.1.0", + "@codemirror/state": "6.1.1", "@uiw/react-codemirror": "^4.11.4", "codemirror": "^6.0.1" }, diff --git a/frontend/yarn.lock b/frontend/yarn.lock index e73d825159..bfe2d30c9c 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -1318,7 +1318,12 @@ "@codemirror/view" "^6.0.0" crelt "^1.0.5" -"@codemirror/state@6.1.0", "@codemirror/state@^6.0.0": +"@codemirror/state@6.1.1": + version "6.1.1" + resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-6.1.1.tgz#4f512e5e34ea23a5e10b2c1fe43f6195e90417bb" + integrity sha512-2s+aXsxmAwnR3Rd+JDHPG/1lw0YsA9PEwl7Re88gHJHGfxyfEzKBmsN4rr53RyPIR4lzbbhJX0DCq0WlqlBIRw== + +"@codemirror/state@^6.0.0": version "6.1.0" resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-6.1.0.tgz#c0f1d80f61908c9dcf5e2a3fe931e9dd78f3df8a" integrity sha512-qbUr94DZTe6/V1VS7LDLz11rM/1t/nJxR1El4I6UaxDEdc0aZZvq6JCLJWiRmUf95NRAnDH6fhXn+PWp9wGCIg== From d10c151dea6f3186ed842e3f68be3c5e33f0dfe7 Mon Sep 17 00:00:00 2001 From: sjaanus Date: Wed, 3 Aug 2022 21:57:48 +0300 Subject: [PATCH 3/8] Feat/groups refinement (#1190) * Button for 0 groups * Highlight name on exist * Add hover to groups * Change avatar size to 28px * Add tooltip to project and fix error * Fix tooltip * Link to project, change to flex etc * Reuse badges better * Limit to max 50% width * Refinements * UI refinements * Update * Remove import * Refinement fixes * Refinement * Refinement * Refinement * Star to star rounded --- .../component/admin/groups/Group/Group.tsx | 2 +- .../admin/groups/GroupForm/GroupForm.tsx | 1 + .../GroupUserRoleCell/GroupUserRoleCell.tsx | 30 ++++------ .../groups/GroupsList/GroupCard/GroupCard.tsx | 59 +++++++++++++++---- .../GroupCardActions/GroupCardActions.tsx | 2 +- .../GroupCardAvatars/GroupCardAvatars.tsx | 4 ++ .../GroupPopover/GroupPopover.tsx | 31 +++------- .../GroupsList/GroupEmpty/GroupEmpty.tsx | 35 +++++++++++ .../admin/groups/GroupsList/GroupsList.tsx | 8 +-- .../admin/groups/RemoveGroup/RemoveGroup.tsx | 4 +- frontend/src/component/common/Badge/Badge.tsx | 4 +- .../common/MainHeader/MainHeader.tsx | 11 +++- .../common/UserAvatar/UserAvatar.tsx | 8 +-- .../ProjectRoleDescription.tsx | 43 ++++++++++---- 14 files changed, 157 insertions(+), 85 deletions(-) create mode 100644 frontend/src/component/admin/groups/GroupsList/GroupEmpty/GroupEmpty.tsx diff --git a/frontend/src/component/admin/groups/Group/Group.tsx b/frontend/src/component/admin/groups/Group/Group.tsx index d7ccb7d91c..a3330c49e6 100644 --- a/frontend/src/component/admin/groups/Group/Group.tsx +++ b/frontend/src/component/admin/groups/Group/Group.tsx @@ -255,7 +255,7 @@ export const Group: VFC = () => { onClick={() => setRemoveOpen(true)} permission={ADMIN} tooltipProps={{ - title: 'Remove group', + title: 'Delete group', }} > diff --git a/frontend/src/component/admin/groups/GroupForm/GroupForm.tsx b/frontend/src/component/admin/groups/GroupForm/GroupForm.tsx index d5ef3190c3..6e6e2d9bb2 100644 --- a/frontend/src/component/admin/groups/GroupForm/GroupForm.tsx +++ b/frontend/src/component/admin/groups/GroupForm/GroupForm.tsx @@ -81,6 +81,7 @@ export const GroupForm: FC = ({ value={name} onChange={e => setName(e.target.value)} data-testid={UG_NAME_ID} + required /> How would you describe your group? diff --git a/frontend/src/component/admin/groups/GroupUserRoleCell/GroupUserRoleCell.tsx b/frontend/src/component/admin/groups/GroupUserRoleCell/GroupUserRoleCell.tsx index 3d26d2d3a5..6382e56dc7 100644 --- a/frontend/src/component/admin/groups/GroupUserRoleCell/GroupUserRoleCell.tsx +++ b/frontend/src/component/admin/groups/GroupUserRoleCell/GroupUserRoleCell.tsx @@ -2,25 +2,11 @@ import { capitalize, MenuItem, Select, styled } from '@mui/material'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { TextCell } from 'component/common/Table/cells/TextCell/TextCell'; import { Role } from 'interfaces/group'; +import { Badge } from 'component/common/Badge/Badge'; +import { StarRounded } from '@mui/icons-material'; -const StyledBadge = styled('div')(({ theme }) => ({ - padding: theme.spacing(0.5, 1), - textDecoration: 'none', - color: theme.palette.text.secondary, - border: `1px solid ${theme.palette.dividerAlternative}`, - background: theme.palette.activityIndicators.unknown, - display: 'inline-block', - borderRadius: theme.shape.borderRadius, - marginLeft: theme.spacing(1.5), - fontSize: theme.fontSizes.smallerBody, - fontWeight: theme.fontWeight.bold, - lineHeight: 1, -})); - -const StyledOwnerBadge = styled(StyledBadge)(({ theme }) => ({ - color: theme.palette.success.dark, - border: `1px solid ${theme.palette.success.border}`, - background: theme.palette.success.light, +const StyledPopupStar = styled(StarRounded)(({ theme }) => ({ + color: theme.palette.warning.main, })); interface IGroupUserRoleCellProps { @@ -35,8 +21,12 @@ export const GroupUserRoleCell = ({ const renderBadge = () => ( {capitalize(value)}} - elseShow={{capitalize(value)}} + show={{capitalize(value)}} + elseShow={ + }> + {capitalize(value)} + + } /> ); diff --git a/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx b/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx index 8373b42d2e..6f9309b624 100644 --- a/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx +++ b/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx @@ -1,6 +1,6 @@ import { styled, Tooltip } from '@mui/material'; import { IGroup } from 'interfaces/group'; -import { Link } from 'react-router-dom'; +import { Link, useNavigate } from 'react-router-dom'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { GroupCardAvatars } from './GroupCardAvatars/GroupCardAvatars'; import { Badge } from 'component/common/Badge/Badge'; @@ -20,9 +20,15 @@ const StyledGroupCard = styled('aside')(({ theme }) => ({ border: `1px solid ${theme.palette.dividerAlternative}`, borderRadius: theme.shape.borderRadiusLarge, boxShadow: theme.boxShadows.card, + display: 'flex', + flexDirection: 'column', [theme.breakpoints.up('md')]: { padding: theme.spacing(4), }, + '&:hover': { + transition: 'background-color 0.2s ease-in-out', + backgroundColor: theme.palette.neutral.light, + }, })); const StyledRow = styled('div')(() => ({ @@ -31,6 +37,14 @@ const StyledRow = styled('div')(() => ({ justifyContent: 'space-between', })); +const StyledTitleRow = styled(StyledRow)(() => ({ + alignItems: 'flex-start', +})); + +const StyledBottomRow = styled(StyledRow)(() => ({ + marginTop: 'auto', +})); + const StyledHeaderTitle = styled('h2')(({ theme }) => ({ fontSize: theme.fontSizes.mainHeader, fontWeight: theme.fontWeight.medium, @@ -55,7 +69,13 @@ const StyledCounterDescription = styled('span')(({ theme }) => ({ marginLeft: theme.spacing(1), })); -const ProjectBadgeContainer = styled('div')(() => ({})); +const ProjectBadgeContainer = styled('div')(() => ({ + maxWidth: '50%', +})); + +const StyledBadge = styled(Badge)(() => ({ + marginRight: 0.5, +})); interface IGroupCardProps { group: IGroup; @@ -63,12 +83,12 @@ interface IGroupCardProps { export const GroupCard = ({ group }: IGroupCardProps) => { const [removeOpen, setRemoveOpen] = useState(false); - + const navigate = useNavigate(); return ( <> - + {group.name} { onRemove={() => setRemoveOpen(true)} /> - + {group.description} - + 0} show={} @@ -92,13 +112,26 @@ export const GroupCard = ({ group }: IGroupCardProps) => { 0} show={group.projects.map(project => ( - } - sx={{ marginRight: 0.5 }} + - {project} - + { + e.preventDefault(); + navigate( + `/projects/${project}/access` + ); + }} + color="secondary" + icon={} + > + {project} + + ))} elseShow={ { } /> - + = ({ - Remove group + Delete group diff --git a/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCardAvatars/GroupCardAvatars.tsx b/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCardAvatars/GroupCardAvatars.tsx index 73e6245bd0..01933b912f 100644 --- a/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCardAvatars/GroupCardAvatars.tsx +++ b/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCardAvatars/GroupCardAvatars.tsx @@ -15,6 +15,9 @@ const StyledAvatars = styled('div')(({ theme }) => ({ const StyledAvatar = styled(UserAvatar)(({ theme }) => ({ outline: `${theme.spacing(0.25)} solid ${theme.palette.background.paper}`, marginLeft: theme.spacing(-1), + '&:hover': { + outlineColor: theme.palette.primary.main, + }, })); interface IGroupCardAvatarsProps { @@ -44,6 +47,7 @@ export const GroupCardAvatars = ({ users }: IGroupCardAvatarsProps) => { {shownUsers.map(user => ( { diff --git a/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCardAvatars/GroupPopover/GroupPopover.tsx b/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCardAvatars/GroupPopover/GroupPopover.tsx index 5e59c2e9a5..665ee8bb74 100644 --- a/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCardAvatars/GroupPopover/GroupPopover.tsx +++ b/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCardAvatars/GroupPopover/GroupPopover.tsx @@ -1,21 +1,18 @@ -import { Badge, Popover, styled } from '@mui/material'; +import { Popover, styled } from '@mui/material'; import { IGroupUser, Role } from 'interfaces/group'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { Badge as StyledBadge } from 'component/common/Badge/Badge'; -import StarIcon from '@mui/icons-material/Star'; +import { Badge } from 'component/common/Badge/Badge'; +import { StarRounded } from '@mui/icons-material'; const StyledPopover = styled(Popover)(({ theme }) => ({ pointerEvents: 'none', '.MuiPaper-root': { - padding: '12px', + padding: theme.spacing(2), }, })); -const StyledPopupStar = styled(StarIcon)(({ theme }) => ({ +const StyledPopupStar = styled(StarRounded)(({ theme }) => ({ color: theme.palette.warning.main, - fontSize: theme.fontSizes.smallBody, - marginLeft: theme.spacing(0.1), - marginTop: theme.spacing(2), })); const StyledName = styled('div')(({ theme }) => ({ @@ -55,22 +52,10 @@ export const GroupPopover = ({ > {user?.role}} + show={{user?.role}} elseShow={ - } - > - - {user?.role} - + }> + {user?.role} } /> diff --git a/frontend/src/component/admin/groups/GroupsList/GroupEmpty/GroupEmpty.tsx b/frontend/src/component/admin/groups/GroupsList/GroupEmpty/GroupEmpty.tsx new file mode 100644 index 0000000000..768127474d --- /dev/null +++ b/frontend/src/component/admin/groups/GroupsList/GroupEmpty/GroupEmpty.tsx @@ -0,0 +1,35 @@ +import { Button, styled, Typography } from '@mui/material'; +import { Link } from 'react-router-dom'; + +export const GroupEmpty = () => { + const StyledContainerDiv = styled('div')(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + margin: theme.spacing(6), + marginLeft: 'auto', + marginRight: 'auto', + })); + + const StyledTitle = styled(Typography)(({ theme }) => ({ + fontSize: theme.fontSizes.bodySize, + marginBottom: theme.spacing(2.5), + })); + + return ( + + + No groups available. Get started by adding a new group. + + + + ); +}; diff --git a/frontend/src/component/admin/groups/GroupsList/GroupsList.tsx b/frontend/src/component/admin/groups/GroupsList/GroupsList.tsx index 8f61209922..18d1756406 100644 --- a/frontend/src/component/admin/groups/GroupsList/GroupsList.tsx +++ b/frontend/src/component/admin/groups/GroupsList/GroupsList.tsx @@ -11,6 +11,7 @@ import theme from 'themes/theme'; import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext'; import { TablePlaceholder } from 'component/common/Table'; import { GroupCard } from './GroupCard/GroupCard'; +import { GroupEmpty } from './GroupEmpty/GroupEmpty'; type PageQueryType = Partial>; @@ -123,12 +124,7 @@ export const GroupsList: VFC = () => { ” } - elseShow={ - - No groups available. Get started by adding a new - group. - - } + elseShow={} /> } /> diff --git a/frontend/src/component/admin/groups/RemoveGroup/RemoveGroup.tsx b/frontend/src/component/admin/groups/RemoveGroup/RemoveGroup.tsx index ddf7d5a34d..3dfed93853 100644 --- a/frontend/src/component/admin/groups/RemoveGroup/RemoveGroup.tsx +++ b/frontend/src/component/admin/groups/RemoveGroup/RemoveGroup.tsx @@ -48,10 +48,10 @@ export const RemoveGroup: FC = ({ onClose={() => { setOpen(false); }} - title="Remove group" + title="Delete group" > - Are you sure you wish to remove {group.name}? + Are you sure you wish to delete {group.name}? If this group is currently assigned to one or more projects then users belonging to this group may lose access to those projects. diff --git a/frontend/src/component/common/Badge/Badge.tsx b/frontend/src/component/common/Badge/Badge.tsx index bbcce6fa69..b944542e25 100644 --- a/frontend/src/component/common/Badge/Badge.tsx +++ b/frontend/src/component/common/Badge/Badge.tsx @@ -1,5 +1,5 @@ import { styled, SxProps, Theme } from '@mui/material'; -import { +import React, { cloneElement, FC, ForwardedRef, @@ -17,6 +17,8 @@ interface IBadgeProps { className?: string; sx?: SxProps; children?: ReactNode; + title?: string; + onClick?: (event: React.SyntheticEvent) => void; } interface IBadgeIconProps { diff --git a/frontend/src/component/common/MainHeader/MainHeader.tsx b/frontend/src/component/common/MainHeader/MainHeader.tsx index 2711d6df12..2b46d0237b 100644 --- a/frontend/src/component/common/MainHeader/MainHeader.tsx +++ b/frontend/src/component/common/MainHeader/MainHeader.tsx @@ -1,6 +1,7 @@ import { Paper, styled } from '@mui/material'; import { usePageTitle } from 'hooks/usePageTitle'; import { ReactNode } from 'react'; +import { ConditionallyRender } from '../ConditionallyRender/ConditionallyRender'; const StyledMainHeader = styled(Paper)(({ theme }) => ({ borderRadius: theme.shape.borderRadiusLarge, @@ -49,7 +50,15 @@ export const MainHeader = ({ {title} {actions} - Description:{description} + + Description: + {description} + + } + /> ); }; diff --git a/frontend/src/component/common/UserAvatar/UserAvatar.tsx b/frontend/src/component/common/UserAvatar/UserAvatar.tsx index 523cdbab1f..c2ec2288ae 100644 --- a/frontend/src/component/common/UserAvatar/UserAvatar.tsx +++ b/frontend/src/component/common/UserAvatar/UserAvatar.tsx @@ -9,11 +9,11 @@ import { import { IUser } from 'interfaces/user'; import { FC } from 'react'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import StarIcon from '@mui/icons-material/Star'; +import { StarRounded } from '@mui/icons-material'; const StyledAvatar = styled(Avatar)(({ theme }) => ({ - width: theme.spacing(4), - height: theme.spacing(4), + width: theme.spacing(3.5), + height: theme.spacing(3.5), margin: 'auto', backgroundColor: theme.palette.secondary.light, color: theme.palette.text.primary, @@ -21,7 +21,7 @@ const StyledAvatar = styled(Avatar)(({ theme }) => ({ fontWeight: theme.fontWeight.bold, })); -const StyledStar = styled(StarIcon)(({ theme }) => ({ +const StyledStar = styled(StarRounded)(({ theme }) => ({ color: theme.palette.warning.main, backgroundColor: theme.palette.background.paper, borderRadius: theme.shape.borderRadiusExtraLarge, diff --git a/frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectRoleDescription/ProjectRoleDescription.tsx b/frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectRoleDescription/ProjectRoleDescription.tsx index d4f66881d8..f9d2276693 100644 --- a/frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectRoleDescription/ProjectRoleDescription.tsx +++ b/frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectRoleDescription/ProjectRoleDescription.tsx @@ -44,27 +44,44 @@ export const ProjectRoleDescription: VFC = ({ const environments = useMemo(() => { const environments = new Set(); role.permissions - ?.filter((permission: any) => permission.environment !== '') + ?.filter((permission: any) => permission.environment) .forEach((permission: any) => { environments.add(permission.environment); }); return [...environments].sort(); }, [role]); + const projectPermissions = useMemo(() => { + return role.permissions?.filter( + (permission: any) => !permission.environment + ); + }, [role]); + return ( - - Project permissions - - - {role.permissions - ?.filter((permission: any) => permission.environment === '') - .map((permission: any) => permission.displayName) - .sort() - .map((permission: any) => ( -

{permission}

- ))} - + + + Project permissions + + + {role.permissions + ?.filter( + (permission: any) => !permission.environment + ) + .map( + (permission: any) => permission.displayName + ) + .sort() + .map((permission: any) => ( +

{permission}

+ ))} + + + } + /> Date: Wed, 3 Aug 2022 20:15:55 +0000 Subject: [PATCH 4/8] chore(deps): update dependency sass to v1.54.1 --- frontend/package.json | 2 +- frontend/yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index 7f53d69553..d008b38f7c 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -91,7 +91,7 @@ "react-table": "7.8.0", "react-test-renderer": "17.0.2", "react-timeago": "7.1.0", - "sass": "1.54.0", + "sass": "1.54.1", "semver": "7.3.7", "swr": "1.3.0", "tss-react": "3.7.1", diff --git a/frontend/yarn.lock b/frontend/yarn.lock index bfe2d30c9c..7a56cb189a 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -6097,10 +6097,10 @@ safe-buffer@~5.1.1: resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a" integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg== -sass@1.54.0: - version "1.54.0" - resolved "https://registry.yarnpkg.com/sass/-/sass-1.54.0.tgz#24873673265e2a4fe3d3a997f714971db2fba1f4" - integrity sha512-C4zp79GCXZfK0yoHZg+GxF818/aclhp9F48XBu/+bm9vXEVAYov9iU3FBVRMq3Hx3OA4jfKL+p2K9180mEh0xQ== +sass@1.54.1: + version "1.54.1" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.54.1.tgz#4f72ef57ce2a6c3251f4e2c75eee9a0c19e09eb5" + integrity sha512-GHJJr31Me32RjjUBagyzx8tzjKBUcDwo5239XANIRBq0adDu5iIG0aFO0i/TBb/4I9oyxkEv44nq/kL1DxdDhA== dependencies: chokidar ">=3.0.0 <4.0.0" immutable "^4.0.0" From 528d8c09f03b423059d97485b00ca6819ceab1a5 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 3 Aug 2022 23:26:45 +0000 Subject: [PATCH 5/8] chore(deps): update dependency @testing-library/user-event to v14.4.1 --- frontend/package.json | 2 +- frontend/yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index d008b38f7c..b8948b2ddf 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -49,7 +49,7 @@ "@testing-library/jest-dom": "5.16.4", "@testing-library/react": "12.1.5", "@testing-library/react-hooks": "^7.0.2", - "@testing-library/user-event": "14.3.0", + "@testing-library/user-event": "14.4.1", "@types/debounce": "1.2.1", "@types/deep-diff": "1.0.1", "@types/jest": "28.1.6", diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 7a56cb189a..a2b4c72ada 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -1998,10 +1998,10 @@ "@testing-library/dom" "^8.0.0" "@types/react-dom" "<18.0.0" -"@testing-library/user-event@14.3.0": - version "14.3.0" - resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.3.0.tgz#0a6750b94b40e4739706d41e8efc2ccf64d2aad9" - integrity sha512-P02xtBBa8yMaLhK8CzJCIns8rqwnF6FxhR9zs810flHOBXUYCFjLd8Io1rQrAkQRWEmW2PGdZIEdMxf/KLsqFA== +"@testing-library/user-event@14.4.1": + version "14.4.1" + resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.4.1.tgz#dfa1cceef4833f5288a4090d1b85dce5d8dc20b6" + integrity sha512-Gr20dje1RaNxZ1ehHGPvFkLswfetBQKCfRD/lo6sUJQ52X2TV/QnqUpkjoShfEebrB2KiTPfQkcONwdQiofLhg== "@tootallnate/once@2": version "2.0.0" From cc9bef1d433dd385de492cd6cd5a2fe5c0c30534 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 4 Aug 2022 02:23:03 +0000 Subject: [PATCH 6/8] chore(deps): update dependency sass to v1.54.2 --- frontend/package.json | 2 +- frontend/yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index b8948b2ddf..64624af2f4 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -91,7 +91,7 @@ "react-table": "7.8.0", "react-test-renderer": "17.0.2", "react-timeago": "7.1.0", - "sass": "1.54.1", + "sass": "1.54.2", "semver": "7.3.7", "swr": "1.3.0", "tss-react": "3.7.1", diff --git a/frontend/yarn.lock b/frontend/yarn.lock index a2b4c72ada..cb2279e45a 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -6097,10 +6097,10 @@ safe-buffer@~5.1.1: resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a" integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg== -sass@1.54.1: - version "1.54.1" - resolved "https://registry.yarnpkg.com/sass/-/sass-1.54.1.tgz#4f72ef57ce2a6c3251f4e2c75eee9a0c19e09eb5" - integrity sha512-GHJJr31Me32RjjUBagyzx8tzjKBUcDwo5239XANIRBq0adDu5iIG0aFO0i/TBb/4I9oyxkEv44nq/kL1DxdDhA== +sass@1.54.2: + version "1.54.2" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.54.2.tgz#574cad83814c930ef2475921b9cb5d8203ae8867" + integrity sha512-wbVV26sejsCIbBScZZtNkvnrB/bVCQ8hSlZ01D9nzsVh9zLqCkWrlpvTb3YEb6xsuNi9cx75hncqwikHFSz7tw== dependencies: chokidar ">=3.0.0 <4.0.0" immutable "^4.0.0" From 367d8a6a5ab38b04addadbbe5bd74bdbfb0b8b6d Mon Sep 17 00:00:00 2001 From: olav Date: Thu, 4 Aug 2022 08:41:01 +0200 Subject: [PATCH 7/8] refactor: port event pages to TS (#1193) --- .../FeatureView/FeatureLog/FeatureLog.tsx | 2 +- .../StrategyExecution/StrategyExecution.tsx | 2 +- .../history/EventHistory/EventHistory.tsx | 2 +- .../{EventCard.jsx => EventCard.tsx} | 15 ++++--- .../{EventDiff.jsx => EventDiff.tsx} | 24 +++++------ .../{EventJson.jsx => EventJson.tsx} | 10 +++-- .../EventLog/{EventLog.jsx => EventLog.tsx} | 41 ++++++++++--------- .../src/component/history/EventLog/index.tsx | 7 ++-- .../FeatureEventHistory.jsx | 19 --------- .../FeatureEventHistory.tsx | 18 ++++++++ .../FeatureEventHistoryPage.tsx | 4 +- 11 files changed, 78 insertions(+), 66 deletions(-) rename frontend/src/component/history/EventLog/EventCard/{EventCard.jsx => EventCard.tsx} (81%) rename frontend/src/component/history/EventLog/EventCard/EventDiff/{EventDiff.jsx => EventDiff.tsx} (85%) rename frontend/src/component/history/EventLog/EventJson/{EventJson.jsx => EventJson.tsx} (75%) rename frontend/src/component/history/EventLog/{EventLog.jsx => EventLog.tsx} (69%) delete mode 100644 frontend/src/component/history/FeatureEventHistory/FeatureEventHistory.jsx create mode 100644 frontend/src/component/history/FeatureEventHistory/FeatureEventHistory.tsx diff --git a/frontend/src/component/feature/FeatureView/FeatureLog/FeatureLog.tsx b/frontend/src/component/feature/FeatureView/FeatureLog/FeatureLog.tsx index 4b45e47fef..0c181c80ab 100644 --- a/frontend/src/component/feature/FeatureView/FeatureLog/FeatureLog.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureLog/FeatureLog.tsx @@ -15,7 +15,7 @@ const FeatureLog = () => { return (
- +
); }; diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.tsx index 99efbdd766..3326954c9b 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.tsx @@ -1,5 +1,5 @@ import { Fragment, useMemo, VFC } from 'react'; -import { Box, Chip, Tooltip } from '@mui/material'; +import { Box, Chip } from '@mui/material'; import { IFeatureStrategy } from 'interfaces/strategy'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import PercentageCircle from 'component/common/PercentageCircle/PercentageCircle'; diff --git a/frontend/src/component/history/EventHistory/EventHistory.tsx b/frontend/src/component/history/EventHistory/EventHistory.tsx index 9370f32030..3bf42f1897 100644 --- a/frontend/src/component/history/EventHistory/EventHistory.tsx +++ b/frontend/src/component/history/EventHistory/EventHistory.tsx @@ -8,5 +8,5 @@ export const EventHistory = () => { return null; } - return ; + return ; }; diff --git a/frontend/src/component/history/EventLog/EventCard/EventCard.jsx b/frontend/src/component/history/EventLog/EventCard/EventCard.tsx similarity index 81% rename from frontend/src/component/history/EventLog/EventCard/EventCard.jsx rename to frontend/src/component/history/EventLog/EventCard/EventCard.tsx index 9a573b33fa..55ec0ed2f3 100644 --- a/frontend/src/component/history/EventLog/EventCard/EventCard.jsx +++ b/frontend/src/component/history/EventLog/EventCard/EventCard.tsx @@ -1,9 +1,14 @@ -import EventDiff from './EventDiff/EventDiff'; - +import EventDiff from 'component/history/EventLog/EventCard/EventDiff/EventDiff'; import { useStyles } from './EventCard.styles'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; +import { IEvent } from 'interfaces/event'; -const EventCard = ({ entry, timeFormatted }) => { +interface IEventCardProps { + entry: IEvent; + timeFormatted: string; +} + +const EventCard = ({ entry, timeFormatted }: IEventCardProps) => { const { classes: styles } = useStyles(); return ( @@ -18,7 +23,7 @@ const EventCard = ({ entry, timeFormatted }) => {
Changed by:
{entry.createdBy}
Project:
@@ -27,7 +32,7 @@ const EventCard = ({ entry, timeFormatted }) => { } />
Feature:
diff --git a/frontend/src/component/history/EventLog/EventCard/EventDiff/EventDiff.jsx b/frontend/src/component/history/EventLog/EventCard/EventDiff/EventDiff.tsx similarity index 85% rename from frontend/src/component/history/EventLog/EventCard/EventDiff/EventDiff.jsx rename to frontend/src/component/history/EventLog/EventCard/EventDiff/EventDiff.tsx index 185d247efb..99fb2f5aac 100644 --- a/frontend/src/component/history/EventLog/EventCard/EventDiff/EventDiff.jsx +++ b/frontend/src/component/history/EventLog/EventCard/EventDiff/EventDiff.tsx @@ -1,7 +1,6 @@ -import PropTypes from 'prop-types'; import { diff } from 'deep-diff'; - import { useStyles } from './EventDiff.styles'; +import { IEvent } from 'interfaces/event'; const DIFF_PREFIXES = { A: ' ', @@ -10,7 +9,11 @@ const DIFF_PREFIXES = { N: '+', }; -const EventDiff = ({ entry }) => { +interface IEventDiffProps { + entry: IEvent; +} + +const EventDiff = ({ entry }: IEventDiffProps) => { const { classes: styles } = useStyles(); const KLASSES = { @@ -25,7 +28,7 @@ const EventDiff = ({ entry }) => { ? diff(entry.preData, entry.data) : undefined; - const buildItemDiff = (diff, key) => { + const buildItemDiff = (diff: any, key: string) => { let change; if (diff.lhs !== undefined) { change = ( @@ -48,7 +51,7 @@ const EventDiff = ({ entry }) => { return change; }; - const buildDiff = (diff, idx) => { + const buildDiff = (diff: any, idx: number) => { let change; const key = diff.path.join('.'); @@ -66,7 +69,9 @@ const EventDiff = ({ entry }) => { ); } else { + // @ts-expect-error const spadenClass = KLASSES[diff.kind]; + // @ts-expect-error const prefix = DIFF_PREFIXES[diff.kind]; change = ( @@ -95,15 +100,10 @@ const EventDiff = ({ entry }) => { return ( 
-            
-                {changes.length === 0 ? '(no changes)' : changes}
-            
+            {/* @ts-expect-error */}
+            {changes.length === 0 ? '(no changes)' : changes}
); }; -EventDiff.propTypes = { - entry: PropTypes.object, -}; - export default EventDiff; diff --git a/frontend/src/component/history/EventLog/EventJson/EventJson.jsx b/frontend/src/component/history/EventLog/EventJson/EventJson.tsx similarity index 75% rename from frontend/src/component/history/EventLog/EventJson/EventJson.jsx rename to frontend/src/component/history/EventLog/EventJson/EventJson.tsx index c545f89c51..7f15feeace 100644 --- a/frontend/src/component/history/EventLog/EventJson/EventJson.jsx +++ b/frontend/src/component/history/EventLog/EventJson/EventJson.tsx @@ -1,8 +1,12 @@ import PropTypes from 'prop-types'; - import { useStyles } from './EventJson.styles'; +import { IEvent } from 'interfaces/event'; -const EventJson = ({ entry }) => { +interface IEventJsonProps { + entry: IEvent; +} + +const EventJson = ({ entry }: IEventJsonProps) => { const { classes: styles } = useStyles(); const localEventData = JSON.parse(JSON.stringify(entry)); @@ -15,7 +19,7 @@ const EventJson = ({ entry }) => { return (
  • - {prettyPrinted} + {prettyPrinted}
    • ); diff --git a/frontend/src/component/history/EventLog/EventLog.jsx b/frontend/src/component/history/EventLog/EventLog.tsx similarity index 69% rename from frontend/src/component/history/EventLog/EventLog.jsx rename to frontend/src/component/history/EventLog/EventLog.tsx index cd3e75ff7b..b4f9967e85 100644 --- a/frontend/src/component/history/EventLog/EventLog.jsx +++ b/frontend/src/component/history/EventLog/EventLog.tsx @@ -1,35 +1,47 @@ import { List, Switch, FormControlLabel } from '@mui/material'; -import PropTypes from 'prop-types'; -import EventJson from './EventJson/EventJson'; +import EventJson from 'component/history/EventLog/EventJson/EventJson'; import { PageContent } from 'component/common/PageContent/PageContent'; import { PageHeader } from 'component/common/PageHeader/PageHeader'; -import EventCard from './EventCard/EventCard'; +import EventCard from 'component/history/EventLog/EventCard/EventCard'; import { useStyles } from './EventLog.styles'; import { formatDateYMDHMS } from 'utils/formatDate'; +import { IEventSettings } from 'hooks/useEventSettings'; +import { IEvent } from 'interfaces/event'; +import React from 'react'; +import { ILocationSettings } from 'hooks/useLocationSettings'; + +interface IEventLogProps { + title: string; + events: IEvent[]; + eventSettings: IEventSettings; + setEventSettings: React.Dispatch>; + locationSettings: ILocationSettings; + displayInline?: boolean; +} const EventLog = ({ title, - history, + events, eventSettings, setEventSettings, locationSettings, displayInline, -}) => { +}: IEventLogProps) => { const { classes: styles } = useStyles(); const toggleShowDiff = () => { setEventSettings({ showData: !eventSettings.showData }); }; - const formatFulldateTime = v => { + const formatFulldateTime = (v: string) => { return formatDateYMDHMS(v, locationSettings.locale); }; - if (!history || history.length < 0) { + if (!events || events.length < 0) { return null; } let entries; - const renderListItemCards = entry => ( + const renderListItemCards = (entry: IEvent) => (
  • ( + entries = events.map(entry => ( )); } else { - entries = history.map(renderListItemCards); + entries = events.map(renderListItemCards); } return ( @@ -75,13 +87,4 @@ const EventLog = ({ ); }; -EventLog.propTypes = { - history: PropTypes.array, - eventSettings: PropTypes.object.isRequired, - setEventSettings: PropTypes.func.isRequired, - locationSettings: PropTypes.object.isRequired, - title: PropTypes.string, - displayInline: PropTypes.bool, -}; - export default EventLog; diff --git a/frontend/src/component/history/EventLog/index.tsx b/frontend/src/component/history/EventLog/index.tsx index 2709266b51..0f9e64c86e 100644 --- a/frontend/src/component/history/EventLog/index.tsx +++ b/frontend/src/component/history/EventLog/index.tsx @@ -1,10 +1,11 @@ -import EventLog from './EventLog'; +import EventLog from 'component/history/EventLog/EventLog'; import { useEventSettings } from 'hooks/useEventSettings'; import { useLocationSettings } from 'hooks/useLocationSettings'; +import { IEvent } from 'interfaces/event'; interface IEventLogContainerProps { title: string; - history: unknown[]; + events: IEvent[]; displayInline?: boolean; } @@ -15,7 +16,7 @@ const EventLogContainer = (props: IEventLogContainerProps) => { return ( { - const { events } = useFeatureEvents(toggleName); - - if (events.length === 0) { - return null; - } - - return ( - - ); -}; - -FeatureEventHistory.propTypes = { - toggleName: PropTypes.string.isRequired, -}; diff --git a/frontend/src/component/history/FeatureEventHistory/FeatureEventHistory.tsx b/frontend/src/component/history/FeatureEventHistory/FeatureEventHistory.tsx new file mode 100644 index 0000000000..44764a4a58 --- /dev/null +++ b/frontend/src/component/history/FeatureEventHistory/FeatureEventHistory.tsx @@ -0,0 +1,18 @@ +import EventLog from '../EventLog'; +import { useFeatureEvents } from 'hooks/api/getters/useFeatureEvents/useFeatureEvents'; + +interface IFeatureEventHistoryProps { + featureId: string; +} + +export const FeatureEventHistory = ({ + featureId, +}: IFeatureEventHistoryProps) => { + const { events } = useFeatureEvents(featureId); + + if (events.length === 0) { + return null; + } + + return ; +}; diff --git a/frontend/src/component/history/FeatureEventHistoryPage/FeatureEventHistoryPage.tsx b/frontend/src/component/history/FeatureEventHistoryPage/FeatureEventHistoryPage.tsx index 3abc1277a7..01b61be817 100644 --- a/frontend/src/component/history/FeatureEventHistoryPage/FeatureEventHistoryPage.tsx +++ b/frontend/src/component/history/FeatureEventHistoryPage/FeatureEventHistoryPage.tsx @@ -1,9 +1,9 @@ import React from 'react'; -import { FeatureEventHistory } from '../FeatureEventHistory/FeatureEventHistory'; +import { FeatureEventHistory } from 'component/history/FeatureEventHistory/FeatureEventHistory'; import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; export const FeatureEventHistoryPage = () => { const toggleName = useRequiredPathParam('toggleName'); - return ; + return ; }; From 0b93776db62cb8aaceb7943e75408d26fb5bd6db Mon Sep 17 00:00:00 2001 From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com> Date: Thu, 4 Aug 2022 10:13:07 +0200 Subject: [PATCH 8/8] Update UI for strategies - segmentation and for mobile devices (#1189) * fix: strategies rwd ui updates * rwd updates to strategies * add item numbers to strategies * update strategy segmentation styles --- .../ConstraintAccordion.styles.ts | 18 +++++-- .../StrategySeparator/StrategySeparator.tsx | 48 +++++++++++-------- .../FeatureStrategyEmpty.styles.ts | 1 + .../FeatureStrategyEmpty.tsx | 2 +- .../PresetCard/PresetCard.tsx | 9 +++- .../FeatureStrategySegment.styles.ts | 5 -- .../FeatureStrategySegment.tsx | 6 ++- .../FeatureStrategySegmentList.styles.ts | 8 ++-- .../StrategyDraggableItem.tsx | 32 +++++++++---- .../ConstraintItem/ConstraintItem.styles.ts | 2 +- .../StrategyExecution.styles.ts | 2 +- .../StrategyItem/StrategyItem.styles.ts | 3 ++ .../StrategyItem/StrategyItem.tsx | 8 +++- .../FeatureOverviewEnvironment.styles.ts | 6 ++- .../FeatureOverviewEnvironment.tsx | 22 ++++----- .../SectionSeparator/SectionSeparator.tsx | 4 +- .../FeatureOverviewSegment.tsx | 8 +++- .../RolloutSlider/RolloutSlider.tsx | 4 +- frontend/src/themes/theme.ts | 5 ++ frontend/src/themes/themeTypes.ts | 3 +- 20 files changed, 129 insertions(+), 67 deletions(-) diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts index bceadae3df..ad759801b2 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts @@ -8,8 +8,7 @@ export const useStyles = makeStyles()(theme => ({ alignItems: 'center', justifyContent: 'center', marginRight: theme.spacing(1), - [theme.breakpoints.down(650)]: { - marginBottom: '1rem', + [theme.breakpoints.down(710)]: { marginRight: 0, }, }, @@ -17,8 +16,8 @@ export const useStyles = makeStyles()(theme => ({ fill: '#fff', }, accordion: { - border: `1px solid ${theme.palette.grey[400]}`, - borderRadius: '8px', + border: `1px solid ${theme.palette.dividerAlternative}`, + borderRadius: theme.shape.borderRadiusMedium, backgroundColor: '#fff', boxShadow: 'none', margin: 0, @@ -27,6 +26,9 @@ export const useStyles = makeStyles()(theme => ({ '&:before': { opacity: '0 !important', }, + '&:first-of-type, &:last-of-type': { + borderRadius: theme.shape.borderRadiusMedium, + }, }, accordionEdit: { backgroundColor: '#F6F6FA', @@ -34,7 +36,10 @@ export const useStyles = makeStyles()(theme => ({ headerMetaInfo: { display: 'flex', alignItems: 'stretch', - [theme.breakpoints.down(710)]: { flexDirection: 'column' }, + [theme.breakpoints.down(710)]: { + flexDirection: 'column', + alignItems: 'center', + }, }, headerContainer: { display: 'flex', @@ -76,6 +81,9 @@ export const useStyles = makeStyles()(theme => ({ minWidth: '152px', paddingRight: '0.5rem', }, + [theme.breakpoints.down(710)]: { + paddingRight: 0, + }, }, editingBadge: { borderRadius: theme.shape.borderRadiusExtraLarge, diff --git a/frontend/src/component/common/StrategySeparator/StrategySeparator.tsx b/frontend/src/component/common/StrategySeparator/StrategySeparator.tsx index 3678a96c44..1b97041f76 100644 --- a/frontend/src/component/common/StrategySeparator/StrategySeparator.tsx +++ b/frontend/src/component/common/StrategySeparator/StrategySeparator.tsx @@ -1,18 +1,12 @@ -import { styled } from '@mui/material'; +import { Box, styled, useTheme } from '@mui/material'; import { ConditionallyRender } from '../ConditionallyRender/ConditionallyRender'; interface IStrategySeparatorProps { text: 'AND' | 'OR'; } -const StyledContainer = styled('div')(({ theme }) => ({ - height: theme.spacing(1), - position: 'relative', - width: '100%', -})); - const StyledContent = styled('div')(({ theme }) => ({ - padding: theme.spacing(0.75, 1.5), + padding: theme.spacing(0.75, 1), color: theme.palette.text.primary, fontSize: theme.fontSizes.smallerBody, backgroundColor: theme.palette.secondaryContainer, @@ -20,26 +14,38 @@ const StyledContent = styled('div')(({ theme }) => ({ position: 'absolute', zIndex: theme.zIndex.fab, top: '50%', - left: theme.spacing(3), + left: theme.spacing(2), transform: 'translateY(-50%)', + lineHeight: 1, })); const StyledCenteredContent = styled(StyledContent)(({ theme }) => ({ top: '50%', left: '50%', transform: 'translate(-50%, -50%)', - backgroundColor: theme.palette.secondary.light, + backgroundColor: theme.palette.activityIndicators.primary, border: `1px solid ${theme.palette.primary.border}`, + borderRadius: theme.shape.borderRadiusLarge, })); -export const StrategySeparator = ({ text }: IStrategySeparatorProps) => ( - - {text}} - elseShow={() => ( - {text} - )} - /> - -); +export const StrategySeparator = ({ text }: IStrategySeparatorProps) => { + const theme = useTheme(); + + return ( + + {text}} + elseShow={() => ( + {text} + )} + /> + + ); +}; diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.styles.ts b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.styles.ts index fd2b71c21f..5f7fc7bf8c 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.styles.ts +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.styles.ts @@ -6,6 +6,7 @@ export const useStyles = makeStyles()(theme => ({ flexDirection: 'column', alignItems: 'center', justifyContent: 'center', + paddingTop: theme.spacing(2), }, title: { fontSize: theme.fontSizes.bodySize, diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.tsx index c1490eea47..c604d24b4b 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.tsx @@ -161,7 +161,7 @@ export const FeatureStrategyEmpty = ({ display: 'grid', width: '100%', gap: 2, - gridTemplateColumns: '1fr 1fr', + gridTemplateColumns: { xs: '1fr', sm: '1fr 1fr' }, }} > = ({ {children} - + ({ - title: { - margin: 0, - fontSize: theme.fontSizes.bodySize, - fontWeight: theme.fontWeight.bold, - }, divider: { border: `1px dashed ${theme.palette.divider}`, }, diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegment.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegment.tsx index 604dbb7d7c..6320b7238a 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegment.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegment.tsx @@ -9,7 +9,7 @@ import { FeatureStrategySegmentList } from 'component/feature/FeatureStrategy/Fe import { useStyles } from 'component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegment.styles'; import { SegmentDocsStrategyWarning } from 'component/segments/SegmentDocs/SegmentDocs'; import { useSegmentLimits } from 'hooks/api/getters/useSegmentLimits/useSegmentLimits'; -import { Divider } from '@mui/material'; +import { Divider, Typography } from '@mui/material'; interface IFeatureStrategySegmentProps { segments: ISegment[]; @@ -53,7 +53,9 @@ export const FeatureStrategySegment = ({ return ( <> -

    Segmentation

    + + Segmentation + {atStrategySegmentsLimit && }

    Add a predefined segment to constrain this feature toggle:

    ({ fontSize: theme.fontSizes.smallerBody, border: '1px solid', borderColor: theme.palette.grey[300], - paddingInline: '0.4rem', - marginBlock: '0.2rem', - display: 'grid', + padding: theme.spacing(0.75, 1), + display: 'block', + marginTop: 'auto', + marginBottom: 'auto', alignItems: 'center', borderRadius: theme.shape.borderRadius, + lineHeight: 1, }, selectedSegmentsLabel: { color: theme.palette.text.secondary, 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 080e1731e2..be568736a8 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 @@ -1,3 +1,4 @@ +import { Box, styled } from '@mui/material'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator'; import { MoveListItem, useDragItem } from 'hooks/useDragItem'; @@ -13,6 +14,18 @@ interface IStrategyDraggableItemProps { onDragAndDrop: MoveListItem; } +const StyledIndexLabel = styled('div')(({ theme }) => ({ + fontSize: theme.typography.fontSize, + color: theme.palette.text.secondary, + position: 'absolute', + display: 'none', + right: 'calc(100% + 6px)', + top: theme.spacing(2.5), + [theme.breakpoints.up('md')]: { + display: 'block', + }, +})); + export const StrategyDraggableItem = ({ strategy, index, @@ -23,17 +36,20 @@ export const StrategyDraggableItem = ({ const ref = useDragItem(index, onDragAndDrop); return ( -
    + 0} show={} /> - -
    + + {index + 1} + + +     ); }; diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/ConstraintItem/ConstraintItem.styles.ts b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/ConstraintItem/ConstraintItem.styles.ts index fb8f37bb11..dc31d5fc97 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/ConstraintItem/ConstraintItem.styles.ts +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/ConstraintItem/ConstraintItem.styles.ts @@ -4,7 +4,7 @@ export const useStyles = makeStyles()(theme => ({ container: { width: '100%', padding: theme.spacing(2, 3), - borderRadius: theme.shape.borderRadius, + borderRadius: theme.shape.borderRadiusMedium, border: `1px solid ${theme.palette.divider}`, }, chip: { diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.styles.ts b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.styles.ts index d1fa29e035..a570236fbd 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.styles.ts +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.styles.ts @@ -4,7 +4,7 @@ export const useStyles = makeStyles()(theme => ({ valueContainer: { padding: theme.spacing(2, 3), border: `1px solid ${theme.palette.dividerAlternative}`, - borderRadius: theme.shape.borderRadius, + borderRadius: theme.shape.borderRadiusMedium, }, valueSeparator: { color: theme.palette.grey[700], diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem.styles.ts b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem.styles.ts index 3cc43a4599..4ef86b1b6d 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem.styles.ts +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem.styles.ts @@ -17,6 +17,9 @@ export const useStyles = makeStyles()(theme => ({ borderBottom: `1px solid ${theme.palette.divider}`, fontWeight: theme.typography.fontWeightMedium, }, + headerDraggable: { + paddingLeft: theme.spacing(1), + }, icon: { fill: theme.palette.inactiveIcon, }, diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem.tsx index be80809709..e4b0bfcfb9 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem.tsx @@ -1,6 +1,7 @@ import { DragIndicator, Edit } from '@mui/icons-material'; import { styled, useTheme, IconButton } from '@mui/material'; import { Link } from 'react-router-dom'; +import classNames from 'classnames'; import { IFeatureEnvironment } from 'interfaces/featureToggle'; import { IFeatureStrategy } from 'interfaces/strategy'; import { @@ -52,7 +53,11 @@ export const StrategyItem = ({ return (
    -
    +
    ( @@ -60,6 +65,7 @@ export const StrategyItem = ({ )} diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts index b5c55e7728..50fe9d44e5 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts @@ -28,9 +28,13 @@ export const useStyles = makeStyles()(theme => ({ borderBottomLeftRadius: theme.shape.borderRadiusLarge, borderBottomRightRadius: theme.shape.borderRadiusLarge, borderBottom: `4px solid ${theme.palette.primary.light}`, + + [theme.breakpoints.down('md')]: { + padding: theme.spacing(2, 1), + }, }, accordionDetailsDisabled: { - borderBottom: `4px solid ${theme.palette.dividerAlternative}`, + borderBottom: `4px solid ${theme.palette.neutral.border}`, }, accordionBody: { width: '100%', diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx index 1ae3818743..37f86b3e94 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx @@ -85,18 +85,18 @@ const FeatureOverviewEnvironment = ({ maxWidth="100" maxLength={15} /> - - } - />
    + + } + />
    ({ transform: 'translateY(-50%)', height: 2, width: '100%', - backgroundColor: theme.palette.divider, + backgroundColor: theme.palette.dividerAlternative, }, })); @@ -25,7 +25,7 @@ const SeparatorContent = styled('span')(({ theme }) => ({ background: theme.palette.secondaryContainer, position: 'relative', maxWidth: '80%', - color: theme.palette.text.secondary, + color: theme.palette.text.primary, })); export const SectionSeparator: FC = ({ children }) => ( diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.tsx index d81dcb8bdd..e4ad150dae 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.tsx @@ -3,6 +3,8 @@ import { Link } from 'react-router-dom'; import { DonutLarge } from '@mui/icons-material'; import { useStyles } from 'component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.styles'; import { useSegments } from 'hooks/api/getters/useSegments/useSegments'; +import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; +import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator'; interface IFeatureOverviewSegmentProps { strategyId: string; @@ -20,8 +22,12 @@ export const FeatureOverviewSegment = ({ return ( <> - {segments.map(segment => ( + {segments.map((segment, index) => ( + 0} + show={} + />
    Segment:{' '} {name} diff --git a/frontend/src/themes/theme.ts b/frontend/src/themes/theme.ts index 695d4f5cfa..6d83f80aa3 100644 --- a/frontend/src/themes/theme.ts +++ b/frontend/src/themes/theme.ts @@ -26,6 +26,10 @@ export default createTheme({ fontSize: '1.5rem', lineHeight: 1.875, }, + h3: { + fontSize: '1rem', + fontWeight: '700', + }, caption: { fontSize: `${12 / 16}rem`, }, @@ -128,6 +132,7 @@ export default createTheme({ recent: colors.green[100], inactive: colors.orange[200], abandoned: colors.red[200], + primary: colors.purple[100], }, inactiveIcon: colors.grey[600], }, diff --git a/frontend/src/themes/themeTypes.ts b/frontend/src/themes/themeTypes.ts index 9e61141b28..e218bf42a1 100644 --- a/frontend/src/themes/themeTypes.ts +++ b/frontend/src/themes/themeTypes.ts @@ -46,13 +46,14 @@ declare module '@mui/material/styles' { background: string; }; /** - * For 'Seen' column on feature toggles list. + * For 'Seen' column on feature toggles list and other. */ activityIndicators: { unknown: string; recent: string; inactive: string; abandoned: string; + primary: string; }; dividerAlternative: string; /**