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

refactor: fix segment permission checks (#930)

Browse Source 
* refactor: use DELETE_SEGMENT permission in segments list

* refactor: clean up segment form mode prop

* refactor: format file

* refactor: fix ConstraintAccordion permission checks
This commit is contained in:
olav 2022-04-29 14:53:28 +02:00 committed by GitHub
parent 34c4747cd4
commit 774157b8d7
11 changed files with 143 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.tsx
View File

@ -7,7 +7,6 @@ import { ConstraintAccordionView } from './ConstraintAccordionView/ConstraintAcc
interface IConstraintAccordionProps { interface IConstraintAccordionProps {
compact: boolean; compact: boolean;
editing: boolean; editing: boolean;
environmentId?: string;
constraint: IConstraint; constraint: IConstraint;
onCancel: () => void; onCancel: () => void;
onEdit?: () => void; onEdit?: () => void;
@ -19,7 +18,6 @@ export const ConstraintAccordion = ({
constraint, constraint,
compact = false, compact = false,
editing, editing,
environmentId,
onEdit, onEdit,
onCancel, onCancel,
onDelete, onDelete,
@ -43,7 +41,6 @@ export const ConstraintAccordion = ({
constraint={constraint} constraint={constraint}
onEdit={onEdit} onEdit={onEdit}
onDelete={onDelete} onDelete={onDelete}
environmentId={environmentId}
compact={compact} compact={compact}
/> />
} }

184
frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx
View File

@ -3,20 +3,14 @@ import React, { forwardRef, useImperativeHandle } from 'react';
import { ConstraintAccordion } from 'component/common/ConstraintAccordion/ConstraintAccordion'; import { ConstraintAccordion } from 'component/common/ConstraintAccordion/ConstraintAccordion';
import produce from 'immer'; import produce from 'immer';
import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext'; import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';
import PermissionButton from 'component/common/PermissionButton/PermissionButton';
import {
CREATE_FEATURE_STRATEGY,
UPDATE_FEATURE_STRATEGY,
} from 'component/providers/AccessProvider/permissions';
import { useWeakMap } from 'hooks/useWeakMap'; import { useWeakMap } from 'hooks/useWeakMap';
import { objectId } from 'utils/objectId'; import { objectId } from 'utils/objectId';
import { useStyles } from './ConstraintAccordionList.styles'; import { useStyles } from './ConstraintAccordionList.styles';
import { createEmptyConstraint } from 'component/common/ConstraintAccordion/ConstraintAccordionList/createEmptyConstraint'; import { createEmptyConstraint } from 'component/common/ConstraintAccordion/ConstraintAccordionList/createEmptyConstraint';
import ConditionallyRender from 'component/common/ConditionallyRender'; import ConditionallyRender from 'component/common/ConditionallyRender';
import { Button } from '@material-ui/core';
interface IConstraintAccordionListProps { interface IConstraintAccordionListProps {
projectId?: string;
environmentId?: string;
constraints: IConstraint[]; constraints: IConstraint[];
setConstraints?: React.Dispatch<React.SetStateAction<IConstraint[]>>; setConstraints?: React.Dispatch<React.SetStateAction<IConstraint[]>>;
showCreateButton?: boolean; showCreateButton?: boolean;
@ -40,115 +34,97 @@ export const constraintAccordionListId = 'constraintAccordionListId';
export const ConstraintAccordionList = forwardRef< export const ConstraintAccordionList = forwardRef<
IConstraintAccordionListRef | undefined, IConstraintAccordionListRef | undefined,
IConstraintAccordionListProps IConstraintAccordionListProps
>( >(({ constraints, setConstraints, showCreateButton }, ref) => {
( const state = useWeakMap<IConstraint, IConstraintAccordionListItemState>();
{ const { context } = useUnleashContext();
projectId, const styles = useStyles();
environmentId,
constraints,
setConstraints,
showCreateButton,
},
ref
) => {
const state = useWeakMap<
IConstraint,
IConstraintAccordionListItemState
>();
const { context } = useUnleashContext();
const styles = useStyles();
const addConstraint = const addConstraint =
setConstraints && setConstraints &&
((contextName: string) => { ((contextName: string) => {
const constraint = createEmptyConstraint(contextName); const constraint = createEmptyConstraint(contextName);
state.set(constraint, { editing: true, new: true }); state.set(constraint, { editing: true, new: true });
setConstraints(prev => [...prev, constraint]); setConstraints(prev => [...prev, constraint]);
}); });
useImperativeHandle(ref, () => ({ useImperativeHandle(ref, () => ({
addConstraint, addConstraint,
})); }));
const onAdd = const onAdd =
addConstraint && addConstraint &&
(() => { (() => {
addConstraint(context[0].name); addConstraint(context[0].name);
}); });
const onEdit = const onEdit =
setConstraints && setConstraints &&
((constraint: IConstraint) => { ((constraint: IConstraint) => {
state.set(constraint, { editing: true }); state.set(constraint, { editing: true });
}); });
const onRemove = const onRemove =
setConstraints && setConstraints &&
((index: number) => { ((index: number) => {
const constraint = constraints[index];
state.set(constraint, {});
setConstraints(
produce(draft => {
draft.splice(index, 1);
})
);
});
const onSave =
setConstraints &&
((index: number, constraint: IConstraint) => {
state.set(constraint, {});
setConstraints(
produce(draft => {
draft[index] = constraint;
})
);
});
const onCancel = (index: number) => {
const constraint = constraints[index]; const constraint = constraints[index];
state.get(constraint)?.new && onRemove?.(index);
state.set(constraint, {}); state.set(constraint, {});
}; setConstraints(
produce(draft => {
draft.splice(index, 1);
})
);
});
if (context.length === 0) { const onSave =
return null; setConstraints &&
} ((index: number, constraint: IConstraint) => {
state.set(constraint, {});
setConstraints(
produce(draft => {
draft[index] = constraint;
})
);
});
return ( const onCancel = (index: number) => {
<div className={styles.container} id={constraintAccordionListId}> const constraint = constraints[index];
<ConditionallyRender state.get(constraint)?.new && onRemove?.(index);
condition={Boolean(showCreateButton && setConstraints)} state.set(constraint, {});
show={ };
<PermissionButton
if (context.length === 0) {
return null;
}
return (
<div className={styles.container} id={constraintAccordionListId}>
<ConditionallyRender
condition={Boolean(showCreateButton && onAdd)}
show={
<div>
<Button
type="button" type="button"
onClick={onAdd} onClick={onAdd}
variant="text" variant="text"
permission={[ color="primary"
UPDATE_FEATURE_STRATEGY,
CREATE_FEATURE_STRATEGY,
]}
environmentId={environmentId}
projectId={projectId}
> >
Add custom constraint Add custom constraint
</PermissionButton> </Button>
} </div>
}
/>
{constraints.map((constraint, index) => (
<ConstraintAccordion
key={objectId(constraint)}
constraint={constraint}
onEdit={onEdit && onEdit.bind(null, constraint)}
onCancel={onCancel.bind(null, index)}
onDelete={onRemove && onRemove.bind(null, index)}
onSave={onSave && onSave.bind(null, index)}
editing={Boolean(state.get(constraint)?.editing)}
compact
/> />
{constraints.map((constraint, index) => ( ))}
<ConstraintAccordion </div>
key={objectId(constraint)} );
environmentId={environmentId} });
constraint={constraint}
onEdit={onEdit && onEdit.bind(null, constraint)}
onCancel={onCancel.bind(null, index)}
onDelete={onRemove && onRemove.bind(null, index)}
onSave={onSave && onSave.bind(null, index)}
editing={Boolean(state.get(constraint)?.editing)}
compact
/>
))}
</div>
);
}
);

3
frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx
View File

@ -17,7 +17,6 @@ import {
import { useStyles } from '../ConstraintAccordion.styles'; import { useStyles } from '../ConstraintAccordion.styles';
interface IConstraintAccordionViewProps { interface IConstraintAccordionViewProps {
environmentId?: string;
constraint: IConstraint; constraint: IConstraint;
onDelete?: () => void; onDelete?: () => void;
onEdit?: () => void; onEdit?: () => void;
@ -26,7 +25,6 @@ interface IConstraintAccordionViewProps {
export const ConstraintAccordionView = ({ export const ConstraintAccordionView = ({
compact, compact,
environmentId,
constraint, constraint,
onEdit, onEdit,
onDelete, onDelete,
@ -49,7 +47,6 @@ export const ConstraintAccordionView = ({
> >
<ConstraintAccordionViewHeader <ConstraintAccordionViewHeader
compact={compact} compact={compact}
environmentId={environmentId}
constraint={constraint} constraint={constraint}
onEdit={onEdit} onEdit={onEdit}
onDelete={onDelete} onDelete={onDelete}

42
frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx
View File

@ -1,15 +1,11 @@
import StringTruncator from 'component/common/StringTruncator/StringTruncator'; import StringTruncator from 'component/common/StringTruncator/StringTruncator';
import { Chip, useMediaQuery } from '@material-ui/core'; import { Chip, useMediaQuery, IconButton } from '@material-ui/core';
import { ConstraintIcon } from 'component/common/ConstraintAccordion/ConstraintIcon'; import { ConstraintIcon } from 'component/common/ConstraintAccordion/ConstraintIcon';
import { Delete, Edit } from '@material-ui/icons'; import { Delete, Edit } from '@material-ui/icons';
import { IConstraint } from 'interfaces/strategy'; import { IConstraint } from 'interfaces/strategy';
import { useStyles } from 'component/common/ConstraintAccordion/ConstraintAccordion.styles'; import { useStyles } from 'component/common/ConstraintAccordion/ConstraintAccordion.styles';
import ConditionallyRender from 'component/common/ConditionallyRender'; import ConditionallyRender from 'component/common/ConditionallyRender';
import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
import { UPDATE_FEATURE_STRATEGY } from 'component/providers/AccessProvider/permissions';
import { useParams } from 'react-router-dom';
import { IFeatureViewParams } from 'interfaces/params';
import React from 'react'; import React from 'react';
import { formatConstraintValue } from 'utils/formatConstraintValue'; import { formatConstraintValue } from 'utils/formatConstraintValue';
import { useLocationSettings } from 'hooks/useLocationSettings'; import { useLocationSettings } from 'hooks/useLocationSettings';
@ -21,7 +17,6 @@ interface IConstraintAccordionViewHeaderProps {
onDelete?: () => void; onDelete?: () => void;
onEdit?: () => void; onEdit?: () => void;
singleValue: boolean; singleValue: boolean;
environmentId?: string;
} }
export const ConstraintAccordionViewHeader = ({ export const ConstraintAccordionViewHeader = ({
@ -30,11 +25,9 @@ export const ConstraintAccordionViewHeader = ({
onEdit, onEdit,
onDelete, onDelete,
singleValue, singleValue,
environmentId,
}: IConstraintAccordionViewHeaderProps) => { }: IConstraintAccordionViewHeaderProps) => {
const styles = useStyles(); const styles = useStyles();
const { locationSettings } = useLocationSettings(); const { locationSettings } = useLocationSettings();
const { projectId } = useParams<IFeatureViewParams>();
const smallScreen = useMediaQuery(`(max-width:${790}px)`); const smallScreen = useMediaQuery(`(max-width:${790}px)`);
const minWidthHeader = compact || smallScreen ? '100px' : '175px'; const minWidthHeader = compact || smallScreen ? '100px' : '175px';
@ -97,32 +90,19 @@ export const ConstraintAccordionViewHeader = ({
<div className={styles.headerActions}> <div className={styles.headerActions}>
<ConditionallyRender <ConditionallyRender
condition={Boolean(onEditClick)} condition={Boolean(onEditClick)}
show={ show={() => (
<PermissionIconButton <IconButton type="button" onClick={onEditClick}>
onClick={onEditClick!} <Edit titleAccess="Edit constraint" />
permission={UPDATE_FEATURE_STRATEGY} </IconButton>
projectId={projectId} )}
environmentId={environmentId}
hidden={!onEdit}
tooltip="Edit constraint"
>
<Edit />
</PermissionIconButton>
}
/> />
<ConditionallyRender <ConditionallyRender
condition={Boolean(onDeleteClick)} condition={Boolean(onDeleteClick)}
show={ show={() => (
<PermissionIconButton <IconButton type="button" onClick={onDeleteClick}>
onClick={onDeleteClick!} <Delete titleAccess="Delete constraint" />
permission={UPDATE_FEATURE_STRATEGY} </IconButton>
projectId={projectId} )}
tooltip="Delete constraint"
environmentId={environmentId}
>
<Delete />
</PermissionIconButton>
}
/> />
</div> </div>
</div> </div>

27
frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/FeatureStrategyConstraints.tsx
View File

@ -1,6 +1,11 @@
import { IConstraint, IFeatureStrategy } from 'interfaces/strategy'; import { IConstraint, IFeatureStrategy } from 'interfaces/strategy';
import React, { useMemo } from 'react'; import React, { useMemo, useContext } from 'react';
import { ConstraintAccordionList } from 'component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList'; import { ConstraintAccordionList } from 'component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList';
import AccessContext from 'contexts/AccessContext';
import {
UPDATE_FEATURE_STRATEGY,
CREATE_FEATURE_STRATEGY,
} from 'component/providers/AccessProvider/permissions';
interface IFeatureStrategyConstraintsProps { interface IFeatureStrategyConstraintsProps {
projectId: string; projectId: string;
@ -17,6 +22,8 @@ export const FeatureStrategyConstraints = ({
strategy, strategy,
setStrategy, setStrategy,
}: IFeatureStrategyConstraintsProps) => { }: IFeatureStrategyConstraintsProps) => {
const { hasAccess } = useContext(AccessContext);
const constraints = useMemo(() => { const constraints = useMemo(() => {
return strategy.constraints ?? []; return strategy.constraints ?? [];
}, [strategy]); }, [strategy]);
@ -28,13 +35,23 @@ export const FeatureStrategyConstraints = ({
})); }));
}; };
const showCreateButton = hasAccess(
CREATE_FEATURE_STRATEGY,
projectId,
environmentId
);
const allowEditAndDelete = hasAccess(
UPDATE_FEATURE_STRATEGY,
projectId,
environmentId
);
return ( return (
<ConstraintAccordionList <ConstraintAccordionList
projectId={projectId}
environmentId={environmentId}
constraints={constraints} constraints={constraints}
setConstraints={setConstraints} setConstraints={allowEditAndDelete ? setConstraints : undefined}
showCreateButton showCreateButton={showCreateButton}
/> />
); );
}; };

2
frontend/src/component/segments/CreateSegment/CreateSegment.tsx
View File

@ -89,9 +89,9 @@ export const CreateSegment = () => {
setDescription={setDescription} setDescription={setDescription}
constraints={constraints} constraints={constraints}
setConstraints={setConstraints} setConstraints={setConstraints}
mode="Create"
errors={errors} errors={errors}
clearErrors={clearErrors} clearErrors={clearErrors}
mode="create"
> >
<CreateButton <CreateButton
name="segment" name="segment"

2
frontend/src/component/segments/EditSegment/EditSegment.tsx
View File

@ -92,9 +92,9 @@ export const EditSegment = () => {
setDescription={setDescription} setDescription={setDescription}
constraints={constraints} constraints={constraints}
setConstraints={setConstraints} setConstraints={setConstraints}
mode="Edit"
errors={errors} errors={errors}
clearErrors={clearErrors} clearErrors={clearErrors}
mode="edit"
> >
<UpdateButton <UpdateButton
permission={UPDATE_SEGMENT} permission={UPDATE_SEGMENT}

6
frontend/src/component/segments/SegmentForm/SegmentForm.tsx
View File

@ -7,6 +7,8 @@ import { SegmentFormStepList } from 'component/segments/SegmentFormStepList/Segm
import ConditionallyRender from 'component/common/ConditionallyRender'; import ConditionallyRender from 'component/common/ConditionallyRender';
export type SegmentFormStep = 1 | 2; export type SegmentFormStep = 1 | 2;
export type SegmentFormMode = 'create' | 'edit';
interface ISegmentProps { interface ISegmentProps {
name: string; name: string;
description: string; description: string;
@ -16,8 +18,8 @@ interface ISegmentProps {
setConstraints: React.Dispatch<React.SetStateAction<IConstraint[]>>; setConstraints: React.Dispatch<React.SetStateAction<IConstraint[]>>;
handleSubmit: (e: any) => void; handleSubmit: (e: any) => void;
errors: { [key: string]: string }; errors: { [key: string]: string };
mode: 'Create' | 'Edit';
clearErrors: () => void; clearErrors: () => void;
mode: SegmentFormMode;
} }
export const SegmentForm: React.FC<ISegmentProps> = ({ export const SegmentForm: React.FC<ISegmentProps> = ({
@ -31,6 +33,7 @@ export const SegmentForm: React.FC<ISegmentProps> = ({
handleSubmit, handleSubmit,
errors, errors,
clearErrors, clearErrors,
mode,
}) => { }) => {
const styles = useStyles(); const styles = useStyles();
const totalSteps = 2; const totalSteps = 2;
@ -61,6 +64,7 @@ export const SegmentForm: React.FC<ISegmentProps> = ({
constraints={constraints} constraints={constraints}
setConstraints={setConstraints} setConstraints={setConstraints}
setCurrentStep={setCurrentStep} setCurrentStep={setCurrentStep}
mode={mode}
> >
{children} {children}
</SegmentFormStepTwo> </SegmentFormStepTwo>

21
frontend/src/component/segments/SegmentFormStepTwo/SegmentFormStepTwo.tsx
View File

@ -1,11 +1,15 @@
import React, { useRef, useState } from 'react'; import React, { useRef, useState, useContext } from 'react';
import { Button } from '@material-ui/core'; import { Button } from '@material-ui/core';
import { Add } from '@material-ui/icons'; import { Add } from '@material-ui/icons';
import ConditionallyRender from 'component/common/ConditionallyRender'; import ConditionallyRender from 'component/common/ConditionallyRender';
import PermissionButton from 'component/common/PermissionButton/PermissionButton'; import PermissionButton from 'component/common/PermissionButton/PermissionButton';
import { SidebarModal } from 'component/common/SidebarModal/SidebarModal'; import { SidebarModal } from 'component/common/SidebarModal/SidebarModal';
import { CreateUnleashContext } from 'component/context/CreateUnleashContext/CreateUnleashContext'; import { CreateUnleashContext } from 'component/context/CreateUnleashContext/CreateUnleashContext';
import { CREATE_CONTEXT_FIELD } from 'component/providers/AccessProvider/permissions'; import {
CREATE_CONTEXT_FIELD,
CREATE_SEGMENT,
UPDATE_SEGMENT,
} from 'component/providers/AccessProvider/permissions';
import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext'; import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';
import { IConstraint } from 'interfaces/strategy'; import { IConstraint } from 'interfaces/strategy';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
@ -14,7 +18,7 @@ import {
ConstraintAccordionList, ConstraintAccordionList,
IConstraintAccordionListRef, IConstraintAccordionListRef,
} from 'component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList'; } from 'component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList';
import { SegmentFormStep } from '../SegmentForm/SegmentForm'; import { SegmentFormStep, SegmentFormMode } from '../SegmentForm/SegmentForm';
import { import {
AutocompleteBox, AutocompleteBox,
IAutocompleteBoxOption, IAutocompleteBoxOption,
@ -25,11 +29,13 @@ import {
} from 'component/segments/SegmentDocs/SegmentDocs'; } from 'component/segments/SegmentDocs/SegmentDocs';
import { useSegmentValuesCount } from 'component/segments/hooks/useSegmentValuesCount'; import { useSegmentValuesCount } from 'component/segments/hooks/useSegmentValuesCount';
import { SEGMENT_VALUES_LIMIT } from 'utils/segmentLimits'; import { SEGMENT_VALUES_LIMIT } from 'utils/segmentLimits';
import AccessContext from 'contexts/AccessContext';
interface ISegmentFormPartTwoProps { interface ISegmentFormPartTwoProps {
constraints: IConstraint[]; constraints: IConstraint[];
setConstraints: React.Dispatch<React.SetStateAction<IConstraint[]>>; setConstraints: React.Dispatch<React.SetStateAction<IConstraint[]>>;
setCurrentStep: React.Dispatch<React.SetStateAction<SegmentFormStep>>; setCurrentStep: React.Dispatch<React.SetStateAction<SegmentFormStep>>;
mode: SegmentFormMode;
} }
export const SegmentFormStepTwo: React.FC<ISegmentFormPartTwoProps> = ({ export const SegmentFormStepTwo: React.FC<ISegmentFormPartTwoProps> = ({
@ -37,14 +43,17 @@ export const SegmentFormStepTwo: React.FC<ISegmentFormPartTwoProps> = ({
constraints, constraints,
setConstraints, setConstraints,
setCurrentStep, setCurrentStep,
mode,
}) => { }) => {
const constraintsAccordionListRef = useRef<IConstraintAccordionListRef>(); const constraintsAccordionListRef = useRef<IConstraintAccordionListRef>();
const history = useHistory(); const history = useHistory();
const styles = useStyles(); const styles = useStyles();
const { hasAccess } = useContext(AccessContext);
const { context = [] } = useUnleashContext(); const { context = [] } = useUnleashContext();
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const segmentValuesCount = useSegmentValuesCount(constraints); const segmentValuesCount = useSegmentValuesCount(constraints);
const overSegmentValuesLimit = segmentValuesCount > SEGMENT_VALUES_LIMIT; const overSegmentValuesLimit = segmentValuesCount > SEGMENT_VALUES_LIMIT;
const modePermission = mode === 'create' ? CREATE_SEGMENT : UPDATE_SEGMENT;
const autocompleteOptions = context.map(c => ({ const autocompleteOptions = context.map(c => ({
value: c.name, value: c.name,
@ -122,7 +131,11 @@ export const SegmentFormStepTwo: React.FC<ISegmentFormPartTwoProps> = ({
<ConstraintAccordionList <ConstraintAccordionList
ref={constraintsAccordionListRef} ref={constraintsAccordionListRef}
constraints={constraints} constraints={constraints}
setConstraints={setConstraints} setConstraints={
hasAccess(modePermission)
? setConstraints
: undefined
}
/> />
</div> </div>
</div> </div>

11
frontend/src/component/segments/SegmentList/SegmentList.tsx
View File

@ -1,4 +1,4 @@
import { useContext, useState } from 'react'; import { useState } from 'react';
import { import {
Table, Table,
TableBody, TableBody,
@ -7,12 +7,8 @@ import {
TableRow, TableRow,
Typography, Typography,
} from '@material-ui/core'; } from '@material-ui/core';
import AccessContext from 'contexts/AccessContext';
import usePagination from 'hooks/usePagination'; import usePagination from 'hooks/usePagination';
import { import { CREATE_SEGMENT } from 'component/providers/AccessProvider/permissions';
CREATE_SEGMENT,
UPDATE_SEGMENT,
} from 'component/providers/AccessProvider/permissions';
import PaginateUI from 'component/common/PaginateUI/PaginateUI'; import PaginateUI from 'component/common/PaginateUI/PaginateUI';
import { SegmentListItem } from './SegmentListItem/SegmentListItem'; import { SegmentListItem } from './SegmentListItem/SegmentListItem';
import { ISegment } from 'interfaces/segment'; import { ISegment } from 'interfaces/segment';
@ -32,7 +28,6 @@ import { NAVIGATE_TO_CREATE_SEGMENT } from 'utils/testIds';
export const SegmentsList = () => { export const SegmentsList = () => {
const history = useHistory(); const history = useHistory();
const { hasAccess } = useContext(AccessContext);
const { segments = [], refetchSegments } = useSegments(); const { segments = [], refetchSegments } = useSegments();
const { deleteSegment } = useSegmentsApi(); const { deleteSegment } = useSegmentsApi();
const { page, pages, nextPage, prevPage, setPageIndex, pageIndex } = const { page, pages, nextPage, prevPage, setPageIndex, pageIndex } =
@ -145,7 +140,7 @@ export const SegmentsList = () => {
classes={{ root: styles.cell }} classes={{ root: styles.cell }}
className={styles.lastHeader} className={styles.lastHeader}
> >
{hasAccess(UPDATE_SEGMENT) ? 'Actions' : ''} Action
</TableCell> </TableCell>
</TableRow> </TableRow>
</TableHead> </TableHead>

5
frontend/src/component/segments/SegmentList/SegmentListItem/SegmentListItem.tsx
View File

@ -2,14 +2,15 @@ import { useStyles } from './SegmentListItem.styles';
import { TableCell, TableRow, Typography } from '@material-ui/core'; import { TableCell, TableRow, Typography } from '@material-ui/core';
import { Delete, Edit } from '@material-ui/icons'; import { Delete, Edit } from '@material-ui/icons';
import { import {
ADMIN,
UPDATE_SEGMENT, UPDATE_SEGMENT,
DELETE_SEGMENT,
} from 'component/providers/AccessProvider/permissions'; } from 'component/providers/AccessProvider/permissions';
import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton'; import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
import TimeAgo from 'react-timeago'; import TimeAgo from 'react-timeago';
import { ISegment } from 'interfaces/segment'; import { ISegment } from 'interfaces/segment';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import { SEGMENT_DELETE_BTN_ID } from 'utils/testIds'; import { SEGMENT_DELETE_BTN_ID } from 'utils/testIds';
import React from 'react';
interface ISegmentListItemProps { interface ISegmentListItemProps {
id: number; id: number;
@ -82,7 +83,7 @@ export const SegmentListItem = ({
}); });
setDelDialog(true); setDelDialog(true);
}} }}
permission={ADMIN} permission={DELETE_SEGMENT}
tooltip="Remove segment" tooltip="Remove segment"
data-testid={`${SEGMENT_DELETE_BTN_ID}_${name}`} data-testid={`${SEGMENT_DELETE_BTN_ID}_${name}`}
> >