1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00

Offline mode (#312)

* move all icons to offline mode

* Reorder imports

* revert yarn.lock to original

* resolve errors

* use ConditionalRender, revert material icon css

* add all other font weights

* fix: add library icon

Co-authored-by: Aneesh Relan <aneesh.r@lucideustech.com>
This commit is contained in:
Fredrik Strand Oseberg 2021-06-29 10:21:54 +02:00 committed by GitHub
parent f0b864d206
commit 10eabb366f
56 changed files with 663 additions and 333 deletions

View File

@ -7,16 +7,11 @@
<meta name="baseUriPath" content="::baseUriPath::" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="unleash" />
<title>Unleash - Enterprise ready feature toggles</title>
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700"
rel="stylesheet"
/>
</head>
<body>
<div id="app"></div>

View File

@ -1,3 +1,27 @@
@font-face {
font-family: 'Roboto';
font-weight: 300;
src: url('./assets/fonts/Roboto-300.ttf');
}
@font-face {
font-family: 'Roboto';
font-weight: 400;
src: url('./assets/fonts/Roboto-400.ttf');
}
@font-face {
font-family: 'Roboto';
font-weight: 500;
src: url('./assets/fonts/Roboto-500.ttf');
}
@font-face {
font-family: 'Roboto';
font-weight: 700;
src: url('./assets/fonts/Roboto-700.ttf');
}
* {
box-sizing: border-box;
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -2,7 +2,9 @@ import React, { useContext, useEffect } from 'react';
import PropTypes from 'prop-types';
import ConfiguredAddons from './ConfiguredAddons';
import AvailableAddons from './AvailableAddons';
import { Avatar, Icon } from '@material-ui/core';
import { Avatar } from '@material-ui/core';
import { DeviceHub } from '@material-ui/icons';
import ConditionallyRender from '../../common/ConditionallyRender/ConditionallyRender';
import AccessContext from '../../../contexts/AccessContext';
@ -65,7 +67,7 @@ const getIcon = name => {
default:
return (
<Avatar>
<Icon>device_hub</Icon>
<DeviceHub />
</Avatar>
);
}

View File

@ -1,6 +1,5 @@
import React from 'react';
import {
Icon,
IconButton,
List,
ListItem,
@ -8,6 +7,8 @@ import {
ListItemSecondaryAction,
ListItemText,
} from '@material-ui/core';
import { Visibility, VisibilityOff, Delete } from '@material-ui/icons';
import ConditionallyRender from '../../../common/ConditionallyRender/ConditionallyRender';
import {
DELETE_ADDON,
@ -62,11 +63,11 @@ const ConfiguredAddons = ({
}
onClick={() => toggleAddon(addon)}
>
<Icon>
{addon.enabled
? 'visibility'
: 'visibility_off'}
</Icon>
<ConditionallyRender
condition={addon.enabled}
show={<Visibility />}
elseShow={<VisibilityOff />}
/>
</IconButton>
}
/>
@ -78,7 +79,7 @@ const ConfiguredAddons = ({
title="Remove addon"
onClick={onRemoveAddon(addon)}
>
<Icon>delete</Icon>
<Delete />
</IconButton>
}
/>

View File

@ -88,12 +88,16 @@ exports[`renders correctly with permissions 1`] = `
<span
className="MuiIconButton-label"
>
<span
<svg
aria-hidden={true}
className="material-icons MuiIcon-root"
className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
link
</span>
<path
d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"
/>
</svg>
</span>
</a>
<button
@ -333,12 +337,16 @@ exports[`renders correctly with permissions 1`] = `
<div
className="MuiListItemAvatar-root"
>
<span
<svg
aria-hidden={true}
className="material-icons MuiIcon-root"
className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
report
</span>
<path
d="M15.73 3H8.27L3 8.27v7.46L8.27 21h7.46L21 15.73V8.27L15.73 3zM12 17.3c-.72 0-1.3-.58-1.3-1.3 0-.72.58-1.3 1.3-1.3.72 0 1.3.58 1.3 1.3 0 .72-.58 1.3-1.3 1.3zm1-4.3h-2V7h2v6z"
/>
</svg>
</div>
<div
className="MuiListItemText-root MuiListItemText-multiline"
@ -386,12 +394,16 @@ exports[`renders correctly with permissions 1`] = `
<div
className="MuiListItemAvatar-root"
>
<span
<svg
aria-hidden={true}
className="material-icons MuiIcon-root"
className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
extension
</span>
<path
d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"
/>
</svg>
</div>
<div
className="MuiListItemText-root MuiListItemText-multiline"
@ -420,12 +432,16 @@ exports[`renders correctly with permissions 1`] = `
<div
className="MuiListItemAvatar-root"
>
<span
<svg
aria-hidden={true}
className="material-icons MuiIcon-root"
className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
report
</span>
<path
d="M15.73 3H8.27L3 8.27v7.46L8.27 21h7.46L21 15.73V8.27L15.73 3zM12 17.3c-.72 0-1.3-.58-1.3-1.3 0-.72.58-1.3 1.3-1.3.72 0 1.3.58 1.3 1.3 0 .72-.58 1.3-1.3 1.3zm1-4.3h-2V7h2v6z"
/>
</svg>
</div>
<div
className="MuiListItemText-root MuiListItemText-multiline"
@ -474,12 +490,16 @@ exports[`renders correctly with permissions 1`] = `
<div
className="MuiListItemAvatar-root"
>
<span
<svg
aria-hidden={true}
className="material-icons MuiIcon-root"
className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
timeline
</span>
<path
d="M23 8c0 1.1-.9 2-2 2-.18 0-.35-.02-.51-.07l-3.56 3.55c.05.16.07.34.07.52 0 1.1-.9 2-2 2s-2-.9-2-2c0-.18.02-.36.07-.52l-2.55-2.55c-.16.05-.34.07-.52.07s-.36-.02-.52-.07l-4.55 4.56c.05.16.07.33.07.51 0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2c.18 0 .35.02.51.07l4.56-4.55C8.02 9.36 8 9.18 8 9c0-1.1.9-2 2-2s2 .9 2 2c0 .18-.02.36-.07.52l2.55 2.55c.16-.05.34-.07.52-.07s.36.02.52.07l3.55-3.56C19.02 8.35 19 8.18 19 8c0-1.1.9-2 2-2s2 .9 2 2z"
/>
</svg>
</div>
<div
className="MuiListItemText-root MuiListItemText-multiline"
@ -586,12 +606,16 @@ exports[`renders correctly without permission 1`] = `
<span
className="MuiIconButton-label"
>
<span
<svg
aria-hidden={true}
className="material-icons MuiIcon-root"
className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
link
</span>
<path
d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"
/>
</svg>
</span>
</a>
</div>

View File

@ -11,6 +11,8 @@ import {
LinearProgress,
Typography,
} from '@material-ui/core';
import { Link as LinkIcon } from '@material-ui/icons';
import ConditionallyRender from '../common/ConditionallyRender/ConditionallyRender';
import {
formatFullDateTimeWithLocale,
@ -24,7 +26,6 @@ import Dialogue from '../common/Dialogue';
import PageContent from '../common/PageContent';
import HeaderTitle from '../common/HeaderTitle';
import AccessContext from '../../contexts/AccessContext';
class ClientApplications extends PureComponent {
static contextType = AccessContext;
@ -149,7 +150,7 @@ class ClientApplications extends PureComponent {
condition={url}
show={
<IconButton component={Link} href={url}>
<Icon>link</Icon>
<LinkIcon />
</IconButton>
}
/>

View File

@ -1,6 +1,8 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Icon, CircularProgress } from '@material-ui/core';
import { CircularProgress } from '@material-ui/core';
import { Warning } from '@material-ui/icons';
import { AppsLinkList, styles as commonStyles } from '../common';
import SearchField from '../common/SearchField/SearchField';
import PageContent from '../common/PageContent/PageContent';
@ -9,13 +11,15 @@ import HeaderTitle from '../common/HeaderTitle';
const Empty = () => (
<React.Fragment>
<section style={{ textAlign: 'center' }}>
<Icon>warning</Icon> <br />
<Warning /> <br />
<br />
Oh snap, it does not seem like you have connected any applications. To connect your application to Unleash
you will require a Client SDK.
Oh snap, it does not seem like you have connected any applications.
To connect your application to Unleash you will require a Client
SDK.
<br />
<br />
You can read more about how to use Unleash in your application in the{' '}
You can read more about how to use Unleash in your application in
the{' '}
<a href="https://docs.getunleash.io/docs/sdks/">documentation.</a>
</section>
</React.Fragment>
@ -44,12 +48,21 @@ class ClientStrategies extends Component {
<div className={commonStyles.searchField}>
<SearchField
value={this.props.settings.filter}
updateValue={this.props.updateSetting.bind(this, 'filter')}
updateValue={this.props.updateSetting.bind(
this,
'filter'
)}
/>
</div>
<PageContent headerContent={<HeaderTitle title="Applications" />}>
<PageContent
headerContent={<HeaderTitle title="Applications" />}
>
<div className={commonStyles.fullwidth}>
{applications.length > 0 ? <AppsLinkList apps={applications} /> : <Empty />}
{applications.length > 0 ? (
<AppsLinkList apps={applications} />
) : (
<Empty />
)}
</div>
</PageContent>
</>

View File

@ -8,9 +8,10 @@ import {
ListItemText,
ListItemAvatar,
Switch,
Icon,
Typography,
} from '@material-ui/core';
import { Report, Extension, Timeline } from '@material-ui/icons';
import { shorten } from '../common';
import { CREATE_FEATURE, CREATE_STRATEGY } from '../AccessProvider/permissions';
import ConditionallyRender from '../common/ConditionallyRender/ConditionallyRender';
@ -29,7 +30,7 @@ function ApplicationView({
show={
<ListItem key={`not_found_${name}`}>
<ListItemAvatar>
<Icon>report</Icon>
<Report />
</ListItemAvatar>
<ListItemText
primary={
@ -42,7 +43,7 @@ function ApplicationView({
elseShow={
<ListItem key={`not_found_${name}`}>
<ListItemAvatar>
<Icon>report</Icon>
<Report />
</ListItemAvatar>
<ListItemText
primary={name}
@ -68,7 +69,7 @@ function ApplicationView({
key={`conditional_avatar_${name}`}
condition={showSwitch}
show={<Switch disabled value={!!enabled} />}
elseShow={<Icon>extension</Icon>}
elseShow={<Extension />}
/>
</ListItemAvatar>
<ListItemText
@ -149,7 +150,7 @@ function ApplicationView({
({ instanceId, clientIp, lastSeen, sdkVersion }) => (
<ListItem key={`${instanceId}`}>
<ListItemAvatar>
<Icon>timeline</Icon>
<Timeline />
</ListItemAvatar>
<ListItemText
primary={

View File

@ -1,6 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Menu } from '@material-ui/core';
import { ArrowDropDown } from '@material-ui/icons';
import { DropdownButton } from '..';
import styles from '../common.module.scss';
@ -10,7 +12,7 @@ const DropdownMenu = ({
id,
title,
callback,
icon = 'arrow_drop_down',
icon = <ArrowDropDown />,
label,
startIcon,
...rest
@ -58,7 +60,7 @@ DropdownMenu.propTypes = {
id: PropTypes.string,
title: PropTypes.string,
callback: PropTypes.func,
icon: PropTypes.string,
icon: PropTypes.object,
label: PropTypes.string,
startIcon: PropTypes.object,
};

View File

@ -12,6 +12,8 @@ import {
Avatar,
Typography,
} from '@material-ui/core';
import { Apps } from '@material-ui/icons';
import styles from './common.module.scss';
import ConditionallyRender from './ConditionallyRender/ConditionallyRender';
@ -31,7 +33,7 @@ export const AppsLinkList = ({ apps }) => (
key={`avatar_conditional_${appName}`}
condition={icon}
show={<Icon>{icon}</Icon>}
elseShow={<Icon>apps</Icon>}
elseShow={<Apps />}
/>
</Avatar>
</ListItemAvatar>
@ -114,19 +116,19 @@ export function getIcon(type) {
}
}
export const IconLink = ({ url, icon }) => (
export const IconLink = ({ url, icon: IconComponent }) => (
<a
href={url}
target="_blank"
rel="noreferrer"
className="mdl-color-text--grey-600"
>
<Icon>{icon}</Icon>
<IconComponent />
</a>
);
IconLink.propTypes = {
url: PropTypes.string,
icon: PropTypes.string,
icon: PropTypes.object,
};
export const DropdownButton = ({
@ -157,27 +159,24 @@ DropdownButton.propTypes = {
style: PropTypes.object,
id: PropTypes.string,
title: PropTypes.string,
icon: PropTypes.string,
icon: PropTypes.object,
startIcon: PropTypes.object,
};
export const MenuItemWithIcon = ({
icon,
label,
disabled,
...menuItemProps
}) => (
export const MenuItemWithIcon = React.forwardRef(
({ icon: IconComponent, label, disabled, ...menuItemProps }, ref) => (
<MenuItem
disabled={disabled}
style={{ display: 'flex', alignItems: 'center' }}
{...menuItemProps}
>
<Icon style={{ paddingRight: '16px' }}>{icon}</Icon>
<IconComponent />
{label}
</MenuItem>
)
);
MenuItemWithIcon.propTypes = {
icon: PropTypes.string,
icon: PropTypes.object,
label: PropTypes.string,
disabled: PropTypes.bool,
};

View File

@ -7,7 +7,6 @@ import {
DELETE_CONTEXT_FIELD,
} from '../../AccessProvider/permissions';
import {
Icon,
IconButton,
List,
ListItem,
@ -17,6 +16,8 @@ import {
useMediaQuery,
Button,
} from '@material-ui/core';
import { Add, Album, Delete } from '@material-ui/icons';
import { useContext, useState } from 'react';
import { Link } from 'react-router-dom';
import { useStyles } from './styles';
@ -34,7 +35,7 @@ const ContextList = ({ removeContextField, history, contextFields }) => {
contextFields.map(field => (
<ListItem key={field.name} classes={{ root: styles.listItem }}>
<ListItemIcon>
<Icon>album</Icon>
<Album />
</ListItemIcon>
<ListItemText
primary={
@ -55,7 +56,7 @@ const ContextList = ({ removeContextField, history, contextFields }) => {
setShowDelDialogue(true);
}}
>
<Icon>delete</Icon>
<Delete />
</IconButton>
</Tooltip>
}
@ -73,7 +74,7 @@ const ContextList = ({ removeContextField, history, contextFields }) => {
<IconButton
onClick={() => history.push('/context/create')}
>
<Icon>add</Icon>
<Add />
</IconButton>
</Tooltip>
}

View File

@ -1,13 +1,6 @@
import { Component } from 'react';
import PropTypes from 'prop-types';
import {
Button,
Chip,
TextField,
Switch,
Icon,
Typography,
} from '@material-ui/core';
import { Button, Chip, TextField, Switch, Typography } from '@material-ui/core';
import styles from './Context.module.scss';
import classnames from 'classnames';
import { FormButtons, styles as commonStyles } from '../common';
@ -15,6 +8,7 @@ import { trim } from '../common/util';
import PageContent from '../common/PageContent/PageContent';
import ConditionallyRender from '../common/ConditionallyRender';
import { Alert } from '@material-ui/lab';
import { Add } from '@material-ui/icons';
const sortIgnoreCase = (a, b) => {
a = a.toLowerCase();
@ -244,7 +238,7 @@ class AddContextComponent extends Component {
/>
<Button
className={styles.legalValueButton}
startIcon={<Icon>add</Icon>}
startIcon={<Add />}
onClick={this.addLegalValue}
variant="contained"
color="primary"

View File

@ -1,7 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Snackbar, Icon, IconButton } from '@material-ui/core';
import { Snackbar, IconButton } from '@material-ui/core';
import { Close, QuestionAnswer } from '@material-ui/icons';
const ErrorComponent = ({ errors, muteError }) => {
const showError = errors.length > 0;
@ -11,7 +12,7 @@ const ErrorComponent = ({ errors, muteError }) => {
action={
<React.Fragment>
<IconButton size="small" aria-label="close" color="inherit">
<Icon>close</Icon>
<Close />
</IconButton>
</React.Fragment>
}
@ -20,7 +21,7 @@ const ErrorComponent = ({ errors, muteError }) => {
autoHideDuration={10000}
message={
<div key={error}>
<Icon>question_answer</Icon>
<QuestionAnswer />
{error}
</div>
}

View File

@ -2,15 +2,9 @@ import { useContext, useLayoutEffect } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Link } from 'react-router-dom';
import {
Button,
List,
Tooltip,
IconButton,
Icon,
ListItem,
} from '@material-ui/core';
import { Button, List, Tooltip, IconButton, ListItem } from '@material-ui/core';
import useMediaQuery from '@material-ui/core/useMediaQuery';
import { Add } from '@material-ui/icons';
import FeatureToggleListItem from './FeatureToggleListItem';
import SearchField from '../../common/SearchField/SearchField';
@ -165,7 +159,7 @@ const FeatureToggleList = ({
)
}
>
<Icon>add</Icon>
<Add />
</IconButton>
</Tooltip>
}

View File

@ -2,6 +2,8 @@ import React from 'react';
import PropTypes from 'prop-types';
import { MenuItem, Typography } from '@material-ui/core';
import { HourglassEmpty, HourglassFull } from '@material-ui/icons';
import { MenuItemWithIcon } from '../../../common';
import DropdownMenu from '../../../common/DropdownMenu/DropdownMenu';
import ProjectSelect from '../../../common/ProjectSelect';
@ -49,14 +51,14 @@ const FeatureToggleListActions = ({
const renderMetricsOptions = () => [
<MenuItemWithIcon
icon="hourglass_empty"
icon={HourglassEmpty}
disabled={!settings.showLastHour}
data-target="minute"
label="Last minute"
key={1}
/>,
<MenuItemWithIcon
icon="hourglass_full"
icon={HourglassFull}
disabled={settings.showLastHour}
data-target="hour"
label="Last hour"

View File

@ -3,7 +3,9 @@ import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Link } from 'react-router-dom';
import { Switch, Icon, IconButton, ListItem } from '@material-ui/core';
import { Switch, IconButton, ListItem } from '@material-ui/core';
import { Undo } from '@material-ui/icons';
import TimeAgo from 'react-timeago';
import Progress from '../../ProgressWheel';
import Status from '../../status-component';
@ -27,15 +29,8 @@ const FeatureToggleListItem = ({
}) => {
const styles = useStyles();
const {
name,
description,
enabled,
type,
stale,
createdAt,
project,
} = feature;
const { name, description, enabled, type, stale, createdAt, project } =
feature;
const { showLastHour = false } = settings;
const isStale = showLastHour
? metricsLastHour.isFallback
@ -126,7 +121,7 @@ const FeatureToggleListItem = ({
condition={revive && hasAccess(UPDATE_FEATURE, project)}
show={
<IconButton onClick={() => revive(feature.name)}>
<Icon>undo</Icon>
<Undo />
</IconButton>
}
elseShow={<span />}

View File

@ -111,7 +111,16 @@ exports[`renders correctly with one feature 1`] = `
aria-hidden={true}
className="material-icons MuiIcon-root"
>
arrow_drop_down
<svg
aria-hidden={true}
className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M7 10l5 5 5-5z"
/>
</svg>
</span>
</span>
</span>
@ -155,7 +164,16 @@ exports[`renders correctly with one feature 1`] = `
aria-hidden={true}
className="material-icons MuiIcon-root"
>
arrow_drop_down
<svg
aria-hidden={true}
className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M7 10l5 5 5-5z"
/>
</svg>
</span>
</span>
</span>
@ -329,7 +347,16 @@ exports[`renders correctly with one feature without permissions 1`] = `
aria-hidden={true}
className="material-icons MuiIcon-root"
>
arrow_drop_down
<svg
aria-hidden={true}
className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M7 10l5 5 5-5z"
/>
</svg>
</span>
</span>
</span>
@ -376,7 +403,16 @@ exports[`renders correctly with one feature without permissions 1`] = `
aria-hidden={true}
className="material-icons MuiIcon-root"
>
arrow_drop_down
<svg
aria-hidden={true}
className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M7 10l5 5 5-5z"
/>
</svg>
</span>
</span>
</span>

View File

@ -5,12 +5,12 @@ import { Link } from 'react-router-dom';
import {
Button,
Icon,
TextField,
Switch,
Paper,
FormControlLabel,
} from '@material-ui/core';
import { FileCopy } from '@material-ui/icons';
import { styles as commonStyles } from '../../common';
import styles from './copy-feature-component.module.scss';
@ -154,7 +154,7 @@ class CopyFeatureComponent extends Component {
color="primary"
variant="contained"
>
<Icon>file_copy</Icon>
<FileCopy />
&nbsp;&nbsp;&nbsp; Create from copy
</Button>
</form>

View File

@ -1,6 +1,8 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Icon, Chip } from '@material-ui/core';
import { Chip } from '@material-ui/core';
import { Label } from '@material-ui/icons';
import ConditionallyRender from '../common/ConditionallyRender/ConditionallyRender';
import Dialogue from '../common/Dialogue';
@ -55,7 +57,7 @@ function FeatureTagComponent({
/>
);
default:
return <Icon>label</Icon>;
return <Label />;
}
} else {
return <span>{typeName[0].toUpperCase()}</span>;

View File

@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
import InputPercentage from './input-percentage';
import Select from '../../../common/select';
import { Icon, TextField, Tooltip, Typography } from '@material-ui/core';
import { TextField, Tooltip, Typography } from '@material-ui/core';
import { Info } from '@material-ui/icons';
const builtInStickinessOptions = [
{ key: 'default', label: 'default' },
@ -55,15 +56,13 @@ const FlexibleStrategy = ({ updateParameter, parameters, context }) => {
}}
>
Stickiness
<Icon
<Info
style={{
fontSize: '1rem',
color: 'gray',
marginLeft: '0.2rem',
}}
>
info
</Icon>
/>
</Typography>
</Tooltip>
<Select
@ -89,15 +88,13 @@ const FlexibleStrategy = ({ updateParameter, parameters, context }) => {
}}
>
GroupId
<Icon
<Info
style={{
fontSize: '1rem',
color: 'gray',
marginLeft: '0.2rem',
}}
>
info
</Icon>
/>
</Typography>
</Tooltip>
<TextField

View File

@ -1,6 +1,8 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { TextField, Button, Chip, Icon, Typography } from '@material-ui/core';
import { TextField, Button, Chip, Typography } from '@material-ui/core';
import { Add } from '@material-ui/icons';
import ConditionallyRender from '../../../common/ConditionallyRender/ConditionallyRender';
export default class InputList extends Component {
@ -36,7 +38,9 @@ export default class InputList extends Component {
const { name, list, setConfig } = this.props;
if (value) {
const newValues = value.split(/,\s*/).filter(a => !list.includes(a));
const newValues = value
.split(/,\s*/)
.filter(a => !list.includes(a));
if (newValues.length > 0) {
const newList = list.concat(newValues).filter(a => a);
setConfig(name, newList.join(','));
@ -48,7 +52,10 @@ export default class InputList extends Component {
onClose(index) {
const { name, list, setConfig } = this.props;
list[index] = null;
setConfig(name, list.length === 1 ? '' : list.filter(Boolean).join(','));
setConfig(
name,
list.length === 1 ? '' : list.filter(Boolean).join(',')
);
}
onChange = e => {
@ -72,7 +79,9 @@ export default class InputList extends Component {
key={index + entryValue}
label={entryValue}
style={{ marginRight: '3px', border: '1px solid' }}
onDelete={disabled ? undefined : () => this.onClose(index)}
onDelete={
disabled ? undefined : () => this.onClose(index)
}
title="Remove value"
/>
))}
@ -92,7 +101,11 @@ export default class InputList extends Component {
onChange={this.onChange}
onKeyDown={this.onKeyDown}
/>
<Button onClick={this.setValue} color="secondary" startIcon={<Icon>add</Icon>}>
<Button
onClick={this.setValue}
color="secondary"
startIcon={<Add />}
>
Add
</Button>
</div>

View File

@ -1,13 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import {
CardHeader,
Typography,
IconButton,
Icon,
Tooltip,
} from '@material-ui/core';
import { CardHeader, Typography, IconButton, Tooltip } from '@material-ui/core';
import { Edit, Delete } from '@material-ui/icons';
import { useStyles } from './StrategyCardHeader.styles.js';
import { ReactComponent as ReorderIcon } from '../../../../../assets/icons/reorder.svg';
@ -39,9 +34,9 @@ const StrategyCardHeader = ({
<div className={styles.strategyCardHeaderActions}>
<Tooltip title="Edit strategy">
<IconButton onClick={editStrategy}>
<Icon className={styles.strateyCardHeaderIcon}>
edit
</Icon>
<Edit
className={styles.strateyCardHeaderIcon}
/>
</IconButton>
</Tooltip>
{connectDragSource(
@ -62,13 +57,11 @@ const StrategyCardHeader = ({
onClick={removeStrategy}
disabled={disableDelete}
>
<Icon
<Delete
className={
styles.strateyCardHeaderIcon
}
>
delete
</Icon>
/>
</IconButton>
</span>
</Tooltip>
@ -76,13 +69,11 @@ const StrategyCardHeader = ({
elseShow={
<Tooltip title="Delete strategy">
<IconButton onClick={removeStrategy}>
<Icon
<Delete
className={
styles.strateyCardHeaderIcon
}
>
delete
</Icon>
/>
</IconButton>
</Tooltip>
}

View File

@ -1,6 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Tooltip, Icon, Typography } from '@material-ui/core';
import { Tooltip, Typography } from '@material-ui/core';
import { Info } from '@material-ui/icons';
import StrategyConstraintInputField from '../StrategyConstraintInputField';
import { useCommonStyles } from '../../../../../common.styles';
@ -56,9 +58,7 @@ const StrategyConstraintInput = ({
<Typography variant="subtitle2">
{'Constraints '}
<Icon style={{ fontSize: '0.9rem', color: 'gray' }}>
info
</Icon>
<Info style={{ fontSize: '0.9rem', color: 'gray' }} />
</Typography>
</Tooltip>
<table style={{ margin: 0 }}>

View File

@ -1,7 +1,9 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Icon, IconButton, TextField } from '@material-ui/core';
import { IconButton, TextField } from '@material-ui/core';
import { Autocomplete } from '@material-ui/lab';
import { Delete } from '@material-ui/icons';
import MySelect from '../../../../common/select';
import InputListField from '../../../../common/input-list-field';
import ConditionallyRender from '../../../../common/ConditionallyRender/ConditionallyRender';
@ -130,7 +132,7 @@ const StrategyConstraintInputField = ({
</td>
<td>
<IconButton onClick={removeConstraint}>
<Icon>delete</Icon>
<Delete />
</IconButton>
</td>
</tr>

View File

@ -1,8 +1,9 @@
import React from 'react';
import PropTypes from 'prop-types';
import { MenuItem } from '@material-ui/core';
import DropdownMenu from '../../common/DropdownMenu/DropdownMenu';
import { Add } from '@material-ui/icons';
import DropdownMenu from '../../common/DropdownMenu/DropdownMenu';
import styles from './strategy.module.scss';
function resolveDefaultParamVale(name, featureToggleName) {
@ -69,7 +70,7 @@ class AddStrategy extends React.Component {
id="strategies-add"
renderOptions={addStrategiesOptions}
label="Add strategy"
icon="add"
icon={<Add />}
className={styles.addStrategyButton}
color="secondary"
variant="contained"

View File

@ -4,12 +4,12 @@ import {
FormControl,
FormControlLabel,
Grid,
Icon,
Switch,
TextField,
InputAdornment,
Button,
} from '@material-ui/core';
import { Info } from '@material-ui/icons';
import Dialog from '../../../common/Dialogue';
import MySelect from '../../../common/select';
import { modalStyles, trim } from '../../../common/util';
@ -243,10 +243,7 @@ const AddVariant = ({
</Grid>
<p style={{ marginBottom: '1rem' }}>
<strong>Payload </strong>
<Icon
name="info"
title="Passed to the variant object. Can be anything (json, value, csv)"
/>
<Info title="Passed to the variant object. Can be anything (json, value, csv)" />
</p>
<Grid container>
<Grid item md={3}>
@ -277,10 +274,7 @@ const AddVariant = ({
show={
<p style={{ marginBottom: '.5rem' }}>
<strong>Overrides </strong>
<Icon
name="info"
title="Here you can specify which users should get this variant."
/>
<Info title="Here you can specify which users should get this variant." />
</p>
}
/>

View File

@ -2,7 +2,8 @@ import { connect } from 'react-redux';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import { Grid, IconButton, Icon, TextField } from '@material-ui/core';
import { Grid, IconButton, TextField } from '@material-ui/core';
import { Delete } from '@material-ui/icons';
import MySelect from '../../../../common/select';
import InputListField from '../../../../common/input-list-field';
import ConditionallyRender from '../../../../common/ConditionallyRender/ConditionallyRender';
@ -92,7 +93,7 @@ const OverrideConfig = ({
</Grid>
<Grid item md={1}>
<IconButton onClick={removeOverride(i)}>
<Icon>delete</Icon>
<Delete />
</IconButton>
</Grid>
</Grid>

View File

@ -146,12 +146,16 @@ exports[`renders correctly with with variants 1`] = `
<span
className="MuiIconButton-label"
>
<span
<svg
aria-hidden={true}
className="material-icons MuiIcon-root"
className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
edit
</span>
<path
d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
/>
</svg>
</span>
</button>
<button
@ -175,12 +179,16 @@ exports[`renders correctly with with variants 1`] = `
<span
className="MuiIconButton-label"
>
<span
<svg
aria-hidden={true}
className="material-icons MuiIcon-root"
className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
delete
</span>
<path
d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
/>
</svg>
</span>
</button>
</div>
@ -242,12 +250,16 @@ exports[`renders correctly with with variants 1`] = `
<span
className="MuiIconButton-label"
>
<span
<svg
aria-hidden={true}
className="material-icons MuiIcon-root"
className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
edit
</span>
<path
d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
/>
</svg>
</span>
</button>
<button
@ -271,12 +283,16 @@ exports[`renders correctly with with variants 1`] = `
<span
className="MuiIconButton-label"
>
<span
<svg
aria-hidden={true}
className="material-icons MuiIcon-root"
className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
delete
</span>
<path
d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
/>
</svg>
</span>
</button>
</div>
@ -350,12 +366,16 @@ exports[`renders correctly with with variants 1`] = `
<span
className="MuiIconButton-label"
>
<span
<svg
aria-hidden={true}
className="material-icons MuiIcon-root"
className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
edit
</span>
<path
d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
/>
</svg>
</span>
</button>
<button
@ -379,12 +399,16 @@ exports[`renders correctly with with variants 1`] = `
<span
className="MuiIconButton-label"
>
<span
<svg
aria-hidden={true}
className="material-icons MuiIcon-root"
className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
delete
</span>
<path
d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
/>
</svg>
</span>
</button>
</div>

View File

@ -1,20 +1,32 @@
import React from 'react';
import PropTypes from 'prop-types';
import { IconButton, Chip, Icon, TableCell, TableRow } from '@material-ui/core';
import { IconButton, Chip, TableCell, TableRow } from '@material-ui/core';
import { Edit, Delete } from '@material-ui/icons';
import { weightTypes } from './enums';
import ConditionallyRender from '../../common/ConditionallyRender/ConditionallyRender';
import styles from './variant.module.scss';
function VariantViewComponent({ variant, editVariant, removeVariant, editable }) {
function VariantViewComponent({
variant,
editVariant,
removeVariant,
editable,
}) {
const { FIX } = weightTypes;
return (
<TableRow>
<TableCell onClick={editVariant}>{variant.name}</TableCell>
<TableCell className={styles.chipContainer}>
<ConditionallyRender condition={variant.payload} show={<Chip label="Payload" />} />
<ConditionallyRender
condition={variant.overrides && variant.overrides.length > 0}
condition={variant.payload}
show={<Chip label="Payload" />}
/>
<ConditionallyRender
condition={
variant.overrides && variant.overrides.length > 0
}
show={
<Chip
style={{
@ -26,17 +38,19 @@ function VariantViewComponent({ variant, editVariant, removeVariant, editable })
/>
</TableCell>
<TableCell>{variant.weight / 10.0} %</TableCell>
<TableCell>{variant.weightType === FIX ? 'Fix' : 'Variable'}</TableCell>
<TableCell>
{variant.weightType === FIX ? 'Fix' : 'Variable'}
</TableCell>
<ConditionallyRender
condition={editable}
show={
<TableCell className={styles.actions}>
<div className={styles.actionsContainer}>
<IconButton onClick={editVariant}>
<Icon>edit</Icon>
<Edit />
</IconButton>
<IconButton onClick={removeVariant}>
<Icon>delete</Icon>
<Delete />
</IconButton>
</div>
</TableCell>

View File

@ -279,7 +279,16 @@ exports[`renders correctly with one feature 1`] = `
aria-hidden={true}
className="material-icons MuiIcon-root"
>
arrow_drop_down
<svg
aria-hidden={true}
className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M7 10l5 5 5-5z"
/>
</svg>
</span>
</span>
</span>

View File

@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Icon, Chip, Grid } from '@material-ui/core';
import LinkIcon from '@material-ui/icons/Link';
import { Chip, Grid } from '@material-ui/core';
import { ReportProblem, Link as LinkIcon } from '@material-ui/icons';
import { Link } from 'react-router-dom';
import { AppsLinkList, calc } from '../../common';
@ -123,12 +123,10 @@ export default class MetricComponent extends React.Component {
}
elseShow={
<div>
<Icon
<ReportProblem
className={styles.problemIcon}
title="Not used in an app in the last hour"
>
report problem
</Icon>
/>
<div>
<small>
<strong>

View File

@ -4,7 +4,14 @@ exports[`returns all baseRoutes 1`] = `
Array [
Object {
"component": [Function],
"icon": "list",
"icon": Object {
"$$typeof": Symbol(react.memo),
"compare": null,
"type": Object {
"$$typeof": Symbol(react.forward_ref),
"render": [Function],
},
},
"layout": "main",
"path": "/features",
"title": "Feature Toggles",
@ -12,7 +19,14 @@ Array [
},
Object {
"component": [Function],
"icon": "extension",
"icon": Object {
"$$typeof": Symbol(react.memo),
"compare": null,
"type": Object {
"$$typeof": Symbol(react.forward_ref),
"render": [Function],
},
},
"layout": "main",
"path": "/strategies",
"title": "Strategies",
@ -20,7 +34,14 @@ Array [
},
Object {
"component": [Function],
"icon": "history",
"icon": Object {
"$$typeof": Symbol(react.memo),
"compare": null,
"type": Object {
"$$typeof": Symbol(react.forward_ref),
"render": [Function],
},
},
"layout": "main",
"path": "/history",
"title": "Event History",
@ -28,7 +49,14 @@ Array [
},
Object {
"component": [Function],
"icon": "archive",
"icon": Object {
"$$typeof": Symbol(react.memo),
"compare": null,
"type": Object {
"$$typeof": Symbol(react.forward_ref),
"render": [Function],
},
},
"layout": "main",
"path": "/archive",
"title": "Archived Toggles",
@ -36,7 +64,14 @@ Array [
},
Object {
"component": [Function],
"icon": "apps",
"icon": Object {
"$$typeof": Symbol(react.memo),
"compare": null,
"type": Object {
"$$typeof": Symbol(react.forward_ref),
"render": [Function],
},
},
"layout": "main",
"path": "/applications",
"title": "Applications",
@ -45,7 +80,14 @@ Array [
Object {
"component": [Function],
"flag": "C",
"icon": "album",
"icon": Object {
"$$typeof": Symbol(react.memo),
"compare": null,
"type": Object {
"$$typeof": Symbol(react.forward_ref),
"render": [Function],
},
},
"layout": "main",
"path": "/context",
"title": "Context Fields",
@ -54,7 +96,14 @@ Array [
Object {
"component": [Function],
"flag": "P",
"icon": "folder_open",
"icon": Object {
"$$typeof": Symbol(react.memo),
"compare": null,
"type": Object {
"$$typeof": Symbol(react.forward_ref),
"render": [Function],
},
},
"layout": "main",
"path": "/projects",
"title": "Projects",
@ -62,7 +111,14 @@ Array [
},
Object {
"component": [Function],
"icon": "label",
"icon": Object {
"$$typeof": Symbol(react.memo),
"compare": null,
"type": Object {
"$$typeof": Symbol(react.forward_ref),
"render": [Function],
},
},
"layout": "main",
"path": "/tag-types",
"title": "Tag types",
@ -71,7 +127,14 @@ Array [
Object {
"component": [Function],
"hidden": false,
"icon": "device_hub",
"icon": Object {
"$$typeof": Symbol(react.memo),
"compare": null,
"type": Object {
"$$typeof": Symbol(react.forward_ref),
"render": [Function],
},
},
"layout": "main",
"path": "/addons",
"title": "Addons",
@ -79,7 +142,14 @@ Array [
},
Object {
"component": [Function],
"icon": "report",
"icon": Object {
"$$typeof": Symbol(react.memo),
"compare": null,
"type": Object {
"$$typeof": Symbol(react.forward_ref),
"render": [Function],
},
},
"layout": "main",
"path": "/reporting",
"title": "Reporting",
@ -88,7 +158,14 @@ Array [
Object {
"component": [Function],
"hidden": false,
"icon": "album",
"icon": Object {
"$$typeof": Symbol(react.memo),
"compare": null,
"type": Object {
"$$typeof": Symbol(react.forward_ref),
"render": [Function],
},
},
"layout": "main",
"path": "/admin",
"title": "Admin",
@ -96,7 +173,14 @@ Array [
},
Object {
"component": [Function],
"icon": "exit_to_app",
"icon": Object {
"$$typeof": Symbol(react.memo),
"compare": null,
"type": Object {
"$$typeof": Symbol(react.forward_ref),
"render": [Function],
},
},
"layout": "main",
"path": "/logout",
"title": "Sign out",

View File

@ -1,4 +1,3 @@
import React from 'react';
import { Divider, Drawer, List, Icon } from '@material-ui/core';
import { NavLink } from 'react-router-dom';
import classnames from 'classnames';
@ -17,8 +16,8 @@ const filterByFlags = flags => r => {
return true;
};
function getIcon(name) {
if (name === 'c_github') {
function getIcon(IconComponent) {
if (IconComponent === 'c_github') {
return (
<i
className={classnames(
@ -28,8 +27,10 @@ function getIcon(name) {
)}
/>
);
} else if (IconComponent === 'library_books') {
return <Icon className={styles.navigationIcon}>library_books</Icon>;
} else {
return <Icon className={styles.navigationIcon}>{name}</Icon>;
return <IconComponent className={styles.navigationIcon} />;
}
}

View File

@ -40,6 +40,22 @@ import NewUser from '../user/NewUser';
import ResetPassword from '../user/ResetPassword/ResetPassword';
import ForgottenPassword from '../user/ForgottenPassword/ForgottenPassword';
import {
List,
Extension,
History,
Archive as ArchiveIcon,
Apps,
Label,
DeviceHub,
Album,
ExitToApp,
FolderOpen,
Report,
Money,
Person,
} from '@material-ui/icons';
export const routes = [
// Features
{
@ -69,7 +85,7 @@ export const routes = [
{
path: '/features',
title: 'Feature Toggles',
icon: 'list',
icon: List,
component: Features,
type: 'protected',
layout: 'main',
@ -95,7 +111,7 @@ export const routes = [
{
path: '/strategies',
title: 'Strategies',
icon: 'extension',
icon: Extension,
component: Strategies,
type: 'protected',
layout: 'main',
@ -113,7 +129,7 @@ export const routes = [
{
path: '/history',
title: 'Event History',
icon: 'history',
icon: History,
component: HistoryPage,
type: 'protected',
layout: 'main',
@ -131,7 +147,7 @@ export const routes = [
{
path: '/archive',
title: 'Archived Toggles',
icon: 'archive',
icon: ArchiveIcon,
component: Archive,
type: 'protected',
layout: 'main',
@ -149,7 +165,7 @@ export const routes = [
{
path: '/applications',
title: 'Applications',
icon: 'apps',
icon: Apps,
component: Applications,
type: 'protected',
layout: 'main',
@ -175,7 +191,7 @@ export const routes = [
{
path: '/context',
title: 'Context Fields',
icon: 'album',
icon: Album,
component: ContextFields,
type: 'protected',
flag: C,
@ -219,7 +235,7 @@ export const routes = [
{
path: '/projects',
title: 'Projects',
icon: 'folder_open',
icon: FolderOpen,
component: ListProjects,
flag: P,
type: 'protected',
@ -245,7 +261,7 @@ export const routes = [
{
path: '/tag-types',
title: 'Tag types',
icon: 'label',
icon: Label,
component: ListTagTypes,
type: 'protected',
layout: 'main',
@ -262,7 +278,7 @@ export const routes = [
{
path: '/tags',
title: 'Tags',
icon: 'label',
icon: Label,
component: ListTags,
hidden: true,
type: 'protected',
@ -289,7 +305,7 @@ export const routes = [
{
path: '/addons',
title: 'Addons',
icon: 'device_hub',
icon: DeviceHub,
component: Addons,
hidden: false,
type: 'protected',
@ -298,7 +314,7 @@ export const routes = [
{
path: '/reporting',
title: 'Reporting',
icon: 'report',
icon: Report,
component: Reporting,
type: 'protected',
layout: 'main',
@ -331,7 +347,7 @@ export const routes = [
{
path: '/admin-invoices',
title: 'Invoices',
icon: 'money',
icon: Money,
component: AdminInvoice,
hidden: true,
type: 'protected',
@ -340,7 +356,7 @@ export const routes = [
{
path: '/admin',
title: 'Admin',
icon: 'album',
icon: Album,
component: Admin,
hidden: false,
type: 'protected',
@ -349,7 +365,7 @@ export const routes = [
{
path: '/logout',
title: 'Sign out',
icon: 'exit_to_app',
icon: ExitToApp,
component: LogoutFeatures,
type: 'unprotected',
layout: 'main',
@ -357,7 +373,7 @@ export const routes = [
{
path: '/login',
title: 'Log in',
icon: 'user',
icon: Person,
component: Login,
type: 'unprotected',
hidden: true,

View File

@ -8,7 +8,6 @@ import {
UPDATE_PROJECT,
} from '../../AccessProvider/permissions';
import {
Icon,
IconButton,
List,
ListItem,
@ -18,6 +17,13 @@ import {
Button,
useMediaQuery,
} from '@material-ui/core';
import {
Add,
SupervisedUserCircle,
Delete,
FolderOpen,
} from '@material-ui/icons';
import { Link } from 'react-router-dom';
import ConfirmDialogue from '../../common/Dialogue';
import PageContent from '../../common/PageContent/PageContent';
@ -45,7 +51,7 @@ const ProjectList = ({ projects, fetchProjects, removeProject, history }) => {
<IconButton
onClick={() => history.push('/projects/create')}
>
<Icon>add</Icon>
<Add />
</IconButton>
</Tooltip>
}
@ -76,7 +82,7 @@ const ProjectList = ({ projects, fetchProjects, removeProject, history }) => {
style={{ color: 'black' }}
>
<IconButton aria-label="manage_access">
<Icon>supervised_user_circle</Icon>
<SupervisedUserCircle />
</IconButton>
</Link>
</Tooltip>
@ -91,7 +97,7 @@ const ProjectList = ({ projects, fetchProjects, removeProject, history }) => {
setShowDelDialogue(true);
}}
>
<Icon>delete</Icon>
<Delete />
</IconButton>
</Tooltip>
);
@ -100,7 +106,7 @@ const ProjectList = ({ projects, fetchProjects, removeProject, history }) => {
projects.map(project => (
<ListItem key={project.id} classes={{ root: styles.listItem }}>
<ListItemAvatar>
<Icon>folder_open</Icon>
<FolderOpen />
</ListItemAvatar>
<ListItemText
primary={projectLink(project)}

View File

@ -10,10 +10,9 @@ import {
FormControl,
Grid,
Button,
Icon,
InputAdornment,
} from '@material-ui/core';
import { Search } from '@material-ui/icons';
import Autocomplete from '@material-ui/lab/Autocomplete';
function AddUserComponent({ roles, addUserToRole }) {
@ -101,7 +100,7 @@ function AddUserComponent({ roles, addUserToRole }) {
...params.InputProps,
startAdornment: (
<InputAdornment position="start">
<Icon>search</Icon>
<Search />
</InputAdornment>
),
endAdornment: (

View File

@ -9,7 +9,6 @@ import {
DialogContentText,
DialogTitle,
InputLabel,
Icon,
IconButton,
List,
ListItem,
@ -20,6 +19,7 @@ import {
Select,
FormControl,
} from '@material-ui/core';
import { Delete } from '@material-ui/icons';
import AddUserComponent from './access-add-user';
@ -197,7 +197,7 @@ function AccessComponent({ projectId, project }) {
title="Remove access"
onClick={removeAccess(user.id, user.roleId)}
>
<Icon>delete</Icon>
<Delete />
</IconButton>
</ListItemSecondaryAction>
</ListItem>

View File

@ -1,6 +1,7 @@
import PropTypes from 'prop-types';
import { Typography, TextField, Button, Icon } from '@material-ui/core';
import { Typography, TextField, Button } from '@material-ui/core';
import { Add } from '@material-ui/icons';
import PageContent from '../../common/PageContent/PageContent';
import ConditionallyRender from '../../common/ConditionallyRender/ConditionallyRender';
@ -83,7 +84,7 @@ const CreateStrategy = ({
e.preventDefault();
appParameter();
}}
startIcon={<Icon>add</Icon>}
startIcon={<Add />}
>
Add parameter
</Button>

View File

@ -9,11 +9,18 @@ import {
ListItem,
ListItemAvatar,
IconButton,
Icon,
ListItemText,
Button,
Tooltip,
} from '@material-ui/core';
import {
Add,
Visibility,
VisibilityOff,
Delete,
Extension,
} from '@material-ui/icons';
import {
CREATE_STRATEGY,
DELETE_STRATEGY,
@ -58,7 +65,7 @@ const StrategiesList = ({
history.push('/strategies/create')
}
>
<Icon>add</Icon>
<Add />
</IconButton>
</Tooltip>
}
@ -97,7 +104,7 @@ const StrategiesList = ({
})
}
>
<Icon>visibility</Icon>
<Visibility />
</IconButton>
</Tooltip>
);
@ -109,7 +116,7 @@ const StrategiesList = ({
<Tooltip title="You cannot deprecate the default strategy">
<div>
<IconButton disabled>
<Icon>visibility_off</Icon>
<VisibilityOff />
</IconButton>
</div>
</Tooltip>
@ -127,7 +134,7 @@ const StrategiesList = ({
})
}
>
<Icon>visibility_off</Icon>
<VisibilityOff />
</IconButton>
</div>
</Tooltip>
@ -149,7 +156,7 @@ const StrategiesList = ({
})
}
>
<Icon>delete</Icon>
<Delete />
</IconButton>
</Tooltip>
}
@ -157,7 +164,7 @@ const StrategiesList = ({
<Tooltip title="You cannot delete a built-in strategy">
<div>
<IconButton disabled>
<Icon>delete</Icon>
<Delete />
</IconButton>
</div>
</Tooltip>
@ -176,7 +183,7 @@ const StrategiesList = ({
}}
>
<ListItemAvatar>
<Icon style={{ color: '#0000008a' }}>extension</Icon>
<Extension style={{ color: '#0000008a' }} />
</ListItemAvatar>
<ListItemText
primary={strategyLink(strategy)}

View File

@ -37,17 +37,21 @@ exports[`renders correctly with one strategy 1`] = `
<div
className="MuiListItemAvatar-root"
>
<span
<svg
aria-hidden={true}
className="material-icons MuiIcon-root"
className="MuiSvgIcon-root"
focusable="false"
style={
Object {
"color": "#0000008a",
}
}
viewBox="0 0 24 24"
>
extension
</span>
<path
d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"
/>
</svg>
</div>
<div
className="MuiListItemText-root MuiListItemText-multiline"
@ -102,12 +106,16 @@ exports[`renders correctly with one strategy 1`] = `
<span
className="MuiIconButton-label"
>
<span
<svg
aria-hidden={true}
className="material-icons MuiIcon-root"
className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
visibility_off
</span>
<path
d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"
/>
</svg>
</span>
<span
className="MuiTouchRipple-root"
@ -185,17 +193,21 @@ exports[`renders correctly with one strategy without permissions 1`] = `
<div
className="MuiListItemAvatar-root"
>
<span
<svg
aria-hidden={true}
className="material-icons MuiIcon-root"
className="MuiSvgIcon-root"
focusable="false"
style={
Object {
"color": "#0000008a",
}
}
viewBox="0 0 24 24"
>
extension
</span>
<path
d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"
/>
</svg>
</div>
<div
className="MuiListItemText-root MuiListItemText-multiline"
@ -250,12 +262,16 @@ exports[`renders correctly with one strategy without permissions 1`] = `
<span
className="MuiIconButton-label"
>
<span
<svg
aria-hidden={true}
className="material-icons MuiIcon-root"
className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
visibility_off
</span>
<path
d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"
/>
</svg>
</span>
<span
className="MuiTouchRipple-root"
@ -293,12 +309,16 @@ exports[`renders correctly with one strategy without permissions 1`] = `
<span
className="MuiIconButton-label"
>
<span
<svg
aria-hidden={true}
className="material-icons MuiIcon-root"
className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
delete
</span>
<path
d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
/>
</svg>
</span>
</button>
</div>

View File

@ -70,12 +70,16 @@ exports[`renders correctly with one strategy 1`] = `
onTouchStart={[Function]}
title="Required"
>
<span
<svg
aria-hidden={true}
className="material-icons MuiIcon-root"
className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
add
</span>
<path
d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
/>
</svg>
</div>
<div
className="MuiListItemText-root MuiListItemText-multiline"
@ -122,12 +126,16 @@ exports[`renders correctly with one strategy 1`] = `
<div
className="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
>
<span
<svg
aria-hidden={true}
className="material-icons MuiIcon-root"
className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
apps
</span>
<path
d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"
/>
</svg>
</div>
</div>
<div
@ -183,12 +191,16 @@ exports[`renders correctly with one strategy 1`] = `
onTouchStart={[Function]}
title="Disabled"
>
<span
<svg
aria-hidden={true}
className="material-icons MuiIcon-root"
className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
pause
</span>
<path
d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"
/>
</svg>
</div>
<div
className="MuiListItemText-root MuiListItemText-multiline"

View File

@ -1,6 +1,15 @@
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { Grid, List, ListItem, ListItemText, ListItemAvatar, Icon, Tooltip } from '@material-ui/core';
import {
Grid,
List,
ListItem,
ListItemText,
ListItemAvatar,
Tooltip,
} from '@material-ui/core';
import { Add, RadioButtonChecked } from '@material-ui/icons';
import { TogglesLinkList } from './toggles-link-list';
import { AppsLinkList } from '../common';
import ConditionallyRender from '../common/ConditionallyRender/ConditionallyRender';
@ -22,14 +31,14 @@ class ShowStrategyComponent extends PureComponent {
show={
<Tooltip title="Required">
<ListItemAvatar>
<Icon>add</Icon>
<Add />
</ListItemAvatar>
</Tooltip>
}
elseShow={
<Tooltip title="Optional">
<ListItemAvatar>
<Icon>radio_button_unchecked</Icon>
<RadioButtonChecked />
</ListItemAvatar>
</Tooltip>
}

View File

@ -1,4 +1,12 @@
import { Icon, List, ListItem, ListItemAvatar, ListItemText, Tooltip } from '@material-ui/core';
import {
List,
ListItem,
ListItemAvatar,
ListItemText,
Tooltip,
} from '@material-ui/core';
import { PlayArrow, Pause } from '@material-ui/icons';
import styles from '../common/common.module.scss';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
@ -9,11 +17,11 @@ export const TogglesLinkList = ({ toggles }) => (
<List style={{ textAlign: 'left' }} className={styles.truncate}>
<ConditionallyRender
condition={toggles.length > 0}
show={toggles.map(({ name, description = '-', enabled, icon = enabled ? 'play_arrow' : 'pause' }) => (
show={toggles.map(({ name, description = '-', enabled }) => (
<ListItem key={name}>
<Tooltip title={enabled ? 'Enabled' : 'Disabled'}>
<ListItemAvatar>
<Icon>{icon}</Icon>
{enabled ? <PlayArrow /> : <Pause />}
</ListItemAvatar>
</Tooltip>
<ListItemText

View File

@ -6,12 +6,13 @@ import {
List,
ListItem,
ListItemIcon,
Icon,
ListItemText,
IconButton,
Button,
Tooltip,
} from '@material-ui/core';
import { Add, Delete, Label } from '@material-ui/icons';
import HeaderTitle from '../../common/HeaderTitle';
import PageContent from '../../common/PageContent/PageContent';
import ConditionallyRender from '../../common/ConditionallyRender/ConditionallyRender';
@ -53,7 +54,7 @@ const TagTypeList = ({ tagTypes, fetchTagTypes, removeTagType }) => {
history.push('/tag-types/create')
}
>
<Icon>add</Icon>
<Add />
</IconButton>
</Tooltip>
}
@ -91,7 +92,7 @@ const TagTypeList = ({ tagTypes, fetchTagTypes, removeTagType }) => {
})
}
>
<Icon>delete</Icon>
<Delete />
</IconButton>
</Tooltip>
);
@ -101,7 +102,7 @@ const TagTypeList = ({ tagTypes, fetchTagTypes, removeTagType }) => {
classes={{ root: styles.tagListItem }}
>
<ListItemIcon>
<Icon>label</Icon>
<Label />
</ListItemIcon>
<ListItemText primary={link} secondary={tagType.description} />
<ConditionallyRender

View File

@ -65,12 +65,16 @@ exports[`renders a list with elements correctly 1`] = `
<div
className="MuiListItemIcon-root"
>
<span
<svg
aria-hidden={true}
className="material-icons MuiIcon-root"
className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
label
</span>
<path
d="M17.63 5.84C17.27 5.33 16.67 5 16 5L5 5.01C3.9 5.01 3 5.9 3 7v10c0 1.1.9 1.99 2 1.99L16 19c.67 0 1.27-.33 1.63-.84L22 12l-4.37-6.16z"
/>
</svg>
</div>
<div
className="MuiListItemText-root MuiListItemText-multiline"
@ -117,12 +121,16 @@ exports[`renders a list with elements correctly 1`] = `
<span
className="MuiIconButton-label"
>
<span
<svg
aria-hidden={true}
className="material-icons MuiIcon-root"
className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
delete
</span>
<path
d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
/>
</svg>
</span>
<span
className="MuiTouchRipple-root"

View File

@ -5,7 +5,6 @@ import { useHistory } from 'react-router-dom';
import {
Button,
Icon,
IconButton,
List,
ListItem,
@ -13,6 +12,8 @@ import {
ListItemText,
Tooltip,
} from '@material-ui/core';
import { Add, Label, Delete } from '@material-ui/icons';
import { CREATE_TAG, DELETE_TAG } from '../../AccessProvider/permissions';
import ConditionallyRender from '../../common/ConditionallyRender/ConditionallyRender';
import HeaderTitle from '../../common/HeaderTitle';
@ -43,7 +44,7 @@ const TagList = ({ tags, fetchTags, removeTag }) => {
className={styles.tagListItem}
>
<ListItemIcon>
<Icon>label</Icon>
<Label />
</ListItemIcon>
<ListItemText primary={tag.value} secondary={tag.type} />
<ConditionallyRender
@ -58,7 +59,7 @@ const TagList = ({ tags, fetchTags, removeTag }) => {
<IconButton
onClick={e => remove({ type: tagType, value: tagValue }, e)}
>
<Icon>delete</Icon>
<Delete />
</IconButton>
</Tooltip>
);
@ -79,14 +80,14 @@ const TagList = ({ tags, fetchTags, removeTag }) => {
aria-label="add tag"
onClick={() => history.push('/tags/create')}
>
<Icon>add</Icon>
<Add />
</IconButton>
}
elseShow={
<Tooltip title="Add new tag">
<Button
color="primary"
startIcon={<Icon>add</Icon>}
startIcon={<Add />}
onClick={() => history.push('/tags/create')}
variant="contained"
>

View File

@ -2,7 +2,6 @@
import React, { useContext, useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import {
Icon,
Table,
TableHead,
TableBody,
@ -10,6 +9,7 @@ import {
TableCell,
IconButton,
} from '@material-ui/core';
import { Delete } from '@material-ui/icons';
import { Alert } from '@material-ui/lab';
import { formatFullDateTimeWithLocale } from '../../../component/common/util';
import CreateApiKey from './api-key-create';
@ -132,7 +132,7 @@ function ApiKeyList({
setShowDelete(true);
}}
>
<Icon>delete</Icon>
<Delete />
</IconButton>
</TableCell>
}

View File

@ -1,7 +1,7 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Icon, IconButton } from '@material-ui/core';
import { IconButton } from '@material-ui/core';
import { Visibility } from '@material-ui/icons';
function Secret({ value }) {
const [show, setShow] = useState(false);
const toggle = evt => {
@ -17,8 +17,12 @@ function Secret({ value }) {
<span>***************************</span>
)}
<IconButton aria-label="Show token" onClick={toggle} title="Show token">
<Icon style={{ marginLeft: '5px', fontSize: '1.2em' }}>visibility</Icon>
<IconButton
aria-label="Show token"
onClick={toggle}
title="Show token"
>
<Visibility style={{ marginLeft: '5px', fontSize: '1.2em' }} />
</IconButton>
</div>
);

View File

@ -3,9 +3,9 @@ import {
TableCell,
Avatar,
IconButton,
Icon,
Typography,
} from '@material-ui/core';
import { Edit, Lock, Delete } from '@material-ui/icons';
import { SyntheticEvent, useContext } from 'react';
import { ADMIN } from '../../../../../component/AccessProvider/permissions';
import ConditionallyRender from '../../../../../component/common/ConditionallyRender';
@ -78,7 +78,7 @@ const UserListItem = ({
title="Edit"
onClick={openUpdateDialog(user)}
>
<Icon>edit</Icon>
<Edit />
</IconButton>
<IconButton
data-loading
@ -86,7 +86,7 @@ const UserListItem = ({
title="Change password"
onClick={openPwDialog(user)}
>
<Icon>lock</Icon>
<Lock />
</IconButton>
<IconButton
data-loading
@ -94,7 +94,7 @@ const UserListItem = ({
title="Remove user"
onClick={openDelDialog(user)}
>
<Icon>delete</Icon>
<Delete />
</IconButton>
</TableCell>
}

View File

@ -8,7 +8,14 @@ Object {
"links": Array [
Object {
"href": "https://docs.getunleash.io/docs?source=oss",
"icon": "library_books",
"icon": Object {
"$$typeof": Symbol(react.memo),
"compare": null,
"type": Object {
"$$typeof": Symbol(react.forward_ref),
"render": [Function],
},
},
"title": "User documentation",
"value": "Documentation",
},
@ -33,7 +40,14 @@ Object {
"links": Array [
Object {
"href": "https://docs.getunleash.io/docs?source=oss",
"icon": "library_books",
"icon": Object {
"$$typeof": Symbol(react.memo),
"compare": null,
"type": Object {
"$$typeof": Symbol(react.forward_ref),
"render": [Function],
},
},
"title": "User documentation",
"value": "Documentation",
},
@ -58,7 +72,14 @@ Object {
"links": Array [
Object {
"href": "https://docs.getunleash.io/docs?source=oss",
"icon": "library_books",
"icon": Object {
"$$typeof": Symbol(react.memo),
"compare": null,
"type": Object {
"$$typeof": Symbol(react.forward_ref),
"render": [Function],
},
},
"title": "User documentation",
"value": "Documentation",
},

View File

@ -1,14 +1,15 @@
import { Map as $Map } from 'immutable';
import { LibraryBooks } from '@material-ui/icons';
import { RECEIVE_CONFIG } from './actions';
import { getBasePath } from '../../utils/format-path';
import { getBasePath } from '../../utils/format-path';
const localStorage = window.localStorage || {
setItem: () => {},
getItem: () => {},
};
const basePath =  getBasePath();
const basePath = getBasePath();
const UI_CONFIG = `${basePath}:ui_config`;
const DEFAULT = new $Map({
@ -21,7 +22,7 @@ const DEFAULT = new $Map({
links: [
{
value: 'Documentation',
icon: 'library_books',
icon: LibraryBooks,
href: 'https://docs.getunleash.io/docs?source=oss',
title: 'User documentation',
},