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

Merge branch 'main' into feat/search-projects

Browse Source
This commit is contained in:
Youssef Khedher 2022-03-01 16:40:53 +01:00 committed by GitHub
commit 286b8b8604
4 changed files with 58 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -22,6 +22,10 @@ export const useStyles = makeStyles(theme => ({
title: {
fontSize: '1rem',
fontWeight: 'normal',
display: 'unset',
[theme.breakpoints.down(600)]: {
display: 'none',
},
},
iconButton: {
marginRight: '1rem',
@ -37,4 +41,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: 35,
marginRight: '2rem',
},
button: {
whiteSpace: 'nowrap',
},
}));

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

@ -1,36 +1,46 @@
import { useContext } 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';
import classnames from 'classnames';
interface IProjectFeatureToggles {
interface IProjectFeatureTogglesProps {
features: IFeatureToggleListItem[];
loading: boolean;
}
const ProjectFeatureToggles = ({
export const ProjectFeatureToggles = ({
features,
loading,
}: IProjectFeatureToggles) => {
}: IProjectFeatureTogglesProps) => {
const styles = useStyles();
const { id } = useParams<{ id: string }>();
const history = useHistory();
const { hasAccess } = useContext(AccessContext);
const { uiConfig } = useUiConfig();
const [filter, setFilter] = useState('');
const filteredFeatures = useMemo(() => {
const regExp = new RegExp(filter, 'i');
return filter
? features.filter(feature => regExp.test(feature.name))
: features;
}, [features, filter]);
return (
<PageContent
@ -39,9 +49,16 @@ const ProjectFeatureToggles = ({
headerContent={
<HeaderTitle
className={styles.title}
title={`Feature toggles (${features.length})`}
title={`Feature toggles (${filteredFeatures.length})`}
actions={
<>
<div className={styles.actionsContainer}>
<SearchField
initialValue={filter}
updateValue={setFilter}
className={classnames(styles.search, {
skeleton: loading,
})}
/>
<ConditionallyRender
condition={PROJECTFILTERING}
show={
@ -69,19 +86,20 @@ const ProjectFeatureToggles = ({
Icon={Add}
projectId={id}
permission={CREATE_FEATURE}
className={styles.button}
>
New feature toggle
</ResponsiveButton>
</>
</div>
}
/>
}
>
<ConditionallyRender
condition={features?.length > 0}
condition={filteredFeatures.length > 0}
show={
<FeatureToggleListNew
features={features}
features={filteredFeatures}
loading={loading}
projectId={id}
/>
@ -112,5 +130,3 @@ const ProjectFeatureToggles = ({
</PageContent>
);
};
export default ProjectFeatureToggles;

2
frontend/src/component/project/Project/ProjectOverview.tsx
View File

@ -1,5 +1,5 @@
import useProject from '../../../hooks/api/getters/useProject/useProject';
import ProjectFeatureToggles from './ProjectFeatureToggles/ProjectFeatureToggles';
import { ProjectFeatureToggles } from './ProjectFeatureToggles/ProjectFeatureToggles';
import ProjectInfo from './ProjectInfo/ProjectInfo';
import { useStyles } from './Project.styles';