fix: truncate long environment name (#535)

* fix: truncate long environment name

* fix: truncate no strategies in NoItemsStrategies

* fix: open doc link in new tab

* fix: redirect to add new strategy view from overview tab

* fix: truncate environment name in create strategy header

Co-authored-by: Fredrik Strand Oseberg <fredrik.no@gmail.com>

frontend/src/component/common/NoItems/NoItemsStrategies/NoItemsStrategies.styles.ts

@@ -8,4 +8,9 @@ export const useStyles = makeStyles(theme => ({
         display: 'block',
         margin: '1rem 0 0 0',
     },
+    envName: {
+        position: 'relative',
+        top: '6px',
+        fontWeight: 'bold'
+    },
 }));

frontend/src/component/common/NoItems/NoItemsStrategies/NoItemsStrategies.tsx

@@ -1,6 +1,7 @@
 import { UPDATE_FEATURE } from '../../../providers/AccessProvider/permissions';
 import ConditionallyRender from '../../ConditionallyRender';
 import PermissionButton from '../../PermissionButton/PermissionButton';
+import StringTruncator from '../../StringTruncator/StringTruncator';
 import NoItems from '../NoItems';
 
 import { useStyles } from './NoItemsStrategies.styles';
@@ -21,7 +22,13 @@ const NoItemsStrategies = ({
     return (
         <NoItems>
             <p className={styles.noItemsParagraph}>
-                No strategies added in the {envName} environment
+                No strategies added in the{' '}
+                <StringTruncator
+                    text={envName}
+                    maxWidth={'130'}
+                    className={styles.envName}
+                />{' '}
+                environment
             </p>
 
             <p className={styles.noItemsParagraph}>
@@ -30,6 +37,8 @@ const NoItemsStrategies = ({
                 <a
                     className={styles.link}
                     href="https://docs.getunleash.io/user_guide/environments"
+                    target="_blank"
+                    rel="noreferrer"
                 >
                     Read more here
                 </a>

frontend/src/component/environments/CreateEnvironment/CreateEnvironmentSuccess/CreateEnvironmentSuccessCard/CreateEnvironmentSuccessCard.tsx

@@ -1,4 +1,5 @@
 import { CloudCircle } from '@material-ui/icons';
+import StringTruncator from '../../../../common/StringTruncator/StringTruncator';
 import { ICreateEnvironmentSuccessProps } from '../CreateEnvironmentSuccess';
 import { useStyles } from './CreateEnvironmentSuccessCard.styles';
 
@@ -16,7 +17,9 @@ const CreateEnvironmentSuccessCard = ({
             <div className={styles.infoContainer}>
                 <div className={styles.infoInnerContainer}>
                     <div className={styles.infoTitle}>Id</div>
-                    <div>{name}</div>
+                    <div>
+                        <StringTruncator text={name} maxWidth={'250'} />
+                    </div>
                 </div>
                 <div className={styles.infoInnerContainer}>
                     <div className={styles.infoTitle}>Type</div>

frontend/src/component/environments/EnvironmentList/EnvironmentDeleteConfirm/EnvironmentDeleteConfirm.tsx

@@ -52,10 +52,7 @@ const EnvironmentDeleteConfirm = ({
                 strategies that are active in this environment across all
                 feature toggles.
             </Alert>
-            <CreateEnvironmentSuccessCard
+            <CreateEnvironmentSuccessCard name={env?.name} type={env?.type} />
-                name={env?.name}
-                type={env?.type}
-            />
 
             <p className={styles.deleteParagraph}>
                 In order to delete this environment, please enter the id of the

frontend/src/component/environments/EnvironmentList/EnvironmentListItem/EnvironmentListItem.tsx

@@ -24,6 +24,7 @@ import {
 import { useDrag, useDrop, DropTargetMonitor } from 'react-dnd';
 import { XYCoord } from 'dnd-core';
 import DisabledIndicator from '../../../common/DisabledIndicator/DisabledIndicator';
+import StringTruncator from '../../../common/StringTruncator/StringTruncator';
 
 interface IEnvironmentListItemProps {
     env: IEnvironment;
@@ -132,7 +133,9 @@ const EnvironmentListItem = ({
             <ListItemText
                 primary={
                     <>
-                        <strong>{env.name}</strong>
+                        <strong>
+                            <StringTruncator text={env.name} maxWidth={'125'} />
+                        </strong>
                         <ConditionallyRender
                             condition={!env.enabled}
                             show={<DisabledIndicator />}

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

@@ -19,7 +19,7 @@ const FeatureOverviewEnvironmentBody = ({
     const { projectId, featureId } = useParams<IFeatureViewParams>();
     const styles = useStyles();
     const history = useHistory();
-    const strategiesLink = `/projects/${projectId}/features2/${featureId}/strategies?environment=${featureEnvironment?.name}`;
+    const strategiesLink = `/projects/${projectId}/features2/${featureId}/strategies?environment=${featureEnvironment?.name}&addStrategy=true`;
 
     if (!featureEnvironment) return null;
 

frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesCreateHeader/FeatureStrategiesCreateHeader.tsx

@@ -1,6 +1,7 @@
 import { useContext } from 'react';
 import FeatureStrategiesUIContext from '../../../../../../contexts/FeatureStrategiesUIContext';
 import EnvironmentIcon from '../../../../../common/EnvironmentIcon/EnvironmentIcon';
+import StringTruncator from '../../../../../common/StringTruncator/StringTruncator';
 import { useStyles } from './FeatureStrategiesCreateHeader.styles';
 
 const FeatureStrategiesCreateHeader = () => {
@@ -13,8 +14,12 @@ const FeatureStrategiesCreateHeader = () => {
     return (
         <div className={styles.container}>
             <div className={styles.headerContainer}>
-                <EnvironmentIcon enabled={activeEnvironment?.enabled} />{' '}
+                <EnvironmentIcon enabled={activeEnvironment?.enabled} />
-                Configuring strategy for {activeEnvironment?.name}
+                Configuring strategy for&nbsp;
+                <StringTruncator
+                    text={activeEnvironment?.name}
+                    maxWidth={'200'}
+                />
             </div>
         </div>
     );