Merge branch 'master' into fix/reload-tabs

2025-01-25 00:07:47 +01:00 · 2021-10-12 09:09:25 +01:00 · 2021-10-12 09:09:25 +01:00 · ff6affdae5
commit ff6affdae5
parent a139cd4034 bb8f00ea36
16 changed files with 142 additions and 56 deletions
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@ -50,4 +50,5 @@ build
 .DS_Store

 cypress/videos/*
-cypress/screenshots/*
+cypress/screenshots/*
+.env.local
--- a/frontend/package.json
+++ b/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",
--- a/frontend/src/component/common/common.module.scss
+++ b/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;
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.jsx
+++ b/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>
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/styles.js
+++ b/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,
    },
--- a/frontend/src/component/feature/FeatureToggleList/tests/snapshots/feature-list-item-component-test.jsx.snap
+++ b/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>
 `;
--- 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',
+        },
    },
 }));
--- a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx
+++ b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx
@ -92,8 +92,8 @@ const FeatureToggleListNew = ({
                        <TableCell
                            className={classnames(
                                styles.tableCell,
-                                styles.tableCellHeader,
-                                styles.typeHeader
+                                styles.tableCellType,
+                                styles.tableCellHeader
                            )}
                            align="center"
                        >
--- 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 (
        <>
            <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>
-                    }
-                />
-                <TableCell className={styles.tableCell} align="left" onClick={onClick}>
+                <TableCell className={classNames(
+                                styles.tableCell,
+                                styles.tableCellType)} align="center" onClick={onClick}>
+                    <FeatureType type={type} />
+                </TableCell>
+                <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}
                        >
--- 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 (
                <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;
--- a/frontend/src/component/feature/FeatureView2/FeatureType/FeatureType.styles.ts
+++ 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],
+    },
+}));
--- a/frontend/src/component/feature/FeatureView2/FeatureType/FeatureType.tsx
+++ 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 (
+        <Tooltip arrow placement="right" title={type}>
+            <IconComponent
+                data-loading
+                className={styles.icon}
+            />
+        </Tooltip>
+    );
+};
+
+export default FeatureStatus;
--- 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={
                                    <Switch
                                        name="weightType"
-                                        value={isFixWeight}
+                                        checked={isFixWeight}
                                        onChange={setVariantWeightType}
                                    />
                                }
--- 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 (
                <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}
--- a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.styles.ts
+++ b/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' },
--- a/frontend/yarn.lock
+++ b/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:
-  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"