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

Offline mode (#312)

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/public/index.html
View File

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

24
frontend/src/app.css
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; box-sizing: border-box;
} }

BIN
frontend/src/assets/fonts/Roboto-300.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/Roboto-400.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/Roboto-500.ttf Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/Roboto-700.ttf Normal file
View File

Binary file not shown.

6
frontend/src/component/addons/AddonList/AddonList.jsx
View File

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

15
frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.jsx
View File

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

72
frontend/src/component/application/__tests__/__snapshots__/application-edit-component-test.js.snap
View File

@ -88,12 +88,16 @@ exports[`renders correctly with permissions 1`] = `
<span <span
className="MuiIconButton-label" className="MuiIconButton-label"
> >
<span <svg
aria-hidden={true} aria-hidden={true}
className="material-icons MuiIcon-root" className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
> >
link <path
</span> 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> </span>
</a> </a>
<button <button
@ -333,12 +337,16 @@ exports[`renders correctly with permissions 1`] = `
<div <div
className="MuiListItemAvatar-root" className="MuiListItemAvatar-root"
> >
<span <svg
aria-hidden={true} aria-hidden={true}
className="material-icons MuiIcon-root" className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
> >
report <path
</span> 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>
<div <div
className="MuiListItemText-root MuiListItemText-multiline" className="MuiListItemText-root MuiListItemText-multiline"
@ -386,12 +394,16 @@ exports[`renders correctly with permissions 1`] = `
<div <div
className="MuiListItemAvatar-root" className="MuiListItemAvatar-root"
> >
<span <svg
aria-hidden={true} aria-hidden={true}
className="material-icons MuiIcon-root" className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
> >
extension <path
</span> 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>
<div <div
className="MuiListItemText-root MuiListItemText-multiline" className="MuiListItemText-root MuiListItemText-multiline"
@ -420,12 +432,16 @@ exports[`renders correctly with permissions 1`] = `
<div <div
className="MuiListItemAvatar-root" className="MuiListItemAvatar-root"
> >
<span <svg
aria-hidden={true} aria-hidden={true}
className="material-icons MuiIcon-root" className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
> >
report <path
</span> 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>
<div <div
className="MuiListItemText-root MuiListItemText-multiline" className="MuiListItemText-root MuiListItemText-multiline"
@ -474,12 +490,16 @@ exports[`renders correctly with permissions 1`] = `
<div <div
className="MuiListItemAvatar-root" className="MuiListItemAvatar-root"
> >
<span <svg
aria-hidden={true} aria-hidden={true}
className="material-icons MuiIcon-root" className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
> >
timeline <path
</span> 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>
<div <div
className="MuiListItemText-root MuiListItemText-multiline" className="MuiListItemText-root MuiListItemText-multiline"
@ -586,12 +606,16 @@ exports[`renders correctly without permission 1`] = `
<span <span
className="MuiIconButton-label" className="MuiIconButton-label"
> >
<span <svg
aria-hidden={true} aria-hidden={true}
className="material-icons MuiIcon-root" className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
> >
link <path
</span> 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> </span>
</a> </a>
</div> </div>

5
frontend/src/component/application/application-edit-component.js
View File

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

29
frontend/src/component/application/application-list-component.js
View File

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

11
frontend/src/component/application/application-view.jsx
View File

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

6
frontend/src/component/common/DropdownMenu/DropdownMenu.jsx
View File

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

39
frontend/src/component/common/index.js
View File

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

9
frontend/src/component/context/ContextList/ContextList.jsx
View File

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

12
frontend/src/component/context/form-context-component.jsx
View File

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

7
frontend/src/component/error/error-component.jsx
View File

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

12
frontend/src/component/feature/FeatureToggleList/FeatureToggleList.jsx
View File

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

6
frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/FeatureToggleListActions.jsx
View File

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

17
frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.jsx
View File

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

44
frontend/src/component/feature/FeatureToggleList/__tests__/__snapshots__/list-component-test.jsx.snap
View File

