Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

fix: truncate long environment name (#535)

Browse Source 
* 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>
This commit is contained in:
Youssef Khedher 2021-12-06 13:04:15 +01:00 committed by Youssef
parent 15300c96d2
commit c2b1645083
7 changed files with 32 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/component/common/NoItems/NoItemsStrategies/NoItemsStrategies.styles.ts
View File

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

11
frontend/src/component/common/NoItems/NoItemsStrategies/NoItemsStrategies.tsx
View File

@ -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>

5
frontend/src/component/environments/CreateEnvironment/CreateEnvironmentSuccess/CreateEnvironmentSuccessCard/CreateEnvironmentSuccessCard.tsx
View File

@ -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>

5
frontend/src/component/environments/EnvironmentList/EnvironmentDeleteConfirm/EnvironmentDeleteConfirm.tsx
View File

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

5
frontend/src/component/environments/EnvironmentList/EnvironmentListItem/EnvironmentListItem.tsx
View File

@ -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 />}

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

@ -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;

9
frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesCreateHeader/FeatureStrategiesCreateHeader.tsx
View File

@ -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} />{' '}
Configuring strategy for {activeEnvironment?.name}
<EnvironmentIcon enabled={activeEnvironment?.enabled} />
Configuring strategy for&nbsp;
<StringTruncator
text={activeEnvironment?.name}
maxWidth={'200'}
/>
</div>
</div>
);