Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-09 00:18:00 +01:00
Code Issues Projects Releases Wiki Activity

feat: add search input in project features

Browse Source
This commit is contained in:
Youssef 2022-02-28 16:27:23 +01:00
parent ddd7a2caaf
commit 722c06b73f
4 changed files with 47 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/component/common/ResponsiveButton/ResponsiveButton.tsx
View File

@ -12,6 +12,7 @@ interface IResponsiveButtonProps {
projectId?: string;
environmentId?: string;
maxWidth: string;
className?: string;
}
const ResponsiveButton: React.FC<IResponsiveButtonProps> = ({
@ -24,6 +25,7 @@ const ResponsiveButton: React.FC<IResponsiveButtonProps> = ({
permission,
environmentId,
projectId,
className,
...rest
}) => {
const smallScreen = useMediaQuery(`(max-width:${maxWidth})`);

1
frontend/src/component/common/SearchField/styles.js
View File

@ -20,6 +20,7 @@ export const useStyles = makeStyles(theme => ({
},
searchIcon: {
marginRight: '8px',
color: theme.palette.grey[600],
},
inputRoot: {
width: '100%',

13
frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.styles.ts
View File

@ -37,4 +37,17 @@ export const useStyles = makeStyles(theme => ({
link: {
textDecoration: 'none',
},
actionsContainer: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
},
search: {
border: `1px solid ${theme.palette.grey[300]}`,
height: '35px',
marginRight: '2rem',
},
button: {
whiteSpace: 'nowrap',
},
}));

58
frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
View File

@ -1,21 +1,22 @@
import { useContext, useEffect, useState } from 'react';
import { useContext, useMemo, useState } from 'react';
import { IconButton } from '@material-ui/core';
import { Add } from '@material-ui/icons';
import FilterListIcon from '@material-ui/icons/FilterList';
import { useParams } from 'react-router';
import { Link, useHistory } from 'react-router-dom';
import AccessContext from '../../../../contexts/AccessContext';
import { IFeatureToggleListItem } from '../../../../interfaces/featureToggle';
import { getCreateTogglePath } from '../../../../utils/route-path-helpers';
import ConditionallyRender from '../../../common/ConditionallyRender';
import { PROJECTFILTERING } from '../../../common/flags';
import HeaderTitle from '../../../common/HeaderTitle';
import PageContent from '../../../common/PageContent';
import ResponsiveButton from '../../../common/ResponsiveButton/ResponsiveButton';
import FeatureToggleListNew from '../../../feature/FeatureToggleListNew/FeatureToggleListNew';
import AccessContext from 'contexts/AccessContext';
import { SearchField } from 'component/common/SearchField/SearchField';
import ConditionallyRender from 'component/common/ConditionallyRender';
import { PROJECTFILTERING } from 'component/common/flags';
import HeaderTitle from 'component/common/HeaderTitle';
import PageContent from 'component/common/PageContent';
import ResponsiveButton from 'component/common/ResponsiveButton/ResponsiveButton';
import FeatureToggleListNew from 'component/feature/FeatureToggleListNew/FeatureToggleListNew';
import { IFeatureToggleListItem } from 'interfaces/featureToggle';
import { getCreateTogglePath } from 'utils/route-path-helpers';
import { useStyles } from './ProjectFeatureToggles.styles';
import { CREATE_FEATURE } from '../../../providers/AccessProvider/permissions';
import useUiConfig from '../../../../hooks/api/getters/useUiConfig/useUiConfig';
import { CREATE_FEATURE } from 'component/providers/AccessProvider/permissions';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
interface IProjectFeatureToggles {
features: IFeatureToggleListItem[];
@ -27,23 +28,20 @@ const ProjectFeatureToggles = ({
loading,
}: IProjectFeatureToggles) => {
const styles = useStyles();
const { id } = useParams();
const { id } = useParams<{ id: string }>();
const history = useHistory();
const { hasAccess } = useContext(AccessContext);
const { uiConfig } = useUiConfig();
const [filteredFeatures, setFilteredFeatures] =
useState<IFeatureToggleListItem[]>(features);
const [filter, setFilter] = useState('');
useState<IFeatureToggleListItem[]>(features);
const filteredFeatures = useMemo(() => {
const regExp = new RegExp(filter, 'i');
return filter
? features?.filter(feature => regExp.test(feature?.name))
: features;
}, [features, filter]);
const searchFeatures = () => {
const filteredData = features.filter(feature => {
return Object.values(feature)
.join('')
.toLowerCase()
.includes('ENV'.toLowerCase());
});
setFilteredFeatures(filteredData);
};
return (
<PageContent
className={styles.container}
@ -53,7 +51,12 @@ const ProjectFeatureToggles = ({
className={styles.title}
title={`Feature toggles (${filteredFeatures.length})`}
actions={
<>
<div className={styles.actionsContainer}>
<SearchField
initialValue={filter}
updateValue={setFilter}
className={styles.search}
/>
<ConditionallyRender
condition={PROJECTFILTERING}
show={
@ -82,10 +85,11 @@ const ProjectFeatureToggles = ({
Icon={Add}
projectId={id}
permission={CREATE_FEATURE}
className={styles.button}
>
New feature toggle
</ResponsiveButton>
</>
</div>
}
/>
}