diff --git a/packages/sirius-web/frontend/sirius-web-application/src/application/SiriusWebApplication.tsx b/packages/sirius-web/frontend/sirius-web-application/src/application/SiriusWebApplication.tsx index 4b0ab28416..06f623dba0 100644 --- a/packages/sirius-web/frontend/sirius-web-application/src/application/SiriusWebApplication.tsx +++ b/packages/sirius-web/frontend/sirius-web-application/src/application/SiriusWebApplication.tsx @@ -53,6 +53,11 @@ import { OnboardArea } from '../onboarding/OnboardArea'; import { RepresentationContextProvider } from '../representations/RepresentationContextProvider'; import { Router } from '../router/Router'; import { siriusWebTheme as defaultTheme } from '../theme/siriusWebTheme'; +import { + ProjectSettingTabContribution, + projectSettingsTabExtensionPoint, +} from '../views/project-settings/ProjectSettingsViewExtensionPoints'; +import { ProjectImagesSettings } from '../views/project-settings/images/ProjectImagesSettings'; import { SiriusWebApplicationProps } from './SiriusWebApplication.types'; const style = { @@ -133,6 +138,13 @@ export const SiriusWebApplication = ({ }, ]; + const projectSettingsTabContributions: ProjectSettingTabContribution[] = [ + { + title: 'Images', + component: ProjectImagesSettings, + }, + ]; + const internalExtensionRegistry = new ExtensionRegistry(); internalExtensionRegistry.addComponent(workbenchMainAreaExtensionPoint, { identifier: 'sw_onboard', @@ -142,6 +154,11 @@ export const SiriusWebApplication = ({ identifier: 'sw_workbenchView', data: workbenchViewContributions, }); + internalExtensionRegistry.putData(projectSettingsTabExtensionPoint, { + identifier: 'sw_projectSettingsTab', + data: projectSettingsTabContributions, + }); + if (extensionRegistry) { internalExtensionRegistry.addAll( extensionRegistry, diff --git a/packages/sirius-web/frontend/sirius-web-application/src/index.ts b/packages/sirius-web/frontend/sirius-web-application/src/index.ts index 2b2f1129cc..c089d59c8c 100644 --- a/packages/sirius-web/frontend/sirius-web-application/src/index.ts +++ b/packages/sirius-web/frontend/sirius-web-application/src/index.ts @@ -36,3 +36,4 @@ export { routerExtensionPoint } from './router/RouterExtensionPoints'; export { projectActionButtonMenuItemExtensionPoint } from './views/project-browser/list-projects-area/ProjectActionButtonExtensionPoints'; export { type ProjectRowProps } from './views/project-browser/list-projects-area/ProjectRow.types'; export { projectsTableRowExtensionPoint } from './views/project-browser/list-projects-area/ProjectsTableExtensionPoints'; +export * from './views/project-settings/ProjectSettingsViewExtensionPoints'; diff --git a/packages/sirius-web/frontend/sirius-web-application/src/views/project-settings/ProjectSettingsView.tsx b/packages/sirius-web/frontend/sirius-web-application/src/views/project-settings/ProjectSettingsView.tsx index db5b894a0b..18d363fd7f 100644 --- a/packages/sirius-web/frontend/sirius-web-application/src/views/project-settings/ProjectSettingsView.tsx +++ b/packages/sirius-web/frontend/sirius-web-application/src/views/project-settings/ProjectSettingsView.tsx @@ -10,12 +10,20 @@ * Contributors: * Obeo - initial API and implementation *******************************************************************************/ +import { useData } from '@eclipse-sirius/sirius-components-core'; +import AppBar from '@material-ui/core/AppBar'; import Container from '@material-ui/core/Container'; -import Grid from '@material-ui/core/Grid'; +import Tab from '@material-ui/core/Tab'; +import Tabs from '@material-ui/core/Tabs'; +import Typography from '@material-ui/core/Typography'; import { makeStyles } from '@material-ui/core/styles'; +import { useState } from 'react'; +import { Link, useParams } from 'react-router-dom'; import { Footer } from '../../footer/Footer'; + import { NavigationBar } from '../../navigationBar/NavigationBar'; -import { ProjectImagesSettings } from './images/ProjectImagesSettings'; +import { ProjectSettingsParams } from './ProjectSettingsView.types'; +import { projectSettingsTabExtensionPoint } from './ProjectSettingsViewExtensionPoints'; const useProjectSettingsViewStyles = makeStyles((theme) => ({ projectSettingsView: { @@ -28,21 +36,55 @@ const useProjectSettingsViewStyles = makeStyles((theme) => ({ paddingTop: theme.spacing(3), paddingBottom: theme.spacing(3), }, + header: { + display: 'grid', + gridTemplateColumns: '1fr max-content', + alignItems: 'center', + padding: theme.spacing(3), + }, + tabs: { + display: 'grid', + gridTemplateRows: 'min-content 1fr', + }, + tabPanels: { + padding: theme.spacing(3), + }, })); export const ProjectSettingsView = () => { const classes = useProjectSettingsViewStyles(); + const { data: projectSettingsTabContributions } = useData(projectSettingsTabExtensionPoint); + const { projectId } = useParams(); + const [value, setValue] = useState(0); + const handleChange = (_, newValue) => { + setValue(newValue); + }; return (
- - - - - +
+ Project Settings + Back to project +
+
+ + + {projectSettingsTabContributions.map(({ title }, index) => ( + + ))} + + +
+ {projectSettingsTabContributions.map(({ component: ProjectSettingsTabComponent }, index) => ( + + ))} +
+