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; projectId?: string;
environmentId?: string; environmentId?: string;
maxWidth: string; maxWidth: string;
className?: string;
} }
const ResponsiveButton: React.FC<IResponsiveButtonProps> = ({ const ResponsiveButton: React.FC<IResponsiveButtonProps> = ({
@ -24,6 +25,7 @@ const ResponsiveButton: React.FC<IResponsiveButtonProps> = ({
permission, permission,
environmentId, environmentId,
projectId, projectId,
className,
...rest ...rest
}) => { }) => {
const smallScreen = useMediaQuery(`(max-width:${maxWidth})`); 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: { searchIcon: {
marginRight: '8px', marginRight: '8px',
color: theme.palette.grey[600],
}, },
inputRoot: { inputRoot: {
width: '100%', width: '100%',

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

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

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