fix: improve UI, simplify code (#2505)

https://linear.app/unleash/issue/2-446/ui-simplify-design-with-some-improvements

frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsCard/EnvironmentVariantsCard.tsx

@@ -1,13 +1,11 @@
-import { Add, CloudCircle } from '@mui/icons-material';
+import { CloudCircle } from '@mui/icons-material';
-import { Divider, styled } from '@mui/material';
+import { styled } from '@mui/material';
 import { IFeatureEnvironment, IFeatureVariant } from 'interfaces/featureToggle';
 import { EnvironmentVariantsTable } from './EnvironmentVariantsTable/EnvironmentVariantsTable';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
 import { useMemo } from 'react';
 import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';
-import PermissionButton from 'component/common/PermissionButton/PermissionButton';
-import { UPDATE_FEATURE_ENVIRONMENT_VARIANTS } from 'component/providers/AccessProvider/permissions';
 
 const StyledCard = styled('div')(({ theme }) => ({
     padding: theme.spacing(3),
@@ -45,10 +43,6 @@ const StyledName = styled('span', {
     marginLeft: theme.spacing(1.25),
 }));
 
-const StyledDivider = styled(Divider)(({ theme }) => ({
-    margin: theme.spacing(3, 0),
-}));
-
 const StyledDescription = styled('p')(({ theme }) => ({
     fontSize: theme.fontSizes.smallBody,
     color: theme.palette.text.secondary,
@@ -60,10 +54,8 @@ const StyledGeneralSelect = styled(GeneralSelect)(({ theme }) => ({
 }));
 
 interface IEnvironmentVariantsCardProps {
-    projectId: string;
     environment: IFeatureEnvironment;
     searchValue: string;
-    onAddVariant: () => void;
     onEditVariant: (variant: IFeatureVariant) => void;
     onDeleteVariant: (variant: IFeatureVariant) => void;
     onUpdateStickiness: (variant: IFeatureVariant[]) => void;
@@ -71,10 +63,8 @@ interface IEnvironmentVariantsCardProps {
 }
 
 export const EnvironmentVariantsCard = ({
-    projectId,
     environment,
     searchValue,
-    onAddVariant,
     onEditVariant,
     onDeleteVariant,
     onUpdateStickiness,
@@ -131,21 +121,10 @@ export const EnvironmentVariantsCard = ({
                             onEditVariant={onEditVariant}
                             onDeleteVariant={onDeleteVariant}
                         />
-                        <PermissionButton
-                            permission={UPDATE_FEATURE_ENVIRONMENT_VARIANTS}
-                            projectId={projectId}
-                            environmentId={environment.name}
-                            onClick={onAddVariant}
-                            variant="text"
-                            startIcon={<Add />}
-                        >
-                            add variant
-                        </PermissionButton>
                         <ConditionallyRender
                             condition={variants.length > 1}
                             show={
                                 <>
-                                    <StyledDivider />
                                     <p>Stickiness</p>
                                     <StyledDescription>
                                         By overriding the stickiness you can

frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsCopyFrom/EnvironmentVariantsCopyFrom.tsx

@@ -34,9 +34,13 @@ export const EnvironmentVariantsCopyFrom = ({
         useState<null | HTMLElement>(null);
     const copyFromOpen = Boolean(copyFromAnchorEl);
 
+    const variants = environment.variants ?? [];
+
     return (
         <ConditionallyRender
-            condition={otherEnvsWithVariants.length > 0}
+            condition={
+                otherEnvsWithVariants.length > 0 && variants.length === 0
+            }
             show={
                 <>
                     <PermissionButton

frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/FeatureEnvironmentVariants.tsx

@@ -232,10 +232,8 @@ export const FeatureEnvironmentVariants = () => {
                 return (
                     <EnvironmentVariantsCard
                         key={environment.name}
-                        projectId={projectId}
                         environment={environment}
                         searchValue={searchValue}
-                        onAddVariant={() => addVariant(environment)}
                         onEditVariant={(variant: IFeatureVariant) =>
                             editVariant(environment, variant)
                         }
@@ -246,36 +244,25 @@ export const FeatureEnvironmentVariants = () => {
                             onUpdateStickiness(environment, variants)
                         }
                     >
-                        <ConditionallyRender
-                            condition={environment.variants?.length === 0}
-                            show={
                         <StyledButtonContainer>
+                            <EnvironmentVariantsCopyFrom
+                                environment={environment}
+                                permission={UPDATE_FEATURE_ENVIRONMENT_VARIANTS}
+                                projectId={projectId}
+                                environmentId={environment.name}
+                                onCopyVariantsFrom={onCopyVariantsFrom}
+                                otherEnvsWithVariants={otherEnvsWithVariants}
+                            />
                             <PermissionButton
                                 onClick={() => addVariant(environment)}
                                 variant="outlined"
-                                        permission={
+                                permission={UPDATE_FEATURE_ENVIRONMENT_VARIANTS}
-                                            UPDATE_FEATURE_ENVIRONMENT_VARIANTS
-                                        }
                                 projectId={projectId}
                                 environmentId={environment.name}
                             >
                                 Add variant
                             </PermissionButton>
-                                    <EnvironmentVariantsCopyFrom
-                                        environment={environment}
-                                        permission={
-                                            UPDATE_FEATURE_ENVIRONMENT_VARIANTS
-                                        }
-                                        projectId={projectId}
-                                        environmentId={environment.name}
-                                        onCopyVariantsFrom={onCopyVariantsFrom}
-                                        otherEnvsWithVariants={
-                                            otherEnvsWithVariants
-                                        }
-                                    />
                         </StyledButtonContainer>
-                            }
-                        />
                     </EnvironmentVariantsCard>
                 );
             })}