fix: show feature toggle type in list (#418)

We should show the feature toggle type in all list of toggles. Also cleaned up mobile view.
2024-12-22 19:07:54 +01:00 · 2021-10-11 22:45:59 +02:00 · 2021-10-11 22:45:59 +02:00 · a6f2c332f8
commit a6f2c332f8
parent 31f8b46cd2
10 changed files with 129 additions and 45 deletions
--- 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 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}
                        >
--- 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/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' },