diff --git a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettings.styles.ts b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettings.styles.ts index 7137b7a66b..af4bc62775 100644 --- a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettings.styles.ts +++ b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettings.styles.ts @@ -19,7 +19,7 @@ export const useStyles = makeStyles(theme => ({ padding: '2rem', display: 'flex', flexDirection: 'column', - width: '350px', + width: 400, ['& > *']: { margin: '0.5rem 0', }, diff --git a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettings.tsx b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettings.tsx index f08bf03c17..2d0cb89e9c 100644 --- a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettings.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettings.tsx @@ -1,46 +1,55 @@ import { useState } from 'react'; import PageContent from '../../../common/PageContent'; import { useStyles } from './FeatureSettings.styles'; - import { List, ListItem } from '@material-ui/core'; import ConditionallyRender from '../../../common/ConditionallyRender'; -import FeatureSettingsMetadata from './FeatureSettingsMetadata/FeatureSettingsMetadata'; 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 PROJECT = 'project'; -const FeatureSettings = () => { +export const FeatureSettings = () => { const styles = useStyles(); - + const { projectId, featureId } = useParams(); const [settings, setSettings] = useState(METADATA); return (
- + setSettings(METADATA)} + selected={settings === METADATA} > Metadata setSettings(PROJECT)} + selected={settings === PROJECT} > Project
-
} + show={ + + } /> { ); }; - -export default FeatureSettings; diff --git a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.style.ts b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.style.ts new file mode 100644 index 0000000000..100682cc8a --- /dev/null +++ b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.style.ts @@ -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, + }, +})); diff --git a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.tsx b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.tsx new file mode 100644 index 0000000000..5428b586bb --- /dev/null +++ b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.tsx @@ -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 ( + <> +
+ + Feature information + + + + +
+ + Name: {feature.name} + + + Description:{' '} + + {feature.description.length === 0 + ? 'no description' + : feature.description} + + + + Type: {feature.type} + + + Impression Data:{' '} + + {feature.impressionData ? 'enabled' : 'disabled'} + + + + ); +}; diff --git a/frontend/src/component/feature/FeatureView/FeatureView.tsx b/frontend/src/component/feature/FeatureView/FeatureView.tsx index 4328445cc3..7b4262d741 100644 --- a/frontend/src/component/feature/FeatureView/FeatureView.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureView.tsx @@ -21,7 +21,7 @@ import FeatureStrategies from './FeatureStrategies/FeatureStrategies'; import FeatureVariants from './FeatureVariants/FeatureVariants'; import { FeatureMetrics } from './FeatureMetrics/FeatureMetrics'; import { useStyles } from './FeatureView.styles'; -import FeatureSettings from './FeatureSettings/FeatureSettings'; +import { FeatureSettings } from './FeatureSettings/FeatureSettings'; import useLoading from '../../../hooks/useLoading'; import ConditionallyRender from '../../common/ConditionallyRender'; import { getCreateTogglePath } from '../../../utils/route-path-helpers'; @@ -31,7 +31,7 @@ import AddTagDialog from './FeatureOverview/AddTagDialog/AddTagDialog'; import StatusChip from '../../common/StatusChip/StatusChip'; import { formatUnknownError } from '../../../utils/format-unknown-error'; -const FeatureView = () => { +export const FeatureView = () => { const { projectId, featureId } = useParams(); const { feature, loading, error } = useFeature(projectId, featureId); const { refetch: projectRefetch } = useProject(projectId); @@ -254,5 +254,3 @@ const FeatureView = () => { /> ); }; - -export default FeatureView; diff --git a/frontend/src/component/menu/__tests__/__snapshots__/routes-test.jsx.snap b/frontend/src/component/menu/__tests__/__snapshots__/routes-test.jsx.snap index f643fa4014..b065d0886f 100644 --- a/frontend/src/component/menu/__tests__/__snapshots__/routes-test.jsx.snap +++ b/frontend/src/component/menu/__tests__/__snapshots__/routes-test.jsx.snap @@ -52,7 +52,7 @@ Array [ "layout": "main", "menu": Object {}, "parent": "/projects", - "path": "/projects/:projectId/features/:featureId/settings", + "path": "/projects/:projectId/features/:featureId/edit", "title": "Edit Feature", "type": "protected", }, diff --git a/frontend/src/component/menu/routes.js b/frontend/src/component/menu/routes.js index f44e2451b8..50e4594094 100644 --- a/frontend/src/component/menu/routes.js +++ b/frontend/src/component/menu/routes.js @@ -19,7 +19,7 @@ import { ProjectListNew } from '../project/ProjectList/ProjectList'; import Project from '../project/Project/Project'; import RedirectArchive from '../archive/RedirectArchive'; 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 CreateProjectRole from '../admin/project-roles/CreateProjectRole/CreateProjectRole'; import EditProjectRole from '../admin/project-roles/EditProjectRole/EditProjectRole'; @@ -95,7 +95,7 @@ export const routes = [ menu: {}, }, { - path: '/projects/:projectId/features/:featureId/settings', + path: '/projects/:projectId/features/:featureId/edit', parent: '/projects', title: 'Edit Feature', component: EditFeature,