[3587] Add an extension point to add new project cards

Bug: eclipse-sirius#3587 Signed-off-by: William Piers <[email protected]>
wpiers · Jun 16, 2024 · 50351c4 · 50351c4
1 parent 03bdba2
commit 50351c4
Show file tree

Hide file tree

Showing 13 changed files with 317 additions and 122 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -67,6 +67,8 @@ More existing APIs will be migrated to this new common pattern.
 - https://github.com/eclipse-sirius/sirius-web/issues/3563[#3563] [sirius-web] Improve NavigationBar extensibility to allow the contribution of components on the left and right of the navigation bar.
 - https://github.com/eclipse-sirius/sirius-web/issues/3344[#3344] [core] Add support for reloading representations from the database
 - https://github.com/eclipse-sirius/sirius-web/issues/3553[#3553] [core] Add RepresentationFactory extension point
+- https://github.com/eclipse-sirius/sirius-web/issues/3587[#3587] [sirius-web] Add an extension point to contribute new project cards
+
 
 === Improvements
 

diff --git a/...ges/sirius-web/frontend/sirius-web-application/src/extension/DefaultExtensionRegistry.tsx b/...ges/sirius-web/frontend/sirius-web-application/src/extension/DefaultExtensionRegistry.tsx
@@ -38,6 +38,10 @@ import LinkIcon from '@material-ui/icons/Link';
 import MenuIcon from '@material-ui/icons/Menu';
 import WarningIcon from '@material-ui/icons/Warning';
 import { OnboardArea } from '../onboarding/OnboardArea';
