[1891] Fix the 'Show all templates' modal in the empty state

Bug: eclipse-sirius#1891 Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>
mcharfadi · Apr 17, 2023 · 5c54b7f · 5c54b7f
1 parent 7af9dea
commit 5c54b7f
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 5 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -69,6 +69,7 @@ The result returned and captured in this variable name will not be the real node
 - https://github.com/eclipse-sirius/sirius-components/issues/1785[#1785] [form] Fix name collision on labelFields GraphQL fragment
 - https://github.com/eclipse-sirius/sirius-components/issues/1908[#1908] [workbench] Fix an issue where the Explorer and Details Views titles could be overflowed
 - https://github.com/eclipse-sirius/sirius-components/issues/1929[#1929] [view] Fix an issue where direct edit on View based diagram elements could lead to infinite loop
+- https://github.com/eclipse-sirius/sirius-components/issues/1891[#1891] [projects] The 'Show all templates' dialog was not functional from an empty state (with no existing project)
 
 === New Features
 

diff --git a/packages/sirius-web/frontend/sirius-web/src/views/projects/ProjectsView.tsx b/packages/sirius-web/frontend/sirius-web/src/views/projects/ProjectsView.tsx
@@ -27,7 +27,6 @@ import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
 import Paper from '@material-ui/core/Paper';
 import Snackbar from '@material-ui/core/Snackbar';
-import { makeStyles } from '@material-ui/core/styles';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
@@ -36,14 +35,15 @@ import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
 import Tooltip from '@material-ui/core/Tooltip';
 import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
 import CloseIcon from '@material-ui/icons/Close';
 import DeleteIcon from '@material-ui/icons/Delete';
 import EditIcon from '@material-ui/icons/Edit';
 import GetAppIcon from '@material-ui/icons/GetApp';
 import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
 import { useMachine } from '@xstate/react';
 import React, { useContext, useEffect } from 'react';
-import { Link as RouterLink, Redirect } from 'react-router-dom';
+import { Redirect, Link as RouterLink } from 'react-router-dom';
 import { v4 as uuid } from 'uuid';
 import { Footer } from '../../footer/Footer';
 import { ProjectTemplatesModal } from '../../modals/project-templates/ProjectTemplatesModal';
@@ -62,8 +62,8 @@ import {
   GQLGetProjectsQueryVariables,
   Project,
   ProjectContextMenuProps,
-  ProjectsTableProps,
   ProjectTemplate,
+  ProjectsTableProps,
 } from './ProjectsView.types';
 import {
   CloseMenuEvent,
@@ -75,9 +75,9 @@ import {
   OpenModalEvent,
   ProjectsViewContext,
   ProjectsViewEvent,
-  projectsViewMachine,
   SchemaValue,
   ShowToastEvent,
+  projectsViewMachine,
 } from './ProjectsViewMachine';
 
 const getProjectsQuery = gql`
@@ -334,7 +334,22 @@ export const ProjectsView = () => {
       </>
     );
   } else if (projectsView === 'empty') {
-    main = <Message content="No projects available, start by creating one" />;
+    let modal: JSX.Element | null = null;
+    if (modalToDisplay === 'ProjectTemplates') {
+      modal = (
+        <ProjectTemplatesModal
+          onClose={() => {
+            dispatch({ type: 'CLOSE_MODAL' } as CloseModalEvent);
+          }}
+        />
+      );
+    }
+    main = (
+      <>
+        <Message content="No projects available, start by creating one" />
+        {modal}
+      </>
+    );
   }
 
   const onCreateProject = (template: ProjectTemplate) => {

diff --git a/packages/sirius-web/frontend/sirius-web/src/views/projects/ProjectsViewMachine.ts b/packages/sirius-web/frontend/sirius-web/src/views/projects/ProjectsViewMachine.ts
@@ -170,6 +170,16 @@ export const projectsViewMachine = Machine<ProjectsViewContext, ProjectsViewStat
                   actions: 'invokeTemplate',
                 },
               ],
+              OPEN_MODAL: [
+                {
+                  actions: 'openModal',
+                },
+              ],
+              CLOSE_MODAL: [
+                {
+                  actions: 'closeModal',
+                },
+              ],
               REDIRECT: [{ actions: 'redirect' }],
             },
           },