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>

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',
         },

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<IFeatureViewParams>();
     const [settings, setSettings] = useState(METADATA);
 
     return (
         <PageContent headerContent="Settings" bodyClass={styles.bodyContainer}>
             <div className={styles.innerContainer}>
                 <div className={styles.listContainer}>
-                    <List className={styles.list}>
+                    <List>
                         <ListItem
+                            key={0}
                             className={styles.listItem}
                             button
                             onClick={() => setSettings(METADATA)}
+                            selected={settings === METADATA}
                         >
                             Metadata
                         </ListItem>
                         <ListItem
+                            key={1}
                             className={styles.listItem}
                             button
                             onClick={() => setSettings(PROJECT)}
+                            selected={settings === PROJECT}
                         >
                             Project
                         </ListItem>
                     </List>
                 </div>
-
                 <div className={styles.innerBodyContainer}>
                     <ConditionallyRender
                         condition={settings === METADATA}
-                        show={<FeatureSettingsMetadata />}
+                        show={
+                            <FeatureSettingsInformation
+                                projectId={projectId}
+                                featureId={featureId}
+                            />
+                        }
                     />
                     <ConditionallyRender
                         condition={settings === PROJECT}
@@ -51,5 +60,3 @@ const FeatureSettings = () => {
         </PageContent>
     );
 };
-
-export default FeatureSettings;

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,
+    },
+}));

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 (
+        <>
+            <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>
+        </>
+    );
+};

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<IFeatureViewParams>();
     const { feature, loading, error } = useFeature(projectId, featureId);
     const { refetch: projectRefetch } = useProject(projectId);
@@ -254,5 +254,3 @@ const FeatureView = () => {
         />
     );
 };
-
-export default FeatureView;

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",
   },

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,