diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc index a24caf6d2c..9e5b99b980 100644 --- 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 index 06f623dba0..4b400bc9a9 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,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 index 2327a04be7..09010f4e2f 100644 --- 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/packages/sirius-web/frontend/sirius-web-application/src/views/project-browser/create-projects-area/CreateProjectArea.tsx b/packages/sirius-web/frontend/sirius-web-application/src/views/project-browser/create-projects-area/CreateProjectArea.tsx index 434231c7c0..d692ceae35 100644 --- a/packages/sirius-web/frontend/sirius-web-application/src/views/project-browser/create-projects-area/CreateProjectArea.tsx +++ b/packages/sirius-web/frontend/sirius-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} /> ))} - - - + {createProjectAreaCards.map(({ Component: Card }, index) => ( + + ))} - {state.modalDisplayed === 'SHOW_ALL_TEMPLATES' ? : null} ); }; diff --git a/packages/sirius-web/frontend/sirius-web-application/src/views/project-browser/create-projects-area/CreateProjectArea.types.ts b/packages/sirius-web/frontend/sirius-web-application/src/views/project-browser/create-projects-area/CreateProjectArea.types.ts index 1ec34e55fa..6d90bb5d85 100644 --- a/packages/sirius-web/frontend/sirius-web-application/src/views/project-browser/create-projects-area/CreateProjectArea.types.ts +++ b/packages/sirius-web/frontend/sirius-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/packages/sirius-web/frontend/sirius-web-application/src/views/project-browser/create-projects-area/CreateProjectAreaExtensionPoints.ts b/packages/sirius-web/frontend/sirius-web-application/src/views/project-browser/create-projects-area/CreateProjectAreaExtensionPoints.ts new file mode 100644 index 0000000000..861ec03706 --- /dev/null +++ b/packages/sirius-web/frontend/sirius-web-application/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 = { + identifier: 'createProjectArea#card', + FallbackComponent: () => null, +}; diff --git a/packages/sirius-web/frontend/sirius-web-application/src/views/project-browser/create-projects-area/ProjectTemplateCard.tsx b/packages/sirius-web/frontend/sirius-web-application/src/views/project-browser/create-projects-area/ProjectTemplateCard.tsx index aa07f9bf34..468fcad9c0 100644 --- a/packages/sirius-web/frontend/sirius-web-application/src/views/project-browser/create-projects-area/ProjectTemplateCard.tsx +++ b/packages/sirius-web/frontend/sirius-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({ + 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 ( - + <> + + + {state.modalDisplayed === 'SHOW_ALL_TEMPLATES' ? : null} + ); }; diff --git a/packages/sirius-web/frontend/sirius-web-application/src/views/project-browser/create-projects-area/ProjectTemplateCard.types.ts b/packages/sirius-web/frontend/sirius-web-application/src/views/project-browser/create-projects-area/ProjectTemplateCard.types.ts index aaf0b5b83f..f516e32599 100644 --- a/packages/sirius-web/frontend/sirius-web-application/src/views/project-browser/create-projects-area/ProjectTemplateCard.types.ts +++ b/packages/sirius-web/frontend/sirius-web-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; -}