@ -111,7 +111,16 @@ exports[`renders correctly with one feature 1`] = `
aria-hidden={true} aria-hidden={true}
className="material-icons MuiIcon-root" 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> </span>
</span> </span>
@ -155,7 +164,16 @@ exports[`renders correctly with one feature 1`] = `
aria-hidden={true} aria-hidden={true}
className="material-icons MuiIcon-root" 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> </span>
</span> </span>
@ -329,7 +347,16 @@ exports[`renders correctly with one feature without permissions 1`] = `
aria-hidden={true} aria-hidden={true}
className="material-icons MuiIcon-root" 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> </span>
</span> </span>
@ -376,7 +403,16 @@ exports[`renders correctly with one feature without permissions 1`] = `
aria-hidden={true} aria-hidden={true}
className="material-icons MuiIcon-root" 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> </span>
</span> </span>

4
frontend/src/component/feature/create/copy-feature-component.jsx
View File

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

6
frontend/src/component/feature/feature-tag-component.jsx
View File

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

15
frontend/src/component/feature/strategy/EditStrategyModal/FlexibleStrategy.jsx
View File

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

23
frontend/src/component/feature/strategy/EditStrategyModal/input-list.jsx
View File

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

27
frontend/src/component/feature/strategy/StrategyCard/StrategyCardHeader/StrategyCardHeader.jsx
View File

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

8
frontend/src/component/feature/strategy/StrategyConstraint/StrategyConstraintInput/StrategyConstraintInput.jsx
View File

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

6
frontend/src/component/feature/strategy/StrategyConstraint/StrategyConstraintInputField/StrategyConstraintInputField.jsx
View File

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

5
frontend/src/component/feature/strategy/strategies-add.jsx
View File

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

12
frontend/src/component/feature/variant/AddVariant/AddVariant.jsx
View File

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

5
frontend/src/component/feature/variant/AddVariant/OverrideConfig/OverrideConfig.jsx
View File

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

72
frontend/src/component/feature/variant/__tests__/__snapshots__/update-variant-component-test.jsx.snap
View File

@ -146,12 +146,16 @@ exports[`renders correctly with with variants 1`] = `
<span <span
className="MuiIconButton-label" className="MuiIconButton-label"
> >
<span <svg
aria-hidden={true} aria-hidden={true}
className="material-icons MuiIcon-root" className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
> >
edit <path
</span> 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> </span>
</button> </button>
<button <button
@ -175,12 +179,16 @@ exports[`renders correctly with with variants 1`] = `
<span <span
className="MuiIconButton-label" className="MuiIconButton-label"
> >
<span <svg
aria-hidden={true} aria-hidden={true}
className="material-icons MuiIcon-root" className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
> >
delete <path
</span> 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>
</button> </button>
</div> </div>
@ -242,12 +250,16 @@ exports[`renders correctly with with variants 1`] = `
<span <span
className="MuiIconButton-label" className="MuiIconButton-label"
> >
<span <svg
aria-hidden={true} aria-hidden={true}
className="material-icons MuiIcon-root" className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
> >
edit <path
</span> 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> </span>
</button> </button>
<button <button
@ -271,12 +283,16 @@ exports[`renders correctly with with variants 1`] = `
<span <span
className="MuiIconButton-label" className="MuiIconButton-label"
> >
<span <svg
aria-hidden={true} aria-hidden={true}
className="material-icons MuiIcon-root" className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
> >
delete <path
</span> 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>
</button> </button>
</div> </div>
@ -350,12 +366,16 @@ exports[`renders correctly with with variants 1`] = `
<span <span
className="MuiIconButton-label" className="MuiIconButton-label"
> >
<span <svg
aria-hidden={true} aria-hidden={true}
className="material-icons MuiIcon-root" className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
> >
edit <path
</span> 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> </span>
</button> </button>
<button <button
@ -379,12 +399,16 @@ exports[`renders correctly with with variants 1`] = `
<span <span
className="MuiIconButton-label" className="MuiIconButton-label"
> >
<span <svg
aria-hidden={true} aria-hidden={true}
className="material-icons MuiIcon-root" className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
> >
delete <path
</span> 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>
</button> </button>
</div> </div>

28
frontend/src/component/feature/variant/variant-view-component.jsx
View File

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

11
frontend/src/component/feature/view/__tests__/__snapshots__/view-component-test.jsx.snap
View File

