Add Project Settings tab extension

wpiers · Jun 4, 2024 · b7a8405 · b7a8405
1 parent 4d798fc
commit b7a8405
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 7 deletions.
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
@@ -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
@@ -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/...us-web/frontend/sirius-web-application/src/views/project-settings/ProjectSettingsView.tsx b/...us-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<ProjectSettingsParams>();
+  const [value, setValue] = useState(0);
+  const handleChange = (_, newValue) => {
+    setValue(newValue);
+  };
 
   return (
     <div className={classes.projectSettingsView}>
       <NavigationBar />
       <main className={classes.main}>
         <Container maxWidth="xl">
-          <Grid container justifyContent="center">
-            <Grid item xs={8}>
-              <ProjectImagesSettings />
-            </Grid>
-          </Grid>
+          <div className={classes.header}>
+            <Typography variant="h4">Project Settings</Typography>
+            <Link to={'/projects/' + projectId + '/edit'}>Back to project</Link>
+          </div>
+          <div className={classes.tabs}>
+            <AppBar position="static">
+              <Tabs value={value} onChange={handleChange}>
+                {projectSettingsTabContributions.map(({ title }, index) => (
+                  <Tab label={title} key={index} />
+                ))}
+              </Tabs>
+            </AppBar>
+            <div className={classes.tabPanels}>
+              {projectSettingsTabContributions.map(({ component: ProjectSettingsTabComponent }, index) => (
+                <div hidden={value !== index} key={index}>
+                  {value === index && <ProjectSettingsTabComponent />}
+                </div>
+              ))}
+            </div>
+          </div>
         </Container>
       </main>
       <Footer />

diff --git a/...b/frontend/sirius-web-application/src/views/project-settings/ProjectSettingsView.types.ts b/...b/frontend/sirius-web-application/src/views/project-settings/ProjectSettingsView.types.ts
@@ -0,0 +1,16 @@
+/*******************************************************************************
+ * Copyright (c) 2024 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+
+export interface ProjectSettingsParams {
+  projectId: string;
+}
diff --git a/.../sirius-web-application/src/views/project-settings/ProjectSettingsViewExtensionPoints.tsx b/.../sirius-web-application/src/views/project-settings/ProjectSettingsViewExtensionPoints.tsx
@@ -0,0 +1,24 @@
+/*******************************************************************************
+ * Copyright (c) 2021, 2024 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+
+import { DataExtensionPoint } from '@eclipse-sirius/sirius-components-core';
+
+export interface ProjectSettingTabContribution {
+  title: string;
+  component: () => JSX.Element | null;
+}
+
+export const projectSettingsTabExtensionPoint: DataExtensionPoint<Array<ProjectSettingTabContribution>> = {
+  identifier: 'projectSettings#tabContribution',
+  fallback: [],
+};