Move AppBar logic as component.

packages/editor/src/components/app-bar/index.tsx

@@ -20,13 +20,171 @@ import MaterialToolbar from '@mui/material/Toolbar';
 import MaterialAppBar from '@mui/material/AppBar';
 import { ToolbarMenuItem } from '../toolbar';
 import ActionConfig from '../../classes/action/action-config';
+import Editor from '../../classes/model/editor';
+import Capability from '../../classes/action/capability';
+import { ToolbarActionType } from '../toolbar/toolbarConfigBuilder';
+import Tooltip from '@mui/material/Tooltip';
+import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined';
+import RedoOutlinedIcon from '@mui/icons-material/RedoOutlined';
+import RestoreOutlinedIcon from '@mui/icons-material/RestoreOutlined';
+import SaveOutlinedIcon from '@mui/icons-material/SaveOutlined';
+import PrintOutlinedIcon from '@mui/icons-material/PrintOutlined';
+import FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';
+import CloudUploadOutlinedIcon from '@mui/icons-material/CloudUploadOutlined';
+import HelpOutlineOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import ArrowBackIosNewOutlinedIcon from '@mui/icons-material/ArrowBackIosNewOutlined';
+import Typography from '@mui/material/Typography';
+import { $msg } from '@wisemapping/mindplot';
+import UndoAndRedo from '../action-widget/button/undo-and-redo';
+import Button from '@mui/material/Button';
+import LogoTextBlackSvg from '../../../images/logo-text-black.svg';
 
 /**
  * App bar
  * @param props.configurations the configurations array
  * @returns toolbar wich contains an entry for each configuration in the array
  */