@ -279,7 +279,16 @@ exports[`renders correctly with one feature 1`] = `
aria-hidden={true} aria-hidden={true}
className="material-icons MuiIcon-root" 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> </span>
</span> </span>

10
frontend/src/component/feature/view/metric-component.jsx
View File

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

108
frontend/src/component/menu/__tests__/__snapshots__/routes-test.jsx.snap
View File

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

9
frontend/src/component/menu/drawer.jsx
View File

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

46
frontend/src/component/menu/routes.js
View File

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

16
frontend/src/component/project/ProjectList/ProjectList.jsx
View File

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

5
frontend/src/component/project/access-add-user.js
View File

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

4
frontend/src/component/project/access-component.js
View File

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

5
frontend/src/component/strategies/CreateStrategy/CreateStrategy.jsx
View File

@ -1,6 +1,7 @@
import PropTypes from 'prop-types'; 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 PageContent from '../../common/PageContent/PageContent';
import ConditionallyRender from '../../common/ConditionallyRender/ConditionallyRender'; import ConditionallyRender from '../../common/ConditionallyRender/ConditionallyRender';
@ -83,7 +84,7 @@ const CreateStrategy = ({
e.preventDefault(); e.preventDefault();
appParameter(); appParameter();
}} }}
startIcon={<Icon>add</Icon>} startIcon={<Add />}
> >
Add parameter Add parameter
</Button> </Button>

23
frontend/src/component/strategies/StrategiesList/StrategiesList.jsx
View File

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

60
frontend/src/component/strategies/__tests__/__snapshots__/list-component-test.jsx.snap
View File

@ -37,17 +37,21 @@ exports[`renders correctly with one strategy 1`] = `
<div <div
className="MuiListItemAvatar-root" className="MuiListItemAvatar-root"
> >
<span <svg
aria-hidden={true} aria-hidden={true}
className="material-icons MuiIcon-root" className="MuiSvgIcon-root"
focusable="false"
style={ style={
Object { Object {
"color": "#0000008a", "color": "#0000008a",
} }
} }
viewBox="0 0 24 24"
> >
extension <path
</span> 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>
<div <div
className="MuiListItemText-root MuiListItemText-multiline" className="MuiListItemText-root MuiListItemText-multiline"
@ -102,12 +106,16 @@ exports[`renders correctly with one strategy 1`] = `
<span <span
className="MuiIconButton-label" className="MuiIconButton-label"
> >
<span <svg
aria-hidden={true} aria-hidden={true}
className="material-icons MuiIcon-root" className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
> >
visibility_off <path
</span> 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>
<span <span
className="MuiTouchRipple-root" className="MuiTouchRipple-root"
@ -185,17 +193,21 @@ exports[`renders correctly with one strategy without permissions 1`] = `
<div <div
className="MuiListItemAvatar-root" className="MuiListItemAvatar-root"
> >
<span <svg
aria-hidden={true} aria-hidden={true}
className="material-icons MuiIcon-root" className="MuiSvgIcon-root"
focusable="false"
style={ style={
Object { Object {
"color": "#0000008a", "color": "#0000008a",
} }
} }
viewBox="0 0 24 24"
> >
extension <path
</span> 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>
<div <div
className="MuiListItemText-root MuiListItemText-multiline" className="MuiListItemText-root MuiListItemText-multiline"
@ -250,12 +262,16 @@ exports[`renders correctly with one strategy without permissions 1`] = `
<span <span
className="MuiIconButton-label" className="MuiIconButton-label"
> >
<span <svg
aria-hidden={true} aria-hidden={true}
className="material-icons MuiIcon-root" className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
> >
visibility_off <path
</span> 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>
<span <span
className="MuiTouchRipple-root" className="MuiTouchRipple-root"
@ -293,12 +309,16 @@ exports[`renders correctly with one strategy without permissions 1`] = `
<span <span
className="MuiIconButton-label" className="MuiIconButton-label"
> >
<span <svg
aria-hidden={true} aria-hidden={true}
className="material-icons MuiIcon-root" className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
> >
delete <path
</span> 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>
</button> </button>
</div> </div>

36
frontend/src/component/strategies/__tests__/__snapshots__/strategy-details-component-test.jsx.snap
View File

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

15
frontend/src/component/strategies/show-strategy-component.js
View File

