diff --git a/frontend/src/navbar/EditProjectNavbarContextMenu.tsx b/frontend/src/views/edit-project/EditProjectNavbar/EditProjectNavbarContextMenu.tsx
similarity index 100%
rename from frontend/src/navbar/EditProjectNavbarContextMenu.tsx
rename to frontend/src/views/edit-project/EditProjectNavbar/EditProjectNavbarContextMenu.tsx
diff --git a/frontend/src/navbar/EditProjectNavbar/machine.ts b/frontend/src/views/edit-project/EditProjectNavbar/machine.ts
similarity index 100%
rename from frontend/src/navbar/EditProjectNavbar/machine.ts
rename to frontend/src/views/edit-project/EditProjectNavbar/machine.ts
diff --git a/frontend/src/navbar/EditProjectNavbar/reducer.ts b/frontend/src/views/edit-project/EditProjectNavbar/reducer.ts
similarity index 100%
rename from frontend/src/navbar/EditProjectNavbar/reducer.ts
rename to frontend/src/views/edit-project/EditProjectNavbar/reducer.ts
diff --git a/frontend/src/views/edit-project/EditProjectView.tsx b/frontend/src/views/edit-project/EditProjectView.tsx
index 13bc6ae0c2a..97ed5fd0576 100644
--- a/frontend/src/views/edit-project/EditProjectView.tsx
+++ b/frontend/src/views/edit-project/EditProjectView.tsx
@@ -1,5 +1,5 @@
/*******************************************************************************
- * Copyright (c) 2019, 2020 Obeo.
+ * Copyright (c) 2019, 2021 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
@@ -10,31 +10,44 @@
* Contributors:
* Obeo - initial API and implementation
*******************************************************************************/
-import { useLazyQuery, useSubscription } from '@apollo/client';
+import { useQuery } from '@apollo/client';
+import Grid from '@material-ui/core/Grid';
+import IconButton from '@material-ui/core/IconButton';
+import Snackbar from '@material-ui/core/Snackbar';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import CloseIcon from '@material-ui/icons/Close';
+import { useMachine } from '@xstate/react';
import gql from 'graphql-tag';
-import { useProject } from 'project/ProjectProvider';
-import React, { useCallback, useEffect, useReducer } from 'react';
+import React, { useEffect } from 'react';
import { generatePath, useHistory, useParams, useRouteMatch } from 'react-router-dom';
-import { EditProjectLoadedView } from 'views/edit-project/EditProjectLoadedView';
+import { EditProjectNavbar } from 'views/edit-project/EditProjectNavbar/EditProjectNavbar';
+import { GQLGetProjectQueryData, GQLGetProjectQueryVariables } from 'views/edit-project/EditProjectView.types';
import {
- HANDLE_FETCHED_PROJECT__ACTION,
- HANDLE_REPRESENTATION_LOADED__ACTION,
- HANDLE_REPRESENTATION_RENAMED__ACTION,
- HANDLE_SELECTION__ACTION,
- HANDLE_SUBSCRIBERS_UPDATED__ACTION,
- LOADING__STATE,
- PROJECT_AND_REPRESENTATION_LOADING__STATE,
- PROJECT_FETCHING_ERROR__STATE,
- PROJECT_NOT_FOUND__STATE,
-} from 'views/edit-project/machine';
-import { initialLoadingState, initialState, reducer } from 'views/edit-project/reducer';
-import { ErrorView } from 'views/ErrorView';
+ EditProjectViewContext,
+ EditProjectViewEvent,
+ editProjectViewMachine,
+ HandleFetchedProjectEvent,
+ HideToastEvent,
+ SchemaValue,
+ SelectRepresentationEvent,
+ ShowToastEvent,
+} from 'views/edit-project/EditProjectViewMachine';
+import { Workbench } from 'workbench/Workbench';
+import { Representation } from 'workbench/Workbench.types';
-const getRepresentationQuery = gql`
- query getRepresentation($projectId: ID!, $representationId: ID!) {
+const getProjectQuery = gql`
+ query getRepresentation($projectId: ID!, $representationId: ID!, $includeRepresentation: Boolean!) {
viewer {
project(projectId: $projectId) {
- representation(representationId: $representationId) {
+ id
+ name
+ visibility
+ accessLevel
+ currentEditingContext {
+ id
+ }
+ representation(representationId: $representationId) @include(if: $includeRepresentation) {
__typename
id
label
@@ -44,134 +57,115 @@ const getRepresentationQuery = gql`
}
`;
-const projectEventSubscription = gql`
- subscription projectEvent($input: ProjectEventInput!) {
- projectEvent(input: $input) {
- __typename
- ... on RepresentationRenamedEventPayload {
- representationId
- newLabel
- }
- }
- }
-`;
+const useEditProjectViewStyles = makeStyles((theme) => ({
+ editProjectView: {
+ display: 'flex',
+ flexDirection: 'column',
+ height: '100vh',
+ width: '100vw',
+ '& > *:nth-child(2)': {
+ flexGrow: 1,
+ },
+ },
+}));
export const EditProjectView = () => {
const history = useHistory();
const routeMatch = useRouteMatch();
const { projectId, representationId } = useParams();
- const [state, dispatch] = useReducer(reducer, representationId ? initialLoadingState : initialState);
- const { viewState, project, representations, displayedRepresentation, selection, subscribers, message } = state;
-
- const context = useProject() as any;
- let contextId;
- let canEdit = false;
- if (context) {
- contextId = context.id;
- canEdit = context.canEdit;
- }
-
- useEffect(() => {
- if (
- context &&
- context.id &&
- (viewState === LOADING__STATE || viewState === PROJECT_AND_REPRESENTATION_LOADING__STATE)
- ) {
- const action = {
- type: HANDLE_FETCHED_PROJECT__ACTION,
- response: {
- data: {
- viewer: {
- project: {
- id: context.id,
- name: context.name,
- visibility: context.visibility,
- accessLevel: context.accessLevel,
- },
- },
- },
- },
- };
- dispatch(action);
- }
- }, [context, viewState]);
+ const classes = useEditProjectViewStyles();
+ const [{ value, context }, dispatch] = useMachine
(
+ editProjectViewMachine
+ );
+ const { toast, editProjectView } = value as SchemaValue;
+ const { project, representation, message } = context;
- const [getRepresentation, { loading, data, error }] = useLazyQuery(getRepresentationQuery);
- useEffect(() => {
- if (representationId && project && !displayedRepresentation) {
- getRepresentation({ variables: { projectId: project.id, representationId } });
- }
- }, [project, representationId, displayedRepresentation, getRepresentation]);
+ const { loading, data, error } = useQuery(getProjectQuery, {
+ variables: {
+ projectId,
+ representationId: representationId ?? '',
+ includeRepresentation: !!representationId,
+ },
+ });
useEffect(() => {
- if (!loading && !error && data?.viewer?.project?.representation) {
- dispatch({ type: HANDLE_REPRESENTATION_LOADED__ACTION });
- const { id, label, __typename } = data.viewer.project.representation;
- const representation = { id, label, kind: __typename };
- const action = { type: HANDLE_SELECTION__ACTION, selection: representation };
- dispatch(action);
+ if (!loading) {
+ if (error) {
+ const showToastEvent: ShowToastEvent = {
+ type: 'SHOW_TOAST',
+ message: 'An unexpected error has occurred, please refresh the page',
+ };
+ dispatch(showToastEvent);
+ }
+ if (data) {
+ const fetchProjectEvent: HandleFetchedProjectEvent = { type: 'HANDLE_FETCHED_PROJECT', data };
+ dispatch(fetchProjectEvent);
+ }
}
- }, [loading, data, error]);
+ }, [loading, data, error, dispatch]);
useEffect(() => {
- if (displayedRepresentation && displayedRepresentation.id !== representationId) {
- const pathname = generatePath(routeMatch.path, { projectId, representationId: displayedRepresentation.id });
+ if (representation && representation.id !== representationId) {
+ const pathname = generatePath(routeMatch.path, { projectId, representationId: representation.id });
history.push({ pathname });
}
- }, [projectId, routeMatch, history, displayedRepresentation, representationId]);
-
- const setSelection = useCallback(
- (newSelectedObject) => {
- const action = { type: HANDLE_SELECTION__ACTION, selection: newSelectedObject };
- dispatch(action);
- },
- [dispatch]
- );
+ }, [projectId, routeMatch, history, representation, representationId]);
- useSubscription(projectEventSubscription, {
- variables: {
- input: {
- projectId,
- },
- },
- skip: !contextId,
- onSubscriptionData: ({ subscriptionData }) => {
- if (subscriptionData?.data?.projectEvent) {
- const { projectEvent } = subscriptionData.data;
- if (projectEvent.__typename === 'RepresentationRenamedEventPayload') {
- const action = { type: HANDLE_REPRESENTATION_RENAMED__ACTION, projectEvent };
- dispatch(action);
- }
+ let main = null;
+ if (editProjectView === 'loaded') {
+ const onRepresentationSelected = (representationSelected: Representation) => {
+ if (representationSelected.id !== representationId) {
+ const selectRepresentationEvent: SelectRepresentationEvent = {
+ type: 'SELECT_REPRESENTATION',
+ representation: representationSelected,
+ };
+ dispatch(selectRepresentationEvent);
}
- },
- });
-
- const setSubscribers = useCallback(
- (subscribers) => {
- const action = { type: HANDLE_SUBSCRIBERS_UPDATED__ACTION, subscribers };
- dispatch(action);
- },
- [dispatch]
- );
+ };
- if (!context) {
- return ;
- }
- if (viewState === LOADING__STATE || viewState === PROJECT_AND_REPRESENTATION_LOADING__STATE) {
- return ;
- }
- if (viewState === PROJECT_FETCHING_ERROR__STATE || viewState === PROJECT_NOT_FOUND__STATE) {
- return ;
+ main = (
+
+ );
+ } else if (editProjectView === 'missing') {
+ main = (
+
+
+ The project does not exist
+
+
+ );
}
+
return (
-
+ <>
+
+
+ {main}
+
+ dispatch({ type: 'HIDE_TOAST' } as HideToastEvent)}
+ message={message}
+ action={
+ dispatch({ type: 'HIDE_TOAST' } as HideToastEvent)}>
+
+
+ }
+ data-testid="error"
+ />
+
);
};
diff --git a/frontend/src/views/edit-project/EditProjectView.types.ts b/frontend/src/views/edit-project/EditProjectView.types.ts
index b084df7a40a..6a5340ebc92 100644
--- a/frontend/src/views/edit-project/EditProjectView.types.ts
+++ b/frontend/src/views/edit-project/EditProjectView.types.ts
@@ -10,12 +10,50 @@
* Contributors:
* Obeo - initial API and implementation
*******************************************************************************/
-export type Selection = {
+export type Visibility = 'PUBLIC' | 'PRIVATE';
+export type AccessLevel = 'READ' | 'WRITE' | 'ADMIN';
+
+export type EditingContext = {
+ id: string;
+};
+
+export type Project = {
+ id: string;
+ name: string;
+ visibility: Visibility;
+ accessLevel: AccessLevel;
+ currentEditingContext: EditingContext;
+};
+
+export type GQLRepresentation = {
+ __typename: string;
id: string;
label: string;
- kind: string;
};
-export type Subscriber = {
- username: string;
+export type GQLEditingContext = {
+ id: string;
+};
+
+export type GQLProject = {
+ id: string;
+ name: string;
+ visibility: Visibility;
+ accessLevel: AccessLevel;
+ currentEditingContext: GQLEditingContext;
+ representation: GQLRepresentation | undefined;
+};
+
+export type GQLViewer = {
+ project: GQLProject;
+};
+
+export type GQLGetProjectQueryData = {
+ viewer: GQLViewer;
+};
+
+export type GQLGetProjectQueryVariables = {
+ projectId: string;
+ representationId: string;
+ includeRepresentation: boolean;
};
diff --git a/frontend/src/views/edit-project/EditProjectViewMachine.ts b/frontend/src/views/edit-project/EditProjectViewMachine.ts
new file mode 100644
index 00000000000..55887a72504
--- /dev/null
+++ b/frontend/src/views/edit-project/EditProjectViewMachine.ts
@@ -0,0 +1,157 @@
+/*******************************************************************************
+ * Copyright (c) 2021 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 { GQLGetProjectQueryData, Project } from 'views/edit-project/EditProjectView.types';
+import { Representation } from 'workbench/Workbench.types';
+import { assign, Machine } from 'xstate';
+
+export interface EditProjectViewStateSchema {
+ states: {
+ toast: {
+ states: {
+ visible: {};
+ hidden: {};
+ };
+ };
+ editProjectView: {
+ states: {
+ loading: {};
+ loaded: {};
+ missing: {};
+ };
+ };
+ };
+}
+
+export type SchemaValue = {
+ toast: 'visible' | 'hidden';
+ editProjectView: 'loading' | 'loaded' | 'missing';
+};
+
+export interface EditProjectViewContext {
+ project: Project | null;
+ representation: Representation | null;
+ message: string | null;
+}
+
+export type ShowToastEvent = { type: 'SHOW_TOAST'; message: string };
+export type HideToastEvent = { type: 'HIDE_TOAST' };
+export type HandleFetchedProjectEvent = { type: 'HANDLE_FETCHED_PROJECT'; data: GQLGetProjectQueryData };
+export type SelectRepresentationEvent = { type: 'SELECT_REPRESENTATION'; representation: Representation };
+export type EditProjectViewEvent =
+ | HandleFetchedProjectEvent
+ | SelectRepresentationEvent
+ | ShowToastEvent
+ | HideToastEvent;
+
+export const editProjectViewMachine = Machine(
+ {
+ type: 'parallel',
+ context: {
+ project: null,
+ representation: null,
+ message: null,
+ },
+ states: {
+ toast: {
+ initial: 'hidden',
+ states: {
+ hidden: {
+ on: {
+ SHOW_TOAST: {
+ target: 'visible',
+ actions: 'setMessage',
+ },
+ },
+ },
+ visible: {
+ on: {
+ HIDE_TOAST: {
+ target: 'hidden',
+ actions: 'clearMessage',
+ },
+ },
+ },
+ },
+ },
+ editProjectView: {
+ initial: 'loading',
+ states: {
+ loading: {
+ on: {
+ HANDLE_FETCHED_PROJECT: [
+ {
+ cond: 'isMissing',
+ target: 'missing',
+ },
+ {
+ target: 'loaded',
+ actions: 'updateProject',
+ },
+ ],
+ },
+ },
+ loaded: {
+ type: 'final',
+ on: {
+ SELECT_REPRESENTATION: {
+ target: 'loaded',
+ actions: 'selectRepresentation',
+ },
+ },
+ },
+ missing: {
+ type: 'final',
+ },
+ },
+ },
+ },
+ },
+ {
+ guards: {
+ isMissing: (_, event) => {
+ const { data } = event as HandleFetchedProjectEvent;
+ return !data.viewer.project;
+ },
+ },
+ actions: {
+ updateProject: assign((_, event) => {
+ const { data } = event as HandleFetchedProjectEvent;
+ const { project: gQLProject } = data.viewer;
+ const { id, name, visibility, accessLevel, currentEditingContext } = gQLProject;
+ const project = { id, name, visibility, accessLevel, currentEditingContext: { id: currentEditingContext.id } };
+
+ let representation: Representation = null;
+ if (gQLProject.representation) {
+ representation = {
+ id: gQLProject.representation.id,
+ label: gQLProject.representation.label,
+ kind: gQLProject.representation.__typename,
+ };
+ }
+
+ return { project, representation };
+ }),
+ selectRepresentation: assign((_, event) => {
+ const { representation } = event as SelectRepresentationEvent;
+ return { representation };
+ }),
+ setMessage: assign((_, event) => {
+ const { message } = event as ShowToastEvent;
+ return { message };
+ }),
+ clearMessage: assign((_) => {
+ return { message: null };
+ }),
+ },
+ }
+);
diff --git a/frontend/src/views/edit-project/__tests__/reducer.test.ts b/frontend/src/views/edit-project/__tests__/reducer.test.ts
deleted file mode 100644
index 29d45675869..00000000000
--- a/frontend/src/views/edit-project/__tests__/reducer.test.ts
+++ /dev/null
@@ -1,368 +0,0 @@
-/*******************************************************************************
- * Copyright (c) 2019, 2020 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 {
- LOADING__STATE,
- PROJECT_NOT_FOUND__STATE,
- PROJECT_FETCHING_ERROR__STATE,
- PROJECT_LOADED__STATE,
- PROJECT_LOADED_AND_REPRESENTATION_DISPLAYED__STATE,
- HANDLE_FETCHED_PROJECT__ACTION,
- HANDLE_SELECTION__ACTION,
- HANDLE_REPRESENTATION_RENAMED__ACTION,
- HANDLE_SUBSCRIBERS_UPDATED__ACTION,
-} from '../machine';
-import { initialState, reducer } from '../reducer';
-
-const FIRST_OBJECT_ID = 'First Object';
-const FIRST_OBJECT = { id: FIRST_OBJECT_ID, label: 'First object', kind: 'Object' };
-const SECOND_OBJECT_ID = 'Second Object';
-const SECOND_OBJECT = { id: SECOND_OBJECT_ID, label: 'Second object', kind: 'Object' };
-const FIRST_DIAGRAM_ID = 'First Diagram';
-const FIRST_DIAGRAM = { id: FIRST_DIAGRAM_ID, label: 'First diagram', kind: 'Diagram' };
-const SECOND_DIAGRAM_ID = 'Second Diagram';
-const SECOND_DIAGRAM = { id: SECOND_DIAGRAM_ID, label: 'Second diagram', kind: 'Diagram' };
-
-const projectLoadedState = {
- viewState: PROJECT_LOADED__STATE,
- project: {
- id: '',
- name: '',
- },
- representations: [],
- displayedRepresentation: undefined,
- selection: undefined,
- subscribers: [],
- message: undefined,
-};
-
-const projectLoadedAndrepresentationDisplayedState = {
- viewState: PROJECT_LOADED_AND_REPRESENTATION_DISPLAYED__STATE,
- project: {
- id: '',
- name: '',
- },
- representations: [FIRST_DIAGRAM],
- displayedRepresentation: FIRST_DIAGRAM,
- selection: FIRST_DIAGRAM,
- subscribers: [],
- message: undefined,
-};
-
-const objectSelectedState = {
- viewState: PROJECT_LOADED__STATE,
- project: {
- id: '',
- name: '',
- },
- representations: [],
- displayedRepresentation: undefined,
- selection: FIRST_OBJECT,
- subscribers: [],
- message: undefined,
-};
-
-const representationAndObjectSelectedState = {
- viewState: PROJECT_LOADED_AND_REPRESENTATION_DISPLAYED__STATE,
- project: {
- id: '',
- name: '',
- },
- representations: [FIRST_DIAGRAM],
- displayedRepresentation: FIRST_DIAGRAM,
- selection: FIRST_OBJECT,
- subscribers: [],
- message: undefined,
-};
-describe('EditProjectView - reducer', () => {
- it('navigates to the empty project loaded state', () => {
- expect(initialState).toStrictEqual({
- viewState: LOADING__STATE,
- project: undefined,
- representations: [],
- selection: undefined,
- displayedRepresentation: undefined,
- subscribers: [],
- message: undefined,
- });
- });
-
- it('navigates to the project not found state after loading a non-existing project', () => {
- const response = {
- data: {
- viewer: {},
- },
- };
-
- const prevState = initialState;
- const action = { type: HANDLE_FETCHED_PROJECT__ACTION, response };
- const state = reducer(prevState, action);
-
- expect(state).toStrictEqual({
- viewState: PROJECT_NOT_FOUND__STATE,
- message: 'The project requested does not exist',
- });
- });
-
- it('navigates to the project fetching error state after an unexpected error during the loading', () => {
- const prevState = initialState;
- const response = {
- errors: [
- {
- message: 'Unexpected error',
- location: [
- {
- line: 11,
- column: 8,
- },
- ],
- extensions: {
- classification: 'DataFetchingError',
- },
- },
- ],
- };
-
- const action = { type: HANDLE_FETCHED_PROJECT__ACTION, response };
- const state = reducer(prevState, action);
-
- expect(state).toStrictEqual({
- viewState: PROJECT_FETCHING_ERROR__STATE,
- message: 'An error has occurred while fetching the project. Please contact your administrator.',
- });
- });
-
- it('navigates to the project loaded state after loading the project', () => {
- const prevState = initialState;
- const response = {
- data: {
- viewer: {
- project: {
- id: '',
- name: '',
- },
- },
- },
- };
-
- const action = { type: HANDLE_FETCHED_PROJECT__ACTION, response };
- const state = reducer(prevState, action);
-
- expect(state).toStrictEqual({
- viewState: PROJECT_LOADED__STATE,
- project: response.data.viewer.project,
- representations: [],
- displayedRepresentation: undefined,
- selection: undefined,
- subscribers: [],
- message: undefined,
- });
- });
-
- it('navigates to the object selected state after selecting an object', () => {
- const prevState = projectLoadedState;
- const action = { type: HANDLE_SELECTION__ACTION, selection: FIRST_OBJECT };
- const state = reducer(prevState, action);
-
- expect(state).toStrictEqual({
- viewState: PROJECT_LOADED__STATE,
- project: projectLoadedState.project,
- representations: [],
- displayedRepresentation: undefined,
- selection: action.selection,
- subscribers: [],
- message: undefined,
- });
- });
-
- it('navigates to the projet loaded state after renaming a representation', () => {
- const prevState = projectLoadedState;
- const action = {
- type: HANDLE_REPRESENTATION_RENAMED__ACTION,
- projectEvent: { representationId: FIRST_DIAGRAM_ID, newLabel: '' },
- };
- const state = reducer(prevState, action);
-
- expect(state).toStrictEqual({
- viewState: PROJECT_LOADED__STATE,
- project: projectLoadedState.project,
- representations: [],
- displayedRepresentation: undefined,
- selection: projectLoadedState.selection,
- subscribers: [],
- message: undefined,
- });
- });
-
- it('navigates to the representation displayed state after selecting an object', () => {
- const prevState = projectLoadedState;
- const action = {
- type: HANDLE_SELECTION__ACTION,
- selection: FIRST_DIAGRAM,
- };
- const state = reducer(prevState, action);
-
- expect(state).toStrictEqual({
- viewState: PROJECT_LOADED_AND_REPRESENTATION_DISPLAYED__STATE,
- project: projectLoadedState.project,
- representations: [action.selection],
- displayedRepresentation: action.selection,
- selection: action.selection,
- subscribers: [],
- message: undefined,
- });
- });
-
- it('stays to the project loaded state after renaming a representation', () => {
- const prevState = projectLoadedState;
- const action = {
- type: HANDLE_REPRESENTATION_RENAMED__ACTION,
- projectEvent: { representationId: FIRST_DIAGRAM_ID, newLabel: '' },
- };
- const state = reducer(prevState, action);
-
- expect(state).toStrictEqual({
- viewState: projectLoadedState.viewState,
- project: projectLoadedState.project,
- representations: projectLoadedState.representations,
- displayedRepresentation: projectLoadedState.displayedRepresentation,
- selection: projectLoadedState.selection,
- subscribers: [],
- message: undefined,
- });
- });
-
- it('stays to the project loaded and representation displayed state after renaming a representation', () => {
- const prevState = projectLoadedAndrepresentationDisplayedState;
- const action = {
- type: HANDLE_REPRESENTATION_RENAMED__ACTION,
- projectEvent: { representationId: FIRST_DIAGRAM_ID, newLabel: '' },
- };
- const state = reducer(prevState, action);
-
- expect(state).toStrictEqual({
- viewState: projectLoadedAndrepresentationDisplayedState.viewState,
- project: projectLoadedAndrepresentationDisplayedState.project,
- representations: projectLoadedAndrepresentationDisplayedState.representations,
- displayedRepresentation: projectLoadedAndrepresentationDisplayedState.displayedRepresentation,
- selection: projectLoadedAndrepresentationDisplayedState.selection,
- subscribers: [],
- message: undefined,
- });
- });
-
- it('navigates to the representation and object selected state after selecting a representation', () => {
- const prevState = objectSelectedState;
- const action = {
- type: HANDLE_SELECTION__ACTION,
- selection: SECOND_DIAGRAM,
- };
- const state = reducer(prevState, action);
-
- expect(state).toStrictEqual({
- viewState: PROJECT_LOADED_AND_REPRESENTATION_DISPLAYED__STATE,
- project: objectSelectedState.project,
- representations: [action.selection],
- displayedRepresentation: action.selection,
- selection: action.selection,
- subscribers: [],
- message: undefined,
- });
- });
-
- it('navigates to the representation and object selected state after selecting an object', () => {
- const prevState = projectLoadedAndrepresentationDisplayedState;
- const action = { type: HANDLE_SELECTION__ACTION, selection: SECOND_OBJECT };
- const state = reducer(prevState, action);
-
- expect(state).toStrictEqual({
- viewState: PROJECT_LOADED_AND_REPRESENTATION_DISPLAYED__STATE,
- project: projectLoadedAndrepresentationDisplayedState.project,
- representations: projectLoadedAndrepresentationDisplayedState.representations,
- displayedRepresentation: projectLoadedAndrepresentationDisplayedState.displayedRepresentation,
- selection: action.selection,
- subscribers: [],
- message: undefined,
- });
- });
-
- it('navigates back to the representation and object selected state after selecting another representation', () => {
- const prevState = representationAndObjectSelectedState;
- const action = {
- type: HANDLE_SELECTION__ACTION,
- selection: SECOND_DIAGRAM,
- };
- const state = reducer(prevState, action);
-
- expect(state).toStrictEqual({
- viewState: PROJECT_LOADED_AND_REPRESENTATION_DISPLAYED__STATE,
- project: representationAndObjectSelectedState.project,
- representations: [...representationAndObjectSelectedState.representations, action.selection],
- displayedRepresentation: action.selection,
- selection: action.selection,
- subscribers: [],
- message: undefined,
- });
- });
-
- it('navigates back to the representation and object selected state after selecting another object', () => {
- const prevState = representationAndObjectSelectedState;
- const action = { type: HANDLE_SELECTION__ACTION, selection: SECOND_OBJECT };
- const state = reducer(prevState, action);
-
- expect(state).toStrictEqual({
- viewState: PROJECT_LOADED_AND_REPRESENTATION_DISPLAYED__STATE,
- project: representationAndObjectSelectedState.project,
- representations: representationAndObjectSelectedState.representations,
- displayedRepresentation: representationAndObjectSelectedState.displayedRepresentation,
- selection: action.selection,
- subscribers: [],
- message: undefined,
- });
- });
-
- it('navigates back to the project loaded and representation displayed state after renaming another representation', () => {
- const prevState = projectLoadedAndrepresentationDisplayedState;
- const action = {
- type: HANDLE_REPRESENTATION_RENAMED__ACTION,
- projectEvent: { representationId: SECOND_DIAGRAM_ID, newLabel: '' },
- };
- const state = reducer(prevState, action);
-
- expect(state).toStrictEqual({
- viewState: PROJECT_LOADED_AND_REPRESENTATION_DISPLAYED__STATE,
- project: projectLoadedAndrepresentationDisplayedState.project,
- representations: projectLoadedAndrepresentationDisplayedState.representations,
- displayedRepresentation: projectLoadedAndrepresentationDisplayedState.displayedRepresentation,
- selection: projectLoadedAndrepresentationDisplayedState.selection,
- subscribers: [],
- message: undefined,
- });
- });
-
- it('updates the list of subscribers', () => {
- const prevState = representationAndObjectSelectedState;
- const subscribers = [{ username: 'jdoe' }];
- const action = { type: HANDLE_SUBSCRIBERS_UPDATED__ACTION, subscribers };
- const state = reducer(prevState, action);
-
- expect(state).toStrictEqual({
- viewState: PROJECT_LOADED_AND_REPRESENTATION_DISPLAYED__STATE,
- project: representationAndObjectSelectedState.project,
- representations: representationAndObjectSelectedState.representations,
- displayedRepresentation: representationAndObjectSelectedState.displayedRepresentation,
- selection: representationAndObjectSelectedState.selection,
- subscribers,
- message: undefined,
- });
- });
-});
diff --git a/frontend/src/views/edit-project/machine.tsx b/frontend/src/views/edit-project/machine.tsx
deleted file mode 100644
index 31aa88480dd..00000000000
--- a/frontend/src/views/edit-project/machine.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-/*******************************************************************************
- * Copyright (c) 2019, 2020 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
- *******************************************************************************/
-export const LOADING__STATE = 'LOADING__STATE';
-export const PROJECT_NOT_FOUND__STATE = 'PROJECT_NOT_FOUND__STATE';
-export const PROJECT_FETCHING_ERROR__STATE = 'PROJECT_FETCHING_ERROR__STATE';
-export const PROJECT_LOADED__STATE = 'PROJECT_LOADED__STATE';
-export const PROJECT_AND_REPRESENTATION_LOADING__STATE = 'PROJECT_AND_REPRESENTATION_LOADING__STATE';
-export const PROJECT_LOADED_AND_REPRESENTATION_DISPLAYED__STATE = 'PROJECT_LOADED_AND_REPRESENTATION_DISPLAYED__STATE';
-
-export const HANDLE_FETCHED_PROJECT__ACTION = 'HANDLE_FETCHED_PROJECT__ACTION';
-export const HANDLE_SELECTION__ACTION = 'HANDLE_SELECTION__ACTION';
-export const HANDLE_REPRESENTATION_RENAMED__ACTION = 'HANDLE_REPRESENTATION_RENAMED__ACTION';
-export const HANDLE_REPRESENTATION_LOADED__ACTION = 'HANDLE_REPRESENTATION_LOADED__ACTION';
-export const HANDLE_SUBSCRIBERS_UPDATED__ACTION = 'HANDLE_SUBSCRIBERS_UPDATED__ACTION';
-
-export const machine = {
- LOADING__STATE: {
- HANDLE_FETCHED_PROJECT__ACTION: [PROJECT_NOT_FOUND__STATE, PROJECT_FETCHING_ERROR__STATE, PROJECT_LOADED__STATE],
- },
- PROJECT_NOT_FOUND__STATE: {},
- PROJECT_FETCHING_ERROR__STATE: {},
- PROJECT_LOADED__STATE: {
- HANDLE_SELECTION__ACTION: [PROJECT_LOADED__STATE, PROJECT_LOADED_AND_REPRESENTATION_DISPLAYED__STATE],
- HANDLE_REPRESENTATION_RENAMED__ACTION: [PROJECT_LOADED__STATE, PROJECT_LOADED_AND_REPRESENTATION_DISPLAYED__STATE],
- },
- PROJECT_AND_REPRESENTATION_LOADING__STATE: {
- HANDLE_FETCHED_PROJECT__ACTION: [
- PROJECT_NOT_FOUND__STATE,
- PROJECT_FETCHING_ERROR__STATE,
- PROJECT_AND_REPRESENTATION_LOADING__STATE,
- ],
- HANDLE_REPRESENTATION_LOADED__ACTION: [PROJECT_LOADED_AND_REPRESENTATION_DISPLAYED__STATE],
- },
- PROJECT_LOADED_AND_REPRESENTATION_DISPLAYED__STATE: {
- HANDLE_SELECTION__ACTION: [PROJECT_LOADED__STATE, PROJECT_LOADED_AND_REPRESENTATION_DISPLAYED__STATE],
- HANDLE_REPRESENTATION_RENAMED__ACTION: [PROJECT_LOADED__STATE, PROJECT_LOADED_AND_REPRESENTATION_DISPLAYED__STATE],
- HANDLE_SUBSCRIBERS_UPDATED__ACTION: [PROJECT_LOADED_AND_REPRESENTATION_DISPLAYED__STATE],
- },
-};
diff --git a/frontend/src/views/edit-project/reducer.tsx b/frontend/src/views/edit-project/reducer.tsx
deleted file mode 100644
index 26843d63273..00000000000
--- a/frontend/src/views/edit-project/reducer.tsx
+++ /dev/null
@@ -1,215 +0,0 @@
-/*******************************************************************************
- * Copyright (c) 2019, 2020 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 {
- machine,
- LOADING__STATE,
- PROJECT_NOT_FOUND__STATE,
- PROJECT_FETCHING_ERROR__STATE,
- PROJECT_LOADED__STATE,
- PROJECT_AND_REPRESENTATION_LOADING__STATE,
- PROJECT_LOADED_AND_REPRESENTATION_DISPLAYED__STATE,
- HANDLE_FETCHED_PROJECT__ACTION,
- HANDLE_SELECTION__ACTION,
- HANDLE_REPRESENTATION_RENAMED__ACTION,
- HANDLE_REPRESENTATION_LOADED__ACTION,
- HANDLE_SUBSCRIBERS_UPDATED__ACTION,
-} from './machine';
-
-export const initialState = {
- viewState: LOADING__STATE,
- project: undefined,
- representations: [],
- selection: undefined,
- displayedRepresentation: undefined,
- subscribers: [],
- message: undefined,
-};
-
-export const initialLoadingState = {
- viewState: PROJECT_AND_REPRESENTATION_LOADING__STATE,
- project: undefined,
- representations: [],
- selection: undefined,
- displayedRepresentation: undefined,
- subscribers: [],
- message: undefined,
-};
-
-export const reducer = (prevState, action) => {
- const supportedActions = machine[prevState.viewState];
- if (!supportedActions[action.type]) {
- console.error(`The state ${prevState.viewState} does not support the action ${action.type}`);
- }
-
- let state = prevState;
- switch (action.type) {
- case HANDLE_FETCHED_PROJECT__ACTION:
- state = handleFetchedProjectAction(prevState, action);
- break;
- case HANDLE_SELECTION__ACTION:
- state = handleSelectionAction(prevState, action);
- break;
- case HANDLE_REPRESENTATION_RENAMED__ACTION:
- state = handleRepresentationRenamedAction(prevState, action);
- break;
- case HANDLE_REPRESENTATION_LOADED__ACTION:
- state = handleRepresentationLoadedAction(prevState, action);
- break;
- case HANDLE_SUBSCRIBERS_UPDATED__ACTION:
- state = handleSubscribersUpdated(prevState, action);
- break;
- default:
- state = prevState;
- }
-
- const newSupportedStates = supportedActions[action.type];
- if (!newSupportedStates || newSupportedStates.indexOf(state.viewState) === -1) {
- console.error(`The state ${state.viewState} should not be accessible with the action ${action.type}`);
- }
- return state;
-};
-
-const handleFetchedProjectAction = (prevState, action) => {
- const { viewState, representations, selection, displayedRepresentation, subscribers, message } = prevState;
- const { response } = action;
-
- let state = undefined;
- if (response.errors) {
- const message = 'An error has occurred while fetching the project. Please contact your administrator.';
- state = { viewState: PROJECT_FETCHING_ERROR__STATE, message };
- } else if (response.data.viewer.project) {
- const { project } = response.data.viewer;
- state = {
- viewState:
- viewState === PROJECT_AND_REPRESENTATION_LOADING__STATE
- ? PROJECT_AND_REPRESENTATION_LOADING__STATE
- : PROJECT_LOADED__STATE,
- project,
- representations,
- selection,
- displayedRepresentation,
- subscribers,
- message,
- };
- } else {
- const message = 'The project requested does not exist';
- state = { viewState: PROJECT_NOT_FOUND__STATE, message };
- }
-
- return state;
-};
-
-const handleSelectionAction = (prevState, action) => {
- const { selection } = action;
- const { viewState, project, representations, displayedRepresentation, subscribers, message } = prevState;
-
- let newRepresentations;
- let newDisplayedRepresentation;
- let newViewState = null;
-
- if (selection?.kind === 'Diagram' || selection?.kind === 'Form') {
- newViewState = PROJECT_LOADED_AND_REPRESENTATION_DISPLAYED__STATE;
- newDisplayedRepresentation = selection;
- newRepresentations = [...representations];
- const selectedRepresentation = representations.find((representation) => selection.id === representation.id);
- if (!selectedRepresentation) {
- newRepresentations = [...representations, selection];
- } else {
- newRepresentations = representations;
- }
- newViewState = PROJECT_LOADED_AND_REPRESENTATION_DISPLAYED__STATE;
- } else {
- // Keep existing representations & displayedRepresentation
- newRepresentations = representations;
- newDisplayedRepresentation = displayedRepresentation;
- if (
- viewState === PROJECT_LOADED__STATE ||
- viewState === PROJECT_AND_REPRESENTATION_LOADING__STATE ||
- viewState === PROJECT_LOADED_AND_REPRESENTATION_DISPLAYED__STATE
- ) {
- newViewState = viewState;
- } else {
- console.error(
- 'Invalid state, the viewState must be PROJECT_LOADED__STATE or PROJECT_AND_REPRESENTATION_LOADING__STATE or PROJECT_LOADED_AND_REPRESENTATION_DISPLAYED__STATE'
- );
- }
- }
-
- return {
- viewState: newViewState,
- project,
- representations: newRepresentations,
- displayedRepresentation: newDisplayedRepresentation,
- selection,
- subscribers,
- message,
- };
-};
-
-const handleRepresentationRenamedAction = (prevState, action) => {
- const { viewState, project, representations, displayedRepresentation, selection, subscribers, message } = prevState;
- const { projectEvent } = action;
- const { representationId, newLabel } = projectEvent;
- let representationToRename = representations.find((r) => r.id === representationId);
- if (representationToRename) {
- representationToRename.label = newLabel;
- }
-
- return {
- viewState,
- project,
- representations,
- displayedRepresentation,
- selection,
- subscribers,
- message,
- };
-};
-
-const handleRepresentationLoadedAction = (prevState, action) => {
- const { viewState, project, representations, displayedRepresentation, selection, subscribers, message } = prevState;
-
- let newViewState = null;
-
- if (viewState === PROJECT_AND_REPRESENTATION_LOADING__STATE) {
- newViewState = PROJECT_LOADED_AND_REPRESENTATION_DISPLAYED__STATE;
- } else {
- console.error('Invalid state, the viewState must be PROJECT_AND_REPRESENTATION_LOADING__STATE');
- }
-
- return {
- viewState: newViewState,
- project,
- representations,
- displayedRepresentation,
- selection,
- subscribers,
- message,
- };
-};
-
-const handleSubscribersUpdated = (prevState, action) => {
- const { subscribers } = action;
- const { viewState, project, representations, selection, displayedRepresentation, message } = prevState;
-
- return {
- viewState,
- project,
- representations,
- selection,
- displayedRepresentation,
- subscribers,
- message,
- };
-};
diff --git a/frontend/src/views/edit-project/OnboardArea.module.css b/frontend/src/workbench/OnboardArea.module.css
similarity index 100%
rename from frontend/src/views/edit-project/OnboardArea.module.css
rename to frontend/src/workbench/OnboardArea.module.css
diff --git a/frontend/src/views/edit-project/OnboardArea.tsx b/frontend/src/workbench/OnboardArea.tsx
similarity index 100%
rename from frontend/src/views/edit-project/OnboardArea.tsx
rename to frontend/src/workbench/OnboardArea.tsx
diff --git a/frontend/src/views/edit-project/RepresentationArea.module.css b/frontend/src/workbench/RepresentationArea.module.css
similarity index 100%
rename from frontend/src/views/edit-project/RepresentationArea.module.css
rename to frontend/src/workbench/RepresentationArea.module.css
diff --git a/frontend/src/views/edit-project/RepresentationArea.tsx b/frontend/src/workbench/RepresentationArea.tsx
similarity index 83%
rename from frontend/src/views/edit-project/RepresentationArea.tsx
rename to frontend/src/workbench/RepresentationArea.tsx
index 33bc5da7881..2126b22a0a8 100644
--- a/frontend/src/views/edit-project/RepresentationArea.tsx
+++ b/frontend/src/workbench/RepresentationArea.tsx
@@ -15,8 +15,7 @@ import { DiagramWebSocketContainer } from 'diagram/DiagramWebSocketContainer';
import { FormWebSocketContainer } from 'form/FormWebSocketContainer';
import PropTypes from 'prop-types';
import React from 'react';
-import { RepresentationNavigation } from 'views/edit-project/RepresentationNavigation';
-import { OnboardArea } from './OnboardArea';
+import { RepresentationNavigation } from 'workbench/RepresentationNavigation';
import styles from './RepresentationArea.module.css';
const propTypes = {
@@ -26,7 +25,6 @@ const propTypes = {
selection: PropTypes.object,
displayedRepresentation: PropTypes.object,
setSelection: PropTypes.func.isRequired,
- setSubscribers: PropTypes.func.isRequired,
};
export const RepresentationArea = ({
projectId,
@@ -35,12 +33,9 @@ export const RepresentationArea = ({
selection,
displayedRepresentation,
setSelection,
- setSubscribers,
}) => {
let content;
- if (!displayedRepresentation) {
- content = ;
- } else if (displayedRepresentation.kind === 'Diagram') {
+ if (displayedRepresentation.kind === 'Diagram') {
content = (
);
} else if (displayedRepresentation.kind === 'Form') {
diff --git a/frontend/src/views/edit-project/RepresentationNavigation.module.css b/frontend/src/workbench/RepresentationNavigation.module.css
similarity index 100%
rename from frontend/src/views/edit-project/RepresentationNavigation.module.css
rename to frontend/src/workbench/RepresentationNavigation.module.css
diff --git a/frontend/src/views/edit-project/RepresentationNavigation.tsx b/frontend/src/workbench/RepresentationNavigation.tsx
similarity index 90%
rename from frontend/src/views/edit-project/RepresentationNavigation.tsx
rename to frontend/src/workbench/RepresentationNavigation.tsx
index 4e22e3f2412..11e7a7301cd 100644
--- a/frontend/src/views/edit-project/RepresentationNavigation.tsx
+++ b/frontend/src/workbench/RepresentationNavigation.tsx
@@ -1,5 +1,5 @@
/*******************************************************************************
- * Copyright (c) 2019, 2020 Obeo.
+ * Copyright (c) 2019, 2021 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
@@ -10,7 +10,7 @@
* Contributors:
* Obeo - initial API and implementation
*******************************************************************************/
-import { Text } from 'core/text/Text';
+import Typography from '@material-ui/core/Typography';
import PropTypes from 'prop-types';
import React from 'react';
import styles from './RepresentationNavigation.module.css';
@@ -20,6 +20,7 @@ const propTypes = {
displayedRepresentation: PropTypes.object,
setSelection: PropTypes.func.isRequired,
};
+
export const RepresentationNavigation = ({ representations, displayedRepresentation, setSelection }) => {
return (
@@ -37,7 +38,7 @@ export const RepresentationNavigation = ({ representations, displayedRepresentat
onClick={() => setSelection({ id, label, kind })}
data-testid={`representation-tab-${label}`}
data-testselected={isSelected}>
- {label}
+ {label}
);
})}
diff --git a/frontend/src/workbench/Workbench.tsx b/frontend/src/workbench/Workbench.tsx
new file mode 100644
index 00000000000..01a4d819ac6
--- /dev/null
+++ b/frontend/src/workbench/Workbench.tsx
@@ -0,0 +1,95 @@
+/*******************************************************************************
+ * Copyright (c) 2021 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 { makeStyles } from '@material-ui/core/styles';
+import { useMachine } from '@xstate/react';
+import { HORIZONTAL, Panels, SECOND_PANEL } from 'core/panels/Panels';
+import { ExplorerWebSocketContainer } from 'explorer/ExplorerWebSocketContainer';
+import { PropertiesWebSocketContainer } from 'properties/PropertiesWebSocketContainer';
+import React, { useEffect } from 'react';
+import { OnboardArea } from 'workbench/OnboardArea';
+import { RepresentationArea } from 'workbench/RepresentationArea';
+import { Selection, WorkbenchProps } from 'workbench/Workbench.types';
+import { UpdateSelectionEvent, WorkbenchContext, WorkbenchEvent, workbenchMachine } from 'workbench/WorkbenchMachine';
+
+const useWorkbenchStyles = makeStyles((theme) => ({
+ main: {
+ display: 'grid',
+ gridTemplateRows: 'minmax(0, 1fr)',
+ gridTemplateColumns: '1fr',
+ },
+}));
+
+export const Workbench = ({
+ editingContextId,
+ initialRepresentationSelected,
+ onRepresentationSelected,
+ readOnly,
+}: WorkbenchProps) => {
+ const classes = useWorkbenchStyles();
+ const [{ context }, dispatch] = useMachine(workbenchMachine, {
+ context: {
+ displayedRepresentation: initialRepresentationSelected,
+ representations: initialRepresentationSelected ? [initialRepresentationSelected] : [],
+ },
+ });
+ const { selection, representations, displayedRepresentation } = context;
+
+ const setSelection = (selection: Selection) => {
+ const updateSelectionEvent: UpdateSelectionEvent = { type: 'UPDATE_SELECTION', selection };
+ dispatch(updateSelectionEvent);
+ };
+
+ useEffect(() => {
+ if (displayedRepresentation !== null && displayedRepresentation.id !== initialRepresentationSelected?.id) {
+ onRepresentationSelected(displayedRepresentation);
+ }
+ }, [onRepresentationSelected, initialRepresentationSelected, displayedRepresentation]);
+
+ const explorer = (
+
+ );
+
+ const properties = ;
+ let main = ;
+ if (displayedRepresentation) {
+ main = (
+
+ );
+ }
+
+ return (
+
+
+