mirror of
https://github.com/Unleash/unleash.git
synced 2025-05-08 01:15:49 +02:00
Refactor makestyles 2-1 (#2820)
This commit is contained in:
parent
f2eb96000e
commit
d1054a3de5
@ -31,60 +31,19 @@ export const useStyles = makeStyles()(theme => ({
|
||||
accordionEdit: {
|
||||
backgroundColor: theme.palette.constraintAccordion.editBackground,
|
||||
},
|
||||
headerMetaInfo: {
|
||||
display: 'flex',
|
||||
alignItems: 'stretch',
|
||||
marginLeft: theme.spacing(1),
|
||||
[theme.breakpoints.down(710)]: {
|
||||
marginLeft: 0,
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
},
|
||||
},
|
||||
headerContainer: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
[theme.breakpoints.down(710)]: {
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
position: 'relative',
|
||||
},
|
||||
},
|
||||
headerValuesContainerWrapper: {
|
||||
display: 'flex',
|
||||
alignItems: 'stretch',
|
||||
margin: 'auto 0',
|
||||
},
|
||||
headerValuesContainer: {
|
||||
display: 'flex',
|
||||
justifyContent: 'stretch',
|
||||
margin: 'auto 0',
|
||||
flexDirection: 'column',
|
||||
marginLeft: theme.spacing(1),
|
||||
[theme.breakpoints.down(710)]: {
|
||||
marginLeft: 0,
|
||||
},
|
||||
},
|
||||
headerValues: {
|
||||
fontSize: theme.fontSizes.smallBody,
|
||||
},
|
||||
headerValuesExpand: {
|
||||
fontSize: theme.fontSizes.smallBody,
|
||||
marginTop: '4px',
|
||||
color: theme.palette.primary.dark,
|
||||
[theme.breakpoints.down(710)]: {
|
||||
textAlign: 'center',
|
||||
},
|
||||
},
|
||||
headerConstraintContainer: {
|
||||
minWidth: '152px',
|
||||
position: 'relative',
|
||||
[theme.breakpoints.down(710)]: {
|
||||
paddingRight: 0,
|
||||
},
|
||||
},
|
||||
editingBadge: {
|
||||
borderRadius: theme.shape.borderRadiusExtraLarge,
|
||||
padding: '0.25rem 0.5rem',
|
||||
@ -135,7 +94,7 @@ export const useStyles = makeStyles()(theme => ({
|
||||
headerActions: {
|
||||
marginLeft: 'auto',
|
||||
whiteSpace: 'nowrap',
|
||||
[theme.breakpoints.down(710)]: {
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
|
@ -15,7 +15,7 @@ import { resolveText } from './helpers';
|
||||
import { oneOf } from 'utils/oneOf';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Operator } from 'constants/operators';
|
||||
import { ConstraintOperatorSelect } from 'component/common/ConstraintAccordion/ConstraintOperatorSelect/ConstraintOperatorSelect';
|
||||
import { ConstraintOperatorSelect } from 'component/common/ConstraintAccordion/ConstraintOperatorSelect';
|
||||
import {
|
||||
operatorsForContext,
|
||||
CURRENT_TIME_CONTEXT_FIELD,
|
||||
|
@ -1,20 +1,36 @@
|
||||
import { Chip } from '@mui/material';
|
||||
import { Chip, styled } from '@mui/material';
|
||||
import StringTruncator from 'component/common/StringTruncator/StringTruncator';
|
||||
import { useStyles } from '../ConstraintAccordionViewBody.style';
|
||||
|
||||
interface ISingleValueProps {
|
||||
value: string | undefined;
|
||||
operator: string;
|
||||
}
|
||||
|
||||
const StyledDiv = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
[theme.breakpoints.down(600)]: { flexDirection: 'column' },
|
||||
}));
|
||||
|
||||
const StyledParagraph = styled('p')(({ theme }) => ({
|
||||
marginRight: theme.spacing(1.5),
|
||||
[theme.breakpoints.down(600)]: {
|
||||
marginBottom: theme.spacing(1.5),
|
||||
marginRight: 0,
|
||||
},
|
||||
}));
|
||||
|
||||
const StyledChip = styled(Chip)(({ theme }) => ({
|
||||
margin: theme.spacing(0, 1, 1, 0),
|
||||
}));
|
||||
|
||||
export const SingleValue = ({ value, operator }: ISingleValueProps) => {
|
||||
const { classes: styles } = useStyles();
|
||||
if (!value) return null;
|
||||
|
||||
return (
|
||||
<div className={styles.singleValueView}>
|
||||
<p className={styles.singleValueText}>Value must be {operator}</p>{' '}
|
||||
<Chip
|
||||
<StyledDiv>
|
||||
<StyledParagraph>Value must be {operator}</StyledParagraph>{' '}
|
||||
<StyledChip
|
||||
label={
|
||||
<StringTruncator
|
||||
maxWidth="400"
|
||||
@ -22,8 +38,7 @@ export const SingleValue = ({ value, operator }: ISingleValueProps) => {
|
||||
maxLength={50}
|
||||
/>
|
||||
}
|
||||
className={styles.chip}
|
||||
/>
|
||||
</div>
|
||||
</StyledDiv>
|
||||
);
|
||||
};
|
||||
|
@ -1,6 +1,6 @@
|
||||
import { ConstraintIcon } from 'component/common/ConstraintAccordion/ConstraintIcon';
|
||||
import { IConstraint } from 'interfaces/strategy';
|
||||
import { ConstraintAccordionViewHeaderInfo } from './ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo';
|
||||
import { ConstraintAccordionViewHeaderInfo } from './ConstraintAccordionViewHeaderInfo';
|
||||
import { ConstraintAccordionHeaderActions } from '../../ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions';
|
||||
import { useStyles } from 'component/common/ConstraintAccordion/ConstraintAccordion.styles';
|
||||
|
||||
|
@ -1,11 +1,10 @@
|
||||
import { styled, Tooltip } from '@mui/material';
|
||||
import { ConstraintViewHeaderOperator } from '../ConstraintViewHeaderOperator/ConstraintViewHeaderOperator';
|
||||
import { Divider, styled, Tooltip } from '@mui/material';
|
||||
import { ConstraintViewHeaderOperator } from './ConstraintViewHeaderOperator';
|
||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||
import { ConstraintAccordionViewHeaderSingleValue } from '../ContraintAccordionViewHeaderSingleValue/ConstraintAccordionViewHeaderSingleValue';
|
||||
import { ConstraintAccordionViewHeaderMultipleValues } from '../ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues';
|
||||
import { ConstraintAccordionViewHeaderSingleValue } from './ConstraintAccordionViewHeaderSingleValue';
|
||||
import { ConstraintAccordionViewHeaderMultipleValues } from './ConstraintAccordionViewHeaderMultipleValues';
|
||||
import React from 'react';
|
||||
import { IConstraint } from 'interfaces/strategy';
|
||||
import { useStyles } from '../../../ConstraintAccordion.styles';
|
||||
|
||||
const StyledHeaderText = styled('span')(({ theme }) => ({
|
||||
display: '-webkit-box',
|
||||
@ -34,6 +33,18 @@ const StyledHeaderWrapper = styled('div')(({ theme }) => ({
|
||||
borderRadius: theme.spacing(1),
|
||||
}));
|
||||
|
||||
const StyledHeaderMetaInfo = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'stretch',
|
||||
marginLeft: theme.spacing(1),
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
marginLeft: 0,
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
},
|
||||
}));
|
||||
|
||||
interface ConstraintAccordionViewHeaderMetaInfoProps {
|
||||
constraint: IConstraint;
|
||||
singleValue: boolean;
|
||||
@ -49,11 +60,9 @@ export const ConstraintAccordionViewHeaderInfo = ({
|
||||
expanded,
|
||||
maxLength = 112, //The max number of characters in the values text for NOT allowing expansion
|
||||
}: ConstraintAccordionViewHeaderMetaInfoProps) => {
|
||||
const { classes: styles } = useStyles();
|
||||
|
||||
return (
|
||||
<StyledHeaderWrapper>
|
||||
<div className={styles.headerMetaInfo}>
|
||||
<StyledHeaderMetaInfo>
|
||||
<Tooltip title={constraint.contextName} arrow>
|
||||
<StyledHeaderText>
|
||||
{constraint.contextName}
|
||||
@ -77,7 +86,7 @@ export const ConstraintAccordionViewHeaderInfo = ({
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</StyledHeaderMetaInfo>
|
||||
</StyledHeaderWrapper>
|
||||
);
|
||||
};
|
@ -3,7 +3,6 @@ import { styled } from '@mui/material';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import classnames from 'classnames';
|
||||
import { IConstraint } from 'interfaces/strategy';
|
||||
import { useStyles } from '../../../ConstraintAccordion.styles';
|
||||
|
||||
const StyledValuesSpan = styled('span')(({ theme }) => ({
|
||||
display: '-webkit-box',
|
||||
@ -13,7 +12,7 @@ const StyledValuesSpan = styled('span')(({ theme }) => ({
|
||||
wordBreak: 'break-word',
|
||||
fontSize: theme.fontSizes.smallBody,
|
||||
margin: 'auto 0',
|
||||
[theme.breakpoints.down(710)]: {
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
margin: theme.spacing(1, 0),
|
||||
textAlign: 'center',
|
||||
},
|
||||
@ -26,14 +25,38 @@ interface ConstraintSingleValueProps {
|
||||
allowExpand: (shouldExpand: boolean) => void;
|
||||
}
|
||||
|
||||
const StyledHeaderValuesContainerWrapper = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'stretch',
|
||||
margin: 'auto 0',
|
||||
}));
|
||||
|
||||
const StyledHeaderValuesContainer = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
justifyContent: 'stretch',
|
||||
margin: 'auto 0',
|
||||
flexDirection: 'column',
|
||||
marginLeft: theme.spacing(1),
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
marginLeft: 0,
|
||||
},
|
||||
}));
|
||||
|
||||
const StyledHeaderValuesExpand = styled('p')(({ theme }) => ({
|
||||
fontSize: theme.fontSizes.smallBody,
|
||||
marginTop: theme.spacing(0.5),
|
||||
color: theme.palette.primary.dark,
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
textAlign: 'center',
|
||||
},
|
||||
}));
|
||||
|
||||
export const ConstraintAccordionViewHeaderMultipleValues = ({
|
||||
constraint,
|
||||
expanded,
|
||||
allowExpand,
|
||||
maxLength,
|
||||
}: ConstraintSingleValueProps) => {
|
||||
const { classes: styles } = useStyles();
|
||||
|
||||
const [expandable, setExpandable] = useState(false);
|
||||
|
||||
const text = useMemo(() => {
|
||||
@ -48,25 +71,22 @@ export const ConstraintAccordionViewHeaderMultipleValues = ({
|
||||
}, [text, maxLength, allowExpand, setExpandable]);
|
||||
|
||||
return (
|
||||
<div className={styles.headerValuesContainerWrapper}>
|
||||
<div className={styles.headerValuesContainer}>
|
||||
<StyledHeaderValuesContainerWrapper>
|
||||
<StyledHeaderValuesContainer>
|
||||
<StyledValuesSpan>{text}</StyledValuesSpan>
|
||||
<ConditionallyRender
|
||||
condition={expandable}
|
||||
show={
|
||||
<p
|
||||
className={classnames(
|
||||
styles.headerValuesExpand,
|
||||
'valuesExpandLabel'
|
||||
)}
|
||||
<StyledHeaderValuesExpand
|
||||
className={'valuesExpandLabel'}
|
||||
>
|
||||
{!expanded
|
||||
? `View all (${constraint?.values?.length})`
|
||||
: 'View less'}
|
||||
</p>
|
||||
</StyledHeaderValuesExpand>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</StyledHeaderValuesContainer>
|
||||
</StyledHeaderValuesContainerWrapper>
|
||||
);
|
||||
};
|
@ -1,14 +1,13 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { Chip, styled } from '@mui/material';
|
||||
import { formatConstraintValue } from 'utils/formatConstraintValue';
|
||||
import { useStyles } from '../../../ConstraintAccordion.styles';
|
||||
import { IConstraint } from 'interfaces/strategy';
|
||||
import { useLocationSettings } from 'hooks/useLocationSettings';
|
||||
|
||||
const StyledSingleValueChip = styled(Chip)(({ theme }) => ({
|
||||
margin: 'auto 0',
|
||||
marginLeft: theme.spacing(1),
|
||||
[theme.breakpoints.down(710)]: {
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
margin: theme.spacing(1, 0),
|
||||
},
|
||||
}));
|
||||
@ -18,22 +17,27 @@ interface ConstraintSingleValueProps {
|
||||
allowExpand: (shouldExpand: boolean) => void;
|
||||
}
|
||||
|
||||
const StyledHeaderValuesContainerWrapper = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'stretch',
|
||||
margin: 'auto 0',
|
||||
}));
|
||||
|
||||
export const ConstraintAccordionViewHeaderSingleValue = ({
|
||||
constraint,
|
||||
allowExpand,
|
||||
}: ConstraintSingleValueProps) => {
|
||||
const { locationSettings } = useLocationSettings();
|
||||
const { classes: styles } = useStyles();
|
||||
|
||||
useEffect(() => {
|
||||
allowExpand(false);
|
||||
}, [allowExpand]);
|
||||
|
||||
return (
|
||||
<div className={styles.headerValuesContainerWrapper}>
|
||||
<StyledHeaderValuesContainerWrapper>
|
||||
<StyledSingleValueChip
|
||||
label={formatConstraintValue(constraint, locationSettings)}
|
||||
/>
|
||||
</div>
|
||||
</StyledHeaderValuesContainerWrapper>
|
||||
);
|
||||
};
|
@ -1,11 +1,10 @@
|
||||
import { IConstraint } from 'interfaces/strategy';
|
||||
import { ConditionallyRender } from '../../../../ConditionallyRender/ConditionallyRender';
|
||||
import { Tooltip, Box } from '@mui/material';
|
||||
import { ConditionallyRender } from '../../../ConditionallyRender/ConditionallyRender';
|
||||
import { Tooltip, Box, styled } from '@mui/material';
|
||||
import { stringOperators } from 'constants/operators';
|
||||
import { ReactComponent as NegatedIcon } from 'assets/icons/24_Negator.svg';
|
||||
import { ConstraintOperator } from '../../../ConstraintOperator/ConstraintOperator';
|
||||
import { useStyles } from '../../../ConstraintAccordion.styles';
|
||||
import { StyledIconWrapper } from '../StyledIconWrapper/StyledIconWrapper';
|
||||
import { ConstraintOperator } from '../../ConstraintOperator/ConstraintOperator';
|
||||
import { StyledIconWrapper } from './StyledIconWrapper';
|
||||
import { ReactComponent as CaseSensitive } from 'assets/icons/24_Text format.svg';
|
||||
import { oneOf } from 'utils/oneOf';
|
||||
|
||||
@ -13,13 +12,25 @@ interface ConstraintViewHeaderOperatorProps {
|
||||
constraint: IConstraint;
|
||||
}
|
||||
|
||||
const StyledHeaderValuesContainerWrapper = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'stretch',
|
||||
margin: 'auto 0',
|
||||
}));
|
||||
|
||||
const StyledHeaderConstraintContainer = styled('div')(({ theme }) => ({
|
||||
minWidth: '152px',
|
||||
position: 'relative',
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
paddingRight: 0,
|
||||
},
|
||||
}));
|
||||
|
||||
export const ConstraintViewHeaderOperator = ({
|
||||
constraint,
|
||||
}: ConstraintViewHeaderOperatorProps) => {
|
||||
const { classes: styles } = useStyles();
|
||||
|
||||
return (
|
||||
<div className={styles.headerValuesContainerWrapper}>
|
||||
<StyledHeaderValuesContainerWrapper>
|
||||
<ConditionallyRender
|
||||
condition={Boolean(constraint.inverted)}
|
||||
show={
|
||||
@ -32,12 +43,12 @@ export const ConstraintViewHeaderOperator = ({
|
||||
</Tooltip>
|
||||
}
|
||||
/>
|
||||
<div className={styles.headerConstraintContainer}>
|
||||
<StyledHeaderConstraintContainer>
|
||||
<ConstraintOperator
|
||||
constraint={constraint}
|
||||
hasPrefix={Boolean(constraint.inverted)}
|
||||
/>
|
||||
</div>
|
||||
</StyledHeaderConstraintContainer>
|
||||
<ConditionallyRender
|
||||
condition={
|
||||
!Boolean(constraint.caseInsensitive) &&
|
||||
@ -51,6 +62,6 @@ export const ConstraintViewHeaderOperator = ({
|
||||
</Tooltip>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</StyledHeaderValuesContainerWrapper>
|
||||
);
|
||||
};
|
@ -1,31 +0,0 @@
|
||||
import { makeStyles } from 'tss-react/mui';
|
||||
|
||||
export const useStyles = makeStyles()(theme => ({
|
||||
container: {
|
||||
padding: theme.spacing(0.5, 1.5),
|
||||
borderRadius: theme.shape.borderRadius,
|
||||
backgroundColor: theme.palette.constraintAccordion.operatorBackground,
|
||||
lineHeight: 1.25,
|
||||
},
|
||||
name: {
|
||||
fontSize: theme.fontSizes.smallBody,
|
||||
lineHeight: 17 / 14,
|
||||
},
|
||||
text: {
|
||||
fontSize: theme.fontSizes.smallerBody,
|
||||
color: theme.palette.grey[700],
|
||||
},
|
||||
not: {
|
||||
display: 'block',
|
||||
margin: '-1rem 0 0.25rem 0',
|
||||
height: '1rem',
|
||||
'& > span': {
|
||||
display: 'inline-block',
|
||||
padding: '0 0.25rem',
|
||||
borderRadius: theme.shape.borderRadius,
|
||||
fontSize: theme.fontSizes.smallerBody,
|
||||
backgroundColor: theme.palette.primary.light,
|
||||
color: 'white',
|
||||
},
|
||||
},
|
||||
}));
|
@ -1,33 +1,47 @@
|
||||
import { IConstraint } from 'interfaces/strategy';
|
||||
import { formatOperatorDescription } from 'component/common/ConstraintAccordion/ConstraintOperator/formatOperatorDescription';
|
||||
import { useStyles } from 'component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.styles';
|
||||
import React from 'react';
|
||||
import { styled } from '@mui/material';
|
||||
|
||||
interface IConstraintOperatorProps {
|
||||
constraint: IConstraint;
|
||||
hasPrefix?: boolean;
|
||||
}
|
||||
|
||||
const StyledContainer = styled('div')(({ theme }) => ({
|
||||
padding: theme.spacing(0.5, 1.5),
|
||||
borderRadius: theme.shape.borderRadius,
|
||||
backgroundColor: theme.palette.constraintAccordion.operatorBackground,
|
||||
lineHeight: 1.25,
|
||||
}));
|
||||
|
||||
const StyledName = styled('div')(({ theme }) => ({
|
||||
fontSize: theme.fontSizes.smallBody,
|
||||
lineHeight: 17 / 14,
|
||||
}));
|
||||
|
||||
const StyledText = styled('div')(({ theme }) => ({
|
||||
fontSize: theme.fontSizes.smallerBody,
|
||||
color: theme.palette.neutral.main,
|
||||
}));
|
||||
|
||||
export const ConstraintOperator = ({
|
||||
constraint,
|
||||
hasPrefix,
|
||||
}: IConstraintOperatorProps) => {
|
||||
const { classes: styles } = useStyles();
|
||||
|
||||
const operatorName = constraint.operator;
|
||||
const operatorText = formatOperatorDescription(constraint.operator);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={styles.container}
|
||||
<StyledContainer
|
||||
style={{
|
||||
borderTopLeftRadius: hasPrefix ? 0 : undefined,
|
||||
borderBottomLeftRadius: hasPrefix ? 0 : undefined,
|
||||
paddingLeft: hasPrefix ? 0 : undefined,
|
||||
}}
|
||||
>
|
||||
<div className={styles.name}>{operatorName}</div>
|
||||
<div className={styles.text}>{operatorText}</div>
|
||||
</div>
|
||||
<StyledName>{operatorName}</StyledName>
|
||||
<StyledText>{operatorText}</StyledText>
|
||||
</StyledContainer>
|
||||
);
|
||||
};
|
||||
|
@ -0,0 +1,150 @@
|
||||
import {
|
||||
Select,
|
||||
MenuItem,
|
||||
FormControl,
|
||||
InputLabel,
|
||||
SelectChangeEvent,
|
||||
styled,
|
||||
Box,
|
||||
} from '@mui/material';
|
||||
import {
|
||||
Operator,
|
||||
stringOperators,
|
||||
semVerOperators,
|
||||
dateOperators,
|
||||
numOperators,
|
||||
inOperators,
|
||||
} from 'constants/operators';
|
||||
import React, { useState } from 'react';
|
||||
import { formatOperatorDescription } from 'component/common/ConstraintAccordion/ConstraintOperator/formatOperatorDescription';
|
||||
import classNames from 'classnames';
|
||||
|
||||
interface IConstraintOperatorSelectProps {
|
||||
options: Operator[];
|
||||
value: Operator;
|
||||
onChange: (value: Operator) => void;
|
||||
}
|
||||
|
||||
const StyledValueContainer = styled('div')(({ theme }) => ({
|
||||
lineHeight: 1.1,
|
||||
marginTop: -2,
|
||||
marginBottom: -10,
|
||||
}));
|
||||
|
||||
const StyledLabel = styled('div')(({ theme }) => ({
|
||||
fontSize: theme.fontSizes.smallBody,
|
||||
}));
|
||||
|
||||
const StyledDescription = styled('div')(({ theme }) => ({
|
||||
fontSize: theme.fontSizes.smallerBody,
|
||||
color: theme.palette.neutral.main,
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis',
|
||||
}));
|
||||
|
||||
const StyledFormInput = styled(FormControl)(({ theme }) => ({
|
||||
[theme.breakpoints.between(1101, 1365)]: {
|
||||
width: '170px',
|
||||
marginRight: theme.spacing(0.5),
|
||||
},
|
||||
}));
|
||||
|
||||
const StyledMenuItem = styled(MenuItem, {
|
||||
shouldForwardProp: prop => prop !== 'separator',
|
||||
})<{ separator: boolean }>(({ theme, separator }) =>
|
||||
separator
|
||||
? {
|
||||
position: 'relative',
|
||||
overflow: 'visible',
|
||||
marginTop: theme.spacing(2),
|
||||
'&:before': {
|
||||
content: '""',
|
||||
display: 'block',
|
||||
position: 'absolute',
|
||||
top: theme.spacing(-1),
|
||||
left: 0,
|
||||
right: 0,
|
||||
borderTop: '1px solid',
|
||||
borderTopColor: theme.palette.tertiary.contrast,
|
||||
},
|
||||
}
|
||||
: {}
|
||||
);
|
||||
|
||||
const StyledOptionContainer = styled('div')(({ theme }) => ({
|
||||
lineHeight: 1.2,
|
||||
}));
|
||||
|
||||
export const ConstraintOperatorSelect = ({
|
||||
options,
|
||||
value,
|
||||
onChange,
|
||||
}: IConstraintOperatorSelectProps) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const onSelectChange = (event: SelectChangeEvent) => {
|
||||
onChange(event.target.value as Operator);
|
||||
};
|
||||
|
||||
const renderValue = () => {
|
||||
return (
|
||||
<StyledValueContainer>
|
||||
<StyledLabel>{value}</StyledLabel>
|
||||
<StyledDescription>
|
||||
{formatOperatorDescription(value)}
|
||||
</StyledDescription>
|
||||
</StyledValueContainer>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledFormInput variant="outlined" size="small" fullWidth>
|
||||
<InputLabel htmlFor="operator-select">Operator</InputLabel>
|
||||
<Select
|
||||
id="operator-select"
|
||||
name="operator"
|
||||
label="Operator"
|
||||
value={value}
|
||||
open={open}
|
||||
onOpen={() => setOpen(true)}
|
||||
onClose={() => setOpen(false)}
|
||||
onChange={onSelectChange}
|
||||
renderValue={renderValue}
|
||||
>
|
||||
{options.map(operator => (
|
||||
<StyledMenuItem
|
||||
key={operator}
|
||||
value={operator}
|
||||
separator={needSeparatorAbove(options, operator)}
|
||||
>
|
||||
<StyledOptionContainer>
|
||||
<StyledLabel>{operator}</StyledLabel>
|
||||
<StyledDescription>
|
||||
{formatOperatorDescription(operator)}
|
||||
</StyledDescription>
|
||||
</StyledOptionContainer>
|
||||
</StyledMenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</StyledFormInput>
|
||||
);
|
||||
};
|
||||
|
||||
const needSeparatorAbove = (options: Operator[], option: Operator): boolean => {
|
||||
if (option === options[0]) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return operatorGroups.some(group => {
|
||||
return group[0] === option;
|
||||
});
|
||||
};
|
||||
|
||||
const operatorGroups = [
|
||||
inOperators,
|
||||
stringOperators,
|
||||
numOperators,
|
||||
dateOperators,
|
||||
semVerOperators,
|
||||
];
|
@ -1,43 +0,0 @@
|
||||
import { makeStyles } from 'tss-react/mui';
|
||||
|
||||
export const useStyles = makeStyles()(theme => ({
|
||||
valueContainer: {
|
||||
lineHeight: 1.1,
|
||||
marginTop: -2,
|
||||
marginBottom: -10,
|
||||
},
|
||||
optionContainer: {
|
||||
lineHeight: 1.2,
|
||||
},
|
||||
label: {
|
||||
fontSize: theme.fontSizes.smallBody,
|
||||
},
|
||||
description: {
|
||||
fontSize: theme.fontSizes.smallerBody,
|
||||
color: theme.palette.grey[700],
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis',
|
||||
},
|
||||
separator: {
|
||||
position: 'relative',
|
||||
overflow: 'visible',
|
||||
marginTop: '1rem',
|
||||
'&:before': {
|
||||
content: '""',
|
||||
display: 'block',
|
||||
position: 'absolute',
|
||||
top: '-0.5rem',
|
||||
left: 0,
|
||||
right: 0,
|
||||
borderTop: '1px solid',
|
||||
borderTopColor: theme.palette.grey[300],
|
||||
},
|
||||
},
|
||||
formInput: {
|
||||
[theme.breakpoints.between(1101, 1365)]: {
|
||||
width: '170px',
|
||||
marginRight: '8px',
|
||||
},
|
||||
},
|
||||
}));
|
@ -1,107 +0,0 @@
|
||||
import {
|
||||
Select,
|
||||
MenuItem,
|
||||
FormControl,
|
||||
InputLabel,
|
||||
SelectChangeEvent,
|
||||
} from '@mui/material';
|
||||
import {
|
||||
Operator,
|
||||
stringOperators,
|
||||
semVerOperators,
|
||||
dateOperators,
|
||||
numOperators,
|
||||
inOperators,
|
||||
} from 'constants/operators';
|
||||
import React, { useState } from 'react';
|
||||
import { formatOperatorDescription } from 'component/common/ConstraintAccordion/ConstraintOperator/formatOperatorDescription';
|
||||
import { useStyles } from 'component/common/ConstraintAccordion/ConstraintOperatorSelect/ConstraintOperatorSelect.styles';
|
||||
import classNames from 'classnames';
|
||||
|
||||
interface IConstraintOperatorSelectProps {
|
||||
options: Operator[];
|
||||
value: Operator;
|
||||
onChange: (value: Operator) => void;
|
||||
}
|
||||
|
||||
export const ConstraintOperatorSelect = ({
|
||||
options,
|
||||
value,
|
||||
onChange,
|
||||
}: IConstraintOperatorSelectProps) => {
|
||||
const { classes: styles } = useStyles();
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const onSelectChange = (event: SelectChangeEvent) => {
|
||||
onChange(event.target.value as Operator);
|
||||
};
|
||||
|
||||
const renderValue = () => {
|
||||
return (
|
||||
<div className={styles.valueContainer}>
|
||||
<div className={styles.label}>{value}</div>
|
||||
<div className={styles.description}>
|
||||
{formatOperatorDescription(value)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<FormControl
|
||||
variant="outlined"
|
||||
size="small"
|
||||
fullWidth
|
||||
className={styles.formInput}
|
||||
>
|
||||
<InputLabel htmlFor="operator-select">Operator</InputLabel>
|
||||
<Select
|
||||
id="operator-select"
|
||||
name="operator"
|
||||
label="Operator"
|
||||
value={value}
|
||||
open={open}
|
||||
onOpen={() => setOpen(true)}
|
||||
onClose={() => setOpen(false)}
|
||||
onChange={onSelectChange}
|
||||
renderValue={renderValue}
|
||||
>
|
||||
{options.map(operator => (
|
||||
<MenuItem
|
||||
key={operator}
|
||||
value={operator}
|
||||
className={classNames(
|
||||
needSeparatorAbove(options, operator) &&
|
||||
styles.separator
|
||||
)}
|
||||
>
|
||||
<div className={styles.optionContainer}>
|
||||
<div className={styles.label}>{operator}</div>
|
||||
<div className={styles.description}>
|
||||
{formatOperatorDescription(operator)}
|
||||
</div>
|
||||
</div>
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
);
|
||||
};
|
||||
|
||||
const needSeparatorAbove = (options: Operator[], option: Operator): boolean => {
|
||||
if (option === options[0]) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return operatorGroups.some(group => {
|
||||
return group[0] === option;
|
||||
});
|
||||
};
|
||||
|
||||
const operatorGroups = [
|
||||
inOperators,
|
||||
stringOperators,
|
||||
numOperators,
|
||||
dateOperators,
|
||||
semVerOperators,
|
||||
];
|
@ -1,21 +0,0 @@
|
||||
import { makeStyles } from 'tss-react/mui';
|
||||
|
||||
export const useStyles = makeStyles()(theme => ({
|
||||
container: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: '1rem auto',
|
||||
},
|
||||
wing: {
|
||||
width: '80px',
|
||||
height: '3px',
|
||||
backgroundColor: theme.palette.divider,
|
||||
borderRadius: theme.shape.borderRadius,
|
||||
},
|
||||
text: {
|
||||
textAlign: 'center',
|
||||
display: 'block',
|
||||
margin: '0 1rem',
|
||||
},
|
||||
}));
|
@ -1,21 +1,35 @@
|
||||
import { Typography } from '@mui/material';
|
||||
import { useStyles } from 'component/common/DividerText/DividerText.styles';
|
||||
|
||||
import { FormControl, styled, Typography } from '@mui/material';
|
||||
interface IDividerTextProps {
|
||||
text: string;
|
||||
}
|
||||
|
||||
const DividerText = ({ text, ...rest }: IDividerTextProps) => {
|
||||
const { classes: styles } = useStyles();
|
||||
const StyledContainer = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: theme.spacing(2, 'auto'),
|
||||
}));
|
||||
|
||||
const StyledSpan = styled('span')(({ theme }) => ({
|
||||
width: '80px',
|
||||
height: '3px',
|
||||
backgroundColor: theme.palette.divider,
|
||||
borderRadius: theme.shape.borderRadius,
|
||||
}));
|
||||
|
||||
const StyleTypography = styled(Typography)(({ theme }) => ({
|
||||
textAlign: 'center',
|
||||
display: 'block',
|
||||
margin: theme.spacing(0, 2),
|
||||
}));
|
||||
|
||||
const DividerText = ({ text, ...rest }: IDividerTextProps) => {
|
||||
return (
|
||||
<div className={styles.container} {...rest}>
|
||||
<span className={styles.wing} />
|
||||
<Typography variant="body2" className={styles.text}>
|
||||
{text}
|
||||
</Typography>
|
||||
<span className={styles.wing} />
|
||||
</div>
|
||||
<StyledContainer {...rest}>
|
||||
<StyledSpan />
|
||||
<StyleTypography variant="body2">{text}</StyleTypography>
|
||||
<StyledSpan />
|
||||
</StyledContainer>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -1,8 +0,0 @@
|
||||
import { makeStyles } from 'tss-react/mui';
|
||||
|
||||
export const useStyles = makeStyles()(theme => ({
|
||||
infoText: {
|
||||
marginBottom: '10px',
|
||||
fontSize: theme.fontSizes.bodySize,
|
||||
},
|
||||
}));
|
@ -2,8 +2,8 @@ import { useNavigate } from 'react-router-dom';
|
||||
import { CREATE_FEATURE_STRATEGY } from 'component/providers/AccessProvider/permissions';
|
||||
import { Dialogue } from 'component/common/Dialogue/Dialogue';
|
||||
import PermissionButton from '../PermissionButton/PermissionButton';
|
||||
import { useStyles } from './EnvironmentStrategyDialog.styles';
|
||||
import { formatCreateStrategyPath } from 'component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate';
|
||||
import { FormControl, styled } from '@mui/material';
|
||||
|
||||
interface IEnvironmentStrategyDialogProps {
|
||||
open: boolean;
|
||||
@ -12,6 +12,11 @@ interface IEnvironmentStrategyDialogProps {
|
||||
onClose: () => void;
|
||||
environmentName: string;
|
||||
}
|
||||
|
||||
const StyledParagraph = styled('p')(({ theme }) => ({
|
||||
marginBottom: theme.spacing(0.5),
|
||||
fontSize: theme.fontSizes.bodySize,
|
||||
}));
|
||||
const EnvironmentStrategyDialog = ({
|
||||
open,
|
||||
environmentName,
|
||||
@ -19,7 +24,6 @@ const EnvironmentStrategyDialog = ({
|
||||
projectId,
|
||||
onClose,
|
||||
}: IEnvironmentStrategyDialogProps) => {
|
||||
const { classes: styles } = useStyles();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const createStrategyPath = formatCreateStrategyPath(
|
||||
@ -54,14 +58,14 @@ const EnvironmentStrategyDialog = ({
|
||||
}
|
||||
secondaryButtonText="Cancel"
|
||||
>
|
||||
<p className={styles.infoText}>
|
||||
<StyledParagraph>
|
||||
Before you can enable the toggle in the environment, you need to
|
||||
add an activation strategy.
|
||||
</p>
|
||||
<p className={styles.infoText}>
|
||||
</StyledParagraph>
|
||||
<StyledParagraph>
|
||||
You can add the activation strategy by selecting the toggle,
|
||||
open the environment accordion and add the activation strategy.
|
||||
</p>
|
||||
</StyledParagraph>
|
||||
</Dialogue>
|
||||
);
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user