mirror of
https://github.com/Unleash/unleash.git
synced 2024-10-18 20:09:08 +02:00
87414c1c9c
* fix: add sidebar button * fix: set absolute positioned sidebar button * feat: test setup * fix: add tests for adding strategy * fix: add delete strategy test * feat: add workflow * feat: add vercel token * fix: update project id * fix: increase sleep * fix: sleep * fix: vercel * fix: typo * fix: vercel preview url action * fix: yml formatting * fix: steps * fix: format * fix: runs on * fix: team id * fix: teamid * fix: add workflow * fix: remove unused import * fix: add token * fix: add configuration * fix: set env variables * fix: use with * feat: main navigation routes * feat: mobile views * fix: change spec name * fix: update cypress project id * fix: add record key * fix: button positioning * feat: permissions * fix: custom strategy * fix: remove unused action yml * fix: update yarn lock * fix: keys * fix: remove videos and screenshots * fix: add cyrpess folders to gitignore * fix: env variable
118 lines
3.8 KiB
TypeScript
118 lines
3.8 KiB
TypeScript
import { Tabs, Tab } from '@material-ui/core';
|
|
import { useEffect } from 'react';
|
|
import { useHistory, useParams } from 'react-router-dom';
|
|
import useFeature from '../../../hooks/api/getters/useFeature/useFeature';
|
|
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';
|
|
import FeatureViewEnvironment from './FeatureViewEnvironment/FeatureViewEnvironment';
|
|
import FeatureViewMetaData from './FeatureViewMetaData/FeatureViewMetaData';
|
|
|
|
const FeatureView2 = () => {
|
|
const { projectId, featureId, activeTab } = useParams<IFeatureViewParams>();
|
|
const { feature } = useFeature(projectId, featureId);
|
|
const { a11yProps, activeTabIdx, setActiveTab } = useTabs(0);
|
|
const styles = useStyles();
|
|
const history = useHistory();
|
|
|
|
const basePath = `/projects/${projectId}/features2/${featureId}`;
|
|
|
|
useEffect(() => {
|
|
const tabIdx = tabData.findIndex(tab => tab.name === activeTab);
|
|
setActiveTab(tabIdx);
|
|
/* eslint-disable-next-line */
|
|
}, []);
|
|
|
|
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(),
|
|
path: `${basePath}/overview`,
|
|
name: 'overview',
|
|
},
|
|
{
|
|
title: 'Strategies',
|
|
component: <FeatureStrategies />,
|
|
path: `${basePath}/strategies`,
|
|
name: 'strategies',
|
|
},
|
|
];
|
|
|
|
const renderTabs = () => {
|
|
return tabData.map((tab, index) => {
|
|
return (
|
|
<Tab
|
|
key={tab.title}
|
|
label={tab.title}
|
|
{...a11yProps(index)}
|
|
onClick={() => {
|
|
setActiveTab(index);
|
|
history.push(tab.path);
|
|
}}
|
|
className={styles.tabButton}
|
|
/>
|
|
);
|
|
});
|
|
};
|
|
|
|
const renderTabContent = () => {
|
|
return tabData.map((tab, index) => {
|
|
return (
|
|
<TabPanel value={activeTabIdx} index={index} key={tab.path}>
|
|
{tab.component}
|
|
</TabPanel>
|
|
);
|
|
});
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<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={activeTabIdx}
|
|
onChange={(_, tabId) => {
|
|
setActiveTab(tabId);
|
|
}}
|
|
indicatorColor="primary"
|
|
textColor="primary"
|
|
className={styles.tabNavigation}
|
|
>
|
|
{renderTabs()}
|
|
</Tabs>
|
|
</div>
|
|
</div>
|
|
{renderTabContent()}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default FeatureView2;
|