test: add cypress test for nextcloud video block and fix error in DX …

…Layout

cypress/e2e/02-dexterity-controlpanel-layout.cy.js

@@ -0,0 +1,76 @@
+import { slateLayoutBeforeEach, slateLayoutAfterEach } from '../support/e2e';
+
+describe('ControlPanel: Dexterity Content-Types Layout', () => {
+  beforeEach(slateLayoutBeforeEach);
+  afterEach(slateLayoutAfterEach);
+
+  it('Edit Blocks Layout for Book', () => {
+    cy.visit('/controlpanel/dexterity-types');
+    cy.waitForResourceToLoad('@navigation');
+    cy.waitForResourceToLoad('@breadcrumbs');
+    cy.waitForResourceToLoad('@actions');
+    cy.waitForResourceToLoad('@types');
+
+    cy.get('a[href="/controlpanel/dexterity-types/book"]').should(
+      'have.text',
+      'book',
+    );
+
+    cy.visit('/controlpanel/dexterity-types/book/layout');
+    cy.get('#page-controlpanel-layout').contains(
+      'Can not edit Layout for book',
+    );
+    cy.get('#page-controlpanel-layout button').click();
+
+    // Wait a bit for draftjs to load, without this the title block
+    // custom placeholder is missing and cypress gives a timeout error
+    cy.wait(1000);
+    cy.get('input[id="field-placeholder"]').type('Book title');
+    cy.get('label[for="field-required"]').click();
+    cy.get('label[for="field-fixed"]').click();
+
+    cy.getSlate().click();
+
+    cy.get('.ui.basic.icon.button.block-add-button:visible').click();
+    cy.get('.blocks-chooser .title').contains('Media').click();
+    cy.get('.content.active.media .button.nextCloudVideo')
+      .contains('Video (NextCloud)')
+      .click({ force: true });
+
+    cy.get('#toolbar-save').click();
+
+    cy.visit('/cypress');
+    cy.waitForResourceToLoad('@navigation');
+    cy.waitForResourceToLoad('@breadcrumbs');
+    cy.waitForResourceToLoad('@actions');
+    cy.waitForResourceToLoad('@types');
+
+     // Intercept cmshare request
+     cy.intercept('GET', 'https://cmshare.eea.europa.eu//download').as(
+      'cmshare',
+    );
+
+    cy.get('button[class="add"]').click();
+    cy.get('#toolbar-add-book').click();
+    cy.get('.block.title').contains('Book title');
+
+    // Change book title
+    cy.clearSlateTitle();
+    cy.getSlateTitle().type('My First Book');
+    cy.get('.documentFirstHeading').contains('My First Book');
+
+    // Add video
+    cy.get('.block.video .toolbar-inner .ui.input').type(
+      'https://cmshare.eea.europa.eu/',
+    );
+    cy.get('.block.video .toolbar-inner .ui.buttons .ui.basic.primary').click();
+    cy.get('.ui.error.message').should('not.exist');
+
+    // Wait for cmshare request
+    cy.wait('@cmshare');
+
+    cy.get('#toolbar-save').click();
+    cy.get('.documentFirstHeading').contains('My First Book');
+    cy.get('.block.video').should('exist');
+  });
+});

cypress/support/e2e.js

@@ -64,6 +64,22 @@ export const slateJsonAfterEach = (contentType = 'slate') => {
   slateAfterEach();
 };
 
+export const slateLayoutBeforeEach = (contentType = 'book') => {
+  cy.autologin();
+  cy.addContentType(contentType);
+  cy.createContent({
+    contentType: 'Document',
+    contentId: 'cypress',
+    contentTitle: 'Cypress',
+  });
+};
+
+export const slateLayoutAfterEach = (contentType = 'book') => {
+  cy.autologin();
+  cy.removeContentType(contentType);
+  cy.removeContent('cypress');
+};
+
 export const getSelectedSlateEditor = () => {
   return cy.get('.slate-editor.selected [contenteditable=true]').click();
 };

src/NextCloud/LayoutSchema.js

