2021-10-19 12:36:51 +02:00
|
|
|
import { Tab, Tabs } from '@material-ui/core';
|
2021-10-08 11:23:29 +02:00
|
|
|
import { useState } from 'react';
|
|
|
|
import { Archive, FileCopy } from '@material-ui/icons';
|
2021-10-19 12:36:51 +02:00
|
|
|
import { Link, Route, useHistory, useParams } from 'react-router-dom';
|
2021-10-08 11:23:29 +02:00
|
|
|
import useFeatureApi from '../../../hooks/api/actions/useFeatureApi/useFeatureApi';
|
2021-09-14 14:20:23 +02:00
|
|
|
import useFeature from '../../../hooks/api/getters/useFeature/useFeature';
|
2021-10-19 12:36:51 +02:00
|
|
|
import useProject from '../../../hooks/api/getters/useProject/useProject';
|
2021-09-27 13:35:32 +02:00
|
|
|
import useTabs from '../../../hooks/useTabs';
|
2021-10-08 11:23:29 +02:00
|
|
|
import useToast from '../../../hooks/useToast';
|
2021-09-27 13:35:32 +02:00
|
|
|
import { IFeatureViewParams } from '../../../interfaces/params';
|
2021-10-19 13:08:25 +02:00
|
|
|
import { UPDATE_FEATURE } from '../../providers/AccessProvider/permissions';
|
2021-10-08 11:23:29 +02:00
|
|
|
import Dialogue from '../../common/Dialogue';
|
|
|
|
import PermissionIconButton from '../../common/PermissionIconButton/PermissionIconButton';
|
2021-10-01 13:49:18 +02:00
|
|
|
import FeatureLog from './FeatureLog/FeatureLog';
|
|
|
|
import FeatureMetrics from './FeatureMetrics/FeatureMetrics';
|
|
|
|
import FeatureOverview from './FeatureOverview/FeatureOverview';
|
2021-09-27 13:35:32 +02:00
|
|
|
import FeatureStrategies from './FeatureStrategies/FeatureStrategies';
|
2021-10-01 13:49:18 +02:00
|
|
|
import FeatureVariants from './FeatureVariants/FeatureVariants';
|
2021-09-27 13:35:32 +02:00
|
|
|
import { useStyles } from './FeatureView2.styles';
|
2021-10-08 11:23:29 +02:00
|
|
|
import FeatureSettings from './FeatureSettings/FeatureSettings';
|
2021-10-08 16:19:06 +02:00
|
|
|
import useLoading from '../../../hooks/useLoading';
|
2021-10-15 11:52:35 +02:00
|
|
|
import ConditionallyRender from '../../common/ConditionallyRender';
|
|
|
|
import { getCreateTogglePath } from '../../../utils/route-path-helpers';
|
2021-09-14 14:20:23 +02:00
|
|
|
|
|
|
|
const FeatureView2 = () => {
|
2021-10-01 13:49:18 +02:00
|
|
|
const { projectId, featureId } = useParams<IFeatureViewParams>();
|
2021-10-15 11:52:35 +02:00
|
|
|
const { feature, loading, error } = useFeature(projectId, featureId);
|
2021-10-19 12:36:51 +02:00
|
|
|
const { refetch: projectRefetch } = useProject(projectId);
|
2021-10-01 13:49:18 +02:00
|
|
|
const { a11yProps } = useTabs(0);
|
2021-10-08 11:23:29 +02:00
|
|
|
const { archiveFeatureToggle } = useFeatureApi();
|
|
|
|
const { toast, setToastData } = useToast();
|
|
|
|
const [showDelDialog, setShowDelDialog] = useState(false);
|
2021-09-27 13:35:32 +02:00
|
|
|
const styles = useStyles();
|
2021-09-30 11:44:30 +02:00
|
|
|
const history = useHistory();
|
2021-10-08 16:19:06 +02:00
|
|
|
const ref = useLoading(loading);
|
2021-09-30 11:44:30 +02:00
|
|
|
|
|
|
|
const basePath = `/projects/${projectId}/features2/${featureId}`;
|
|
|
|
|
2021-10-08 11:23:29 +02:00
|
|
|
const archiveToggle = async () => {
|
|
|
|
try {
|
|
|
|
await archiveFeatureToggle(projectId, featureId);
|
|
|
|
setToastData({
|
|
|
|
text: 'Feature archived',
|
|
|
|
type: 'success',
|
|
|
|
show: true,
|
|
|
|
});
|
|
|
|
setShowDelDialog(false);
|
2021-10-19 12:36:51 +02:00
|
|
|
projectRefetch();
|
2021-10-08 11:23:29 +02:00
|
|
|
history.push(`/projects/${projectId}`);
|
|
|
|
} catch (e) {
|
|
|
|
setToastData({
|
|
|
|
show: true,
|
|
|
|
type: 'error',
|
|
|
|
text: e.toString(),
|
|
|
|
});
|
|
|
|
setShowDelDialog(false);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
const handleCancel = () => setShowDelDialog(false);
|
|
|
|
|
2021-09-27 13:35:32 +02:00
|
|
|
const tabData = [
|
2021-09-30 11:44:30 +02:00
|
|
|
{
|
|
|
|
title: 'Overview',
|
2021-10-08 16:19:06 +02:00
|
|
|
path: `${basePath}`,
|
2021-09-30 11:44:30 +02:00
|
|
|
name: 'overview',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Strategies',
|
|
|
|
path: `${basePath}/strategies`,
|
|
|
|
name: 'strategies',
|
|
|
|
},
|
2021-10-01 13:49:18 +02:00
|
|
|
{
|
|
|
|
title: 'Metrics',
|
|
|
|
path: `${basePath}/metrics`,
|
|
|
|
name: 'Metrics',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Event log',
|
|
|
|
path: `${basePath}/logs`,
|
|
|
|
name: 'Event log',
|
|
|
|
},
|
|
|
|
{ title: 'Variants', path: `${basePath}/variants`, name: 'Variants' },
|
2021-10-08 11:23:29 +02:00
|
|
|
{ title: 'Settings', path: `${basePath}/settings`, name: 'Settings' },
|
2021-09-27 13:35:32 +02:00
|
|
|
];
|
|
|
|
|
|
|
|
const renderTabs = () => {
|
|
|
|
return tabData.map((tab, index) => {
|
|
|
|
return (
|
|
|
|
<Tab
|
2021-10-08 16:19:06 +02:00
|
|
|
data-loading
|
2021-09-27 13:35:32 +02:00
|
|
|
key={tab.title}
|
|
|
|
label={tab.title}
|
2021-10-01 13:49:18 +02:00
|
|
|
value={tab.path}
|
2021-09-27 13:35:32 +02:00
|
|
|
{...a11yProps(index)}
|
2021-09-30 11:44:30 +02:00
|
|
|
onClick={() => {
|
|
|
|
history.push(tab.path);
|
|
|
|
}}
|
2021-09-27 13:35:32 +02:00
|
|
|
className={styles.tabButton}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2021-10-15 11:52:35 +02:00
|
|
|
const renderFeatureNotExist = () => {
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<p>
|
2021-10-19 13:08:25 +02:00
|
|
|
The feature <strong>{featureId.substring(0, 30)}</strong>{' '}
|
|
|
|
does not exist. Do you want to
|
2021-10-15 11:52:35 +02:00
|
|
|
<Link to={getCreateTogglePath(projectId)}>create it</Link>
|
|
|
|
?
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2021-09-14 14:20:23 +02:00
|
|
|
return (
|
2021-10-15 11:52:35 +02:00
|
|
|
<ConditionallyRender
|
|
|
|
condition={error === undefined}
|
|
|
|
show={
|
|
|
|
<div ref={ref}>
|
|
|
|
<div className={styles.header}>
|
|
|
|
<div className={styles.innerContainer}>
|
|
|
|
<h2
|
|
|
|
className={styles.featureViewHeader}
|
|
|
|
data-loading
|
|
|
|
>
|
|
|
|
{feature.name}
|
|
|
|
</h2>
|
|
|
|
<div className={styles.actions}>
|
|
|
|
<PermissionIconButton
|
|
|
|
permission={UPDATE_FEATURE}
|
|
|
|
tooltip="Copy"
|
|
|
|
data-loading
|
|
|
|
component={Link}
|
|
|
|
to={`/projects/${projectId}/features2/${featureId}/strategies/copy`}
|
|
|
|
>
|
|
|
|
<FileCopy />
|
|
|
|
</PermissionIconButton>
|
|
|
|
<PermissionIconButton
|
|
|
|
permission={UPDATE_FEATURE}
|
|
|
|
tooltip="Archive feature toggle"
|
|
|
|
data-loading
|
|
|
|
onClick={() => setShowDelDialog(true)}
|
|
|
|
>
|
|
|
|
<Archive />
|
|
|
|
</PermissionIconButton>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className={styles.separator} />
|
|
|
|
<div className={styles.tabContainer}>
|
|
|
|
<Tabs
|
|
|
|
value={history.location.pathname}
|
|
|
|
indicatorColor="primary"
|
|
|
|
textColor="primary"
|
|
|
|
className={styles.tabNavigation}
|
|
|
|
>
|
|
|
|
{renderTabs()}
|
|
|
|
</Tabs>
|
|
|
|
</div>
|
2021-10-08 11:23:29 +02:00
|
|
|
</div>
|
2021-10-15 11:52:35 +02:00
|
|
|
<Route
|
|
|
|
exact
|
|
|
|
path={`/projects/:projectId/features2/:featureId`}
|
|
|
|
component={FeatureOverview}
|
|
|
|
/>
|
|
|
|
<Route
|
|
|
|
path={`/projects/:projectId/features2/:featureId/strategies`}
|
|
|
|
component={FeatureStrategies}
|
|
|
|
/>
|
|
|
|
<Route
|
|
|
|
path={`/projects/:projectId/features2/:featureId/metrics`}
|
|
|
|
component={FeatureMetrics}
|
|
|
|
/>
|
|
|
|
<Route
|
|
|
|
path={`/projects/:projectId/features2/:featureId/logs`}
|
|
|
|
component={FeatureLog}
|
|
|
|
/>
|
|
|
|
<Route
|
|
|
|
path={`/projects/:projectId/features2/:featureId/variants`}
|
|
|
|
component={FeatureVariants}
|
|
|
|
/>
|
|
|
|
<Route
|
|
|
|
path={`/projects/:projectId/features2/:featureId/settings`}
|
|
|
|
component={FeatureSettings}
|
|
|
|
/>
|
|
|
|
<Dialogue
|
|
|
|
onClick={() => archiveToggle()}
|
|
|
|
open={showDelDialog}
|
|
|
|
onClose={handleCancel}
|
|
|
|
primaryButtonText="Archive toggle"
|
|
|
|
secondaryButtonText="Cancel"
|
|
|
|
title="Archive feature toggle"
|
2021-09-27 13:35:32 +02:00
|
|
|
>
|
2021-10-15 11:52:35 +02:00
|
|
|
Are you sure you want to archive this feature toggle?
|
|
|
|
</Dialogue>
|
|
|
|
{toast}
|
2021-09-27 13:35:32 +02:00
|
|
|
</div>
|
2021-10-15 11:52:35 +02:00
|
|
|
}
|
|
|
|
elseShow={renderFeatureNotExist()}
|
|
|
|
/>
|
2021-09-14 14:20:23 +02:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default FeatureView2;
|