Merge branch 'master' into fix/reload-tabs

frontend/.gitignore

@@ -50,4 +50,5 @@ build
 .DS_Store
 
 cypress/videos/*
-cypress/screenshots/*
+cypress/screenshots/*
+.env.local

frontend/package.json

@@ -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",

frontend/src/component/common/common.module.scss

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

frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.jsx

@@ -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>

frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/styles.js

@@ -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,
     },

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

@@ -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>
 `;

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',
+        paddingLeft: '10px',
-        display: 'flex',
     },
     tableCellEnv: {
         width: '20px',
-    },
-    tableCellType: {
-        width: '32px',
-        alignItems: 'center',
         [theme.breakpoints.down('sm')]: {
             display: 'none',
         },
     },
-    icon: {
+    tableCellType: {
-        color: theme.palette.grey[600],
+        width: '32px',
+        alignItems: 'center',
+        [theme.breakpoints.down(600)]: {
+            display: 'none',
+        },
     },
 }));

frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx

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

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 (
         <>
             <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
+                <TableCell className={classNames(
-                    condition={!smallScreen}
+                                styles.tableCell,
-                    show={
+                                styles.tableCellType)} align="center" onClick={onClick}>
-                        <TableCell className={styles.tableCell} align="center" onClick={onClick}>
+                    <FeatureType type={type} />
-                            <Tooltip arrow placement="right" title={type}>
+                </TableCell>
-                                <IconComponent
+                <TableCell className={classNames(
-                                    data-loading
+                                styles.tableCell, styles.tableCellName)} align="left" onClick={onClick}>
-                                    className={styles.icon}
-                                />
-                            </Tooltip>
-                        </TableCell>
-                    }
-                />
-                <TableCell className={styles.tableCell} 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}
                         >

frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesEnvironments.tsx

@@ -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 cacheParamKeys = Object.keys(cachedStrategy?.parameters || {});
-                const strategyParamKeys = Object.keys(strategy?.parameters);
+                const strategyParamKeys = Object.keys(strategy?.parameters || {});
                 // Check length of parameters
                 if (cacheParamKeys.length !== strategyParamKeys.length) {
                     equal = false;

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],
+    },
+}));

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 (
+        <Tooltip arrow placement="right" title={type}>
+            <IconComponent
+                data-loading
+                className={styles.icon}
+            />
+        </Tooltip>
+    );
+};
+
+export default FeatureStatus;

frontend/src/component/feature/variant/AddVariant/AddVariant.jsx

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

frontend/src/component/project/Project/Project.tsx

@@ -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}

frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.styles.ts

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

frontend/yarn.lock

@@ -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:
+cypress@8.6.0:
-  version "8.5.0"
+  version "8.6.0"
-  resolved "https://registry.yarnpkg.com/cypress/-/cypress-8.5.0.tgz#5712ca170913f8344bf167301205c4217c1eb9bd"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-8.6.0.tgz#8d02fa58878b37cfc45bbfce393aa974fa8a8e22"
-  integrity sha512-MMkXIS+Ro2KETn4gAlG3tIc/7FiljuuCZP0zpd9QsRG6MZSyZW/l1J3D4iQM6WHsVxuX4rFChn5jPFlC2tNSvQ==
+  integrity sha512-F7qEK/6Go5FsqTueR+0wEw2vOVKNgk5847Mys8vsWkzPoEKdxs+7N9Y1dit+zhaZCLtMPyrMwjfA53ZFy+lSww==
   dependencies:
     "@cypress/request" "^2.88.6"
     "@cypress/xvfb" "^1.2.4"