mirror of
https://github.com/Unleash/unleash.git
synced 2025-01-25 00:07:47 +01:00
refactor: restore feature settings (#712)
* refactor: resotre feature settings * fix: update PR based on feedback * feat: add feature information in Metadata container * fix: update PR based on feedback * fix: update PR based on feedback Co-authored-by: Fredrik Strand Oseberg <fredrik.no@gmail.com>
This commit is contained in:
parent
611f6ec232
commit
b973232116
@ -19,7 +19,7 @@ export const useStyles = makeStyles(theme => ({
|
|||||||
padding: '2rem',
|
padding: '2rem',
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
flexDirection: 'column',
|
flexDirection: 'column',
|
||||||
width: '350px',
|
width: 400,
|
||||||
['& > *']: {
|
['& > *']: {
|
||||||
margin: '0.5rem 0',
|
margin: '0.5rem 0',
|
||||||
},
|
},
|
||||||
|
@ -1,46 +1,55 @@
|
|||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import PageContent from '../../../common/PageContent';
|
import PageContent from '../../../common/PageContent';
|
||||||
import { useStyles } from './FeatureSettings.styles';
|
import { useStyles } from './FeatureSettings.styles';
|
||||||
|
|
||||||
import { List, ListItem } from '@material-ui/core';
|
import { List, ListItem } from '@material-ui/core';
|
||||||
import ConditionallyRender from '../../../common/ConditionallyRender';
|
import ConditionallyRender from '../../../common/ConditionallyRender';
|
||||||
import FeatureSettingsMetadata from './FeatureSettingsMetadata/FeatureSettingsMetadata';
|
|
||||||
import FeatureSettingsProject from './FeatureSettingsProject/FeatureSettingsProject';
|
import FeatureSettingsProject from './FeatureSettingsProject/FeatureSettingsProject';
|
||||||
|
import { useParams } from 'react-router-dom';
|
||||||
|
import { IFeatureViewParams } from '../../../../interfaces/params';
|
||||||
|
import { FeatureSettingsInformation } from './FeatureSettingsInformation/FeatureSettingsInformation';
|
||||||
|
|
||||||
const METADATA = 'metadata';
|
const METADATA = 'metadata';
|
||||||
const PROJECT = 'project';
|
const PROJECT = 'project';
|
||||||
|
|
||||||
const FeatureSettings = () => {
|
export const FeatureSettings = () => {
|
||||||
const styles = useStyles();
|
const styles = useStyles();
|
||||||
|
const { projectId, featureId } = useParams<IFeatureViewParams>();
|
||||||
const [settings, setSettings] = useState(METADATA);
|
const [settings, setSettings] = useState(METADATA);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PageContent headerContent="Settings" bodyClass={styles.bodyContainer}>
|
<PageContent headerContent="Settings" bodyClass={styles.bodyContainer}>
|
||||||
<div className={styles.innerContainer}>
|
<div className={styles.innerContainer}>
|
||||||
<div className={styles.listContainer}>
|
<div className={styles.listContainer}>
|
||||||
<List className={styles.list}>
|
<List>
|
||||||
<ListItem
|
<ListItem
|
||||||
|
key={0}
|
||||||
className={styles.listItem}
|
className={styles.listItem}
|
||||||
button
|
button
|
||||||
onClick={() => setSettings(METADATA)}
|
onClick={() => setSettings(METADATA)}
|
||||||
|
selected={settings === METADATA}
|
||||||
>
|
>
|
||||||
Metadata
|
Metadata
|
||||||
</ListItem>
|
</ListItem>
|
||||||
<ListItem
|
<ListItem
|
||||||
|
key={1}
|
||||||
className={styles.listItem}
|
className={styles.listItem}
|
||||||
button
|
button
|
||||||
onClick={() => setSettings(PROJECT)}
|
onClick={() => setSettings(PROJECT)}
|
||||||
|
selected={settings === PROJECT}
|
||||||
>
|
>
|
||||||
Project
|
Project
|
||||||
</ListItem>
|
</ListItem>
|
||||||
</List>
|
</List>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={styles.innerBodyContainer}>
|
<div className={styles.innerBodyContainer}>
|
||||||
<ConditionallyRender
|
<ConditionallyRender
|
||||||
condition={settings === METADATA}
|
condition={settings === METADATA}
|
||||||
show={<FeatureSettingsMetadata />}
|
show={
|
||||||
|
<FeatureSettingsInformation
|
||||||
|
projectId={projectId}
|
||||||
|
featureId={featureId}
|
||||||
|
/>
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
<ConditionallyRender
|
<ConditionallyRender
|
||||||
condition={settings === PROJECT}
|
condition={settings === PROJECT}
|
||||||
@ -51,5 +60,3 @@ const FeatureSettings = () => {
|
|||||||
</PageContent>
|
</PageContent>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default FeatureSettings;
|
|
||||||
|
@ -0,0 +1,11 @@
|
|||||||
|
import { makeStyles } from '@material-ui/core/styles';
|
||||||
|
|
||||||
|
export const useStyles = makeStyles(theme => ({
|
||||||
|
container: {
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
header: {
|
||||||
|
fontSize: theme.fontSizes.mainHeader,
|
||||||
|
},
|
||||||
|
}));
|
@ -0,0 +1,64 @@
|
|||||||
|
import { Typography } from '@material-ui/core';
|
||||||
|
import { Edit } from '@material-ui/icons';
|
||||||
|
import { useHistory } from 'react-router-dom';
|
||||||
|
import useFeature from '../../../../../hooks/api/getters/useFeature/useFeature';
|
||||||
|
import PermissionIconButton from '../../../../common/PermissionIconButton/PermissionIconButton';
|
||||||
|
import { UPDATE_FEATURE } from '../../../../providers/AccessProvider/permissions';
|
||||||
|
import { useStyles } from './FeatureSettingsInformation.style';
|
||||||
|
|
||||||
|
interface IFeatureSettingsInformationProps {
|
||||||
|
projectId: string;
|
||||||
|
featureId: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const FeatureSettingsInformation = ({
|
||||||
|
projectId,
|
||||||
|
featureId,
|
||||||
|
}: IFeatureSettingsInformationProps) => {
|
||||||
|
const styles = useStyles();
|
||||||
|
const { feature } = useFeature(projectId, featureId);
|
||||||
|
const history = useHistory();
|
||||||
|
|
||||||
|
const onEdit = () => {
|
||||||
|
history.push(`/projects/${projectId}/features/${featureId}/edit`);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className={styles.container}>
|
||||||
|
<Typography className={styles.header}>
|
||||||
|
Feature information
|
||||||
|
</Typography>
|
||||||
|
<PermissionIconButton
|
||||||
|
permission={UPDATE_FEATURE}
|
||||||
|
tooltip={'Edit feature'}
|
||||||
|
projectId={projectId}
|
||||||
|
data-loading
|
||||||
|
onClick={onEdit}
|
||||||
|
>
|
||||||
|
<Edit titleAccess="Edit" />
|
||||||
|
</PermissionIconButton>
|
||||||
|
</div>
|
||||||
|
<Typography>
|
||||||
|
Name: <strong>{feature.name}</strong>
|
||||||
|
</Typography>
|
||||||
|
<Typography>
|
||||||
|
Description:{' '}
|
||||||
|
<strong>
|
||||||
|
{feature.description.length === 0
|
||||||
|
? 'no description'
|
||||||
|
: feature.description}
|
||||||
|
</strong>
|
||||||
|
</Typography>
|
||||||
|
<Typography>
|
||||||
|
Type: <strong>{feature.type}</strong>
|
||||||
|
</Typography>
|
||||||
|
<Typography>
|
||||||
|
Impression Data:{' '}
|
||||||
|
<strong>
|
||||||
|
{feature.impressionData ? 'enabled' : 'disabled'}
|
||||||
|
</strong>
|
||||||
|
</Typography>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
@ -21,7 +21,7 @@ import FeatureStrategies from './FeatureStrategies/FeatureStrategies';
|
|||||||
import FeatureVariants from './FeatureVariants/FeatureVariants';
|
import FeatureVariants from './FeatureVariants/FeatureVariants';
|
||||||
import { FeatureMetrics } from './FeatureMetrics/FeatureMetrics';
|
import { FeatureMetrics } from './FeatureMetrics/FeatureMetrics';
|
||||||
import { useStyles } from './FeatureView.styles';
|
import { useStyles } from './FeatureView.styles';
|
||||||
import FeatureSettings from './FeatureSettings/FeatureSettings';
|
import { FeatureSettings } from './FeatureSettings/FeatureSettings';
|
||||||
import useLoading from '../../../hooks/useLoading';
|
import useLoading from '../../../hooks/useLoading';
|
||||||
import ConditionallyRender from '../../common/ConditionallyRender';
|
import ConditionallyRender from '../../common/ConditionallyRender';
|
||||||
import { getCreateTogglePath } from '../../../utils/route-path-helpers';
|
import { getCreateTogglePath } from '../../../utils/route-path-helpers';
|
||||||
@ -31,7 +31,7 @@ import AddTagDialog from './FeatureOverview/AddTagDialog/AddTagDialog';
|
|||||||
import StatusChip from '../../common/StatusChip/StatusChip';
|
import StatusChip from '../../common/StatusChip/StatusChip';
|
||||||
import { formatUnknownError } from '../../../utils/format-unknown-error';
|
import { formatUnknownError } from '../../../utils/format-unknown-error';
|
||||||
|
|
||||||
const FeatureView = () => {
|
export const FeatureView = () => {
|
||||||
const { projectId, featureId } = useParams<IFeatureViewParams>();
|
const { projectId, featureId } = useParams<IFeatureViewParams>();
|
||||||
const { feature, loading, error } = useFeature(projectId, featureId);
|
const { feature, loading, error } = useFeature(projectId, featureId);
|
||||||
const { refetch: projectRefetch } = useProject(projectId);
|
const { refetch: projectRefetch } = useProject(projectId);
|
||||||
@ -254,5 +254,3 @@ const FeatureView = () => {
|
|||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default FeatureView;
|
|
||||||
|
@ -52,7 +52,7 @@ Array [
|
|||||||
"layout": "main",
|
"layout": "main",
|
||||||
"menu": Object {},
|
"menu": Object {},
|
||||||
"parent": "/projects",
|
"parent": "/projects",
|
||||||
"path": "/projects/:projectId/features/:featureId/settings",
|
"path": "/projects/:projectId/features/:featureId/edit",
|
||||||
"title": "Edit Feature",
|
"title": "Edit Feature",
|
||||||
"type": "protected",
|
"type": "protected",
|
||||||
},
|
},
|
||||||
|
@ -19,7 +19,7 @@ import { ProjectListNew } from '../project/ProjectList/ProjectList';
|
|||||||
import Project from '../project/Project/Project';
|
import Project from '../project/Project/Project';
|
||||||
import RedirectArchive from '../archive/RedirectArchive';
|
import RedirectArchive from '../archive/RedirectArchive';
|
||||||
import EnvironmentList from '../environments/EnvironmentList/EnvironmentList';
|
import EnvironmentList from '../environments/EnvironmentList/EnvironmentList';
|
||||||
import FeatureView from '../feature/FeatureView/FeatureView';
|
import { FeatureView } from '../feature/FeatureView/FeatureView';
|
||||||
import ProjectRoles from '../admin/project-roles/ProjectRoles/ProjectRoles';
|
import ProjectRoles from '../admin/project-roles/ProjectRoles/ProjectRoles';
|
||||||
import CreateProjectRole from '../admin/project-roles/CreateProjectRole/CreateProjectRole';
|
import CreateProjectRole from '../admin/project-roles/CreateProjectRole/CreateProjectRole';
|
||||||
import EditProjectRole from '../admin/project-roles/EditProjectRole/EditProjectRole';
|
import EditProjectRole from '../admin/project-roles/EditProjectRole/EditProjectRole';
|
||||||
@ -95,7 +95,7 @@ export const routes = [
|
|||||||
menu: {},
|
menu: {},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/projects/:projectId/features/:featureId/settings',
|
path: '/projects/:projectId/features/:featureId/edit',
|
||||||
parent: '/projects',
|
parent: '/projects',
|
||||||
title: 'Edit Feature',
|
title: 'Edit Feature',
|
||||||
component: EditFeature,
|
component: EditFeature,
|
||||||
|
Loading…
Reference in New Issue
Block a user