+import { createProjectAreaCardExtensionPoint } from '../views/project-browser/create-projects-area/CreateProjectAreaExtensionPoints';
+import { NewProjectCard } from '../views/project-browser/create-projects-area/NewProjectCard';
+import { ShowAllProjectTemplatesCard } from '../views/project-browser/create-projects-area/ShowAllProjectTemplatesCard';
+import { UploadProjectCard } from '../views/project-browser/create-projects-area/UploadProjectCard';
 
 const getType = (representation: RepresentationMetadata): string | null => {
   const query = representation.kind.substring(representation.kind.indexOf('?') + 1, representation.kind.length);
@@ -127,4 +131,25 @@ defaultExtensionRegistry.putData(representationFactoryExtensionPoint, {
   data: representationFactories,
 });
 
+/*******************************************************************************
+ *
+ * Project area cards
+ *
+ * Used to register all the type of cards in the project area
+ *
+ *******************************************************************************/
+
+defaultExtensionRegistry.addComponent(createProjectAreaCardExtensionPoint, {
+  identifier: `siriusweb_${createProjectAreaCardExtensionPoint}_newProjectCard`,
+  Component: NewProjectCard,
+});
+defaultExtensionRegistry.addComponent(createProjectAreaCardExtensionPoint, {
+  identifier: `siriusweb_${createProjectAreaCardExtensionPoint}_uploadProjectCard`,
+  Component: UploadProjectCard,
+});
+defaultExtensionRegistry.addComponent(createProjectAreaCardExtensionPoint, {
+  identifier: `siriusweb_${createProjectAreaCardExtensionPoint}_showAllProjectTemplatesCard`,
+  Component: ShowAllProjectTemplatesCard,
+});
+
 export { defaultExtensionRegistry };
diff --git a/packages/sirius-web/frontend/sirius-web-application/src/index.ts b/packages/sirius-web/frontend/sirius-web-application/src/index.ts
@@ -40,6 +40,8 @@ export {
   navigationBarRightContributionExtensionPoint,
 } from './navigationBar/NavigationBarExtensionPoints';
 export { routerExtensionPoint } from './router/RouterExtensionPoints';
+export { type CreateProjectAreaCardProps } from './views/project-browser/create-projects-area/CreateProjectArea.types';
+export { createProjectAreaCardExtensionPoint } from './views/project-browser/create-projects-area/CreateProjectAreaExtensionPoints';
 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';
diff --git a/...rius-web-application/src/views/project-browser/create-projects-area/CreateProjectArea.tsx b/...rius-web-application/src/views/project-browser/create-projects-area/CreateProjectArea.tsx
@@ -11,13 +11,14 @@
  *     Obeo - initial API and implementation
  *******************************************************************************/
 
+import { useComponents } from '@eclipse-sirius/sirius-components-core';
 import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
 import { useState } from 'react';
 import { Redirect } from 'react-router-dom';
 import { CreateProjectAreaProps, CreateProjectAreaState } from './CreateProjectArea.types';
-import { NewProjectCard, ProjectTemplateCard, ShowAllTemplatesCard, UploadProjectCard } from './ProjectTemplateCard';
-import { ProjectTemplatesModal } from './ProjectTemplatesModal';
+import { createProjectAreaCardExtensionPoint } from './CreateProjectAreaExtensionPoints';
+import { ProjectTemplateCard } from './ProjectTemplateCard';
 import { redirectUrlFromTemplate } from './redirectUrlFromTemplate';
 import { useCreateProjectFromTemplate } from './useCreateProjectFromTemplate';
 import { useProjectTemplates } from './useProjectTemplates';
@@ -44,11 +45,14 @@ const useCreateProjectAreaStyles = makeStyles((theme) => ({
 
 export const CreateProjectArea = ({}: CreateProjectAreaProps) => {
   const classes = useCreateProjectAreaStyles();
+
+  const createProjectAreaCards = useComponents(createProjectAreaCardExtensionPoint);
+
+  const limit = Math.max(0, 6 - createProjectAreaCards.length);
   const [state, setState] = useState<CreateProjectAreaState>({
     page: 0,
-    limit: 3,
+    limit,
     runningTemplate: null,
-    modalDisplayed: null,
   });
 
   const { data } = useProjectTemplates(state.page, state.limit);
@@ -63,9 +67,6 @@ export const CreateProjectArea = ({}: CreateProjectAreaProps) => {
     }
   };
 
-  const showAllTemplatesModal = () => setState((prevState) => ({ ...prevState, modalDisplayed: 'SHOW_ALL_TEMPLATES' }));
-  const closeModal = () => setState((prevState) => ({ ...prevState, modalDisplayed: null }));
-
   const redirectUrl: string | null = projectCreatedFromTemplate
     ? redirectUrlFromTemplate(projectCreatedFromTemplate)
     : null;
@@ -89,12 +90,11 @@ export const CreateProjectArea = ({}: CreateProjectAreaProps) => {
               key={template.id}
             />
           ))}
-          <NewProjectCard />
-          <UploadProjectCard />
-          <ShowAllTemplatesCard onClick={showAllTemplatesModal} />
+          {createProjectAreaCards.map(({ Component: Card }, index) => (
+            <Card key={index} />
+          ))}
         </div>
       </div>
-      {state.modalDisplayed === 'SHOW_ALL_TEMPLATES' ? <ProjectTemplatesModal onClose={closeModal} /> : null}
     </>
   );
 };
diff --git a/...web-application/src/views/project-browser/create-projects-area/CreateProjectArea.types.ts b/...web-application/src/views/project-browser/create-projects-area/CreateProjectArea.types.ts
@@ -15,9 +15,10 @@ import { GQLProjectTemplate } from './useProjectTemplates.types';
 
 export interface CreateProjectAreaProps {}
 
+export interface CreateProjectAreaCardProps {}
+
 export interface CreateProjectAreaState {
   page: number;
   limit: number;
   runningTemplate: GQLProjectTemplate | null;
-  modalDisplayed: 'SHOW_ALL_TEMPLATES' | null;
 }
