`;
@@ -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/FeatureView2/FeatureView2.tsx b/frontend/src/component/feature/FeatureView2/FeatureView2.tsx
index 49851a7dd6..28715ba501 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureView2.tsx
+++ b/frontend/src/component/feature/FeatureView2/FeatureView2.tsx
@@ -110,7 +110,7 @@ const FeatureView2 = () => {
tooltip="Copy"
data-loading
component={Link}
- to={`${history.location.pathname}/copy`}
+ to={`/projects/${projectId}/features2/${featureId}/strategies/copy`}
>
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 e9cc62d9db..3474dd56c5 100644
--- a/frontend/src/component/project/Project/Project.tsx
+++ b/frontend/src/component/project/Project/Project.tsx
@@ -33,42 +33,6 @@ const Project = () => {
const { a11yProps, activeTabIdx, setActiveTab } = useTabs(0);
const basePath = `/projects/${id}`;
-
- useEffect(() => {
- const created = params.get('created');
- const edited = params.get('edited');
-
- if (created || edited) {
- const text = created ? 'Project created' : 'Project updated';
- setToastData({
- show: true,
- type: 'success',
- text,
- });
- }
- /* eslint-disable-next-line */
- }, []);
-
- useEffect(() => {
- const tabIdx = tabData.findIndex(tab => tab.name === activeTab);
- if(tabIdx > 0) {
- setActiveTab(tabIdx);
- } else {
- setActiveTab(0);
- }
-
- /* eslint-disable-next-line */
- }, []);
-
- const goToTabWithName = (name: string) => {
- const index = tabData.findIndex(t => t.name === name);
- if(index >= 0) {
- const tab = tabData[index];
- history.push(tab.path);
- setActiveTab(index);
- }
- }
-
const tabData = [
{
title: 'Overview',
@@ -102,13 +66,54 @@ const Project = () => {
path: `${basePath}/settings`,
name: 'settings',
},
- ].filter(tab => !tab.disabled);
+ ]
+
+ useEffect(() => {
+ const created = params.get('created');
+ const edited = params.get('edited');
+
+ if (created || edited) {
+ const text = created ? 'Project created' : 'Project updated';
+ setToastData({
+ show: true,
+ type: 'success',
+ text,
+ });
+ }
+
+ tabData.filter(tab => !tab.disabled);
+
+ /* eslint-disable-next-line */
+ }, []);
+
+ useEffect(() => {
+ const tabIdx = tabData.findIndex(tab => tab.name === activeTab);
+ if(tabIdx > 0) {
+ setActiveTab(tabIdx);
+ } else {
+ setActiveTab(0);
+ }
+
+ /* eslint-disable-next-line */
+ }, []);
+
+ const goToTabWithName = (name: string) => {
+ const index = tabData.findIndex(t => t.name === name);
+ if(index >= 0) {
+ const tab = tabData[index];
+ history.push(tab.path);
+ setActiveTab(index);
+ }
+ }
+
+
const renderTabs = () => {
return tabData.map((tab, index) => {
return (
{
- {project?.description}
+ {project?.description}