1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-05-26 01:17:00 +02:00

Feat/visual enhancements (#404)

* fix: stale style

* fix: execution plan styling

* fix: paths

* fix: remove console logs

* fix: snapshots

* fix: add comma

* fix: update snapshots
This commit is contained in:
Fredrik Strand Oseberg 2021-10-08 16:19:06 +02:00 committed by GitHub
parent 6fc30d3a79
commit 7da3573edb
25 changed files with 147 additions and 60 deletions

View File

@ -0,0 +1,16 @@
<svg
id="dots"
width="50px"
height="21px"
viewBox="0 0 132 58"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<g stroke="none" fill="none">
<g id="chatbot-loader" fill="#fff">
<circle id="chatbot-loader-dot1" cx="25" cy="30" r="13"></circle>
<circle id="chatbot-loader-dot2" cx="65" cy="30" r="13"></circle>
<circle id="chatbot-loader-dot3" cx="105" cy="30" r="13"></circle>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 447 B

View File

@ -3,9 +3,14 @@ import { useTheme } from '@material-ui/core';
interface IPercentageCircleProps {
styles?: object;
percentage: number;
secondaryPieColor?: string;
}
const PercentageCircle = ({ styles, percentage }: IPercentageCircleProps) => {
const PercentageCircle = ({
styles,
percentage,
secondaryPieColor,
}: IPercentageCircleProps) => {
const theme = useTheme();
let circle = {
@ -14,7 +19,9 @@ const PercentageCircle = ({ styles, percentage }: IPercentageCircleProps) => {
borderRadius: '50%',
color: '#fff',
backgroundColor: theme.palette.grey[200],
backgroundImage: `conic-gradient(${theme.palette.primary.main} ${percentage}%, ${theme.palette.grey[200]} 1%)`,
backgroundImage: `conic-gradient(${
theme.palette.primary.main
} ${percentage}%, ${secondaryPieColor || theme.palette.grey[200]} 1%)`,
};
if (percentage === 100) {

View File

@ -51,18 +51,20 @@ const FeatureEnvironmentMetrics = ({
return (
<div className={containerClasses}>
<div className={styles.headerContainer}>
<h2 className={styles.title}>Traffic in {metric.name}</h2>
<h2 data-loading className={styles.title}>
Traffic in {metric.name}
</h2>
</div>
<div className={styles.bodyContainer}>
<div className={styles.textContainer}>
<p className={styles.paragraph}>
<p className={styles.paragraph} data-loading>
No metrics available for this environment.
</p>
</div>
<div className={styles.chartContainer}>
<PieChartIcon className={styles.icon} />
<PieChartIcon className={styles.icon} data-loading />
</div>
</div>
</div>
@ -72,30 +74,32 @@ const FeatureEnvironmentMetrics = ({
return (
<div className={containerClasses}>
<div className={styles.headerContainer}>
<h2 className={styles.title}>Traffic in {metric.name}</h2>
<h2 data-loading className={styles.title}>
Traffic in {metric.name}
</h2>
</div>
<div className={styles.bodyContainer}>
<div className={styles.textContainer}>
<div className={styles.trueCountContainer}>
<div>
<div className={styles.trueCount} />
<div className={styles.trueCount} data-loading />
</div>
<p className={styles.paragraph}>
<p className={styles.paragraph} data-loading>
{metric.yes} users received this feature
</p>
</div>
<div className={styles.trueCountContainer}>
<div>
<div className={styles.falseCount} />
<div className={styles.falseCount} data-loading />
</div>
<p className={styles.paragraph}>
<p className={styles.paragraph} data-loading>
{metric.no} users did not receive this feature
</p>
</div>
</div>
<div className={styles.chartContainer}>
<div className={styles.chartContainer} data-loading>
<PercentageCircle
percentage={calculatePercentage()}
styles={{

View File

@ -18,9 +18,9 @@ const FeatureOverview = () => {
</div>
<div className={styles.mainContent}>
<div className={styles.trafficContainer}>
<FeatureOverviewMetrics />
<FeatureOverviewMetrics data-loading />
</div>
<FeatureOverviewStrategies />
<FeatureOverviewStrategies data-loading />
</div>
</div>
);

View File

@ -22,18 +22,20 @@ const FeatureOverviewMetaData = () => {
return (
<div className={classnames(styles.container)}>
<div className={styles.metaDataHeader}>
<div className={styles.metaDataHeader} data-loading>
<IconComponent className={styles.headerIcon} />{' '}
<h3 className={styles.header}>
{capitalize(type || '')} toggle
</h3>
</div>
<div className={styles.body}>
<span className={styles.bodyItem}>Project: {project}</span>
<span className={styles.bodyItem} data-loading>
Project: {project}
</span>
<ConditionallyRender
condition={description}
show={
<span className={styles.bodyItem}>
<span className={styles.bodyItem} data-loading>
<div>Description:</div>
<div className={styles.descriptionContainer}>
<p>{description}</p>
@ -47,7 +49,7 @@ const FeatureOverviewMetaData = () => {
</span>
}
elseShow={
<span>
<span data-loading>
<div className={styles.descriptionContainer}>
No description.{' '}
<IconButton

View File

@ -17,6 +17,16 @@ export const useStyles = makeStyles(theme => ({
maxWidth: 'none',
},
},
status: {
height: '12.5px',
width: '12.5px',
backgroundColor: theme.palette.success.main,
borderRadius: '50%',
marginLeft: '0.5rem',
},
statusStale: {
backgroundColor: theme.palette.error.main,
},
staleHeaderContainer: {
display: 'flex',
alignItems: 'center',
@ -41,6 +51,8 @@ export const useStyles = makeStyles(theme => ({
bodyItem: {
margin: '0.5rem 0',
fontSize: theme.fontSizes.bodySize,
display: 'flex',
alignItems: 'center',
},
headerIcon: {
marginRight: '1rem',

View File

@ -3,11 +3,11 @@ import classnames from 'classnames';
import useFeature from '../../../../../hooks/api/getters/useFeature/useFeature';
import { useParams } from 'react-router-dom';
import { IFeatureViewParams } from '../../../../../interfaces/params';
import PermissionIconButton from '../../../../common/PermissionIconButton/PermissionIconButton';
import { UPDATE_FEATURE } from '../../../../AccessProvider/permissions';
import { Check, Close } from '@material-ui/icons';
import { useState } from 'react';
import StaleDialog from './StaleDialog/StaleDialog';
import PermissionButton from '../../../../common/PermissionButton/PermissionButton';
import classNames from 'classnames';
const FeatureOverviewStale = () => {
const styles = useStyles();
@ -15,27 +15,36 @@ const FeatureOverviewStale = () => {
const { projectId, featureId } = useParams<IFeatureViewParams>();
const { feature } = useFeature(projectId, featureId);
const FlipStateButton = () => (feature.stale ? <Close /> : <Check />);
const flipStateButtonText = () =>
feature.stale ? 'Set to active' : 'Set to stale';
const statusClasses = classNames(styles.status, {
[styles.statusStale]: feature.stale,
});
return (
<div className={classnames(styles.container)}>
<div className={styles.staleHeaderContainer}>
<div className={styles.staleHeader}>
<h3 className={styles.header}>Status</h3>
<h3 className={styles.header} data-loading>
Status
</h3>
</div>
</div>
<div className={styles.body}>
<span className={styles.bodyItem}>
<span className={styles.bodyItem} data-loading>
Feature is {feature.stale ? 'stale' : 'active'}
<div className={statusClasses} />
</span>
<div className={styles.staleButton}>
<PermissionIconButton
<div className={styles.staleButton} data-loading>
<PermissionButton
onClick={() => setOpenStaleDialog(true)}
permission={UPDATE_FEATURE}
tooltip="Flip status"
variant="text"
>
<FlipStateButton />
</PermissionIconButton>
{flipStateButtonText()}
</PermissionButton>
</div>
</div>
<StaleDialog

View File

@ -31,6 +31,7 @@ const FeatureOverviewEnvironment = ({
return strategies.map(strategy => {
return (
<FeatureOverviewStrategyCard
data-loading
strategy={strategy}
key={strategy.id}
onClick={handleClick}

View File

@ -24,13 +24,15 @@ const FeatureOverviewStrategyCard = ({
const { parameters } = strategy;
return (
<button className={styles.card} onClick={onClick}>
<Icon className={styles.icon} />
<p className={styles.cardHeader}>{strategyName}</p>
<Icon className={styles.icon} data-loading />
<p data-loading className={styles.cardHeader}>
{strategyName}
</p>
<ConditionallyRender
condition={Boolean(parameters?.rollout) && !smallScreen}
show={
<p className={styles.rollout}>
<p className={styles.rollout} data-loading>
Rolling out to {parameters?.rollout}%
</p>
}

View File

@ -26,7 +26,9 @@ const FeatureOverviewStrategies = () => {
<div className={styles.container}>
<div className={styles.headerContainer}>
<div className={styles.headerInnerContainer}>
<h3 className={styles.headerTitle}>Toggle Strategies</h3>
<h3 className={styles.headerTitle} data-loading>
Toggle Strategies
</h3>
<div className={styles.actions}>
<ResponsiveButton
maxWidth="700px"

View File

@ -27,7 +27,7 @@ const AddTagDialog = ({ open, setOpen }: IAddTagDialogProps) => {
const DEFAULT_TAG: IDefaultTag = { type: 'simple', value: '' };
const styles = useStyles();
const { featureId } = useParams<IFeatureViewParams>();
const { addTagToFeature } = useFeatureApi();
const { addTagToFeature, loading } = useFeatureApi();
const { refetch } = useTags(featureId);
const [errors, setErrors] = useState({ tagError: '' });
const { toast, setToastData } = useToast();
@ -74,6 +74,7 @@ const AddTagDialog = ({ open, setOpen }: IAddTagDialogProps) => {
primaryButtonText="Add tag"
title="Add tags to feature toggle"
onClick={onSubmit}
disabledPrimaryButton={loading}
onClose={onCancel}
>
<>

View File

@ -99,6 +99,7 @@ const FeatureOverviewTags = () => {
<Chip
icon={tagIcon(t.type)}
className={styles.tagChip}
data-loading
label={t.value}
key={`${t.type}:${t.value}`}
onDelete={() => {
@ -112,7 +113,9 @@ const FeatureOverviewTags = () => {
<div className={styles.container}>
<div className={styles.tagheaderContainer}>
<div className={styles.tagHeader}>
<h4 className={styles.tagHeaderText}>Tags</h4>
<h4 className={styles.tagHeaderText} data-loading>
Tags
</h4>
</div>
<AddTagDialog open={openTagDialog} setOpen={setOpenTagDialog} />
@ -120,6 +123,7 @@ const FeatureOverviewTags = () => {
onClick={() => setOpenTagDialog(true)}
permission={UPDATE_FEATURE}
tooltip="Add tag"
data-loading
>
<Add />
</PermissionIconButton>
@ -143,7 +147,7 @@ const FeatureOverviewTags = () => {
<ConditionallyRender
condition={tags.length > 0}
show={tags.map(renderTag)}
elseShow={<p>No tags to display</p>}
elseShow={<p data-loading>No tags to display</p>}
/>
</div>
{toast}

View File

@ -9,9 +9,10 @@ export const useStyles = makeStyles(theme => ({
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
backgroundColor: theme.palette.grey[100],
},
header: {
color: theme.palette.primary.main,
color: theme.palette.grey[700],
textAlign: 'center',
margin: '0.5rem 0',
fontSize: theme.fontSizes.bodySize,

View File

@ -48,7 +48,7 @@ const FeatureStrategiesConfigure = ({
const [strategyParams, setStrategyParams] = useState(
configureNewStrategy.parameters
);
const { addStrategyToFeature } = useFeatureStrategyApi();
const { addStrategyToFeature, loading } = useFeatureStrategyApi();
const handleCancel = () => {
setConfigureNewStrategy(null);
@ -71,6 +71,7 @@ const FeatureStrategiesConfigure = ({
};
try {
if (loading) return;
const res = await addStrategyToFeature(
projectId,
featureId,
@ -163,15 +164,21 @@ const FeatureStrategiesConfigure = ({
className={styles.btn}
onClick={resolveSubmit}
data-test={ADD_NEW_STRATEGY_SAVE_ID}
disabled={loading}
>
Save
</Button>
<Button className={styles.btn} onClick={handleCancel}>
<Button
className={styles.btn}
onClick={handleCancel}
disabled={loading}
>
Cancel
</Button>
</div>
<FeatureStrategiesProductionGuard
primaryButtonText="Save changes"
loading={loading}
show={productionGuard}
onClick={() => {
handleSubmit();

View File

@ -10,9 +10,6 @@ export const useStyles = makeStyles(theme => ({
backgroundColor: theme.palette.primary.light,
opacity: '0.75',
},
strategiesContainer: {
maxWidth: '627px',
},
dropbox: {
textAlign: 'center',
fontSize: theme.fontSizes.smallBody,
@ -39,5 +36,6 @@ export const useStyles = makeStyles(theme => ({
},
environmentList: {
marginTop: 0,
marginBottom: 0,
},
}));

View File

@ -59,7 +59,6 @@ const FeatureStrategiesEnvironments = () => {
if (addStrategy) {
setExpandedSidebar(true);
}
console.log(feature);
if (!feature) return;
if (environmentTab) {

View File

@ -6,6 +6,7 @@ interface IFeatureStrategiesProductionGuard {
onClick: () => void;
onClose: () => void;
primaryButtonText: string;
loading: boolean;
}
const FeatureStrategiesProductionGuard = ({
@ -13,6 +14,7 @@ const FeatureStrategiesProductionGuard = ({
onClick,
onClose,
primaryButtonText,
loading,
}: IFeatureStrategiesProductionGuard) => {
return (
<Dialogue
@ -22,6 +24,7 @@ const FeatureStrategiesProductionGuard = ({
secondaryButtonText="Cancel"
onClick={onClick}
onClose={onClose}
disabledPrimaryButton={loading}
>
<Alert severity="error">
WARNING. You are about to make changes to a production

View File

@ -23,6 +23,7 @@ import {
} from '../../../../../../testIds';
import AccessContext from '../../../../../../contexts/AccessContext';
import { UPDATE_FEATURE } from '../../../../../AccessProvider/permissions';
import useFeatureApi from '../../../../../../hooks/api/actions/useFeatureApi/useFeatureApi';
interface IFeatureStrategyEditable {
currentStrategy: IFeatureStrategy;
@ -38,6 +39,7 @@ const FeatureStrategyEditable = ({
index,
}: IFeatureStrategyEditable) => {
const { hasAccess } = useContext(AccessContext);
const { loading } = useFeatureApi();
const { projectId, featureId } = useParams<IFeatureViewParams>();
const { activeEnvironment, featureCache, dirty, setDirty } = useContext(
@ -171,12 +173,14 @@ const FeatureStrategyEditable = ({
className={styles.editButton}
onClick={updateFeatureStrategy}
data-test={UPDATE_STRATEGY_BUTTON_ID}
disabled={loading}
>
Save changes
</Button>
<Button
onClick={discardChanges}
className={styles.editButton}
disabled={loading}
>
Discard changes
</Button>

View File

@ -10,9 +10,10 @@ export const useStyles = makeStyles(theme => ({
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
backgroundColor: theme.palette.grey[100],
},
header: {
color: theme.palette.primary.main,
color: theme.palette.grey[600],
textAlign: 'center',
margin: '0.5rem 0',
fontSize: theme.fontSizes.bodySize,

View File

@ -8,7 +8,6 @@ export const useStyles = makeStyles(theme => ({
marginTop: '0.5rem',
width: '100%',
},
constraint: {
fontSize: theme.fontSizes.smallBody,
alignItems: 'center;',

View File

@ -70,7 +70,10 @@ const FeatureStrategyExecution = ({
are included.
</p>
<PercentageCircle percentage={parameters[key]} />
<PercentageCircle
percentage={parameters[key]}
secondaryPieColor={'#fff'}
/>
</Fragment>
);
case 'userIds':

View File

@ -6,7 +6,7 @@ export const useStyles = makeStyles(theme => ({
alignItems: 'center;',
margin: '0.5rem 0',
display: 'flex',
border: `1px solid ${theme.palette.grey[300]}`,
border: `1px solid ${theme.palette.grey[600]}`,
padding: '0.2rem',
borderRadius: '5px',
width: '100%',

View File

@ -17,16 +17,18 @@ import FeatureStrategies from './FeatureStrategies/FeatureStrategies';
import FeatureVariants from './FeatureVariants/FeatureVariants';
import { useStyles } from './FeatureView2.styles';
import FeatureSettings from './FeatureSettings/FeatureSettings';
import useLoading from '../../../hooks/useLoading';
const FeatureView2 = () => {
const { projectId, featureId } = useParams<IFeatureViewParams>();
const { feature } = useFeature(projectId, featureId);
const { feature, loading } = useFeature(projectId, featureId);
const { a11yProps } = useTabs(0);
const { archiveFeatureToggle } = useFeatureApi();
const { toast, setToastData } = useToast();
const [showDelDialog, setShowDelDialog] = useState(false);
const styles = useStyles();
const history = useHistory();
const ref = useLoading(loading);
const basePath = `/projects/${projectId}/features2/${featureId}`;
@ -55,7 +57,7 @@ const FeatureView2 = () => {
const tabData = [
{
title: 'Overview',
path: `${basePath}/overview`,
path: `${basePath}`,
name: 'overview',
},
{
@ -81,6 +83,7 @@ const FeatureView2 = () => {
return tabData.map((tab, index) => {
return (
<Tab
data-loading
key={tab.title}
label={tab.title}
value={tab.path}
@ -95,14 +98,17 @@ const FeatureView2 = () => {
};
return (
<>
<div ref={ref}>
<div className={styles.header}>
<div className={styles.innerContainer}>
<h2 className={styles.featureViewHeader}>{feature.name}</h2>
<h2 className={styles.featureViewHeader} data-loading>
{feature.name}
</h2>
<div className={styles.actions}>
<PermissionIconButton
permission={UPDATE_FEATURE}
tooltip="Copy"
data-loading
component={Link}
to={`${history.location.pathname}/copy`}
>
@ -111,6 +117,7 @@ const FeatureView2 = () => {
<PermissionIconButton
permission={UPDATE_FEATURE}
tooltip="Archive feature toggle"
data-loading
onClick={() => setShowDelDialog(true)}
>
<Archive />
@ -130,7 +137,8 @@ const FeatureView2 = () => {
</div>
</div>
<Route
path={`/projects/:projectId/features2/:featureId/overview`}
exact
path={`/projects/:projectId/features2/:featureId`}
component={FeatureOverview}
/>
<Route
@ -164,7 +172,7 @@ const FeatureView2 = () => {
Are you sure you want to archive this feature toggle?
</Dialogue>
{toast}
</>
</div>
);
};

View File

@ -96,19 +96,22 @@ const FeatureViewEnvironment: FC<IFeatureViewEnvironmentProps> = ({
return (
<div className={containerClasses}>
<div className={environmentIdentifierClasses}>
<div className={environmentIdentifierClasses} data-loading>
<div className={iconContainerClasses}>
<Cloud className={iconClasses} />
</div>
<p className={styles.environmentBadgeParagraph}>{env.type}</p>
</div>
<div className={styles.header}>
<div className={styles.headerInfo}>
<Tooltip title={env.name}>
<p className={styles.environmentTitle}>{env.name}</p>
<p data-loading className={styles.environmentTitle}>
{env.name}
</p>
</Tooltip>
</div>
<div className={styles.environmentStatus}>
<div className={styles.environmentStatus} data-loading>
<ConditionallyRender
condition={env?.strategies?.length > 0}
show={

View File

@ -2,7 +2,7 @@ import { ITag } from '../../../../interfaces/tags';
import useAPI from '../useApi/useApi';
const useFeatureApi = () => {
const { makeRequest, createRequest, errors } = useAPI({
const { makeRequest, createRequest, errors, loading } = useAPI({
propagateErrors: true,
});
@ -146,13 +146,13 @@ const useFeatureApi = () => {
const cloneFeatureToggle = async (
projectId: string,
featureId: string,
payload: {name: string, replaceGroupId: boolean}
payload: { name: string; replaceGroupId: boolean }
) => {
const path = `api/admin/projects/${projectId}/features/${featureId}/clone`;
const req = createRequest(
path,
{ method: 'POST', body: JSON.stringify(payload) },
);
const req = createRequest(path, {
method: 'POST',
body: JSON.stringify(payload),
});
try {
const res = await makeRequest(req.caller, req.id);
@ -172,7 +172,8 @@ const useFeatureApi = () => {
deleteTagFromFeature,
archiveFeatureToggle,
patchFeatureToggle,
cloneFeatureToggle
cloneFeatureToggle,
loading,
};
};