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

fix: make environment switch text clickable (#887)

Browse Source 
* fix: make environment switch text clickable

* refactor: use a cursor pointer for the label

* refactor: avoid empty clickable area
This commit is contained in:
olav 2022-04-20 15:00:56 +02:00 committed by GitHub
parent fdd683813a
commit 27a2a1a776
2 changed files with 22 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.styles.ts Normal file
View File

@ -0,0 +1,9 @@
import { makeStyles } from '@material-ui/core/styles';
export const useStyles = makeStyles(theme => ({
label: {
display: 'inline-flex',
alignItems: 'center',
cursor: 'pointer',
},
}));

22
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx
View File

@ -10,6 +10,7 @@ import StringTruncator from 'component/common/StringTruncator/StringTruncator';
import { UPDATE_FEATURE_ENVIRONMENT } from 'component/providers/AccessProvider/permissions';
import React from 'react';
import { formatUnknownError } from 'utils/formatUnknownError';
import { useStyles } from './FeatureOverviewEnvSwitch.styles';
interface IFeatureOverviewEnvSwitchProps {
env: IFeatureEnvironment;
@ -29,6 +30,7 @@ const FeatureOverviewEnvSwitch = ({
useFeatureApi();
const { refetchFeature } = useFeature(projectId, featureId);
const { setToastData, setToastApiError } = useToast();
const styles = useStyles();
const handleToggleEnvironmentOn = async () => {
try {
@ -91,15 +93,17 @@ const FeatureOverviewEnvSwitch = ({
);
return (
<div style={{ display: 'flex', alignItems: 'center' }}>
<PermissionSwitch
permission={UPDATE_FEATURE_ENVIRONMENT}
projectId={projectId}
checked={env.enabled}
onChange={toggleEnvironment}
environmentId={env.name}
/>
{content}
<div>
<label className={styles.label}>
<PermissionSwitch
permission={UPDATE_FEATURE_ENVIRONMENT}
projectId={projectId}
checked={env.enabled}
onChange={toggleEnvironment}
environmentId={env.name}
/>
{content}
</label>
</div>
);
};