2022-05-02 15:52:41 +02:00
|
|
|
import { Tab, Tabs, useMediaQuery } from '@mui/material';
|
2022-02-21 15:22:37 +01:00
|
|
|
import React, { useState } from 'react';
|
2022-05-02 15:52:41 +02:00
|
|
|
import { Archive, FileCopy, Label, WatchLater } from '@mui/icons-material';
|
2022-05-05 13:42:18 +02:00
|
|
|
import {
|
|
|
|
Link,
|
|
|
|
Route,
|
|
|
|
useNavigate,
|
|
|
|
Routes,
|
|
|
|
useLocation,
|
|
|
|
} from 'react-router-dom';
|
2022-03-10 10:52:50 +01:00
|
|
|
import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
|
2022-03-28 10:49:59 +02:00
|
|
|
import useProject from 'hooks/api/getters/useProject/useProject';
|
2022-01-14 15:50:02 +01:00
|
|
|
import {
|
|
|
|
CREATE_FEATURE,
|
|
|
|
DELETE_FEATURE,
|
|
|
|
UPDATE_FEATURE,
|
2022-03-28 10:49:59 +02:00
|
|
|
} from 'component/providers/AccessProvider/permissions';
|
|
|
|
import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
|
2021-10-01 13:49:18 +02:00
|
|
|
import FeatureLog from './FeatureLog/FeatureLog';
|
|
|
|
import FeatureOverview from './FeatureOverview/FeatureOverview';
|
|
|
|
import FeatureVariants from './FeatureVariants/FeatureVariants';
|
2022-02-21 15:22:37 +01:00
|
|
|
import { FeatureMetrics } from './FeatureMetrics/FeatureMetrics';
|
2022-02-04 10:36:08 +01:00
|
|
|
import { useStyles } from './FeatureView.styles';
|
2022-03-02 10:15:37 +01:00
|
|
|
import { FeatureSettings } from './FeatureSettings/FeatureSettings';
|
2022-03-28 10:49:59 +02:00
|
|
|
import useLoading from 'hooks/useLoading';
|
2022-05-02 12:52:33 +02:00
|
|
|
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
2022-05-13 14:51:22 +02:00
|
|
|
import { FeatureStaleDialog } from 'component/common/FeatureStaleDialog/FeatureStaleDialog';
|
2021-11-12 11:47:19 +01:00
|
|
|
import AddTagDialog from './FeatureOverview/AddTagDialog/AddTagDialog';
|
2022-03-28 10:49:59 +02:00
|
|
|
import StatusChip from 'component/common/StatusChip/StatusChip';
|
2022-03-10 10:52:50 +01:00
|
|
|
import { FeatureNotFound } from 'component/feature/FeatureView/FeatureNotFound/FeatureNotFound';
|
2022-05-05 13:42:18 +02:00
|
|
|
import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
|
2022-05-13 14:51:22 +02:00
|
|
|
import { FeatureArchiveDialog } from '../../common/FeatureArchiveDialog/FeatureArchiveDialog';
|
2021-09-14 14:20:23 +02:00
|
|
|
|
2022-03-02 10:15:37 +01:00
|
|
|
export const FeatureView = () => {
|
2022-05-05 13:42:18 +02:00
|
|
|
const projectId = useRequiredPathParam('projectId');
|
|
|
|
const featureId = useRequiredPathParam('featureId');
|
2021-10-19 12:36:51 +02:00
|
|
|
const { refetch: projectRefetch } = useProject(projectId);
|
2022-05-13 14:51:22 +02:00
|
|
|
const { refetchFeature } = useFeature(projectId, featureId);
|
|
|
|
|
2021-11-12 11:47:19 +01:00
|
|
|
const [openTagDialog, setOpenTagDialog] = useState(false);
|
2021-10-08 11:23:29 +02:00
|
|
|
const [showDelDialog, setShowDelDialog] = useState(false);
|
2021-11-12 11:47:19 +01:00
|
|
|
const [openStaleDialog, setOpenStaleDialog] = useState(false);
|
|
|
|
const smallScreen = useMediaQuery(`(max-width:${500}px)`);
|
|
|
|
|
2022-03-10 10:52:50 +01:00
|
|
|
const { feature, loading, error, status } = useFeature(
|
|
|
|
projectId,
|
|
|
|
featureId
|
|
|
|
);
|
|
|
|
|
2022-05-02 15:52:41 +02:00
|
|
|
const { classes: styles } = useStyles();
|
2022-05-05 13:42:18 +02:00
|
|
|
const navigate = useNavigate();
|
|
|
|
const { pathname } = useLocation();
|
2021-10-08 16:19:06 +02:00
|
|
|
const ref = useLoading(loading);
|
2021-09-30 11:44:30 +02:00
|
|
|
|
2022-02-04 10:36:08 +01:00
|
|
|
const basePath = `/projects/${projectId}/features/${featureId}`;
|
2021-09-30 11:44:30 +02:00
|
|
|
|
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',
|
|
|
|
},
|
2021-10-01 13:49:18 +02:00
|
|
|
{
|
|
|
|
title: 'Metrics',
|
|
|
|
path: `${basePath}/metrics`,
|
|
|
|
name: 'Metrics',
|
|
|
|
},
|
2021-11-12 11:47:19 +01:00
|
|
|
{ title: 'Variants', path: `${basePath}/variants`, name: 'Variants' },
|
|
|
|
{ title: 'Settings', path: `${basePath}/settings`, name: 'Settings' },
|
2021-10-01 13:49:18 +02:00
|
|
|
{
|
|
|
|
title: 'Event log',
|
|
|
|
path: `${basePath}/logs`,
|
|
|
|
name: 'Event log',
|
|
|
|
},
|
2021-09-27 13:35:32 +02:00
|
|
|
];
|
|
|
|
|
2022-05-05 13:42:18 +02:00
|
|
|
const activeTab = tabData.find(tab => tab.path === pathname) ?? tabData[0];
|
2022-03-09 14:59:24 +01:00
|
|
|
|
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}
|
2022-05-05 13:42:18 +02:00
|
|
|
onClick={() => navigate(tab.path)}
|
2021-09-27 13:35:32 +02:00
|
|
|
className={styles.tabButton}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2022-03-10 10:52:50 +01:00
|
|
|
if (status === 404) {
|
|
|
|
return <FeatureNotFound />;
|
|
|
|
}
|
2021-10-15 11:52:35 +02:00
|
|
|
|
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}>
|
2021-11-12 11:47:19 +01:00
|
|
|
<div className={styles.toggleInfoContainer}>
|
2022-04-21 09:52:43 +02:00
|
|
|
<h1
|
2021-11-12 11:47:19 +01:00
|
|
|
className={styles.featureViewHeader}
|
|
|
|
data-loading
|
|
|
|
>
|
|
|
|
{feature.name}{' '}
|
2022-04-21 09:52:43 +02:00
|
|
|
</h1>
|
2021-11-12 11:47:19 +01:00
|
|
|
<ConditionallyRender
|
|
|
|
condition={!smallScreen}
|
|
|
|
show={<StatusChip stale={feature?.stale} />}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
|
2022-05-12 15:34:04 +02:00
|
|
|
<div className={styles.toolbarContainer}>
|
2021-10-15 11:52:35 +02:00
|
|
|
<PermissionIconButton
|
2022-01-14 15:50:02 +01:00
|
|
|
permission={CREATE_FEATURE}
|
2021-10-20 12:05:44 +02:00
|
|
|
projectId={projectId}
|
2021-10-15 11:52:35 +02:00
|
|
|
data-loading
|
|
|
|
component={Link}
|
2022-02-04 10:36:08 +01:00
|
|
|
to={`/projects/${projectId}/features/${featureId}/strategies/copy`}
|
2022-05-09 15:17:20 +02:00
|
|
|
tooltipProps={{
|
|
|
|
title: 'Copy feature toggle',
|
|
|
|
}}
|
2021-10-15 11:52:35 +02:00
|
|
|
>
|
2022-04-21 08:26:49 +02:00
|
|
|
<FileCopy />
|
2021-10-15 11:52:35 +02:00
|
|
|
</PermissionIconButton>
|
|
|
|
<PermissionIconButton
|
2022-01-14 15:50:02 +01:00
|
|
|
permission={DELETE_FEATURE}
|
2021-10-20 12:05:44 +02:00
|
|
|
projectId={projectId}
|
2022-05-09 15:17:20 +02:00
|
|
|
tooltipProps={{
|
|
|
|
title: 'Archive feature toggle',
|
|
|
|
}}
|
2021-10-15 11:52:35 +02:00
|
|
|
data-loading
|
|
|
|
onClick={() => setShowDelDialog(true)}
|
|
|
|
>
|
2022-04-21 08:26:49 +02:00
|
|
|
<Archive />
|
2021-10-15 11:52:35 +02:00
|
|
|
</PermissionIconButton>
|
2021-11-12 11:47:19 +01:00
|
|
|
<PermissionIconButton
|
|
|
|
onClick={() => setOpenStaleDialog(true)}
|
|
|
|
permission={UPDATE_FEATURE}
|
|
|
|
projectId={projectId}
|
2022-05-09 15:17:20 +02:00
|
|
|
tooltipProps={{
|
2022-06-15 15:16:42 +02:00
|
|
|
title: 'Toggle stale state',
|
2022-05-09 15:17:20 +02:00
|
|
|
}}
|
2021-11-12 11:47:19 +01:00
|
|
|
data-loading
|
|
|
|
>
|
2022-04-21 08:26:49 +02:00
|
|
|
<WatchLater />
|
2021-11-12 11:47:19 +01:00
|
|
|
</PermissionIconButton>
|
|
|
|
<PermissionIconButton
|
|
|
|
onClick={() => setOpenTagDialog(true)}
|
|
|
|
permission={UPDATE_FEATURE}
|
|
|
|
projectId={projectId}
|
2022-05-09 15:17:20 +02:00
|
|
|
tooltipProps={{ title: 'Add tag' }}
|
2021-11-12 11:47:19 +01:00
|
|
|
data-loading
|
|
|
|
>
|
2022-04-21 08:26:49 +02:00
|
|
|
<Label />
|
2021-11-12 11:47:19 +01:00
|
|
|
</PermissionIconButton>
|
2021-10-15 11:52:35 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className={styles.separator} />
|
|
|
|
<div className={styles.tabContainer}>
|
|
|
|
<Tabs
|
2022-03-09 14:59:24 +01:00
|
|
|
value={activeTab.path}
|
2021-10-15 11:52:35 +02:00
|
|
|
indicatorColor="primary"
|
|
|
|
textColor="primary"
|
|
|
|
>
|
|
|
|
{renderTabs()}
|
|
|
|
</Tabs>
|
|
|
|
</div>
|
2021-10-08 11:23:29 +02:00
|
|
|
</div>
|
2022-05-05 13:42:18 +02:00
|
|
|
<Routes>
|
|
|
|
<Route path="metrics" element={<FeatureMetrics />} />
|
|
|
|
<Route path="logs" element={<FeatureLog />} />
|
|
|
|
<Route path="variants" element={<FeatureVariants />} />
|
|
|
|
<Route path="settings" element={<FeatureSettings />} />
|
|
|
|
<Route path="*" element={<FeatureOverview />} />
|
|
|
|
</Routes>
|
2022-05-13 14:51:22 +02:00
|
|
|
<FeatureArchiveDialog
|
|
|
|
isOpen={showDelDialog}
|
|
|
|
onConfirm={() => {
|
|
|
|
projectRefetch();
|
|
|
|
navigate(`/projects/${projectId}`);
|
|
|
|
}}
|
|
|
|
onClose={() => setShowDelDialog(false)}
|
|
|
|
projectId={projectId}
|
|
|
|
featureId={featureId}
|
|
|
|
/>
|
|
|
|
<FeatureStaleDialog
|
|
|
|
isStale={feature.stale}
|
|
|
|
isOpen={openStaleDialog}
|
|
|
|
onClose={() => {
|
|
|
|
setOpenStaleDialog(false);
|
|
|
|
refetchFeature();
|
|
|
|
}}
|
|
|
|
featureId={featureId}
|
|
|
|
projectId={projectId}
|
2021-11-12 11:47:19 +01:00
|
|
|
/>
|
|
|
|
<AddTagDialog
|
|
|
|
open={openTagDialog}
|
|
|
|
setOpen={setOpenTagDialog}
|
|
|
|
/>
|
2021-09-27 13:35:32 +02:00
|
|
|
</div>
|
2021-10-15 11:52:35 +02:00
|
|
|
}
|
|
|
|
/>
|
2021-09-14 14:20:23 +02:00
|
|
|
);
|
|
|
|
};
|