mirror of
https://github.com/Unleash/unleash.git
synced 2025-10-27 11:02:16 +01:00
feat:new toggle screen view (#544)
* feat: change toggle view screen * fix: revert changes for toggle status box * fix: replace IconButton with PermissionButton and change edit icon color * fix: change component header and replace pie chart icon in feature view * feat: add strategies icons to accordion summary * reverting to 9059f90 commit Co-authored-by: Fredrik Strand Oseberg <fredrik.no@gmail.com>
This commit is contained in:
Youssef Khedher
GitHub
parent
eab9f89c84
commit
bc254af002
@ -1,7 +1,7 @@
|
||||
import classNames from 'classnames';
|
||||
import PercentageCircle from '../../../../common/PercentageCircle/PercentageCircle';
|
||||
import { useStyles } from './FeatureEnvironmentMetrics.styles';
|
||||
import PieChartIcon from '@material-ui/icons/PieChart';
|
||||
import {FiberManualRecord} from '@material-ui/icons';
|
||||
import { useMediaQuery } from '@material-ui/core';
|
||||
import { IFeatureEnvironmentMetrics } from '../../../../../interfaces/featureToggle';
|
||||
import { parseISO } from 'date-fns';
|
||||
@ -75,7 +75,7 @@ const FeatureEnvironmentMetrics = ({
|
||||
</div>
|
||||
|
||||
<div className={styles.chartContainer}>
|
||||
<PieChartIcon
|
||||
<FiberManualRecord
|
||||
style={{ transform: 'scale(1.4)' }}
|
||||
className={styles.icon}
|
||||
data-loading
|
||||
|
||||
@ -45,7 +45,7 @@ const FeatureOverviewEnvSwitches = () => {
|
||||
title="Environments can be switched off for a single toggle. Resulting in all calls towards the toggle to return false."
|
||||
>
|
||||
<h3 className={styles.header} data-loading>
|
||||
Toggle status
|
||||
Feature toggle status
|
||||
</h3>
|
||||
</Tooltip>
|
||||
{renderEnvironmentSwitches()}
|
||||
|
||||
@ -60,11 +60,11 @@ const FeatureOverviewEnvironment = ({
|
||||
enabled={env.enabled}
|
||||
className={styles.headerIcon}
|
||||
/>
|
||||
Toggle execution for
|
||||
Feature toggle execution for
|
||||
<StringTruncator
|
||||
text={env.name}
|
||||
className={styles.truncator}
|
||||
maxWidth="120"
|
||||
maxWidth="100"
|
||||
/>
|
||||
<ConditionallyRender
|
||||
condition={!env.enabled}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import PieChart from '@material-ui/icons/PieChart';
|
||||
import { FiberManualRecord } from '@material-ui/icons';
|
||||
import { IFeatureEnvironmentMetrics } from '../../../../../../../interfaces/featureToggle';
|
||||
import { calculatePercentage } from '../../../../../../../utils/calculate-percentage';
|
||||
import PercentageCircle from '../../../../../../common/PercentageCircle/PercentageCircle';
|
||||
@ -30,7 +30,7 @@ const FeatureOverviewEnvironmentMetrics = ({
|
||||
No one has received this feature in the last hour.
|
||||
</p>
|
||||
</div>
|
||||
<PieChart
|
||||
<FiberManualRecord
|
||||
className={styles.icon}
|
||||
style={{ transform: 'scale(1.1)' }}
|
||||
data-loading
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { capitalize, IconButton } from '@material-ui/core';
|
||||
import { capitalize } from '@material-ui/core';
|
||||
import classnames from 'classnames';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { Link } from 'react-router-dom';
|
||||
@ -51,7 +51,7 @@ const FeatureOverviewMetaData = () => {
|
||||
component={Link}
|
||||
to={`/projects/${projectId}/features2/${featureId}/settings`}
|
||||
>
|
||||
<Edit />
|
||||
<Edit className={styles.editIcon} />
|
||||
</PermissionIconButton>
|
||||
</div>
|
||||
</span>
|
||||
@ -60,12 +60,14 @@ const FeatureOverviewMetaData = () => {
|
||||
<span data-loading>
|
||||
<div className={styles.descriptionContainer}>
|
||||
No description.{' '}
|
||||
<IconButton
|
||||
<PermissionIconButton
|
||||
projectId={projectId}
|
||||
permission={UPDATE_FEATURE}
|
||||
component={Link}
|
||||
to={`/projects/${projectId}/features2/${featureId}/settings`}
|
||||
>
|
||||
<Edit />
|
||||
</IconButton>
|
||||
<Edit className={styles.editIcon} />
|
||||
</PermissionIconButton>
|
||||
</div>
|
||||
</span>
|
||||
}
|
||||
|
||||
@ -3,7 +3,8 @@ import { makeStyles } from '@material-ui/core/styles';
|
||||
export const useStyles = makeStyles(theme => ({
|
||||
container: {
|
||||
borderRadius: '10px',
|
||||
backgroundColor: '#fff',
|
||||
color: '#fff',
|
||||
backgroundColor: theme.palette.primary.light,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
maxWidth: '350px',
|
||||
@ -39,12 +40,15 @@ export const useStyles = makeStyles(theme => ({
|
||||
marginRight: '1rem',
|
||||
height: '40px',
|
||||
width: '40px',
|
||||
fill: theme.palette.primary.main,
|
||||
fill: '#fff',
|
||||
},
|
||||
descriptionContainer: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
color: theme.palette.grey[600],
|
||||
color: '#fff',
|
||||
},
|
||||
editIcon: {
|
||||
color: '#fff',
|
||||
},
|
||||
[theme.breakpoints.down(1000)]: {
|
||||
container: {
|
||||
|
||||
@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core/styles';
|
||||
export const useStyles = makeStyles(theme => ({
|
||||
container: {
|
||||
borderRadius: '10px',
|
||||
backgroundColor: '#fff',
|
||||
backgroundColor: theme.palette.primary.light,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
marginRight: '1rem',
|
||||
@ -28,6 +28,13 @@ export const useStyles = makeStyles(theme => ({
|
||||
tagChip: {
|
||||
marginRight: '0.25rem',
|
||||
marginTop: '0.5rem',
|
||||
backgroundColor: '#fff',
|
||||
fontSize: theme.fontSizes.smallBody,
|
||||
},
|
||||
closeIcon: {
|
||||
color: theme.palette.primary.light,
|
||||
'&:hover': {
|
||||
color: theme.palette.primary.light,
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { useState, useContext } from 'react';
|
||||
import { Chip } from '@material-ui/core';
|
||||
import { Label } from '@material-ui/icons';
|
||||
import { Label, Close } from '@material-ui/icons';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import useTags from '../../../../../../hooks/api/getters/useTags/useTags';
|
||||
import { IFeatureViewParams } from '../../../../../../interfaces/params';
|
||||
@ -101,6 +101,7 @@ const FeatureOverviewTags = () => {
|
||||
data-loading
|
||||
label={t.value}
|
||||
key={`${t.type}:${t.value}`}
|
||||
deleteIcon={<Close className={styles.closeIcon} />}
|
||||
onDelete={
|
||||
canDeleteTag
|
||||
? () => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user