diff --git a/...cation/src/views/project-browser/create-projects-area/CreateProjectAreaExtensionPoints.ts b/...cation/src/views/project-browser/create-projects-area/CreateProjectAreaExtensionPoints.ts
@@ -0,0 +1,19 @@
+/*******************************************************************************
+ * 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
+ *******************************************************************************/
+import { ComponentExtensionPoint } from '@eclipse-sirius/sirius-components-core';
+import { CreateProjectAreaCardProps } from './CreateProjectArea.types';
+
+export const createProjectAreaCardExtensionPoint: ComponentExtensionPoint<CreateProjectAreaCardProps> = {
+  identifier: 'createProjectArea#card',
+  FallbackComponent: () => null,
+};
diff --git a/.../sirius-web-application/src/views/project-browser/create-projects-area/NewProjectCard.tsx b/.../sirius-web-application/src/views/project-browser/create-projects-area/NewProjectCard.tsx
@@ -0,0 +1,70 @@
+/*******************************************************************************
+ * 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
+ *******************************************************************************/
+
+import Button from '@material-ui/core/Button';
+import Card from '@material-ui/core/Card';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
+import Tooltip from '@material-ui/core/Tooltip';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+import AddIcon from '@material-ui/icons/Add';
+import { Link as RouterLink } from 'react-router-dom';
+
+const useNewProjectCardStyles = makeStyles((theme) => ({
+  projectCard: {
+    width: theme.spacing(30),
+    height: theme.spacing(18),
+    display: 'grid',
+    gridTemplateRows: '1fr min-content',
+  },
+  projectCardActions: {
+    minWidth: 0,
+  },
+  projectCardLabel: {
+    textTransform: 'none',
+    fontWeight: 400,
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+  },
+  projectCardIcon: {
+    fontSize: theme.spacing(8),
+  },
+  blankProjectCard: {
+    backgroundColor: theme.palette.primary.main,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+}));
+
+export const NewProjectCard = () => {
+  const classes = useNewProjectCardStyles();
+  return (
+    <Button to={`/new/project`} component={RouterLink} data-testid="create">
+      <Card className={classes.projectCard}>
+        <CardContent className={classes.blankProjectCard}>
+          <AddIcon className={classes.projectCardIcon} htmlColor="white" />
+        </CardContent>
+        <CardActions className={classes.projectCardActions}>
+          <Tooltip title={'Blank project'}>
+            <Typography variant="body1" className={classes.projectCardLabel}>
+              + Blank project
+            </Typography>
+          </Tooltip>
+        </CardActions>
+      </Card>
+    </Button>
+  );
+};
diff --git a/...us-web-application/src/views/project-browser/create-projects-area/ProjectTemplateCard.tsx b/...us-web-application/src/views/project-browser/create-projects-area/ProjectTemplateCard.tsx
@@ -20,12 +20,8 @@ import CircularProgress from '@material-ui/core/CircularProgress';
 import Tooltip from '@material-ui/core/Tooltip';
 import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
-import AddIcon from '@material-ui/icons/Add';
-import CloudUploadOutlinedIcon from '@material-ui/icons/CloudUploadOutlined';
-import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
 import { useContext } from 'react';
-import { Link as RouterLink } from 'react-router-dom';
-import { ProjectTemplateCardProps, ShowAllTemplatesCardProps } from './ProjectTemplateCard.types';
+import { ProjectTemplateCardProps } from './ProjectTemplateCard.types';
 
 const useProjectTemplateStyles = makeStyles((theme) => ({
   projectTemplateCard: {
@@ -76,103 +72,3 @@ export const ProjectTemplateCard = ({ template, running, disabled, onCreateProje
     </Button>
   );
 };
-
-const useProjectCardStyles = makeStyles((theme) => ({
-  projectCard: {
-    width: theme.spacing(30),
-    height: theme.spacing(18),
-    display: 'grid',
-    gridTemplateRows: '1fr min-content',
-  },
-  projectCardActions: {
-    minWidth: 0,
-  },
-  projectCardLabel: {
-    textTransform: 'none',
-    fontWeight: 400,
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-  },
-  projectCardIcon: {
-    fontSize: theme.spacing(8),
-  },
-  blankProjectCard: {
-    backgroundColor: theme.palette.primary.main,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  uploadProjectCard: {
-    backgroundColor: theme.palette.divider,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  showAllTemplatesCardContent: {
-    backgroundColor: theme.palette.divider,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-}));
-
-export const NewProjectCard = () => {
-  const classes = useProjectCardStyles();
-  return (
-    <Button to={`/new/project`} component={RouterLink} data-testid="create">
-      <Card className={classes.projectCard}>
-        <CardContent className={classes.blankProjectCard}>
-          <AddIcon className={classes.projectCardIcon} htmlColor="white" />
-        </CardContent>
-        <CardActions className={classes.projectCardActions}>
-          <Tooltip title={'Blank project'}>
-            <Typography variant="body1" className={classes.projectCardLabel}>
-              + Blank project
-            </Typography>
-          </Tooltip>
-        </CardActions>
-      </Card>
-    </Button>
-  );
-};
-
-export const UploadProjectCard = () => {
-  const classes = useProjectCardStyles();
-  return (
-    <Button to={`/upload/project`} component={RouterLink} data-testid="upload">
-      <Card className={classes.projectCard}>
-        <CardContent className={classes.uploadProjectCard}>
-          <CloudUploadOutlinedIcon className={classes.projectCardIcon} htmlColor="white" />
-        </CardContent>
-        <CardActions className={classes.projectCardActions}>
-          <Tooltip title={'Upload project'}>
-            <Typography variant="body1" className={classes.projectCardLabel}>
-              + Upload project
-            </Typography>
-          </Tooltip>
-        </CardActions>
-      </Card>
-    </Button>
-  );
-};
-
-export const ShowAllTemplatesCard = ({ onClick }: ShowAllTemplatesCardProps) => {
-  const classes = useProjectCardStyles();
-  return (
-    <Button onClick={onClick} data-testid="show-all-templates">
-      <Card className={classes.projectCard}>
-        <CardContent className={classes.showAllTemplatesCardContent}>
-          <MoreHorizIcon className={classes.projectCardIcon} htmlColor="white" />
-        </CardContent>
-        <CardActions className={classes.projectCardActions}>
-          <Tooltip title={'Show all templates'}>
-            <Typography variant="body1" className={classes.projectCardLabel}>
-              Show all templates
-            </Typography>
-          </Tooltip>
-        </CardActions>
-      </Card>
-    </Button>
-  );
-};
diff --git a/...b-application/src/views/project-browser/create-projects-area/ProjectTemplateCard.types.ts b/...b-application/src/views/project-browser/create-projects-area/ProjectTemplateCard.types.ts
@@ -19,7 +19,3 @@ export interface ProjectTemplateCardProps {
   disabled: boolean;
   onCreateProject: () => void;
 }
-
-export interface ShowAllTemplatesCardProps {
-  onClick: () => void;
-}
diff --git a/...-web-application/src/views/project-browser/create-projects-area/ProjectTemplatesModal.tsx b/...-web-application/src/views/project-browser/create-projects-area/ProjectTemplatesModal.tsx
@@ -20,8 +20,10 @@ import Pagination from '@material-ui/lab/Pagination';
 import gql from 'graphql-tag';
 import { useEffect, useState } from 'react';
 import { Redirect } from 'react-router-dom';
-import { NewProjectCard, ProjectTemplateCard, UploadProjectCard } from './ProjectTemplateCard';
+import { NewProjectCard } from './NewProjectCard';
+import { ProjectTemplateCard } from './ProjectTemplateCard';
 import { ProjectTemplatesModalProps, ProjectTemplatesModalState } from './ProjectTemplatesModal.types';
+import { UploadProjectCard } from './UploadProjectCard';
 import { redirectUrlFromTemplate } from './redirectUrlFromTemplate';
 import { useCreateProjectFromTemplate } from './useCreateProjectFromTemplate';
 import { useProjectTemplates } from './useProjectTemplates';