From 83d1cb82cd87f4e29038f12a866931e203b86e86 Mon Sep 17 00:00:00 2001 From: Renovate Bot Date: Tue, 21 Dec 2021 00:08:36 +0000 Subject: [PATCH 01/26] chore(deps): update dependency @types/node to v14.18.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 272c6dd788..86feb7d845 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.18.1", + "@types/node": "14.18.2", "@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 cd9d265900..8cc9605651 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.18.1": - version "14.18.1" - resolved "https://registry.yarnpkg.com/@types/node/-/node-14.18.1.tgz#459886b51f52aa923dc06b9ea81cb8b1d733e9d3" - integrity sha512-fTFWOFrgAkj737w1o0HLTIgisgYHnsZfeiqhG1Ltrf/iJjudEbUwetQAsfrtVE49JGwvpEzQR+EbMkIqG4227g== +"@types/node@14.18.2": + version "14.18.2" + resolved "https://registry.yarnpkg.com/@types/node/-/node-14.18.2.tgz#00fe4d1686d5f6cf3a2f2e9a0eef42594d06abfc" + integrity sha512-fqtSN5xn/bBzDxMT77C1rJg6CsH/R49E7qsGuvdPJa20HtV5zSTuLJPNfnlyVH3wauKnkHdLggTVkOW/xP9oQg== "@types/node@^14.14.31": version "14.17.19" From 792093d30bc9befdfb74a1f80af06d03ed79f62d Mon Sep 17 00:00:00 2001 From: Youssef Khedher Date: Tue, 21 Dec 2021 12:35:20 +0100 Subject: [PATCH 02/26] fix: adjust main splash container when zoom in (#566) Co-authored-by: Fredrik Strand Oseberg --- frontend/src/component/common/Splash/Splash.styles.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/component/common/Splash/Splash.styles.ts b/frontend/src/component/common/Splash/Splash.styles.ts index 09905f1738..89d64edbe1 100644 --- a/frontend/src/component/common/Splash/Splash.styles.ts +++ b/frontend/src/component/common/Splash/Splash.styles.ts @@ -3,7 +3,6 @@ import { makeStyles } from '@material-ui/core/styles'; export const useStyles = makeStyles(theme => ({ splashMainContainer: { backgroundColor: theme.palette.primary.light, - height: '100%', width: '100%', display: 'flex', justifyContent: 'center', From 894cca73a16587fc37dc1a32361d287800b387e0 Mon Sep 17 00:00:00 2001 From: Renovate Bot Date: Tue, 21 Dec 2021 13:20:53 +0000 Subject: [PATCH 03/26] chore(deps): update dependency sass to v1.45.1 --- frontend/package.json | 2 +- frontend/yarn.lock | 14 ++++++++++---- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index 86feb7d845..1a050f6643 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -87,7 +87,7 @@ "redux-devtools-extension": "2.13.9", "redux-mock-store": "1.5.4", "redux-thunk": "2.4.1", - "sass": "1.44.0", + "sass": "1.45.1", "swr": "1.0.1", "typescript": "4.5.4", "web-vitals": "2.1.2" diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 8cc9605651..3e6873f634 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -11265,13 +11265,14 @@ sass-loader@^10.0.5: schema-utils "^3.0.0" semver "^7.3.2" -sass@1.44.0: - version "1.44.0" - resolved "https://registry.yarnpkg.com/sass/-/sass-1.44.0.tgz#619aa0a2275c097f9af5e6b8fe8a95e3056430fb" - integrity sha512-0hLREbHFXGQqls/K8X+koeP+ogFRPF4ZqetVB19b7Cst9Er8cOR0rc6RU7MaI4W1JmUShd1BPgPoeqmmgMMYFw== +sass@1.45.1: + version "1.45.1" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.45.1.tgz#fa03951f924d1ba5762949567eaf660e608a1ab0" + integrity sha512-pwPRiq29UR0o4X3fiQyCtrESldXvUQAAE0QmcJTpsI4kuHHcLzZ54M1oNBVIXybQv8QF2zfkpFcTxp8ta97dUA== dependencies: chokidar ">=3.0.0 <4.0.0" immutable "^4.0.0" + source-map-js ">=0.6.2 <2.0.0" sax@~1.2.4: version "1.2.4" @@ -11607,6 +11608,11 @@ source-list-map@^2.0.0: resolved "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz" integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw== +"source-map-js@>=0.6.2 <2.0.0": + version "1.0.1" + resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.1.tgz#a1741c131e3c77d048252adfa24e23b908670caf" + integrity sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA== + source-map-js@^0.6.2: version "0.6.2" resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz" From 12128e9e33a0887f834413b4008d6149e297ebfd Mon Sep 17 00:00:00 2001 From: Youssef Date: Wed, 22 Dec 2021 12:52:38 +0100 Subject: [PATCH 04/26] feat: update metrics view in the accordion footer --- .../FeatureOverviewEnvironment.styles.ts | 24 ++++++- .../FeatureOverviewEnvironmentFooter.tsx | 66 +++++++++---------- ...eatureOverviewEnvironmentMetrics.styles.ts | 9 +-- .../FeatureOverviewEnvironmentMetrics.tsx | 9 ++- .../FeatureStrategyExecution.tsx | 5 +- 5 files changed, 68 insertions(+), 45 deletions(-) diff --git a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts index 4874c05e0e..835ff44f51 100644 --- a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts +++ b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts @@ -70,8 +70,8 @@ export const useStyles = makeStyles(theme => ({ alignItems: 'center', }, percentageContainer: { - width: '50px', - height: '50px', + width: '90px', + height: '90px', border: `2px solid ${theme.palette.primary.light}`, borderRadius: '50%', display: 'flex', @@ -95,6 +95,7 @@ export const useStyles = makeStyles(theme => ({ requestText: { textAlign: 'center', marginTop: '1rem', + fontSize: theme.fontSizes.smallBody, }, linkContainer: { display: 'flex', @@ -135,6 +136,9 @@ export const useStyles = makeStyles(theme => ({ truncator: { textAlign: 'center', }, + resultContainer: { + flexWrap: 'wrap', + }, }, [theme.breakpoints.down(400)]: { accordionHeader: { @@ -145,4 +149,20 @@ export const useStyles = makeStyles(theme => ({ padding: '0.5rem', }, }, + resultContainer: { + display: 'flex', + width: '100%', + justifyContent: 'space-around', + }, + dataContainer: { + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignContent: 'center', + alignItems: 'center', + padding: '0px 15px', + }, + resultTitle: { + color: theme.palette.primary.main, + }, })); diff --git a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentFooter/FeatureOverviewEnvironmentFooter.tsx b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentFooter/FeatureOverviewEnvironmentFooter.tsx index d8ec877f27..09deed1ffa 100644 --- a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentFooter/FeatureOverviewEnvironmentFooter.tsx +++ b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentFooter/FeatureOverviewEnvironmentFooter.tsx @@ -1,12 +1,8 @@ -import { Warning } from '@material-ui/icons'; import { IFeatureEnvironment, IFeatureEnvironmentMetrics, } from '../../../../../../../interfaces/featureToggle'; import { calculatePercentage } from '../../../../../../../utils/calculate-percentage'; -import ConditionallyRender from '../../../../../../common/ConditionallyRender'; -import FeatureEnvironmentMetrics from '../../../FeatureEnvironmentMetrics/FeatureEnvironmentMetrics'; - import { useStyles } from '../FeatureOverviewEnvironment.styles'; interface IFeatureOverviewEnvironmentFooterProps { @@ -32,37 +28,41 @@ const FeatureOverviewEnvironmentFooter = ({
- - } - elseShow={ -
- -

- As long as the environment is disabled, all - requests made for this feature toggle will - return false. Add a strategy and turn on the - environment to enable it for your users. -

+
+
+

Exposure

+
+ {environmentMetric?.yes}
- } - /> - -
- Total requests {totalTraffic} -
- {calculatePercentage( - totalTraffic, - environmentMetric?.yes - )} - % +

