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

refactor: use permission button for new toggle (#2009)

Browse Source
This commit is contained in:
Tymoteusz Czech 2022-09-02 13:35:39 +02:00 committed by GitHub
parent ae19cae8a9
commit 3331e2aa85
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/src/component/feature/CreateFeatureButton/CreateFeatureButton.tsx
View File

@ -1,5 +1,5 @@
import classnames from 'classnames'; import classnames from 'classnames';
import { Link } from 'react-router-dom'; import { Link, useNavigate } from 'react-router-dom';
import { Button, IconButton, Tooltip } from '@mui/material'; import { Button, IconButton, Tooltip } from '@mui/material';
import useMediaQuery from '@mui/material/useMediaQuery'; import useMediaQuery from '@mui/material/useMediaQuery';
import { Add } from '@mui/icons-material'; import { Add } from '@mui/icons-material';
@ -7,6 +7,9 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
import { NAVIGATE_TO_CREATE_FEATURE } from 'utils/testIds'; import { NAVIGATE_TO_CREATE_FEATURE } from 'utils/testIds';
import { IFeaturesFilter } from 'hooks/useFeaturesFilter'; import { IFeaturesFilter } from 'hooks/useFeaturesFilter';
import { useCreateFeaturePath } from 'component/feature/CreateFeatureButton/useCreateFeaturePath'; import { useCreateFeaturePath } from 'component/feature/CreateFeatureButton/useCreateFeaturePath';
import PermissionButton from 'component/common/PermissionButton/PermissionButton';
import { CREATE_FEATURE } from 'component/providers/AccessProvider/permissions';
import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
interface ICreateFeatureButtonProps { interface ICreateFeatureButtonProps {
loading: boolean; loading: boolean;
@ -19,6 +22,7 @@ export const CreateFeatureButton = ({
}: ICreateFeatureButtonProps) => { }: ICreateFeatureButtonProps) => {
const smallScreen = useMediaQuery('(max-width:800px)'); const smallScreen = useMediaQuery('(max-width:800px)');
const createFeature = useCreateFeaturePath(filter); const createFeature = useCreateFeaturePath(filter);
const navigate = useNavigate();
if (!createFeature) { if (!createFeature) {
return null; return null;
@ -28,30 +32,33 @@ export const CreateFeatureButton = ({
<ConditionallyRender <ConditionallyRender
condition={smallScreen} condition={smallScreen}
show={ show={
<Tooltip title="Create feature toggle" arrow> <PermissionIconButton
<IconButton permission={CREATE_FEATURE}
component={Link} projectId={createFeature.projectId}
to={createFeature.path} component={Link}
data-testid={NAVIGATE_TO_CREATE_FEATURE} to={createFeature.path}
disabled={!createFeature.access} size="large"
size="large" tooltipProps={{
> title: 'Create feature toggle',
<Add /> }}
</IconButton> >
</Tooltip> <Add />
</PermissionIconButton>
} }
elseShow={ elseShow={
<Button <PermissionButton
to={createFeature.path} onClick={() => {
navigate(createFeature.path);
}}
permission={CREATE_FEATURE}
projectId={createFeature.projectId}
color="primary" color="primary"
variant="contained" variant="contained"
component={Link}
data-testid={NAVIGATE_TO_CREATE_FEATURE} data-testid={NAVIGATE_TO_CREATE_FEATURE}
disabled={!createFeature.access}
className={classnames({ skeleton: loading })} className={classnames({ skeleton: loading })}
> >
New feature toggle New feature toggle
</Button> </PermissionButton>
} }
/> />
); );

14
frontend/src/component/feature/CreateFeatureButton/useCreateFeaturePath.ts
View File

@ -2,33 +2,29 @@ import { useDefaultProjectId } from 'hooks/api/getters/useDefaultProject/useDefa
import { IFeaturesFilter } from 'hooks/useFeaturesFilter'; import { IFeaturesFilter } from 'hooks/useFeaturesFilter';
import { getCreateTogglePath } from 'utils/routePathHelpers'; import { getCreateTogglePath } from 'utils/routePathHelpers';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { CREATE_FEATURE } from 'component/providers/AccessProvider/permissions';
import AccessContext from 'contexts/AccessContext';
import { useContext } from 'react';
interface IUseCreateFeaturePathOutput { interface IUseCreateFeaturePathOutput {
path: string; path: string;
access: boolean; projectId: string;
} }
export const useCreateFeaturePath = ( export const useCreateFeaturePath = (
filter: IFeaturesFilter filter: IFeaturesFilter
): IUseCreateFeaturePathOutput | undefined => { ): IUseCreateFeaturePathOutput | undefined => {
const { hasAccess } = useContext(AccessContext);
const defaultProjectId = useDefaultProjectId(); const defaultProjectId = useDefaultProjectId();
const { uiConfig } = useUiConfig(); const { uiConfig } = useUiConfig();
const selectedProjectId = const projectId =
filter.project === '*' || !filter.project filter.project === '*' || !filter.project
? defaultProjectId ? defaultProjectId
: filter.project; : filter.project;
if (!selectedProjectId) { if (!projectId) {
return; return;
} }
return { return {
path: getCreateTogglePath(selectedProjectId, uiConfig.flags.E), path: getCreateTogglePath(projectId, uiConfig.flags.E),
access: hasAccess(CREATE_FEATURE, selectedProjectId), projectId,
}; };
}; };