Merge branch 'main' into task/Add_strategy_information_to_playground_results

frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/CopyButton/CopyButton.tsx

@@ -0,0 +1,106 @@
+import { MouseEvent, useContext, useState, VFC } from 'react';
+import {
+    Button,
+    ListItemIcon,
+    ListItemText,
+    Menu,
+    MenuItem,
+    Tooltip,
+} from '@mui/material';
+import { Lock } from '@mui/icons-material';
+import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
+import { IFeatureEnvironment } from 'interfaces/featureToggle';
+import AccessContext from 'contexts/AccessContext';
+import { CREATE_FEATURE_STRATEGY } from 'component/providers/AccessProvider/permissions';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+
+interface ICopyButtonProps {
+    environmentId: IFeatureEnvironment['name'];
+    environments: IFeatureEnvironment['name'][];
+    onClick: (environmentId: string) => void;
+}
+
+export const CopyButton: VFC<ICopyButtonProps> = ({
+    environmentId,
+    environments,
+    onClick,
+}) => {
+    const projectId = useRequiredPathParam('projectId');
+    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+    const open = Boolean(anchorEl);
+    const { hasAccess } = useContext(AccessContext);
+    const enabled = environments.some(environment =>
+        hasAccess(CREATE_FEATURE_STRATEGY, projectId, environment)
+    );
+
+    return (
+        <div>
+            <Tooltip title={enabled ? '' : '(Access denied)'}>
+                <div>
+                    <Button
+                        id={`copy-all-strategies-${environmentId}`}
+                        aria-controls={open ? 'basic-menu' : undefined}
+                        aria-haspopup="true"
+                        aria-expanded={open ? 'true' : undefined}
+                        onClick={(event: MouseEvent<HTMLButtonElement>) => {
+                            setAnchorEl(event.currentTarget);
+                        }}
+                        disabled={!enabled}
+                        variant="outlined"
+                    >
+                        Copy from another environment
+                    </Button>
+                </div>
+            </Tooltip>
+            <Menu
+                id="basic-menu"
+                anchorEl={anchorEl}
+                open={open}
+                onClose={() => {
+                    setAnchorEl(null);
+                }}
+                MenuListProps={{
+                    'aria-labelledby': `copy-all-strategies-${environmentId}`,
+                }}
+            >
+                {environments.map(environment => {
+                    const access = hasAccess(
+                        CREATE_FEATURE_STRATEGY,
+                        projectId,
+                        environment
+                    );
+
+                    return (
+                        <Tooltip
+                            title={
+                                access
+                                    ? ''
+                                    : "You don't have access to add a strategy to this environment"
+                            }
+                            key={environment}
+                        >
+                            <div>
+                                <MenuItem
+                                    onClick={() => onClick(environment)}
+                                    disabled={!access}
+                                >
+                                    <ConditionallyRender
+                                        condition={!access}
+                                        show={
+                                            <ListItemIcon>
+                                                <Lock fontSize="small" />
+                                            </ListItemIcon>
+                                        }
+                                    />
+                                    <ListItemText>
+                                        Copy from {environment}
+                                    </ListItemText>
+                                </MenuItem>
+                            </div>
+                        </Tooltip>
+                    );
+                })}
+            </Menu>
+        </div>
+    );
+};

frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.tsx

