fix / environment-overview (#630)

* fix: icons

* fix: disabled link

frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts

@@ -23,7 +23,6 @@ export const useStyles = makeStyles(theme => ({
         display: 'flex',
         justifyContent: 'center',
         flexDirection: 'column',
-
         paddingTop: '1.5rem',
     },
     headerTitle: {
@@ -133,13 +132,19 @@ export const useStyles = makeStyles(theme => ({
         top: '1px',
         position: 'relative',
     },
-    stratigiesIconsContainer: {
+    strategyIconContainer: {
+        minWidth: '50px',
+        marginRight: '5px',
+        display: 'flex',
+        justifyContent: 'center',
+    },
+
+    strategiesIconsContainer: {
+        transform: 'scale(0.8)',
         display: 'flex',
         alignItems: 'center',
-        transform: 'scale(0.8)',
-        top: '3px',
-        left: '-10px',
         position: 'relative',
+        marginLeft: '-0.75rem',
         [theme.breakpoints.down(560)]: {
             marginLeft: '0px',
             top: '5px',
@@ -179,9 +184,7 @@ export const useStyles = makeStyles(theme => ({
             padding: '0.5rem',
         },
     },
-    strategyIconContainer: {
+
-        marginRight: '5px',
-    },
     strategyIcon: {
         fill: theme.palette.grey[600],
     },
@@ -208,11 +211,12 @@ export const useStyles = makeStyles(theme => ({
             fontWeight: 'normal',
         },
         '&:disabled': {
-            margin: '0px 16px',
+            height: '35px',
-            height: '35px'
+            background: 'transparent',
+            color: theme.palette.grey[600],
         },
     },
-    separtor: {
+    separator: {
         marginLeft: '-10px',
         marginRight: '9px',
         [theme.breakpoints.down(560)]: {

frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx

@@ -116,15 +116,18 @@ const FeatureOverviewEnvironment = ({
                             >
                                 Add strategy
                             </PermissionButton>
-                            <span className={styles.separtor}>|</span>
                             <ConditionallyRender
                                 condition={
                                     featureEnvironment?.strategies.length !== 0
                                 }
                                 show={
+                                    <>
+                                        <span className={styles.separator}>
+                                            |
+                                        </span>
                                         <div
                                             className={
-                                            styles.stratigiesIconsContainer
+                                                styles.strategiesIconsContainer
                                             }
                                         >
                                             {getStrategyIcons()?.map(
@@ -150,18 +153,8 @@ const FeatureOverviewEnvironment = ({
                                                     </Tooltip>
                                                 )
                                             )}
-                                    </div>
+                                        </div>{' '}
-                                }
+                                    </>
-                                elseShow={
-                                    <div
-                                        className={
-                                            styles.noStratigiesInfoContainer
-                                        }
-                                    >
-                                        <p className={styles.strategiesText}>
-                                            No strategies defined on this toggle
-                                        </p>
-                                    </div>
                                 }
                             />
                         </div>
@@ -187,10 +180,17 @@ const FeatureOverviewEnvironment = ({
                             featureEnvironment={featureEnvironment}
                             getOverviewText={getOverviewText}
                         />
+                        <ConditionallyRender
+                            condition={
+                                featureEnvironment?.strategies?.length > 0
+                            }
+                            show={
                                 <FeatureOverviewEnvironmentFooter
                                     env={env}
                                     environmentMetric={environmentMetric}
                                 />
+                            }
+                        />
                     </div>
                 </AccordionDetails>
             </Accordion>

frontend/src/component/feature/FeatureView2/FeatureStrategies/common/GeneralStrategy/GeneralStrategy.tsx

@@ -95,7 +95,8 @@ const GeneralStrategy = ({
                     );
                 } else if (type === 'number') {
                     const regex = new RegExp('^\\d+$');
-                    const error = value.length > 0 ? !regex.test(value) : false;
+                    const error =
+                        value?.length > 0 ? !regex.test(value) : false;
 
                     return (
                         <div key={name} className={styles.generalSection}>