@ -1,6 +1,15 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import PropTypes from 'prop-types'; 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 { TogglesLinkList } from './toggles-link-list';
import { AppsLinkList } from '../common'; import { AppsLinkList } from '../common';
import ConditionallyRender from '../common/ConditionallyRender/ConditionallyRender'; import ConditionallyRender from '../common/ConditionallyRender/ConditionallyRender';
@ -22,14 +31,14 @@ class ShowStrategyComponent extends PureComponent {
show={ show={
<Tooltip title="Required"> <Tooltip title="Required">
<ListItemAvatar> <ListItemAvatar>
<Icon>add</Icon> <Add />
</ListItemAvatar> </ListItemAvatar>
</Tooltip> </Tooltip>
} }
elseShow={ elseShow={
<Tooltip title="Optional"> <Tooltip title="Optional">
<ListItemAvatar> <ListItemAvatar>
<Icon>radio_button_unchecked</Icon> <RadioButtonChecked />
</ListItemAvatar> </ListItemAvatar>
</Tooltip> </Tooltip>
} }

14
frontend/src/component/strategies/toggles-link-list.jsx
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 styles from '../common/common.module.scss';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
@ -9,11 +17,11 @@ export const TogglesLinkList = ({ toggles }) => (
<List style={{ textAlign: 'left' }} className={styles.truncate}> <List style={{ textAlign: 'left' }} className={styles.truncate}>
<ConditionallyRender <ConditionallyRender
condition={toggles.length > 0} condition={toggles.length > 0}
show={toggles.map(({ name, description = '-', enabled, icon = enabled ? 'play_arrow' : 'pause' }) => ( show={toggles.map(({ name, description = '-', enabled }) => (
<ListItem key={name}> <ListItem key={name}>
<Tooltip title={enabled ? 'Enabled' : 'Disabled'}> <Tooltip title={enabled ? 'Enabled' : 'Disabled'}>
<ListItemAvatar> <ListItemAvatar>
<Icon>{icon}</Icon> {enabled ? <PlayArrow /> : <Pause />}
</ListItemAvatar> </ListItemAvatar>
</Tooltip> </Tooltip>
<ListItemText <ListItemText

9
frontend/src/component/tag-types/TagTypeList/TagTypeList.jsx
View File

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

24
frontend/src/component/tag-types/__tests__/__snapshots__/tag-type-list-component-test.js.snap
View File

@ -65,12 +65,16 @@ exports[`renders a list with elements correctly 1`] = `
<div <div
className="MuiListItemIcon-root" className="MuiListItemIcon-root"
> >
<span <svg
aria-hidden={true} aria-hidden={true}
className="material-icons MuiIcon-root" className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
> >
label <path
</span> 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>
<div <div
className="MuiListItemText-root MuiListItemText-multiline" className="MuiListItemText-root MuiListItemText-multiline"
@ -117,12 +121,16 @@ exports[`renders a list with elements correctly 1`] = `
<span <span
className="MuiIconButton-label" className="MuiIconButton-label"
> >
<span <svg
aria-hidden={true} aria-hidden={true}
className="material-icons MuiIcon-root" className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
> >
delete <path
</span> 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>
<span <span
className="MuiTouchRipple-root" className="MuiTouchRipple-root"

11
frontend/src/component/tags/TagList/TagList.jsx
View File

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

4
frontend/src/page/admin/api/api-key-list.jsx
View File

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

12
frontend/src/page/admin/api/secret.jsx
View File

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

8
frontend/src/page/admin/users/UsersList/UserListItem/UserListItem.tsx
View File

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

27
frontend/src/store/ui-config/__tests__/__snapshots__/ui-config-store.test.js.snap
View File

@ -8,7 +8,14 @@ Object {
"links": Array [ "links": Array [
Object { Object {
"href": "https://docs.getunleash.io/docs?source=oss", "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", "title": "User documentation",
"value": "Documentation", "value": "Documentation",
}, },
@ -33,7 +40,14 @@ Object {
"links": Array [ "links": Array [
Object { Object {
"href": "https://docs.getunleash.io/docs?source=oss", "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", "title": "User documentation",
"value": "Documentation", "value": "Documentation",
}, },
@ -58,7 +72,14 @@ Object {
"links": Array [ "links": Array [
Object { Object {
"href": "https://docs.getunleash.io/docs?source=oss", "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", "title": "User documentation",
"value": "Documentation", "value": "Documentation",
}, },

7
frontend/src/store/ui-config/index.js
View File

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

2
frontend/yarn.lock
View File

@ -12709,4 +12709,4 @@ yargs@^15.4.1:
yocto-queue@^0.1.0: yocto-queue@^0.1.0:
version "0.1.0" version "0.1.0"
resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b" resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q== integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==