@@ -0,0 +1,176 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  NextCloudVideoBlockSettings: {
+    id: 'NextCloudVideo block settings',
+    defaultMessage: 'NextCloudVideo block settings',
+  },
+  Default: {
+    id: 'Default',
+    defaultMessage: 'Default',
+  },
+  AllowOnlyFollowingBlocksTypes: {
+    id: 'Allow only the following blocks types',
+    defaultMessage: 'Allow only the following blocks types',
+  },
+  HelperText: {
+    id: 'Helper text',
+    defaultMessage: 'Helper text',
+  },
+  ShortHintThatDescribesExpectedValueWithinThisBlock: {
+    id: 'A short hint that describes the expected value within this block',
+    defaultMessage:
+      'A short hint that describes the expected value within this block',
+  },
+  Instructions: {
+    id: 'Instructions',
+    defaultMessage: 'Instructions',
+  },
+  DetailedExpectedValueWithinThisBlock: {
+    id: 'Detailed expected value within this block',
+    defaultMessage: 'Detailed expected value within this block',
+  },
+  Required: {
+    id: 'Required',
+    defaultMessage: 'Required',
+  },
+  DontAllowDeletionOfThisBlock: {
+    id: "Don't allow deletion of this block",
+    defaultMessage: "Don't allow deletion of this block",
+  },
+  FixedPosition: {
+    id: 'Fixed position',
+    defaultMessage: 'Fixed position',
+  },
+  DisableDragDropOnThisBlock: {
+    id: 'Disable drag & drop on this block',
+    defaultMessage: 'Disable drag & drop on this block',
+  },
+  FixedLayout: {
+    id: 'Fixed layout',
+    defaultMessage: 'Fixed layout',
+  },
+  FixedlayoutNewPanesTabs: {
+    id:
+      'Fixed layout, New panes (tabs) created by Editor within this block will be ignored',
+    defaultMessage:
+      'Fixed layout, New panes (tabs) created by Editor within this block will be ignored',
+  },
+  DisableNewBlocks: {
+    id: 'Disable new blocks',
+    defaultMessage: 'Disable new blocks',
+  },
+  DisableCreationNewBlocks: {
+    id: 'Disable creation of new blocks after this block',
+    defaultMessage: 'Disable creation of new blocks after this block',
+  },
+  ReadOnly: {
+    id: 'Read-only',
+    defaultMessage: 'Read-only',
+  },
+  DisableEditingBlock: {
+    id: 'Disable editing on this block',
+    defaultMessage: 'Disable editing on this block',
+  },
+  ReadOnlyTitles: {
+    id: 'Read-only titles',
+    defaultMessage: 'Read-only titles',
+  },
+  DisableEditingOnNextCloudVideoTitles: {
+    id: 'Disable editing on NextCloudVideo titles',
+    defaultMessage: 'Disable editing on NextCloudVideo titles',
+  },
+  ReadOnlySettings: {
+    id: 'Read-only settings',
+    defaultMessage: 'Read-only settings',
+  },
+  DisableEditingOnNextCloudVideoBlockSettings: {
+    id: 'Disable editing on NextCloudVideo block settings',
+    defaultMessage: 'Disable editing on NextCloudVideo block settings',
+  },
+  DisableInnerButtons: {
+    id: 'Disable inner buttons',
+    defaultMessage: 'Disable inner buttons',
+  },
+  HideAllBlockRelatedButtonsWithinThisBlock: {
+    id: 'Hide all block related buttons within this block',
+    defaultMessage: 'Hide all block related buttons within this block',
+  },
+});
+
+export default (intl) => ({
+  title: intl.formatMessage(messages.NextCloudVideoBlockSettings),
+  fieldsets: [
+    {
+      id: 'default',
+      title: intl.formatMessage(messages.Default),
+      fields: [
+        'placeholder',
+        'required',
+        'fixed',
+        'fixedLayout',
+        'disableNewBlocks',
+        'disableInnerButtons',
+        'readOnlyTitles',
+        'readOnlySettings',
+        'readOnly',
+      ],
+    },
+  ],
+  properties: {
+    placeholder: {
+      title: intl.formatMessage(messages.HelperText),
+      description: intl.formatMessage(
+        messages.ShortHintThatDescribesExpectedValueWithinThisBlock,
+      ),
+      type: 'string',
+    },
+    required: {
+      title: intl.formatMessage(messages.Required),
+      description: intl.formatMessage(messages.DontAllowDeletionOfThisBlock),
+      type: 'boolean',
+    },
+    fixed: {
+      title: intl.formatMessage(messages.FixedPosition),
+      description: intl.formatMessage(messages.DisableDragDropOnThisBlock),
+      type: 'boolean',
+    },
+    fixedLayout: {
+      title: intl.formatMessage(messages.FixedLayout),
+      description: intl.formatMessage(messages.FixedlayoutNewPanesTabs),
+      type: 'boolean',
+    },
+    disableNewBlocks: {
+      title: intl.formatMessage(messages.DisableNewBlocks),
+      description: intl.formatMessage(messages.DisableCreationNewBlocks),
+      type: 'boolean',
+    },
+    readOnly: {
+      title: intl.formatMessage(messages.ReadOnly),
+      description: intl.formatMessage(messages.DisableEditingBlock),
+      type: 'boolean',
+    },
+    readOnlyTitles: {
+      title: intl.formatMessage(messages.ReadOnlyTitles),
+      description: intl.formatMessage(
+        messages.DisableEditingOnNextCloudVideoTitles,
+      ),
+      type: 'boolean',
+    },
+    readOnlySettings: {
+      title: intl.formatMessage(messages.ReadOnlySettings),
+      description: intl.formatMessage(
+        messages.DisableEditingOnNextCloudVideoBlockSettings,
+      ),
+      type: 'boolean',
+    },
+    disableInnerButtons: {
+      title: intl.formatMessage(messages.DisableInnerButtons),
+      description: intl.formatMessage(
+        messages.HideAllBlockRelatedButtonsWithinThisBlock,
+      ),
+      type: 'boolean',
+    },
+  },
+  required: [],
+});

src/index.js

@@ -1,8 +1,27 @@
 import NextCloudVideoEdit from './NextCloud/NextCloudVideoEdit';
 import NextCloudVideoView from './NextCloud/NextCloudVideoView';
-import VideoBlockSchema from './NextCloud/schema';
+import LayoutSchema from './NextCloud/LayoutSchema';
 import videoSVG from '@plone/volto/icons/videocamera.svg';
 
+import { defineMessages, createIntlCache, createIntl } from 'react-intl';
+
+const messages = defineMessages({
+  NextCloudVideoTitle: {
+    id: 'NextCloudVideo',
+    defaultMessage: 'NextCloudVideo',
+  },
+});
+
+const cache = createIntlCache();
+
+const intl = createIntl(
+  {
+    locale: 'en',
+    messages: messages,
+  },
+  cache,
+);
+
 const applyConfig = (config) => {
   config.blocks.blocksConfig.nextCloudVideo = {
     ...config.blocks.blocksConfig.nextCloudVideo,
@@ -13,7 +32,7 @@ const applyConfig = (config) => {
     view: NextCloudVideoView,
     subtitlesLanguages: [['en', 'English']],
     edit: NextCloudVideoEdit,
-    schema: VideoBlockSchema,
+    schema: LayoutSchema(intl),
     restricted: false,
     mostUsed: false,
     blockHasOwnFocusManagement: false,