@@ -10,6 +10,8 @@ import { useStyles } from './FeatureStrategyEmpty.styles';
 import { formatUnknownError } from 'utils/formatUnknownError';
 import { useFeatureImmutable } from 'hooks/api/getters/useFeature/useFeatureImmutable';
 import { getFeatureStrategyIcon } from 'utils/strategyNames';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { CopyButton } from './CopyButton/CopyButton';
 
 interface IFeatureStrategyEmptyProps {
     projectId: string;
@@ -30,18 +32,55 @@ export const FeatureStrategyEmpty = ({
         projectId,
         featureId
     );
+    const { feature } = useFeature(projectId, featureId);
+    const otherAvailableEnvironments = feature?.environments.filter(
+        environment =>
+            environment.name !== environmentId &&
+            environment.strategies &&
+            environment.strategies.length > 0
+    );
 
-    const onAfterAddStrategy = () => {
+    const onAfterAddStrategy = (multiple = false) => {
         refetchFeature();
         refetchFeatureImmutable();
 
         setToastData({
-            title: 'Strategy created',
+            title: multiple ? 'Strategies created' : 'Strategy created',
-            text: 'Successfully created strategy',
+            text: multiple
+                ? 'Successfully copied from another environment'
+                : 'Successfully created strategy',
             type: 'success',
         });
     };
 
+    const onCopyStrategies = async (fromEnvironmentName: string) => {
+        const strategies =
+            otherAvailableEnvironments?.find(
+                environment => environment.name === fromEnvironmentName
+            )?.strategies || [];
+
+        try {
+            await Promise.all(
+                strategies.map(strategy => {
+                    const { id, ...strategyCopy } = {
+                        ...strategy,
+                        environment: environmentId,
+                    };
+
+                    return addStrategyToFeature(
+                        projectId,
+                        featureId,
+                        environmentId,
+                        strategyCopy
+                    );
+                })
+            );
+            onAfterAddStrategy(true);
+        } catch (error) {
+            setToastApiError(formatUnknownError(error));
+        }
+    };
+
     const onAddSimpleStrategy = async () => {
         try {
             await addStrategyToFeature(projectId, featureId, environmentId, {
@@ -82,12 +121,38 @@ export const FeatureStrategyEmpty = ({
                 <Link to="/admin/api">API key configured</Link> for this
                 environment.
             </p>
-            <FeatureStrategyMenu
+            <Box
-                label="Add your first strategy"
+                sx={{
-                projectId={projectId}
+                    w: '100%',
-                featureId={featureId}
+                    display: 'flex',
-                environmentId={environmentId}
+                    flexWrap: 'wrap',
-            />
+                    gap: 2,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}
+            >
+                <FeatureStrategyMenu
+                    label="Add your first strategy"
+                    projectId={projectId}
+                    featureId={featureId}
+                    environmentId={environmentId}
+                />
+                <ConditionallyRender
+                    condition={
+                        otherAvailableEnvironments &&
+                        otherAvailableEnvironments.length > 0
+                    }
+                    show={
+                        <CopyButton
+                            environmentId={environmentId}
+                            environments={otherAvailableEnvironments.map(
+                                environment => environment.name
+                            )}
+                            onClick={onCopyStrategies}
+                        />
+                    }
+                />
+            </Box>
             <Box sx={{ width: '100%', mt: 3 }}>
                 <SectionSeparator>Or use a strategy template</SectionSeparator>
             </Box>

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/CopyStrategyIconMenu/CopyStrategyIconMenu.tsx

@@ -40,10 +40,7 @@ export const CopyStrategyIconMenu: VFC<ICopyStrategyIconMenuProps> = ({
         projectId,
         featureId
     );
-    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+    const onClose = () => {
-        setAnchorEl(event.currentTarget);
-    };
-    const handleClose = () => {
         setAnchorEl(null);
     };
     const { hasAccess } = useContext(AccessContext);
@@ -70,7 +67,7 @@ export const CopyStrategyIconMenu: VFC<ICopyStrategyIconMenuProps> = ({
         } catch (error) {
             setToastApiError(formatUnknownError(error));
         }
-        handleClose();
+        onClose();
     };
 
     const enabled = environments.some(environment =>
@@ -87,11 +84,13 @@ export const CopyStrategyIconMenu: VFC<ICopyStrategyIconMenuProps> = ({
                 <div>
                     <IconButton
                         size="large"
-                        id="basic-button"
+                        id={`copy-strategy-icon-menu-${strategy.id}`}
                         aria-controls={open ? 'basic-menu' : undefined}
                         aria-haspopup="true"
                         aria-expanded={open ? 'true' : undefined}
-                        onClick={handleClick}
+                        onClick={(event: MouseEvent<HTMLButtonElement>) => {
+                            setAnchorEl(event.currentTarget);
+                        }}
                         disabled={!enabled}
                     >
                         <CopyIcon />
@@ -102,9 +101,9 @@ export const CopyStrategyIconMenu: VFC<ICopyStrategyIconMenuProps> = ({
                 id="basic-menu"
                 anchorEl={anchorEl}
                 open={open}
-                onClose={handleClose}
+                onClose={onClose}
                 MenuListProps={{
-                    'aria-labelledby': 'basic-button',
+                    'aria-labelledby': `copy-strategy-icon-menu-${strategy.id}`,
                 }}
             >
                 {environments.map(environment => {
@@ -136,7 +135,9 @@ export const CopyStrategyIconMenu: VFC<ICopyStrategyIconMenuProps> = ({
                                             </ListItemIcon>
                                         }
                                     />
-                                    <ListItemText>{environment}</ListItemText>
+                                    <ListItemText>
+                                        Copy to {environment}
+                                    </ListItemText>
                                 </MenuItem>
                             </div>
                         </Tooltip>

frontend/src/component/feature/StrategyTypes/GeneralStrategy/GeneralStrategy.styles.ts

@@ -1,13 +1,15 @@
 import { makeStyles } from 'tss-react/mui';
 
 export const useStyles = makeStyles()(theme => ({
+    container: {
+        display: 'grid',
+        gap: theme.spacing(4),
+    },
     helpText: {
-        color: 'rgba(0, 0, 0, 0.54)',
+        color: theme.palette.text.secondary,
         fontSize: theme.fontSizes.smallerBody,
         lineHeight: '14px',
-        margin: '0.5rem 0',
+        margin: 0,
-    },
+        marginTop: theme.spacing(1),
-    generalSection: {
-        margin: '1rem 0',
     },
 }));

frontend/src/component/feature/StrategyTypes/GeneralStrategy/GeneralStrategy.tsx

@@ -53,14 +53,13 @@ const GeneralStrategy = ({
     }
 
     return (
-        <>
+        <div className={styles.container}>
             {strategyDefinition.parameters.map(
                 ({ name, type, description, required }) => {
                     if (type === 'percentage') {
                         const value = parseParameterNumber(parameters[name]);
                         return (
                             <div key={name}>
-                                <br />
                                 <RolloutSlider
                                     name={name}
                                     onChange={onChangePercentage.bind(
@@ -103,7 +102,7 @@ const GeneralStrategy = ({
                             value.length > 0 ? !regex.test(value) : false;
 
                         return (
-                            <div key={name} className={styles.generalSection}>
+                            <div key={name}>
                                 <TextField
                                     error={error}
                                     helperText={
@@ -132,7 +131,7 @@ const GeneralStrategy = ({
                     } else if (type === 'boolean') {
                         const value = parseParameterString(parameters[name]);
                         return (
-                            <div key={name} style={{ padding: '20px 0' }}>
+                            <div key={name}>
                                 <Tooltip
                                     title={description}
                                     placement="right-end"
@@ -158,7 +157,7 @@ const GeneralStrategy = ({
                     } else {
                         const value = parseParameterString(parameters[name]);
                         return (
-                            <div key={name} className={styles.generalSection}>
+                            <div key={name}>
                                 <TextField
                                     rows={1}
                                     placeholder=""
@@ -185,7 +184,7 @@ const GeneralStrategy = ({
                     }
                 }
             )}
-        </>
+        </div>
     );
 };
 

frontend/src/component/feature/StrategyTypes/StrategyInputList/StrategyInputList.tsx

@@ -1,5 +1,12 @@
 import React, { ChangeEvent, useState } from 'react';
-import { Button, Chip, TextField, Typography } from '@mui/material';
+import {
+    Button,
+    Chip,
+    TextField,
+    Typography,
+    styled,
+    TextFieldProps,
+} from '@mui/material';
 import { Add } from '@mui/icons-material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { ADD_TO_STRATEGY_INPUT_LIST, STRATEGY_INPUT_LIST } from 'utils/testIds';
@@ -12,6 +19,21 @@ interface IStrategyInputList {
     disabled: boolean;
 }
 
+const Container = styled('div')(({ theme }) => ({
+    display: 'grid',
+    gap: theme.spacing(1),
+}));
+
+const ChipsList = styled('div')(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(1),
+}));
+
+const InputContainer = styled('div')(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(1),
+}));
+
 const StrategyInputList = ({
     name,
     list,
@@ -61,49 +83,42 @@ const StrategyInputList = ({
         );
     };
 
-    // @ts-expect-error
+    const onChange: TextFieldProps['onChange'] = event => {
-    const onChange = e => {
+        setInput(event.currentTarget.value);
-        setInput(e.currentTarget.value);
     };
 
     return (
-        <div>
+        <Container>
             <Typography variant="subtitle2" component="h2">
                 List of {name}
             </Typography>
-            <div
+            <ConditionallyRender
-                style={{
+                condition={list.length > 0}
-                    display: 'flex',
+                show={
-                    flexWrap: 'wrap',
+                    <ChipsList>
-                    margin: '10px 0',
+                        {list.map((entryValue, index) => (
-                }}
+                            <Chip
-            >
+                                key={index + entryValue}
-                {list.map((entryValue, index) => (
+                                label={
-                    <Chip
+                                    <StringTruncator
-                        key={index + entryValue}
+                                        maxWidth="300"
-                        label={
+                                        text={entryValue}
-                            <StringTruncator
+                                        maxLength={50}
-                                maxWidth="300"
+                                    />
-                                text={entryValue}
+                                }
-                                maxLength={50}
+                                onDelete={
+                                    disabled ? undefined : () => onClose(index)
+                                }
+                                title="Remove value"
                             />
-                        }
+                        ))}
-                        style={{ marginRight: '3px' }}
+                    </ChipsList>
-                        onDelete={disabled ? undefined : () => onClose(index)}
+                }
-                        title="Remove value"
+            />
-                    />
-                ))}
-            </div>
             <ConditionallyRender
                 condition={!disabled}
                 show={
-                    <div
+                    <InputContainer>
-                        style={{
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: '1rem',
-                        }}
-                    >
                         <TextField
                             name={`input_field`}
                             variant="outlined"
@@ -128,10 +143,10 @@ const StrategyInputList = ({
                         >
                             Add
                         </Button>
-                    </div>
+                    </InputContainer>
                 }
             />
-        </div>
+        </Container>
     );
 };