+ Total exposure of the feature in the environment in + the last hour +

+
+
+

% exposure

+
+ {calculatePercentage( + totalTraffic, + environmentMetric?.yes + )} + % +
+

+ Total exposure of the feature in the environment in + the last hour +

+
+
+

Total requests

+
+ {environmentMetric?.yes + environmentMetric?.no} +
+

+ The total request of the feature in the environment + in the last hour +

-

- Received enabled for this feature in this environment in - the last hour. -

diff --git a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.styles.ts b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.styles.ts index fdcc581370..7d384805a7 100644 --- a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.styles.ts +++ b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.styles.ts @@ -17,15 +17,18 @@ export const useStyles = makeStyles(theme => ({ width: '75px', }, infoParagraph: { - maxWidth: '150px', + maxWidth: '215px', marginTop: '0.25rem', fontSize: theme.fontSizes.smallBody, }, percentage: { color: theme.palette.primary.light, - textAlign: 'center', + textAlign: 'right', fontSize: theme.fontSizes.subHeader, }, + percentageCircle: { + transform: 'scale(0.85)', + }, [theme.breakpoints.down(700)]: { infoParagraph: { display: 'none', @@ -35,8 +38,6 @@ export const useStyles = makeStyles(theme => ({ icon: { display: 'none', }, - }, - [theme.breakpoints.down(400)]: { percentageCircle: { display: 'none', }, diff --git a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.tsx b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.tsx index 446e0ea411..f0ff52afba 100644 --- a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.tsx +++ b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.tsx @@ -27,7 +27,8 @@ const FeatureOverviewEnvironmentMetrics = ({ {percentage}%

- No one has received this feature in the last hour. + The feature has been requested 0 times and + exposed 0 times in the last hour

{percentage}%

- {environmentMetric.yes} users have received the feature in - the last hour. + The feature has been requested{' '} + {environmentMetric.yes + environmentMetric.no} times{' '} + and exposed {environmentMetric.yes} times in the last + hour

- {parameters[key]}% of your user base{' '} + {parameters[key]}% of your base{' '} {constraints.length > 0 ? 'who match constraints' : ''}{' '} @@ -146,8 +146,7 @@ const FeatureStrategyExecution = ({ return (

- {strategy?.parameters[param.name]}% of your user - base{' '} + {strategy?.parameters[param.name]}% of your base{' '} {constraints?.length > 0 ? 'who match constraints' : ''}{' '} From 4b703bb4cc275fe817ef5dfc1e001ffc976eac2d Mon Sep 17 00:00:00 2001 From: Youssef Date: Thu, 30 Dec 2021 10:57:35 +0100 Subject: [PATCH 05/26] feat: add show password for all passwords input --- .../admin/users/change-password-component.jsx | 62 ++++++++++++++++++- .../component/user/HostedAuth/HostedAuth.jsx | 45 +++++++++++++- .../user/PasswordAuth/PasswordAuth.jsx | 41 +++++++++++- .../UserProfile/EditProfile/EditProfile.tsx | 55 ++++++++++++++-- .../ResetPasswordForm/ResetPasswordForm.tsx | 61 +++++++++++++++++- 5 files changed, 250 insertions(+), 14 deletions(-) diff --git a/frontend/src/component/admin/users/change-password-component.jsx b/frontend/src/component/admin/users/change-password-component.jsx index cb040e043b..6027c7aa16 100644 --- a/frontend/src/component/admin/users/change-password-component.jsx +++ b/frontend/src/component/admin/users/change-password-component.jsx @@ -1,7 +1,14 @@ import { useState } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import { TextField, Typography, Avatar } from '@material-ui/core'; +import { + TextField, + Typography, + Avatar, + InputAdornment, + IconButton, +} from '@material-ui/core'; +import { Visibility, VisibilityOff } from '@material-ui/icons'; import { trim } from '../../common/util'; import { modalStyles } from './util'; import Dialogue from '../../common/Dialogue/Dialogue'; @@ -20,8 +27,17 @@ function ChangePassword({ const [data, setData] = useState({}); const [error, setError] = useState({}); const [validPassword, setValidPassword] = useState(false); + const [showPassword, setShowPassword] = useState(false); const commonStyles = useCommonStyles(); + const handleClickShowPassword = () => { + setShowPassword(!showPassword); + }; + + const handleMouseDownPassword = e => { + e.preventDefault(); + }; + const updateField = e => { setError({}); setData({ @@ -112,23 +128,63 @@ function ChangePassword({ + + {showPassword ? ( + + ) : ( + + )} + + + ), + }} /> + + {showPassword ? ( + + ) : ( + + )} + + + ), + }} /> { const params = useQueryParams(); const [username, setUsername] = useState(params.get('email') || ''); const [password, setPassword] = useState(''); + const [showPassword, setShowPassword] = useState(false); const [errors, setErrors] = useState({ usernameError: '', passwordError: '', }); + const handleClickShowPassword = () => { + setShowPassword(!showPassword); + }; + + const handleMouseDownPassword = e => { + e.preventDefault(); + }; + const handleSubmit = async evt => { evt.preventDefault(); @@ -113,12 +130,36 @@ const HostedAuth = ({ authDetails, passwordLogin }) => { label="Password" onChange={evt => setPassword(evt.target.value)} name="password" - type="password" + type={showPassword ? 'text' : 'password'} value={password} error={!!passwordError} helperText={passwordError} variant="outlined" size="small" + InputProps={{ + style:{ + paddingRight: 0 + }, + endAdornment: ( + + + {showPassword ? ( + + ) : ( + + )} + + + ), + }} />