Icon picker at the bottom

docker-compose.snapshots.update.yml

@@ -3,7 +3,7 @@ services:
     e2e:
         image: cypress/included:11.2.0 
         container_name: wisemapping-integration-tests
-        entrypoint: '/bin/sh -c "yarn install && yarn bootstrap && yarn build && yarn test:integration"'
+        entrypoint: '/bin/sh -c "yarn install &&  yarn build && yarn test:integration"'
         working_dir: /e2e
         environment:
             - CYPRESS_imageSnaphots=true

docker-compose.snapshots.yml

@@ -3,7 +3,7 @@ services:
     e2e:
         image: cypress/included:11.2.0
         container_name: wisemapping-integration-tests
-        entrypoint: '/bin/sh -c "yarn bootstrap && yarn build && yarn test:integration"'
+        entrypoint: '/bin/sh -c "yarn build && yarn test:integration"'
         working_dir: /e2e
         environment:
             - CYPRESS_imageSnaphots=true

packages/editor/src/components/action-widget/pane/icon-picker/index.tsx

@@ -54,13 +54,6 @@ const IconPicker = ({ triggerClose, iconModel }: IconPickerProp): ReactElement =
 
   return (
     <Box style={{ padding: '5px' }}>
-      <FormGroup sx={{ align: 'center' }}>
-        <FormControlLabel
-          label={<FormattedMessage id="icon-picker.show-images" defaultMessage="Show images" />}
-          control={<Switch onChange={handleCheck} />}
-        />
-      </FormGroup>
-
       {checked && (
         <EmojiPicker
           onEmojiClick={handleEmojiSelect}
@@ -69,8 +62,13 @@ const IconPicker = ({ triggerClose, iconModel }: IconPickerProp): ReactElement =
           previewConfig={{ showPreview: false }}
         />
       )}
-
       {!checked && <IconImageTab iconModel={iconModel} triggerClose={triggerClose} />}
+      <FormGroup sx={{ float: 'right' }}>
+        <FormControlLabel
+          label={<FormattedMessage id="icon-picker.show-images" defaultMessage="Show images" />}
+          control={<Switch onChange={handleCheck} />}
+        />
+      </FormGroup>
     </Box>
   );
 };

packages/editor/test/playground/map-render/js/MapInfoImpl.ts

@@ -22,11 +22,13 @@ class MapInfoImpl implements MapInfo {
   private title: string;
   private locked: boolean;
   private starred: boolean;
+  private lockedMsg: string | undefined;
 
-  constructor(id: string, title: string, locked: boolean) {
+  constructor(id: string, title: string, locked: boolean, lockedMsg?: string) {
     this.id = id;
     this.title = title;
     this.locked = locked;
+    this.lockedMsg = lockedMsg;
     this.starred = true;
   }
 
@@ -44,7 +46,7 @@ class MapInfoImpl implements MapInfo {
   }
 
   setTitle(value: string): void {
-    throw this.title;
+    throw (this.title = value);
   }
 
   isLocked(): boolean {

packages/editor/test/playground/map-render/js/editorlocked.tsx

@@ -37,15 +37,16 @@ const options: EditorOptions = {
   enableKeyboardEvents: true,
 };
 
-const mapInfo = new MapInfoImpl('welcome', 'Develop WiseMapping', true);
+const mapInfo = new MapInfoImpl('welcome', 'Develop WiseMapping', true, "It's locked !");
 
 const container = document.getElementById('root');
 const root = createRoot(container!);
-root.render(<Editor
+root.render(
+  <Editor
     mapInfo={mapInfo}
     options={options}
     persistenceManager={persistence}
     onAction={(action) => console.log('action called:', action)}
     onLoad={initialization}
-  />
+  />,
 );

packages/editor/test/playground/map-render/js/showcase.tsx

@@ -31,7 +31,6 @@ const initialization = (designer: Designer) => {
 };
 
 const persistence = new LocalStorageManager('samples/{id}.wxml', false, false);
-const mapId = 'welcome';
 const options: EditorOptions = {
   mode: 'showcase',
   locale: 'en',

packages/webapp/cypress/e2e/maps.cy.ts

@@ -1,6 +1,7 @@
 context('Maps Page', () => {
   beforeEach(() => {
     cy.visit('/c/maps');
+    cy.get('.MuiCard-root').should('have.length', 3);
   });
 
   it('should match the snapshot', () => {
@@ -11,11 +12,8 @@ context('Maps Page', () => {
 context('iphone-5 resolution', () => {
   beforeEach(() => {
     cy.viewport('iphone-5');
-    cy.visit('/c/maps', {
-      onLoad: (win) => {
-        win.onerror = null;
-      },
-    });
+    cy.visit('/c/maps');
+    cy.get('.MuiCard-root').should('have.length', 3);
   });
 
   it('Displays mobile menu button', () => {
@@ -41,6 +39,7 @@ context('720p resolution', () => {
   beforeEach(() => {
     cy.viewport(1280, 720);
     cy.visit('/c/maps');
+    cy.get('.MuiCard-root').should('have.length', 3);
   });
 
   it('Displays mobile menu button', () => {

packages/webapp/src/classes/editor-map-info/index.ts

@@ -24,14 +24,14 @@ class MapInfoImpl implements MapInfo {
   private title: string;
   private zoom: number;
   private locked: boolean;
-  private lockedMsg: string;
+  private lockedMsg: string | undefined;
 
   constructor(
     id: number,
     client: Client,
     title: string,
     locked: boolean,
-    lockedMsg: string,
+    lockedMsg: string | undefined,
     zoom: number,
   ) {
     this.id = id;
@@ -62,7 +62,7 @@ class MapInfoImpl implements MapInfo {
     return this.locked;
   }
 
-  getLockedMessage(): string {
+  getLockedMessage(): string | undefined {
     return this.lockedMsg;
   }
 

packages/webapp/src/components/editor-page/index.tsx

@@ -16,7 +16,7 @@
  *   limitations under the License.
  */
 import React, { useEffect } from 'react';
-import Editor from '@wisemapping/editor';
+import Editor, { EditorOptions } from '@wisemapping/editor';
 import {
   EditorRenderMode,
   PersistenceManager,
@@ -136,7 +136,7 @@ const EditorPage = ({ isTryMode }: EditorPropsType): React.ReactElement => {
   const isAccountLoaded = mode === 'showcase' || useFetchAccount;
   const loadCompleted = mode && isAccountLoaded;
 
-  let options, persistence: PersistenceManager;
+  let options: EditorOptions, persistence: PersistenceManager;
   let mapInfo: MapInfo;
   if (loadCompleted) {
     options = EditorOptionsBuilder.build(userLocale.code, mode, hotkey);
@@ -145,7 +145,7 @@ const EditorPage = ({ isTryMode }: EditorPropsType): React.ReactElement => {
       mapId,
       client,
       options.mapTitle,
-      options.isLocked,
+      options.locked,
       options.lockedMsg,
       options.zoom,
     );