mirror of
https://github.com/Unleash/unleash.git
synced 2025-02-23 00:22:19 +01:00
Merge branch 'master' into fix/breadcrumb-createToggle2
This commit is contained in:
Youssef Khedher
GitHub
commit
90af5a40d6
34
frontend/.github/workflows/release_to_cdn.yml
vendored
Normal file
34
frontend/.github/workflows/release_to_cdn.yml
vendored
Normal file
@ -0,0 +1,34 @@
|
||||
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@v2
|
||||
with:
|
||||
node-version: ${{ matrix.node-version }}
|
||||
- run: yarn
|
||||
- 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/ s3://getunleash-static/unleash/${{ steps.get_version.outputs.VERSION }} --recursive
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "unleash-frontend",
|
||||
"description": "unleash your features",
|
||||
"version": "4.4.0",
|
||||
"version": "4.4.1",
|
||||
"keywords": [
|
||||
"unleash",
|
||||
"feature toggle",
|
||||
@ -45,11 +45,11 @@
|
||||
"@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.0.3",
|
||||
"@types/node": "14.18.1",
|
||||
"@types/react": "17.0.37",
|
||||
"@types/jest": "27.4.0",
|
||||
"@types/node": "14.18.5",
|
||||
"@types/react": "17.0.38",
|
||||
"@types/react-dom": "17.0.11",
|
||||
"@types/react-router-dom": "5.3.2",
|
||||
"@types/react-timeago": "4.1.3",
|
||||
@ -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",
|
||||
@ -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",
|
||||
@ -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.46.0",
|
||||
"swr": "1.0.1",
|
||||
"typescript": "4.5.4",
|
||||
"web-vitals": "2.1.2"
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
<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::" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="unleash" />
|
||||
<title>Unleash - Enterprise ready feature toggles</title>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
import { TextField, Typography, Avatar } from '@material-ui/core';
|
||||
import { Typography, Avatar } from '@material-ui/core';
|
||||
import { trim } from '../../common/util';
|
||||
import { modalStyles } from './util';
|
||||
import Dialogue from '../../common/Dialogue/Dialogue';
|
||||
@ -10,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,
|
||||
@ -109,26 +110,20 @@ function ChangePassword({
|
||||
/>
|
||||
|
||||
<p style={{ color: 'red' }}>{error.general}</p>
|
||||
<TextField
|
||||
<PasswordField
|
||||
label="New password"
|
||||
name="password"
|
||||
type="password"
|
||||
value={data.password}
|
||||
helperText={error.password}
|
||||
onChange={updateField}
|
||||
variant="outlined"
|
||||
size="small"
|
||||
/>
|
||||
<TextField
|
||||
<PasswordField
|
||||
label="Confirm password"
|
||||
name="confirm"
|
||||
type="password"
|
||||
value={data.confirm}
|
||||
error={error.confirm !== undefined}
|
||||
helperText={error.confirm}
|
||||
onChange={updateField}
|
||||
variant="outlined"
|
||||
size="small"
|
||||
/>
|
||||
<PasswordMatcher
|
||||
started={data.password && data.confirm}
|
||||
|
||||
@ -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;
|
||||
@ -7,6 +7,7 @@ export const useStyles = makeStyles(theme => ({
|
||||
position: 'relative',
|
||||
width: '50px',
|
||||
height: '100%',
|
||||
padding: '15px 0px',
|
||||
},
|
||||
vertical: {
|
||||
borderRadius: '1px',
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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',
|
||||
@ -70,8 +77,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 +102,7 @@ export const useStyles = makeStyles(theme => ({
|
||||
requestText: {
|
||||
textAlign: 'center',
|
||||
marginTop: '1rem',
|
||||
fontSize: theme.fontSizes.smallBody,
|
||||
},
|
||||
linkContainer: {
|
||||
display: 'flex',
|
||||
@ -114,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',
|
||||
@ -124,7 +155,7 @@ export const useStyles = makeStyles(theme => ({
|
||||
},
|
||||
[theme.breakpoints.down(560)]: {
|
||||
disabledIndicatorPos: {
|
||||
top: '-8px',
|
||||
top: '13px',
|
||||
},
|
||||
headerTitle: {
|
||||
flexDirection: 'column',
|
||||
@ -135,6 +166,9 @@ export const useStyles = makeStyles(theme => ({
|
||||
truncator: {
|
||||
textAlign: 'center',
|
||||
},
|
||||
resultContainer: {
|
||||
flexWrap: 'wrap',
|
||||
},
|
||||
},
|
||||
[theme.breakpoints.down(400)]: {
|
||||
accordionHeader: {
|
||||
@ -145,4 +179,60 @@ 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%',
|
||||
justifyContent: 'space-around',
|
||||
},
|
||||
dataContainer: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: '0px 15px',
|
||||
},
|
||||
resultTitle: {
|
||||
color: theme.palette.primary.main,
|
||||
},
|
||||
}));
|
||||
|
||||
@ -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
|
||||
<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
|
||||
<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={
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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 = ({
|
||||
</div>
|
||||
|
||||
<div className={styles.accordionBodyFooter}>
|
||||
<ConditionallyRender
|
||||
condition={env.enabled}
|
||||
show={
|
||||
<FeatureEnvironmentMetrics metric={environmentMetric} />
|
||||
}
|
||||
elseShow={
|
||||
<div className={styles.disabledInfo}>
|
||||
<Warning className={styles.disabledIcon} />
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<div className={styles.resultContainer}>
|
||||
<div className={styles.dataContainer}>
|
||||
<h3 className={styles.resultTitle}>Exposure</h3>
|
||||
<div className={styles.percentageContainer}>
|
||||
{environmentMetric?.yes}
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className={styles.requestContainer}>
|
||||
Total requests {totalTraffic}
|
||||
<div className={styles.percentageContainer}>
|
||||
{calculatePercentage(
|
||||
totalTraffic,
|
||||
environmentMetric?.yes
|
||||
)}
|
||||
%
|
||||
<p className={styles.requestText}>
|
||||
Total exposure of the feature in the environment in
|
||||
the last hour
|
||||
</p>
|
||||
</div>
|
||||
<div className={styles.dataContainer}>
|
||||
<h3 className={styles.resultTitle}>% exposure</h3>
|
||||
<div className={styles.percentageContainer}>
|
||||
{calculatePercentage(
|
||||
totalTraffic,
|
||||
environmentMetric?.yes
|
||||
)}
|
||||
%
|
||||
</div>
|
||||
<p className={styles.requestText}>
|
||||
Total exposure of the feature in the environment in
|
||||
the last hour
|
||||
</p>
|
||||
</div>
|
||||
<div className={styles.dataContainer}>
|
||||
<h3 className={styles.resultTitle}>Total requests</h3>
|
||||
<div className={styles.percentageContainer}>
|
||||
{environmentMetric?.yes + environmentMetric?.no}
|
||||
</div>
|
||||
<p className={styles.requestText}>
|
||||
The total request of the feature in the environment
|
||||
in the last hour
|
||||
</p>
|
||||
</div>
|
||||
<p className={styles.requestText}>
|
||||
Received enabled for this feature in this environment in
|
||||
the last hour.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@ -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',
|
||||
},
|
||||
|
||||
@ -27,7 +27,8 @@ const FeatureOverviewEnvironmentMetrics = ({
|
||||
{percentage}%
|
||||
</p>
|
||||
<p className={styles.infoParagraph} data-loading>
|
||||
No one has received this feature in the last hour.
|
||||
The feature has been requested <b>0 times</b> and
|
||||
exposed<b> 0 times</b> in the last hour
|
||||
</p>
|
||||
</div>
|
||||
<FiberManualRecord
|
||||
@ -44,8 +45,10 @@ const FeatureOverviewEnvironmentMetrics = ({
|
||||
<div className={styles.info}>
|
||||
<p className={styles.percentage}>{percentage}%</p>
|
||||
<p className={styles.infoParagraph}>
|
||||
{environmentMetric.yes} users have received the feature in
|
||||
the last hour.
|
||||
The feature has been requested{' '}
|
||||
<b>{environmentMetric.yes + environmentMetric.no} times</b>{' '}
|
||||
and exposed <b>{environmentMetric.yes} times</b> in the last
|
||||
hour
|
||||
</p>
|
||||
</div>
|
||||
<PercentageCircle
|
||||
|
||||
@ -63,7 +63,7 @@ const FeatureStrategyExecution = ({
|
||||
return (
|
||||
<Fragment key={key}>
|
||||
<p className={styles.text}>
|
||||
{parameters[key]}% of your user base{' '}
|
||||
{parameters[key]}% of your base{' '}
|
||||
{constraints.length > 0
|
||||
? 'who match constraints'
|
||||
: ''}{' '}
|
||||
@ -146,8 +146,7 @@ const FeatureStrategyExecution = ({
|
||||
return (
|
||||
<Fragment key={param?.name}>
|
||||
<p className={styles.text}>
|
||||
{strategy?.parameters[param.name]}% of your user
|
||||
base{' '}
|
||||
{strategy?.parameters[param.name]}% of your base{' '}
|
||||
{constraints?.length > 0
|
||||
? 'who match constraints'
|
||||
: ''}{' '}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useState } from 'react';
|
||||
import classnames from 'classnames';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Button, Grid, TextField, Typography } from '@material-ui/core';
|
||||
@ -10,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();
|
||||
@ -109,16 +110,13 @@ const HostedAuth = ({ authDetails, passwordLogin }) => {
|
||||
variant="outlined"
|
||||
size="small"
|
||||
/>
|
||||
<TextField
|
||||
<PasswordField
|
||||
label="Password"
|
||||
onChange={evt => setPassword(evt.target.value)}
|
||||
name="password"
|
||||
type="password"
|
||||
value={password}
|
||||
error={!!passwordError}
|
||||
helperText={passwordError}
|
||||
variant="outlined"
|
||||
size="small"
|
||||
/>
|
||||
<Grid container>
|
||||
<Button
|
||||
|
||||
@ -16,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();
|
||||
@ -111,22 +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="password"
|
||||
value={password}
|
||||
error={!!passwordError}
|
||||
helperText={passwordError}
|
||||
variant="outlined"
|
||||
autoComplete="true"
|
||||
size="small"
|
||||
data-test={LOGIN_PASSWORD_ID}
|
||||
/>
|
||||
<Button
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { SyntheticEvent, useState } from 'react';
|
||||
import { Button, TextField, Typography } from '@material-ui/core';
|
||||
import { Button, Typography } from '@material-ui/core';
|
||||
import classnames from 'classnames';
|
||||
import { useStyles } from './EditProfile.styles';
|
||||
import { useCommonStyles } from '../../../../common.styles';
|
||||
@ -16,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>>;
|
||||
@ -54,7 +55,7 @@ const EditProfile = ({
|
||||
credentials: 'include',
|
||||
});
|
||||
handleResponse(res);
|
||||
} catch (e) {
|
||||
} catch (e: any) {
|
||||
setError(e);
|
||||
}
|
||||
}
|
||||
@ -112,27 +113,25 @@ const EditProfile = ({
|
||||
callback={setValidPassword}
|
||||
data-loading
|
||||
/>
|
||||
<TextField
|
||||
<PasswordField
|
||||
data-loading
|
||||
variant="outlined"
|
||||
size="small"
|
||||
label="Password"
|
||||
type="password"
|
||||
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="password"
|
||||
name="confirmPassword"
|
||||
value={confirmPassword}
|
||||
autoComplete="on"
|
||||
onChange={e => setConfirmPassword(e.target.value)}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
||||
setConfirmPassword(e.target.value)
|
||||
}
|
||||
/>
|
||||
<PasswordMatcher
|
||||
data-loading
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Button, TextField } from '@material-ui/core';
|
||||
import { Button } from '@material-ui/core';
|
||||
import classnames from 'classnames';
|
||||
import {
|
||||
SyntheticEvent,
|
||||
@ -17,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;
|
||||
@ -107,24 +108,22 @@ const ResetPasswordForm = ({ token, setLoading }: IResetPasswordProps) => {
|
||||
styles.container
|
||||
)}
|
||||
>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
size="small"
|
||||
type="password"
|
||||
<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="password"
|
||||
<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
|
||||
/>
|
||||
|
||||
@ -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" "*"
|
||||
@ -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"
|
||||
@ -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.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"
|
||||
@ -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" "*"
|
||||
@ -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"
|
||||
@ -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"
|
||||
@ -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.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"
|
||||
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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user