`;
@@ -85,7 +109,7 @@ exports[`renders correctly with one feature without permission 1`] = `
>
+
+
+
+
`;
diff --git a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts
index 02f26c73e6..53747c340e 100644
--- a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts
+++ b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts
@@ -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',
+ },
},
}));
diff --git a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx
index 1688b11ef5..0c1900a93a 100644
--- a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx
+++ b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx
@@ -92,8 +92,8 @@ const FeatureToggleListNew = ({
diff --git a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx
index 104fd80b51..77e264448f 100644
--- a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx
+++ b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx
@@ -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 (
<>
-
+
-
-
-
-
-
- }
- />
-
+
+
+
+
{name}
@@ -101,7 +92,9 @@ const FeatureToggleListNewItem = ({
{environments.map((env: IEnvironments) => {
return (
diff --git a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesEnvironments.tsx b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesEnvironments.tsx
index 3e8fd7752a..7fa36412ad 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesEnvironments.tsx
+++ b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesEnvironments.tsx
@@ -105,7 +105,7 @@ const FeatureStrategiesEnvironments = () => {
return featureCache?.environments?.map((env, index) => {
return (
{
// 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;
diff --git a/frontend/src/component/feature/FeatureView2/FeatureType/FeatureType.styles.ts b/frontend/src/component/feature/FeatureView2/FeatureType/FeatureType.styles.ts
new file mode 100644
index 0000000000..ebd7158147
--- /dev/null
+++ b/frontend/src/component/feature/FeatureView2/FeatureType/FeatureType.styles.ts
@@ -0,0 +1,7 @@
+import { makeStyles } from '@material-ui/core/styles';
+
+export const useStyles = makeStyles(theme => ({
+ icon: {
+ color: theme.palette.grey[600],
+ },
+}));
diff --git a/frontend/src/component/feature/FeatureView2/FeatureType/FeatureType.tsx b/frontend/src/component/feature/FeatureView2/FeatureType/FeatureType.tsx
new file mode 100644
index 0000000000..c3ba8a157d
--- /dev/null
+++ b/frontend/src/component/feature/FeatureView2/FeatureType/FeatureType.tsx
@@ -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 (
+
+
+
+ );
+};
+
+export default FeatureStatus;
diff --git a/frontend/src/component/feature/variant/AddVariant/AddVariant.jsx b/frontend/src/component/feature/variant/AddVariant/AddVariant.jsx
index e7b70c7ccc..1e0b99209e 100644
--- a/frontend/src/component/feature/variant/AddVariant/AddVariant.jsx
+++ b/frontend/src/component/feature/variant/AddVariant/AddVariant.jsx
@@ -239,7 +239,7 @@ const AddVariant = ({
control={
}
diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx
index 305ad5d659..3474dd56c5 100644
--- a/frontend/src/component/project/Project/Project.tsx
+++ b/frontend/src/component/project/Project/Project.tsx
@@ -113,6 +113,7 @@ const Project = () => {
return tabData.map((tab, index) => {
return (
{
- {project?.description}
+ {project?.description}