2021-09-27 13:35:32 +02:00
|
|
|
import { Tabs, Tab } from '@material-ui/core';
|
2021-09-14 14:20:23 +02:00
|
|
|
import { useParams } from 'react-router-dom';
|
|
|
|
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-27 13:35:32 +02:00
|
|
|
const { projectId, featureId } = useParams<IFeatureViewParams>();
|
2021-09-14 14:20:23 +02:00
|
|
|
const { feature } = useFeature(projectId, featureId);
|
2021-09-27 13:35:32 +02:00
|
|
|
const { a11yProps, activeTab, setActiveTab } = useTabs(0);
|
|
|
|
const styles = useStyles();
|
|
|
|
|
|
|
|
const renderOverview = () => {
|
|
|
|
return (
|
|
|
|
<div style={{ display: 'flex', width: '100%' }}>
|
|
|
|
<FeatureViewMetaData />
|
|
|
|
<div
|
|
|
|
style={{
|
|
|
|
display: 'flex',
|
|
|
|
flexDirection: 'column',
|
|
|
|
width: '100%',
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{feature?.environments.map(env => {
|
|
|
|
return (
|
|
|
|
<FeatureViewEnvironment env={env} key={env.name} />
|
|
|
|
);
|
|
|
|
})}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
const tabData = [
|
|
|
|
{ title: 'Overview', component: renderOverview() },
|
|
|
|
{ title: 'Strategies', component: <FeatureStrategies /> },
|
|
|
|
];
|
|
|
|
|
|
|
|
const renderTabs = () => {
|
|
|
|
return tabData.map((tab, index) => {
|
|
|
|
return (
|
|
|
|
<Tab
|
|
|
|
key={tab.title}
|
|
|
|
label={tab.title}
|
|
|
|
{...a11yProps(index)}
|
|
|
|
onClick={() => setActiveTab(index)}
|
|
|
|
className={styles.tabButton}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
const renderTabContent = () => {
|
|
|
|
return tabData.map((tab, index) => {
|
|
|
|
return (
|
|
|
|
<TabPanel value={activeTab} index={index}>
|
|
|
|
{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
|
|
|
|
value={activeTab}
|
|
|
|
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;
|