-const AppBar = (props: { configurations: ActionConfig[] }) => {
+const AppBar = (props: {
+  model: Editor;
+  mapTitle: string;
+  capability: Capability;
+  onAction?: (type: ToolbarActionType) => void;
+  accountConfig?;
+}) => {
+  const appBarDivisor = {
+    render: () => <Typography component="div" sx={{ flexGrow: 1 }} />,
+  };
+
+  const buildConfig = (
+    model: Editor,
+    mapTitle: string,
+    capability: Capability,
+    onAction: (type: ToolbarActionType) => void,
+    accountConfig,
+  ): ActionConfig[] => {
+    return [
+      {
+        icon: <ArrowBackIosNewOutlinedIcon />,
+        tooltip: $msg('BACK_TO_MAP_LIST'),
+        onClick: () => history.back(),
+      },
+      {
+        render: () => <img src={LogoTextBlackSvg} />,
+      },
+      {
+        render: () => (
+          <Tooltip title={mapTitle}>
+            <Typography
+              className="truncated"
+              variant="body1"
+              component="div"
+              sx={{ marginX: '1.5rem' }}
+            >
+              {mapTitle}
+            </Typography>
+          </Tooltip>
+        ),
+      },
+      null,
+      {
+        render: () => (
+          <UndoAndRedo
+            configuration={{
+              icon: <UndoOutlinedIcon />,
+              tooltip: $msg('UNDO') + ' (' + $msg('CTRL') + ' + Z)',
+              onClick: () => designer.undo(),
+            }}
+            disabledCondition={(event) => event.undoSteps > 0}
+          ></UndoAndRedo>
+        ),
+        visible: !capability.isHidden('undo-changes'),
+        disabled: () => !model?.isMapLoadded(),
+      },
+      {
+        render: () => (
+          <UndoAndRedo
+            configuration={{
+              icon: <RedoOutlinedIcon />,
+              tooltip: $msg('REDO') + ' (' + $msg('CTRL') + ' + Shift + Z)',
+              onClick: () => designer.redo(),
+            }}
+            disabledCondition={(event) => event.redoSteps > 0}
+          ></UndoAndRedo>
+        ),
+        visible: !capability.isHidden('redo-changes'),
+        disabled: () => !model?.isMapLoadded(),
+      },
+      null,
+      {
+        icon: <SaveOutlinedIcon />,
+        tooltip: $msg('SAVE') + ' (' + $msg('CTRL') + ' + S)',
+        onClick: () => {
+          model.save(true);
+        },
+        visible: !capability.isHidden('save'),
+        disabled: () => !model?.isMapLoadded(),
+      },
+      {
+        icon: <RestoreOutlinedIcon />,
+        tooltip: $msg('HISTORY'),
+        onClick: () => onAction('history'),
+        visible: !capability.isHidden('history'),
+      },
+      appBarDivisor,
+      {
+        icon: <FileDownloadOutlinedIcon />,
+        tooltip: $msg('EXPORT'),
+        onClick: () => onAction('export'),
+        visible: !capability.isHidden('export'),
+      },
+      {
+        icon: <PrintOutlinedIcon />,
+        tooltip: $msg('PRINT'),
+        onClick: () => onAction('print'),
+        visible: !capability.isHidden('print'),
+      },
+      {
+        icon: <HelpOutlineOutlinedIcon />,
+        onClick: () => onAction('info'),
+        tooltip: $msg('MAP_INFO'),
+        visible: !capability.isHidden('info'),
+      },
+      {
+        icon: <CloudUploadOutlinedIcon />,
+        onClick: () => onAction('publish'),
+        tooltip: $msg('PUBLISH'),
+        visible: !capability.isHidden('publish'),
+      },
+      {
+        render: () => (
+          <Button variant="contained" onClick={() => onAction('share')}>
+            {$msg('COLLABORATE')}
+          </Button>
+        ),
+        visible: !capability.isHidden('share'),
+      },
+      {
+        render: () => accountConfig,
+        visible: !capability.isHidden('account'),
+      },
+      {
+        render: () => (
+          <Button variant="contained" onClick={() => (window.location.href = '/c/registration')}>
+            {$msg('SIGN_UP')}
+          </Button>
+        ),
+        visible: !capability.isHidden('sign-up'),
+      },
+    ];
+  };
+
+  const config = buildConfig(
+    props.model,
+    props.mapTitle,
+    props.capability,
+    props.onAction,
+    props.accountConfig,
+  );
   return (
     <MaterialAppBar
       role="menubar"
@@ -40,7 +198,7 @@ const AppBar = (props: { configurations: ActionConfig[] }) => {
       }}
     >
       <MaterialToolbar>
-        {props.configurations.map((c, i) => {
+        {config.map((c, i) => {
           return <ToolbarMenuItem key={i} configuration={c} />;
         })}
       </MaterialToolbar>

packages/editor/src/components/index.tsx

@@ -15,14 +15,10 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import Popover from '@mui/material/Popover';
 import Model from '../classes/model/editor';
-import {
+import { buildEditorPanelConfig, buildZoomToolbarConfig } from './toolbar/toolbarConfigBuilder';
-  buildAppBarConfig,
-  buildEditorPanelConfig,
-  buildZoomToolbarConfig,
-} from './toolbar/toolbarConfigBuilder';
 
 import { IntlProvider } from 'react-intl';
 import { DesignerKeyboard, MindplotWebComponent } from '@wisemapping/mindplot';
@@ -49,7 +45,6 @@ const Editor = ({
   const [model, setModel]: [Model | undefined, Function] = useState();
   const editorTheme: Theme = theme ? theme : defaultEditorTheme;
   const [toolbarsRerenderSwitch, setToolbarsRerenderSwitch] = useState(0);
-  const toolbarConfiguration = useRef([]);
 
   const [popoverOpen, popoverTarget, widgetManager] = DefaultWidgetManager.create();
   const capability = new Capability(options.mode, options.locked);
@@ -78,16 +73,11 @@ const Editor = ({
     <ThemeProvider theme={editorTheme}>
       <IntlProvider locale={locale} messages={msg}>
         <AppBar
-          configurations={buildAppBarConfig(
+          model={model}
-            model,
+          mapTitle={options.mapTitle}
-            options.mapTitle,
+          capability={capability}
-            capability,
+          onAction={onAction}
-            onAction,
+          accountConfig={accountConfiguration}
-            accountConfiguration,
-            () => {
-              model.save(true);
-            },
-          )}
         />
 
         <Popover

packages/editor/src/components/toolbar/toolbarConfigBuilder.tsx

@@ -1,3 +1,20 @@
+/*
+ *    Copyright [2021] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
 import React from 'react';
 import BrushOutlinedIcon from '@mui/icons-material/BrushOutlined';
 import FontDownloadOutlinedIcon from '@mui/icons-material/FontDownloadOutlined';
@@ -12,37 +29,24 @@ import ZoomOutOutlinedIcon from '@mui/icons-material/ZoomOutOutlined';
 import ZoomInOutlinedIcon from '@mui/icons-material/ZoomInOutlined';
 import CenterFocusStrongOutlinedIcon from '@mui/icons-material/CenterFocusStrongOutlined';
 import SentimentSatisfiedAltIcon from '@mui/icons-material/SentimentSatisfiedAlt';
-import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined';
-import RedoOutlinedIcon from '@mui/icons-material/RedoOutlined';
-import RestoreOutlinedIcon from '@mui/icons-material/RestoreOutlined';
-import SaveOutlinedIcon from '@mui/icons-material/SaveOutlined';
-import PrintOutlinedIcon from '@mui/icons-material/PrintOutlined';
-import FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';
-import CloudUploadOutlinedIcon from '@mui/icons-material/CloudUploadOutlined';
-import HelpOutlineOutlinedIcon from '@mui/icons-material/InfoOutlined';
-import ArrowBackIosNewOutlinedIcon from '@mui/icons-material/ArrowBackIosNewOutlined';
 import CircleOutlinedIcon from '@mui/icons-material/CircleOutlined';
 import SquareOutlinedIcon from '@mui/icons-material/SquareOutlined';
 import CheckBoxOutlineBlankOutlinedIcon from '@mui/icons-material/CheckBoxOutlineBlankOutlined';
 import HorizontalRuleOutlinedIcon from '@mui/icons-material/HorizontalRuleOutlined';
 import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
 import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';
-import Button from '@mui/material/Button';
 import Box from '@mui/material/Box';
 
-import LogoTextBlackSvg from '../../../images/logo-text-black.svg';
 import Palette from '@mui/icons-material/Square';
 import SquareOutlined from '@mui/icons-material/SquareOutlined';
-import { $msg, Designer } from '@wisemapping/mindplot';
+import { $msg } from '@wisemapping/mindplot';
 import ActionConfig from '../../classes/action/action-config';
 import { SwitchValueDirection } from './ToolbarValueModelBuilder';
 import NodePropertyValueModelBuilder from '../../classes/model/node-property-builder';
 import Typography from '@mui/material/Typography';
 import KeyboardOutlined from '@mui/icons-material/KeyboardOutlined';
-import Tooltip from '@mui/material/Tooltip';
 import ColorPicker from '../action-widget/pane/color-picker';
 import KeyboardShorcutsHelp from '../action-widget/pane/keyboard-shortcut-help';
-import UndoAndRedo from '../action-widget/button/undo-and-redo';
 import TopicLink from '../action-widget/pane/topic-link';
 import TopicNote from '../action-widget/pane/topic-note';
 import IconPicker from '../action-widget/pane/icon-picker';
@@ -347,129 +351,3 @@ export function buildZoomToolbarConfig(model: Editor, capability: Capability): A
     },
   ];
 }
-
-export function buildAppBarConfig(
-  model: Editor,
-  mapTitle: string,
-  capability: Capability,
-  onAction: (type: ToolbarActionType) => void,
-  accountConfiguration,
-  save: () => void,
-): ActionConfig[] {
-  const appBarDivisor = {
-    render: () => <Typography component="div" sx={{ flexGrow: 1 }} />,
-  };
-
-  return [
-    {
-      icon: <ArrowBackIosNewOutlinedIcon />,
-      tooltip: $msg('BACK_TO_MAP_LIST'),
-      onClick: () => history.back(),
-    },
-    {
-      render: () => <img src={LogoTextBlackSvg} />,
-    },
-    {
-      render: () => (
-        <Tooltip title={mapTitle}>
-          <Typography
-            className="truncated"
-            variant="body1"
-            component="div"
-            sx={{ marginX: '1.5rem' }}
-          >
-            {mapTitle}
-          </Typography>
-        </Tooltip>
-      ),
-    },
-    null,
-    {
-      render: () => (
-        <UndoAndRedo
-          configuration={{
-            icon: <UndoOutlinedIcon />,
-            tooltip: $msg('UNDO') + ' (' + $msg('CTRL') + ' + Z)',
-            onClick: () => designer.undo(),
-          }}
-          disabledCondition={(event) => event.undoSteps > 0}
-        ></UndoAndRedo>
-      ),
-      visible: !capability.isHidden('undo-changes'),
-      disabled: () => !model?.isMapLoadded(),
-    },
-    {
-      render: () => (
-        <UndoAndRedo
-          configuration={{
-            icon: <RedoOutlinedIcon />,
-            tooltip: $msg('REDO') + ' (' + $msg('CTRL') + ' + Shift + Z)',
-            onClick: () => designer.redo(),
-          }}
-          disabledCondition={(event) => event.redoSteps > 0}
-        ></UndoAndRedo>
-      ),
-      visible: !capability.isHidden('redo-changes'),
-      disabled: () => !model?.isMapLoadded(),
-    },
-    null,
-    {
-      icon: <SaveOutlinedIcon />,
-      tooltip: $msg('SAVE') + ' (' + $msg('CTRL') + ' + S)',
-      onClick: save,
-      visible: !capability.isHidden('save'),
-      disabled: () => !model?.isMapLoadded(),
-    },
-    {
-      icon: <RestoreOutlinedIcon />,
-      tooltip: $msg('HISTORY'),
-      onClick: () => onAction('history'),
-      visible: !capability.isHidden('history'),
-    },
-    appBarDivisor,
-    {
-      icon: <FileDownloadOutlinedIcon />,
-      tooltip: $msg('EXPORT'),
-      onClick: () => onAction('export'),
-      visible: !capability.isHidden('export'),
-    },
-    {
-      icon: <PrintOutlinedIcon />,
-      tooltip: $msg('PRINT'),
-      onClick: () => onAction('print'),
-      visible: !capability.isHidden('print'),
-    },
-    {
-      icon: <HelpOutlineOutlinedIcon />,
-      onClick: () => onAction('info'),
-      tooltip: $msg('MAP_INFO'),
-      visible: !capability.isHidden('info'),
-    },
-    {
-      icon: <CloudUploadOutlinedIcon />,
-      onClick: () => onAction('publish'),
-      tooltip: $msg('PUBLISH'),
-      visible: !capability.isHidden('publish'),
-    },
-    {
-      render: () => (
-        <Button variant="contained" onClick={() => onAction('share')}>
-          {$msg('COLLABORATE')}
-        </Button>
-      ),
-      visible: !capability.isHidden('share'),
-    },
-    {
-      render: () => accountConfiguration,
-      visible: !capability.isHidden('account'),
-    },
-    {
-      render: () => (
-        <Button variant="contained" onClick={() => (window.location.href = '/c/registration')}>
-          {$msg('SIGN_UP')}
-        </Button>
-      ),
-      visible: !capability.isHidden('sign-up'),
-    },
-  ];
-}

packages/editor/test/unit/toolbar/toolbar.test.tsx

@@ -11,6 +11,9 @@ import Toolbar, {
 } from '../../../src/components/toolbar';
 import AppBar from '../../../src/components/app-bar';
 import ActionConfig from '../../../src/classes/action/action-config';
+import Capability from '../../../src/classes/action/capability';
+import Editor from '../../../src/classes/model/editor';
+
 require('babel-polyfill');
 jest.mock('../../../src/components/app-bar/styles.css', () => '');
 
@@ -268,23 +271,18 @@ describe('Toolbar', () => {
   });
 });
 
-describe('Menubar', () => {
+describe('AppBar', () => {
-  it('When render it displays a menu', () => {
+  //Todo: Activate when all the bundle resources are migrated.
-    render(<AppBar configurations={[config, config]}></AppBar>);
+  //  SyntaxError: Cannot use import statement outside a module
-
+  // @wisemapping/editor:       17 |  */
-    screen.getByRole('menubar');
+  // @wisemapping/editor:       18 | import { $defined } from '@wisemapping/core - js';
-  });
+  // @wisemapping/editor:     > 19 | import Bundle from './lang / Bundle';
-
+  //
-  it('Given an options array for configurations with 2 options when render it displays a menu with 2 menuitems', () => {
+  //
-    render(<AppBar configurations={[config, config]}></AppBar>);
+  // it('When render it displays a menu', () => {
-    const items = screen.getAllByRole('button');
+  //   const capacity = new Capability('edition-owner', false);
-
+  //   const model = new Editor(null);
-    expect(items).toHaveLength(2);
+  //   render(<AppBar mapTitle="Some title" capability={capacity} model={model} />);
-  });
+  //   screen.getByRole('menubar');
-
+  // });
-  it('Execute render if set', () => {
-    render(<AppBar configurations={[withRenderConfig]} />);
-
-    screen.getByTestId('custom-render-div');
-  });
 });