Overview
;
+ case 'jira-comment':
+ return 
;
+ case 'webhook':
+ return 
;
+ default:
+ return (
+ +
- {providers.map(provider => renderProvider(provider))}
- {addons.map(addon => renderAddon(addon))}
{errors.general}
-Events
{error} -
-
);
};
@@ -54,8 +58,8 @@ const AddonParameters = ({ provider, config, errors, setParameterValue, editMode
{definition.description}
Parameters
{editMode ? (- Sensitive parameters will be masked with value "*****". If you don't change the value they - will not be updated when saving. + Sensitive parameters will be masked with value "***** + ". If you don't change the value they will not be updated when saving.
) : null} {provider.parameters.map(p => ( @@ -76,7 +80,7 @@ AddonParameters.propTypes = { config: PropTypes.object.isRequired, errors: PropTypes.object.isRequired, setParameterValue: PropTypes.func.isRequired, - editMode: PropTypes.bool.optional, + editMode: PropTypes.bool, }; export default AddonParameters; diff --git a/frontend/src/component/addons/list-container.jsx b/frontend/src/component/addons/index.jsx similarity index 94% rename from frontend/src/component/addons/list-container.jsx rename to frontend/src/component/addons/index.jsx index ed83e458e6..1a5c6d65b8 100644 --- a/frontend/src/component/addons/list-container.jsx +++ b/frontend/src/component/addons/index.jsx @@ -1,5 +1,5 @@ import { connect } from 'react-redux'; -import AddonsListComponent from './list-component.jsx'; +import AddonsListComponent from './AddonList'; import { fetchAddons, removeAddon, updateAddon } from '../../store/addons/actions'; import { hasPermission } from '../../permissions'; diff --git a/frontend/src/component/addons/list-component.jsx b/frontend/src/component/addons/list-component.jsx deleted file mode 100644 index eb7c23c79c..0000000000 --- a/frontend/src/component/addons/list-component.jsx +++ /dev/null @@ -1,117 +0,0 @@ -import React, { useEffect } from 'react'; -import PropTypes from 'prop-types'; -import { Link } from 'react-router-dom'; - -import { List, ListItem, ListItemAction, IconButton, Card, Button } from 'react-mdl'; -import { HeaderTitle, styles as commonStyles } from '../common'; -import { CREATE_ADDON, DELETE_ADDON, UPDATE_ADDON } from '../../permissions'; - -const style = { width: '40px', height: '40px', marginRight: '16px', float: 'left' }; - -const getIcon = name => { - switch (name) { - case 'slack': - return;
- case 'jira-comment':
- return ;
- case 'webhook':
- return ;
- default:
- return device_hub;
- }
-};
-
-const AddonListComponent = ({ addons, providers, fetchAddons, removeAddon, toggleAddon, history, hasPermission }) => {
- useEffect(() => {
- if (addons.length === 0) {
- fetchAddons();
- }
- }, []);
-
- const onRemoveAddon = addon => () => removeAddon(addon);
-
- return (
-
- {addons.length > 0 ? (
-
-
- ) : null}
-
-
-
-
- );
-};
-AddonListComponent.propTypes = {
- addons: PropTypes.array.isRequired,
- providers: PropTypes.array.isRequired,
- fetchAddons: PropTypes.func.isRequired,
- removeAddon: PropTypes.func.isRequired,
- toggleAddon: PropTypes.func.isRequired,
- history: PropTypes.object.isRequired,
- hasPermission: PropTypes.func.isRequired,
-};
-
-export default AddonListComponent;
diff --git a/frontend/src/component/api/__tests__/__snapshots__/show-api-details-component-test.jsx.snap b/frontend/src/component/api/__tests__/__snapshots__/show-api-details-component-test.jsx.snap
index 2381c154fb..f2bd470bc2 100644
--- a/frontend/src/component/api/__tests__/__snapshots__/show-api-details-component-test.jsx.snap
+++ b/frontend/src/component/api/__tests__/__snapshots__/show-api-details-component-test.jsx.snap
@@ -1,68 +1,60 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly with empty version 1`] = `
--
- {addons.map(addon => (
-
-
-
- {providers.map((provider, i) => (
-
+ Unleash +
- (test) + \`($ + test + )\`- - - +
We are the best!
- - - -
+ Unleash 1.1.0 +
- (test) + \`($ + test + )\`- - - +
We are the best!
- - - -
+ Unleash 1.1.0 +
+- - -
- - - -
{`${versionStr}`}
++
- {updateNotification ? `${updateNotification}` : ''}
{slogan}
- {instanceId ? `${instanceId}` : ''} -
Loading...
-
+
+
+
`;
exports[`renders correctly with permissions 1`] = `
-- app description -
-- Created: - - Invalid Date - -
-
-
-
-
- Delete
-
-
-
-
-
- Details
-
-
- Edit
-
-
+
+
+
+
+ -
+
+
+
+ apps
+
+
+ test-app
+
+
+
+
+
+
+ link
+
+
+
+
+
+
- - Toggles -
--
+ app description +
++ Created: + + Invalid Date + +
+ +
+
+
+
+
-
-
+
+
+
+
+
+
+
+
`;
exports[`renders correctly without permission 1`] = `
-
-
-
- ToggleB
-
-
-
-
-
-
-
-
-
-
-
- StrategyA
-
-
-
-
-
-
- StrategyB
-
-
-
-
-
-
-
-
-
-
- 123.123.123.123
- last seen at
-
- 02/23/2017, 03:56:49 PM
-
-
+
+
+ - Implemented strategies -
--
- 1 - Instances registered -
--
- instance-1
-
- (4.0)
-
-
-
-
-
-
+
+
+
+
+ + Toggles +
++
-
+
-
+ + + + + + + + + + +++ + + ToggleA + + ++
+ this is A toggle +
+
+ -
+ + + report + +++ + + ToggleB + + ++
+ Missing, want to create? +
+
+
+
+
+ + Implemented strategies +
++
-
+
-
+ + + extension + +++ + + StrategyA + + ++
+ A description +
+
+ -
+ + + report + +++ + + StrategyB + + ++
+ Missing, want to create? +
+
+
+
+
+ + 1 + Instances registered +
++
-
+
-
+ + + timeline + +++ + instance-1 (4.0) + ++
+ + 123.123.123.123 + last seen at + + 02/23/2017, 03:56:49 PM + + +
+
+
- app description -
-- Created: - - Invalid Date - -
-- Toggles -
--
-
-
-
- Implemented strategies -
--
- 1 - Instances registered -
--
+
+ apps
+
+
+ test-app
+
+
+
+
+
+
+
+ link
+
+
+
+
+
+
+
+
+
`;
diff --git a/frontend/src/component/application/__tests__/application-edit-component-test.js b/frontend/src/component/application/__tests__/application-edit-component-test.js
index cd3c82b968..c8935c57b7 100644
--- a/frontend/src/component/application/__tests__/application-edit-component-test.js
+++ b/frontend/src/component/application/__tests__/application-edit-component-test.js
@@ -1,11 +1,11 @@
import React from 'react';
+import { ThemeProvider } from '@material-ui/core';
import ClientApplications from '../application-edit-component';
import renderer from 'react-test-renderer';
import { MemoryRouter } from 'react-router-dom';
import { CREATE_FEATURE, CREATE_STRATEGY, UPDATE_APPLICATION } from '../../../permissions';
-
-jest.mock('react-mdl');
+import theme from '../../../themes/main-theme';
test('renders correctly if no application', () => {
const tree = renderer
@@ -27,51 +27,53 @@ test('renders correctly without permission', () => {
const tree = renderer
.create(
+
+ + app description +
++ Created: + + Invalid Date + +
+Loading...
-{description || ''}
-- Created: {this.formatDate(createdAt)} -
-
-
-
-
-
-
- this.setState({ activeTab: tabId })}
- ripple
- tabBarProps={{ style: { width: '100%' } }}
- className="mdl-color--grey-100"
- >
- Details
- Edit
-
-
- ) : (
- ''
- )}
+ -
+ {description || ''}
+
+ Created: {this.formatDate(createdAt)}
+
+
+ +
Oh snap, it does not seem like you have connected any applications. To connect your application to Unleash you will require a Client SDK. @@ -15,7 +17,7 @@ const Empty = () => (
You can read more about how to use Unleash in your application in the{' '} documentation. -
-
-
- ({ key: v, label: v }))}
- value={icon || 'apps'}
- onChange={e => storeApplicationMetaData(appName, 'icon', e.target.value)}
- filled
- />
- storeApplicationMetaData(appName, 'url', e.target.value)}
- />
-
-
- storeApplicationMetaData(appName, 'description', e.target.value)}
- />
- |
+
+
+
+ ({ key: v, label: v }))}
+ value={icon || 'apps'}
+ onChange={e => storeApplicationMetaData(appName, 'icon', e.target.value)}
+ />
+
+
+ setLocalUrl(e.target.value)}
+ label="Application URL"
+ placeholder="https://example.com"
+ type="url"
+ variant="outlined"
+ size="small"
+ onBlur={() => storeApplicationMetaData(appName, 'url', localUrl)}
+ />
+
+
+ setLocalDescription(e.target.value)}
+ onBlur={() => storeApplicationMetaData(appName, 'description', localDescription)}
+ />
+
+
);
}
diff --git a/frontend/src/component/application/application-view.jsx b/frontend/src/component/application/application-view.jsx
index e04e8fe18c..5ac900932c 100644
--- a/frontend/src/component/application/application-view.jsx
+++ b/frontend/src/component/application/application-view.jsx
@@ -1,99 +1,151 @@
import React from 'react';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
-import { Grid, Cell, List, ListItem, ListItemContent, Switch } from 'react-mdl';
+import { Grid, List, ListItem, ListItemText, ListItemAvatar, Switch, Icon, Typography } from '@material-ui/core';
import { shorten } from '../common';
import { CREATE_FEATURE, CREATE_STRATEGY } from '../../permissions';
+import ConditionallyRender from '../common/ConditionallyRender/ConditionallyRender';
function ApplicationView({ seenToggles, hasPermission, strategies, instances, formatFullDateTime }) {
+ const notFoundListItem = ({ createUrl, name, permission }) => (
+
+
+ report
+
+ {name}}
+ secondary={'Missing, want to create?'}
+ />
+
+ }
+ elseShow={
+
+
+ report
+
+
+ }
+ />
+ );
+
+ // eslint-disable-next-line react/prop-types
+ const foundListItem = ({ viewUrl, name, showSwitch, enabled, description, i }) => (
+
+
+ extension }
+ />
+
+ {shorten(name, 50)}}
+ secondary={shorten(description, 60)}
+ />
+
+ );
return (
-
-
-
+
+
+ Toggles
+
|
-
- |
+
+
+ Implemented strategies
+
- |
+
+
+ {instances.length} Instances registered
+
);
}
ApplicationView.propTypes = {
+ createUrl: PropTypes.string,
+ name: PropTypes.string,
+ permission: PropTypes.string,
instances: PropTypes.array.isRequired,
seenToggles: PropTypes.array.isRequired,
strategies: PropTypes.array.isRequired,
diff --git a/frontend/src/component/application/stateful-textfield.js b/frontend/src/component/application/stateful-textfield.js
deleted file mode 100644
index ae4918fcc6..0000000000
--- a/frontend/src/component/application/stateful-textfield.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import { Textfield } from 'react-mdl';
-
-function StatefulTextfield({ value, label, placeholder, rows, onBlur }) {
- const [localValue, setLocalValue] = useState(value);
-
- const onChange = e => {
- e.preventDefault();
- setLocalValue(e.target.value);
- };
-
- return (
-
+ );
+};
+
+export default HeaderTitle;
+
+HeaderTitle.propTypes = {
+ title: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
+ subtitle: PropTypes.string,
+ variant: PropTypes.string,
+ loading: PropTypes.bool,
+ actions: PropTypes.element,
+};
diff --git a/frontend/src/component/common/HeaderTitle/index.jsx b/frontend/src/component/common/HeaderTitle/index.jsx
new file mode 100644
index 0000000000..a2a7ea9d8d
--- /dev/null
+++ b/frontend/src/component/common/HeaderTitle/index.jsx
@@ -0,0 +1,3 @@
+import HeaderTitle from './HeaderTitle';
+
+export default HeaderTitle;
diff --git a/frontend/src/component/common/HeaderTitle/styles.js b/frontend/src/component/common/HeaderTitle/styles.js
new file mode 100644
index 0000000000..44f6a9189c
--- /dev/null
+++ b/frontend/src/component/common/HeaderTitle/styles.js
@@ -0,0 +1,18 @@
+import { makeStyles } from '@material-ui/styles';
+
+export const useStyles = makeStyles(theme => ({
+ headerTitleContainer: {
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ position: 'relative',
+ },
+ headerTitle: {
+ fontSize: theme.fontSizes.mainHeader,
+ fontWeight: 500,
+ },
+ headerActions: {
+ position: 'absolute',
+ right: 0,
+ },
+}));
diff --git a/frontend/src/component/common/PageContent/PageContent.jsx b/frontend/src/component/common/PageContent/PageContent.jsx
new file mode 100644
index 0000000000..ba71c3c0cf
--- /dev/null
+++ b/frontend/src/component/common/PageContent/PageContent.jsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import classnames from 'classnames';
+import HeaderTitle from '../HeaderTitle';
+import { Paper } from '@material-ui/core';
+import { useStyles } from './styles';
+
+const PageContent = ({ children, headerContent, disablePadding, disableBorder, ...rest }) => {
+ const styles = useStyles();
+
+ const headerClasses = classnames(styles.headerContainer, {
+ [styles.paddingDisabled]: disablePadding,
+ [styles.borderDisabled]: disableBorder,
+ });
+
+ const bodyClasses = classnames(styles.bodyContainer, {
+ [styles.paddingDisabled]: disablePadding,
+ [styles.borderDisabled]: disableBorder,
+ });
+
+ let header = null;
+ if (headerContent) {
+ if (typeof headerContent === 'string') {
+ header = (
+
+ <>
+
- {applications.length > 0 ?
-
+
+ {applications.length > 0 ?
+
+
);
}
}
diff --git a/frontend/src/component/application/application-update.jsx b/frontend/src/component/application/application-update.jsx
index 9ab8ef7c69..e4923805b8 100644
--- a/frontend/src/component/application/application-update.jsx
+++ b/frontend/src/component/application/application-update.jsx
@@ -1,39 +1,51 @@
-import React from 'react';
+import React, { useState } from 'react';
import PropTypes from 'prop-types';
-import { Grid, Cell } from 'react-mdl';
-import StatefulTextfield from './stateful-textfield';
+import { TextField, Grid } from '@material-ui/core';
+import { useCommonStyles } from '../../common.styles';
import icons from './icon-names';
import MySelect from '../common/select';
function ApplicationUpdate({ application, storeApplicationMetaData }) {
const { appName, icon, url, description } = application;
+ const [localUrl, setLocalUrl] = useState(url);
+ const [localDescription, setLocalDescription] = useState(description);
+ const commonStyles = useCommonStyles();
return (
- -
Toggles
+-
- {seenToggles.map(({ name, description, enabled, notFound }, i) =>
- notFound ? (
-
Implemented strategies
+-
- {strategies.map(({ name, description, notFound }, i) =>
- notFound ? (
-
{instances.length} Instances registered
+-
- {instances.map(({ instanceId, clientIp, lastSeen, sdkVersion }, i) => (
-
+ {actions}
} />
+
+
+ {title}
+
+ {subtitle && {subtitle}}
+
+
+
+
+ );
+ } else {
+ header = {headerContent}
;
+ }
+ }
+
+ const paperProps = disableBorder ? { elevation: 0 } : {};
+
+ return (
+ {children}
+
+
+ );
+}
+
+SearchField.propTypes = {
+ value: PropTypes.string,
+ updateValue: PropTypes.func.isRequired,
+};
+
+export default SearchField;
diff --git a/frontend/src/component/common/SearchField/index.jsx b/frontend/src/component/common/SearchField/index.jsx
new file mode 100644
index 0000000000..8a4300dca9
--- /dev/null
+++ b/frontend/src/component/common/SearchField/index.jsx
@@ -0,0 +1,3 @@
+import SearchField from './SearchField';
+
+export default SearchField;
diff --git a/frontend/src/component/common/SearchField/styles.js b/frontend/src/component/common/SearchField/styles.js
new file mode 100644
index 0000000000..2b05321c1c
--- /dev/null
+++ b/frontend/src/component/common/SearchField/styles.js
@@ -0,0 +1,24 @@
+import { makeStyles } from '@material-ui/styles';
+
+export const useStyles = makeStyles(theme => ({
+ search: {
+ display: 'flex',
+ alignItems: 'center',
+ backgroundColor: theme.palette.searchField.main,
+ borderRadius: theme.borders.radius.main,
+ padding: '0.25rem 0.5rem',
+ maxWidth: '450px',
+ [theme.breakpoints.down('sm')]: {
+ margin: '0 auto',
+ },
+ [theme.breakpoints.down('xs')]: {
+ width: '100%',
+ },
+ },
+ searchIcon: {
+ marginRight: '8px',
+ },
+ inputRoot: {
+ width: '100%',
+ },
+}));
diff --git a/frontend/src/component/common/TabNav/TabNav.jsx b/frontend/src/component/common/TabNav/TabNav.jsx
new file mode 100644
index 0000000000..a068a575a3
--- /dev/null
+++ b/frontend/src/component/common/TabNav/TabNav.jsx
@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Tabs, Tab, Paper } from '@material-ui/core';
+
+import TabPanel from './TabPanel';
+
+import { useStyles } from './styles';
+import { useHistory } from 'react-router-dom';
+
+const a11yProps = index => ({
+ id: `tab-${index}`,
+ 'aria-controls': `tabpanel-${index}`,
+});
+
+const TabNav = ({ tabData, className, startingTab = 0 }) => {
+ const styles = useStyles();
+ const [activeTab, setActiveTab] = useState(startingTab);
+ const history = useHistory();
+
+ const renderTabs = () =>
+ tabData.map((tab, index) => (
+
+
+ {renderTabPanels()}
+
+ );
+};
+
+TabNav.propTypes = {
+ tabData: PropTypes.array.isRequired,
+ className: PropTypes.string,
+ startingTab: PropTypes.number,
+};
+
+export default TabNav;
diff --git a/frontend/src/component/common/TabNav/TabPanel/TabPanel.jsx b/frontend/src/component/common/TabNav/TabPanel/TabPanel.jsx
new file mode 100644
index 0000000000..efad562c75
--- /dev/null
+++ b/frontend/src/component/common/TabNav/TabPanel/TabPanel.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const TabPanel = ({ children, value, index, ...other }) => (
+
+ {value === index && children}
+
+);
+
+TabPanel.propTypes = {
+ value: PropTypes.number,
+ index: PropTypes.number,
+ children: PropTypes.object,
+};
+
+export default TabPanel;
diff --git a/frontend/src/component/common/TabNav/TabPanel/index.jsx b/frontend/src/component/common/TabNav/TabPanel/index.jsx
new file mode 100644
index 0000000000..a09b57d836
--- /dev/null
+++ b/frontend/src/component/common/TabNav/TabPanel/index.jsx
@@ -0,0 +1,3 @@
+import TabPanel from './TabPanel';
+
+export default TabPanel;
diff --git a/frontend/src/component/common/TabNav/index.jsx b/frontend/src/component/common/TabNav/index.jsx
new file mode 100644
index 0000000000..2d11e237e2
--- /dev/null
+++ b/frontend/src/component/common/TabNav/index.jsx
@@ -0,0 +1,3 @@
+import TabNav from './TabNav';
+
+export default TabNav;
diff --git a/frontend/src/component/common/TabNav/styles.js b/frontend/src/component/common/TabNav/styles.js
new file mode 100644
index 0000000000..eb50bcc0fc
--- /dev/null
+++ b/frontend/src/component/common/TabNav/styles.js
@@ -0,0 +1,7 @@
+import { makeStyles } from '@material-ui/styles';
+
+export const useStyles = makeStyles(theme => ({
+ tabNav: {
+ backgroundColor: theme.palette.tabs.main,
+ },
+}));
diff --git a/frontend/src/component/common/common.module.scss b/frontend/src/component/common/common.module.scss
index 62d9f0b801..b35152d53a 100644
--- a/frontend/src/component/common/common.module.scss
+++ b/frontend/src/component/common/common.module.scss
@@ -1,3 +1,5 @@
+/** Select **/
+
.truncate {
white-space: nowrap;
overflow: hidden;
@@ -42,27 +44,21 @@
display: flex;
justify-content: space-between;
align-items: center;
- height: 64px;
-
- .title {
- padding: 20px 16px 20px 24px;
- }
.titleText {
margin: 0;
font-size: 20px;
- line-height: 24px
+ line-height: 24px;
}
.actions {
flex-shrink: 0;
- padding: 20px 14px 20px 16px;
}
}
.switchWithLabel {
display: flex;
-
+
.label {
padding-right: 16px;
line-height: 24px;
@@ -106,4 +102,30 @@
.error {
color: #d50000;
-}
\ No newline at end of file
+}
+
+.headerTitle {
+ font-size: var(--h1-size);
+ margin: 0;
+}
+
+.listItem {
+ padding: 0;
+}
+
+.section {
+ padding: 8px 16px 8px 16px;
+}
+
+.contentPadding {
+ padding: var(--card-padding);
+}
+
+.contentSpacing > * {
+ margin: 0.5rem 0;
+}
+
+.searchField {
+ margin-bottom: 2rem;
+ max-width: 400px;
+}
diff --git a/frontend/src/component/common/dropdown-menu.jsx b/frontend/src/component/common/dropdown-menu.jsx
new file mode 100644
index 0000000000..40561229ef
--- /dev/null
+++ b/frontend/src/component/common/dropdown-menu.jsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Menu } from '@material-ui/core';
+import { DropdownButton } from '.';
+
+import styles from './common.module.scss';
+
+const DropdownMenu = ({ renderOptions, id, title, callback, icon = 'arrow_drop_down', label, startIcon, ...rest }) => {
+ const [anchor, setAnchor] = React.useState(null);
+
+ const handleOpen = e => setAnchor(e.currentTarget);
+
+ const handleClose = e => {
+ if (callback && typeof callback === 'function') {
+ callback(e);
+ }
+
+ setAnchor(null);
+ };
+
+ return (
+ <>
+ -
- {apps.length > 0 &&
- apps.map(({ appName, description, icon }) => (
-
-
-);
-HeaderTitle.propTypes = {
- title: PropTypes.string,
- subtitle: PropTypes.string,
- actions: PropTypes.any,
-};
-
export const DataTableHeader = ({ title, actions }) => (
-
-
- {actions && {title}
- {subtitle && {subtitle}} -{actions}
}
-
-
+ {title}
+
{actions && {title}
+{actions}
}
-
+ );
+};
+
+FeatureToggleList.propTypes = {
+ features: PropTypes.array.isRequired,
+ featureMetrics: PropTypes.object.isRequired,
+ fetcher: PropTypes.func,
+ revive: PropTypes.func,
+ updateSetting: PropTypes.func.isRequired,
+ toggleFeature: PropTypes.func,
+ settings: PropTypes.object,
+ history: PropTypes.object.isRequired,
+ hasPermission: PropTypes.func.isRequired,
+ loading: PropTypes.bool,
+};
+
+export default FeatureToggleList;
diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/FeatureToggleListActions.jsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/FeatureToggleListActions.jsx
new file mode 100644
index 0000000000..f83d377e82
--- /dev/null
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/FeatureToggleListActions.jsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { MenuItem } from '@material-ui/core';
+import { MenuItemWithIcon } from '../../../common';
+import DropdownMenu from '../../../common/dropdown-menu';
+import ProjectSelect from '../../../common/ProjectSelect';
+
+const sortingOptions = [
+ { type: 'name', displayName: 'Name' },
+ { type: 'type', displayName: 'Type' },
+ { type: 'enabled', displayName: 'Enabled' },
+ { type: 'stale', displayName: 'Stale' },
+ { type: 'created', displayName: 'Created' },
+ { type: 'Last seen', displayName: 'Last seen' },
+ { type: 'strategies', displayName: 'Strategies' },
+ { type: 'metrics', displayName: 'Metrics' },
+];
+
+import { useStyles } from './styles';
+import classnames from 'classnames';
+
+const FeatureToggleListActions = ({ settings, setSort, toggleMetrics, updateSetting, loading }) => {
+ const styles = useStyles();
+
+ const handleSort = e => {
+ const target = e.target.getAttribute('data-target');
+ setSort(target);
+ };
+
+ const isDisabled = type => settings.sort === type;
+
+ const renderSortingOptions = () =>
+ sortingOptions.map(option => (
+
+ ));
+
+ const renderMetricsOptions = () => [
+
+
+ );
+};
+
+FeatureToggleListActions.propTypes = {
+ settings: PropTypes.object,
+ setSort: PropTypes.func,
+ toggleMetrics: PropTypes.func,
+ updateSetting: PropTypes.func,
+ loading: PropTypes.bool,
+};
+
+export default FeatureToggleListActions;
diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/index.jsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/index.jsx
new file mode 100644
index 0000000000..18b19140dd
--- /dev/null
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/index.jsx
@@ -0,0 +1,3 @@
+import FeatureToggleListActions from './FeatureToggleListActions';
+
+export default FeatureToggleListActions;
diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/styles.js b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/styles.js
new file mode 100644
index 0000000000..a9c119e368
--- /dev/null
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/styles.js
@@ -0,0 +1,10 @@
+import { makeStyles } from '@material-ui/styles';
+
+export const useStyles = makeStyles({
+ actions: {
+ '& > *': {
+ margin: '0 0.25rem',
+ },
+ marginRight: '0.25rem',
+ },
+});
diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.jsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.jsx
new file mode 100644
index 0000000000..03248770dc
--- /dev/null
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.jsx
@@ -0,0 +1,98 @@
+import React, { memo } from 'react';
+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 TimeAgo from 'react-timeago';
+import Progress from '../../progress-component';
+import Status from '../../status-component';
+import FeatureToggleListItemChip from './FeatureToggleListItemChip';
+import ConditionallyRender from '../../../common/ConditionallyRender/ConditionallyRender';
+
+import { UPDATE_FEATURE } from '../../../../permissions';
+import { calc, styles as commonStyles } from '../../../common';
+
+import { useStyles } from './styles';
+
+const FeatureToggleListItem = ({
+ feature,
+ toggleFeature,
+ settings,
+ metricsLastHour = { yes: 0, no: 0, isFallback: true },
+ metricsLastMinute = { yes: 0, no: 0, isFallback: true },
+ revive,
+ hasPermission,
+ ...rest
+}) => {
+ const styles = useStyles();
+
+ const { name, description, enabled, type, stale, createdAt } = feature;
+ const { showLastHour = false } = settings;
+ const isStale = showLastHour ? metricsLastHour.isFallback : metricsLastMinute.isFallback;
+ const percent =
+ 1 *
+ (showLastHour
+ ? calc(metricsLastHour.yes, metricsLastHour.yes + metricsLastHour.no, 0)
+ : calc(metricsLastMinute.yes, metricsLastMinute.yes + metricsLastMinute.no, 0));
+ const featureUrl = toggleFeature === undefined ? `/archive/strategies/${name}` : `/features/strategies/${name}`;
+
+ return (
+
+ {description}
+
+
+
+
+
+
+ another's description
+
+
+
+
+
+
+
+
+ another's description
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders correctly with one feature without permissions 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Feature toggles +
+
+
+
+
+
+
+
+
+
+
+ Create feature toggle
+
+
+
+
+ -
+
+
+`;
diff --git a/frontend/src/component/feature/list/__tests__/feature-list-item-component-test.jsx b/frontend/src/component/feature/FeatureToggleList/__tests__/feature-list-item-component-test.jsx
similarity index 56%
rename from frontend/src/component/feature/list/__tests__/feature-list-item-component-test.jsx
rename to frontend/src/component/feature/FeatureToggleList/__tests__/feature-list-item-component-test.jsx
index e8d868d95b..d2f43ddc98 100644
--- a/frontend/src/component/feature/list/__tests__/feature-list-item-component-test.jsx
+++ b/frontend/src/component/feature/FeatureToggleList/__tests__/feature-list-item-component-test.jsx
@@ -1,12 +1,14 @@
import React from 'react';
import { MemoryRouter } from 'react-router-dom';
+import { ThemeProvider } from '@material-ui/core';
-import Feature from '../list-item-component';
+import FeatureToggleListItem from '../FeatureToggleListItem';
import renderer from 'react-test-renderer';
import { UPDATE_FEATURE } from '../../../../permissions';
-jest.mock('react-mdl');
-jest.mock('../feature-type-container');
+import theme from '../../../../themes/main-theme';
+
+jest.mock('../FeatureToggleListItem/FeatureToggleListItemChip');
test('renders correctly with one feature', () => {
const feature = {
@@ -28,15 +30,17 @@ test('renders correctly with one feature', () => {
const settings = { sort: 'name' };
const tree = renderer.create(
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Feature toggles +
+
+
+
+
+
+
+
+
+
+
+ -
+
+
+
+
+
+ {featureToggle.name}
+
+
+
+
+
+
+
+
+
+ toggleFeature(!featureToggle.enabled, featureToggle.name)}
+ />
+ {featureToggle.enabled ? 'Enabled' : 'Disabled'}
+
+ }
+ elseShow={
+ <>
+
+
+
+
+ }
+ elseShow={
+
+ }
+ />
+
+
+ + +
{submitText}
-Tags allows you to group features together
- -
+
-
- Copy {copyToggle.name}
+;
+ return ;
case 'jira':
- return ;
+ return ;
case 'webhook':
- return ;
+ return ;
default:
- return
-
- ) : null;
+ return (
+ Tags
- {tags.map(renderTag)} -
+ {
+ setShowDialog(false);
+ setSelectedTag(undefined);
+ }}
+ onClick={() => {
+ onUntagFeature(selectedTag);
+ setShowDialog(false);
+ }}
+ title="Are you sure you want to delete this tag?"
+ />
+
+ }
+ />
+ );
}
FeatureTagComponent.propTypes = {
diff --git a/frontend/src/component/feature/feature-type-select-component.jsx b/frontend/src/component/feature/feature-type-select-component.jsx
index ddbee02f73..3cee07003b 100644
--- a/frontend/src/component/feature/feature-type-select-component.jsx
+++ b/frontend/src/component/feature/feature-type-select-component.jsx
@@ -11,15 +11,28 @@ class FeatureTypeSelectComponent extends Component {
}
render() {
- const { value, types, onChange, filled } = this.props;
+ const {
+ value,
+ types,
+ onChange,
+ label,
+ id,
+ // eslint-disable-next-line no-unused-vars
+ fetchFeatureTypes,
+ ...rest
+ } = this.props;
- const options = types.map(t => ({ key: t.id, label: t.name, title: t.description }));
+ const options = types.map(t => ({
+ key: t.id,
+ label: t.name,
+ title: t.description,
+ }));
if (!options.find(o => o.key === value)) {
options.push({ key: value, label: value });
}
- return Tags
+ {tags.map(renderTag)} +
-
- another's description
-
-
-
-
-
-
-
-
- another's description
-
-
-
-
-
-
-
-
-
-
- Last minute
-
-
-
-
-
-
-
-
- By name
-
-
-
- Name
-
-
- Type
-
-
- Enabled
-
-
- Stale
-
-
- Created
-
-
- Last seen
-
-
- Strategies
-
-
- Metrics
-
-
-
-
-
-
-
-
-`;
-
-exports[`renders correctly with one feature without permissions 1`] = `
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
- Last minute
-
-
-
-
-
-
-
-
- By name
-
-
-
- Name
-
-
- Type
-
-
- Enabled
-
-
- Stale
-
-
- Created
-
-
- Last seen
-
-
- Strategies
-
-
- Metrics
-
-
-
-
-
-
-
-
-`;
diff --git a/frontend/src/component/feature/list/__tests__/list-component-test.jsx b/frontend/src/component/feature/list/__tests__/list-component-test.jsx
deleted file mode 100644
index 25aee564d1..0000000000
--- a/frontend/src/component/feature/list/__tests__/list-component-test.jsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from 'react';
-import { MemoryRouter } from 'react-router-dom';
-
-import FeatureListComponent from './../list-component';
-import renderer from 'react-test-renderer';
-import { CREATE_FEATURE } from '../../../../permissions';
-
-jest.mock('react-mdl');
-jest.mock('../list-item-component', () => ({
- __esModule: true,
- default: 'ListItem',
-}));
-
-jest.mock('../project-container', () => 'Project');
-
-test('renders correctly with one feature', () => {
- const features = [
- {
- name: 'Another',
- },
- ];
- const featureMetrics = { lastHour: {}, lastMinute: {}, seenApps: {} };
- const settings = { sort: 'name' };
- const tree = renderer.create(
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- );
- }
-}
diff --git a/frontend/src/component/feature/list/list-item-component.jsx b/frontend/src/component/feature/list/list-item-component.jsx
deleted file mode 100644
index e85db6c43c..0000000000
--- a/frontend/src/component/feature/list/list-item-component.jsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import React, { memo } from 'react';
-import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
-import { Switch, ListItem, ListItemAction, Icon } from 'react-mdl';
-import TimeAgo from 'react-timeago';
-import Progress from '../progress-component';
-import { UPDATE_FEATURE } from '../../../permissions';
-import { calc, styles as commonStyles } from '../../common';
-import Status from '../status-component';
-import FeatureType from './feature-type-container';
-
-import styles from './list.module.scss';
-
-const Feature = ({
- feature,
- toggleFeature,
- settings,
- metricsLastHour = { yes: 0, no: 0, isFallback: true },
- metricsLastMinute = { yes: 0, no: 0, isFallback: true },
- revive,
- hasPermission,
-}) => {
- const { name, description, enabled, type, stale, createdAt } = feature;
- const { showLastHour = false } = settings;
- const isStale = showLastHour ? metricsLastHour.isFallback : metricsLastMinute.isFallback;
- const percent =
- 1 *
- (showLastHour
- ? calc(metricsLastHour.yes, metricsLastHour.yes + metricsLastHour.no, 0)
- : calc(metricsLastMinute.yes, metricsLastMinute.yes + metricsLastMinute.no, 0));
- const featureUrl = toggleFeature === undefined ? `/archive/strategies/${name}` : `/features/strategies/${name}`;
- return (
-
-
-
-
- ) : (
- ''
- )}
-
- -
-
- {features.length > 0 ? (
- features.map((feature, i) => (
-
- Empty list of feature toggles -
- )} -
- {description}
-
-
-
-
-