diff --git a/frontend/src/component/menu/__tests__/__snapshots__/routes-test.jsx.snap b/frontend/src/component/menu/__tests__/__snapshots__/routes-test.jsx.snap index 6ed3d00a54..c493186d80 100644 --- a/frontend/src/component/menu/__tests__/__snapshots__/routes-test.jsx.snap +++ b/frontend/src/component/menu/__tests__/__snapshots__/routes-test.jsx.snap @@ -2,161 +2,6 @@ exports[`returns all baseRoutes 1`] = ` Array [ - Object { - "component": [Function], - "layout": "main", - "menu": Object {}, - "parent": "/features", - "path": "/features/:activeTab/:name", - "title": ":name", - "type": "protected", - }, - Object { - "component": [Function], - "layout": "main", - "menu": Object { - "mobile": true, - }, - "path": "/features", - "title": "Feature Toggles", - "type": "protected", - }, - Object { - "component": [Function], - "layout": "main", - "menu": Object {}, - "parent": "/strategies", - "path": "/strategies/create", - "title": "Create", - "type": "protected", - }, - Object { - "component": [Function], - "layout": "main", - "menu": Object {}, - "parent": "/strategies", - "path": "/strategies/:activeTab/:strategyName", - "title": ":strategyName", - "type": "protected", - }, - Object { - "component": [Function], - "layout": "main", - "menu": Object { - "advanced": true, - "mobile": true, - }, - "path": "/strategies", - "title": "Strategies", - "type": "protected", - }, - Object { - "component": [Function], - "layout": "main", - "menu": Object {}, - "parent": "/environments", - "path": "/environments/create", - "title": "Environments", - "type": "protected", - }, - Object { - "component": [Function], - "flag": "E", - "layout": "main", - "menu": Object { - "advanced": true, - "mobile": true, - }, - "path": "/environments", - "title": "Environments", - "type": "protected", - }, - Object { - "component": [Function], - "layout": "main", - "menu": Object {}, - "parent": "/history", - "path": "/history/:toggleName", - "title": ":toggleName", - "type": "protected", - }, - Object { - "component": [Function], - "layout": "main", - "menu": Object { - "adminSettings": true, - }, - "path": "/history", - "title": "Event History", - "type": "protected", - }, - Object { - "component": [Function], - "layout": "main", - "menu": Object {}, - "parent": "/archive", - "path": "/projects/:id/archived/:name/:activeTab", - "title": ":name", - "type": "protected", - }, - Object { - "component": [Function], - "layout": "main", - "menu": Object {}, - "path": "/archive", - "title": "Archived Toggles", - "type": "protected", - }, - Object { - "component": [Function], - "layout": "main", - "menu": Object {}, - "parent": "/applications", - "path": "/applications/:name", - "title": ":name", - "type": "protected", - }, - Object { - "component": [Function], - "layout": "main", - "menu": Object { - "advanced": true, - "mobile": true, - }, - "path": "/applications", - "title": "Applications", - "type": "protected", - }, - Object { - "component": [Function], - "layout": "main", - "menu": Object {}, - "parent": "/context", - "path": "/context/create", - "title": "Create", - "type": "protected", - }, - Object { - "component": [Function], - "layout": "main", - "menu": Object {}, - "parent": "/context", - "path": "/context/edit/:name", - "title": ":name", - "type": "protected", - }, - Object { - "component": [Function], - "flag": "C", - "layout": "main", - "menu": Object { - "advanced": true, - "mobile": true, - }, - "path": "/context", - "title": "Context Fields", - "type": "protected", - }, Object { "component": [Function], "layout": "main", @@ -243,7 +88,6 @@ Array [ }, Object { "component": [Function], - "flag": "P", "layout": "main", "menu": Object { "mobile": true, @@ -252,6 +96,125 @@ Array [ "title": "Projects", "type": "protected", }, + Object { + "component": [Function], + "layout": "main", + "menu": Object {}, + "parent": "/features", + "path": "/features/:activeTab/:name", + "title": ":name", + "type": "protected", + }, + Object { + "component": [Function], + "layout": "main", + "menu": Object { + "mobile": true, + }, + "path": "/features", + "title": "Feature Toggles", + "type": "protected", + }, + Object { + "component": [Function], + "layout": "main", + "menu": Object {}, + "parent": "/applications", + "path": "/applications/:name", + "title": ":name", + "type": "protected", + }, + Object { + "component": [Function], + "layout": "main", + "menu": Object { + "advanced": true, + "mobile": true, + }, + "path": "/applications", + "title": "Applications", + "type": "protected", + }, + Object { + "component": [Function], + "layout": "main", + "menu": Object {}, + "parent": "/context", + "path": "/context/create", + "title": "Create", + "type": "protected", + }, + Object { + "component": [Function], + "layout": "main", + "menu": Object {}, + "parent": "/context", + "path": "/context/edit/:name", + "title": ":name", + "type": "protected", + }, + Object { + "component": [Function], + "flag": "C", + "layout": "main", + "menu": Object { + "advanced": true, + "mobile": true, + }, + "path": "/context", + "title": "Context Fields", + "type": "protected", + }, + Object { + "component": [Function], + "layout": "main", + "menu": Object {}, + "parent": "/strategies", + "path": "/strategies/create", + "title": "Create", + "type": "protected", + }, + Object { + "component": [Function], + "layout": "main", + "menu": Object {}, + "parent": "/strategies", + "path": "/strategies/:activeTab/:strategyName", + "title": ":strategyName", + "type": "protected", + }, + Object { + "component": [Function], + "layout": "main", + "menu": Object { + "advanced": true, + "mobile": true, + }, + "path": "/strategies", + "title": "Strategies", + "type": "protected", + }, + Object { + "component": [Function], + "layout": "main", + "menu": Object {}, + "parent": "/environments", + "path": "/environments/create", + "title": "Environments", + "type": "protected", + }, + Object { + "component": [Function], + "flag": "E", + "layout": "main", + "menu": Object { + "advanced": true, + "mobile": true, + }, + "path": "/environments", + "title": "Environments", + "type": "protected", + }, Object { "component": [Function], "layout": "main", @@ -320,6 +283,42 @@ Array [ "title": "Addons", "type": "protected", }, + Object { + "component": [Function], + "layout": "main", + "menu": Object {}, + "parent": "/history", + "path": "/history/:toggleName", + "title": ":toggleName", + "type": "protected", + }, + Object { + "component": [Function], + "layout": "main", + "menu": Object { + "adminSettings": true, + }, + "path": "/history", + "title": "Event History", + "type": "protected", + }, + Object { + "component": [Function], + "layout": "main", + "menu": Object {}, + "parent": "/archive", + "path": "/projects/:id/archived/:name/:activeTab", + "title": ":name", + "type": "protected", + }, + Object { + "component": [Function], + "layout": "main", + "menu": Object {}, + "path": "/archive", + "title": "Archived Toggles", + "type": "protected", + }, Object { "component": [Function], "layout": "main", diff --git a/frontend/src/component/menu/routes.js b/frontend/src/component/menu/routes.js index d9eac6e4e1..3280dc64de 100644 --- a/frontend/src/component/menu/routes.js +++ b/frontend/src/component/menu/routes.js @@ -42,157 +42,6 @@ import CreateEnvironment from '../environments/CreateEnvironment/CreateEnvironme import FeatureView2 from '../feature/FeatureView2/FeatureView2'; export const routes = [ - // Features - { - path: '/features/:activeTab/:name', - parent: '/features', - title: ':name', - component: RedirectFeatureViewPage, - type: 'protected', - layout: 'main', - menu: {}, - }, - { - path: '/features', - title: 'Feature Toggles', - component: Features, - type: 'protected', - layout: 'main', - menu: { mobile: true }, - }, - - // Strategies - { - path: '/strategies/create', - title: 'Create', - parent: '/strategies', - component: CreateStrategies, - type: 'protected', - layout: 'main', - menu: {}, - }, - { - path: '/strategies/:activeTab/:strategyName', - title: ':strategyName', - parent: '/strategies', - component: StrategyView, - type: 'protected', - layout: 'main', - menu: {}, - }, - { - path: '/strategies', - title: 'Strategies', - component: Strategies, - type: 'protected', - layout: 'main', - menu: { mobile: true, advanced: true }, - }, - { - path: '/environments/create', - title: 'Environments', - component: CreateEnvironment, - parent: '/environments', - type: 'protected', - layout: 'main', - menu: {}, - }, - { - path: '/environments', - title: 'Environments', - component: EnvironmentList, - type: 'protected', - layout: 'main', - flag: E, - menu: { mobile: true, advanced: true }, - }, - - // History - { - path: '/history/:toggleName', - title: ':toggleName', - parent: '/history', - component: HistoryTogglePage, - type: 'protected', - layout: 'main', - menu: {}, - }, - { - path: '/history', - title: 'Event History', - component: HistoryPage, - type: 'protected', - layout: 'main', - menu: { adminSettings: true }, - }, - - // Archive - { - path: '/projects/:id/archived/:name/:activeTab', - title: ':name', - parent: '/archive', - component: ShowArchive, - type: 'protected', - layout: 'main', - menu: {}, - }, - { - path: '/archive', - title: 'Archived Toggles', - component: Archive, - type: 'protected', - layout: 'main', - menu: {}, - }, - - // Applications - { - path: '/applications/:name', - title: ':name', - parent: '/applications', - component: ApplicationView, - type: 'protected', - layout: 'main', - menu: {}, - }, - { - path: '/applications', - title: 'Applications', - component: Applications, - type: 'protected', - layout: 'main', - menu: { mobile: true, advanced: true }, - }, - - // Context - { - path: '/context/create', - parent: '/context', - title: 'Create', - component: CreateContextField, - type: 'protected', - layout: 'main', - menu: {}, - }, - { - path: '/context/edit/:name', - parent: '/context', - title: ':name', - component: EditContextField, - type: 'protected', - layout: 'main', - menu: {}, - }, - { - path: '/context', - title: 'Context Fields', - component: ContextFields, - type: 'protected', - flag: C, - layout: 'main', - menu: { mobile: true, advanced: true }, - }, - // Project { path: '/projects/create', @@ -282,12 +131,125 @@ export const routes = [ path: '/projects', title: 'Projects', component: ProjectListNew, - flag: P, type: 'protected', layout: 'main', menu: { mobile: true }, }, + // Features + { + path: '/features/:activeTab/:name', + parent: '/features', + title: ':name', + component: RedirectFeatureViewPage, + type: 'protected', + layout: 'main', + menu: {}, + }, + { + path: '/features', + title: 'Feature Toggles', + component: Features, + type: 'protected', + layout: 'main', + menu: { mobile: true }, + }, + + // Applications + { + path: '/applications/:name', + title: ':name', + parent: '/applications', + component: ApplicationView, + type: 'protected', + layout: 'main', + menu: {}, + }, + { + path: '/applications', + title: 'Applications', + component: Applications, + type: 'protected', + layout: 'main', + menu: { mobile: true, advanced: true }, + }, + + // Context + { + path: '/context/create', + parent: '/context', + title: 'Create', + component: CreateContextField, + type: 'protected', + layout: 'main', + menu: {}, + }, + { + path: '/context/edit/:name', + parent: '/context', + title: ':name', + component: EditContextField, + type: 'protected', + layout: 'main', + menu: {}, + }, + { + path: '/context', + title: 'Context Fields', + component: ContextFields, + type: 'protected', + flag: C, + layout: 'main', + menu: { mobile: true, advanced: true }, + }, + + // Strategies + { + path: '/strategies/create', + title: 'Create', + parent: '/strategies', + component: CreateStrategies, + type: 'protected', + layout: 'main', + menu: {}, + }, + { + path: '/strategies/:activeTab/:strategyName', + title: ':strategyName', + parent: '/strategies', + component: StrategyView, + type: 'protected', + layout: 'main', + menu: {}, + }, + { + path: '/strategies', + title: 'Strategies', + component: Strategies, + type: 'protected', + layout: 'main', + menu: { mobile: true, advanced: true }, + }, + { + path: '/environments/create', + title: 'Environments', + component: CreateEnvironment, + parent: '/environments', + type: 'protected', + layout: 'main', + menu: {}, + }, + { + path: '/environments', + title: 'Environments', + component: EnvironmentList, + type: 'protected', + layout: 'main', + flag: E, + menu: { mobile: true, advanced: true }, + }, + + // Tags { path: '/tag-types/create', parent: '/tag-types', @@ -314,7 +276,6 @@ export const routes = [ layout: 'main', menu: { mobile: true, advanced: true }, }, - { path: '/tags/create', parent: '/tags', @@ -334,8 +295,8 @@ export const routes = [ menu: {}, }, - // Addons - { + // Addons + { path: '/addons/create/:provider', parent: '/addons', title: 'Create', @@ -362,6 +323,45 @@ export const routes = [ layout: 'main', menu: { mobile: true, advanced: true }, }, + + // History + { + path: '/history/:toggleName', + title: ':toggleName', + parent: '/history', + component: HistoryTogglePage, + type: 'protected', + layout: 'main', + menu: {}, + }, + { + path: '/history', + title: 'Event History', + component: HistoryPage, + type: 'protected', + layout: 'main', + menu: { adminSettings: true }, + }, + + // Archive + { + path: '/projects/:id/archived/:name/:activeTab', + title: ':name', + parent: '/archive', + component: ShowArchive, + type: 'protected', + layout: 'main', + menu: {}, + }, + { + path: '/archive', + title: 'Archived Toggles', + component: Archive, + type: 'protected', + layout: 'main', + menu: {}, + }, + // Admin { path: '/admin/api', diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx index bc4f2bf1de..3474dd56c5 100644 --- a/frontend/src/component/project/Project/Project.tsx +++ b/frontend/src/component/project/Project/Project.tsx @@ -33,42 +33,6 @@ const Project = () => { const { a11yProps, activeTabIdx, setActiveTab } = useTabs(0); const basePath = `/projects/${id}`; - - useEffect(() => { - const created = params.get('created'); - const edited = params.get('edited'); - - if (created || edited) { - const text = created ? 'Project created' : 'Project updated'; - setToastData({ - show: true, - type: 'success', - text, - }); - } - /* eslint-disable-next-line */ - }, []); - - useEffect(() => { - const tabIdx = tabData.findIndex(tab => tab.name === activeTab); - if(tabIdx > 0) { - setActiveTab(tabIdx); - } else { - setActiveTab(0); - } - - /* eslint-disable-next-line */ - }, []); - - const goToTabWithName = (name: string) => { - const index = tabData.findIndex(t => t.name === name); - if(index >= 0) { - const tab = tabData[index]; - history.push(tab.path); - setActiveTab(index); - } - } - const tabData = [ { title: 'Overview', @@ -102,7 +66,47 @@ const Project = () => { path: `${basePath}/settings`, name: 'settings', }, - ].filter(tab => !tab.disabled); + ] + + useEffect(() => { + const created = params.get('created'); + const edited = params.get('edited'); + + if (created || edited) { + const text = created ? 'Project created' : 'Project updated'; + setToastData({ + show: true, + type: 'success', + text, + }); + } + + tabData.filter(tab => !tab.disabled); + + /* eslint-disable-next-line */ + }, []); + + useEffect(() => { + const tabIdx = tabData.findIndex(tab => tab.name === activeTab); + if(tabIdx > 0) { + setActiveTab(tabIdx); + } else { + setActiveTab(0); + } + + /* eslint-disable-next-line */ + }, []); + + const goToTabWithName = (name: string) => { + const index = tabData.findIndex(t => t.name === name); + if(index >= 0) { + const tab = tabData[index]; + history.push(tab.path); + setActiveTab(index); + } + } + + const renderTabs = () => { diff --git a/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx b/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx index 73a107bee3..1570066c59 100644 --- a/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx +++ b/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx @@ -45,8 +45,6 @@ const ProjectEnvironmentList = ({ projectId }: ProjectEnvironmentListProps) => { const { removeEnvironmentFromProject, addEnvironmentToProject } = useProjectApi(); - console.log(project); - // local state const [selectedEnv, setSelectedEnv] = useState(); const [confirmName, setConfirmName] = useState(''); diff --git a/frontend/src/themes/main-theme.js b/frontend/src/themes/main-theme.js index 1a45f5e8c2..70c1443632 100644 --- a/frontend/src/themes/main-theme.js +++ b/frontend/src/themes/main-theme.js @@ -1,6 +1,6 @@ -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const theme = createTheme({ typography: { fontFamily: ['Sen', 'Roboto, sans-serif'], fontWeightBold: '700',