2021-09-27 13:35:32 +02:00
|
|
|
import { Tabs, Tab } from '@material-ui/core';
|
2021-09-30 11:44:30 +02:00
|
|
|
import { useEffect } from 'react';
|
|
|
|
import { useHistory, useParams } from 'react-router-dom';
|
2021-09-14 14:20:23 +02:00
|
|
|
import useFeature from '../../../hooks/api/getters/useFeature/useFeature';
|
2021-09-27 13:35:32 +02:00
|
|
|
import useTabs from '../../../hooks/useTabs';
|
|
|
|
import { IFeatureViewParams } from '../../../interfaces/params';
|
|
|
|
import TabPanel from '../../common/TabNav/TabPanel';
|
|
|
|
import FeatureStrategies from './FeatureStrategies/FeatureStrategies';
|
|
|
|
import { useStyles } from './FeatureView2.styles';
|
2021-09-14 14:20:23 +02:00
|
|
|
import FeatureViewEnvironment from './FeatureViewEnvironment/FeatureViewEnvironment';
|
|
|
|
import FeatureViewMetaData from './FeatureViewMetaData/FeatureViewMetaData';
|
|
|
|
|
|
|
|
const FeatureView2 = () => {
|
2021-09-30 11:44:30 +02:00
|
|
|
const { projectId, featureId, activeTab } = useParams<IFeatureViewParams>();
|
2021-09-14 14:20:23 +02:00
|
|
|
const { feature } = useFeature(projectId, featureId);
|
2021-09-30 11:44:30 +02:00
|
|
|
const { a11yProps, activeTabIdx, setActiveTab } = useTabs(0);
|
2021-09-27 13:35:32 +02:00
|
|
|
const styles = useStyles();
|
2021-09-30 11:44:30 +02:00
|
|
|
const history = useHistory();
|
|
|
|
|
|
|
|
const basePath = `/projects/${projectId}/features2/${featureId}`;
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
const tabIdx = tabData.findIndex(tab => tab.name === activeTab);
|
|
|
|
setActiveTab(tabIdx);
|
|
|
|
/* eslint-disable-next-line */
|
|
|
|
}, []);
|
2021-09-27 13:35:32 +02:00
|
|
|
|
|
|
|
const renderOverview = () => {
|
|
|
|
return (
|
|
|
|
<div style={{ display: 'flex', width: '100%' }}>
|
|
|
|
<FeatureViewMetaData />
|
|
|
|
<div
|
|
|
|
style={{
|
|
|
|
display: 'flex',
|
|
|
|
flexDirection: 'column',
|
|
|
|
width: '100%',
|
|
|
|
}}
|
|
|
|
>
|
2021-09-30 11:44:30 +02:00
|
|
|
{feature?.environments?.map(env => {
|
2021-09-27 13:35:32 +02:00
|
|
|
return (
|
|
|
|
<FeatureViewEnvironment env={env} key={env.name} />
|
|
|
|
);
|
|
|
|
})}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
const tabData = [
|
2021-09-30 11:44:30 +02:00
|
|
|
{
|
|
|
|
title: 'Overview',
|
|
|
|
component: renderOverview(),
|
|
|
|
path: `${basePath}/overview`,
|
|
|
|
name: 'overview',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Strategies',
|
|
|
|
component: <FeatureStrategies />,
|
|
|
|
path: `${basePath}/strategies`,
|
|
|
|
name: 'strategies',
|
|
|
|
},
|
2021-09-27 13:35:32 +02:00
|
|
|
];
|
|
|
|
|
|
|
|
const renderTabs = () => {
|
|
|
|
return tabData.map((tab, index) => {
|
|
|
|
return (
|
|
|
|
<Tab
|
|
|
|
key={tab.title}
|
|
|
|
label={tab.title}
|
|
|
|
{...a11yProps(index)}
|
2021-09-30 11:44:30 +02:00
|
|
|
onClick={() => {
|
|
|
|
setActiveTab(index);
|
|
|
|
history.push(tab.path);
|
|
|
|
}}
|
2021-09-27 13:35:32 +02:00
|
|
|
className={styles.tabButton}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
const renderTabContent = () => {
|
|
|
|
return tabData.map((tab, index) => {
|
|
|
|
return (
|
2021-09-30 11:44:30 +02:00
|
|
|
<TabPanel value={activeTabIdx} index={index} key={tab.path}>
|
2021-09-27 13:35:32 +02:00
|
|
|
{tab.component}
|
|
|
|
</TabPanel>
|
|
|
|
);
|
|
|
|
});
|
|
|
|
};
|
2021-09-14 14:20:23 +02:00
|
|
|
|
|
|
|
return (
|
2021-09-27 13:35:32 +02:00
|
|
|
<>
|
|
|
|
<div className={styles.header}>
|
|
|
|
<div className={styles.innerContainer}>
|
|
|
|
<h2 className={styles.featureViewHeader}>{feature.name}</h2>
|
|
|
|
</div>
|
|
|
|
<div className={styles.separator} />
|
|
|
|
<div className={styles.tabContainer}>
|
|
|
|
<Tabs
|
2021-09-30 11:44:30 +02:00
|
|
|
value={activeTabIdx}
|
2021-09-27 13:35:32 +02:00
|
|
|
onChange={(_, tabId) => {
|
|
|
|
setActiveTab(tabId);
|
|
|
|
}}
|
|
|
|
indicatorColor="primary"
|
|
|
|
textColor="primary"
|
|
|
|
className={styles.tabNavigation}
|
|
|
|
>
|
|
|
|
{renderTabs()}
|
|
|
|
</Tabs>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{renderTabContent()}
|
|
|
|
</>
|
2021-09-14 14:20:23 +02:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default FeatureView2;
|