From 54d39882c3e9bf2a2d1e265f65e818b7d9f38f34 Mon Sep 17 00:00:00 2001 From: Youssef Date: Mon, 6 Dec 2021 12:27:01 +0100 Subject: [PATCH 01/11] create environment guidance dialog --- .../FeatureToggleListNew.styles.ts | 4 +++ .../FeatureToggleListNewItem.tsx | 25 ++++++++++++++++++- 2 files changed, 28 insertions(+), 1 deletion(-) diff --git a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts index cd7b318748..df4e0c3981 100644 --- a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts +++ b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts @@ -55,4 +55,8 @@ export const useStyles = makeStyles(theme => ({ overflow: 'hidden', whiteSpace: 'nowrap', }, + infoText:{ + marginBottom: '10px', + fontSize: theme.fontSizes.bodySize, + }, })); diff --git a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx index f8bc9a3408..1beb3bb482 100644 --- a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx +++ b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx @@ -1,4 +1,4 @@ -import { useRef } from 'react'; +import { useRef, useState } from 'react'; import { TableCell, TableRow } from '@material-ui/core'; import { useHistory } from 'react-router'; @@ -17,6 +17,7 @@ import useProject from '../../../../hooks/api/getters/useProject/useProject'; import { UPDATE_FEATURE } from '../../../providers/AccessProvider/permissions'; import PermissionSwitch from '../../../common/PermissionSwitch/PermissionSwitch'; import { Link } from 'react-router-dom'; +import Dialogue from '../../../common/Dialogue'; interface IFeatureToggleListNewItemProps { name: string; @@ -46,6 +47,7 @@ const FeatureToggleListNewItem = ({ const styles = useStyles(); const history = useHistory(); const ref = useRef(null); + const [showInfoBox, setShowInfoBox] = useState(false); const onClick = (e: SyntheticEvent) => { if (!ref.current?.contains(e.target)) { @@ -64,6 +66,7 @@ const FeatureToggleListNewItem = ({ refetch(); }) .catch(e => { + setShowInfoBox(true); setToastData({ show: true, type: 'error', @@ -145,6 +148,26 @@ const FeatureToggleListNewItem = ({ })} {toast} + + console.log('hi')} + onClose={() => setShowInfoBox(false)} + title="You need to add a strategy to your toggle" + primaryButtonText="Take me directly to add strategy" + secondaryButtonText="Cancel" + > +

+ Before you can enable the toggle in the environment, you + need to add an execution strategy. +

+

+ You can add the execution strategy by selecting the toggle, + open the environment accordion and add the execution + strategy. +

+ ); }; From ea672a1064872f994747439d5f9338c1ef9f1744 Mon Sep 17 00:00:00 2001 From: Fredrik Strand Oseberg Date: Fri, 3 Dec 2021 10:08:34 +0100 Subject: [PATCH 02/11] 4.3.0-beta.3 (#538) --- frontend/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/package.json b/frontend/package.json index e61b076278..0951018287 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -1,7 +1,7 @@ { "name": "unleash-frontend", "description": "unleash your features", - "version": "4.3.0-beta.2", + "version": "4.3.0-beta.3", "keywords": [ "unleash", "feature toggle", From 30930d83f25d505dade3d8f49c8a2a3216bc5982 Mon Sep 17 00:00:00 2001 From: Renovate Bot Date: Fri, 3 Dec 2021 21:12:27 +0000 Subject: [PATCH 03/11] chore(deps): update dependency @testing-library/jest-dom to v5.16.0 --- frontend/package.json | 2 +- frontend/yarn.lock | 15 ++++++++++----- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index 0951018287..cf7a3c9c01 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -40,7 +40,7 @@ "@material-ui/core": "4.12.3", "@material-ui/icons": "4.11.2", "@material-ui/lab": "4.0.0-alpha.60", - "@testing-library/jest-dom": "5.15.1", + "@testing-library/jest-dom": "5.16.0", "@testing-library/react": "12.1.2", "@testing-library/user-event": "13.5.0", "@types/debounce": "1.2.1", diff --git a/frontend/yarn.lock b/frontend/yarn.lock index f3220b2a0b..6be97ff35d 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -1886,14 +1886,14 @@ lz-string "^1.4.4" pretty-format "^27.0.2" -"@testing-library/jest-dom@5.15.1": - version "5.15.1" - resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.15.1.tgz#4c49ba4d244f235aec53f0a83498daeb4ee06c33" - integrity sha512-kmj8opVDRE1E4GXyLlESsQthCXK7An28dFWxhiMwD7ZUI7ZxA6sjdJRxLerD9Jd8cHX4BDc1jzXaaZKqzlUkvg== +"@testing-library/jest-dom@5.16.0": + version "5.16.0" + resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.16.0.tgz#de1a7c5fedfeb80eb2be9fc81f61473973b302b3" + integrity sha512-ECygvCL6ufPfHna4fsk7o24+3PVNhRbioDpFbfSVEZaglT6EjuRP+w8I5tzigFz1fobpvCrVRoKyR4qx2QUCxw== dependencies: "@babel/runtime" "^7.9.2" "@types/testing-library__jest-dom" "^5.9.1" - aria-query "^4.2.2" + aria-query "^5.0.0" chalk "^3.0.0" css "^3.0.0" css.escape "^1.5.1" @@ -2819,6 +2819,11 @@ aria-query@^4.2.2: "@babel/runtime" "^7.10.2" "@babel/runtime-corejs3" "^7.10.2" +aria-query@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.0.0.tgz#210c21aaf469613ee8c9a62c7f86525e058db52c" + integrity sha512-V+SM7AbUwJ+EBnB8+DXs0hPZHO0W6pqBcc0dW90OwtVG02PswOu/teuARoLQjdDOH+t9pJgGnW5/Qmouf3gPJg== + arity-n@^1.0.4: version "1.0.4" resolved "https://registry.npmjs.org/arity-n/-/arity-n-1.0.4.tgz" From 6170bfeb6178940b8bc6f241ab8067c9f0ad91df Mon Sep 17 00:00:00 2001 From: Renovate Bot Date: Fri, 3 Dec 2021 23:47:04 +0000 Subject: [PATCH 04/11] chore(deps): update dependency @types/node to v14.18.0 --- 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 cf7a3c9c01..6c2c537714 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -48,7 +48,7 @@ "@types/enzyme": "3.10.10", "@types/enzyme-adapter-react-16": "1.0.6", "@types/jest": "27.0.3", - "@types/node": "14.17.34", + "@types/node": "14.18.0", "@types/react": "17.0.37", "@types/react-dom": "17.0.11", "@types/react-router-dom": "5.3.2", diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 6be97ff35d..640fefc013 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -2112,10 +2112,10 @@ resolved "https://registry.npmjs.org/@types/node/-/node-14.14.37.tgz" integrity sha512-XYmBiy+ohOR4Lh5jE379fV2IU+6Jn4g5qASinhitfyO71b/sCo6MKsMLF5tc7Zf2CE8hViVQyYSobJNke8OvUw== -"@types/node@14.17.34": - version "14.17.34" - resolved "https://registry.yarnpkg.com/@types/node/-/node-14.17.34.tgz#fe4b38b3f07617c0fa31ae923fca9249641038f0" - integrity sha512-USUftMYpmuMzeWobskoPfzDi+vkpe0dvcOBRNOscFrGxVp4jomnRxWuVohgqBow2xyIPC0S3gjxV/5079jhmDg== +"@types/node@14.18.0": + version "14.18.0" + resolved "https://registry.yarnpkg.com/@types/node/-/node-14.18.0.tgz#98df2397f6936bfbff4f089e40e06fa5dd88d32a" + integrity sha512-0GeIl2kmVMXEnx8tg1SlG6Gg8vkqirrW752KqolYo1PHevhhZN3bhJ67qHj+bQaINhX0Ra3TlWwRvMCd9iEfNQ== "@types/node@^14.14.31": version "14.17.19" From e335b8f0eb1631ccd77f544ad887856a2f33353e Mon Sep 17 00:00:00 2001 From: Renovate Bot Date: Sat, 4 Dec 2021 16:13:05 +0000 Subject: [PATCH 05/11] chore(deps): update dependency prettier to v2.5.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 6c2c537714..fb27020447 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -73,7 +73,7 @@ "lodash.clonedeep": "4.5.0", "lodash.flow": "3.5.0", "node-fetch": "2.6.6", - "prettier": "2.5.0", + "prettier": "2.5.1", "react": "17.0.2", "react-dnd": "14.0.4", "react-dnd-html5-backend": "14.0.2", diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 640fefc013..a0dd816fa0 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -10160,10 +10160,10 @@ prepend-http@^1.0.0: resolved "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz" integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw= -prettier@2.5.0: - version "2.5.0" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.0.tgz#a6370e2d4594e093270419d9cc47f7670488f893" - integrity sha512-FM/zAKgWTxj40rH03VxzIPdXmj39SwSjwG0heUcNFwI+EMZJnY93yAiKXM3dObIKAM5TA88werc8T/EwhB45eg== +prettier@2.5.1: + version "2.5.1" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a" + integrity sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg== pretty-bytes@^5.3.0, pretty-bytes@^5.6.0: version "5.6.0" From 15300c96d2334849f8b78accb2afad68418f1ffb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivar=20Conradi=20=C3=98sthus?= Date: Mon, 6 Dec 2021 12:37:00 +0100 Subject: [PATCH 06/11] 4.3.0 (#545) Co-authored-by: Fredrik Strand Oseberg --- frontend/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/package.json b/frontend/package.json index fb27020447..eade783a19 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -1,7 +1,7 @@ { "name": "unleash-frontend", "description": "unleash your features", - "version": "4.3.0-beta.3", + "version": "4.3.0", "keywords": [ "unleash", "feature toggle", From c2b1645083e655c79ecc6744d3c40e89ba8048d4 Mon Sep 17 00:00:00 2001 From: Youssef Khedher Date: Mon, 6 Dec 2021 13:04:15 +0100 Subject: [PATCH 07/11] fix: truncate long environment name (#535) * fix: truncate long environment name * fix: truncate no strategies in NoItemsStrategies * fix: open doc link in new tab * fix: redirect to add new strategy view from overview tab * fix: truncate environment name in create strategy header Co-authored-by: Fredrik Strand Oseberg --- .../NoItemsStrategies/NoItemsStrategies.styles.ts | 5 +++++ .../NoItems/NoItemsStrategies/NoItemsStrategies.tsx | 11 ++++++++++- .../CreateEnvironmentSuccessCard.tsx | 5 ++++- .../EnvironmentDeleteConfirm.tsx | 5 +---- .../EnvironmentListItem/EnvironmentListItem.tsx | 5 ++++- .../FeatureOverviewEnvironmentBody.tsx | 2 +- .../FeatureStrategiesCreateHeader.tsx | 9 +++++++-- 7 files changed, 32 insertions(+), 10 deletions(-) diff --git a/frontend/src/component/common/NoItems/NoItemsStrategies/NoItemsStrategies.styles.ts b/frontend/src/component/common/NoItems/NoItemsStrategies/NoItemsStrategies.styles.ts index 36ea911602..ee30fda344 100644 --- a/frontend/src/component/common/NoItems/NoItemsStrategies/NoItemsStrategies.styles.ts +++ b/frontend/src/component/common/NoItems/NoItemsStrategies/NoItemsStrategies.styles.ts @@ -8,4 +8,9 @@ export const useStyles = makeStyles(theme => ({ display: 'block', margin: '1rem 0 0 0', }, + envName: { + position: 'relative', + top: '6px', + fontWeight: 'bold' + }, })); diff --git a/frontend/src/component/common/NoItems/NoItemsStrategies/NoItemsStrategies.tsx b/frontend/src/component/common/NoItems/NoItemsStrategies/NoItemsStrategies.tsx index 780cab1a37..f5e0577804 100644 --- a/frontend/src/component/common/NoItems/NoItemsStrategies/NoItemsStrategies.tsx +++ b/frontend/src/component/common/NoItems/NoItemsStrategies/NoItemsStrategies.tsx @@ -1,6 +1,7 @@ import { UPDATE_FEATURE } from '../../../providers/AccessProvider/permissions'; import ConditionallyRender from '../../ConditionallyRender'; import PermissionButton from '../../PermissionButton/PermissionButton'; +import StringTruncator from '../../StringTruncator/StringTruncator'; import NoItems from '../NoItems'; import { useStyles } from './NoItemsStrategies.styles'; @@ -21,7 +22,13 @@ const NoItemsStrategies = ({ return (

- No strategies added in the {envName} environment + No strategies added in the{' '} + {' '} + environment

@@ -30,6 +37,8 @@ const NoItemsStrategies = ({ Read more here diff --git a/frontend/src/component/environments/CreateEnvironment/CreateEnvironmentSuccess/CreateEnvironmentSuccessCard/CreateEnvironmentSuccessCard.tsx b/frontend/src/component/environments/CreateEnvironment/CreateEnvironmentSuccess/CreateEnvironmentSuccessCard/CreateEnvironmentSuccessCard.tsx index 0283c07755..8e428e3e0d 100644 --- a/frontend/src/component/environments/CreateEnvironment/CreateEnvironmentSuccess/CreateEnvironmentSuccessCard/CreateEnvironmentSuccessCard.tsx +++ b/frontend/src/component/environments/CreateEnvironment/CreateEnvironmentSuccess/CreateEnvironmentSuccessCard/CreateEnvironmentSuccessCard.tsx @@ -1,4 +1,5 @@ import { CloudCircle } from '@material-ui/icons'; +import StringTruncator from '../../../../common/StringTruncator/StringTruncator'; import { ICreateEnvironmentSuccessProps } from '../CreateEnvironmentSuccess'; import { useStyles } from './CreateEnvironmentSuccessCard.styles'; @@ -16,7 +17,9 @@ const CreateEnvironmentSuccessCard = ({

Id
-
{name}
+
+ +
Type
diff --git a/frontend/src/component/environments/EnvironmentList/EnvironmentDeleteConfirm/EnvironmentDeleteConfirm.tsx b/frontend/src/component/environments/EnvironmentList/EnvironmentDeleteConfirm/EnvironmentDeleteConfirm.tsx index e1e1672aa5..147e582643 100644 --- a/frontend/src/component/environments/EnvironmentList/EnvironmentDeleteConfirm/EnvironmentDeleteConfirm.tsx +++ b/frontend/src/component/environments/EnvironmentList/EnvironmentDeleteConfirm/EnvironmentDeleteConfirm.tsx @@ -52,10 +52,7 @@ const EnvironmentDeleteConfirm = ({ strategies that are active in this environment across all feature toggles. - +

In order to delete this environment, please enter the id of the diff --git a/frontend/src/component/environments/EnvironmentList/EnvironmentListItem/EnvironmentListItem.tsx b/frontend/src/component/environments/EnvironmentList/EnvironmentListItem/EnvironmentListItem.tsx index 4aca2ad472..67b68ba903 100644 --- a/frontend/src/component/environments/EnvironmentList/EnvironmentListItem/EnvironmentListItem.tsx +++ b/frontend/src/component/environments/EnvironmentList/EnvironmentListItem/EnvironmentListItem.tsx @@ -24,6 +24,7 @@ import { import { useDrag, useDrop, DropTargetMonitor } from 'react-dnd'; import { XYCoord } from 'dnd-core'; import DisabledIndicator from '../../../common/DisabledIndicator/DisabledIndicator'; +import StringTruncator from '../../../common/StringTruncator/StringTruncator'; interface IEnvironmentListItemProps { env: IEnvironment; @@ -132,7 +133,9 @@ const EnvironmentListItem = ({ - {env.name} + + + } diff --git a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentBody/FeatureOverviewEnvironmentBody.tsx b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentBody/FeatureOverviewEnvironmentBody.tsx index 3944758775..c44423a721 100644 --- a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentBody/FeatureOverviewEnvironmentBody.tsx +++ b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentBody/FeatureOverviewEnvironmentBody.tsx @@ -19,7 +19,7 @@ const FeatureOverviewEnvironmentBody = ({ const { projectId, featureId } = useParams(); const styles = useStyles(); const history = useHistory(); - const strategiesLink = `/projects/${projectId}/features2/${featureId}/strategies?environment=${featureEnvironment?.name}`; + const strategiesLink = `/projects/${projectId}/features2/${featureId}/strategies?environment=${featureEnvironment?.name}&addStrategy=true`; if (!featureEnvironment) return null; diff --git a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesCreateHeader/FeatureStrategiesCreateHeader.tsx b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesCreateHeader/FeatureStrategiesCreateHeader.tsx index a9241d938b..41ba6ff27b 100644 --- a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesCreateHeader/FeatureStrategiesCreateHeader.tsx +++ b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesCreateHeader/FeatureStrategiesCreateHeader.tsx @@ -1,6 +1,7 @@ import { useContext } from 'react'; import FeatureStrategiesUIContext from '../../../../../../contexts/FeatureStrategiesUIContext'; import EnvironmentIcon from '../../../../../common/EnvironmentIcon/EnvironmentIcon'; +import StringTruncator from '../../../../../common/StringTruncator/StringTruncator'; import { useStyles } from './FeatureStrategiesCreateHeader.styles'; const FeatureStrategiesCreateHeader = () => { @@ -13,8 +14,12 @@ const FeatureStrategiesCreateHeader = () => { return (

- {' '} - Configuring strategy for {activeEnvironment?.name} + + Configuring strategy for  +
); From 580c22805a6d064c5f524ddbfd8690fadc645a2c Mon Sep 17 00:00:00 2001 From: Youssef Date: Mon, 6 Dec 2021 22:13:04 +0100 Subject: [PATCH 08/11] add strategy link to environment strategy dialog component --- .../EnvironmentStrategyDialog.styles.ts | 15 ++++++ .../EnvironmentStrategyDialog.tsx | 46 +++++++++++++++++ .../FeatureToggleListNew.styles.ts | 11 ----- .../FeatureToggleListNewItem.tsx | 49 +++++++++---------- .../FeatureOverviewEnvSwitch.tsx | 17 +++++-- .../FeatureOverviewEnvSwitches.tsx | 19 +++++++ frontend/src/constants/apiErrors.ts | 1 + 7 files changed, 116 insertions(+), 42 deletions(-) create mode 100644 frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.styles.ts create mode 100644 frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.tsx create mode 100644 frontend/src/constants/apiErrors.ts diff --git a/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.styles.ts b/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.styles.ts new file mode 100644 index 0000000000..a5d0cdf0fa --- /dev/null +++ b/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.styles.ts @@ -0,0 +1,15 @@ +import { makeStyles } from '@material-ui/core/styles'; + +export const useStyles = makeStyles(theme => ({ + envName: { + display: 'inline-block', + width: '90px', + textOverflow: 'ellipsis', + overflow: 'hidden', + whiteSpace: 'nowrap', + }, + infoText: { + marginBottom: '10px', + fontSize: theme.fontSizes.bodySize, + }, +})); diff --git a/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.tsx b/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.tsx new file mode 100644 index 0000000000..3907a2de81 --- /dev/null +++ b/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import { useHistory } from 'react-router-dom'; +import Dialogue from '../Dialogue'; +import { useStyles } from './EnvironmentStrategyDialog.styles'; + +interface IEnvironmentStrategyDialogProps { + open: boolean; + featureId: string; + projectId: string; + onClose: () => void; + environmentName?: string; +} +const EnvironmentStrategyDialog = ({ + open, + environmentName, + featureId, + projectId, + onClose, +}: IEnvironmentStrategyDialogProps) => { + const styles = useStyles(); + const history = useHistory(); + const strategiesLink = `/projects/${projectId}/features2/${featureId}/strategies?environment=${environmentName}&addStrategy=true`; + + return ( + history.push(strategiesLink)} + onClose={() => onClose()} + title="You need to add a strategy to your toggle" + primaryButtonText="Take me directly to add strategy" + secondaryButtonText="Cancel" + > +

+ Before you can enable the toggle in the environment, you need to + add an execution strategy. +

+

+ You can add the execution strategy by selecting the toggle, open + the environment accordion and add the execution strategy. +

+ + ); +}; + +export default EnvironmentStrategyDialog; diff --git a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts index df4e0c3981..9834c942ab 100644 --- a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts +++ b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts @@ -48,15 +48,4 @@ export const useStyles = makeStyles(theme => ({ textDecoration: 'none', color: 'inherit', }, - envName: { - display: 'inline-block', - width: '90px', - textOverflow: 'ellipsis', - overflow: 'hidden', - whiteSpace: 'nowrap', - }, - infoText:{ - marginBottom: '10px', - fontSize: theme.fontSizes.bodySize, - }, })); diff --git a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx index 1beb3bb482..f97ee56a3b 100644 --- a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx +++ b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx @@ -17,7 +17,8 @@ import useProject from '../../../../hooks/api/getters/useProject/useProject'; import { UPDATE_FEATURE } from '../../../providers/AccessProvider/permissions'; import PermissionSwitch from '../../../common/PermissionSwitch/PermissionSwitch'; import { Link } from 'react-router-dom'; -import Dialogue from '../../../common/Dialogue'; +import { ENVIRONMENT_STRATEGY_ERROR } from '../../../../constants/apiErrors'; +import EnvironmentStrategyDialog from '../../../common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog'; interface IFeatureToggleListNewItemProps { name: string; @@ -48,6 +49,11 @@ const FeatureToggleListNewItem = ({ const history = useHistory(); const ref = useRef(null); const [showInfoBox, setShowInfoBox] = useState(false); + const [environmentName, setEnvironmentName] = useState(''); + + const closeInfoBox = () => { + setShowInfoBox(false); + }; const onClick = (e: SyntheticEvent) => { if (!ref.current?.contains(e.target)) { @@ -66,12 +72,16 @@ const FeatureToggleListNewItem = ({ refetch(); }) .catch(e => { - setShowInfoBox(true); - setToastData({ - show: true, - type: 'error', - text: e.message, - }); + if (e.message === ENVIRONMENT_STRATEGY_ERROR) { + setEnvironmentName(env.name); + setShowInfoBox(true); + } else { + setToastData({ + show: true, + type: 'error', + text: e.message, + }); + } }); }; @@ -148,26 +158,13 @@ const FeatureToggleListNewItem = ({ })} {toast} - - console.log('hi')} - onClose={() => setShowInfoBox(false)} - title="You need to add a strategy to your toggle" - primaryButtonText="Take me directly to add strategy" - secondaryButtonText="Cancel" - > -

- Before you can enable the toggle in the environment, you - need to add an execution strategy. -

-

- You can add the execution strategy by selecting the toggle, - open the environment accordion and add the execution - strategy. -

- + onClose={closeInfoBox} + projectId={projectId} + featureId={name} + environmentName={environmentName} + /> ); }; diff --git a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx index a3e7ca0d77..703c763630 100644 --- a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx +++ b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx @@ -1,4 +1,5 @@ import { useParams } from 'react-router'; +import { ENVIRONMENT_STRATEGY_ERROR } from '../../../../../../constants/apiErrors'; import useFeatureApi from '../../../../../../hooks/api/actions/useFeatureApi/useFeatureApi'; import useFeature from '../../../../../../hooks/api/getters/useFeature/useFeature'; import { TSetToastData } from '../../../../../../hooks/useToast'; @@ -13,6 +14,7 @@ interface IFeatureOverviewEnvSwitchProps { setToastData: TSetToastData; callback?: () => void; text?: string; + showInfoBox?: () => void; } const FeatureOverviewEnvSwitch = ({ @@ -20,6 +22,7 @@ const FeatureOverviewEnvSwitch = ({ setToastData, callback, text, + showInfoBox, }: IFeatureOverviewEnvSwitchProps) => { const { featureId, projectId } = useParams(); const { toggleFeatureEnvironmentOn, toggleFeatureEnvironmentOff } = @@ -39,11 +42,15 @@ const FeatureOverviewEnvSwitch = ({ callback(); } } catch (e: any) { - setToastData({ - show: true, - type: 'error', - text: e.toString(), - }); + if (e.message === ENVIRONMENT_STRATEGY_ERROR) { + showInfoBox(true); + } else { + setToastData({ + show: true, + type: 'error', + text: e.message, + }); + } } }; diff --git a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.tsx b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.tsx index 01449a993a..a5f2f71613 100644 --- a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.tsx +++ b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.tsx @@ -1,9 +1,11 @@ import { Tooltip } from '@material-ui/core'; +import { useState } from 'react'; import { useParams } from 'react-router'; import useFeatureApi from '../../../../../hooks/api/actions/useFeatureApi/useFeatureApi'; import useFeature from '../../../../../hooks/api/getters/useFeature/useFeature'; import useToast from '../../../../../hooks/useToast'; import { IFeatureViewParams } from '../../../../../interfaces/params'; +import EnvironmentStrategyDialog from '../../../../common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog'; import FeatureOverviewEnvSwitch from './FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch'; import { useStyles } from './FeatureOverviewEnvSwitches.styles'; @@ -13,6 +15,12 @@ const FeatureOverviewEnvSwitches = () => { useFeatureApi(); const { feature } = useFeature(projectId, featureId); const { toast, setToastData } = useToast(); + const [showInfoBox, setShowInfoBox] = useState(false); + const [environmentName, setEnvironmentName] = useState(''); + + const closeInfoBox = () => { + setShowInfoBox(false); + }; const renderEnvironmentSwitches = () => { return feature?.environments.map(env => { @@ -21,6 +29,10 @@ const FeatureOverviewEnvSwitches = () => { key={env.name} env={env} setToastData={setToastData} + showInfoBox={() => { + setEnvironmentName(env.name); + setShowInfoBox(true); + }} /> ); }); @@ -38,6 +50,13 @@ const FeatureOverviewEnvSwitches = () => { {renderEnvironmentSwitches()} {toast} +
); }; diff --git a/frontend/src/constants/apiErrors.ts b/frontend/src/constants/apiErrors.ts new file mode 100644 index 0000000000..8703fabfbf --- /dev/null +++ b/frontend/src/constants/apiErrors.ts @@ -0,0 +1 @@ +export const ENVIRONMENT_STRATEGY_ERROR = 'You can not enable the environment before it has strategies'; From f4681a3883624210439c6cbbf92a34f8bdeb4346 Mon Sep 17 00:00:00 2001 From: Youssef Date: Mon, 6 Dec 2021 22:43:23 +0100 Subject: [PATCH 09/11] fix: truncate environments names in project view --- .../EnvironmentStrategyDialog.styles.ts | 7 ------- .../FeatureToggleListNew/FeatureToggleListNew.tsx | 10 +++++----- 2 files changed, 5 insertions(+), 12 deletions(-) diff --git a/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.styles.ts b/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.styles.ts index a5d0cdf0fa..5c846a051b 100644 --- a/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.styles.ts +++ b/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.styles.ts @@ -1,13 +1,6 @@ import { makeStyles } from '@material-ui/core/styles'; export const useStyles = makeStyles(theme => ({ - envName: { - display: 'inline-block', - width: '90px', - textOverflow: 'ellipsis', - overflow: 'hidden', - whiteSpace: 'nowrap', - }, infoText: { marginBottom: '10px', fontSize: theme.fontSizes.bodySize, diff --git a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx index 58c5546e94..9b6b3f73cf 100644 --- a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx +++ b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx @@ -17,6 +17,7 @@ import { IFeatureToggleListItem, } from '../../../interfaces/featureToggle'; import PaginateUI from '../../common/PaginateUI/PaginateUI'; +import StringTruncator from '../../common/StringTruncator/StringTruncator'; interface IFeatureToggleListNewProps { features: IFeatureToggleListItem[]; loading: boolean; @@ -236,12 +237,11 @@ const FeatureToggleListNew = ({ )} align="center" > - - {env.name} - + /> ); })} From 93fb9fb66a7de0bf19a42c0291a7b2bf9d626d83 Mon Sep 17 00:00:00 2001 From: Youssef Date: Tue, 7 Dec 2021 09:59:16 +0100 Subject: [PATCH 10/11] fix: wrong environment name in strategy creation --- .../FeatureToggleListNewItem/FeatureToggleListNewItem.tsx | 8 +++++--- .../FeatureStrategiesEnvironments.tsx | 1 - 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx index f97ee56a3b..d20e6f493b 100644 --- a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx +++ b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx @@ -61,7 +61,7 @@ const FeatureToggleListNewItem = ({ } }; - const handleToggle = (env: IEnvironments, e: SyntheticEvent) => { + const handleToggle = (env: IEnvironments) => { toggleFeatureByEnvironment(env.name, env.enabled) .then(() => { setToastData({ @@ -73,7 +73,6 @@ const FeatureToggleListNewItem = ({ }) .catch(e => { if (e.message === ENVIRONMENT_STRATEGY_ERROR) { - setEnvironmentName(env.name); setShowInfoBox(true); } else { setToastData({ @@ -150,7 +149,10 @@ const FeatureToggleListNewItem = ({ projectId={projectId} permission={UPDATE_FEATURE} ref={ref} - onClick={handleToggle.bind(this, env)} + onClick={() => { + handleToggle(env); + setEnvironmentName(env.name); + }} /> diff --git a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesEnvironments.tsx b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesEnvironments.tsx index dfe87e7d6f..1affd1eb1d 100644 --- a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesEnvironments.tsx +++ b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesEnvironments.tsx @@ -62,7 +62,6 @@ const FeatureStrategiesEnvironments = () => { useEffect(() => { if (addStrategy) { setExpandedSidebar(true); - history.replace(history.location.pathname); } if (!feature) return; From 255ed3fc5eb8d5abba986a7740d7d845ec7d636f Mon Sep 17 00:00:00 2001 From: Youssef Khedher Date: Wed, 8 Dec 2021 14:20:46 +0100 Subject: [PATCH 11/11] fix: replace execution strategy with activation strategy --- .../EnvironmentStrategyDialog.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.tsx b/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.tsx index 3907a2de81..ae2210910e 100644 --- a/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.tsx +++ b/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.tsx @@ -33,11 +33,11 @@ const EnvironmentStrategyDialog = ({ >

Before you can enable the toggle in the environment, you need to - add an execution strategy. + add an activation strategy.

- You can add the execution strategy by selecting the toggle, open - the environment accordion and add the execution strategy. + You can add the activation strategy by selecting the toggle, open + the environment accordion and add the activation strategy.

);