mirror of
https://github.com/Unleash/unleash.git
synced 2025-05-03 01:18:43 +02:00
Fix/frontend projects changes (#324)
* fix: remove mouseover from navigation menu * fix: variant tooltip * fix: project creation navigation
This commit is contained in:
Fredrik Strand Oseberg
GitHub
parent
72b49ad4a8
commit
dc9d16b238
@ -1,9 +1,11 @@
|
||||
import Breadcrumbs from '@material-ui/core/Breadcrumbs';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import usePermissions from '../../../hooks/usePermissions';
|
||||
import ConditionallyRender from '../ConditionallyRender';
|
||||
import { useStyles } from './BreadcrumbNav.styles';
|
||||
|
||||
const BreadcrumbNav = () => {
|
||||
const { isAdmin } = usePermissions();
|
||||
const styles = useStyles();
|
||||
const location = useLocation();
|
||||
|
||||
@ -24,28 +26,40 @@ const BreadcrumbNav = () => {
|
||||
|
||||
return (
|
||||
<ConditionallyRender
|
||||
condition={paths.length > 1}
|
||||
condition={
|
||||
(location.pathname.includes('admin') && isAdmin()) ||
|
||||
!location.pathname.includes('admin')
|
||||
}
|
||||
show={
|
||||
<Breadcrumbs className={styles.breadcrumbNav}>
|
||||
{paths.map((path, index) => {
|
||||
const lastItem = index === paths.length - 1;
|
||||
if (lastItem) {
|
||||
return (
|
||||
<p className={styles.breadcrumbNavParagraph}>
|
||||
{path}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Link
|
||||
className={styles.breadcrumbLink}
|
||||
to={`/${path}`}
|
||||
>
|
||||
{path}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</Breadcrumbs>
|
||||
<ConditionallyRender
|
||||
condition={paths.length > 1}
|
||||
show={
|
||||
<Breadcrumbs className={styles.breadcrumbNav}>
|
||||
{paths.map((path, index) => {
|
||||
const lastItem = index === paths.length - 1;
|
||||
if (lastItem) {
|
||||
return (
|
||||
<p
|
||||
className={
|
||||
styles.breadcrumbNavParagraph
|
||||
}
|
||||
>
|
||||
{path}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Link
|
||||
className={styles.breadcrumbLink}
|
||||
to={`/${path}`}
|
||||
>
|
||||
{path}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</Breadcrumbs>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
);
|
||||
|
||||
@ -8,6 +8,7 @@ import {
|
||||
TextField,
|
||||
InputAdornment,
|
||||
Button,
|
||||
Tooltip,
|
||||
} from '@material-ui/core';
|
||||
import { Info } from '@material-ui/icons';
|
||||
import Dialog from '../../../common/Dialogue';
|
||||
@ -46,7 +47,7 @@ const AddVariant = ({
|
||||
name: editVariant.name,
|
||||
weight: editVariant.weight / 10,
|
||||
weightType: editVariant.weightType || weightTypes.VARIABLE,
|
||||
stickiness: editVariant.stickiness
|
||||
stickiness: editVariant.stickiness,
|
||||
});
|
||||
if (editVariant.payload) {
|
||||
setPayload(editVariant.payload);
|
||||
@ -245,7 +246,12 @@ const AddVariant = ({
|
||||
</Grid>
|
||||
<p style={{ marginBottom: '1rem' }}>
|
||||
<strong>Payload </strong>
|
||||
<Info title="Passed to the variant object. Can be anything (json, value, csv)" />
|
||||
<Tooltip
|
||||
title="Passed to the variant object. Can be anything
|
||||
(json, value, csv)"
|
||||
>
|
||||
<Info style={{ width: '18.5px', height: '18.5px' }} />
|
||||
</Tooltip>
|
||||
</p>
|
||||
<Grid container>
|
||||
<Grid item md={3}>
|
||||
@ -256,6 +262,7 @@ const AddVariant = ({
|
||||
value={payload.type}
|
||||
options={payloadOptions}
|
||||
onChange={onPayload}
|
||||
style={{ minWidth: '100px' }}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item md={9}>
|
||||
@ -276,7 +283,14 @@ const AddVariant = ({
|
||||
show={
|
||||
<p style={{ marginBottom: '.5rem' }}>
|
||||
<strong>Overrides </strong>
|
||||
<Info title="Here you can specify which users should get this variant." />
|
||||
<Tooltip title="Here you can specify which users should get this variant.">
|
||||
<Info
|
||||
style={{
|
||||
width: '18.5px',
|
||||
height: '18.5px',
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
</p>
|
||||
}
|
||||
/>
|
||||
|
||||
@ -38,6 +38,7 @@ export const useStyles = makeStyles(theme => ({
|
||||
fontFamily: theme.typography.fontFamily,
|
||||
alignItems: 'center',
|
||||
color: 'inherit',
|
||||
cursor: 'pointer',
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: '1.4rem',
|
||||
|
||||
@ -100,9 +100,6 @@ const Header = () => {
|
||||
onClick={e =>
|
||||
setAnchorElAdvanced(e.currentTarget)
|
||||
}
|
||||
onMouseEnter={e =>
|
||||
setAnchorElAdvanced(e.currentTarget)
|
||||
}
|
||||
>
|
||||
Navigate
|
||||
<KeyboardArrowDown />
|
||||
@ -140,9 +137,6 @@ const Header = () => {
|
||||
onClick={e =>
|
||||
setAnchorEl(e.currentTarget)
|
||||
}
|
||||
onMouseEnter={e =>
|
||||
setAnchorEl(e.currentTarget)
|
||||
}
|
||||
>
|
||||
<SettingsIcon
|
||||
className={styles.docsIcon}
|
||||
|
||||
@ -382,14 +382,19 @@ export const baseRoutes = routes
|
||||
.filter(route => !route.parent);
|
||||
|
||||
const computeRoutes = () => {
|
||||
const apiAccess = routes.find(route => route.path === '/admin/api');
|
||||
const mainNavRoutes =
|
||||
baseRoutes.filter(
|
||||
route =>
|
||||
route.path !== '/admin' &&
|
||||
route.path !== '/logout' &&
|
||||
route.path !== '/history'
|
||||
) || [];
|
||||
|
||||
mainNavRoutes.push(apiAccess);
|
||||
|
||||
const computedRoutes = {
|
||||
mainNavRoutes:
|
||||
baseRoutes.filter(
|
||||
route =>
|
||||
route.path !== '/admin' &&
|
||||
route.path !== '/logout' &&
|
||||
route.path !== '/history'
|
||||
) || [],
|
||||
mainNavRoutes,
|
||||
adminRoutes:
|
||||
routes.filter(
|
||||
route =>
|
||||
|
||||
@ -78,7 +78,13 @@ class ProjectFormComponent extends Component {
|
||||
const { project } = this.state;
|
||||
evt.preventDefault();
|
||||
|
||||
this.props.history.push(`/projects/${project.id}`);
|
||||
const { editMode } = this.props;
|
||||
|
||||
if (editMode) {
|
||||
this.props.history.push(`/projects/${project.id}`);
|
||||
return;
|
||||
}
|
||||
this.props.history.goBack();
|
||||
};
|
||||
|
||||
onSubmit = async evt => {
|
||||
|
||||
@ -2,19 +2,26 @@ import PropTypes from 'prop-types';
|
||||
import ApiKeyList from './api-key-list-container';
|
||||
|
||||
import AdminMenu from '../admin-menu';
|
||||
import usePermissions from '../../../hooks/usePermissions';
|
||||
import ConditionallyRender from '../../../component/common/ConditionallyRender';
|
||||
|
||||
const ApiPage = ({ history }) => {
|
||||
const { isAdmin } = usePermissions();
|
||||
|
||||
const render = ({ history }) => {
|
||||
return (
|
||||
<div>
|
||||
<AdminMenu history={history} />
|
||||
<ConditionallyRender
|
||||
condition={isAdmin()}
|
||||
show={<AdminMenu history={history} />}
|
||||
/>
|
||||
<ApiKeyList />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
render.propTypes = {
|
||||
ApiPage.propTypes = {
|
||||
match: PropTypes.object.isRequired,
|
||||
history: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default render;
|
||||
export default ApiPage;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user