#1 Customize the front end

Bug: #1 Signed-off-by: Laurent Fasani <[email protected]>
ObeoNetwork · Nov 26, 2024 · 85729ed · 85729ed
1 parent 1e6100b
commit 85729ed
Show file tree

Hide file tree

Showing 9 changed files with 127 additions and 5 deletions.
diff --git a/frontend/deeplab-web/index.html b/frontend/deeplab-web/index.html
@@ -21,7 +21,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Sirius Web</title>
+    <title>Pepper</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/frontend/deeplab-web/public/favicon.ico b/frontend/deeplab-web/public/favicon.ico
diff --git a/frontend/deeplab-web/public/manifest.json b/frontend/deeplab-web/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "Sirius Web",
-  "name": "Sirius Web Frontend",
+  "short_name": "Pepper",
+  "name": "Pepper Frontend",
   "icons": [
     {
       "src": "favicon.ico",

diff --git a/frontend/deeplab-web/src/core/Help.tsx b/frontend/deeplab-web/src/core/Help.tsx
@@ -0,0 +1,41 @@
+/*******************************************************************************
+ * Copyright (c) 2024 CEA LIST.
+ * 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 IconButton from '@mui/material/IconButton';
+import Link from '@mui/material/Link';
+import { emphasize } from '@mui/material/styles';
+import { makeStyles } from 'tss-react/mui';
+import HelpIcon from '@mui/icons-material/Help';
+
+const useHelpStyle = makeStyles()((theme) => ({
+  onDarkBackground: {
+    '&:hover': {
+      backgroundColor: emphasize(theme.palette.secondary.main, 0.08),
+    },
+  },
+}));
+
+export const Help = () => {
+  const { classes } = useHelpStyle();
+  return (
+    <Link
+      href="https://github.com/ObeoNetwork/pepper"
+      rel="noopener noreferrer"
+      target="_blank"
+      color="inherit"
+      data-testid="help-link">
+      <IconButton className={classes.onDarkBackground} color="inherit">
+        <HelpIcon />
+      </IconButton>
+    </Link>
+  );
+};
diff --git a/frontend/deeplab-web/src/core/PepperIcon.tsx b/frontend/deeplab-web/src/core/PepperIcon.tsx
@@ -0,0 +1,17 @@
+/*******************************************************************************
+ * Copyright (c) 2024 CEA LIST.
+ * 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 pepperImage from '../icons/pepper-icon.png';
+
+export const PepperIcon = () => {
+  return <img src={pepperImage} alt="Back to the homepage" height="25px" width="25px" />;
+};
diff --git a/frontend/deeplab-web/src/footer/Footer.tsx b/frontend/deeplab-web/src/footer/Footer.tsx
@@ -0,0 +1,39 @@
+/*******************************************************************************
+ * Copyright (c) 2024 CEA LIST.
+ * 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 Link from '@mui/material/Link';
+import { makeStyles } from 'tss-react/mui';
+import Typography from '@mui/material/Typography';
+
+const useFooterStyles = makeStyles()((theme) => ({
+  footer: {
+    display: 'flex',
+    justifyContent: 'center',
+    margin: theme.spacing(2),
+    '& > *': {
+      marginLeft: theme.spacing(0.5),
+      marginRight: theme.spacing(0.5),
+    },
+  },
+}));
+
+export const Footer = () => {
+  const { classes } = useFooterStyles();
+  return (
+    <footer className={classes.footer}>
+      <Typography variant="caption">&copy; {new Date().getFullYear()} CEA LIST. Powered by&nbsp;</Typography>
+      <Link variant="caption" href="https://github.com/ObeoNetwork/pepper" rel="noopener noreferrer" target="_blank">
+        ObeoNetwork/Pepper
+      </Link>
+    </footer>
+  );
+};
diff --git a/frontend/deeplab-web/src/icons/pepper-icon.png b/frontend/deeplab-web/src/icons/pepper-icon.png
diff --git a/frontend/deeplab-web/src/icons/pepper-icon.svg b/frontend/deeplab-web/src/icons/pepper-icon.svg
diff --git a/frontend/deeplab-web/src/index.tsx b/frontend/deeplab-web/src/index.tsx
@@ -17,6 +17,9 @@ import {
   DiagramRepresentationConfiguration,
   NodeTypeRegistry,
   SiriusWebApplication,
+  navigationBarIconExtensionPoint,
+  footerExtensionPoint,
+  navigationBarMenuIconExtensionPoint,
 } from '@eclipse-sirius/sirius-web-application';
 import { createRoot } from 'react-dom/client';
 import { httpOrigin, wsOrigin } from './core/URL';
@@ -29,24 +32,45 @@ import './fonts.css';
 import './portals.css';
 import './reset.css';
 import './variables.css';
+import { Footer } from './footer/Footer';
+import { Help } from './core/Help';
+import { PepperIcon } from './core/PepperIcon';
 
 if (process.env.NODE_ENV !== 'production') {
   loadDevMessages();
   loadErrorMessages();
 }
 
-const registry = new ExtensionRegistry();
+const extensionRegistry: ExtensionRegistry = new ExtensionRegistry();
 
 const nodeTypeRegistry: NodeTypeRegistry = {
   nodeLayoutHandlers: [new EllipseNodeLayoutHandler()],
   nodeConverters: [new EllipseNodeConverter()],
   nodeTypeContributions: [<NodeTypeContribution component={EllipseNode} type={'ellipseNode'} />],
 };
 
+// Help component contribution
+extensionRegistry.addComponent(navigationBarMenuIconExtensionPoint, {
+  identifier: 'pepper-help',
+  Component: () => <Help />,
+});
+
+// Footer contribution
+extensionRegistry.addComponent(footerExtensionPoint, {
+  identifier: 'pepper-footer',
+  Component: Footer,
+});
+
+// Main icon contribution
+extensionRegistry.addComponent(navigationBarIconExtensionPoint, {
+  identifier: 'pepper_navigationbar#icon',
+  Component: PepperIcon,
+});
+
 const container = document.getElementById('root');
 const root = createRoot(container!);
 root.render(
-  <SiriusWebApplication httpOrigin={httpOrigin} wsOrigin={wsOrigin} extensionRegistry={registry}>
+  <SiriusWebApplication httpOrigin={httpOrigin} wsOrigin={wsOrigin} extensionRegistry={extensionRegistry}>
     <DiagramRepresentationConfiguration nodeTypeRegistry={nodeTypeRegistry} />
   </SiriusWebApplication>
 );