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 { Link } from 'react-router-dom';
import { Link, useNavigate } from 'react-router-dom';
import { Button, IconButton, Tooltip } from '@mui/material';
import useMediaQuery from '@mui/material/useMediaQuery';
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 { IFeaturesFilter } from 'hooks/useFeaturesFilter';
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 {
loading: boolean;
@ -19,6 +22,7 @@ export const CreateFeatureButton = ({
}: ICreateFeatureButtonProps) => {
const smallScreen = useMediaQuery('(max-width:800px)');
const createFeature = useCreateFeaturePath(filter);
const navigate = useNavigate();
if (!createFeature) {
return null;
@ -28,30 +32,33 @@ export const CreateFeatureButton = ({
<ConditionallyRender
condition={smallScreen}
show={
<Tooltip title="Create feature toggle" arrow>
<IconButton
component={Link}
to={createFeature.path}
data-testid={NAVIGATE_TO_CREATE_FEATURE}
disabled={!createFeature.access}
size="large"
>
<Add />
</IconButton>
</Tooltip>
<PermissionIconButton
permission={CREATE_FEATURE}
projectId={createFeature.projectId}
component={Link}
to={createFeature.path}
size="large"
tooltipProps={{
title: 'Create feature toggle',
}}
>
<Add />
</PermissionIconButton>
}
elseShow={
<Button
to={createFeature.path}
<PermissionButton
onClick={() => {
navigate(createFeature.path);
}}
permission={CREATE_FEATURE}
projectId={createFeature.projectId}
color="primary"
variant="contained"
component={Link}
data-testid={NAVIGATE_TO_CREATE_FEATURE}
disabled={!createFeature.access}
className={classnames({ skeleton: loading })}
>
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 { getCreateTogglePath } from 'utils/routePathHelpers';
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 {
path: string;
access: boolean;
projectId: string;
}
export const useCreateFeaturePath = (
filter: IFeaturesFilter
): IUseCreateFeaturePathOutput | undefined => {
const { hasAccess } = useContext(AccessContext);
const defaultProjectId = useDefaultProjectId();
const { uiConfig } = useUiConfig();
const selectedProjectId =
const projectId =
filter.project === '*' || !filter.project
? defaultProjectId
: filter.project;
if (!selectedProjectId) {
if (!projectId) {
return;
}
return {
path: getCreateTogglePath(selectedProjectId, uiConfig.flags.E),
access: hasAccess(CREATE_FEATURE, selectedProjectId),
path: getCreateTogglePath(projectId, uiConfig.flags.E),
projectId,
};
};