From 805c8e75df8c5ae33692eacd85b244700beb6488 Mon Sep 17 00:00:00 2001 From: Christopher Kolstad Date: Mon, 11 Oct 2021 14:50:48 +0200 Subject: [PATCH 1/7] Ignore .env.local --- frontend/.gitignore | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/.gitignore b/frontend/.gitignore index 09dc7db9ed..7c68ab2ea8 100644 --- a/frontend/.gitignore +++ b/frontend/.gitignore @@ -50,4 +50,5 @@ build .DS_Store cypress/videos/* -cypress/screenshots/* \ No newline at end of file +cypress/screenshots/* +.env.local From 55c9c9a2e01615488ea28c7fef1ea1afff47f4dd Mon Sep 17 00:00:00 2001 From: Christopher Kolstad Date: Mon, 11 Oct 2021 15:11:13 +0200 Subject: [PATCH 2/7] fix: Ensure Object.keys always gets an object --- .../FeatureStrategiesEnvironments.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesEnvironments.tsx b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesEnvironments.tsx index 3e8fd7752a..0373aaf4ed 100644 --- a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesEnvironments.tsx +++ b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesEnvironments.tsx @@ -178,8 +178,8 @@ const FeatureStrategiesEnvironments = () => { // Check groupId - const cacheParamKeys = Object.keys(cachedStrategy?.parameters); - const strategyParamKeys = Object.keys(strategy?.parameters); + const cacheParamKeys = Object.keys(cachedStrategy?.parameters || {}); + const strategyParamKeys = Object.keys(strategy?.parameters || {}); // Check length of parameters if (cacheParamKeys.length !== strategyParamKeys.length) { equal = false; From 31f8b46cd27740dd2a3f5de77bfede1af9799846 Mon Sep 17 00:00:00 2001 From: Christopher Kolstad Date: Mon, 11 Oct 2021 15:14:33 +0200 Subject: [PATCH 3/7] disabled property needs to be a boolean --- .../FeatureStrategiesEnvironments.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesEnvironments.tsx b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesEnvironments.tsx index 0373aaf4ed..7fa36412ad 100644 --- a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesEnvironments.tsx +++ b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesEnvironments.tsx @@ -105,7 +105,7 @@ const FeatureStrategiesEnvironments = () => { return featureCache?.environments?.map((env, index) => { return ( Date: Mon, 11 Oct 2021 22:45:59 +0200 Subject: [PATCH 4/7] fix: show feature toggle type in list (#418) We should show the feature toggle type in all list of toggles. Also cleaned up mobile view. --- .../src/component/common/common.module.scss | 7 +++ .../FeatureToggleListItem.jsx | 6 ++ .../FeatureToggleListItem/styles.js | 4 ++ .../feature-list-item-component-test.jsx.snap | 60 +++++++++++++++++-- .../FeatureToggleListNew.styles.ts | 20 +++---- .../FeatureToggleListNew.tsx | 4 +- .../FeatureToggleListNewItem.tsx | 41 ++++++------- .../FeatureType/FeatureType.styles.ts | 7 +++ .../FeatureView2/FeatureType/FeatureType.tsx | 24 ++++++++ .../ProjectFeatureToggles.styles.ts | 1 + 10 files changed, 129 insertions(+), 45 deletions(-) create mode 100644 frontend/src/component/feature/FeatureView2/FeatureType/FeatureType.styles.ts create mode 100644 frontend/src/component/feature/FeatureView2/FeatureType/FeatureType.tsx diff --git a/frontend/src/component/common/common.module.scss b/frontend/src/component/common/common.module.scss index 896769c8b5..22234bbd9f 100644 --- a/frontend/src/component/common/common.module.scss +++ b/frontend/src/component/common/common.module.scss @@ -40,6 +40,13 @@ } } +@media (max-width: 600px) { + .hideLt600 { + display: none; + } +} + + .dataTableHeader { display: flex; justify-content: space-between; diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.jsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.jsx index 0e850a913e..950e5cc16d 100644 --- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.jsx +++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.jsx @@ -17,6 +17,7 @@ import { styles as commonStyles } from '../../../common'; import { useStyles } from './styles'; import { getTogglePath } from '../../../../utils/route-path-helpers'; import FeatureStatus from '../../FeatureView2/FeatureStatus/FeatureStatus'; +import FeatureType from '../../FeatureView2/FeatureType/FeatureType'; @@ -48,6 +49,9 @@ const FeatureToggleListItem = ({ + + + {name}  + + diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/styles.js b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/styles.js index 009f075301..75b4efac67 100644 --- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/styles.js +++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/styles.js @@ -10,6 +10,10 @@ export const useStyles = makeStyles(theme => ({ marginRight: '0.25rem', flexShrink: '0', }, + listItemType: { + width: '40px', + textAlign: 'center', + }, listItemSvg: { fill: theme.palette.icons.lightGrey, }, diff --git a/frontend/src/component/feature/FeatureToggleList/__tests__/__snapshots__/feature-list-item-component-test.jsx.snap b/frontend/src/component/feature/FeatureToggleList/__tests__/__snapshots__/feature-list-item-component-test.jsx.snap index 152bdef64c..6bb02340d6 100644 --- a/frontend/src/component/feature/FeatureToggleList/__tests__/__snapshots__/feature-list-item-component-test.jsx.snap +++ b/frontend/src/component/feature/FeatureToggleList/__tests__/__snapshots__/feature-list-item-component-test.jsx.snap @@ -10,7 +10,7 @@ exports[`renders correctly with one feature 1`] = ` >
+ + + + + + `; @@ -85,7 +109,7 @@ exports[`renders correctly with one feature without permission 1`] = ` >
+ + + + + + `; diff --git a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts index 02f26c73e6..53747c340e 100644 --- a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts +++ b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts @@ -14,29 +14,23 @@ export const useStyles = makeStyles(theme => ({ color: theme.palette.grey[600], borderBottom: '1px solid ' + theme.palette.grey[200], }, - typeHeader: { - [theme.breakpoints.down('sm')]: { - display: 'none', - }, - }, tableCellStatus: { width: '50px', }, tableCellName: { - width: '250px', - display: 'flex', + paddingLeft: '10px', }, tableCellEnv: { width: '20px', - }, - tableCellType: { - width: '32px', - alignItems: 'center', [theme.breakpoints.down('sm')]: { display: 'none', }, }, - icon: { - color: theme.palette.grey[600], + tableCellType: { + width: '32px', + alignItems: 'center', + [theme.breakpoints.down(600)]: { + display: 'none', + }, }, })); diff --git a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx index 1688b11ef5..0c1900a93a 100644 --- a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx +++ b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx @@ -92,8 +92,8 @@ const FeatureToggleListNew = ({ diff --git a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx index 104fd80b51..77e264448f 100644 --- a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx +++ b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx @@ -3,21 +3,19 @@ import { Switch, TableCell, TableRow, - Tooltip, - useMediaQuery, - useTheme, } from '@material-ui/core'; import { useHistory } from 'react-router'; -import { getFeatureTypeIcons } from '../../../../utils/get-feature-type-icons'; + import { useStyles } from '../FeatureToggleListNew.styles'; import useToggleFeatureByEnv from '../../../../hooks/api/actions/useToggleFeatureByEnv/useToggleFeatureByEnv'; import { IEnvironments } from '../../../../interfaces/featureToggle'; -import ConditionallyRender from '../../../common/ConditionallyRender'; import useToast from '../../../../hooks/useToast'; import { getTogglePath } from '../../../../utils/route-path-helpers'; import { SyntheticEvent } from 'react-router/node_modules/@types/react'; import useUiConfig from '../../../../hooks/api/getters/useUiConfig/useUiConfig'; import FeatureStatus from '../../FeatureView2/FeatureStatus/FeatureStatus'; +import FeatureType from '../../FeatureView2/FeatureType/FeatureType'; +import classNames from 'classnames'; interface IFeatureToggleListNewItemProps { name: string; @@ -34,9 +32,7 @@ const FeatureToggleListNewItem = ({ environments, projectId, }: IFeatureToggleListNewItemProps) => { - const theme = useTheme(); const { toast, setToastData } = useToast(); - const smallScreen = useMediaQuery(theme.breakpoints.down('sm')); const { toggleFeatureByEnvironment } = useToggleFeatureByEnv( projectId, name, @@ -72,28 +68,23 @@ const FeatureToggleListNewItem = ({ }); }; - const IconComponent = getFeatureTypeIcons(type); + return ( <> - + - - - - - - } - /> - + + + + {name} @@ -101,7 +92,9 @@ const FeatureToggleListNewItem = ({ {environments.map((env: IEnvironments) => { return ( diff --git a/frontend/src/component/feature/FeatureView2/FeatureType/FeatureType.styles.ts b/frontend/src/component/feature/FeatureView2/FeatureType/FeatureType.styles.ts new file mode 100644 index 0000000000..ebd7158147 --- /dev/null +++ b/frontend/src/component/feature/FeatureView2/FeatureType/FeatureType.styles.ts @@ -0,0 +1,7 @@ +import { makeStyles } from '@material-ui/core/styles'; + +export const useStyles = makeStyles(theme => ({ + icon: { + color: theme.palette.grey[600], + }, +})); diff --git a/frontend/src/component/feature/FeatureView2/FeatureType/FeatureType.tsx b/frontend/src/component/feature/FeatureView2/FeatureType/FeatureType.tsx new file mode 100644 index 0000000000..c3ba8a157d --- /dev/null +++ b/frontend/src/component/feature/FeatureView2/FeatureType/FeatureType.tsx @@ -0,0 +1,24 @@ +import { useStyles } from './FeatureType.styles'; +import { Tooltip } from '@material-ui/core'; +import { getFeatureTypeIcons } from '../../../../utils/get-feature-type-icons'; + + +interface FeatureTypeProps { + type: string; +} + +const FeatureStatus = ({ type }: FeatureTypeProps) => { + const styles = useStyles(); + const IconComponent = getFeatureTypeIcons(type); + + return ( + + + + ); +}; + +export default FeatureStatus; diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.styles.ts b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.styles.ts index 892da3ae12..6429a52bb6 100644 --- a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.styles.ts +++ b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.styles.ts @@ -11,6 +11,7 @@ export const useStyles = makeStyles(theme => ({ [theme.breakpoints.down('sm')]: { marginLeft: '0', paddingBottom: '4rem', + width: 'inherit', }, }, bodyClass: { padding: '0.5rem 2rem' }, From b4fb4b61436901aeff159660859fcc01c0160862 Mon Sep 17 00:00:00 2001 From: Youssef Khedher Date: Mon, 11 Oct 2021 21:50:04 +0100 Subject: [PATCH 5/7] fix: add loading state to tab elements (#415) --- frontend/src/component/project/Project/Project.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx index e9cc62d9db..bc4f2bf1de 100644 --- a/frontend/src/component/project/Project/Project.tsx +++ b/frontend/src/component/project/Project/Project.tsx @@ -109,6 +109,7 @@ const Project = () => { return tabData.map((tab, index) => { return ( { -

{project?.description}

+

{project?.description}

Date: Mon, 11 Oct 2021 22:50:33 +0200 Subject: [PATCH 6/7] chore(deps): update dependency cypress to v8.6.0 (#417) Co-authored-by: Renovate Bot --- 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 d94934df74..73ca1845fe 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -55,7 +55,7 @@ "classnames": "2.3.1", "craco": "0.0.3", "css-loader": "6.4.0", - "cypress": "8.5.0", + "cypress": "8.6.0", "date-fns": "2.25.0", "debounce": "1.2.1", "enzyme": "3.11.0", diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 89c5f3fdaf..0681525d5f 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -4561,10 +4561,10 @@ cyclist@^1.0.1: resolved "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz" integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk= -cypress@8.5.0: - version "8.5.0" - resolved "https://registry.yarnpkg.com/cypress/-/cypress-8.5.0.tgz#5712ca170913f8344bf167301205c4217c1eb9bd" - integrity sha512-MMkXIS+Ro2KETn4gAlG3tIc/7FiljuuCZP0zpd9QsRG6MZSyZW/l1J3D4iQM6WHsVxuX4rFChn5jPFlC2tNSvQ== +cypress@8.6.0: + version "8.6.0" + resolved "https://registry.yarnpkg.com/cypress/-/cypress-8.6.0.tgz#8d02fa58878b37cfc45bbfce393aa974fa8a8e22" + integrity sha512-F7qEK/6Go5FsqTueR+0wEw2vOVKNgk5847Mys8vsWkzPoEKdxs+7N9Y1dit+zhaZCLtMPyrMwjfA53ZFy+lSww== dependencies: "@cypress/request" "^2.88.6" "@cypress/xvfb" "^1.2.4" From bb8f00ea368ddbb1d1f0bc85fcdf0f7671cca07a Mon Sep 17 00:00:00 2001 From: Youssef Khedher Date: Mon, 11 Oct 2021 22:23:32 +0100 Subject: [PATCH 7/7] fix variant switch not showing correct state (#409) * fix variant switch not showing correct state * remove console log --- .../src/component/feature/variant/AddVariant/AddVariant.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/component/feature/variant/AddVariant/AddVariant.jsx b/frontend/src/component/feature/variant/AddVariant/AddVariant.jsx index e7b70c7ccc..1e0b99209e 100644 --- a/frontend/src/component/feature/variant/AddVariant/AddVariant.jsx +++ b/frontend/src/component/feature/variant/AddVariant/AddVariant.jsx @@ -239,7 +239,7 @@ const AddVariant = ({ control={ }