From 4b703bb4cc275fe817ef5dfc1e001ffc976eac2d Mon Sep 17 00:00:00 2001
From: Youssef <khedher.youssef@hotmail.fr>
Date: Thu, 30 Dec 2021 10:57:35 +0100
Subject: [PATCH 01/23] 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({
                 <TextField
                     label="New password"
                     name="password"
-                    type="password"
+                    type={showPassword ? 'text' : 'password'}
                     value={data.password}
                     helperText={error.password}
                     onChange={updateField}
                     variant="outlined"
                     size="small"
+                    InputProps={{
+                        style:{
+                            paddingRight: 0
+                        },
+                        endAdornment: (
+                            <InputAdornment position="end">
+                                <IconButton
+                                    aria-label="toggle password visibility"
+                                    onClick={handleClickShowPassword}
+                                    onMouseDown={handleMouseDownPassword}
+                                >
+                                    {showPassword ? (
+                                        <Visibility />
+                                    ) : (
+                                        <VisibilityOff />
+                                    )}
+                                </IconButton>
+                            </InputAdornment>
+                        ),
+                    }}
                 />
                 <TextField
                     label="Confirm password"
                     name="confirm"
-                    type="password"
+                    type={showPassword ? 'text' : 'password'}
                     value={data.confirm}
                     error={error.confirm !== undefined}
                     helperText={error.confirm}
                     onChange={updateField}
                     variant="outlined"
                     size="small"
+                    InputProps={{
+                        style:{
+                            paddingRight: 0
+                        },
+                        endAdornment: (
+                            <InputAdornment position="end">
+                                <IconButton
+                                    aria-label="toggle password visibility"
+                                    onClick={handleClickShowPassword}
+                                    onMouseDown={handleMouseDownPassword}
+                                >
+                                    {showPassword ? (
+                                        <Visibility />
+                                    ) : (
+                                        <VisibilityOff />
+                                    )}
+                                </IconButton>
+                            </InputAdornment>
+                        ),
+                    }}
                 />
                 <PasswordMatcher
                     started={data.password && data.confirm}
diff --git a/frontend/src/component/user/HostedAuth/HostedAuth.jsx b/frontend/src/component/user/HostedAuth/HostedAuth.jsx
index 083f242658..9b0d6cdcf5 100644
--- a/frontend/src/component/user/HostedAuth/HostedAuth.jsx
+++ b/frontend/src/component/user/HostedAuth/HostedAuth.jsx
@@ -1,7 +1,15 @@
 import React, { useState } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import { Button, Grid, TextField, Typography } from '@material-ui/core';
+import {
+    Button,
+    Grid,
+    TextField,
+    Typography,
+    InputAdornment,
+    IconButton,
+} from '@material-ui/core';
+import { Visibility, VisibilityOff } from '@material-ui/icons';
 import { useHistory } from 'react-router';
 import { useCommonStyles } from '../../../common.styles';
 import { useStyles } from './HostedAuth.styles';
@@ -19,11 +27,20 @@ const HostedAuth = ({ authDetails, passwordLogin }) => {
     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: (
+                                        <InputAdornment position="end">
+                                            <IconButton
+                                                aria-label="toggle password visibility"
+                                                onClick={
+                                                    handleClickShowPassword
+                                                }
+                                                onMouseDown={
+                                                    handleMouseDownPassword
+                                                }
+                                            >
+                                                {showPassword ? (
+                                                    <Visibility />
+                                                ) : (
+                                                    <VisibilityOff />
+                                                )}
+                                            </IconButton>
+                                        </InputAdornment>
+                                    ),
+                                }}
                             />
                             <Grid container>
                                 <Button
diff --git a/frontend/src/component/user/PasswordAuth/PasswordAuth.jsx b/frontend/src/component/user/PasswordAuth/PasswordAuth.jsx
index 99f7b50dcc..b6c29c41c6 100644
--- a/frontend/src/component/user/PasswordAuth/PasswordAuth.jsx
+++ b/frontend/src/component/user/PasswordAuth/PasswordAuth.jsx
@@ -1,7 +1,13 @@
 import { useState } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import { Button, TextField } from '@material-ui/core';
+import {
+    Button,
+    TextField,
+    InputAdornment,
+    IconButton,
+} from '@material-ui/core';
+import { Visibility, VisibilityOff } from '@material-ui/icons';
 import ConditionallyRender from '../../common/ConditionallyRender';
 import { useHistory } from 'react-router';
 import { useCommonStyles } from '../../../common.styles';
@@ -25,11 +31,20 @@ const PasswordAuth = ({ authDetails, passwordLogin }) => {
     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();
 
@@ -120,8 +135,30 @@ const PasswordAuth = ({ authDetails, passwordLogin }) => {
                                 label="Password"
                                 onChange={evt => setPassword(evt.target.value)}
                                 name="password"
-                                type="password"
+                                type={showPassword ? 'text' : 'password'}                                
                                 value={password}
+                                InputProps={{
+                                    style:{
+                                        paddingRight: 0
+                                    },
+                                    endAdornment: (
+                                        <InputAdornment position="end" className={commonStyles.adornedEnd}>
+                                        <IconButton
+                                            aria-label="toggle password visibility"
+                                            onClick={handleClickShowPassword}
+                                            onMouseDown={
+                                                handleMouseDownPassword
+                                            }
+                                        >
+                                            {showPassword ? (
+                                                <Visibility />
+                                            ) : (
+                                                <VisibilityOff />
+                                            )}
+                                        </IconButton>
+                                    </InputAdornment>
+                                    )
+                                  }}
                                 error={!!passwordError}
                                 helperText={passwordError}
                                 variant="outlined"
diff --git a/frontend/src/component/user/UserProfile/EditProfile/EditProfile.tsx b/frontend/src/component/user/UserProfile/EditProfile/EditProfile.tsx
index 6b9c0d6220..d78a467904 100644
--- a/frontend/src/component/user/UserProfile/EditProfile/EditProfile.tsx
+++ b/frontend/src/component/user/UserProfile/EditProfile/EditProfile.tsx
@@ -1,5 +1,6 @@
 import { SyntheticEvent, useState } from 'react';
-import { Button, TextField, Typography } from '@material-ui/core';
+import { Button, TextField, Typography, IconButton, InputAdornment } from '@material-ui/core';
+import { Visibility, VisibilityOff } from '@material-ui/icons';
 import classnames from 'classnames';
 import { useStyles } from './EditProfile.styles';
 import { useCommonStyles } from '../../../../common.styles';
@@ -33,8 +34,17 @@ const EditProfile = ({
     const [error, setError] = useState('');
     const [password, setPassword] = useState('');
     const [confirmPassword, setConfirmPassword] = useState('');
+    const [showPassword, setShowPassword] = useState(false);
     const ref = useLoading(loading);
 
+    const handleClickShowPassword = () => {
+        setShowPassword(!showPassword);
+    };
+
+    const handleMouseDownPassword = (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.preventDefault();
+    };
+
     const submit = async (e: SyntheticEvent) => {
         e.preventDefault();
 
@@ -54,7 +64,7 @@ const EditProfile = ({
                     credentials: 'include',
                 });
                 handleResponse(res);
-            } catch (e) {
+            } catch (e: any) {
                 setError(e);
             }
         }
@@ -117,7 +127,27 @@ const EditProfile = ({
                     variant="outlined"
                     size="small"
                     label="Password"
-                    type="password"
+                    type={showPassword ? 'text' : 'password'}
+                    InputProps={{
+                        style:{
+                            paddingRight: 0
+                        },
+                        endAdornment: (
+                            <InputAdornment position="end">
+                                <IconButton
+                                    aria-label="toggle password visibility"
+                                    onClick={handleClickShowPassword}
+                                    onMouseDown={handleMouseDownPassword}
+                                >
+                                    {showPassword ? (
+                                        <Visibility />
+                                    ) : (
+                                        <VisibilityOff />
+                                    )}
+                                </IconButton>
+                            </InputAdornment>
+                        ),
+                    }}
                     name="password"
                     value={password}
                     autoComplete="on"
@@ -128,7 +158,24 @@ const EditProfile = ({
                     variant="outlined"
                     size="small"
                     label="Confirm password"
-                    type="password"
+                    type={showPassword ? 'text' : 'password'}
+                    InputProps={{
+                        endAdornment: (
+                            <InputAdornment position="end">
+                                <IconButton
+                                    aria-label="toggle password visibility"
+                                    onClick={handleClickShowPassword}
+                                    onMouseDown={handleMouseDownPassword}
+                                >
+                                    {showPassword ? (
+                                        <Visibility />
+                                    ) : (
+                                        <VisibilityOff />
+                                    )}
+                                </IconButton>
+                            </InputAdornment>
+                        ),
+                    }}
                     name="confirmPassword"
                     value={confirmPassword}
                     autoComplete="on"
diff --git a/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.tsx b/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.tsx
index a548257403..8005fc51fd 100644
--- a/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.tsx
+++ b/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.tsx
@@ -1,4 +1,10 @@
-import { Button, TextField } from '@material-ui/core';
+import {
+    Button,
+    TextField,
+    IconButton,
+    InputAdornment,
+} from '@material-ui/core';
+import { Visibility, VisibilityOff } from '@material-ui/icons';
 import classnames from 'classnames';
 import {
     SyntheticEvent,
@@ -32,6 +38,7 @@ const ResetPasswordForm = ({ token, setLoading }: IResetPasswordProps) => {
     const [confirmPassword, setConfirmPassword] = useState('');
     const [matchingPasswords, setMatchingPasswords] = useState(false);
     const [validOwaspPassword, setValidOwaspPassword] = useState(false);
+    const [showPassword, setShowPassword] = useState(false);
     const history = useHistory();
 
     const submittable = matchingPasswords && validOwaspPassword;
@@ -40,6 +47,14 @@ const ResetPasswordForm = ({ token, setLoading }: IResetPasswordProps) => {
         setValidOwaspPassword,
     ]);
 
+    const handleClickShowPassword = () => {
+        setShowPassword(!showPassword);
+    };
+
+    const handleMouseDownPassword = (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.preventDefault();
+    };
+
     useEffect(() => {
         if (!password) {
             setValidOwaspPassword(false);
@@ -110,7 +125,27 @@ const ResetPasswordForm = ({ token, setLoading }: IResetPasswordProps) => {
                 <TextField
                     variant="outlined"
                     size="small"
-                    type="password"
+                    type={showPassword ? 'text' : 'password'}
+                    InputProps={{
+                        style:{
+                            paddingRight: 0
+                        },
+                        endAdornment: (
+                            <InputAdornment position="end">
+                                <IconButton
+                                    aria-label="toggle password visibility"
+                                    onClick={handleClickShowPassword}
+                                    onMouseDown={handleMouseDownPassword}
+                                >
+                                    {showPassword ? (
+                                        <Visibility />
+                                    ) : (
+                                        <VisibilityOff />
+                                    )}
+                                </IconButton>
+                            </InputAdornment>
+                        ),
+                    }}
                     placeholder="Password"
                     value={password || ''}
                     onChange={e => setPassword(e.target.value)}
@@ -121,7 +156,27 @@ const ResetPasswordForm = ({ token, setLoading }: IResetPasswordProps) => {
                 <TextField
                     variant="outlined"
                     size="small"
-                    type="password"
+                    type={showPassword ? 'text' : 'password'}
+                    InputProps={{
+                        style:{
+                            paddingRight: 0
+                        },
+                        endAdornment: (
+                            <InputAdornment position="end">
+                                <IconButton
+                                    aria-label="toggle password visibility"
+                                    onClick={handleClickShowPassword}
+                                    onMouseDown={handleMouseDownPassword}
+                                >
+                                    {showPassword ? (
+                                        <Visibility />
+                                    ) : (
+                                        <VisibilityOff />
+                                    )}
+                                </IconButton>
+                            </InputAdornment>
+                        ),
+                    }}
                     value={confirmPassword || ''}
                     placeholder="Confirm password"
                     onChange={e => setConfirmPassword(e.target.value)}

From 4f772ff2d1593f0079fb45d3808c9c39ef471e46 Mon Sep 17 00:00:00 2001
From: Youssef Khedher <khedher.youssef@hotmail.fr>
Date: Tue, 4 Jan 2022 11:31:11 +0100
Subject: [PATCH 02/23] feat: add strategies icons (#565)

* feat: add strategies icons with add strategy button

* fix: styling the icons

* feat: add styling for disabled button

* fix: adjust icons styling

* fix: add missing braces

* feat: remove badge from strategies icons

Co-authored-by: Fredrik Strand Oseberg <fredrik.no@gmail.com>
---
 .../common/RolloutIcon/RolloutIcon.styles.ts  |   1 +
 .../FeatureOverviewEnvironment.styles.ts      |  72 ++++++++++-
 .../FeatureOverviewEnvironment.tsx            | 119 ++++++++++++++++--
 .../FeatureOverviewEnvironmentBody.tsx        |  14 ++-
 4 files changed, 192 insertions(+), 14 deletions(-)

diff --git a/frontend/src/component/common/RolloutIcon/RolloutIcon.styles.ts b/frontend/src/component/common/RolloutIcon/RolloutIcon.styles.ts
index 21b4e55997..d6798c6f98 100644
--- a/frontend/src/component/common/RolloutIcon/RolloutIcon.styles.ts
+++ b/frontend/src/component/common/RolloutIcon/RolloutIcon.styles.ts
@@ -7,6 +7,7 @@ export const useStyles = makeStyles(theme => ({
         position: 'relative',
         width: '50px',
         height: '100%',
+        padding: '15px 0px',
     },
     vertical: {
         borderRadius: '1px',
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 835ff44f51..1a3b2e2aa9 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
@@ -19,6 +19,13 @@ export const useStyles = makeStyles(theme => ({
         position: 'relative',
         paddingBottom: '1rem',
     },
+    header: {
+        display: 'flex',
+        justifyContent: 'center',
+        flexDirection: 'column',
+
+        paddingTop: '1.5rem',
+    },
     headerTitle: {
         display: 'flex',
         alignItems: 'center',
@@ -115,6 +122,29 @@ export const useStyles = makeStyles(theme => ({
         fill: theme.palette.grey[400],
         marginBottom: '1rem',
     },
+    strategiesText: {
+        fontSize: '14px',
+        color: theme.palette.grey[700],
+    },
+    stratigiesInfoContainer: {
+        display: 'flex',
+    },
+    noStratigiesInfoContainer: {
+        top: '1px',
+        position: 'relative',
+    },
+    stratigiesIconsContainer: {
+        display: 'flex',
+        alignItems: 'center',
+        transform: 'scale(0.8)',
+        top: '3px',
+        left: '-10px',
+        position: 'relative',
+        [theme.breakpoints.down(560)]: {
+            marginLeft: '0px',
+            top: '5px',
+        },
+    },
     [theme.breakpoints.down(750)]: {
         accordionBodyFooter: {
             flexDirection: 'column',
@@ -125,7 +155,7 @@ export const useStyles = makeStyles(theme => ({
     },
     [theme.breakpoints.down(560)]: {
         disabledIndicatorPos: {
-            top: '-8px',
+            top: '13px',
         },
         headerTitle: {
             flexDirection: 'column',
@@ -149,6 +179,46 @@ export const useStyles = makeStyles(theme => ({
             padding: '0.5rem',
         },
     },
+    strategyIconContainer: {
+        marginRight: '5px',
+    },
+    strategyIcon: {
+        fill: theme.palette.grey[600],
+    },
+    container: {
+        display: 'flex',
+        alignItems: 'center',
+        marginLeft: '1.3rem',
+        [theme.breakpoints.down(560)]: {
+            flexDirection: 'column',
+            marginLeft: '0',
+        },
+    },
+    addStrategyButton: {
+        background: 'none',
+        textDecoration: 'none',
+        boxShadow: 'none',
+        color: theme.palette.primary.main,
+        fontWeight: 'normal',
+        '&:hover': {
+            background: 'none',
+            textDecoration: 'none',
+            boxShadow: 'none',
+            color: theme.palette.primary.main,
+            fontWeight: 'normal',
+        },
+        '&:disabled': {
+            margin: '0px 16px',
+            height: '35px'
+         },
+    },
+    separtor: {
+        marginLeft: '-10px',
+        marginRight: '9px',
+        [theme.breakpoints.down(560)]: {
+            display: 'none',
+        },
+    },
     resultContainer: {
         display: 'flex',
         width: '100%',
diff --git a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx
index 66bd45038e..91b7624ac9 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx
+++ b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx
@@ -2,24 +2,38 @@ import {
     Accordion,
     AccordionDetails,
     AccordionSummary,
+    Tooltip,
 } from '@material-ui/core';
 import { ExpandMore } from '@material-ui/icons';
+import React from 'react';
 import { useParams } from 'react-router';
+import { useHistory } from 'react-router-dom';
 import useFeature from '../../../../../../hooks/api/getters/useFeature/useFeature';
 import useFeatureMetrics from '../../../../../../hooks/api/getters/useFeatureMetrics/useFeatureMetrics';
 import { IFeatureEnvironment } from '../../../../../../interfaces/featureToggle';
 import { IFeatureViewParams } from '../../../../../../interfaces/params';
 import { getFeatureMetrics } from '../../../../../../utils/get-feature-metrics';
+import {
+    getFeatureStrategyIcon,
+    getHumanReadableStrategyName,
+} from '../../../../../../utils/strategy-names';
 import ConditionallyRender from '../../../../../common/ConditionallyRender';
 import DisabledIndicator from '../../../../../common/DisabledIndicator/DisabledIndicator';
 import EnvironmentIcon from '../../../../../common/EnvironmentIcon/EnvironmentIcon';
+import PermissionButton from '../../../../../common/PermissionButton/PermissionButton';
 import StringTruncator from '../../../../../common/StringTruncator/StringTruncator';
+import { UPDATE_FEATURE } from '../../../../../providers/AccessProvider/permissions';
 
 import { useStyles } from './FeatureOverviewEnvironment.styles';
 import FeatureOverviewEnvironmentBody from './FeatureOverviewEnvironmentBody/FeatureOverviewEnvironmentBody';
 import FeatureOverviewEnvironmentFooter from './FeatureOverviewEnvironmentFooter/FeatureOverviewEnvironmentFooter';
 import FeatureOverviewEnvironmentMetrics from './FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics';
 
+interface IStrategyIconObject {
+    count: number;
+    Icon: React.ReactElement;
+    name: string;
+}
 interface IFeatureOverviewEnvironmentProps {
     env: IFeatureEnvironment;
 }
@@ -31,6 +45,7 @@ const FeatureOverviewEnvironment = ({
     const { projectId, featureId } = useParams<IFeatureViewParams>();
     const { metrics } = useFeatureMetrics(projectId, featureId);
     const { feature } = useFeature(projectId, featureId);
+    const history = useHistory();
 
     const featureMetrics = getFeatureMetrics(feature?.environments, metrics);
     const environmentMetric = featureMetrics.find(
@@ -48,6 +63,29 @@ const FeatureOverviewEnvironment = ({
         return `This environment is disabled, which means that none of your strategies are executing`;
     };
 
+    const strategiesLink = `/projects/${projectId}/features2/${featureId}/strategies?environment=${featureEnvironment?.name}&addStrategy=true`;
+
+    const getStrategyIcons = () => {
+        const strategyObjects = featureEnvironment?.strategies.reduce(
+            (acc, current) => {
+                if (acc[current.name]) {
+                    acc[current.name].count = acc[current.name].count + 1;
+                } else {
+                    acc[current.name] = {
+                        count: 1,
+                        Icon: getFeatureStrategyIcon(current.name),
+                    };
+                }
+                return acc;
+            },
+            {} as { [key: string]: IStrategyIconObject }
+        );
+
+        return Object.keys(strategyObjects).map(strategyName => {
+            return { ...strategyObjects[strategyName], name: strategyName };
+        });
+    };
+
     return (
         <div className={styles.featureOverviewEnvironment}>
             <Accordion style={{ boxShadow: 'none' }}>
@@ -55,17 +93,76 @@ const FeatureOverviewEnvironment = ({
                     className={styles.accordionHeader}
                     expandIcon={<ExpandMore />}
                 >
-                    <div className={styles.headerTitle} data-loading>
-                        <EnvironmentIcon
-                            enabled={env.enabled}
-                            className={styles.headerIcon}
-                        />
-                        Feature toggle execution for&nbsp;
-                        <StringTruncator
-                            text={env.name}
-                            className={styles.truncator}
-                            maxWidth="100"
-                        />
+                    <div className={styles.header} data-loading>
+                        <div className={styles.headerTitle}>
+                            <EnvironmentIcon
+                                enabled={env.enabled}
+                                className={styles.headerIcon}
+                            />
+                            Feature toggle execution for&nbsp;
+                            <StringTruncator
+                                text={env.name}
+                                className={styles.truncator}
+                                maxWidth="100"
+                            />
+                        </div>
+                        <div className={styles.container}>
+                            <PermissionButton
+                                permission={UPDATE_FEATURE}
+                                onClick={() => history.push(strategiesLink)}
+                                className={styles.addStrategyButton}
+                            >
+                                Add strategy
+                            </PermissionButton>
+                            <span className={styles.separtor}>|</span>
+                            <ConditionallyRender
+                                condition={
+                                    featureEnvironment?.strategies.length !== 0
+                                }
+                                show={
+                                    <div
+                                        className={
+                                            styles.stratigiesIconsContainer
+                                        }
+                                    >
+                                        {getStrategyIcons()?.map(
+                                            ({ name, Icon }) => (
+                                                <Tooltip
+                                                    title={getHumanReadableStrategyName(
+                                                        name
+                                                    )}
+                                                    arrow
+                                                >
+                                                    <div
+                                                        className={
+                                                            styles.strategyIconContainer
+                                                        }
+                                                    >
+                                                        <Icon
+                                                            className={
+                                                                styles.strategyIcon
+                                                            }
+                                                        />
+                                                    </div>
+                                                </Tooltip>
+                                            )
+                                        )}
+                                    </div>
+                                }
+                                elseShow={
+                                    <div
+                                        className={
+                                            styles.noStratigiesInfoContainer
+                                        }
+                                    >
+                                        <p className={styles.strategiesText}>
+                                            No strategies defined on this toggle
+                                        </p>
+                                    </div>
+                                }
+                            />
+                        </div>
+
                         <ConditionallyRender
                             condition={!env.enabled}
                             show={
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 c44423a721..2b750c0bbd 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
@@ -1,4 +1,4 @@
-import { Link, useParams, useHistory } from 'react-router-dom';
+import { useParams, useHistory } from 'react-router-dom';
 import { IFeatureViewParams } from '../../../../../../../interfaces/params';
 import ConditionallyRender from '../../../../../../common/ConditionallyRender';
 import NoItemsStrategies from '../../../../../../common/NoItems/NoItemsStrategies/NoItemsStrategies';
@@ -6,6 +6,9 @@ import FeatureOverviewEnvironmentStrategies from '../FeatureOverviewEnvironmentS
 
 import { useStyles } from '../FeatureOverviewEnvironment.styles';
 import { IFeatureEnvironment } from '../../../../../../../interfaces/featureToggle';
+import { UPDATE_FEATURE } from '../../../../../../providers/AccessProvider/permissions';
+import ResponsiveButton from '../../../../../../common/ResponsiveButton/ResponsiveButton';
+import { Add } from '@material-ui/icons';
 
 interface IFeatureOverviewEnvironmentBodyProps {
     getOverviewText: () => string;
@@ -39,7 +42,14 @@ const FeatureOverviewEnvironmentBody = ({
                     show={
                         <>
                             <div className={styles.linkContainer}>
-                                <Link to={strategiesLink}>Edit strategies</Link>
+                                <ResponsiveButton
+                                    Icon={Add}
+                                    onClick={() => history.push(strategiesLink)}
+                                    maxWidth="700px"
+                                    permission={UPDATE_FEATURE}
+                                >
+                                    Add strategy
+                                </ResponsiveButton>
                             </div>
                             <FeatureOverviewEnvironmentStrategies
                                 strategies={featureEnvironment?.strategies}

From 3639b7f4031f1b5f59df5fd1faa5b0ae4c4a0ee8 Mon Sep 17 00:00:00 2001
From: Youssef <khedher.youssef@hotmail.fr>
Date: Tue, 4 Jan 2022 13:30:25 +0100
Subject: [PATCH 03/23] feat: create password field component

---
 .../admin/users/change-password-component.jsx | 69 +----------------
 .../common/PasswordField/PasswordField.tsx    | 44 +++++++++++
 .../component/user/HostedAuth/HostedAuth.jsx  | 51 +------------
 .../user/PasswordAuth/PasswordAuth.jsx        | 47 +-----------
 .../UserProfile/EditProfile/EditProfile.tsx   | 68 +++--------------
 .../ResetPasswordForm/ResetPasswordForm.tsx   | 76 +++----------------
 6 files changed, 75 insertions(+), 280 deletions(-)
 create mode 100644 frontend/src/component/common/PasswordField/PasswordField.tsx

diff --git a/frontend/src/component/admin/users/change-password-component.jsx b/frontend/src/component/admin/users/change-password-component.jsx
index 6027c7aa16..baaf88d426 100644
--- a/frontend/src/component/admin/users/change-password-component.jsx
+++ b/frontend/src/component/admin/users/change-password-component.jsx
@@ -1,14 +1,7 @@
 import { useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import {
-    TextField,
-    Typography,
-    Avatar,
-    InputAdornment,
-    IconButton,
-} from '@material-ui/core';
-import { Visibility, VisibilityOff } from '@material-ui/icons';
+import { Typography, Avatar } from '@material-ui/core';
 import { trim } from '../../common/util';
 import { modalStyles } from './util';
 import Dialogue from '../../common/Dialogue/Dialogue';
@@ -17,6 +10,7 @@ import { useCommonStyles } from '../../../common.styles';
 import PasswordMatcher from '../../user/common/ResetPasswordForm/PasswordMatcher/PasswordMatcher';
 import ConditionallyRender from '../../common/ConditionallyRender';
 import { Alert } from '@material-ui/lab';
+import PasswordField from '../../common/PasswordField/PasswordField';
 
 function ChangePassword({
     showDialog,
@@ -27,17 +21,8 @@ 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({
@@ -125,66 +110,20 @@ function ChangePassword({
                 />
 
                 <p style={{ color: 'red' }}>{error.general}</p>
-                <TextField
+                <PasswordField
                     label="New password"
                     name="password"
-                    type={showPassword ? 'text' : 'password'}
                     value={data.password}
                     helperText={error.password}
                     onChange={updateField}
-                    variant="outlined"
-                    size="small"
-                    InputProps={{
-                        style:{
-                            paddingRight: 0
-                        },
-                        endAdornment: (
-                            <InputAdornment position="end">
-                                <IconButton
-                                    aria-label="toggle password visibility"
-                                    onClick={handleClickShowPassword}
-                                    onMouseDown={handleMouseDownPassword}
-                                >
-                                    {showPassword ? (
-                                        <Visibility />
-                                    ) : (
-                                        <VisibilityOff />
-                                    )}
-                                </IconButton>
-                            </InputAdornment>
-                        ),
-                    }}
                 />
-                <TextField
+                <PasswordField
                     label="Confirm password"
                     name="confirm"
-                    type={showPassword ? 'text' : 'password'}
                     value={data.confirm}
                     error={error.confirm !== undefined}
                     helperText={error.confirm}
                     onChange={updateField}
-                    variant="outlined"
-                    size="small"
-                    InputProps={{
-                        style:{
-                            paddingRight: 0
-                        },
-                        endAdornment: (
-                            <InputAdornment position="end">
-                                <IconButton
-                                    aria-label="toggle password visibility"
-                                    onClick={handleClickShowPassword}
-                                    onMouseDown={handleMouseDownPassword}
-                                >
-                                    {showPassword ? (
-                                        <Visibility />
-                                    ) : (
-                                        <VisibilityOff />
-                                    )}
-                                </IconButton>
-                            </InputAdornment>
-                        ),
-                    }}
                 />
                 <PasswordMatcher
                     started={data.password && data.confirm}
diff --git a/frontend/src/component/common/PasswordField/PasswordField.tsx b/frontend/src/component/common/PasswordField/PasswordField.tsx
new file mode 100644
index 0000000000..7b95a09625
--- /dev/null
+++ b/frontend/src/component/common/PasswordField/PasswordField.tsx
@@ -0,0 +1,44 @@
+import { IconButton, InputAdornment, TextField } from '@material-ui/core';
+import { Visibility, VisibilityOff } from '@material-ui/icons';
+import { useState } from 'react';
+
+const PasswordField = ({ ...rest }) => {
+    const [showPassword, setShowPassword] = useState(false);
+
+    const handleClickShowPassword = () => {
+        setShowPassword(!showPassword);
+    };
+
+    const handleMouseDownPassword = (
+        e: React.MouseEvent<HTMLButtonElement>
+    ) => {
+        e.preventDefault();
+    };
+
+    return (
+        <TextField
+            variant="outlined"
+            size="small"
+            type={showPassword ? 'text' : 'password'}
+            InputProps={{
+                style: {
+                    paddingRight: '0px !important',
+                },
+                endAdornment: (
+                    <InputAdornment position="end">
+                        <IconButton
+                            aria-label="toggle password visibility"
+                            onClick={handleClickShowPassword}
+                            onMouseDown={handleMouseDownPassword}
+                        >
+                            {showPassword ? <Visibility /> : <VisibilityOff />}
+                        </IconButton>
+                    </InputAdornment>
+                ),
+            }}
+            {...rest}
+        />
+    );
+};
+
+export default PasswordField;
diff --git a/frontend/src/component/user/HostedAuth/HostedAuth.jsx b/frontend/src/component/user/HostedAuth/HostedAuth.jsx
index 9b0d6cdcf5..b2e25ea70b 100644
--- a/frontend/src/component/user/HostedAuth/HostedAuth.jsx
+++ b/frontend/src/component/user/HostedAuth/HostedAuth.jsx
@@ -1,15 +1,7 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import {
-    Button,
-    Grid,
-    TextField,
-    Typography,
-    InputAdornment,
-    IconButton,
-} from '@material-ui/core';
-import { Visibility, VisibilityOff } from '@material-ui/icons';
+import { Button, Grid, TextField, Typography } from '@material-ui/core';
 import { useHistory } from 'react-router';
 import { useCommonStyles } from '../../../common.styles';
 import { useStyles } from './HostedAuth.styles';
@@ -18,6 +10,7 @@ import AuthOptions from '../common/AuthOptions/AuthOptions';
 import DividerText from '../../common/DividerText/DividerText';
 import ConditionallyRender from '../../common/ConditionallyRender';
 import useUser from '../../../hooks/api/getters/useUser/useUser';
+import PasswordField from '../../common/PasswordField/PasswordField';
 
 const HostedAuth = ({ authDetails, passwordLogin }) => {
     const commonStyles = useCommonStyles();
@@ -27,20 +20,11 @@ const HostedAuth = ({ authDetails, passwordLogin }) => {
     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();
 
@@ -126,40 +110,13 @@ const HostedAuth = ({ authDetails, passwordLogin }) => {
                                 variant="outlined"
                                 size="small"
                             />
-                            <TextField
+                            <PasswordField
                                 label="Password"
                                 onChange={evt => setPassword(evt.target.value)}
                                 name="password"
-                                type={showPassword ? 'text' : 'password'}
                                 value={password}
                                 error={!!passwordError}
                                 helperText={passwordError}
-                                variant="outlined"
-                                size="small"
-                                InputProps={{
-                                    style:{
-                                        paddingRight: 0
-                                    },
-                                    endAdornment: (
-                                        <InputAdornment position="end">
-                                            <IconButton
-                                                aria-label="toggle password visibility"
-                                                onClick={
-                                                    handleClickShowPassword
-                                                }
-                                                onMouseDown={
-                                                    handleMouseDownPassword
-                                                }
-                                            >
-                                                {showPassword ? (
-                                                    <Visibility />
-                                                ) : (
-                                                    <VisibilityOff />
-                                                )}
-                                            </IconButton>
-                                        </InputAdornment>
-                                    ),
-                                }}
                             />
                             <Grid container>
                                 <Button
diff --git a/frontend/src/component/user/PasswordAuth/PasswordAuth.jsx b/frontend/src/component/user/PasswordAuth/PasswordAuth.jsx
index b6c29c41c6..98ed83b58c 100644
--- a/frontend/src/component/user/PasswordAuth/PasswordAuth.jsx
+++ b/frontend/src/component/user/PasswordAuth/PasswordAuth.jsx
@@ -1,13 +1,7 @@
 import { useState } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import {
-    Button,
-    TextField,
-    InputAdornment,
-    IconButton,
-} from '@material-ui/core';
-import { Visibility, VisibilityOff } from '@material-ui/icons';
+import { Button, TextField } from '@material-ui/core';
 import ConditionallyRender from '../../common/ConditionallyRender';
 import { useHistory } from 'react-router';
 import { useCommonStyles } from '../../../common.styles';
@@ -22,6 +16,7 @@ import {
     LOGIN_EMAIL_ID,
 } from '../../../testIds';
 import useUser from '../../../hooks/api/getters/useUser/useUser';
+import PasswordField from '../../common/PasswordField/PasswordField';
 
 const PasswordAuth = ({ authDetails, passwordLogin }) => {
     const commonStyles = useCommonStyles();
@@ -31,20 +26,11 @@ const PasswordAuth = ({ authDetails, passwordLogin }) => {
     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();
 
@@ -126,44 +112,17 @@ const PasswordAuth = ({ authDetails, passwordLogin }) => {
                                 value={username}
                                 error={!!usernameError}
                                 helperText={usernameError}
-                                variant="outlined"
                                 autoComplete="true"
-                                size="small"
                                 data-test={LOGIN_EMAIL_ID}
                             />
-                            <TextField
+                            <PasswordField
                                 label="Password"
                                 onChange={evt => setPassword(evt.target.value)}
                                 name="password"
-                                type={showPassword ? 'text' : 'password'}                                
                                 value={password}
-                                InputProps={{
-                                    style:{
-                                        paddingRight: 0
-                                    },
-                                    endAdornment: (
-                                        <InputAdornment position="end" className={commonStyles.adornedEnd}>
-                                        <IconButton
-                                            aria-label="toggle password visibility"
-                                            onClick={handleClickShowPassword}
-                                            onMouseDown={
-                                                handleMouseDownPassword
-                                            }
-                                        >
-                                            {showPassword ? (
-                                                <Visibility />
-                                            ) : (
-                                                <VisibilityOff />
-                                            )}
-                                        </IconButton>
-                                    </InputAdornment>
-                                    )
-                                  }}
                                 error={!!passwordError}
                                 helperText={passwordError}
-                                variant="outlined"
                                 autoComplete="true"
-                                size="small"
                                 data-test={LOGIN_PASSWORD_ID}
                             />
                             <Button
diff --git a/frontend/src/component/user/UserProfile/EditProfile/EditProfile.tsx b/frontend/src/component/user/UserProfile/EditProfile/EditProfile.tsx
index d78a467904..f561344ac6 100644
--- a/frontend/src/component/user/UserProfile/EditProfile/EditProfile.tsx
+++ b/frontend/src/component/user/UserProfile/EditProfile/EditProfile.tsx
@@ -1,6 +1,5 @@
 import { SyntheticEvent, useState } from 'react';
-import { Button, TextField, Typography, IconButton, InputAdornment } from '@material-ui/core';
-import { Visibility, VisibilityOff } from '@material-ui/icons';
+import { Button, Typography } from '@material-ui/core';
 import classnames from 'classnames';
 import { useStyles } from './EditProfile.styles';
 import { useCommonStyles } from '../../../../common.styles';
@@ -17,6 +16,7 @@ import {
     UNAUTHORIZED,
 } from '../../../../constants/statusCodes';
 import { formatApiPath } from '../../../../utils/format-path';
+import PasswordField from '../../../common/PasswordField/PasswordField';
 
 interface IEditProfileProps {
     setEditingProfile: React.Dispatch<React.SetStateAction<boolean>>;
@@ -34,17 +34,8 @@ const EditProfile = ({
     const [error, setError] = useState('');
     const [password, setPassword] = useState('');
     const [confirmPassword, setConfirmPassword] = useState('');
-    const [showPassword, setShowPassword] = useState(false);
     const ref = useLoading(loading);
 
-    const handleClickShowPassword = () => {
-        setShowPassword(!showPassword);
-    };
-
-    const handleMouseDownPassword = (e: React.MouseEvent<HTMLButtonElement>) => {
-        e.preventDefault();
-    };
-
     const submit = async (e: SyntheticEvent) => {
         e.preventDefault();
 
@@ -122,64 +113,25 @@ const EditProfile = ({
                     callback={setValidPassword}
                     data-loading
                 />
-                <TextField
+                <PasswordField
                     data-loading
-                    variant="outlined"
-                    size="small"
                     label="Password"
-                    type={showPassword ? 'text' : 'password'}
-                    InputProps={{
-                        style:{
-                            paddingRight: 0
-                        },
-                        endAdornment: (
-                            <InputAdornment position="end">
-                                <IconButton
-                                    aria-label="toggle password visibility"
-                                    onClick={handleClickShowPassword}
-                                    onMouseDown={handleMouseDownPassword}
-                                >
-                                    {showPassword ? (
-                                        <Visibility />
-                                    ) : (
-                                        <VisibilityOff />
-                                    )}
-                                </IconButton>
-                            </InputAdornment>
-                        ),
-                    }}
                     name="password"
                     value={password}
                     autoComplete="on"
-                    onChange={e => setPassword(e.target.value)}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                        setPassword(e.target.value)
+                    }
                 />
-                <TextField
+                <PasswordField
                     data-loading
-                    variant="outlined"
-                    size="small"
                     label="Confirm password"
-                    type={showPassword ? 'text' : 'password'}
-                    InputProps={{
-                        endAdornment: (
-                            <InputAdornment position="end">
-                                <IconButton
-                                    aria-label="toggle password visibility"
-                                    onClick={handleClickShowPassword}
-                                    onMouseDown={handleMouseDownPassword}
-                                >
-                                    {showPassword ? (
-                                        <Visibility />
-                                    ) : (
-                                        <VisibilityOff />
-                                    )}
-                                </IconButton>
-                            </InputAdornment>
-                        ),
-                    }}
                     name="confirmPassword"
                     value={confirmPassword}
                     autoComplete="on"
-                    onChange={e => setConfirmPassword(e.target.value)}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                        setConfirmPassword(e.target.value)
+                    }
                 />
                 <PasswordMatcher
                     data-loading
diff --git a/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.tsx b/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.tsx
index 8005fc51fd..c64cb9df30 100644
--- a/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.tsx
+++ b/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.tsx
@@ -1,10 +1,4 @@
-import {
-    Button,
-    TextField,
-    IconButton,
-    InputAdornment,
-} from '@material-ui/core';
-import { Visibility, VisibilityOff } from '@material-ui/icons';
+import { Button } from '@material-ui/core';
 import classnames from 'classnames';
 import {
     SyntheticEvent,
@@ -23,6 +17,7 @@ import PasswordMatcher from './PasswordMatcher/PasswordMatcher';
 import { useStyles } from './ResetPasswordForm.styles';
 import { useCallback } from 'react';
 import { formatApiPath } from '../../../../utils/format-path';
+import PasswordField from '../../../common/PasswordField/PasswordField';
 
 interface IResetPasswordProps {
     token: string;
@@ -38,7 +33,6 @@ const ResetPasswordForm = ({ token, setLoading }: IResetPasswordProps) => {
     const [confirmPassword, setConfirmPassword] = useState('');
     const [matchingPasswords, setMatchingPasswords] = useState(false);
     const [validOwaspPassword, setValidOwaspPassword] = useState(false);
-    const [showPassword, setShowPassword] = useState(false);
     const history = useHistory();
 
     const submittable = matchingPasswords && validOwaspPassword;
@@ -47,14 +41,6 @@ const ResetPasswordForm = ({ token, setLoading }: IResetPasswordProps) => {
         setValidOwaspPassword,
     ]);
 
-    const handleClickShowPassword = () => {
-        setShowPassword(!showPassword);
-    };
-
-    const handleMouseDownPassword = (e: React.MouseEvent<HTMLButtonElement>) => {
-        e.preventDefault();
-    };
-
     useEffect(() => {
         if (!password) {
             setValidOwaspPassword(false);
@@ -122,64 +108,22 @@ const ResetPasswordForm = ({ token, setLoading }: IResetPasswordProps) => {
                     styles.container
                 )}
             >
-                <TextField
-                    variant="outlined"
-                    size="small"
-                    type={showPassword ? 'text' : 'password'}
-                    InputProps={{
-                        style:{
-                            paddingRight: 0
-                        },
-                        endAdornment: (
-                            <InputAdornment position="end">
-                                <IconButton
-                                    aria-label="toggle password visibility"
-                                    onClick={handleClickShowPassword}
-                                    onMouseDown={handleMouseDownPassword}
-                                >
-                                    {showPassword ? (
-                                        <Visibility />
-                                    ) : (
-                                        <VisibilityOff />
-                                    )}
-                                </IconButton>
-                            </InputAdornment>
-                        ),
-                    }}
+                <PasswordField
                     placeholder="Password"
                     value={password || ''}
-                    onChange={e => setPassword(e.target.value)}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                        setPassword(e.target.value)
+                    }
                     onFocus={() => setShowPasswordChecker(true)}
                     autoComplete="password"
                     data-loading
                 />
-                <TextField
-                    variant="outlined"
-                    size="small"
-                    type={showPassword ? 'text' : 'password'}
-                    InputProps={{
-                        style:{
-                            paddingRight: 0
-                        },
-                        endAdornment: (
-                            <InputAdornment position="end">
-                                <IconButton
-                                    aria-label="toggle password visibility"
-                                    onClick={handleClickShowPassword}
-                                    onMouseDown={handleMouseDownPassword}
-                                >
-                                    {showPassword ? (
-                                        <Visibility />
-                                    ) : (
-                                        <VisibilityOff />
-                                    )}
-                                </IconButton>
-                            </InputAdornment>
-                        ),
-                    }}
+                <PasswordField
                     value={confirmPassword || ''}
                     placeholder="Confirm password"
-                    onChange={e => setConfirmPassword(e.target.value)}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                        setConfirmPassword(e.target.value)
+                    }
                     autoComplete="confirm-password"
                     data-loading
                 />

From 5120663e791dc45443cf32fc00b9ed072bf0f3ef Mon Sep 17 00:00:00 2001
From: Renovate Bot <bot@renovateapp.com>
Date: Tue, 4 Jan 2022 11:00:36 +0000
Subject: [PATCH 04/23] chore(deps): update dependency sass to v1.45.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 1a050f6643..d93060f47a 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.45.1",
+    "sass": "1.45.2",
     "swr": "1.0.1",
     "typescript": "4.5.4",
     "web-vitals": "2.1.2"
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 3e6873f634..166decdbc3 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -11265,10 +11265,10 @@ sass-loader@^10.0.5:
     schema-utils "^3.0.0"
     semver "^7.3.2"
 
-sass@1.45.1:
-  version "1.45.1"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.45.1.tgz#fa03951f924d1ba5762949567eaf660e608a1ab0"
-  integrity sha512-pwPRiq29UR0o4X3fiQyCtrESldXvUQAAE0QmcJTpsI4kuHHcLzZ54M1oNBVIXybQv8QF2zfkpFcTxp8ta97dUA==
+sass@1.45.2:
+  version "1.45.2"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.45.2.tgz#130b428c1692201cfa181139835d6fc378a33323"
+  integrity sha512-cKfs+F9AMPAFlbbTXNsbGvg3y58nV0mXA3E94jqaySKcC8Kq3/8983zVKQ0TLMUrHw7hF9Tnd3Bz9z5Xgtrl9g==
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
     immutable "^4.0.0"

From 4c79d57c4156361ec5feb06da0d0af9ade91a767 Mon Sep 17 00:00:00 2001
From: Renovate Bot <bot@renovateapp.com>
Date: Tue, 4 Jan 2022 12:57:07 +0000
Subject: [PATCH 05/23] chore(deps): update dependency @types/react to v17.0.38

---
 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 d93060f47a..75948a21d5 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -49,7 +49,7 @@
     "@types/enzyme-adapter-react-16": "1.0.6",
     "@types/jest": "27.0.3",
     "@types/node": "14.18.2",
-    "@types/react": "17.0.37",
+    "@types/react": "17.0.38",
     "@types/react-dom": "17.0.11",
     "@types/react-router-dom": "5.3.2",
     "@types/react-timeago": "4.1.3",
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 166decdbc3..d844219147 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -2204,10 +2204,10 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
-"@types/react@17.0.37":
-  version "17.0.37"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.37.tgz#6884d0aa402605935c397ae689deed115caad959"
-  integrity sha512-2FS1oTqBGcH/s0E+CjrCCR9+JMpsu9b69RTFO+40ua43ZqP5MmQ4iUde/dMjWR909KxZwmOQIFq6AV6NjEG5xg==
+"@types/react@17.0.38":
+  version "17.0.38"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.38.tgz#f24249fefd89357d5fa71f739a686b8d7c7202bd"
+  integrity sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"

From 708b2743e7e9c59dbcfa329a0799c3f2651e64f5 Mon Sep 17 00:00:00 2001
From: Renovate Bot <bot@renovateapp.com>
Date: Tue, 4 Jan 2022 14:44:40 +0000
Subject: [PATCH 06/23] chore(deps): update react-dnd monorepo

---
 frontend/package.json |  4 ++--
 frontend/yarn.lock    | 16 ++++++++--------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 75948a21d5..6aa8630c48 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -75,8 +75,8 @@
     "node-fetch": "2.6.6",
     "prettier": "2.5.1",
     "react": "17.0.2",
-    "react-dnd": "14.0.4",
-    "react-dnd-html5-backend": "14.0.2",
+    "react-dnd": "14.0.5",
+    "react-dnd-html5-backend": "14.1.0",
     "react-dom": "17.0.2",
     "react-outside-click-handler": "1.3.0",
     "react-redux": "7.2.6",
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index d844219147..4d73eb835e 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -10479,17 +10479,17 @@ react-dev-utils@^11.0.3:
     strip-ansi "6.0.0"
     text-table "0.2.0"
 
-react-dnd-html5-backend@14.0.2:
-  version "14.0.2"
-  resolved "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-14.0.2.tgz"
-  integrity sha512-QgN6rYrOm4UUj6tIvN8ovImu6uP48xBXF2rzVsp6tvj6d5XQ7OjHI4SJ/ZgGobOneRAU3WCX4f8DGCYx0tuhlw==
+react-dnd-html5-backend@14.1.0:
+  version "14.1.0"
+  resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-14.1.0.tgz#b35a3a0c16dd3a2bfb5eb7ec62cf0c2cace8b62f"
+  integrity sha512-6ONeqEC3XKVf4eVmMTe0oPds+c5B9Foyj8p/ZKLb7kL2qh9COYxiBHv3szd6gztqi/efkmriywLUVlPotqoJyw==
   dependencies:
     dnd-core "14.0.1"
 
-react-dnd@14.0.4:
-  version "14.0.4"
-  resolved "https://registry.npmjs.org/react-dnd/-/react-dnd-14.0.4.tgz"
-  integrity sha512-AFJJXzUIWp5WAhgvI85ESkDCawM0lhoVvfo/lrseLXwFdH3kEO3v8I2C81QPqBW2UEyJBIPStOhPMGYGFtq/bg==
+react-dnd@14.0.5:
+  version "14.0.5"
+  resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-14.0.5.tgz#ecf264e220ae62e35634d9b941502f3fca0185ed"
+  integrity sha512-9i1jSgbyVw0ELlEVt/NkCUkxy1hmhJOkePoCH713u75vzHGyXhPDm28oLfc2NMSBjZRM1Y+wRjHXJT3sPrTy+A==
   dependencies:
     "@react-dnd/invariant" "^2.0.0"
     "@react-dnd/shallowequal" "^2.0.0"

From f3b1de8ad427c3d428f7a15d357146ff21336a09 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ivar=20Conradi=20=C3=98sthus?= <ivarconr@gmail.com>
Date: Wed, 5 Jan 2022 11:34:47 +0100
Subject: [PATCH 07/23] fix: add gha to upload to cdn on release

---
 frontend/.github/workflows/release_to_cdn.yml | 43 +++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 frontend/.github/workflows/release_to_cdn.yml

diff --git a/frontend/.github/workflows/release_to_cdn.yml b/frontend/.github/workflows/release_to_cdn.yml
new file mode 100644
index 0000000000..9bca88bc9f
--- /dev/null
+++ b/frontend/.github/workflows/release_to_cdn.yml
@@ -0,0 +1,43 @@
+name: 'Release static assets to CDN'
+on:
+  push:
+    tags:
+      - 'v*'
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x]
+
+    steps:
+    - uses: actions/checkout@v1
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - name: yarn install & build
+      run: |
+        yarn && yarn build
+      working-directory: ./${{ github.workflow }}
+      env:
+        CI: true
+    - name: Get the version
+      id: get_version
+      run: echo ::set-output name=VERSION::${GITHUB_REF/refs\/tags\//}
+    - uses: aws-actions/configure-aws-credentials@v1
+      with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: ${{ secrets.AWS_DEFAULT_REGION }}
+    - name: Copy shared files
+      run: |
+        aws s3 cp build/static s3://getunleash-static/unleash/${{ steps.get_version.outputs.VERSION }}/static --recursive
+    - name: Deploy to AWS
+      run:
+        ./deploy.sh ${{ github.workflow }}
+      working-directory: ./${{ github.workflow }}
+

From 7f0418a036a838d019aea9b84e2eeabab521abb4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ivar=20Conradi=20=C3=98sthus?= <ivarconr@gmail.com>
Date: Wed, 5 Jan 2022 11:40:39 +0100
Subject: [PATCH 08/23] fix: gha releast_to_cdn must use yarn

---
 frontend/.github/workflows/release_to_cdn.yml | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/frontend/.github/workflows/release_to_cdn.yml b/frontend/.github/workflows/release_to_cdn.yml
index 9bca88bc9f..2c656ec8f6 100644
--- a/frontend/.github/workflows/release_to_cdn.yml
+++ b/frontend/.github/workflows/release_to_cdn.yml
@@ -16,15 +16,11 @@ jobs:
     steps:
     - uses: actions/checkout@v1
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
+      uses: actions/setup-node@v2
       with:
         node-version: ${{ matrix.node-version }}
-    - name: yarn install & build
-      run: |
-        yarn && yarn build
-      working-directory: ./${{ github.workflow }}
-      env:
-        CI: true
+    - run: yarn
+    - run: yarn build
     - name: Get the version
       id: get_version
       run: echo ::set-output name=VERSION::${GITHUB_REF/refs\/tags\//}

From 33e72db8fd65e8c999156111609042841b386370 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ivar=20Conradi=20=C3=98sthus?= <ivarconr@gmail.com>
Date: Wed, 5 Jan 2022 11:46:04 +0100
Subject: [PATCH 09/23] fix: gha releast_to_cdn does not need to build twice

---
 frontend/.github/workflows/release_to_cdn.yml | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/frontend/.github/workflows/release_to_cdn.yml b/frontend/.github/workflows/release_to_cdn.yml
index 2c656ec8f6..986f078b5d 100644
--- a/frontend/.github/workflows/release_to_cdn.yml
+++ b/frontend/.github/workflows/release_to_cdn.yml
@@ -20,7 +20,6 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
     - run: yarn
-    - run: yarn build
     - name: Get the version
       id: get_version
       run: echo ::set-output name=VERSION::${GITHUB_REF/refs\/tags\//}
@@ -29,11 +28,8 @@ jobs:
           aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
           aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
           aws-region: ${{ secrets.AWS_DEFAULT_REGION }}
-    - name: Copy shared files
+    - name: Deploy static assets to S3
       run: |
         aws s3 cp build/static s3://getunleash-static/unleash/${{ steps.get_version.outputs.VERSION }}/static --recursive
-    - name: Deploy to AWS
-      run:
-        ./deploy.sh ${{ github.workflow }}
       working-directory: ./${{ github.workflow }}
 

From 80facfac238961a1543e4ac6d62ae99ec935698c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ivar=20Conradi=20=C3=98sthus?= <ivarconr@gmail.com>
Date: Wed, 5 Jan 2022 11:51:58 +0100
Subject: [PATCH 10/23] fix: gha releast_to_cdn set working directory for all

---
 frontend/.github/workflows/release_to_cdn.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/.github/workflows/release_to_cdn.yml b/frontend/.github/workflows/release_to_cdn.yml
index 986f078b5d..db81fb2833 100644
--- a/frontend/.github/workflows/release_to_cdn.yml
+++ b/frontend/.github/workflows/release_to_cdn.yml
@@ -20,6 +20,7 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
     - run: yarn
+      working-directory: ./${{ github.workflow }}
     - name: Get the version
       id: get_version
       run: echo ::set-output name=VERSION::${GITHUB_REF/refs\/tags\//}

From 7c17176a0ed462008267d8837a843cd59619c346 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ivar=20Conradi=20=C3=98sthus?= <ivarconr@gmail.com>
Date: Wed, 5 Jan 2022 11:56:13 +0100
Subject: [PATCH 11/23] fix: gha releast_to_cdn set working directory correctly

---
 frontend/.github/workflows/release_to_cdn.yml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/.github/workflows/release_to_cdn.yml b/frontend/.github/workflows/release_to_cdn.yml
index db81fb2833..2a6f3d743d 100644
--- a/frontend/.github/workflows/release_to_cdn.yml
+++ b/frontend/.github/workflows/release_to_cdn.yml
@@ -21,14 +21,14 @@ jobs:
         node-version: ${{ matrix.node-version }}
     - run: yarn
       working-directory: ./${{ github.workflow }}
-    - name: Get the version
-      id: get_version
-      run: echo ::set-output name=VERSION::${GITHUB_REF/refs\/tags\//}
     - uses: aws-actions/configure-aws-credentials@v1
       with:
           aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
           aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
           aws-region: ${{ secrets.AWS_DEFAULT_REGION }}
+    - name: Get the version
+      id: get_version
+      run: echo ::set-output name=VERSION::${GITHUB_REF/refs\/tags\//}
     - name: Deploy static assets to S3
       run: |
         aws s3 cp build/static s3://getunleash-static/unleash/${{ steps.get_version.outputs.VERSION }}/static --recursive

From 6657de01cd4190707b3d45f65b89be8cce0b8bde Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ivar=20Conradi=20=C3=98sthus?= <ivarconr@gmail.com>
Date: Wed, 5 Jan 2022 11:58:19 +0100
Subject: [PATCH 12/23] fix: gha releast_to_cdn rm working directory

---
 frontend/.github/workflows/release_to_cdn.yml | 2 --
 1 file changed, 2 deletions(-)

diff --git a/frontend/.github/workflows/release_to_cdn.yml b/frontend/.github/workflows/release_to_cdn.yml
index 2a6f3d743d..0c7a88e9aa 100644
--- a/frontend/.github/workflows/release_to_cdn.yml
+++ b/frontend/.github/workflows/release_to_cdn.yml
@@ -20,7 +20,6 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
     - run: yarn
-      working-directory: ./${{ github.workflow }}
     - uses: aws-actions/configure-aws-credentials@v1
       with:
           aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
@@ -32,5 +31,4 @@ jobs:
     - name: Deploy static assets to S3
       run: |
         aws s3 cp build/static s3://getunleash-static/unleash/${{ steps.get_version.outputs.VERSION }}/static --recursive
-      working-directory: ./${{ github.workflow }}
 

From facc55de21fb9616586734ef4d3a900be62a43ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ivar=20Conradi=20=C3=98sthus?= <ivarconr@gmail.com>
Date: Wed, 5 Jan 2022 12:12:14 +0100
Subject: [PATCH 13/23] fix: add support for CDN prefix in index.html

---
 frontend/public/index.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/public/index.html b/frontend/public/index.html
index 3006ccce7d..4225bda67b 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -2,9 +2,10 @@
 <html lang="en">
     <head>
         <meta charset="utf-8" />
-        <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+        <link rel="icon" href="/static/favicon.ico" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta name="baseUriPath" content="::baseUriPath::" />
+        <meta name="cdnPrefix" content="::cdnPrefix::" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="description" content="unleash" />
         <title>Unleash - Enterprise ready feature toggles</title>

From 51c4fac88e6442929ee56c6a72d035ecae0973db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ivar=20Conradi=20=C3=98sthus?= <ivarconr@gmail.com>
Date: Wed, 5 Jan 2022 12:55:30 +0100
Subject: [PATCH 14/23] 4.4.1-beta.0

---
 frontend/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/package.json b/frontend/package.json
index 6aa8630c48..f5de590a88 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,7 +1,7 @@
 {
   "name": "unleash-frontend",
   "description": "unleash your features",
-  "version": "4.4.0",
+  "version": "4.4.1-beta.0",
   "keywords": [
     "unleash",
     "feature toggle",

From 09cb972a012ba158b43272caa476134a5c4b8567 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ivar=20Conradi=20=C3=98sthus?= <ivarconr@gmail.com>
Date: Wed, 5 Jan 2022 13:37:39 +0100
Subject: [PATCH 15/23] fix: upload all assests under build

---
 frontend/.github/workflows/release_to_cdn.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/.github/workflows/release_to_cdn.yml b/frontend/.github/workflows/release_to_cdn.yml
index 0c7a88e9aa..018b0735df 100644
--- a/frontend/.github/workflows/release_to_cdn.yml
+++ b/frontend/.github/workflows/release_to_cdn.yml
@@ -30,5 +30,5 @@ jobs:
       run: echo ::set-output name=VERSION::${GITHUB_REF/refs\/tags\//}
     - name: Deploy static assets to S3
       run: |
-        aws s3 cp build/static s3://getunleash-static/unleash/${{ steps.get_version.outputs.VERSION }}/static --recursive
+        aws s3 cp build/ s3://getunleash-static/unleash/${{ steps.get_version.outputs.VERSION }} --recursive
 

From 2423e6bec1538af714d1c0d227b2d3ea00834c94 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ivar=20Conradi=20=C3=98sthus?= <ivarconr@gmail.com>
Date: Wed, 5 Jan 2022 13:54:29 +0100
Subject: [PATCH 16/23] fix: revert favicon path in index.html

---
 frontend/public/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/public/index.html b/frontend/public/index.html
index 4225bda67b..3206f3640c 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
     <head>
         <meta charset="utf-8" />
-        <link rel="icon" href="/static/favicon.ico" />
+        <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta name="baseUriPath" content="::baseUriPath::" />
         <meta name="cdnPrefix" content="::cdnPrefix::" />

From 7451308235c9d59ac46ad28d3b14f9a9adbe6d67 Mon Sep 17 00:00:00 2001
From: Renovate Bot <bot@renovateapp.com>
Date: Wed, 5 Jan 2022 13:24:19 +0000
Subject: [PATCH 17/23] chore(deps): update dependency @types/node to v14.18.5

---
 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 f5de590a88..074f03350b 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.2",
+    "@types/node": "14.18.5",
     "@types/react": "17.0.38",
     "@types/react-dom": "17.0.11",
     "@types/react-router-dom": "5.3.2",
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 4d73eb835e..a81f570b5b 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.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.18.5":
+  version "14.18.5"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.18.5.tgz#0dd636fe7b2c6055cbed0d4ca3b7fb540f130a96"
+  integrity sha512-LMy+vDDcQR48EZdEx5wRX1q/sEl6NdGuHXPnfeL8ixkwCOSZ2qnIyIZmcCbdX0MeRqHhAcHmX+haCbrS8Run+A==
 
 "@types/node@^14.14.31":
   version "14.17.19"

From dcfbedd107529b716c7651c007686c1e11c8c1bd Mon Sep 17 00:00:00 2001
From: Renovate Bot <bot@renovateapp.com>
Date: Wed, 5 Jan 2022 15:32:20 +0000
Subject: [PATCH 18/23] chore(deps): update dependency date-fns to v2.28.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 074f03350b..fe5d7f2572 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -60,7 +60,7 @@
     "craco": "0.0.3",
     "css-loader": "6.5.1",
     "cypress": "8.7.0",
-    "date-fns": "2.27.0",
+    "date-fns": "2.28.0",
     "debounce": "1.2.1",
     "deep-diff": "1.0.2",
     "enzyme": "3.11.0",
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index a81f570b5b..9aa6f49672 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -4655,10 +4655,10 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
-date-fns@2.27.0:
-  version "2.27.0"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.27.0.tgz#e1ff3c3ddbbab8a2eaadbb6106be2929a5a2d92b"
-  integrity sha512-sj+J0Mo2p2X1e306MHq282WS4/A8Pz/95GIFcsPNMPMZVI3EUrAdSv90al1k+p74WGLCruMXk23bfEDZa71X9Q==
+date-fns@2.28.0:
+  version "2.28.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.28.0.tgz#9570d656f5fc13143e50c975a3b6bbeb46cd08b2"
+  integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==
 
 dayjs@^1.10.4:
   version "1.10.7"

From 7fdc44cb6e68f32911ccbf8f4d57d3e384893cca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ivar=20Conradi=20=C3=98sthus?= <ivarconr@gmail.com>
Date: Wed, 5 Jan 2022 20:17:56 +0100
Subject: [PATCH 19/23] 4.4.1

---
 frontend/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/package.json b/frontend/package.json
index fe5d7f2572..8a757df4a4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,7 +1,7 @@
 {
   "name": "unleash-frontend",
   "description": "unleash your features",
-  "version": "4.4.1-beta.0",
+  "version": "4.4.1",
   "keywords": [
     "unleash",
     "feature toggle",

From 6f7ad537dfd3d569590887986228c58bc8e5ab08 Mon Sep 17 00:00:00 2001
From: Renovate Bot <bot@renovateapp.com>
Date: Wed, 5 Jan 2022 19:25:03 +0000
Subject: [PATCH 20/23] chore(deps): update dependency @types/jest to v27.4.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 8a757df4a4..8d1d70f5fc 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -47,7 +47,7 @@
     "@types/deep-diff": "1.0.1",
     "@types/enzyme": "3.10.10",
     "@types/enzyme-adapter-react-16": "1.0.6",
-    "@types/jest": "27.0.3",
+    "@types/jest": "27.4.0",
     "@types/node": "14.18.5",
     "@types/react": "17.0.38",
     "@types/react-dom": "17.0.11",
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 9aa6f49672..293b80e641 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -2084,10 +2084,10 @@
     jest-diff "^26.0.0"
     pretty-format "^26.0.0"
 
-"@types/jest@27.0.3":
-  version "27.0.3"
-  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-27.0.3.tgz#0cf9dfe9009e467f70a342f0f94ead19842a783a"
-  integrity sha512-cmmwv9t7gBYt7hNKH5Spu7Kuu/DotGa+Ff+JGRKZ4db5eh8PnKS4LuebJ3YLUoyOyIHraTGyULn23YtEAm0VSg==
+"@types/jest@27.4.0":
+  version "27.4.0"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-27.4.0.tgz#037ab8b872067cae842a320841693080f9cb84ed"
+  integrity sha512-gHl8XuC1RZ8H2j5sHv/JqsaxXkDDM9iDOgu0Wp8sjs4u/snb2PVehyWXJPr+ORA0RPpgw231mnutWI1+0hgjIQ==
   dependencies:
     jest-diff "^27.0.0"
     pretty-format "^27.0.0"

From b2698231a5a50930449d52b4a88cb65aa93edb58 Mon Sep 17 00:00:00 2001
From: Renovate Bot <bot@renovateapp.com>
Date: Thu, 6 Jan 2022 01:34:28 +0000
Subject: [PATCH 21/23] chore(deps): update dependency sass to v1.46.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 8d1d70f5fc..88b294e25b 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.45.2",
+    "sass": "1.46.0",
     "swr": "1.0.1",
     "typescript": "4.5.4",
     "web-vitals": "2.1.2"
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 293b80e641..e88d8b04b6 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -11265,10 +11265,10 @@ sass-loader@^10.0.5:
     schema-utils "^3.0.0"
     semver "^7.3.2"
 
-sass@1.45.2:
-  version "1.45.2"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.45.2.tgz#130b428c1692201cfa181139835d6fc378a33323"
-  integrity sha512-cKfs+F9AMPAFlbbTXNsbGvg3y58nV0mXA3E94jqaySKcC8Kq3/8983zVKQ0TLMUrHw7hF9Tnd3Bz9z5Xgtrl9g==
+sass@1.46.0:
+  version "1.46.0"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.46.0.tgz#923117049525236026a7ede69715580eb0fac751"
+  integrity sha512-Z4BYTgioAOlMmo4LU3Ky2txR8KR0GRPLXxO38kklaYxgo7qMTgy+mpNN4eKsrXDTFlwS5vdruvazG4cihxHRVQ==
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
     immutable "^4.0.0"

From 856e8d3f4bded15d23507330c4cc9e7fa61172fe Mon Sep 17 00:00:00 2001
From: Renovate Bot <bot@renovateapp.com>
Date: Thu, 6 Jan 2022 10:23:54 +0000
Subject: [PATCH 22/23] chore(deps): update dependency @types/enzyme to
 v3.10.11

---
 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 88b294e25b..c7ba64a9b5 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -45,7 +45,7 @@
     "@testing-library/user-event": "13.5.0",
     "@types/debounce": "1.2.1",
     "@types/deep-diff": "1.0.1",
-    "@types/enzyme": "3.10.10",
+    "@types/enzyme": "3.10.11",
     "@types/enzyme-adapter-react-16": "1.0.6",
     "@types/jest": "27.4.0",
     "@types/node": "14.18.5",
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index e88d8b04b6..88c70edbfd 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1991,10 +1991,10 @@
     "@types/cheerio" "*"
     "@types/react" "*"
 
-"@types/enzyme@3.10.10":
-  version "3.10.10"
-  resolved "https://registry.npmjs.org/@types/enzyme/-/enzyme-3.10.10.tgz"
-  integrity sha512-/D4wFhiEjUDfPu+j5FVK0g/jf7rqeEIpNfAI+kyxzLpw5CKO0drnW3W5NC38alIjsWgnyQ8pbuPF5+UD+vhVyg==
+"@types/enzyme@3.10.11":
+  version "3.10.11"
+  resolved "https://registry.yarnpkg.com/@types/enzyme/-/enzyme-3.10.11.tgz#8924bd92cc63ac1843e215225dfa8f71555fe814"
+  integrity sha512-LEtC7zXsQlbGXWGcnnmOI7rTyP+i1QzQv4Va91RKXDEukLDaNyxu0rXlfMiGEhJwfgTPCTb0R+Pnlj//oM9e/w==
   dependencies:
     "@types/cheerio" "*"
     "@types/react" "*"

From c7e441fad6090a02d7a669e3d74a3b76f7214e50 Mon Sep 17 00:00:00 2001
From: Youssef Khedher <khedher.youssef@hotmail.fr>
Date: Mon, 10 Jan 2022 11:43:31 +0100
Subject: [PATCH 23/23] fix: replace broken link in stickiness description
 (#587)

---
 frontend/src/component/context/form-context-component.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/component/context/form-context-component.jsx b/frontend/src/component/context/form-context-component.jsx
index e5a1d2df48..3616acf8d6 100644
--- a/frontend/src/component/context/form-context-component.jsx
+++ b/frontend/src/component/context/form-context-component.jsx
@@ -269,7 +269,7 @@ class AddContextComponent extends Component {
                             specific values of this context field. PS! Not all
                             client SDK's support this feature yet!{' '}
                             <a
-                                href="https://unleash.github.io/docs/activation_strategy#flexiblerollout"
+                                href="https://docs.getunleash.io/advanced/stickiness"
                                 target="_blank"
                                 rel="noreferrer"
                             >