Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

Merge branch 'master' into fix/reload-tabs

Browse Source
This commit is contained in:
Youssef Khedher 2021-10-12 09:09:25 +01:00 committed by GitHub
commit ff6affdae5
16 changed files with 142 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/.gitignore vendored
View File

@ -51,3 +51,4 @@ build
cypress/videos/*
cypress/screenshots/*
.env.local

2
frontend/package.json
View File

@ -55,7 +55,7 @@
"classnames": "2.3.1",
"craco": "0.0.3",
"css-loader": "6.4.0",
"cypress": "8.5.0",
"cypress": "8.6.0",
"date-fns": "2.25.0",
"debounce": "1.2.1",
"enzyme": "3.11.0",

7
frontend/src/component/common/common.module.scss
View File

@ -40,6 +40,13 @@
}
}
@media (max-width: 600px) {
.hideLt600 {
display: none;
}
}
.dataTableHeader {
display: flex;
justify-content: space-between;

6
frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.jsx
View File

@ -17,6 +17,7 @@ import { styles as commonStyles } from '../../../common';
import { useStyles } from './styles';
import { getTogglePath } from '../../../../utils/route-path-helpers';
import FeatureStatus from '../../FeatureView2/FeatureStatus/FeatureStatus';
import FeatureType from '../../FeatureView2/FeatureType/FeatureType';
@ -48,6 +49,9 @@ const FeatureToggleListItem = ({
<span className={styles.listItemMetric}>
<FeatureStatus lastSeenAt={lastSeenAt} />
</span>
<span className={classnames(styles.listItemType, commonStyles.hideLt600)}>
<FeatureType type={type} />
</span>
<span className={classnames(styles.listItemLink)}>
<Link
to={featureUrl}
@ -59,6 +63,8 @@ const FeatureToggleListItem = ({
<span className={commonStyles.toggleName}>
{name}&nbsp;
</span>
<span className={styles.listItemToggle}>
</span>
<small>
<TimeAgo date={createdAt} live={false} />
</small>

4
frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/styles.js
View File

@ -10,6 +10,10 @@ export const useStyles = makeStyles(theme => ({
marginRight: '0.25rem',
flexShrink: '0',
},
listItemType: {
width: '40px',
textAlign: 'center',
},
listItemSvg: {
fill: theme.palette.icons.lightGrey,
},

60
frontend/src/component/feature/FeatureToggleList/__tests__/__snapshots__/feature-list-item-component-test.jsx.snap
View File

@ -10,7 +10,7 @@ exports[`renders correctly with one feature 1`] = `
>
<div
aria-describedby={null}
className="makeStyles-container-6"
className="makeStyles-container-7"
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
@ -37,7 +37,30 @@ exports[`renders correctly with one feature 1`] = `
</div>
</span>
<span
className="makeStyles-listItemLink-4"
className="makeStyles-listItemType-3 hideLt600"
>
<svg
aria-describedby={null}
aria-hidden={true}
className="MuiSvgIcon-root makeStyles-icon-8"
data-loading={true}
focusable="false"
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
onTouchStart={[Function]}
title={null}
viewBox="0 0 24 24"
>
<path
d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"
/>
</svg>
</span>
<span
className="makeStyles-listItemLink-5"
>
<a
className="listLink truncate"
@ -50,6 +73,7 @@ exports[`renders correctly with one feature 1`] = `
Another
 
</span>
<span />
<small>
<time
dateTime="2018-02-04T20:27:52.127Z"
@ -70,7 +94,7 @@ exports[`renders correctly with one feature 1`] = `
</a>
</span>
<span
className="makeStyles-listItemStrategies-5 hideLt920"
className="makeStyles-listItemStrategies-6 hideLt920"
/>
</li>
`;
@ -85,7 +109,7 @@ exports[`renders correctly with one feature without permission 1`] = `
>
<div
aria-describedby={null}
className="makeStyles-container-6"
className="makeStyles-container-7"
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
@ -112,7 +136,30 @@ exports[`renders correctly with one feature without permission 1`] = `
</div>
</span>
<span
className="makeStyles-listItemLink-4"
className="makeStyles-listItemType-3 hideLt600"
>
<svg
aria-describedby={null}
aria-hidden={true}
className="MuiSvgIcon-root makeStyles-icon-8"
data-loading={true}
focusable="false"
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
onTouchStart={[Function]}
title={null}
viewBox="0 0 24 24"
>
<path
d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"
/>
</svg>
</span>
<span
className="makeStyles-listItemLink-5"
>
<a
className="listLink truncate"
@ -125,6 +172,7 @@ exports[`renders correctly with one feature without permission 1`] = `
Another
 
</span>
<span />
<small>
<time
dateTime="2018-02-04T20:27:52.127Z"
@ -145,7 +193,7 @@ exports[`renders correctly with one feature without permission 1`] = `
</a>
</span>
<span
className="makeStyles-listItemStrategies-5 hideLt920"
className="makeStyles-listItemStrategies-6 hideLt920"
/>
</li>
`;

20
frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts
View File

@ -14,29 +14,23 @@ export const useStyles = makeStyles(theme => ({
color: theme.palette.grey[600],
borderBottom: '1px solid ' + theme.palette.grey[200],
},
typeHeader: {
[theme.breakpoints.down('sm')]: {
display: 'none',
},
},
tableCellStatus: {
width: '50px',
},
tableCellName: {
width: '250px',
display: 'flex',
paddingLeft: '10px',
},
tableCellEnv: {
width: '20px',
},
tableCellType: {
width: '32px',
alignItems: 'center',
[theme.breakpoints.down('sm')]: {
display: 'none',
},
},
icon: {
color: theme.palette.grey[600],
tableCellType: {
width: '32px',
alignItems: 'center',
[theme.breakpoints.down(600)]: {
display: 'none',
},
},
}));

4
frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx
View File

@ -92,8 +92,8 @@ const FeatureToggleListNew = ({
<TableCell
className={classnames(
styles.tableCell,
styles.tableCellHeader,
styles.typeHeader
styles.tableCellType,
styles.tableCellHeader
)}
align="center"
>

39
frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx
View File

@ -3,21 +3,19 @@ import {
Switch,
TableCell,
TableRow,
Tooltip,
useMediaQuery,
useTheme,
} from '@material-ui/core';
import { useHistory } from 'react-router';
import { getFeatureTypeIcons } from '../../../../utils/get-feature-type-icons';
import { useStyles } from '../FeatureToggleListNew.styles';
import useToggleFeatureByEnv from '../../../../hooks/api/actions/useToggleFeatureByEnv/useToggleFeatureByEnv';
import { IEnvironments } from '../../../../interfaces/featureToggle';
import ConditionallyRender from '../../../common/ConditionallyRender';
import useToast from '../../../../hooks/useToast';
import { getTogglePath } from '../../../../utils/route-path-helpers';
import { SyntheticEvent } from 'react-router/node_modules/@types/react';
import useUiConfig from '../../../../hooks/api/getters/useUiConfig/useUiConfig';
import FeatureStatus from '../../FeatureView2/FeatureStatus/FeatureStatus';
import FeatureType from '../../FeatureView2/FeatureType/FeatureType';
import classNames from 'classnames';
interface IFeatureToggleListNewItemProps {
name: string;
@ -34,9 +32,7 @@ const FeatureToggleListNewItem = ({
environments,
projectId,
}: IFeatureToggleListNewItemProps) => {
const theme = useTheme();
const { toast, setToastData } = useToast();
const smallScreen = useMediaQuery(theme.breakpoints.down('sm'));
const { toggleFeatureByEnvironment } = useToggleFeatureByEnv(
projectId,
name,
@ -72,28 +68,23 @@ const FeatureToggleListNewItem = ({
});
};
const IconComponent = getFeatureTypeIcons(type);
return (
<>
<TableRow className={styles.tableRow}>
<TableCell className={styles.tableCell} align="left" onClick={onClick}>
<TableCell className={classNames(
styles.tableCell,
styles.tableCellStatus)} align="left" onClick={onClick}>
<FeatureStatus lastSeenAt={lastSeenAt} />
</TableCell>
<ConditionallyRender
condition={!smallScreen}
show={
<TableCell className={styles.tableCell} align="center" onClick={onClick}>
<Tooltip arrow placement="right" title={type}>
<IconComponent
data-loading
className={styles.icon}
/>
</Tooltip>
<TableCell className={classNames(
styles.tableCell,
styles.tableCellType)} align="center" onClick={onClick}>
<FeatureType type={type} />
</TableCell>
}
/>
<TableCell className={styles.tableCell} align="left" onClick={onClick}>
<TableCell className={classNames(
styles.tableCell, styles.tableCellName)} align="left" onClick={onClick}>
<span data-loading>{name}</span>
</TableCell>
@ -101,7 +92,9 @@ const FeatureToggleListNewItem = ({
{environments.map((env: IEnvironments) => {
return (
<TableCell
className={styles.tableCell}
className={classNames(
styles.tableCell,
styles.tableCellEnv)}
align="center"
key={env.name}
>

6
frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesEnvironments.tsx
View File

@ -105,7 +105,7 @@ const FeatureStrategiesEnvironments = () => {
return featureCache?.environments?.map((env, index) => {
return (
<Tab
disabled={configureNewStrategy}
disabled={!!configureNewStrategy}
key={`${env.name}_${index}`}
label={env.name}
{...a11yProps(index)}
@ -178,8 +178,8 @@ const FeatureStrategiesEnvironments = () => {
// Check groupId
const cacheParamKeys = Object.keys(cachedStrategy?.parameters);
const strategyParamKeys = Object.keys(strategy?.parameters);
const cacheParamKeys = Object.keys(cachedStrategy?.parameters || {});
const strategyParamKeys = Object.keys(strategy?.parameters || {});
// Check length of parameters
if (cacheParamKeys.length !== strategyParamKeys.length) {
equal = false;

7
frontend/src/component/feature/FeatureView2/FeatureType/FeatureType.styles.ts Normal file
View File

@ -0,0 +1,7 @@
import { makeStyles } from '@material-ui/core/styles';
export const useStyles = makeStyles(theme => ({
icon: {
color: theme.palette.grey[600],
},
}));

24
frontend/src/component/feature/FeatureView2/FeatureType/FeatureType.tsx Normal file
View File

@ -0,0 +1,24 @@
import { useStyles } from './FeatureType.styles';
import { Tooltip } from '@material-ui/core';
import { getFeatureTypeIcons } from '../../../../utils/get-feature-type-icons';
interface FeatureTypeProps {
type: string;
}
const FeatureStatus = ({ type }: FeatureTypeProps) => {
const styles = useStyles();
const IconComponent = getFeatureTypeIcons(type);
return (
<Tooltip arrow placement="right" title={type}>
<IconComponent
data-loading
className={styles.icon}
/>
</Tooltip>
);
};
export default FeatureStatus;

2
frontend/src/component/feature/variant/AddVariant/AddVariant.jsx
View File

@ -239,7 +239,7 @@ const AddVariant = ({
control={
<Switch
name="weightType"
value={isFixWeight}
checked={isFixWeight}
onChange={setVariantWeightType}
/>
}

3
frontend/src/component/project/Project/Project.tsx
View File

@ -113,6 +113,7 @@ const Project = () => {
return tabData.map((tab, index) => {
return (
<Tab
data-loading
key={tab.title}
label={tab.title}
{...a11yProps(index)}
@ -147,7 +148,7 @@ const Project = () => {
<Edit />
</IconButton>
</h2>
<p>{project?.description}</p>
<p data-loading>{project?.description}</p>
</div>
<ConditionallyRender
condition={error}

1
frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.styles.ts
View File

@ -11,6 +11,7 @@ export const useStyles = makeStyles(theme => ({
[theme.breakpoints.down('sm')]: {
marginLeft: '0',
paddingBottom: '4rem',
width: 'inherit',
},
},
bodyClass: { padding: '0.5rem 2rem' },

8
frontend/yarn.lock
View File

@ -4561,10 +4561,10 @@ cyclist@^1.0.1:
resolved "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz"
integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
cypress@8.5.0:
version "8.5.0"
resolved "https://registry.yarnpkg.com/cypress/-/cypress-8.5.0.tgz#5712ca170913f8344bf167301205c4217c1eb9bd"
integrity sha512-MMkXIS+Ro2KETn4gAlG3tIc/7FiljuuCZP0zpd9QsRG6MZSyZW/l1J3D4iQM6WHsVxuX4rFChn5jPFlC2tNSvQ==
cypress@8.6.0:
version "8.6.0"
resolved "https://registry.yarnpkg.com/cypress/-/cypress-8.6.0.tgz#8d02fa58878b37cfc45bbfce393aa974fa8a8e22"
integrity sha512-F7qEK/6Go5FsqTueR+0wEw2vOVKNgk5847Mys8vsWkzPoEKdxs+7N9Y1dit+zhaZCLtMPyrMwjfA53ZFy+lSww==
dependencies:
"@cypress/request" "^2.88.6"
"@cypress/xvfb" "^1.2.4"