[3587] Add CreateProjectCard extension point

Bug: eclipse-sirius#3587 Signed-off-by: William Piers <[email protected]>
wpiers · Jun 6, 2024 · 6be822c · 6be822c
1 parent bd6836b
commit 6be822c
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 30 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -41,6 +41,7 @@
 - https://github.com/eclipse-sirius/sirius-web/issues/3550[#3550] [core] Add ExtensionRegistry merge strategy
 - https://github.com/eclipse-sirius/sirius-web/issues/3557[#3550] [app] Add ProjectSettings tab extension point
 - https://github.com/eclipse-sirius/sirius-web/issues/3557[#3563] [app] Improve NavigationBar extensibility
+- https://github.com/eclipse-sirius/sirius-web/issues/3557[#3587] [app] Add CreateProjectCard extension point
 
 === Improvements
 

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,12 @@ import { OnboardArea } from '../onboarding/OnboardArea';
 import { RepresentationContextProvider } from '../representations/RepresentationContextProvider';
 import { Router } from '../router/Router';
 import { siriusWebTheme as defaultTheme } from '../theme/siriusWebTheme';
+import { createProjectAreaCardExtensionPoint } from '../views/project-browser/create-projects-area/CreateProjectAreaExtensionPoints';
+import {
+  NewProjectCard,
+  ShowAllTemplatesCard,
+  UploadProjectCard,
+} from '../views/project-browser/create-projects-area/ProjectTemplateCard';
 import {
   ProjectSettingTabContribution,
   projectSettingsTabExtensionPoint,
@@ -150,10 +156,25 @@ export const SiriusWebApplication = ({
     identifier: 'sw_onboard',
     Component: OnboardArea,
   });
+
+  internalExtensionRegistry.addComponent(createProjectAreaCardExtensionPoint, {
+    identifier: 'sw_createProjectAreaCard_new',
+    Component: NewProjectCard,
+  });
+  internalExtensionRegistry.addComponent(createProjectAreaCardExtensionPoint, {
+    identifier: 'sw_createProjectAreaCard_upload',
+    Component: UploadProjectCard,
+  });
+  internalExtensionRegistry.addComponent(createProjectAreaCardExtensionPoint, {
+    identifier: 'sw_createProjectAreaCard_templates',
+    Component: ShowAllTemplatesCard,
+  });
+
   internalExtensionRegistry.putData(workbenchViewContributionExtensionPoint, {
     identifier: 'sw_workbenchView',
     data: workbenchViewContributions,
   });
+
   internalExtensionRegistry.putData(projectSettingsTabExtensionPoint, {
     identifier: 'sw_projectSettingsTab',
     data: projectSettingsTabContributions,

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';
@@ -53,6 +54,7 @@ export const CreateProjectArea = ({}: CreateProjectAreaProps) => {
 
   const { data } = useProjectTemplates(state.page, state.limit);
   const projectTemplates: GQLProjectTemplate[] = data?.viewer.projectTemplates.edges.map((edge) => edge.node) ?? [];
+  const createProjectAreaCards = useComponents(createProjectAreaCardExtensionPoint);
 
   const { createProjectFromTemplate, loading, projectCreatedFromTemplate } = useCreateProjectFromTemplate();
 
@@ -63,9 +65,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 +88,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,6 +15,8 @@ import { GQLProjectTemplate } from './useProjectTemplates.types';
 
 export interface CreateProjectAreaProps {}
 
+export interface CreateProjectAreaCardProps {}
+
 export interface CreateProjectAreaState {
   page: number;
   limit: number;

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/...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
@@ -23,9 +23,11 @@ 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 { useContext, useState } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
-import { ProjectTemplateCardProps, ShowAllTemplatesCardProps } from './ProjectTemplateCard.types';
+import { CreateProjectAreaState } from './CreateProjectArea.types';
+import { ProjectTemplateCardProps } from './ProjectTemplateCard.types';
+import { ProjectTemplatesModal } from './ProjectTemplatesModal';
 
 const useProjectTemplateStyles = makeStyles((theme) => ({
   projectTemplateCard: {
@@ -159,22 +161,34 @@ export const UploadProjectCard = () => {
   );
 };
 
-export const ShowAllTemplatesCard = ({ onClick }: ShowAllTemplatesCardProps) => {
+export const ShowAllTemplatesCard = () => {
   const classes = useProjectCardStyles();
+  const [state, setState] = useState<CreateProjectAreaState>({
+    page: 0,
+    limit: 3,
+    runningTemplate: null,
+    modalDisplayed: null,
+  });
+  const showAllTemplatesModal = () => setState((prevState) => ({ ...prevState, modalDisplayed: 'SHOW_ALL_TEMPLATES' }));
+  const closeModal = () => setState((prevState) => ({ ...prevState, modalDisplayed: null }));
   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="h5" className={classes.projectCardLabel}>
-              Show all templates
-            </Typography>
-          </Tooltip>
-        </CardActions>
-      </Card>
-    </Button>
+    <>
+      <Button onClick={showAllTemplatesModal} 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="h5" className={classes.projectCardLabel}>
+                Show all templates
+              </Typography>
+            </Tooltip>
+          </CardActions>
+        </Card>
+      </Button>
+
+      {state.modalDisplayed === 'SHOW_ALL_TEMPLATES' ? <ProjectTemplatesModal onClose={closeModal} /> : null}
+    </>
   );
 };
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;
-}