From a6f2c332f8577fe707d00c4aa98e7ac82e8683c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivar=20Conradi=20=C3=98sthus?= Date: Mon, 11 Oct 2021 22:45:59 +0200 Subject: [PATCH] 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. --- .../src/component/common/common.module.scss | 7 +++ .../FeatureToggleListItem.jsx | 6 ++ .../FeatureToggleListItem/styles.js | 4 ++ .../feature-list-item-component-test.jsx.snap | 60 +++++++++++++++++-- .../FeatureToggleListNew.styles.ts | 20 +++---- .../FeatureToggleListNew.tsx | 4 +- .../FeatureToggleListNewItem.tsx | 41 ++++++------- .../FeatureType/FeatureType.styles.ts | 7 +++ .../FeatureView2/FeatureType/FeatureType.tsx | 24 ++++++++ .../ProjectFeatureToggles.styles.ts | 1 + 10 files changed, 129 insertions(+), 45 deletions(-) create mode 100644 frontend/src/component/feature/FeatureView2/FeatureType/FeatureType.styles.ts create mode 100644 frontend/src/component/feature/FeatureView2/FeatureType/FeatureType.tsx diff --git a/frontend/src/component/common/common.module.scss b/frontend/src/component/common/common.module.scss index 896769c8b5..22234bbd9f 100644 --- 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; diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.jsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.jsx index 0e850a913e..950e5cc16d 100644 --- 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 = ({ + + + {name}  + + diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/styles.js b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/styles.js index 009f075301..75b4efac67 100644 --- 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, }, diff --git 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 index 152bdef64c..6bb02340d6 100644 --- 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`] = ` >
+ + + + + + `; @@ -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/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/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.styles.ts b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.styles.ts index 892da3ae12..6429a52bb6 100644 --- 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' },